14
This commit is contained in:
cansnow
+99
-272
@@ -1,42 +1,27 @@
|
||||
<template>
|
||||
<view class="map_page">
|
||||
<uni-nav-bar
|
||||
left-icon="back"
|
||||
@clickLeft="back"
|
||||
statusBar
|
||||
fixed
|
||||
backgroundColor="transparent"
|
||||
>
|
||||
<u-navbar left-icon="arrow-left" @leftClick="back" placeholder bgColor="transparent">
|
||||
<template slot="right">
|
||||
<u-button type="primary" @click="confirm">确定</u-button>
|
||||
<u-button type="primary" class="confirm_btn" size="mini" @click="confirm">确定</u-button>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
<map
|
||||
ref="map"
|
||||
class="map_containter"
|
||||
:latitude="mapCenter.lat"
|
||||
:longitude="mapCenter.lng"
|
||||
:scale="scale"
|
||||
@regionchange="onMapRegionChange"
|
||||
show-location
|
||||
>
|
||||
<!-- 中心点marker -->
|
||||
<cover-view class="center_marker">
|
||||
<cover-image src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='12' fill='%23FF4444' opacity='0.8'/%3E%3Ccircle cx='15' cy='15' r='8' fill='%23FFFFFF'/%3E%3C/svg%3E"></cover-image>
|
||||
</cover-view>
|
||||
</map>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isLoading" class="loading_overlay">
|
||||
<uni-load-more status="loading" content-text="加载中"></uni-load-more>
|
||||
</view>
|
||||
|
||||
<!-- 地址信息展示 -->
|
||||
<view class="address_info">
|
||||
<view class="address_title">位置信息</view>
|
||||
<view class="address_text">{{ currentAddress || '加载中...' }}</view>
|
||||
<view class="coordinates">
|
||||
经度: {{ mapCenter.lng.toFixed(6) }} | 纬度: {{ mapCenter.lat.toFixed(6) }}
|
||||
</u-navbar>
|
||||
<view style="display: flex; flex-direction: column; height: 100%;">
|
||||
<!-- 使用web-view嵌入天地图 -->
|
||||
<ly-map class="ly-map"
|
||||
v-if="lng && lat"
|
||||
@onUserEvent="onUserEvent"
|
||||
ref="map"
|
||||
:lonlat=[lng,lat]
|
||||
:map-key="apikey" />
|
||||
<view class="search_container" v-if="1==2">
|
||||
<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
|
||||
<u-cell-group :customStyle="{backgroundColor:'#FFF'}">
|
||||
<u-cell title="摇一摇" icon="/static/images/workbench/05.png" :size="cellSize"></u-cell>
|
||||
<u-cell title="看一看" icon="/static/images/workbench/06.png" :size="cellSize"></u-cell>
|
||||
<u-cell title="听一听" icon="/static/images/workbench/06.png" :size="cellSize"></u-cell>
|
||||
<u-cell title="附近" icon="/static/images/workbench/08.png" :size="cellSize"></u-cell>
|
||||
<u-cell title="购物" icon="/static/images/workbench/09.png" :size="cellSize"></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -46,184 +31,104 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 地图中心点
|
||||
mapCenter: {
|
||||
lng: 116.397128,
|
||||
lat: 39.916527
|
||||
},
|
||||
// 初始中心点（用于比较）
|
||||
initialCenter: {
|
||||
lng: 116.397128,
|
||||
lat: 39.916527
|
||||
},
|
||||
// 地图缩放级别
|
||||
scale: 16,
|
||||
// 当前地址
|
||||
currentAddress: '北京市朝阳区',
|
||||
// 选中的位置数据
|
||||
selectedPoint: null,
|
||||
// 是否正在加载
|
||||
isLoading: false,
|
||||
// 地图对象
|
||||
mapContext: null,
|
||||
// 地址解析延迟器
|
||||
addressTimer: null,
|
||||
// 高德地图API key（需要替换为实际的key）
|
||||
aMapKey: ''
|
||||
keyword:"",
|
||||
cellSize:"base",
|
||||
apikey:"ecc44b16c51c888d625f0238d678a61b",
|
||||
type:"chooselocation",
|
||||
lng:"",
|
||||
lat:"",
|
||||
address:"",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理定时器
|
||||
if (this.addressTimer) {
|
||||
clearTimeout(this.addressTimer);
|
||||
async onLoad(opt) {
|
||||
if(opt.type){
|
||||
this.type = opt.type;
|
||||
}
|
||||
if(opt.lng){
|
||||
this.lng = opt.lng;
|
||||
}
|
||||
if(opt.lat){
|
||||
this.lat = opt.lat;
|
||||
}
|
||||
if(opt.address){
|
||||
this.address = opt.address;
|
||||
}
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化地图
|
||||
*/
|
||||
initMap() {
|
||||
this.mapContext = uni.createMapContext('map', this);
|
||||
// 获取当前位置权限
|
||||
this.getCurrentLocation();
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取当前位置
|
||||
*/
|
||||
getCurrentLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
this.mapCenter = {
|
||||
lng: res.longitude,
|
||||
lat: res.latitude
|
||||
};
|
||||
this.initialCenter = {
|
||||
lng: res.longitude,
|
||||
lat: res.latitude
|
||||
};
|
||||
// 获取地址
|
||||
this.getAddressFromCoordinates(res.longitude, res.latitude);
|
||||
},
|
||||
fail: (err) => {
|
||||
// 权限拒绝或失败，使用默认位置
|
||||
console.log('获取位置失败，使用默认位置', err);
|
||||
this.getAddressFromCoordinates(this.mapCenter.lng, this.mapCenter.lat);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 地图区域变化时触发
|
||||
*/
|
||||
onMapRegionChange(e) {
|
||||
if (e.type === 'end') {
|
||||
// 获取地图中心点坐标
|
||||
this.mapContext.getCenterLocation({
|
||||
success: (res) => {
|
||||
this.mapCenter = {
|
||||
lng: res.longitude,
|
||||
lat: res.latitude
|
||||
};
|
||||
// 延迟获取地址，避免频繁调用
|
||||
this.debounceGetAddress();
|
||||
// 初始化
|
||||
init() {
|
||||
const _this = this;
|
||||
if(this.type=='chooselocation'){
|
||||
uni.getLocation({
|
||||
success(res) {
|
||||
_this.lng = res.longitude;
|
||||
_this.lat = res.latitude;
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('获取地图中心点失败', err);
|
||||
fail() {
|
||||
_this.lng = 113;
|
||||
_this.lat = 40;
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 防抖获取地址
|
||||
*/
|
||||
debounceGetAddress() {
|
||||
if (this.addressTimer) {
|
||||
clearTimeout(this.addressTimer);
|
||||
onUserEvent(e) {
|
||||
//console.log(e)
|
||||
if(this.type=='chooselocation'){
|
||||
if(e.type == "move"){
|
||||
this.lng = e.lng;
|
||||
this.lat = e.lat;
|
||||
this.$refs.map.setMarkers([
|
||||
{
|
||||
lon: Number(e.lng),
|
||||
lat: Number(e.lat)
|
||||
}
|
||||
]);
|
||||
}
|
||||
}
|
||||
if(this.type=='viewlocation'){
|
||||
}
|
||||
this.addressTimer = setTimeout(() => {
|
||||
this.getAddressFromCoordinates(this.mapCenter.lng, this.mapCenter.lat);
|
||||
}, 500);
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据坐标获取地址（使用高德地图API）
|
||||
*/
|
||||
getAddressFromCoordinates(lng, lat) {
|
||||
// 方法1：使用高德地图逆地理编码API
|
||||
// 注意：需要在高德地图申请API key
|
||||
const aMapUrl = `https://restapi.amap.com/v3/geocode/regeo?location=${lng},${lat}&key=YOUR_AMAP_KEY`;
|
||||
|
||||
// 这里使用本地模拟，实际项目中应该调用真实API
|
||||
this.simulateAddressLookup(lng, lat);
|
||||
},
|
||||
|
||||
/**
|
||||
* 模拟地址查询（实际项目应调用真实的地理编码API）
|
||||
*/
|
||||
simulateAddressLookup(lng, lat) {
|
||||
// 简单的地址模拟逻辑
|
||||
const addresses = [
|
||||
'北京市朝阳区建国路88号',
|
||||
' 北京市东城区天安门广场',
|
||||
'上海市浦东新区陆家嘴环路1088号',
|
||||
'深圳市福田区中心区',
|
||||
'杭州市上城区武林路'
|
||||
];
|
||||
|
||||
// 根据坐标返回对应的地址（这里是随机模拟）
|
||||
const index = Math.floor((lng + lat) % addresses.length);
|
||||
this.currentAddress = addresses[index] || `经度: ${lng.toFixed(6)}, 纬度: ${lat.toFixed(6)}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 确定位置按钮点击
|
||||
*/
|
||||
confirm() {
|
||||
const _this = this;
|
||||
|
||||
// 验证是否有有效的位置数据
|
||||
if (!this.mapCenter.lng || !this.mapCenter.lat) {
|
||||
if (!this.lng || !this.lat) {
|
||||
uni.showToast({
|
||||
title: '位置数据无效',
|
||||
title: '请选择位置',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 保存选中的位置
|
||||
_this.selectedPoint = {
|
||||
lng: this.mapCenter.lng,
|
||||
lat: this.mapCenter.lat,
|
||||
address: this.currentAddress
|
||||
};
|
||||
|
||||
// 通过事件通道返回数据给父页面
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
eventChannel.emit('onConfirm', {
|
||||
lng: this.mapCenter.lng,
|
||||
lat: this.mapCenter.lat,
|
||||
address: this.currentAddress
|
||||
const url=`http://api.tianditu.gov.cn/geocoder?postStr={"lon":${this.lng},"lat":${this.lat},"ver":1}&type=geocode&tk=${this.apikey}`;
|
||||
|
||||
console.log(url);
|
||||
uni.request({
|
||||
url:url,
|
||||
success(res){
|
||||
//console.log(res.data);
|
||||
const result = res.data.result;
|
||||
_this.address = result.formatted_address;
|
||||
console.log( {
|
||||
lng: result.location.lon,
|
||||
lat: result.location.lat,
|
||||
address: result.formatted_address
|
||||
});
|
||||
//return 1;
|
||||
// 通过事件通道返回数据给父页面
|
||||
const eventChannel = _this.getOpenerEventChannel();
|
||||
|
||||
eventChannel.emit('onConfirm', {
|
||||
lng: result.location.lon,
|
||||
lat: result.location.lat,
|
||||
address: result.formatted_address
|
||||
});
|
||||
uni.navigateBack();
|
||||
},
|
||||
});
|
||||
|
||||
// 显示成功提示
|
||||
uni.showToast({
|
||||
title: '位置已确定',
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
});
|
||||
|
||||
// 延迟返回，让用户看到提示
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
return 1;
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回上一页
|
||||
*/
|
||||
@@ -243,91 +148,13 @@
|
||||
background: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.map_containter {
|
||||
|
||||
.map_container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 中心点marker样式
|
||||
.center_marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: -15px;
|
||||
margin-top: -15px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
|
||||
cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: bounce 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载覆盖层
|
||||
.loading_overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
// 地址信息展示框
|
||||
.address_info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 12px 16px;
|
||||
z-index: 99;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.address_title {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.address_text {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 跳动动画
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.confirm_btn{
|
||||
padding: 30rpx 10rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="voice_title" @touchstart.stop.prevent="startVoice"
|
||||
@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
|
||||
@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
|
||||
<text>{{ voiceTitle }}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions,mapGetters} from "vuex";
|
||||
export default {
|
||||
name:"Recoder",
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recording:false,
|
||||
sendMsgTimmer: null, //发送时间定时器
|
||||
sendDuring: 0, //发送时间计数器 1分钟以内的信息不显示时间
|
||||
sendTimeBetween: 60, //发送信息显示的间隔，60秒以内信息不显示发送时间
|
||||
voiceTitle:"点击录音",
|
||||
AudioExam:null,
|
||||
isStopVoice : false,
|
||||
voiceCanSend : true,
|
||||
voiceIconText : "正在录音...",
|
||||
PointX : 0,
|
||||
PointY : 0,
|
||||
voiceInterval:null,
|
||||
voiceTime:0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
voiceIconText(nv,ov){
|
||||
this.$emit('RecodeEvent',{type:"voiceIconTextChange",text:nv})
|
||||
},
|
||||
recording(nv,ov){
|
||||
this.$emit('RecodeEvent',{type:"recordingStateChange",state:nv})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const _this = this;
|
||||
//录音器，getRecorderManager不支持H5
|
||||
// #ifdef APP-PLUS
|
||||
//获取全局唯一的录音管理器（https://uniapp.dcloud.net.cn/api/media/record-manager.html#getrecordermanager）
|
||||
_this.Recorder = uni.getRecorderManager();
|
||||
//录音开始事件
|
||||
_this.Recorder.onStart(e => {
|
||||
_this.beginVoice();
|
||||
});
|
||||
//录音结束事件
|
||||
_this.Recorder.onStop(res => {
|
||||
clearInterval(_this.voiceInterval);
|
||||
_this.handleRecorder(res);
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
...mapActions("message", ["updateCurrentMsg"]),
|
||||
/*----------------------------------------------------（H5不支持）录音相关 start-------------------------------------- */
|
||||
//准备开始录音
|
||||
startVoice(e) {
|
||||
//如果音频正在播放 先暂停。
|
||||
this.updateCurrentMsg={clientMsgID:""};
|
||||
this.recording = true;
|
||||
this.isStopVoice = false;
|
||||
this.voiceCanSend = true;
|
||||
this.voiceIconText = "正在录音..."
|
||||
this.PointY = e.touches[0].clientY;
|
||||
this.Recorder.start({
|
||||
format: 'mp3'
|
||||
});
|
||||
},
|
||||
//录音已经开始
|
||||
beginVoice() {
|
||||
let that = this;
|
||||
if (that.isStopVoice) {
|
||||
that.Recorder.stop();
|
||||
return;
|
||||
}
|
||||
that.voiceTitle = '松开 结束'
|
||||
that.voiceInterval = setInterval(() => {
|
||||
console.log("that.voiceTime", that.voiceTime);
|
||||
if (that.voiceTime > 49) {
|
||||
that.voiceIconText = "录音结束倒计时[" + (60 - that.voiceTime) + "]s";
|
||||
};
|
||||
if (that.voiceTime == 60) {
|
||||
clearInterval(that.voiceInterval);
|
||||
that.endVoice();
|
||||
}
|
||||
that.voiceTime++;
|
||||
}, 1000)
|
||||
},
|
||||
//move 正在录音中
|
||||
moveVoice(e) {
|
||||
const PointY = e.touches[0].clientY;
|
||||
const slideY = this.PointY - PointY;
|
||||
if (slideY > uni.upx2px(120)) {
|
||||
this.voiceCanSend = false;
|
||||
this.voiceIconText = '松开手指 取消发送 '
|
||||
} else if (slideY > uni.upx2px(60)) {
|
||||
this.voiceCanSend = true;
|
||||
this.voiceIconText = '手指上滑 取消发送 '
|
||||
} else {
|
||||
this.voiceIconText = '正在录音... '
|
||||
}
|
||||
},
|
||||
//结束录音
|
||||
endVoice() {
|
||||
this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
|
||||
this.Recorder.stop();
|
||||
this.voiceTitle = '按住 说话'
|
||||
},
|
||||
//录音被打断
|
||||
cancelVoice(e) {
|
||||
console.log("路由被打断", e);
|
||||
this.voiceTime = 0;
|
||||
this.voiceTitle = '按住 说话';
|
||||
this.voiceCanSend = false;
|
||||
this.Recorder.stop();
|
||||
},
|
||||
//处理录音文件
|
||||
handleRecorder({tempFilePath,duration }) {
|
||||
if (this.voiceTime < 1) {
|
||||
this.voiceIconText = "说话时间过短";
|
||||
setTimeout(() => {
|
||||
this.recording = false;
|
||||
}, 500)
|
||||
return;
|
||||
}
|
||||
let contentDuration = this.voiceTime;
|
||||
this.voiceTime = 0;
|
||||
this.recording = false;
|
||||
clearInterval(this.voiceInterval);
|
||||
//console.log("录音文件", tempFilePath);
|
||||
//console.log("是否发送语音信息", this.voiceCanSend);
|
||||
let voiceFile = {
|
||||
tempFilePath: tempFilePath,
|
||||
contentDuration: Math.ceil(contentDuration),
|
||||
anmitionPlay: false,
|
||||
};
|
||||
if (this.voiceCanSend) {
|
||||
//console.log("=====上传语音文件，并发送语音信息====");
|
||||
this.$emit('RecodeEvent',{type:"sendVoiceMessage",audio:voiceFile})
|
||||
return;
|
||||
} else {
|
||||
console.log("=====已经取消发送语音信息====")
|
||||
return;
|
||||
}
|
||||
}
|
||||
/*-------------------------------------录音相关方法块 end---------------------------------------------------*/
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.voice_title {
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
border-radius: 12rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -114,10 +114,6 @@
|
||||
@include vCenterBox();
|
||||
flex-direction: column;
|
||||
|
||||
&_single {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.conversation_info {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@@ -126,7 +122,6 @@
|
||||
.title {
|
||||
@include nomalEllipsis();
|
||||
max-width: 280rpx;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
<template>
|
||||
<view class="at_text_message_container bg_container">
|
||||
消息
|
||||
<u-parse :content="getContent" :previewImg="false" :showImgMenu="false" selectable></u-parse>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
parseBr
|
||||
} from "@/util/common";
|
||||
export default {
|
||||
name: "AtTextMessageRender",
|
||||
components: {},
|
||||
@@ -12,6 +15,11 @@
|
||||
message: Object,
|
||||
conversationID:String,
|
||||
},
|
||||
computed: {
|
||||
getContent() {
|
||||
return parseBr(this.message.textElem?.content);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
@@ -1,10 +1,34 @@
|
||||
<template>
|
||||
<view class="location_message_container bg_container">
|
||||
消息
|
||||
<u--image
|
||||
:showLoading="true"
|
||||
:width="selfWidth"
|
||||
:height="maxHeight"
|
||||
mode="widthFix"
|
||||
v-if="src"
|
||||
:src="src"
|
||||
@load="onLoaded"
|
||||
@click="clickMediaItem">
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="red"></u-loading-icon>
|
||||
</template>
|
||||
</u--image>
|
||||
<u--image
|
||||
v-else
|
||||
:showLoading="true"
|
||||
:width="selfWidth"
|
||||
mode="widthFix"
|
||||
src="/static/images/sync_error.png">
|
||||
</u--image>
|
||||
<u--text class="address" :style="{
|
||||
width:selfWidth+'px'
|
||||
}" :lines="1" :size="20" :text="desc"></u--text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import util from "@/util"
|
||||
import md5 from "md5";
|
||||
export default {
|
||||
name: "LocationMessageRender",
|
||||
components: {},
|
||||
@@ -13,12 +37,85 @@
|
||||
conversationID:String,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
selfWidth:200,
|
||||
loadingWidth: "200px",
|
||||
src:"",
|
||||
coverDownloading:false,
|
||||
coverDownloadProgress:"",
|
||||
apisrc:"",
|
||||
maxHeight:"",
|
||||
desc:""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
let loc = this.message.locationElem;
|
||||
this.desc = loc.description;
|
||||
this.apisrc = "http://api.tianditu.gov.cn/staticimage?"
|
||||
+"center="+loc.longitude+","+loc.latitude
|
||||
+"&width=400"
|
||||
+"&height=300"
|
||||
+"&zoom=10"
|
||||
+"&markers="+loc.longitude+","+loc.latitude
|
||||
+"&tk=5255a4be64441ba9fa2ebe605ca472bf";
|
||||
//
|
||||
//this.apisrc="http://192.168.1.222/staticimage.png";
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
getImageInfo(src){
|
||||
const _this = this;
|
||||
uni.getImageInfo({
|
||||
src:src,
|
||||
success(res) {
|
||||
const imageHeight = res.height;
|
||||
const imageWidth = res.width;
|
||||
const aspectRatio = imageHeight / imageWidth;
|
||||
_this.maxHeight = (_this.selfWidth * aspectRatio);
|
||||
console.log(res)
|
||||
_this.src = src;
|
||||
}
|
||||
})
|
||||
},
|
||||
async init(){
|
||||
const self = this;
|
||||
let url = "";
|
||||
// 如果有远程 snapshotUrl，则下载到 coverCachePath
|
||||
const snapshotUrl = this.apisrc ;
|
||||
const key = md5(snapshotUrl || '');
|
||||
const dir_name = `${this.conversationID}`;
|
||||
const save_file_name = `loc_${key}.png`;
|
||||
const coverCachePath = `${dir_name}/${save_file_name}`;
|
||||
if (typeof plus === 'undefined' || !coverCachePath) return;
|
||||
self.coverDownloading = true;
|
||||
util.cacheFile(snapshotUrl,coverCachePath,(fn)=>{
|
||||
self.coverDownloading = false;
|
||||
self.getImageInfo(fn);
|
||||
console.log(fn);
|
||||
},(e)=>{
|
||||
console.log(e);
|
||||
},(e)=>{
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
clickMediaItem() {
|
||||
let loc = this.message.locationElem;
|
||||
uni.navigateTo({
|
||||
url:"/pages/common/map?type=viewlocation&lng="+loc.longitude+"&lat="+loc.latitude+"&address="+loc.description
|
||||
})
|
||||
},
|
||||
onLoaded() {
|
||||
this.loadingWidth = "auto";
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.location_message_container{
|
||||
.address{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -13,6 +13,13 @@
|
||||
<u-loading-icon color="red"></u-loading-icon>
|
||||
</template>
|
||||
</u--image>
|
||||
<u--image
|
||||
v-else
|
||||
:showLoading="true"
|
||||
width="120"
|
||||
mode="widthFix"
|
||||
src="/static/images/sync_error.png">
|
||||
</u--image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -54,41 +61,22 @@
|
||||
// 如果有远程 snapshotUrl，则下载到 coverCachePath
|
||||
const snapshotUrl = (this.message.pictureElem.snapshotPicture?.url ?? this.message.pictureElem.sourcePath );
|
||||
const key = md5(snapshotUrl || '');
|
||||
this.coverCachePath = `_doc/${this.conversationID}/img_${key}.jpg`;
|
||||
if (typeof plus === 'undefined' || !this.coverCachePath) return;
|
||||
try {
|
||||
// 检查封面是否存在
|
||||
const coverExists = await util.fileExsit(self.coverCachePath);
|
||||
this.coverExists = !!coverExists;
|
||||
if (this.coverExists) {
|
||||
this.src = this.coverCachePath;
|
||||
return;
|
||||
}
|
||||
if (!snapshotUrl) {
|
||||
this.src="/static/images/sync_error.png";
|
||||
return;
|
||||
}
|
||||
this.coverDownloading = true;
|
||||
await new Promise((resolve, reject) => {
|
||||
util.downloadFile(snapshotUrl, self.coverCachePath, function(localPath) {
|
||||
self.coverDownloading = false;
|
||||
self.coverExists = true;
|
||||
resolve(localPath);
|
||||
}, function(err) {
|
||||
self.coverDownloading = false;
|
||||
reject(err);
|
||||
}, function(progress) {
|
||||
self.coverDownloadProgress = progress;
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
this.coverDownloading = false;
|
||||
}
|
||||
this.coverCachePath = `${this.conversationID}/img_${key}.jpg`;
|
||||
util.cacheFile(snapshotUrl,this.coverCachePath,(e)=>{
|
||||
self.coverDownloading = false;
|
||||
self.src = coverCachePath;
|
||||
console.log(e);
|
||||
},(e)=>{
|
||||
console.log(e);
|
||||
},(e)=>{
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
clickMediaItem() {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: [this.message.pictureElem.sourcePicture.url],
|
||||
//urls: [this.message.pictureElem.sourcePicture.url],
|
||||
urls: ["_doc/"+this.coverCachePath],
|
||||
indicator: "none",
|
||||
});
|
||||
},
|
||||
@@ -104,21 +92,5 @@
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.play_icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.video_duration {
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
right: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="text_message_container bg_container">
|
||||
<mp-html :previewImg="false" :showImgMenu="false" :lazyLoad="false" selectable :content="getContent" />
|
||||
<u-parse :content="getContent" :previewImg="false" :showImgMenu="false" selectable></u-parse>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -96,9 +96,7 @@
|
||||
coverDownloadProgress: 0,
|
||||
videoDownloading: false,
|
||||
videoDownloadProgress: 0,
|
||||
coverExists: false,
|
||||
videoExists: false,
|
||||
coverCachePath:"",
|
||||
videoCachePath:"",
|
||||
previewVideoFlag: false,
|
||||
previewVideoSrc: "",
|
||||
@@ -121,44 +119,19 @@
|
||||
// 如果有远程 snapshotUrl，则下载到 coverCachePath
|
||||
const snapshotUrl = this.message?.videoElem?.snapshotUrl;
|
||||
const key = md5(this.message?.videoElem?.videoUrl || '');
|
||||
this.coverCachePath = `_doc/${this.conversationID}/cover_${key}.jpg`;
|
||||
this.videoCachePath = `_doc/${this.conversationID}/${key}.mp4`;
|
||||
const coverExists = await util.fileExsit(this.coverCachePath);
|
||||
|
||||
// 自动缓存封面到 this.coverCachePath
|
||||
const self = this;
|
||||
if (typeof plus === 'undefined' || !this.coverCachePath) return;
|
||||
try {
|
||||
// 检查封面是否存在
|
||||
const coverExists = await util.fileExsit(self.coverCachePath);
|
||||
this.coverExists = !!coverExists;
|
||||
// 同时检查视频缓存是否存在
|
||||
const vidExists = await util.fileExsit(self.videoCachePath);
|
||||
this.videoExists = !!vidExists;
|
||||
if (this.coverExists) {
|
||||
this.src = this.coverCachePath;
|
||||
return;
|
||||
}
|
||||
if (!snapshotUrl) {
|
||||
this.src="/static/images/sync_error.png";
|
||||
return;
|
||||
}
|
||||
this.coverDownloading = true;
|
||||
await new Promise((resolve, reject) => {
|
||||
util.downloadFile(snapshotUrl, self.coverCachePath, function(localPath) {
|
||||
self.coverDownloading = false;
|
||||
self.coverExists = true;
|
||||
resolve(localPath);
|
||||
}, function(err) {
|
||||
self.coverDownloading = false;
|
||||
reject(err);
|
||||
}, function(progress) {
|
||||
self.coverDownloadProgress = progress;
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
this.coverDownloading = false;
|
||||
}
|
||||
const coverCachePath = `${this.conversationID}/cover_${key}.jpg`;
|
||||
this.videoCachePath = `${this.conversationID}/${key}.mp4`;
|
||||
this.videoExists = await util.fileExists(this.videoCachePath);
|
||||
self.coverDownloading = true;
|
||||
util.cacheFile(snapshotUrl,coverCachePath,(e)=>{
|
||||
self.coverDownloading = false;
|
||||
self.src = coverCachePath;
|
||||
console.log(e);
|
||||
},(e)=>{
|
||||
console.log(e);
|
||||
},(e)=>{
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
clickMediaItem() {
|
||||
uni.previewImage({
|
||||
@@ -173,7 +146,7 @@
|
||||
onOverlayClick() {
|
||||
// 点击覆盖层：如果视频已缓存则直接播放，否则开始下载
|
||||
if (this.videoExists) {
|
||||
this.playVideo(this.videoCachePath);
|
||||
this.playVideo("_doc/"+this.videoCachePath);
|
||||
return;
|
||||
}
|
||||
const url = this.message?.videoElem?.videoUrl || this.message?.videoElem?.videoPath;
|
||||
@@ -186,7 +159,7 @@
|
||||
util.downloadFile(url, this.videoCachePath, (localPath) => {
|
||||
this.videoDownloading = false;
|
||||
this.videoExists = true;
|
||||
this.playVideo(localPath);
|
||||
this.playVideo("_doc/"+localPath);
|
||||
}, (err) => {
|
||||
this.videoDownloading = false;
|
||||
uni.showToast({ title: '下载失败' });
|
||||
|
||||
@@ -1,24 +1,144 @@
|
||||
<template>
|
||||
<view class="voice_message_container bg_container">
|
||||
消息
|
||||
<view @tap="handleAudio"
|
||||
:class="{'content-audio-container':true,'chat-audio-container-me':true}"
|
||||
:style="'width:'+((message.soundElem.duration)*2+130)+'rpx'">
|
||||
<view class="voice_icon"
|
||||
:class="[
|
||||
{ voice_icon_right: isSender },
|
||||
{ voice_icon_left: !isSender },
|
||||
{ voice_icon_right_an: isSender && message.clientMsgID == storeCurrentMsg.clientMsgID},
|
||||
{ voice_icon_left_an: !isSender && message.clientMsgID == storeCurrentMsg.clientMsgID }
|
||||
]">
|
||||
</view>
|
||||
<view class="">{{message.soundElem.duration}}s</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>v
|
||||
|
||||
<script>
|
||||
import {mapGetters,mapActions} from "vuex";
|
||||
import util from "@/util"
|
||||
import md5 from "md5";
|
||||
export default {
|
||||
name: "VoiceMessageRender",
|
||||
components: {},
|
||||
props: {
|
||||
message: Object,
|
||||
isSender: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
conversationID:String,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
console.log(this.message);
|
||||
return {
|
||||
src:"",
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters(["storeCurrentMsg"]),
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
|
||||
async init(){
|
||||
console.log(this.message);
|
||||
const self = this;
|
||||
let audio = this.message.soundElem;
|
||||
//soundPath
|
||||
// 如果有远程 snapshotUrl，则下载到 cachePath
|
||||
const snapshotUrl = audio.sourceUrl;
|
||||
const key = md5(snapshotUrl || '');
|
||||
const save_file_name = `audio_${key}.${audio.soundType}`;
|
||||
const cachePath = `${this.conversationID}/${save_file_name}`;
|
||||
if (typeof plus === 'undefined' || !cachePath) return;
|
||||
util.cacheFile(snapshotUrl,cachePath,(fn)=>{
|
||||
self.src = fn;
|
||||
console.log(fn);
|
||||
},(e)=>{
|
||||
console.log(e);
|
||||
},(e)=>{
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
handleAudio(){
|
||||
const event = {
|
||||
message:this.message,
|
||||
src:this.src,
|
||||
type:'audio_msg_click'
|
||||
};
|
||||
this.$emit("messageEvent",event);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
//语音信息样式
|
||||
.content-audio-container {
|
||||
border-radius: 10rpx;
|
||||
padding: 0 20rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.voice_icon {
|
||||
height: 34rpx;
|
||||
width: 34rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.voice_icon_right {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-3.png');
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.voice_icon_left {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-3.png');
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.voice_icon_right_an {
|
||||
animation: voiceAn_right 1s linear alternate infinite;
|
||||
}
|
||||
|
||||
.voice_icon_left_an {
|
||||
animation: voiceAn_left 1s linear alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes voiceAn_right {
|
||||
0% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-1.png');
|
||||
}
|
||||
|
||||
50% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-2.png');
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-3.png');
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes voiceAn_left {
|
||||
0% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-1.png');
|
||||
}
|
||||
|
||||
50% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-2.png');
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-3.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -16,7 +16,12 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="message_content_wrap message_content_wrap_shadow" :id="`message_content_wrap_${source.clientMsgID}`" @longtap.stop.prevent="longtapEvent($event)">
|
||||
<component :is="component" :message="source" :conversationID="conversationID"></component>
|
||||
<component :is="component"
|
||||
@messageEvent="onMessageEvent"
|
||||
:isSender="isSender"
|
||||
:message="source"
|
||||
:conversationID="conversationID"
|
||||
></component>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -172,7 +177,9 @@
|
||||
console.log('longtapEvent');
|
||||
this.$emit('userEvent',{type:"longtapMsgContent"},this.source);
|
||||
},
|
||||
|
||||
onMessageEvent(e){
|
||||
this.$emit('userEvent',e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -295,7 +302,7 @@
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.bg_container {
|
||||
border-radius: 12rpx 0 12rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #94ec68 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,14 +44,47 @@
|
||||
selectFlag: false,
|
||||
selectItems: [],
|
||||
forwardItems: [],
|
||||
forwardMerge: false
|
||||
forwardMerge: false,
|
||||
Audio:null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentConversation","storeCurrentMsg",'storeCurrentMsgID'
|
||||
]),
|
||||
},
|
||||
created() {
|
||||
this.Audio = uni.createInnerAudioContext(); //音频
|
||||
/*
|
||||
设置音频播放模式，可取值：
|
||||
"ambient" - 不中止其他声音播放，不能后台播放，静音后无声音；
|
||||
"soloAmbient" - 中止其他声音播放，不能后台播放，静音后无声音；
|
||||
"playback" - 中止其他声音，可以后台播放，静音后有声音。
|
||||
默认值为"playback"。
|
||||
*/
|
||||
this.Audio.sessionCategory="soloAmbient";
|
||||
this.Audio.onError((r)=>{
|
||||
console.log(r);
|
||||
this.updateCurrentMsg({});
|
||||
})
|
||||
this.Audio.onEnded((r)=>{
|
||||
console.log(r);
|
||||
this.updateCurrentMsg({});
|
||||
})
|
||||
},
|
||||
watch:{
|
||||
storeCurrentMsgID(nv,ov){
|
||||
if(nv!=ov && nv){
|
||||
if(this.storeCurrentMsg.soundElem.soundPath){
|
||||
this.Audio.src= this.storeCurrentMsg.soundElem.soundPath;
|
||||
this.Audio.play();
|
||||
return ;
|
||||
}
|
||||
this.updateCurrentMsg({});
|
||||
}
|
||||
console.log(nv,ov,this.Audio,this.storeCurrentMsg);
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
//console.log("onload");
|
||||
this.setPageListener();
|
||||
@@ -62,16 +95,25 @@
|
||||
onUnload() {
|
||||
//console.log("unload");
|
||||
this.disposePageListener();
|
||||
markConversationAsRead({
|
||||
...this.$store.getters.storeCurrentConversation,
|
||||
},
|
||||
true
|
||||
);
|
||||
markConversationAsRead({...this.$store.getters.storeCurrentConversation,},true);
|
||||
this.resetConversationState();
|
||||
this.resetMessageState();
|
||||
// #ifdef APP-PLUS
|
||||
if (this.Audio) {
|
||||
this.Audio.stop();
|
||||
this.Audio.destroy();
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onHide() {
|
||||
// #ifdef APP-PLUS
|
||||
if (this.Audio) {
|
||||
this.Audio.stop();
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
...mapActions("message", ["resetMessageState", "deleteMessages", "pushNewMessage", "updateOneMessage"]),
|
||||
...mapActions("message", ["updateCurrentMsg","resetMessageState", "deleteMessages", "pushNewMessage", "updateOneMessage"]),
|
||||
...mapActions("conversation", ["resetConversationState"]),
|
||||
scrollToBottom(isRecv = false) {
|
||||
this.$refs.chatingListRef.scrollToBottom(false, isRecv);
|
||||
@@ -177,7 +219,6 @@
|
||||
if (!founded) {
|
||||
arr.push(data);
|
||||
}
|
||||
console.log(arr.length);
|
||||
this.selectItems = [...arr];
|
||||
}
|
||||
return;
|
||||
@@ -258,7 +299,14 @@
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(e.type == 'audio_msg_click'){
|
||||
if(_this.storeCurrentMsgID){
|
||||
_this.updateCurrentMsg({clientMsgID:""});
|
||||
}else{
|
||||
_this.updateCurrentMsg(e.message);
|
||||
}
|
||||
return ;
|
||||
}
|
||||
if (e.type == 'longtapMsgContent') {
|
||||
let menu = [];
|
||||
if (data.contentType == MessageType.TextMessage) {
|
||||
|
||||
@@ -81,10 +81,10 @@
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
uni.switchTab({
|
||||
url:"/pages/profile/index/index"
|
||||
})
|
||||
//prepareConversationState(this.storeConversationList[0]);
|
||||
// uni.switchTab({
|
||||
// url:"/pages/profile/index/index"
|
||||
// })
|
||||
prepareConversationState(this.storeConversationList[1]);
|
||||
},1000)
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
<image style="width: 46px; height: 46px" src="@/static/images/single_setting_add.png" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-gap></u-gap>
|
||||
<uni-list>
|
||||
<uni-list-item title="查找聊天内容" to=""></uni-list-item>
|
||||
<uni-list-item title="查找聊天内容" :to="'/pages/common/search/index?type=conversation&conversationID='+storeCurrentConversation.conversationID" showArrow></uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap></u-gap>
|
||||
<uni-list>
|
||||
@@ -103,7 +103,6 @@
|
||||
}
|
||||
|
||||
.setting_row {
|
||||
margin: 24rpx 24rpx 0 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -23,9 +23,22 @@
|
||||
<uni-list-item title="摇一摇" thumb="/static/images/workbench/05.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
<uni-list-item title="看一看" thumb="/static/images/workbench/06.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
<uni-list-item title="听一听" thumb="/static/images/workbench/06.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
<uni-list-item title="附近" thumb="/static/images/workbench/08.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
<uni-list-item title="附近" thumb="/static/images/workbench/08.png" :thumbSize="thumbSize" to="/pages/workbench/near/near" showArrow></uni-list-item>
|
||||
<uni-list-item title="购物" thumb="/static/images/workbench/09.png" :thumbSize="thumbSize" to="/pages/workbench/friend-circle/friend-circle" showArrow></uni-list-item>
|
||||
</uni-list>
|
||||
<u-cell-group :customStyle="{backgroundColor:'#FFF'}">
|
||||
<u-cell
|
||||
title="扫一扫"
|
||||
icon="/static/images/workbench/03.png" :size="cellSize"
|
||||
isLink
|
||||
@click="scan"
|
||||
></u-cell>
|
||||
<u-cell title="摇一摇" icon="/static/images/workbench/05.png" :size="cellSize" url="/pages/workbench/friend-circle/friend-circle" isLink></u-cell>
|
||||
<u-cell title="看一看" icon="/static/images/workbench/06.png" :size="cellSize" url="/pages/workbench/friend-circle/friend-circle" isLink></u-cell>
|
||||
<u-cell title="听一听" icon="/static/images/workbench/06.png" :size="cellSize" url="/pages/workbench/friend-circle/friend-circle" isLink></u-cell>
|
||||
<u-cell title="附近" icon="/static/images/workbench/08.png" :size="cellSize" url="/pages/workbench/near/near" isLink></u-cell>
|
||||
<u-cell title="购物" icon="/static/images/workbench/09.png" :size="cellSize" url="/pages/workbench/friend-circle/friend-circle" isLink></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -33,7 +46,8 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
thumbSize:"base"
|
||||
thumbSize:"base",
|
||||
cellSize:"large"
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="near-item" :index="index">
|
||||
<view @tap="linkToBusinessCard(item.user_id)">
|
||||
<MyAvatar :src="item.user.avatar" :desc="item.user.nickname || item.user.id" :isGroup="false" size="48"></MyAvatar>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="content-name" @tap="linkToBusinessCard(item.user_id)">{{ item.user.nickname || item.user.remark }}</view>
|
||||
<view class="content-desc">
|
||||
<u--text :lines="5" :text="item.body" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import util from "@/util/index.js";
|
||||
export default{
|
||||
components:{MyAvatar},
|
||||
props:{
|
||||
index:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
item:{
|
||||
type:Object,
|
||||
default(){
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selfInfo() {
|
||||
return this.$store.getters.storeSelfInfo;
|
||||
},
|
||||
},
|
||||
data(){
|
||||
//console.log(this.item);
|
||||
return {
|
||||
girdItemCustomStyle:{
|
||||
padding: '0',
|
||||
margin:'0',
|
||||
border:'1rpx solid #f2f6fc'
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
linkToBusinessCard(userID){
|
||||
this.$emit('userEvent',{type:'linkToBusinessCard',userID});
|
||||
},
|
||||
cdn:util.cdn
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.near-item {
|
||||
padding: 18rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f2eeee;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding-left: 18rpx;
|
||||
font-size: 32rpx;
|
||||
|
||||
&-name {
|
||||
color: #666666;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
color: #999999;
|
||||
padding-top: 4rpx;
|
||||
//line-height: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view class="near_page">
|
||||
<u-navbar
|
||||
@leftClick="leftClick"
|
||||
@rightClick="moreOptionClick"
|
||||
leftIcon="arrow-left"
|
||||
rightIcon="more-dot-fill"
|
||||
placeholder
|
||||
bgColor="#FFF"
|
||||
title="附近的人"
|
||||
title-size="36"
|
||||
:title-bold="true"
|
||||
:border-bottom="false">
|
||||
</u-navbar>
|
||||
<view>
|
||||
<UserItem v-for="(item,index) in list" :item="item" :index="index" :key="index"></UserItem>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserItem from './components/UserItem';
|
||||
export default {
|
||||
components:{UserItem},
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
{
|
||||
user:{
|
||||
avatar:"/static/img/avatar.png",
|
||||
id:1,
|
||||
nickname:"nickname",
|
||||
remark:"remark"
|
||||
},
|
||||
user_id:1,
|
||||
body:"body"
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
moreOptionClick(){
|
||||
|
||||
},
|
||||
leftClick(){
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.near_page{
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user