mabao/pages/archives/wechatrecord.vue

<template>
	<view>
		<view class="cu-chat" v-for="(item,index) in messages" :key="index">
			<view class="cu-item self" v-if="formatID(item.senderId) == user.id">
				<view class="main" v-if="item.type == 'text'">
					<view class="content bg-green shadow">
						<text>{{formatString(item.payload).text}}</text>
					</view>
				</view>
				<view class="main" v-else-if="item.type == 'image'">
					<image @click="viewImg" :data-url="formatString(item.payload).url"
						:src="formatString(item.payload).url" class="radius" mode="widthFix"></image>
				</view>
				<view class="main" v-else-if="item.type == 'audio'">
					<GoEasyAudioPlayer :src="formatString(item.payload).url"
						:duration="formatString(item.payload).duration" />
				</view>
				<view class="cu-avatar radius" :style="'background-image:url('+item.sender_avatar+');'">
				</view>
				<view class="date">{{$u.timeFormat(item.timestamp, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
			</view>
			<view class="cu-item" v-else>
				<view class="cu-avatar radius" :style="'background-image:url('+item.sender_avatar+');'">
				</view>
				<view class="main" v-if="item.type == 'text'">
					<view class="content shadow">
						<text>{{formatString(item.payload).text}}</text>
					</view>
				</view>
				<view class="main" v-else-if="item.type == 'image'">
					<image @click="viewImg" :data-url="formatString(item.payload).url"
						:src="formatString(item.payload).url" class="radius" mode="widthFix"></image>
				</view>
				<view class="main" v-else-if="item.type == 'audio'">
					<GoEasyAudioPlayer :src="formatString(item.payload).url"
						:duration="formatString(item.payload).duration" />
				</view>
				<view class="date ">{{$u.timeFormat(item.timestamp, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
			</view>
		</view>
		<!-- <view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
				@focus="InputFocus" @blur="InputBlur"></input>
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow">发送</button>
		</view> -->
		<u-empty text="暂无数据" mode="order" :show="show" margin-top="350"></u-empty>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import GoEasyAudioPlayer from "@/components/GoEasyAudioPlayer/GoEasyAudioPlayer";
	export default {
		components: {
			GoEasyAudioPlayer
		},
		data() {
			return {
				order_id: "",
				messages: [],
				show: false
			};
		},
		computed: {
			...mapState(['user'])
		},
		onLoad(op) {
			this.order_id = op.id
			this.getrecord()
		},
		methods: {
			async getrecord() {
				let res = await this.$request.post("/api/v1/order/getChatRecord", {
					order_id: this.order_id
				})
				if (res.status == 0) {
					this.messages = res.data
					if (this.messages.length == 0) {
						this.show = true
					} else {
						this.show = false
					}
				}
			},
			formatString(str) {
				let obj = JSON.parse(str)
				return obj
			},
			formatID(str) {
				let string = str.split('_')[1]
				return string
			},
			viewImg(e) {
				console.log(e.currentTarget.dataset.url)
				uni.previewImage({
					urls: [e.currentTarget.dataset.url],
					current: e.currentTarget.dataset.url
				})
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 100upx;
	}
</style>