项目初始化

2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
--- a/pages/order/blind/components/layout.vue
+++ b/pages/order/blind/components/layout.vue
@@ -0,0 +1,182 @@
+<!-- 虚拟列表演示(不使用内置列表)(vue) -->
+<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
+<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
+<template>
+	<view class="content">
+		<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
+		<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
+		<z-paging ref="paging" :auto="false" use-virtual-list :force-close-inner-list="true" :paging-style="{ paddingTop: 0 + 'px', paddingBottom: paddingBottom + 'rpx' }" cell-height-mode="dynamic" @scroll="scroll" @virtualListChange="virtualListChange" @query="queryList">
+			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
+			<template #top>
+				<su-navbar :title="title" statusBar></su-navbar>
+				<tab-box :tabList="tabList" :currentValue="currentIndex" @change="tabChange"></tab-box>
+			</template>  
+			   
+			<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
+			<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
+			<order-list @onCancel="onCancel" @onConfirm="onConfirm" @onOrderConfirm="onOrderConfirm" :virtualList="virtualList"></order-list>
+			
+		</z-paging>
+		
+	</view>
+</template>
+
+<script>
+	import TabBox from '@/pages/order/blind/components/tabBox.vue';
+	import OrderList from '@/pages/order/blind/components/orderList.vue';
+	import OrderApi from '@/sheep/api/trade/order';
+	import { WxaSubscribeTemplate } from '@/sheep/util/const';
+	import sheep from '@/sheep';
+	import {
+	  formatBlindOrderStatus,
+	  handleBlindOrderButtons,
+	  fen2yuan,
+	} from '@/sheep/hooks/useGoods';
+	export default {
+		components: {
+			TabBox, 
+			OrderList,
+		}, 
+		props: {
+			title: {
+				type: String,
+				default: '抢单中心',
+			},
+		},
+		data() {
+			return {
+				// 虚拟列表数组，通过@virtualListChange监听获得最新数组
+				virtualList: [],
+				scrollTop: 0,
+				paddingTop: 0,
+				paddingBottom: 0,
+				height: 0,
+				
+				tabList: [{
+					name: '全部',
+				}, {
+					name: '待抢单',
+					value: 10,
+				}, {
+					name: '服务中',
+					value: 20,
+				}, {
+					name: '已完成',
+					value: 30,
+				}],
+				
+				currentIndex: 0,
+			}
+		},
+		methods: {
+			scroll(e) {
+				this.scrollTop = e.detail.scrollTop;
+			},
+			// 监听虚拟列表数组改变并赋值给virtualList进行重新渲染
+			virtualListChange(vList) {
+				this.virtualList = vList;
+			},
+			queryList(pageNo, pageSize) {
+				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
+				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
+				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
+				const params = {
+					pageNo: pageNo,
+					pageSize: pageSize,
+					status: this.tabList[this.currentIndex].value,
+					commentStatus: this.tabList[this.currentIndex].value === 30 ? false : null,
+				}
+				OrderApi.getBlindOrderPage(params).then(res => {
+					// 将请求的结果数组传递给z-paging
+					res.data.list.forEach((order) => handleBlindOrderButtons(order, sheep.$store('user').userInfo.id));
+					res.data.list.forEach((order) => formatBlindOrderStatus(order));
+					res.data.list.forEach((order) => order.brokeragePrice = fen2yuan(order.brokeragePrice));
+					this.$refs.paging.complete(res.data.list); 
+				}).catch(res => {
+					// 如果请求失败写this.$refs.paging.complete(false);
+					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
+					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
+					this.$refs.paging.complete(false);
+				})
+			},
+			tabChange(e) {
+				this.currentIndex = e;
+				this.$refs.paging.reload();
+			},
+			// 取消订单
+			async onCancel(orderId) {
+			  var that = this;
+			  uni.showModal({
+			    title: '提示',
+			    content: '确定要取消订单吗?',
+			    success: async function (res) {
+			      if (!res.confirm) {
+			        return;
+			      }
+			      const { code } = await OrderApi.cancelOrder(orderId);
+			      if (code === 0) {
+			        that.$refs.paging.reload();
+			      }
+			    },
+			  });
+			},
+			// 开始接单
+			async onOrderConfirm(order) {
+				var that = this;
+				uni.showModal({
+				    title: '是否确认抢单',
+				    content: '请确认符合老板要求',
+				    success: async function (res) {
+				      if (!res.confirm) {
+				        return;
+				      }
+				      // 正常的确认收货流程
+				      const { code } = await OrderApi.deliveryOrder(order.id);
+				      if (code === 0) {
+						that.tabChange(2);
+				      }
+				    },
+				});
+			},
+			// 确认收货
+			async onConfirm(order) {
+				// #ifdef MP
+				// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
+				this.subscribeMessage();
+				// #endif
+				
+				var that = this;
+				uni.showModal({
+				  title: '确定要结束服务么？',
+				  content: '请确认经过老板同意',
+				  success: async function (res) {
+				    if (!res.confirm) {
+				      return;
+				    }
+					
+					// 正常的确认收货流程
+					const { code } = await OrderApi.receiveOrder(order.id);
+					if (code === 0) {
+					  that.$refs.paging.reload();
+					}
+				    
+				  },
+				});
+			  
+			},
+			subscribeMessage() {
+			  const event = [WxaSubscribeTemplate.CLERK_ORDER];
+			  event.push(WxaSubscribeTemplate.REWARD_SUCCESS);
+			  sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
+			    // 订阅后记录一下订阅状态
+			    uni.removeStorageSync(WxaSubscribeTemplate.CLERK_ORDER);
+			    uni.setStorageSync(WxaSubscribeTemplate.CLERK_ORDER, '已订阅');
+			  });
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+</style>
--- a/pages/order/blind/components/orderList.vue
+++ b/pages/order/blind/components/orderList.vue
@@ -0,0 +1,248 @@
+<template>
+	  <view @click="onOrderDetail(order.id)"  :id="`zp-id-${order.zp_index}`" :key="order.zp_index" v-for="(order,index) in orderList" class="order-card">
+	  	<view class="no-box">
+			<view class="order-no">
+				<u-icon name="order"></u-icon>
+				<text class="number">{{ order.no }}</text>
+			</view>
+			<view class="status">{{order.statusStr}}</view>
+		</view> 
+		
+		<view class="main-box" v-for="item in order.items" :key="item.id">
+			<view>
+				<u-avatar size="100" :src="order.avatar"></u-avatar>
+			</view>
+			<view class="right-box">
+				<view class="nickname-box">
+					<view class="nickname">{{order.nickname}}</view>
+					<view class="info">订单时间：{{order.createTimeStr}}</view> 
+					<view class="info">服务内容：{{item.spuName}} {{item.properties.map((property) => property.valueName).join(' ')}}×{{item.count}}</view>
+					<view class="info" v-if="order.sex == '1'">性别要求：女生</view> 
+					<view class="info" v-if="order.sex == '0'">性别要求：男生</view>
+					<view class="info" v-if="userInfo.id == order.workerUserId">
+						<text class="weixin">微信：{{order.weixin}}</text>
+						<view @tap.stop="onCopy(order.weixin)">
+							<u-icon name="outline-copy" custom-prefix="iconfont"></u-icon>
+						</view>
+					</view>
+					<view class="info">
+						<text>剩余时间：</text>
+						<view v-if="order.receiveTime">
+							<text v-if="order.end">已结束</text>
+							<view v-else>
+								<u-count-down :timestamp="order.timestamp" format="DD天HH时mm分ss秒" @end="order.end = true"></u-count-down>
+							</view>
+						</view>
+						<text v-else>暂未接单</text>
+					</view>
+					<view class="info" v-if="order.userRemark">备注：{{order.userRemark}}</view>
+					<view class="info" v-if="order.cancelReason">取消原因：{{order.cancelReason}}</view>
+				</view>
+				<view class="price-box"> 
+					<text class="price">{{order.brokeragePrice}}</text>
+					<text>/钻</text>
+				</view>
+			</view>
+		</view>
+		
+		<view class="bottom-box">
+			<view class="btn-box">
+				<view v-if="order.buttons.includes('other')" class="btn">也被其它店员抢单</view>
+				<view v-if="order.buttons.includes('detail')" @tap.stop="onOrderDetail(order.id)" class="btn">查看详情</view>
+				<view v-if="order.buttons.includes('unpay')" @tap.stop="onOrderCancel(order.id, order.items[0].id)" class="btn">取消接单</view>
+				<view v-if="order.buttons.includes('cancel')" @tap.stop="onCancel(order.id)" class="btn">取消订单</view>
+				<view v-if="order.buttons.includes('invite')" @tap.stop="onBuy(order.items[0].spuId)" class="btn active">邀请好友抢单</view>
+				<view v-if="order.buttons.includes('invite2')" @tap.stop="onBuy(order.items[0].spuId)" class="btn active">邀请评价</view>
+				<view v-if="order.buttons.includes('agree')" @tap.stop="onOrderConfirm(order)" class="btn active">立即抢单</view>
+				<view v-if="order.buttons.includes('confirm')" @tap.stop="onConfirm(order)" class="btn active">结束服务</view>
+			</view>
+		</view>
+		
+	  </view>
+  
+</template>
+
+<script>
+	import sheep from '@/sheep';
+	import dayjs from 'dayjs';
+	export default {
+		components: {
+			
+		},
+		props: {
+			virtualList: {
+				type: Array,
+				default: [],
+			},
+		},
+		emits: ["onCancel", "onConfirm", "onOrderConfirm"],
+		data() {
+			return {
+				
+			}
+		},
+		computed: {
+			userInfo: {
+			    get() {
+			      return sheep.$store('user').userInfo;
+			    },
+			},
+			orderList() {
+				this.virtualList.forEach((order) => order.createTimeStr = sheep.$helper.timeFormat(order.createTime, 'yyyy-mm-dd hh:MM:ss'));
+				this.virtualList.forEach((order) => order.timestamp = order.receiveTime ? sheep.$helper.parseTimeData(order.receiveTime) : 0);
+				return this.virtualList;
+			},
+		},
+		methods: {
+			// 订单详情
+			onOrderDetail(id) { 
+			  sheep.$router.go('/pages/order/blind/detail', {
+			    id,
+			  });
+			},
+			onCancel(orderId) {
+			  this.$emit('onCancel', orderId);
+			},
+			onBuy(id) {
+			  sheep.$router.go('/pages/clerk/detail/index', {
+				id,
+			  });
+			},
+			// 评价
+			onComment(id) { 
+			  sheep.$router.go('/pages/goods/comment/worker/add', {
+			    id,
+			  });
+			},
+			// 继续支付
+			onPay(payOrderId) {
+			  sheep.$router.go('/pages/pay/worker/index', {
+			    id: payOrderId,
+			  });
+			},
+			onOrderCancel(orderId, itemId) {
+			  sheep.$router.go('/pages/order/worker/aftersale/apply', {
+				orderId: orderId,
+				itemId: itemId
+			  });
+			},
+			onOrderConfirm(order) {
+			  this.$emit('onOrderConfirm', order);
+			},
+			// 复制
+			onCopy(text) {
+			  sheep.$helper.copyText(text);
+			},
+			// 确认收货
+			onConfirm(order) {
+			  this.$emit('onConfirm', order);
+			},
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order-card {
+		padding: 10px;
+		margin-top: 10px;
+		background-color: #fff;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		
+		.no-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			flex: 1;
+			padding-bottom: 10px;
+			color: rgb(100, 101, 102);
+			
+			.order-no {
+				
+				.number {
+					margin-left: 5px;
+					font-size: 22rpx;
+				}
+			}
+			
+			.status {
+				font-size: 22rpx;
+			}
+		}
+		
+		.main-box {
+			display: flex;
+			padding: 10px 0;
+			border-top: 1px solid #fbf0f0;
+			border-bottom: 1px solid #fbf0f0;
+			margin-bottom: 10px;
+			
+			.right-box {
+				display: flex;
+				justify-content: space-between;
+				flex: 1;
+				align-items: center;
+				margin-left: 10px;
+				
+				.nickname {
+					font-size: 12px;
+					font-weight: bold;
+					margin-bottom: 10px;
+				}
+				
+				.info {
+					font-size: 22rpx;
+					color: rgb(100, 101, 102);
+					line-height: 22rpx;
+					margin-bottom: 5px;
+					display: flex;
+					align-items: center;
+					
+					.weixin {
+						margin-right: 5px;
+					}
+				}
+				
+				.price-box {
+					font-size: 22rpx;
+					color: rgb(100, 101, 102);
+					
+					.price {
+						font-size: 34rpx;
+						font-weight: bold;
+						color: var(--ui-BG-Main);
+					}
+				}
+			}
+		}
+		
+		.bottom-box {
+			display: flex;
+			justify-content: flex-end;
+			
+			.btn-box {
+				display: flex;
+				align-items: center;
+			}
+			
+			.btn {
+				background-color: #ddd;
+				color: rgb(100, 101, 102);
+				font-size: 22rpx;
+				border-radius: 40px;
+				padding: 5px 10px;
+				margin-left: 10px;
+				min-width: 140rpx;
+				display: flex;
+				justify-content: center;
+			}
+			
+			.active {
+				background-color: var(--ui-BG-Main);
+				color: #fff;
+			}
+		}
+	}
+</style>
--- a/pages/order/blind/components/tabBox.vue
+++ b/pages/order/blind/components/tabBox.vue
@@ -0,0 +1,47 @@
+<template>
+	<view>
+		<u-tabs :list="tabList" bg-color="#fff" font-size="28" active-color="var(--ui-BG-Main)" :is-scroll="false" v-model="current" @change="change"></u-tabs>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+			
+		},
+		props: {
+			currentValue: 0,
+			tabList: {
+				type: Array,
+				default: [],
+			},
+		},
+		data() {
+			return {
+				
+			}
+		},
+		computed: {
+			current: {
+				get() {
+				    return this.currentValue;
+				},
+				set(newValue) {
+					
+				}
+			},
+		},
+		methods: {
+			change(index) {
+				this.$emit('change', index);
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tab-box {
+		background-color: #fff;
+		padding: 5px 0;
+	}
+</style>