yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

客服：完善订单消息发送

pull/56/head
puhui999 2024-07-09 17:34:18 +08:00
parent b630d26d4b
commit 39440c1e67
4 changed files with 102 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pages/chat/components/chatBox.vue
View File

@ -101,17 +101,16 @@
" "
/> />
</template> </template>
<!-- <template v-if="item.contentType === KeFuMessageContentTypeEnum.ORDER">--> <template v-if="item.contentType === KeFuMessageContentTypeEnum.ORDER">
<!-- <OrderItem--> <OrderItem
<!-- from="msg"--> :orderData="JSON.parse(item.content)"
<!-- :orderData="item.content.item"--> @tap="
<!-- @tap="--> sheep.$router.go('/pages/order/detail', {
<!-- sheep.$router.go('/pages/order/detail', {--> id: JSON.parse(item.content).id,
<!-- id: item.content.item.id,--> })
<!-- })--> "
<!-- "--> />
<!-- />--> </template>
<!-- </template>-->
<!-- user头像 --> <!-- user头像 -->
<image <image
v-if="item.senderType === UserTypeEnum.MEMBER" v-if="item.senderType === UserTypeEnum.MEMBER"
@ -133,9 +132,10 @@
</template> </template>
<script setup> <script setup>
import { nextTick, onBeforeUnmount, onMounted, reactive, ref, unref } from 'vue'; import { nextTick, reactive, ref, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import GoodsItem from './goods.vue'; import GoodsItem from './goods.vue';
import OrderItem from './order.vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import KeFuApi from '@/sheep/api/promotion/kefu'; import KeFuApi from '@/sheep/api/promotion/kefu';
import { isEmpty } from '@/sheep/helper/utils'; import { isEmpty } from '@/sheep/helper/utils';

57
pages/chat/components/goods.vue
View File

@ -1,22 +1,15 @@
<template> <template>
<view class="goods ss-flex"> <s-goods-item
<image class="image" :src="sheep.$url.cdn(goodsData.picUrl)" mode="aspectFill"> </image> :title="goodsData.spuName"
<view class="ss-flex-1"> :img="goodsData.picUrl"
<view class="title ss-line-2"> :price="goodsData.price"
{{ goodsData.spuName }} :skuText="goodsData.introduction"
</view> priceColor="#FF3000"
<view v-if="goodsData.introduction" class="subtitle ss-line-1"> :titleWidth="400"
{{ goodsData.introduction }} />
</view>
<view class="price ss-m-t-8">
￥{{ goodsData.price }}
</view>
</view>
</view>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep';
const props = defineProps({ const props = defineProps({
goodsData: { goodsData: {
@ -26,37 +19,3 @@
}); });
</script> </script>
<style lang="scss" scoped>
.goods {
background: #fff;
padding: 20rpx;
border-radius: 12rpx;
.image {
width: 116rpx;
height: 116rpx;
flex-shrink: 0;
margin-right: 20rpx;
}
.title {
height: 64rpx;
line-height: 32rpx;
font-size: 26rpx;
font-weight: 500;
color: #333;
}
.subtitle {
font-size: 24rpx;
font-weight: 400;
color: #999;
}
.price {
font-size: 26rpx;
font-weight: 500;
color: #ff3000;
}
}
</style>

168
pages/chat/components/order.vue
View File

@ -1,49 +1,36 @@
<template> <template>
<view class="order"> <view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
<view class="top ss-flex ss-row-between"> :key="orderData.id">
<span>{{ orderData.order_sn }}</span> <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<span>{{ orderData.create_time.split(' ')[1] }}</span> <view class="order-no">订单号：{{ orderData.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(orderData)">
{{ formatOrderStatus(orderData) }}
</view>
</view> </view>
<template v-if="from != 'msg'"> <view class="border-bottom" v-for="item in orderData.items" :key="item.id">
<view class="bottom ss-flex" v-for="item in orderData.items" :key="item"> <s-goods-item
<image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image> :img="item.picUrl"
<view class="ss-flex-1"> :title="item.spuName"
<view class="title ss-line-2"> :skuText="item.properties.map((property) => property.valueName).join(' ')"
{{ item.goods_title }} :price="item.price"
</view> :num="item.count"
<view v-if="item.goods_num" class="num ss-m-b-10"> 数量：{{ item.goods_num }} </view> />
<view class="ss-flex ss-row-between ss-m-t-8"> </view>
<span class="price">￥{{ item.goods_price }}</span> <view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
<span class="status">{{ orderData.status_text }}</span> <view class="ss-flex ss-col-center">
</view> <view class="discounts-title pay-color">共 {{ orderData.productCount }} 件商品,总金额:</view>
<view class="discounts-money pay-color">
￥{{ fen2yuan(orderData.payPrice) }}
</view> </view>
</view> </view>
</template> </view>
<template v-else>
<view class="bottom ss-flex" v-for="item in [orderData.items[0]]" :key="item">
<image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
<view class="ss-flex-1">
<view class="title title-1 ss-line-1">
{{ item.goods_title }}
</view>
<view class="order-total ss-flex ss-row-between ss-m-t-8">
<span>共{{ orderData.items.length }}件商品</span>
<span>合计 ¥{{ orderData.pay_fee }}</span>
</view>
<view class="ss-flex ss-row-right ss-m-t-8">
<span class="status">{{ orderData.status_text }}</span>
</view>
</view>
</view>
</template>
</view> </view>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import { fen2yuan, formatOrderColor, formatOrderStatus } from '@/sheep/hooks/useGoods';
const props = defineProps({ const props = defineProps({
from: String,
orderData: { orderData: {
type: Object, type: Object,
default: {}, default: {},
@ -52,71 +39,76 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.order { .order-list-card-box {
background: #fff; .order-card-header {
padding: 20rpx; height: 80rpx;
border-radius: 12rpx;
.top { .order-no {
line-height: 40rpx;
font-size: 24rpx;
font-weight: 400;
color: #999;
border-bottom: 1px solid rgba(223, 223, 223, 0.5);
margin-bottom: 20rpx;
}
.bottom {
margin-bottom: 20rpx;
&:last-of-type {
margin-bottom: 0;
}
.image {
flex-shrink: 0;
width: 116rpx;
height: 116rpx;
margin-right: 20rpx;
}
.title {
height: 64rpx;
line-height: 32rpx;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #333; }
&.title-1 { .order-state {}
height: 32rpx; }
width: 300rpx; .pay-box {
.discounts-title {
font-size: 24rpx;
line-height: normal;
color: #999999;
}
.discounts-money {
font-size: 24rpx;
line-height: normal;
color: #999;
font-family: OPPOSANS;
}
.pay-color {
color: #333;
}
}
.order-card-footer {
height: 100rpx;
.more-item-box {
padding: 20rpx;
.more-item {
height: 60rpx;
.title {
font-size: 26rpx;
}
} }
} }
.num { .more-btn {
color: $dark-9;
font-size: 24rpx; font-size: 24rpx;
font-weight: 400;
color: #999;
} }
.price { .content {
width: 154rpx;
color: #333333;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #ff3000;
}
.status {
font-size: 24rpx;
font-weight: 500;
color: var(--ui-BG-Main);
}
.order-total {
line-height: 28rpx;
font-size: 24rpx;
font-weight: 400;
color: #999;
} }
} }
} }
.warning-color {
color: #faad14;
}
.danger-color {
color: #ff3000;
}
.success-color {
color: #52c41a;
}
.info-color {
color: #999999;
}
</style> </style>

25
pages/chat/index.vue
View File

@ -121,34 +121,13 @@
case 'goods': case 'goods':
msg = { msg = {
contentType: KeFuMessageContentTypeEnum.PRODUCT, contentType: KeFuMessageContentTypeEnum.PRODUCT,
content: JSON.stringify({ content: JSON.stringify(data)
id: data.id,
spuName: data.spuName,
picUrl: data.picUrl,
price: data.price,
introduction: data.introduction,
stock: data.stock,
})
}; };
break; break;
case 'order': case 'order':
msg = { msg = {
contentType: KeFuMessageContentTypeEnum.ORDER, contentType: KeFuMessageContentTypeEnum.ORDER,
content: { content: JSON.stringify(data),
item: {
id: data.id,
order_sn: data.order_sn,
create_time: data.create_time,
pay_fee: data.pay_fee,
items: data.items.filter((item) => ({
goods_id: item.goods_id,
goods_title: item.goods_title,
goods_image: item.goods_image,
goods_price: item.goods_price,
})),
status_text: data.status_text,
},
},
}; };
break; break;
} }