123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <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>
|