kuangjunhua/TakeOutShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

评价中心/售后数据接入

Browse Source
This commit is contained in:
邝军华 2025-04-11 17:49:34 +08:00
parent 489cbb8b88
commit 45837db187
30 changed files with 1913 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
components/multi/multi.vue Normal file
View File

@ -0,0 +1,242 @@
<template>
<!-- 多规格组件弹框 -->
<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
<view class="multiPopup">
<view class="shop_open_close" @click="OpenCoupon()">
<image src="../../static/order/close.png" mode="widthFix"></image>
</view>
<view class="multishop">
<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
<view class="multishop_text">
<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
</view>
</view>
<view class="multishop_list">
<view class="multishop_list_title">颜色</view>
<view class="multishop_list_item">
<view class="multishop_list_name multishop_list_arver">沙漠色</view>
<view class="multishop_list_name">黑色</view>
<view class="multishop_list_name">原色</view>
<view class="multishop_list_name">白色</view>
</view>
</view>
<view class="multishop_list">
<view class="multishop_list_title">容量</view>
<view class="multishop_list_item">
<view class="multishop_list_name multishop_list_arver">256GB</view>
<view class="multishop_list_name">512GB</view>
<view class="multishop_list_name">1TB</view>
</view>
</view>
<view style="height: 200rpx;"></view>
<view class="footer_multi">
<view class="multishop_amount">
<view class="multishop_name_amount">选数量</view>
<view class="multishop_data_edit">
<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
</view>
<view class="multishop_data_number">22</view>
<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="footer_multi_btn">确定</view>
</view>
</view>
</uni-popup>
</template>
<script setup>
import { loads } from '@/utils/index.js'
import { frontproduct } from '@/server/api';
import { computed,ref,onMounted,defineEmits } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { skudetail,cartsave } from '@/server/api.js'
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const { token } = storeToRefs(counterStore);
</script>
<style lang="scss">
//多规格
.multiPopup{
background-color: #FFFFFF;
border-top-left-radius: 25rpx;
border-top-right-radius: 25rpx;
max-height: 800rpx;
overflow-y: auto;
position: relative;
.shop_open_close{
width: 80rpx;
height: 80rpx;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.shop_open_close image{
width: 45rpx;
height: 45rpx;
}
.multishop{
display: flex;
padding: 25rpx 25rpx 0rpx 25rpx;
.multishop_img{
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
}
.multishop_text{
width: 460rpx;
margin-left: 20rpx;
.multishop_title{
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-top: 5rpx;
min-height: 115rpx;
}
.multishop_title text{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.multishop_price{
font-size: 32rpx;
color: #FD3F3F;
font-weight: 500;
.multishop_name{
color: #999;
font-size: 23rpx;
text-decoration: line-through;
margin-left: 5rpx;
font-weight: 400;
}
.multishop_name::before{
content: "¥";
font-size: 20rpx;
margin-right: 5rpx;
}
}
.multishop_price::before{
content: "¥";
font-size: 24rpx;
margin-right: 5rpx;
}
}
}
.multishop_list{
padding: 25rpx 25rpx 0rpx 25rpx;
.multishop_list_title{
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-bottom: 25rpx;
}
.multishop_list_item{
display: flex;
flex-wrap: wrap;
.multishop_list_name{
padding: 12rpx 35rpx 12rpx 35rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #333333;
background-color: #f6f6f6;
margin-right: 25rpx;
margin-bottom: 25rpx;
border:1px solid #f6f6f6;
}
.multishop_list_arver{
background-color: #FFD7D7;
border:1px solid #fd3f3f;
color: #fd3f3f;
}
}
}
.footer_multi{
position: fixed;
bottom: 0rpx;
width: 100%;
background-color: #FFFFFF;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
.multishop_amount{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 25rpx;
padding-right: 25rpx;
margin-top: 15rpx;
margin-bottom: 40rpx;
.multishop_name_amount{
font-size: 28rpx;
color: #333;
font-weight: 500;
}
.multishop_data_edit{
display: flex;
align-items: center;
justify-content: center;
.multishop_data_edit_img{
width: 55rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
.multishop_data_edit_imgurl{
width: 25rpx;
height: 25rpx;
display: block;
}
}
.border_l{
border-left: 1px solid #E9E9E9;
border-top-left-radius: 50rpx;
border-bottom-left-radius: 50rpx;
}
.border_r{
border-right: 1px solid #E9E9E9;
border-top-right-radius: 50rpx;
border-bottom-right-radius: 50rpx;
}
}
.multishop_data_number{
width: 60rpx;
height: 50rpx;
font-size: 28rpx;
color: #333;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #E9E9E9;
}
}
.footer_multi_btn{
margin: 0 28rpx 0 28rpx;
height:84rpx;
background-color: #FD3F3F;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #FFFFFF;
border-radius: 50rpx;
}
}
</style>

9
components/recomGoods/recomGoods.vue
View File

@ -124,10 +124,7 @@
} }
shopList.value = shopList.value.concat(data.list); shopList.value = shopList.value.concat(data.list);
}).catch(({message}) => { }).catch(({message}) => {
uni.showModal({ decs.value = `—— ${message||'网络异常'} ——`;
content:message,
showCancel: false
})
}) })
} }
@ -173,6 +170,10 @@
loads('', true) loads('', true)
return skudetail(id).then(({data}) => { return skudetail(id).then(({data}) => {
if(specTypes){ if(specTypes){
uni.hideLoading()
}else{ }else{
const { id,productId } = data.productValue.默认; const { id,productId } = data.productValue.默认;

121
order/assDetail/assDetail.vue
View File

@ -2,50 +2,64 @@
<view class="main"> <view class="main">
<view class="cont flex"> <view class="cont flex">
<view class="cont_order_type"> <view class="cont_order_type">
<view class="cont_order_type_name">已完成</view> <view class="cont_order_type_name">{{assDetail.statustext}}</view>
<view class="cont_order_type_desc">感谢您的反馈</view> <view class="cont_order_type_desc">{{assDetail.refundVerifyFailReason}}</view>
</view> </view>
<view class="cont_service"> <view class="cont_service">
<image class="cont_service_img" src="../../static/service.png" mode="widthFix"></image> <image class="cont_service_img" src="../../static/service.png" mode="widthFix"></image>
<view class="cont_service_name">联系客服</view> <view class="cont_service_name">联系客服</view>
</view> </view>
</view> </view>
<view class="cont"> <!-- <view class="cont">
<view class="cont_title">售后进度</view> <view class="cont_title">售后进度</view>
<view class="cont_step"> <view class="cont_step">
<uni-steps :options="step" active-color="#FF0000" direction="column" :active="active"></uni-steps> <uni-steps :options="step" active-color="#FF0000" direction="column" :active="active"></uni-steps>
</view> </view>
</view> </view> -->
<view class="cont paddom"> <view class="cont paddom">
<view class="cont_title cont_border">售后明细</view> <view class="cont_title cont_border">售后明细</view>
<view class="cont_shop"> <view class="cont_shop" v-for="(item,index) in returnInfoList" :key="index">
<view class="cont_shop_img"> <view class="cont_shop_img">
<image class="cont_shop_imgUrl" src="../../static/Mask.png" mode="widthFix"></image> <image class="cont_shop_imgUrl" :src="item.image" mode="widthFix"></image>
</view> </view>
<view class="cont_shop_text"> <view class="cont_shop_text">
<view class="cont_shop_title">糖醋排骨</view> <view class="cont_shop_title">{{item.storeName}}</view>
<view class="cont_shop_price">实付:<text class="cont_shop_price_f">5.98</text></view> <!-- <view class="cont_shop_price">实付:<text class="cont_shop_price_f">5.98</text></view> -->
<view class="cont_shop_desc">实付单价:<text class="cont_shop_desc_price">5.98</text> <text class="cont_shop_desc_num">数量:1</text></view> <view class="cont_shop_desc">
<!-- 实付单价:<text class="cont_shop_desc_price">5.98</text> -->
<text class="cont_shop_desc_num">退款数量:{{item.returnNum}}</text>
</view>
</view> </view>
</view> </view>
<view class="cont_shop_item"> <view class="cont_shop_item">
<view class="cont_shop_item_name">售后数量</view> <view class="cont_shop_item_name">售后总数量</view>
<view class="cont_shop_item_value">1</view> <view class="cont_shop_item_value">{{assDetail.returnNum}}</view>
</view> </view>
<view class="cont_shop_item"> <view class="cont_shop_item">
<view class="cont_shop_item_name">退款金额</view> <view class="cont_shop_item_name">退款金额</view>
<view class="cont_shop_item_value">已退<text class="cont_shop_item_value_price">5.98</text></view> <view class="cont_shop_item_value"><text class="cont_shop_item_value_price">{{assDetail.returnAmount}}</text></view>
</view> </view>
</view> </view>
<view class="cont paddom"> <view class="cont paddom">
<view class="cont_title cont_border">售后订单信息</view> <view class="cont_title cont_border">售后订单信息</view>
<view class="cont_shop_item"> <view class="cont_shop_item" @click="copyText()">
<view class="cont_shop_item_name">售后单号</view> <view class="cont_shop_item_name">售后单号</view>
<view class="cont_shop_item_value"><text class="cont_shop_item_copy">复制</text>35758859599447</view> <view class="cont_shop_item_value"><text class="cont_shop_item_copy">复制</text>{{assDetail.code}}</view>
</view> </view>
<view class="cont_shop_item"> <view class="cont_shop_item">
<view class="cont_shop_item_name">申请时间</view> <view class="cont_shop_item_name">申请时间</view>
<view class="cont_shop_item_value">2025/06/09 20:13</view> <view class="cont_shop_item_value">{{assDetail.createTime}}</view>
</view>
<view class="cont_shop_item">
<view class="cont_shop_item_name">退款原因</view>
<view class="cont_shop_item_value">{{assDetail.returnReason}}</view>
</view>
<view class="cont_shop_item" v-if="returnImageList.length">
<view class="cont_shop_item_name">退款凭证</view>
<view class="cont_shop_item_value"></view>
</view>
<view class="cont_shop_img" v-if="returnImageList.length">
<image v-for="(item,index) in returnImageList" :key="index" class="cont_shop_img_url" :src="item" mode="aspectFill" @click="previewImage(i)"></image>
</view> </view>
</view> </view>
<view style="height: 200rpx;"></view> <view style="height: 200rpx;"></view>
@ -53,23 +67,96 @@
</template> </template>
<script setup> <script setup>
import { loads } from '@/utils/index.js'
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue'; import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值 import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { returngetApplyRecord } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const active = ref(0); const active = ref(0);
const id = ref("");
const assDetail = ref({});
const returnInfoList = ref([]);
const returnImageList = ref([])
const step = ref([ const step = ref([
{title:'售后申请已提交成功，客服将全力为您解决问题，请您耐心等待',desc:'2025/06/29 20:15'}, {title:'售后申请已提交成功，客服将全力为您解决问题，请您耐心等待',desc:'2025/06/29 20:15'},
{title:'售后申请已被受理，客服正在加速为您解决问题',desc:'2025/06/29 20:15'}, {title:'售后申请已被受理，客服正在加速为您解决问题',desc:'2025/06/29 20:15'},
{title:'您的退款申请已审核通过，商品无需退回',desc:'2025/06/29 20:15'}, {title:'您的退款申请已审核通过，商品无需退回',desc:'2025/06/29 20:15'},
{title:'已将退款资金提交给原支付平台处理，预计将在3个工作日内到账。具体以原支付平台处理结果为准',desc:'2025/06/29 20:15'}, {title:'已将退款资金提交给原支付平台处理，预计将在3个工作日内到账。具体以原支付平台处理结果为准',desc:'2025/06/29 20:15'},
{title:'退款已到账，请您注意查收，如有问题请联系客服',desc:'2025/06/29 20:15'}, {title:'退款已到账，请您注意查收，如有问题请联系客服',desc:'2025/06/29 20:15'},
]) ])
onLoad((options) => {}); //查看上传图片
const previewImage = (item,i)=>{
let picture = returnImageList.value;
uni.previewImage({
current: i,
urls:picture
});
}
const copyText = () =>{
uni.setClipboardData({
data:'售后编号:'+assDetail.value.code,
success: () => {
uni.showToast({
title: '复制成功',
icon: 'success',
});
},
fail: () => {
uni.showToast({
title: '复制失败',
icon: 'none',
});
}
})
}
const api_returngetApplyRecord=()=>{
loads('', true)
return returngetApplyRecord(id.value).then(({data}) => {
uni.hideLoading();
let statustext = "";
if(data.returnState == 1){
statustext = "退款审核中"
}else if(data.returnState == 2){
statustext = "审核通过"
}else if(data.returnState == 3){
statustext = "审核拒绝"
}else if(data.returnState == 4){
statustext = "退款失败"
}
data.statustext = statustext;
if(data.returnImage !== null){
data.returnImageList = data.returnImage.split(",")
}else{
data.returnImageList = [];
}
assDetail.value = data;
returnInfoList.value = data.returnInfoList;
returnImageList.value = data.returnImageList;
}).catch(({message}) => {
uni.hideLoading();
uni.showModal({
content:message,
showCancel: false,
success: () => {
uni.navigateBack({
delta:1
})
}
})
})
}
onLoad((options) => {
if(options.id){
id.value = options.id;
}
api_returngetApplyRecord();
});
onShow(() => {}); onShow(() => {});
onReady(()=>{}) onReady(()=>{})
onPullDownRefresh(()=>{}) onPullDownRefresh(()=>{})

22
order/assDetail/style.scss
View File

@ -62,6 +62,7 @@ page{
width: 138rpx; width: 138rpx;
height: 138rpx; height: 138rpx;
display: block; display: block;
border-radius: 4rpx;
} }
} }
.cont_shop_text{ .cont_shop_text{
@ -70,6 +71,7 @@ page{
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
font-weight: 500; font-weight: 500;
min-height: 85rpx;
} }
.cont_shop_price{ .cont_shop_price{
color: #333333; color: #333333;
@ -93,7 +95,7 @@ page{
margin-right: 5rpx; margin-right: 5rpx;
} }
.cont_shop_desc_num{ .cont_shop_desc_num{
margin-left: 40rpx; // margin-left: 40rpx;
} }
} }
} }
@ -116,10 +118,10 @@ page{
align-items: center; align-items: center;
.cont_shop_item_copy{ .cont_shop_item_copy{
width: 77rpx; width: 77rpx;
height: 40rpx; height: 30rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 1rpx solid #FF0000; border: 1rpx solid #FF0000;
font-size: 22rpx; font-size: 20rpx;
color:#FF0000; color:#FF0000;
display: flex; display: flex;
align-items: center; align-items: center;
@ -135,6 +137,20 @@ page{
} }
} }
} }
.cont_shop_img{
display: flex;
flex-wrap: wrap;
.cont_shop_img_url{
width: 138rpx;
height: 138rpx;
display: block;
border-radius: 4rpx;
border: 1rpx solid #F3F3F3;
margin-right: 25rpx;
margin-bottom: 25rpx;
}
}
.paddom{ .paddom{
padding-bottom: 0rpx; padding-bottom: 0rpx;
} }

129
order/assList/assList.vue
View File

@ -8,58 +8,153 @@
</view> </view>
<view class="cont"> <view class="cont">
<view class="cont_title">下单时间: 2025/03/06 18:00</view> <view v-for="(item,index) in list" :key="index" class="order_list" @click="assDetail(item)">
<view class="cont_shop" @click="assDetail()"> <view class="order_type" v-if="active == 1">{{item.returntext}}</view>
<view class="cont_shop_l"> <view class="order_time">下单时间:{{item.createTime}}</view>
<view class="cont_shop_img"> <view class="order_scroll">
<image class="cont_shop_imgUrl" src="../../static/Mask.png" mode="widthFix"></image> <scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
</view> <block v-if="active == 0">
<view class="cont_shop_m"> <view class="order_scroll_li" v-for="(i,idx) in item.orderInfoList" :key="index">
<view class="cont_shop_title">泡椒田鸡</view> <view class="order_scroll_img">
<view class="cont_shop_text">实付单价:<text class="cont_shop_price">9.99</text> <text class="cont_shop_num">数量:1</text></view> <image class="order_scroll_img_url" :src="i.image" mode="widthFix"></image>
</view>
</view>
</block>
<block v-if="active == 1">
<view class="order_scroll_li" v-for="(i,idx) in item.returnInfoList" :key="index">
<view class="order_scroll_img">
<image class="order_scroll_img_url" :src="i.image" mode="widthFix"></image>
</view>
</view>
</block>
</scroll-view>
</view>
<view class="order_x">
<block v-if="active == 1">共售后{{item.returnNum}}件、</block>
<block v-if="active == 0">共{{item.totalNum}}件、</block>
{{active == 1 ?'退款金额':'实付'}}:
<text class="order_price">{{active == 1?item.returnAmount:item.payPrice}}</text>
</view>
<view class="order_bottom" v-if="active == 0">
<view class="order_l"></view>
<view class="order_r">
<view class="order_btn" @click.stop="assDetail(item)">申请售后</view>
</view> </view>
</view> </view>
<view :class="active == 0?'cont_shop_r':'cont_shop_n'" >{{active == 0 ?'申请售后':'已完成'}}</view>
</view> </view>
<view class="empty" v-if="img_err && decs">
<view class="empty_cont">
<image class="empty_cont_img" :src="img_err" mode="widthFix"></image>
<view class="empty_cont_title">{{decs}}</view>
</view>
</view>
<view v-else class="load_desc">{{decs}}</view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import NP from 'number-precision';
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue'; import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值 import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { returncanApplyOrderList,returnapplyRecordsList } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const tab = ref(['售后申请','售后记录']); const tab = ref(['售后申请','售后记录']);
const active = ref(0); const active = ref(0);
const list =ref([]);
const decs = ref('');
const pages = ref(0);
const type = ref("");
const img_err = ref("");
const clickOrder=(index)=>{ const clickOrder=(index)=>{
if(index == active.value) return false; if(index == active.value) return false;
active.value = index; active.value = index;
list.value = [];
decs.value = '';
pages.value = 0;
api_orderlist();
}; };
const assDetail=()=>{ const api_orderlist=()=>{
pages.value = pages.value + 1;
img_err.value = "";
decs.value = "—— 加载中... ——";
const params = {
page:pages.value,
limit:'10'
}
let url = "";
if(active.value == 1){
url = returnapplyRecordsList
}else{
url = returncanApplyOrderList
}
return url(params).then(({data}) => {
decs.value = '—— 上拉加载更多 ——';
data.list.forEach(item => {
if(active.value == 1){
if(item.returnState == 1){
item.returntext = "退款审核中"
}else if(item.returnState == 2){
item.returntext = "审核通过"
}else if(item.returnState == 3){
item.returntext = "审核拒绝"
}else{
item.returntext = "退款失败"
}
}
if(active.value == 0){
item.totalNum = item.orderInfoList.reduce((sum, i) => sum + i.cartNum, 0);
}
})
list.value = list.value.concat(data.list);
if(pages.value == 1 && !data.list.length){
img_err.value = "../../static/Empty/order_lisr_img.png"
decs.value = "—— 暂无售后记录 ——"
}else if(data.list.length < 10){
decs.value = '—— 嗷呜，已经到底啦 ——';
}
}).catch(({message}) => {
img_err.value = "../../static/Empty/err.png"
decs.value = `—— ${message||'网络异常'} ——`;
})
}
const assDetail=(item)=>{
if(active.value == 0){ if(active.value == 0){
uni.navigateTo({ uni.navigateTo({
url:`/order/assedit/assedit` url:`/order/assedit/assedit?orderId=${item.orderId}`
}) })
}else{ }else{
uni.navigateTo({ uni.navigateTo({
url:`/order/assDetail/assDetail` url:`/order/assDetail/assDetail?id=${item.id}`
}) })
} }
}; };
onLoad((options) => { onLoad((options) => {
const { type } = options; if(options.type == 0 || options.type == 1){
if(type == 0 || type == 1){active.value = type;} active.value = options.type;
}
api_orderlist();
}); });
onShow(() => {}); onShow(() => {});
onReady(()=>{}) onReady(()=>{})
onPullDownRefresh(()=>{}) onPullDownRefresh(()=>{
onReachBottom(()=>{}) list.value = [];
decs.value = '';
pages.value = 0;
api_orderlist();
uni.stopPullDownRefresh();
})
onReachBottom(()=>{
api_orderlist();
})
</script> </script>
<style lang="scss"> <style lang="scss">

322
order/assList/style.scss
View File

@ -44,135 +44,211 @@ page{
} }
} }
.cont{ .cont{
margin: 20rpx 20rpx 0 20rpx; // margin: 20rpx 20rpx 0 20rpx;
background-color: #FFFFFF; // background-color: #FFFFFF;
border-radius: 16rpx; border-radius: 16rpx;
padding: 0 0rpx 25rpx 0rpx; padding: 0 0rpx 25rpx 0rpx;
.cont_title{ .order_list{
font-size: 26rpx; margin: 20rpx 20rpx 0 20rpx;
color: #999999; background-color: #FFFFFF;
margin: 0 25rpx 0 25rpx; border-radius: 16rpx;
padding:25rpx 0 25rpx 0; padding: 0 20rpx 25rpx 20rpx;
border-bottom: 1rpx solid #f6f6f6; .order_type{
} font-size: 34rpx;
.cont_shop{ color: #000000;
display: flex; font-weight: 500;
align-items: center; padding: 25rpx 0rpx 0rpx 0rpx;
justify-content: space-between;
padding: 25rpx 25rpx 0rpx 25rpx ;
.cont_shop_l{
display: flex;
.cont_shop_img{
width: 114rpx;
height: 114rpx;
background: #FFFFFF;
border-radius: 4rpx;
border: 1rpx solid #F3F3F3;
.cont_shop_imgUrl{
width: 114rpx;
height: 114rpx;
display: block;
}
}
.cont_shop_m{
margin-left: 25rpx;
.cont_shop_title{
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.cont_shop_text{
font-size: 26rpx;
color: #999999;
margin-top: 20rpx;
.cont_shop_price::before{
content:'¥';
font-size: 20rpx;
margin: 0rpx 5rpx 0rpx 5rpx;
}
.cont_shop_num{
margin-left: 20rpx;
}
}
}
} }
.cont_shop_r{ .order_time{
width: 150rpx; color: #999999;
height: 60rpx;
border-radius: 50rpx;
border: 1rpx solid #999999;
font-size: 24rpx;
color: #666666;
display: flex;
align-items: center;
justify-content: center;
}
.cont_shop_n{
height: 60rpx;
border-radius: 50rpx;
font-size: 26rpx; font-size: 26rpx;
color: #666666; padding-top: 25rpx;
}
.order_scroll{
width:100%;
display: flex;
overflow: hidden;
white-space: nowrap;
left: 0;
top: 0;
margin-top: 25rpx;
.order_scroll_ul{
.order_scroll_li{
width: 138rpx;
display: inline-block;
margin-right: 20rpx;
.order_scroll_img{
background: #FFFFFF;
border-radius: 10rpx;
width: 138rpx;
height: 138rpx;
overflow: hidden;
border: 1rpx solid #F3F3F3;
.order_scroll_img_url{
width: 138rpx;
height: 138rpx;
display: block;
}
}
.order_scroll_title{
color: #333333;
font-size: 26rpx;
font-weight: 500;
white-space: break-spaces;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: break-word;
margin-top: 20rpx;
}
.order_scroll_price{
font-size: 32rpx;
color: #FF0000;
font-weight: 500;
margin-top: 10rpx;
}
.order_scroll_market_name{
color: #999999;
font-size: 28rpx;
text-decoration: line-through;
font-weight: 400;
}
}
}
}
.order_x{
color: #333333;
font-size: 28rpx;
text-align: right;
.order_price{
font-size: 34rpx;
font-weight: 500;
color: #000000;
}
.order_price::before{
content: "¥";
font-size: 26rpx;
margin: 0 5rpx 0 5rpx;
}
}
.order_bottom{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
position: relative; padding: 25rpx 0 0 0;
margin-right: 25rpx; .order_l{
} width: 90rpx;
.cont_shop_n::after{ height: 55rpx;
content: ''; position: relative;
position: absolute; .more_text{
top: 50%; color: #333333;
left: 100%; font-size: 28rpx;
transform: translate3d(0, -50%, 0) rotate(45deg); height: 55rpx;
width: 13rpx; display: flex;
height: 13rpx; align-items: center;
border-top: 3rpx solid #999999; }
border-right: 3rpx solid #999999; .more_open{
position: absolute;
left: -10rpx;
z-index: 9999;
top: 55rpx;
.more_j{
width: 0;
height: 0;
border-left: 15rpx solid transparent;
border-right: 15rpx solid transparent;
border-bottom: 15rpx solid #333333;
margin-left: 18rpx;
}
.more_cont{
background-color: #333333;
border-radius: 10rpx;
padding: 0rpx 20rpx 0rpx 20rpx;
margin-top: -2rpx;
.more_item{
font-size: 26rpx;
color: #FFFFFF;
height: 65rpx;
display: flex;
align-items: center;
justify-content: center;
width: 125rpx;
}
.more_border{
border-bottom: 1rpx solid #999999;
}
}
}
}
.order_r{
display: flex;
justify-content: flex-end;
.order_btn{
padding-left: 23rpx;
padding-right: 21rpx;
height: 55rpx;
background: #FFFFFF;
border-radius: 33rpx;
border: 1rpx solid #D9D9D9;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
font-size: 23rpx;
margin-left: 10rpx;
}
.order_bcg{
background: #FF0000;
border-radius: 33rpx;
border: 1rpx solid #FF0000;
color: #ffffff;
font-size: 26rpx;
}
}
} }
} }
.cont_goos{
display: flex;
align-items: center;
color: #FF0000;
font-size: 26rpx;
padding: 25rpx 25rpx 0rpx 25rpx ;
.cont_goos_img{
width: 40rpx;
height: 40rpx;
display: block;
margin-right: 10rpx;
}
}
.cont_text{
color: #333333;
font-size: 26rpx;
padding: 25rpx 25rpx 0rpx 25rpx ;
}
.cont_ul{
display: flex;
flex-wrap: wrap;
.cont_li{
width: 150rpx;
height: 150rpx;
background: #FFFFFF;
border-radius: 4rpx;
border: 1rpx solid #F3F3F3;
margin-left: 20rpx;
margin-top: 25rpx;
}
.cont_li image{
width: 150rpx;
height: 150rpx;
border-radius: 4rpx;
display: block;
}
}
} }
}
.load_desc{
font-size: 28rpx;
color: #aaa;
} text-align: center;
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.empty{
height:480rpx;
margin:200rpx 20rpx 0rpx 20rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
.empty_cont{
.empty_cont_img{
margin: 0 auto;
width: 355rpx;
height: 280rpx;
display: flex;
}
.empty_cont_title{
font-size: 28rpx;
color: #aaaaaa;
text-align: center;
}
.empty_cont_btn{
margin: 0 auto;
width: 154rpx;
height: 46rpx;
border-radius: 30rpx;
border: 1rpx solid #FF0000;
color: #FF0000;
line-height: 30rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
}
}
}

266
order/assedit/assedit.vue
View File

@ -9,8 +9,28 @@
</view> </view>
</view> </view>
<view class="cont_view" :style="{'padding-top':statusBartop+statusHeight+10+'px'}"> <view class="cont_view" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
<view class="data_list" v-for="(item,index) in orderInfoList" :key="index">
<view class="data_img">
<image class="data_imgUrl" :src="item.image" mode="widthFix"></image>
</view>
<view class="data_text">
<view class="data_title"><text>{{item.storeName}}</text></view>
<view class="data_operate">
<view class="data_num price">{{item.price}}</view>
<view class="data_edit">
<view class="data_edit_img border_l" @click="editAmount(1,item)">
<image class="data_edit_imgurl" :class="item.amount == 0 ? 'opy':''" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
</view>
<view class="data_number">{{item.amount}}</view>
<view class="data_edit_img border_r" @click="editAmount(2,item)">
<image class="data_edit_imgurl" :class="item.amount == item.cartNum ? 'opy':''" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
<view class="cont" > <view class="cont" >
<textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="请填写您的退款理由～"></textarea> <textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="请填写您的退款理由～" v-model="returnReason"></textarea>
</view> </view>
<view class="cont cont_padding"> <view class="cont cont_padding">
<view class="cont_item"> <view class="cont_item">
@ -18,7 +38,7 @@
<image class="cont_item_img" src="../../static/ass/money.png" mode="widthFix"></image> <image class="cont_item_img" src="../../static/ass/money.png" mode="widthFix"></image>
<view class="cont_item_text">退款金额</view> <view class="cont_item_text">退款金额</view>
</view> </view>
<view class="cont_item_r"><input class="cont_item_input" type="digit" placeholder="请输入金额"/><text>元</text></view> <view class="cont_item_r"><input class="cont_item_input font_input" disabled="true" type="digit" placeholder="请输入金额" v-model="returnAmount"/><text>元</text></view>
</view> </view>
<view class="cont_border"></view> <view class="cont_border"></view>
<view class="cont_item"> <view class="cont_item">
@ -26,7 +46,7 @@
<image class="cont_item_img" src="../../static/ass/phone.png" mode="widthFix"></image> <image class="cont_item_img" src="../../static/ass/phone.png" mode="widthFix"></image>
<view class="cont_item_text">联系方式</view> <view class="cont_item_text">联系方式</view>
</view> </view>
<view class="cont_item_r"><input class="cont_item_input" type="number" placeholder="请输入电话号码"/></view> <view class="cont_item_r"><input class="cont_item_input" type="number" placeholder="请输入电话号码" v-model="contactPhone"/></view>
</view> </view>
<view class="cont_border"></view> <view class="cont_border"></view>
<view class="cont_item"> <view class="cont_item">
@ -38,13 +58,13 @@
<view class="cont_shop_text">请将菜品图上传</view> <view class="cont_shop_text">请将菜品图上传</view>
<view class="cont_shop_edit"> <view class="cont_shop_edit">
<view class="cont_ul"> <view class="cont_ul">
<view class="cont_li"> <view class="cont_li" v-for="(img,i) in returnImage" :key="i">
<view class="cont_upload_remove"> <view class="cont_upload_remove" @click="delImg(i)">
<image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image> <image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image>
</view> </view>
<image class="cont_li_img" src="../../static/Mask.png" mode="widthFix"></image> <image class="cont_li_img" :src="img" mode="aspectFill" @click="previewImage(i)"></image>
</view> </view>
<view class="cont_li cont_upload"> <view class="cont_li cont_upload" @click="chooseImage()" v-if="returnImage.length <= 5">
<image class="cont_upload_img" src="../../static/ass/uploading.png" mode="widthFix"></image> <image class="cont_upload_img" src="../../static/ass/uploading.png" mode="widthFix"></image>
<view class="cont_upload_text">添加照片</view> <view class="cont_upload_text">添加照片</view>
</view> </view>
@ -53,29 +73,37 @@
</view> </view>
</view> </view>
</view> </view>
<view style="height: 200rpx;"></view> <view style="height: 200rpx;"></view>
<view class="footer"> <view class="footer">
<view class="footer_btn">提交</view> <view class="footer_btn" :class="!btnShow ? 'opy':''" @click="api_returnreturnApply()">{{!count?"退款数量必须有一项大于0":"提交(共退款"+count+"件)"}}</view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { url } from '@/server/config.js'
import { loads } from '@/utils/index.js'
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue'; import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值 import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { returngetOrder,returncomputedPrice,returnreturnApply } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight,token } = storeToRefs(counterStore);
const headShow = ref(false); const headShow = ref(false);
const showBack = ref(false); const showBack = ref(false);
const pageWidth = ref(0); const pageWidth = ref(0);
const opacity = ref(1); const opacity = ref(1);
const timeImg = ref(''); const timeImg = ref('');
const isIos = ref(false); const isIos = ref(false);
const orderId = ref("");
const returnAmount = ref(0);
const returnImage = ref([]);
const returnReason = ref('');
const contactPhone = ref('');
const orderInfoList = ref([]);
const id = ref('');
const System = () =>{ const System = () =>{
const phone = wx.getSystemInfoSync(); const phone = wx.getSystemInfoSync();
if (phone.platform == 'ios') { if (phone.platform == 'ios') {
@ -83,20 +111,34 @@ const System = () =>{
} else if (phone.platform == 'android') { } else if (phone.platform == 'android') {
isIos.value = false isIos.value = false
} }
}; }
// 获取页面宽度 // 获取页面宽度
const updatePageWidth = () => { const updatePageWidth = () => {
const systemInfo = uni.getSystemInfoSync(); const systemInfo = uni.getSystemInfoSync();
pageWidth.value = systemInfo.windowWidth; pageWidth.value = systemInfo.windowWidth;
}; }
const searchWidth = computed(() => { const searchWidth = computed(() => {
return pageWidth.value - statusHeight.value - ButtonWidth.value - 35; return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
})
const count = computed(() => {
const count = orderInfoList.value.filter(item => item.amount > 0);
return count.length
}); });
const btnShow = computed(() => {
let show = false;
if(count.value && returnReason.value && contactPhone.value && returnImage.value.length){
show = true
}else{
show = false
}
return show;
})
// 判断是否有上一页 // 判断是否有上一页
const getPages = () => { const getPages = () => {
const pages = getCurrentPages(); const pages = getCurrentPages();
return pages.length > 1; return pages.length > 1;
}; }
const handleBack = () => { const handleBack = () => {
if (getPages()) { if (getPages()) {
// 如果有上一页，返回上一页 // 如果有上一页，返回上一页
@ -107,17 +149,205 @@ const handleBack = () => {
url: '/pages/index/index', url: '/pages/index/index',
}); });
} }
}; }
const editAmount =(e,list)=>{
const { productId,cartNum,amount } = list;
if(e == 1 && amount == 0) return false;
if(e == 2 && cartNum == amount) return false;
orderInfoList.value.forEach(item=>{
if(item.productId == productId){
if(e == 1){
item.amount = item.amount - 1;
}else{
item.amount = item.amount + 1;
}
}
})
api_returncomputedPrice();
}
//删除上传图片
const delImg = (i) =>{
const item = returnImage.value.slice()
item.splice(i, 1)
returnImage.value = item;
}
//获取可退款商品
const api_returngetOrder=()=>{
loads('', true)
return returngetOrder(orderId.value).then(({data}) => {
uni.hideLoading();
data.orderInfoList.forEach(item=>{
item.amount = 1
})
orderInfoList.value = data.orderInfoList
id.value = data.id
})
.then(()=>api_returncomputedPrice())
.catch(({message}) => {
uni.hideLoading();
uni.showModal({
content:message,
showCancel: false,
success: () => {
uni.navigateBack({
delta:1
})
}
})
})
}
//获取退款计算
const api_returncomputedPrice=()=>{
//过滤出选中的对象
const items = orderInfoList.value.filter(item => item.amount > 0);
// 提取 name 和 age 组成新数组
const request = items.map(item => ({
productId: item.comment,
returnNum: item.amount,
unique:item.attrId
}));
const params = {
orderNo:orderId.value,
returnInfo:request
}
loads('', true)
return returncomputedPrice(params).then(({data}) => {
uni.hideLoading();
returnAmount.value = data.returnAmount;
}).catch(({message}) => {
uni.hideLoading();
uni.showModal({
content:message,
showCancel: false
})
})
}
//提交退款
const api_returnreturnApply=()=>{
if(!count.value){
return false;
}
if(!returnReason.value){
uni.showToast({
title:'输入退款理由',
icon:'error'
})
return false;
}
if(!contactPhone.value){
uni.showToast({
title:'输入联系方式',
icon:'error'
})
return false;
}
if(!returnImage.value.length){
uni.showToast({
title:'上传退款凭证',
icon:'error'
})
return false;
}
//过滤出选中的对象
const items = orderInfoList.value.filter(item => item.amount > 0);
//提取 name 和 age 组成新数组
const request = items.map(item => ({
productId: item.comment,
returnNum: item.amount,
unique:item.attrId
}));
const params = {
contactPhone:contactPhone.value,
id:id.value,
orderNo:orderId.value,
returnImage:returnImage.value.toString(),
returnReason:returnReason.value,
returnInfo: request
}
loads('', true)
return returnreturnApply(params).then(({message}) => {
uni.hideLoading();
uni.showToast({
title:message,
icon:'success',
success: () => {
setTimeout(()=>{
uni.redirectTo({
url:`/order/assList/assList?type=1`
})
},1400)
}
})
}).catch(({message}) => {
uni.hideLoading();
uni.showModal({
content:message,
showCancel: false
})
})
}
//查看上传图片
const previewImage = (i)=>{
let picture = returnImage.value;
uni.previewImage({
current: i,
urls:picture
});
}
//选择图片
const chooseImage = () => {
uni.chooseImage({
count: 6, // 最多选择6张
sizeType: ['original', 'compressed'], // 可选择原图或压缩图
sourceType: ['album', 'camera'], // 可从相册或相机选择
success: (res) => {
api_uploadimage(res.tempFilePaths);
},
fail: (err) => {
console.error('选择图片失败:', err);
}
});
}
//接口上传图片拿到图片url
const api_uploadimage = (tempFilePaths) =>{
loads('上传中', true)
uni.uploadFile({
url:`${url}/api/front/user/upload/image`, // 替换为你的接口地址
filePath: tempFilePaths[0], // 图片临时路径
name: 'multipart', // 后端接收文件的字段名
header: {
'Authori-zation':token.value ,// 身份令牌
'Content-Type': 'multipart/form-data'
},
formData: { // 附加的其他参数
model: 'wechat',
pid: '8'
},
success: (res) => {
uni.hideLoading()
const data = JSON.parse(res.data); // 解析后端返回的数据
returnImage.value.push(data.data.url);
},
fail: (err) => {
uni.hideLoading()
console.error('上传失败:', err);
}
})
}
onLoad((options) => { onLoad((options) => {
System(); System();
//初始化时判断是否显示返回按钮 //初始化时判断是否显示返回按钮
showBack.value = getPages(); showBack.value = getPages();
updatePageWidth(); updatePageWidth();
}); if(options.orderId){
orderId.value = options.orderId;
api_returngetOrder()
}
})
onShow(() => {}); onShow(() => {});
onPageScroll((e)=>{ onPageScroll((e)=>{
const top = e.scrollTop; const top = e.scrollTop;
// 导航条颜色透明渐变 //导航条颜色透明渐变
if (top <= 50) { if (top <= 50) {
headShow.value = false headShow.value = false
} else { } else {
@ -128,7 +358,7 @@ onPageScroll((e)=>{
} }
headShow.value = true headShow.value = true
} }
}), })
onReady(()=>{}) onReady(()=>{})
onPullDownRefresh(()=>{}) onPullDownRefresh(()=>{})
onReachBottom(()=>{}) onReachBottom(()=>{})

133
order/assedit/style.scss
View File

@ -48,6 +48,126 @@ page{
border-bottom: 1rpx solid #f6f6f6; border-bottom: 1rpx solid #f6f6f6;
} }
.cont_view{ .cont_view{
.data_list{
margin: 0rpx 25rpx 25rpx 25rpx;
border-radius: 16rpx;
background-color: #ffffff;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
padding: 25rpx;
.data_l{
width: 50rpx;
height: 180rpx;
display: flex;
align-items: center;
justify-content: center;
padding-left: 20rpx;
}
.data_img{
width: 180rpx;
height: 180rpx;
position: relative;
border-radius: 16rpx;
overflow: hidden;
.data_imgUrl{
width: 180rpx;
height: 180rpx;
position: absolute;
top: 0;
z-index: 1;
}
}
.data_text{
width: 455rpx;
.data_title{
font-size: 28rpx;
color: #333333;
font-weight: 500;
margin-top: 5rpx;
min-height: 124rpx;
}
.data_title text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-weight: 400;
}
.data_operate{
display: flex;
align-items: center;
justify-content: space-between;
.data_num{
font-size: 34rpx;
color: #fe4301;
font-weight: 500;
}
.data_edit{
display: flex;
align-items: center;
justify-content: center;
.data_edit_empty{
width: 50rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
.data_edit_em{
background-color: #fe4301;
width: 70rpx;
height: 70rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
.data_edit_emptyImg{
width: 30rpx;
height: 30rpx;
}
}
}
.border_l{
border-left: 1px solid #E9E9E9;
border-top-left-radius: 50rpx;
border-bottom-left-radius: 50rpx;
}
.border_r{
border-right: 1px solid #E9E9E9;
border-top-right-radius: 50rpx;
border-bottom-right-radius: 50rpx;
}
.data_edit_img{
width: 55rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
.data_edit_imgurl{
width: 25rpx;
height: 25rpx;
display: block;
}
}
.data_number{
width: 60rpx;
height: 50rpx;
font-size: 28rpx;
color: #333;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #E9E9E9;
}
}
}
}
}
.cont{ .cont{
margin: 0rpx 25rpx 25rpx 25rpx; margin: 0rpx 25rpx 25rpx 25rpx;
padding: 30rpx; padding: 30rpx;
@ -102,6 +222,11 @@ page{
text-align: right; text-align: right;
height: 100%; height: 100%;
} }
.font_input{
font-size: 36rpx;
font-weight: 500;
color: #fd3f3f;
}
} }
.cont_item_r text{ .cont_item_r text{
margin-left: 20rpx; margin-left: 20rpx;
@ -213,3 +338,11 @@ page{
} }
} }
} }
.price::before {
content: '¥';
font-size: 26rpx;
margin-right: 5rpx;
}
.opy{
opacity: 0.3;
}

226
order/editeval/editeval.vue
View File

@ -4,12 +4,10 @@
<view class="cont_top"> <view class="cont_top">
<view class="cont_top_l"> <view class="cont_top_l">
<view class="cont_top_text">商品评价 <text class="cont_top_num">{{count}}</text>/{{evalList.length}}</view> <view class="cont_top_text">商品评价 <text class="cont_top_num">{{count}}</text>/{{evalList.length}}</view>
<view class="cont_top_btn">一键好评</view> <view class="cont_top_btn" @click="clickShopeval">一键好评</view>
</view> </view>
<view class="cont_top_r">匿名</view> <view class="cont_top_r">匿名</view>
</view> </view>
<template v-for="(item,index) in evalList" :key="index"> <template v-for="(item,index) in evalList" :key="index">
<view class="cont_shop" @click="unfold(item)"> <view class="cont_shop" @click="unfold(item)">
<view class="cont_shop_l"> <view class="cont_shop_l">
@ -34,14 +32,14 @@
</view> </view>
<view class="cont_ul"> <view class="cont_ul">
<view class="cont_li" v-for="(img,i) in item.uploadImg" :key="i"> <view class="cont_li" v-for="(img,i) in item.pics" :key="i">
<view class="cont_upload_remove" @click="delImg(item,i)"> <view class="cont_upload_remove" @click="delImg(item,i)">
<image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image> <image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image>
</view> </view>
<image class="cont_li_img" :src="img" mode="aspectFill"></image> <image class="cont_li_img" :src="img" mode="aspectFill" @click="previewImage(item,i)"></image>
</view> </view>
<view class="cont_li cont_upload" @click="chooseImage(item)" v-if="item.uploadImg.length <= 5"> <view class="cont_li cont_upload" @click="chooseImage(item)" v-if="item.pics.length <= 5">
<image class="cont_upload_img" src="../../static/eval/adds.png" mode="widthFix"></image> <image class="cont_upload_img" src="../../static/eval/adds.png" mode="widthFix"></image>
<view class="cont_upload_text">添加图片</view> <view class="cont_upload_text">添加图片</view>
</view> </view>
@ -51,37 +49,43 @@
<view class="cont_shop_border"></view> <view class="cont_shop_border"></view>
</block> </block>
</template> </template>
</view>
<view class="eval_server">
<view class="eval_server_text">服务评价</view>
<view class="eval_server_type">
<block v-for="(i,index) in server_list" :key="index">
<view @click="clickServerEval(i)" class="cont_goos" :class="i.checkedShow?'cont_goos_aver':''"><image class="cont_goos_img" :src="i.checkedShow?i.imgUrl_aver:i.imgUrl" mode="widthFix"></image>{{i.name}}</view>
</block>
</view>
</view> </view>
<view style="height: 300rpx;"></view> <view style="height: 300rpx;"></view>
<view class="footer"> <view class="footer">
<view class="footer_btn" :class="count == 0?'opy':''">提交</view> <view class="footer_btn" :class="count == 0?'opy':''" @click="commentBtn()">提交</view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { url } from '@/server/config.js'
import { loads } from '@/utils/index.js' import { loads } from '@/utils/index.js'
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue'; import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值 import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { orderReplyproduct } from "@/server/api.js" import { orderReplyproduct,uploadimage,orderReplycomment } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop,token } = storeToRefs(counterStore);
const active = ref(0); const active = ref(0);
const isIos = ref(false); const isIos = ref(false);
const orderNo = ref(""); const orderNo = ref("");
const evalList = ref([]); const evalList = ref([]);
const serviceScore = ref(5);
const server_list = ref([]);
const count = computed(() => { const count = computed(() => {
const count = evalList.value.filter(item => item.productScore > 0); const count = evalList.value.filter(item => item.productScore > 0);
return count.length return count.length
}); });
const System = () =>{ const System = () =>{
const phone = wx.getSystemInfoSync(); const phone = wx.getSystemInfoSync();
if (phone.platform == 'ios') { if (phone.platform == 'ios') {
@ -95,6 +99,24 @@ const unfold = (e) =>{
if(e.id == item.id){item.show = !item.show;} if(e.id == item.id){item.show = !item.show;}
}) })
} }
const clickShopeval = () =>{
let productScore = 0;
evalList.value.forEach(item=>{
item.list.forEach(i=>{
if(i.id == 5){
i.checkedShow = true
productScore = 5;
}
})
item.productScore = productScore;
})
server_list.value.forEach(item=>{
if(item.id == 5){
item.checkedShow = true
serviceScore.value = item.id;
}
})
}
const clickEval = (item,i) =>{ const clickEval = (item,i) =>{
let productScore = 0; let productScore = 0;
evalList.value.forEach(evalList=>{ evalList.value.forEach(evalList=>{
@ -102,13 +124,7 @@ const clickEval = (item,i) =>{
evalList.list.forEach(item=>{ evalList.list.forEach(item=>{
if(i.id == item.id){ if(i.id == item.id){
item.checkedShow = true; item.checkedShow = true;
if(i.id == 1){ productScore = i.id;
productScore = 2;
}else if(i.id == 2){
productScore = 4;
}else{
productScore = 5;
}
}else{ }else{
item.checkedShow = false; item.checkedShow = false;
} }
@ -120,6 +136,18 @@ const clickEval = (item,i) =>{
} }
}) })
} }
const clickServerEval = (i) =>{
let id = 0;
server_list.value.forEach(item=>{
if(i.id == item.id){
item.checkedShow = true;
id = i.id;
}else{
item.checkedShow = false;
}
})
serviceScore.value = id;
}
const api_orderReplyproduct=()=>{ const api_orderReplyproduct=()=>{
loads('', true) loads('', true)
const params = { const params = {
@ -135,34 +163,57 @@ const api_orderReplyproduct=()=>{
item.show = true; item.show = true;
} }
item.comment = ""; item.comment = "";
item.pics = ""; item.pics = [];
item.productScore = 0; item.productScore = 0;
item.serviceScore = 0;
item.uploadImg = []; item.uploadImg = [];
item.list = [ item.list = [
{ {
id:1, id:2,
imgUrl:'../../static/eval/negative.png', imgUrl:'../../static/eval/negative.png',
imgUrl_aver:'../../static/eval/negative_aver.png', imgUrl_aver:'../../static/eval/negative_aver.png',
name:"差评", name:"差评",
checkedShow:false checkedShow:false
}, },
{ {
id:2, id:4,
imgUrl:'../../static/eval/ordinary.png', imgUrl:'../../static/eval/ordinary.png',
imgUrl_aver:'../../static/eval/ordinary_aver.png', imgUrl_aver:'../../static/eval/ordinary_aver.png',
name:"一般", name:"一般",
checkedShow:false checkedShow:false
}, },
{ {
id:3, id:5,
imgUrl:'../../static/eval/good.png', imgUrl:'../../static/eval/good.png',
imgUrl_aver:'../../static/eval/good_aver.png', imgUrl_aver:'../../static/eval/good_aver.png',
name:"好评", name:"好评",
checkedShow:false checkedShow:false
} }
] ]
}) })
serviceScore.value = 0;
server_list.value = [
{
id:2,
imgUrl:'../../static/eval/negative.png',
imgUrl_aver:'../../static/eval/negative_aver.png',
name:"差评",
checkedShow:false
},
{
id:3,
imgUrl:'../../static/eval/ordinary.png',
imgUrl_aver:'../../static/eval/ordinary_aver.png',
name:"一般",
checkedShow:false
},
{
id:5,
imgUrl:'../../static/eval/good.png',
imgUrl_aver:'../../static/eval/good_aver.png',
name:"好评",
checkedShow:false
}
]
evalList.value = data; evalList.value = data;
}).catch(({message}) => { }).catch(({message}) => {
uni.hideLoading(); uni.hideLoading();
@ -177,17 +228,26 @@ const api_orderReplyproduct=()=>{
}) })
}) })
} }
//查看上传图片
const previewImage = (item,i)=>{
let picture = [];
evalList.value.forEach(list=>{
if(item.id == list.id){
picture = item.pics
}
})
uni.previewImage({
current: i,
urls:picture
});
}
//删除上传图片 //删除上传图片
const delImg = (e,i) =>{ const delImg = (e,i) =>{
evalList.value.forEach(item=>{ evalList.value.forEach(item=>{
if(e.id == item.id){ if(e.id == item.id){
console.log('000000') const pics = item.pics.slice()
const tempFileimg = item.uploadImg.slice() pics.splice(i, 1)
// const picture = this.picture.slice() item.pics = pics;
tempFileimg.splice(i, 1)
// picture.splice(i, 1)
item.uploadImg = tempFileimg
// this.picture = picture
} }
}) })
} }
@ -198,29 +258,101 @@ const chooseImage = (e) => {
sizeType: ['original', 'compressed'], // 可选择原图或压缩图 sizeType: ['original', 'compressed'], // 可选择原图或压缩图
sourceType: ['album', 'camera'], // 可从相册或相机选择 sourceType: ['album', 'camera'], // 可从相册或相机选择
success: (res) => { success: (res) => {
// imageList.value = res.tempFilePaths; // 获取临时路径 api_uploadimage(res.tempFilePaths,e);
evalList.value.forEach(item=>{
if(e.id == item.id){
item.uploadImg.push(res.tempFilePaths)
}
})
console.log('evalList--',evalList.value);
}, },
fail: (err) => { fail: (err) => {
console.error('选择图片失败:', err); console.error('选择图片失败:', err);
uni.showToast({ title: '选择图片失败', icon: 'none' });
} }
}); });
}; }
//接口上传图片拿到图片url
const api_uploadimage = (tempFilePaths,e) =>{
loads('上传中', true)
uni.uploadFile({
url:`${url}/api/front/user/upload/image`, // 替换为你的接口地址
filePath: tempFilePaths[0], // 图片临时路径
name: 'multipart', // 后端接收文件的字段名
header: {
'Authori-zation':token.value ,// 身份令牌
'Content-Type': 'multipart/form-data'
},
formData: { // 附加的其他参数
model: 'wechat',
pid: '8'
},
success: (res) => {
uni.hideLoading()
const data = JSON.parse(res.data); // 解析后端返回的数据
evalList.value.forEach(item=>{
if(e.id == item.id){
item.pics.push(data.data.url);
}
})
},
fail: (err) => {
uni.hideLoading()
console.error('上传失败:', err);
}
})
}
//评论提交
const commentBtn = () => {
//过滤出选中的对象
const items = evalList.value.filter(item => item.productScore > 0);
// 提取 name 和 age 组成新数组
const request = items.map(item => ({
comment: item.comment,
pics: item.pics.toString(),
productId:item.productId,
productScore:item.productScore,
serviceScore:serviceScore.value,
isPrivacy:0,
orderNo:orderNo.value,
unique:item.unique
}));
if(!request.length){
uni.showToast({
title:'您还未评价哦！',
icon:'error'
})
return false
}
loads('', true)
// const params = {request}
return orderReplycomment(request).then(({message}) => {
uni.hideLoading();
uni.showToast({
title:message,
icon:'success',
success: () => {
setTimeout(()=>{
uni.redirectTo({
url:`/order/orderevallist/orderevallist?type=1`
})
},1400)
}
})
}).catch(({message}) => {
uni.hideLoading();
uni.showModal({
content:message,
showCancel: false,
success: () => {
uni.navigateBack({
delta:1
})
}
})
})
}
onLoad((options) => { onLoad((options) => {
System(); System();
if(options.orderNo){ if(options.orderNo){
orderNo.value = options.orderNo; orderNo.value = options.orderNo;
api_orderReplyproduct();
} }
api_orderReplyproduct();
}); });
onShow(() => {}); onShow(() => {});
onReady(()=>{}) onReady(()=>{})

33
order/editeval/style.scss
View File

@ -212,7 +212,38 @@ page{
} }
.eval_server{
margin: 20rpx 20rpx 0;
background-color: #fff;
border-radius: 16rpx;
padding-top: 15rpx;
padding-bottom: 15rpx;
padding-left: 25rpx;
display: flex;
align-items: center;
justify-content: space-between;
.eval_server_text{
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.eval_server_type{
display: flex;
.cont_goos{
display: flex;
align-items: center;
color: #999;
font-size: 26rpx;
padding: 25rpx 25rpx 25rpx 0rpx;
.cont_goos_img{
width: 40rpx;
height: 40rpx;
display: block;
margin-right: 10rpx;
}
}
}
}
.footer{ .footer{
position: fixed; position: fixed;
left: 0; left: 0;

6
order/orderDetail/orderDetail.vue
View File

@ -6,8 +6,8 @@
<view class="cont_order_type_desc" v-if="orderDetails.orderStatusMsg && orderDetails.status != 5">{{orderDetails.orderStatusMsg}}</view> <view class="cont_order_type_desc" v-if="orderDetails.orderStatusMsg && orderDetails.status != 5">{{orderDetails.orderStatusMsg}}</view>
</view> </view>
<view class="cont_service"> <view class="cont_service">
<image class="cont_service_img" src="../../static/order/ridertel.png" mode="widthFix"></image> <image class="cont_service_img" src="../../static/order/service.png" mode="widthFix"></image>
<view class="cont_service_name">联系骑手</view> <view class="cont_service_name">联系客服</view>
</view> </view>
</view> </view>
@ -135,7 +135,7 @@ const evaluate = () =>{
} }
const assDetail=()=>{ const assDetail=()=>{
uni.navigateTo({ uni.navigateTo({
url:`/order/assedit/assedit` url:`/order/assedit/assedit?orderId=${orderDetails.value.orderId}`
}) })
}; };
const more_arr = ()=>{ const more_arr = ()=>{

9
order/orderDetail/style.scss
View File

@ -87,6 +87,7 @@ page{
width: 138rpx; width: 138rpx;
height: 138rpx; height: 138rpx;
display: block; display: block;
border-radius: 4rpx;
} }
} }
.cont_shop_text{ .cont_shop_text{
@ -200,11 +201,11 @@ page{
align-items: center; align-items: center;
.cont_shop_item_copy{ .cont_shop_item_copy{
width: 77rpx; width: 77rpx;
height: 40rpx; height: 30rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 1rpx solid #999999; border: 1rpx solid #FF0000;
font-size: 22rpx; font-size: 20rpx;
color:#999999; color:#FF0000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

16
order/orderList/orderList.vue
View File

@ -97,7 +97,7 @@ const searchWidth = computed(() => {
}); });
const assDetail=(item)=>{ const assDetail=(item)=>{
uni.navigateTo({ uni.navigateTo({
url:`/order/assedit/assedit` url:`/order/assedit/assedit?orderId=${item.orderId}`
}) })
}; };
// 判断是否有上一页 // 判断是否有上一页
@ -188,13 +188,23 @@ const api_orderlist=()=>{
shop_orderlist.value = shop_orderlist.value.concat(data.list); shop_orderlist.value = shop_orderlist.value.concat(data.list);
if(pages.value == 1 && !data.list.length){ if(pages.value == 1 && !data.list.length){
img_err.value = "../../static/Empty/order_lisr_img.png" img_err.value = "../../static/Empty/order_lisr_img.png"
decs.value = "—— 暂无订单记录 ——" if(type.value == 0){
decs.value = "—— 暂无待支付记录 ——"
}else if(type.value == 5){
decs.value = "—— 暂无备货记录 ——"
}else if(type.value == 2){
decs.value = "—— 暂无待收货记录 ——"
}else if(type.value == 3){
decs.value = "—— 暂无待评价记录 ——"
}else{
decs.value = "—— 暂无订单记录 ——"
}
}else if(data.list.length < 10){ }else if(data.list.length < 10){
decs.value = '—— 嗷呜，已经到底啦 ——'; decs.value = '—— 嗷呜，已经到底啦 ——';
} }
}).catch(({message}) => { }).catch(({message}) => {
img_err.value = "../../static/Empty/err.png" img_err.value = "../../static/Empty/err.png"
decs.value = `—— ${message} ——`; decs.value = `—— ${message||'网络异常'} ——`;
}) })
} }
//确认收货 //确认收货

156
order/orderevallist/orderevallist.vue
View File

@ -7,69 +7,34 @@
</view> </view>
</view> </view>
<view class="cont"> <view class="cont" v-for="(item,index) in replyList" :key="index">
<view class="cont_title">下单时间: 2025/03/06 18:00</view> <view class="cont_title">下单时间:{{item.createTime}}</view>
<view class="cont_shop" @click="editEval()"> <view class="cont_shop" @click="editEval(item)">
<view class="cont_shop_l"> <view class="cont_shop_l">
<view class="cont_shop_img"> <view class="cont_shop_img">
<image class="cont_shop_imgUrl" src="../../static/Mask.png" mode="widthFix"></image> <image class="cont_shop_imgUrl" :src="item.image" mode="widthFix"></image>
</view> </view>
<view class="cont_shop_title">泡椒田鸡</view> <view class="cont_shop_title" :class="active == 0?'active':''"><text>{{item.productName}}</text></view>
</view> </view>
<view class="cont_shop_r" v-if="active == 0" >去评价</view> <view class="cont_shop_r" v-if="active == 0">去评价</view>
</view> </view>
<block v-if="active == 1"> <block v-if="active == 1">
<view class="cont_goos"><image class="cont_goos_img" src="../../static/eval/good.png" mode="widthFix"></image>好评</view> <view class="cont_goos"><image class="cont_goos_img" :src="item.img_aver" mode="widthFix"></image>{{item.text}}</view>
<view class="cont_text"><text>味道很鲜美，分量很足，价格实惠</text></view> <view class="cont_text"><text>{{item.comment}}</text></view>
<view class="cont_ul"> <view class="cont_ul">
<view class="cont_li"> <view class="cont_li" v-for="(img,i) in item.imgArr" :key="i">
<image src="../../static/Mask.png" mode="widthFix"></image> <image :src="img" mode="aspectFill" @click="previewImage(item,i)"></image>
</view>
<view class="cont_li">
<image src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="cont_li">
<image src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="cont_li">
<image src="../../static/Mask.png" mode="widthFix"></image>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
<view class="empty" v-if="img_err && decs">
<view class="cont"> <view class="empty_cont">
<view class="cont_title">下单时间: 2025/03/06 18:00</view> <image class="empty_cont_img" :src="img_err" mode="widthFix"></image>
<view class="cont_shop" @click="editEval()"> <view class="empty_cont_title">{{decs}}</view>
<view class="cont_shop_l">
<view class="cont_shop_img">
<image class="cont_shop_imgUrl" src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="cont_shop_title">泡椒田鸡</view>
</view>
<view class="cont_shop_r" v-if="active == 0" >去评价</view>
</view> </view>
<block v-if="active == 1">
<view class="cont_goos"><image class="cont_goos_img" src="../../static/eval/negative.png" mode="widthFix"></image>差评</view>
<view class="cont_text"><text>味道很鲜美，分量很足，价格实惠</text></view>
<view class="cont_ul">
<view class="cont_li">
<image src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="cont_li">
<image src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="cont_li">
<image src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="cont_li">
<image src="../../static/Mask.png" mode="widthFix"></image>
</view>
</view>
</block>
</view> </view>
<view v-else class="load_desc">{{decs}}</view>
</view> </view>
@ -80,30 +45,107 @@ import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from '
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值 import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { orderReplylist } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const tab = ref(['待评价','已评价']); const tab = ref(['待评价','已评价']);
const active = ref(0); const active = ref(0);
const replyList = ref([]);
const decs = ref('');
const pages = ref(0);
const limits = ref(10);
const img_err = ref("");
const type = ref(0);
const clickOrder=(index)=>{ const clickOrder=(index)=>{
if(index == active.value) return false; if(index == active.value) return false;
type.value = index;
active.value = index; active.value = index;
replyList.value = [];
decs.value = '';
pages.value = 0;
api_orderReplylist();
}; };
const editEval=()=>{ const editEval=(item)=>{
if(active.value != 0) return false; if(active.value != 0) return false;
uni.navigateTo({ uni.navigateTo({
url:`/order/editeval/editeval` url:`/order/editeval/editeval?orderNo=${item.orderNo}`
}) })
}; }
//查看上传图片
const previewImage = (item,i)=>{
let picture = [];
replyList.value.forEach(list=>{
if(item.productId == list.productId){
picture = item.imgArr
}
})
uni.previewImage({
current: i,
urls:picture
});
}
const api_orderReplylist=()=>{
pages.value = pages.value + 1;
img_err.value = "";
decs.value = "—— 加载中... ——";
const params = {
type:type.value,
page:pages.value,
limit:limits.value
}
return orderReplylist(params).then(({data}) => {
decs.value = '—— 上拉加载更多 ——';
data.list.forEach(item=>{
if(item.pics !== null){
item.imgArr = item.pics.split(",");
}
if(item.scoreGrade == 1){
item.img_aver = "../../static/eval/good_aver.png";
item.text = "好评"
}else if(item.scoreGrade == 2){
item.img_aver = "../../static/eval/ordinary_aver.png";
item.text = "一般"
}else if(item.scoreGrade == 3){
item.img_aver = "../../static/eval/negative_aver.png";
item.text = "差评"
}else{
item.img_aver = "";
item.text = "";
}
})
replyList.value = replyList.value.concat(data.list);
if(pages.value == 1 && !data.list.length){
img_err.value = "../../static/Empty/order_lisr_img.png"
decs.value = "—— 抱歉，该页面没有相关内容 ——"
}else if(data.list.length < 10){
decs.value = '—— 嗷呜，已经到底啦 ——';
}
}).catch(({message}) => {
img_err.value = "../../static/Empty/err.png"
decs.value = `—— ${message||'网络异常'} ——`;
})
}
onLoad((options) => { onLoad((options) => {
const { type } = options; if(options.type == 0 || options.type == 1){
if(type == 0 || type == 1){active.value = type;} active.value = options.type;
type.value = options.type;
}
api_orderReplylist();
}); });
onShow(() => {}); onShow(() => {});
onReady(()=>{}) onReady(()=>{})
onPullDownRefresh(()=>{}) onPullDownRefresh(()=>{
onReachBottom(()=>{}) replyList.value = [];
decs.value = '';
pages.value = 0;
api_orderReplylist();
})
onReachBottom(()=>{
api_orderReplylist();
})
</script> </script>
<style lang="scss"> <style lang="scss">

64
order/orderevallist/style.scss
View File

@ -72,18 +72,30 @@ page{
width: 114rpx; width: 114rpx;
height: 114rpx; height: 114rpx;
display: block; display: block;
border-radius: 4rpx;
} }
} }
.active{
width: 380rpx;
}
.cont_shop_title{ .cont_shop_title{
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
margin-left: 25rpx; margin-left: 20rpx;
font-weight: 500; font-weight: 500;
} }
.cont_shop_title text{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
}
} }
.cont_shop_r{ .cont_shop_r{
width: 150rpx; width: 130rpx;
height: 60rpx; height: 50rpx;
background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%); background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%);
border-radius: 39rpx; border-radius: 39rpx;
display: flex; display: flex;
@ -131,10 +143,46 @@ page{
display: block; display: block;
} }
} }
} }
}
.load_desc{
font-size: 28rpx;
color: #aaa;
text-align: center;
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.empty{
height:480rpx;
margin:200rpx 20rpx 0rpx 20rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
.empty_cont{
.empty_cont_img{
margin: 0 auto;
width: 355rpx;
height: 280rpx;
display: flex;
}
.empty_cont_title{
font-size: 28rpx;
color: #aaaaaa;
text-align: center;
}
.empty_cont_btn{
margin: 0 auto;
width: 154rpx;
height: 46rpx;
border-radius: 30rpx;
border: 1rpx solid #FF0000;
color: #FF0000;
line-height: 30rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
}
}
} }

6
pages.json
View File

@ -126,7 +126,8 @@
"path": "orderevallist/orderevallist", "path": "orderevallist/orderevallist",
"style": { "style": {
"navigationBarTitleText": "评价中心", "navigationBarTitleText": "评价中心",
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
} }
}, },
{ {
@ -140,7 +141,8 @@
"path": "assList/assList", "path": "assList/assList",
"style": { "style": {
"navigationBarTitleText": "退款/售后", "navigationBarTitleText": "退款/售后",
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
} }
}, },
{ {

6
pages/cart/cart.vue
View File

@ -280,10 +280,8 @@ const api_cartlist = (e) =>{
}) })
.catch(({message}) => { .catch(({message}) => {
uni.hideLoading() uni.hideLoading()
uni.showModal({ img_err.value = "../../static/Empty/err.png"
content:message, cartdecs.value = `—— ${message||'网络异常'} ——`;
showCancel: false
})
}) })
} }
//购物车无效商品 //购物车无效商品

4
pages/cart/style.scss
View File

@ -131,8 +131,8 @@ page{
} }
.empty_cont_btn{ .empty_cont_btn{
margin: 0 auto; margin: 0 auto;
width: 154rpx; width: 200rpx;
height: 46rpx; height: 60rpx;
border-radius: 30rpx; border-radius: 30rpx;
border: 1rpx solid #FF0000; border: 1rpx solid #FF0000;
color: #FF0000; color: #FF0000;

51
pages/index/index.vue
View File

@ -85,6 +85,55 @@
</view> --> </view> -->
<!-- 获取定位失败小组件提示 --> <!-- 获取定位失败小组件提示 -->
<locationOpen></locationOpen> <locationOpen></locationOpen>
<!-- 多规格组件弹框 -->
<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
<view class="multiPopup">
<view class="shop_open_close" @click="OpenCoupon()">
<image src="../../static/order/close.png" mode="widthFix"></image>
</view>
<view class="multishop">
<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
<view class="multishop_text">
<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
</view>
</view>
<view class="multishop_list">
<view class="multishop_list_title">颜色</view>
<view class="multishop_list_item">
<view class="multishop_list_name multishop_list_arver">沙漠色</view>
<view class="multishop_list_name">黑色</view>
<view class="multishop_list_name">原色</view>
<view class="multishop_list_name">白色</view>
</view>
</view>
<view class="multishop_list">
<view class="multishop_list_title">容量</view>
<view class="multishop_list_item">
<view class="multishop_list_name multishop_list_arver">256GB</view>
<view class="multishop_list_name">512GB</view>
<view class="multishop_list_name">1TB</view>
</view>
</view>
<view style="height: 200rpx;"></view>
<view class="footer_multi">
<view class="multishop_amount">
<view class="multishop_name_amount">选数量</view>
<view class="multishop_data_edit">
<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
</view>
<view class="multishop_data_number">22</view>
<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="footer_multi_btn">确定</view>
</view>
</view>
</uni-popup>
</view> </view>
</template> </template>
@ -101,6 +150,7 @@ const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,nikeName,key,token,phone,uid,storeName,storeId,latitude,longitude,locationName,locationShow } = storeToRefs(counterStore); const {statusHeight,headerHeight,nikeName,key,token,phone,uid,storeName,storeId,latitude,longitude,locationName,locationShow } = storeToRefs(counterStore);
const homeList = ref([]); const homeList = ref([]);
const multiPopup = ref(null);
const shopList = ref([]); const shopList = ref([]);
const total = ref(0); const total = ref(0);
const pages = ref(0); const pages = ref(0);
@ -115,6 +165,7 @@ const api_index=()=>{
uni.hideLoading(); uni.hideLoading();
homeList.value = data.homeList; homeList.value = data.homeList;
ishomeListLoaded.value = true; ishomeListLoaded.value = true;
multiPopup.value.open();
}) })
.catch(({message}) => { .catch(({message}) => {
uni.hideLoading(); uni.hideLoading();

185
pages/index/style.scss
View File

@ -438,4 +438,187 @@ page{
transform: scale(1.05); transform: scale(1.05);
} }
} }
// 结束 // 结束
//多规格
.multiPopup{
background-color: #FFFFFF;
border-top-left-radius: 25rpx;
border-top-right-radius: 25rpx;
max-height: 800rpx;
overflow-y: auto;
position: relative;
.shop_open_close{
width: 80rpx;
height: 80rpx;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.shop_open_close image{
width: 45rpx;
height: 45rpx;
}
.multishop{
display: flex;
padding: 25rpx 25rpx 0rpx 25rpx;
.multishop_img{
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
}
.multishop_text{
width: 460rpx;
margin-left: 20rpx;
.multishop_title{
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-top: 5rpx;
min-height: 115rpx;
}
.multishop_title text{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.multishop_price{
font-size: 32rpx;
color: #FD3F3F;
font-weight: 500;
.multishop_name{
color: #999;
font-size: 23rpx;
text-decoration: line-through;
margin-left: 5rpx;
font-weight: 400;
}
.multishop_name::before{
content: "¥";
font-size: 20rpx;
margin-right: 5rpx;
}
}
.multishop_price::before{
content: "¥";
font-size: 24rpx;
margin-right: 5rpx;
}
}
}
.multishop_list{
padding: 25rpx 25rpx 0rpx 25rpx;
.multishop_list_title{
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-bottom: 25rpx;
}
.multishop_list_item{
display: flex;
flex-wrap: wrap;
.multishop_list_name{
padding: 12rpx 35rpx 12rpx 35rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #333333;
background-color: #f6f6f6;
margin-right: 25rpx;
margin-bottom: 25rpx;
border:1px solid #f6f6f6;
}
.multishop_list_arver{
background-color: #FFD7D7;
border:1px solid #fd3f3f;
color: #fd3f3f;
}
}
}
.footer_multi{
position: fixed;
bottom: 0rpx;
width: 100%;
background-color: #FFFFFF;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
.multishop_amount{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 25rpx;
padding-right: 25rpx;
margin-top: 15rpx;
margin-bottom: 40rpx;
.multishop_name_amount{
font-size: 28rpx;
color: #333;
font-weight: 500;
}
.multishop_data_edit{
display: flex;
align-items: center;
justify-content: center;
.multishop_data_edit_img{
width: 55rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
.multishop_data_edit_imgurl{
width: 25rpx;
height: 25rpx;
display: block;
}
}
.border_l{
border-left: 1px solid #E9E9E9;
border-top-left-radius: 50rpx;
border-bottom-left-radius: 50rpx;
}
.border_r{
border-right: 1px solid #E9E9E9;
border-top-right-radius: 50rpx;
border-bottom-right-radius: 50rpx;
}
}
.multishop_data_number{
width: 60rpx;
height: 50rpx;
font-size: 28rpx;
color: #333;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #E9E9E9;
}
}
.footer_multi_btn{
margin: 0 28rpx 0 28rpx;
height:84rpx;
background-color: #FD3F3F;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #FFFFFF;
border-radius: 50rpx;
}
}
}

7
server/api.js
View File

@ -233,7 +233,7 @@ export const couponreceive = (data) => {
} }
//图片上传 //图片上传
export const uploadimage = (data) => { export const uploadimage = (data) => {
return request({url:`/api/front/user/upload/image`,method:'POST',data}); return request({url:`/api/front/user/upload/image`,method:'POST',data,contenttype:'application/x-www-form-urlencoded'});
} }
//添加收藏产品 //添加收藏产品
export const collectadd = (data) => { export const collectadd = (data) => {
@ -271,3 +271,8 @@ export const searchkeyword = (data) => {
export const frontshare = (data) => { export const frontshare = (data) => {
return request({url:`/api/front/share`,method:'GET',data}); return request({url:`/api/front/share`,method:'GET',data});
} }
//获取购物车数量
export const frontcartcount = () => {
const data = {numType:1,type:'total'}
return request({url:`/api/front/cart/count`,method:'GET',data});
}

2
server/config.js
View File

@ -9,7 +9,7 @@ const type = 'dev'
* prod生产 * prod生产
*/ */
if(type === 'dev'){ if(type === 'dev'){
url = "http://yz29xy.natappfree.cc"; url = "http://mnse8q.natappfree.cc";
} }
if(type === 'test'){ if(type === 'test'){
url = "https://japiuat.3721zh.com/webapp"; url = "https://japiuat.3721zh.com/webapp";

66
shopProDetail/detail/detail.vue
View File

@ -59,15 +59,15 @@
<view class="footer"> <view class="footer">
<view class="footer_cont"> <view class="footer_cont">
<view class="footer_l"> <view class="footer_l">
<view class="footer_li"> <view class="footer_li" @click="favorite">
<view class="footer_icon"> <view class="footer_icon">
<image class="footer_icon_img" src="../../static/shopdetail/collect.png" mode="widthFix"></image> <image class="footer_icon_img" :src="productInfo.favor_img" mode="widthFix"></image>
</view> </view>
<view class="footer_name">收藏</view> <view class="footer_name">收藏</view>
</view> </view>
<view class="footer_li" @click="goCart()"> <view class="footer_li" @click="goCart()">
<view class="footer_icon"> <view class="footer_icon">
<view class="footer_amount">45</view> <view class="footer_amount" v-if="cartcount > 0">{{cartcount}}</view>
<image class="footer_icon_img" src="../../static/shopdetail/cart.png" mode="widthFix"></image> <image class="footer_icon_img" src="../../static/shopdetail/cart.png" mode="widthFix"></image>
</view> </view>
<view class="footer_name">购物车</view> <view class="footer_name">购物车</view>
@ -121,8 +121,8 @@ const sliderImages = ref([]);
const content = ref(''); const content = ref('');
const productId = ref(''); const productId = ref('');
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,token } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop,token,cartcount } = storeToRefs(counterStore);
import { frontdetail } from '@/server/api' import { frontdetail,collectdelete,collectcancel,collectadd,frontcartcount } from '@/server/api'
const Openqc =() =>{ const Openqc =() =>{
qcShow.value ? qcPopup.value.close():qcPopup.value.open() qcShow.value ? qcPopup.value.close():qcPopup.value.open()
}; };
@ -210,10 +210,15 @@ const orderConfirm = ()=>{
} }
const api_detail=(id)=>{ const api_detail=()=>{
loads('', true); loads('', true);
return frontdetail(id).then(({data}) => { return frontdetail(productId.value).then(({data}) => {
uni.hideLoading(); uni.hideLoading();
if(data.userCollect){
data.favor_img = "../../static/shopdetail/collect_acer.png"
}else{
data.favor_img = "../../static/shopdetail/collect.png"
}
productAttr.value = data.productAttr; productAttr.value = data.productAttr;
productInfo.value = data; productInfo.value = data;
productValue.value = data.productValue; productValue.value = data.productValue;
@ -221,6 +226,33 @@ const api_detail=(id)=>{
if(data.content){ if(data.content){
content.value = data.content.replace(/\<img|\width:[^;]+;/gi,'<img style="width:100%;height:auto;display:block;" '); content.value = data.content.replace(/\<img|\width:[^;]+;/gi,'<img style="width:100%;height:auto;display:block;" ');
} }
})
.then(()=>api_frontcartcount())
.catch(({message}) => {
uni.hideLoading();
uni.showModal({
content:message,
showCancel: false
})
})
}
const favorite = ()=>{
if(productInfo.value.userCollect){
api_collectcancel();
}else{
api_collectadd();
}
}
const api_collectadd=()=>{
loads('', true);
let data = {
category:"store",
id:productInfo.value.id
}
return collectadd(data).then(({message}) => {
uni.hideLoading();
api_detail();
}).catch(({message}) => { }).catch(({message}) => {
uni.hideLoading(); uni.hideLoading();
uni.showModal({ uni.showModal({
@ -229,6 +261,24 @@ const api_detail=(id)=>{
}) })
}) })
} }
const api_collectcancel=()=>{
loads('', true);
return collectcancel(productInfo.value.id).then(({message}) => {
uni.hideLoading();
api_detail();
}).catch(({message}) => {
uni.hideLoading();
uni.showModal({
content:message,
showCancel: false
})
})
}
//购物车数量
const api_frontcartcount=()=>{
frontcartcount().then(({data}) => {cartcount.value = data.count;})
}
const onSearch=()=>{ const onSearch=()=>{
uni.navigateTo({ uni.navigateTo({
url:`/userserve/SearchProduct/SearchProduct` url:`/userserve/SearchProduct/SearchProduct`
@ -240,7 +290,7 @@ onLoad((options) => {
showBack.value = getPages(); showBack.value = getPages();
if(id){ if(id){
productId.value = id; productId.value = id;
api_detail(id) api_detail()
} }
}); });
onShow(() => {}); onShow(() => {});

0
static/Empty/Mask group@2x (7).png → static/Empty/addressImg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 103 KiB

BIN
static/shopdetail/collect_acer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
store/counter.js
View File

@ -19,6 +19,7 @@ export const useCounterStore = defineStore('counter',()=>{
const longitude = ref(''); const longitude = ref('');
const locationName = ref('正在获取定位'); const locationName = ref('正在获取定位');
const locationShow = ref(false); const locationShow = ref(false);
const cartcount = ref(0)
// 设置 Token // 设置 Token
const setToken = (tokens,uids,phones,nikeNames) => { const setToken = (tokens,uids,phones,nikeNames) => {
token.value = tokens; token.value = tokens;
@ -51,6 +52,7 @@ export const useCounterStore = defineStore('counter',()=>{
latitude, latitude,
longitude, longitude,
locationName, locationName,
locationShow locationShow,
cartcount
} }
}) })

24
userserve/addressList/addressList.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<view class="main"> <view class="main">
<view class="location_cont location_padding"> <view class="location_cont location_padding" v-if="list.length">
<uni-swipe-action> <uni-swipe-action>
<uni-swipe-action-item v-for="(item,index) in list" :key="index" :right-options="options" @click="removeCart(item)"> <uni-swipe-action-item v-for="(item,index) in list" :key="index" :right-options="options" @click="removeCart(item)">
<view class="location_list flex" :class="index != list.length - 1?'location_border':''" @click.stop="select_address(item)"> <view class="location_list flex" :class="index != list.length - 1?'location_border':''" @click.stop="select_address(item)">
@ -18,6 +18,13 @@
</uni-swipe-action-item> </uni-swipe-action-item>
</uni-swipe-action> </uni-swipe-action>
</view> </view>
<view class="empty" v-if="img_err && decs">
<view class="empty_cont">
<image class="empty_cont_img" :src="img_err" mode="widthFix"></image>
<view class="empty_cont_title">{{decs}}</view>
</view>
</view>
<view v-else class="load_desc">{{decs}}</view>
<view style="height: 200rpx;"></view> <view style="height: 200rpx;"></view>
<view class="footer"> <view class="footer">
<view class="footer_btn" @click="addressEdit">新增地址</view> <view class="footer_btn" @click="addressEdit">新增地址</view>
@ -40,6 +47,7 @@ const limits = ref(10);
const decs = ref(''); const decs = ref('');
const list = ref([]); const list = ref([]);
const address_isDefault = ref(false); const address_isDefault = ref(false);
const img_err = ref("");
const options = ref([ const options = ref([
{ {
text: '删除', text: '删除',
@ -50,6 +58,7 @@ const options = ref([
]); ]);
const api_addresslist=()=>{ const api_addresslist=()=>{
pages.value = pages.value + 1; pages.value = pages.value + 1;
img_err.value = "";
decs.value = "—— 加载中... ——"; decs.value = "—— 加载中... ——";
const params = { const params = {
page:pages.value, page:pages.value,
@ -57,15 +66,16 @@ const api_addresslist=()=>{
} }
return addresslist(params).then(({data}) => { return addresslist(params).then(({data}) => {
decs.value = '—— 上拉加载更多 ——' decs.value = '—— 上拉加载更多 ——'
if(data.list.length < 10){ list.value = list.value.concat(data.list);
if(pages.value == 1 && !data.list.length){
img_err.value = "../../static/Empty/addressImg.png"
decs.value = "—— 暂无地址 ——"
}else if(data.list.length < 10){
decs.value = '—— 嗷呜，已经到底啦 ——'; decs.value = '—— 嗷呜，已经到底啦 ——';
} }
list.value = list.value.concat(data.list);
}).catch(({message}) => { }).catch(({message}) => {
uni.showModal({ img_err.value = "../../static/Empty/err.png"
content:message, decs.value = `—— ${message||'网络异常'} ——`;
showCancel: false
})
}) })
} }
const select_address=(item)=>{ const select_address=(item)=>{

41
userserve/addressList/style.scss
View File

@ -93,4 +93,45 @@ page{
font-size: 28rpx; font-size: 28rpx;
} }
} }
}
.load_desc{
font-size: 28rpx;
color: #aaa;
text-align: center;
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.empty{
height:480rpx;
margin:200rpx 20rpx 0rpx 20rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
.empty_cont{
.empty_cont_img{
margin: 0 auto;
width: 355rpx;
height: 280rpx;
display: flex;
}
.empty_cont_title{
font-size: 28rpx;
color: #aaaaaa;
text-align: center;
}
.empty_cont_btn{
margin: 0 auto;
width: 154rpx;
height: 46rpx;
border-radius: 30rpx;
border: 1rpx solid #FF0000;
color: #FF0000;
line-height: 30rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
}
}
} }

98
userserve/favorite/favorite.vue
View File

@ -1,59 +1,30 @@
<template> <template>
<view class="main"> <view class="main">
<view class="list"> <view class="list" v-for="(item,index) in shop_list" :key="index">
<view class="list_l"> <view class="list_l">
<image class="list_img" src="../../static/Mask.png" mode="widthFix"></image> <image class="list_img" :src="item.image" mode="widthFix"></image>
</view> </view>
<view class="list_r"> <view class="list_r">
<view class="list_title">糖醋排骨</view> <view class="list_title">{{item.storeName}}</view>
<view class="list_tag"> <!-- <view class="list_tag">
<view class="list_li">半小时送达</view> <view class="list_li">半小时送达</view>
<view class="list_li">劲辣胃浓</view> <view class="list_li">劲辣胃浓</view>
</view> </view> -->
<view class="list_bottom"> <view class="list_bottom">
<view class="list_price price">43.9<text class="market_name prices">59.9</text></view> <view class="list_price price">{{item.price}}</view>
<view class="list_shop_cart"> <view class="list_shop_cart">
<image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image> <image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="list"> <view class="empty" v-if="img_err && decs">
<view class="list_l"> <view class="empty_cont">
<image class="list_img" src="../../static/Mask.png" mode="widthFix"></image> <image class="empty_cont_img" :src="img_err" mode="widthFix"></image>
</view> <view class="empty_cont_title">{{decs}}</view>
<view class="list_r"> </view>
<view class="list_title">糖醋排骨</view> </view>
<view class="list_tag"> <view v-else class="load_desc">{{decs}}</view>
<view class="list_li">半小时送达</view>
<view class="list_li">劲辣胃浓</view>
</view>
<view class="list_bottom">
<view class="list_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="list_shop_cart">
<image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="list">
<view class="list_l">
<image class="list_img" src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="list_r">
<view class="list_title">糖醋排骨</view>
<view class="list_tag">
<view class="list_li">半小时送达</view>
<view class="list_li">劲辣胃浓</view>
</view>
<view class="list_bottom">
<view class="list_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="list_shop_cart">
<image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
@ -62,18 +33,53 @@ import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from '
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值 import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { collectuser } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const shop_list = ref([])
const img_err = ref("");
const decs = ref('');
const pages = ref(0);
const limits = ref(10);
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
const api_collectuser=()=>{
pages.value = pages.value + 1;
img_err.value = "";
decs.value = "—— 加载中... ——";
const params = {
page:pages.value,
limit:limits.value
}
return collectuser(params).then(({data}) => {
decs.value = '—— 上拉加载更多 ——';
shop_list.value = shop_list.value.concat(data.list);
if(pages.value == 1 && !data.list.length){
img_err.value = "../../static/Empty/order_lisr_img.png"
decs.value = "—— 暂无收藏记录 ——"
}else if(data.list.length < 10){
decs.value = '—— 嗷呜，已经到底啦 ——';
}
}).catch(({message}) => {
img_err.value = "../../static/Empty/err.png"
decs.value = `—— ${message||'网络异常'} ——`;
})
}
onLoad((options) => { onLoad((options) => {
api_collectuser();
}); });
onShow(() => {}); onShow(() => {});
onReady(()=>{}) onReady(()=>{})
onPullDownRefresh(()=>{}) onPullDownRefresh(()=>{
onReachBottom(()=>{}) shop_list.value = [];
decs.value = '';
pages.value = 0;
api_collectuser();
uni.stopPullDownRefresh();
})
onReachBottom(()=>{
api_collectuser();
})
</script> </script>
<style lang="scss"> <style lang="scss">

45
userserve/favorite/style.scss
View File

@ -29,6 +29,7 @@ page{
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;
font-weight: 500; font-weight: 500;
min-height: 70rpx;
} }
.list_tag{ .list_tag{
display: flex; display: flex;
@ -87,5 +88,45 @@ page{
margin-left: 5rpx; margin-left: 5rpx;
font-weight: 400; font-weight: 400;
} }
}
} .load_desc{
font-size: 28rpx;
color: #aaa;
text-align: center;
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.empty{
height:480rpx;
margin:200rpx 20rpx 0rpx 20rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
.empty_cont{
.empty_cont_img{
margin: 0 auto;
width: 355rpx;
height: 280rpx;
display: flex;
}
.empty_cont_title{
font-size: 28rpx;
color: #aaaaaa;
text-align: center;
}
.empty_cont_btn{
margin: 0 auto;
width: 154rpx;
height: 46rpx;
border-radius: 30rpx;
border: 1rpx solid #FF0000;
color: #FF0000;
line-height: 30rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
}
}
}