2023-5-22

pages.json

@@ -123,6 +123,12 @@
 				// 		"navigationBarTitleText": "评论"
 				// 	}
 				// },
+				{
+					"path": "/WriteOff",
+					"style": {
+						"navigationBarTitleText": "核销码"
+					}
+				},
 				{
 					"path": "/orderRefund",
 					"style": {

pages/home/order.vue

@@ -24,58 +24,70 @@
 						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
 					<!-- #endif -->
 					<!-- 订单列表 -->
-					<view @click="navTo('/pages/order/orderDetail?id=' + item.order_id)"
-						v-for="(item, index) in tabItem.orderList" :key="index" class="order-item">
-						<view class="i-top b-b">
-							<text class="time">{{ item._add_time }}</text>
-							<text class="state" :style="{ color: item.stateTipColor }">{{ item._status._title }}</text>
-							<text v-if="item.status === 4" class="del-btn iconfont icondelete"
-								@click="deleteOrder(index)"></text>
+					<view @click="navTo( '/pages/order/orderDetail?id=' + item.order_id )"
+						v-for="(item, index) in tabItem.orderList" :key="index" class="order-item position-relative">
+						<view class="i-top b-b flex">
+							<view class="order-code flex">
+								<view class="no">
+									订单编号:
+								</view>
+								<view>
+									{{ item.order_id }}
+								</view>
+							</view>
+							<text class="font-size-sm" :style="{ color: item.stateTipColor }">{{ item._status._title }}</text>
+							<!-- <text v-if="item.status === 4" class="del-btn iconfont icondelete" @click="deleteOrder(index)"></text> -->
 						</view>
 
-						<scroll-view v-if="item.cartInfo.length > 1" class="goods-box" scroll-x>
+						<scroll-view v-if="item.cartInfo.length > 0" class="goods-box" scroll-x>
 							<view v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex" class="goods-item">
-								<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
+								<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill">
+								</image>
+								<view class="good-name clamp">
+									{{goodsItem.productInfo.attrInfo.suk}}*{{goodsItem.cart_num}}
+								</view>
 							</view>
 						</scroll-view>
-						<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo"
-							:key="goodsIndex">
-							<image class="goods-img" :src="goodsItem.productInfo.image" mode="scaleToFill"></image>
-							<view class="right">
-								<view class="flex flextop">
-									<text class="title clamp2">{{ goodsItem.productInfo.store_name }}</text>
-									<text class="price">{{ moneyNum(goodsItem.productInfo.price) }}</text>
+						<view class="info-info">
+							<view class="js">
+								共{{item.cartInfo.length}}件
+							</view>
+							<view class="hj">
+								合计:￥{{item.pay_price}}
+							</view>
+						</view>
+						<!-- 底部操作栏 -->
+						<view class="btm-btn-wrap flex">
+							<view class="btm-left">
+								下单时间：{{item._add_time.split(' ')[0].replace(/-/g,'/')}}
+							</view>
+							<view class="btm-right flex">
+								<view class="btm-btn" @click.stop="cancelOrder(item)"
+									v-if="item._status._title == '未支付'">
+									取消订单
+								</view>
+								<view class="btm-btn ksps"
+									@click.stop="navTo( '/pages/user/money/pay?type=1&ordid=' + item.order_id + '&money=' + item.pay_price)"
+									v-if="item._status._title == '未支付'">
+									前往支付
 								</view>
-								<view class="row flex">
-									<text
-										class="row_title">{{ goodsItem.productInfo.attrInfo ? goodsItem.productInfo.attrInfo.suk : '' }}</text>
-									<text class="attr-box"> x {{ goodsItem.cart_num }}</text>
+								<view class="btm-btn ksps" @click.stop="orderTake(item, index)"
+									v-if="item._status._title == '待收货'">
+									确认收货
+								</view>
+								<view class="btm-btn ksps"
+									@click.stop="navTo('/pages/order/orderRefund?id=' + item.order_id)"
+									v-if="item._status._title == '未发货'||item._status._title == '未核销'">
+									申请退款
+								</view>
+								<view class="btm-btn ksps"
+									@click.stop="navTo('/pages/order/WriteOff?id=' + item.order_id)"
+									v-if="item._status._title == '待核销'">
+									核销码
 								</view>
 							</view>
 						</view>
-						<!-- <view class="price-box">
-							共
-							<text class="num">{{ item.cartInfo.length }}</text>
-							件商品 邮费
-							<text class="price">{{ moneyNum(item.pay_postage)}}</text>
-							实付款
-							<text class="price">{{ moneyNum(item.pay_price)}}</text>
-						</view> -->
-						<view class="action-box b-t" v-if="tabItem.state != 4">
-							<button v-if="item._status._title == '未支付'" class="action-btn"
-								@click.stop="cancelOrder(item)">取消订单</button>
-							<button v-if="item._status._title == '未支付'"
-								@click.stop="navTo( '/pages/user/money/pay?type=1&ordid=' + item.order_id + '&money=' + item.pay_price)"
-								class="action-btn recom">前往支付</button>
-							<button v-if="item._status._title == '待评价'" class="action-btn">评价</button>
-							<button v-if="item._status._title == '待收货'" @click.stop="orderTake(item, index)"
-								class="action-btn">确认收货</button>
-							<button v-if="item._status._title == '未发货'||item._status._title == '未领车'"
-								class="action-btn btn-red"
-								@click.stop="navTo('/pages/order/orderRefund?id=' + item.order_id)">申请退款</button>
-						</view>
 					</view>
-
 					<uni-load-more v-if="tabItem.orderList.length>0" :status="tabItem.loadingType"></uni-load-more>
 				</scroll-view>
 			</swiper-item>
@@ -171,9 +183,11 @@
 				let index = this.tabCurrentIndex;
 				let navItem = this.navList[index];
 				let state = navItem.state;
-				if (source === 'tabChange' && navItem.loaded === true) {
+				if (source === 'tabChange') {
+					navItem.page = 1;
+					navItem.orderList = [];
+					navItem.loadingType = 'more';
 					//tab切换只有第一次需要加载数据
-					return;
 				}
 				if (navItem.loadingType === 'loading') {
 					//防止重复加载
@@ -276,13 +290,15 @@
 			//订单状态文字和颜色
 			orderStateExp(state) {
 				let stateTip = '',
-					stateTipColor = '#fa436a';
+					stateTipColor = '#3C82E6';
 				switch (+state) {
 					case 0:
 						stateTip = '待付款';
+						stateTipColor = '#3C82E6'
 						break;
 					case 1:
 						stateTip = '待发货';
+						stateTipColor = '#3C82E6'
 						break;
 					case 2:
 						stateTip = '待收货';
@@ -292,7 +308,7 @@
 						break;
 					case 4:
 						stateTip = '已完成';
-						stateTipColor = '#5dbc7c';
+						stateTipColor = '#999999';
 						break;
 					case 9:
 						stateTip = '订单已关闭';
@@ -313,7 +329,7 @@
 <style lang="scss">
 	.content {
 		height: 100%;
-		background: linear-gradient(180deg, rgba(#3C82E6,0.3), rgba(#5395F5,0));
+		background: linear-gradient(180deg, rgba(#3C82E6, 0.3), rgba(#5395F5, 0));
 		background-size: 100% 645rpx;
 		background-repeat: no-repeat;
 	}
@@ -343,12 +359,13 @@
 		display: flex;
 		height: 40px;
 		padding: 6px;
-		background:$bg-gradual;
+		background: $bg-gradual;
 		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
 		position: relative;
 		z-index: 10;
 		margin: 0 30rpx;
 		border-radius: 99rpx;
+
 		.nav-item {
 			flex: 1;
 			display: flex;
@@ -373,36 +390,33 @@
 	}
 
 	.order-item {
-		display: flex;
-		flex-direction: column;
 		padding-left: 30rpx;
-		background: #fff;
-		margin: 0 $page-row-spacing;
+		padding-right: 30rpx;
+		margin: 0 30rpx;
 		margin-bottom: 30rpx;
-		border-radius: 20rpx;
-		padding-bottom: 10rpx;
+		border-radius: 30rpx;
+		background: #fff;
+		color: #A8ADBF;
 
 		.i-top {
-			display: flex;
-			align-items: center;
 			height: 80rpx;
-			padding-right: 30rpx;
-			font-size: $font-base;
-			color: $font-color-dark;
-			position: relative;
-
-			.time {
-				flex: 1;
-			}
-
-			.state {
-				color: $base-color;
+			.order-code{
+				font-size: $font-sm;
+				.no{
+					padding: 10rpx 10rpx;
+					background-color: #FFEAE5;
+					color: #FD5B23;
+					line-height: 1;
+					border-top-right-radius: 10rpx;
+					border-bottom-left-radius: 10rpx;
+					margin-right: 10rpx;
+					
+				}
 			}
-
+			
 			.del-btn {
 				padding: 10rpx 0 10rpx 36rpx;
 				font-size: $font-lg;
-				color: $font-color-light;
 				position: relative;
 
 				&:after {
@@ -418,159 +432,83 @@
 			}
 		}
 
+		.info-info {
+			width: 215rpx;
+			height: 200rpx;
+			position: absolute;
+			top: 80rpx;
+			right: 35rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+			align-items: flex-end;
+			font-size: 30rpx;
+			font-weight: 500;
+
+			.hj {
+				padding-top: 40rpx;
+				color: $font-color-dark;
+				padding-bottom: 20rpx;
+			}
+		}
+
 		/* 多条商品 */
 		.goods-box {
-			height: 160rpx;
+			height: 200rpx;
 			padding: 20rpx 0;
 			white-space: nowrap;
+			padding-right: 250rpx;
 
 			.goods-item {
 				width: 120rpx;
-				height: 120rpx;
+				height: 180rpx;
 				display: inline-block;
 				margin-right: 24rpx;
 			}
 
 			.goods-img {
 				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		/* 单条商品 */
-		.goods-box-single {
-			display: flex;
-			padding: 20rpx 0;
-
-			.goods-img {
-				display: block;
-				width: 170rpx;
-				height: 170rpx;
-				border-radius: 20rpx;
-			}
-
-			.right {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				padding: 0 30rpx 0 24rpx;
-				overflow: hidden;
-
-				.flextop {
-					align-items: flex-start;
-					line-height: 1.3;
-				}
-
-				.row {
-					margin-top: 10rpx;
-				}
-
-				.row_title {
-					padding: 5rpx 10rpx;
-					background-color: #dddddd;
-					border-radius: 10rpx;
-					font-size: 22rpx;
-					color: #ffffff;
-				}
-
-				.title {
-					font-size: $font-base + 2rpx;
-					color: $font-color-dark;
-					width: 80%;
-					min-height: 2rem;
-				}
-
-				.attr-box {
-					display: flex;
-					justify-content: flex-end;
-					font-size: $font-sm + 2rpx;
-					color: $font-color-light;
-				}
-
-				.price {
-					display: inline;
-					font-size: $font-base + 2rpx;
-					color: $font-color-light;
-
-					&:before {
-						content: '￥';
-						font-size: $font-sm;
-
-					}
-				}
-			}
-		}
-
-		.price-box {
-			display: flex;
-			justify-content: flex-end;
-			align-items: baseline;
-			padding: 20rpx 30rpx;
-			font-size: $font-sm + 2rpx;
-			color: $font-color-light;
-
-			.num {
-				margin: 0 8rpx;
-				color: $font-color-dark;
+				width: 120rpx;
+				height: 120rpx;
 			}
 
-			.price {
-				font-size: $font-lg;
+			.good-name {
+				font-size: 24rpx;
+				text-align: center;
+				width: 120rpx;
+				padding-top: 10rpx;
+				margin-right: 0;
 				color: $font-color-dark;
-
-				&:before {
-					content: '￥';
-					font-size: $font-sm;
-					margin: 0 2rpx 0 8rpx;
-				}
 			}
 		}
 
-		.action-box {
-			display: flex;
-			justify-content: flex-end;
-			align-items: center;
-			position: relative;
-			padding-right: 30rpx;
-		}
-
-		.action-btn {
-			width: 160rpx;
-			height: 60rpx;
-			margin: 0;
-			margin-left: 24rpx;
-			padding: 0;
-			text-align: center;
-			line-height: 60rpx;
-			font-size: $font-sm + 2rpx;
-			color: $font-color-dark;
-			background: #fff;
-			border-radius: 100px;
-
-			&.btn-red {
-				color: $color-red;
-				border: 1px solid $color-red;
-			}
+		.btm-btn-wrap {
+			height: 90rpx;
+			width: 100%;
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #A3A8BB;
+			line-height: 1;
 
-			&:after {
-				border-radius: 100px;
+			.btm-right {
+				justify-content: flex-end;
 			}
 
-			&.recom {
-				color: $base-color;
-
-				&:after {
-					border-color: $base-color;
-				}
+			.btm-btn {
+				width: 144rpx;
+				padding: 10rpx 0;
+				border: 2px solid #ededed;
+				border-radius: 28rpx;
+				font-size: 26rpx;
+				font-weight: 500;
+				text-align: center;
+				margin-left: 10rpx;
+				color: #999999;
 			}
 
-			&.evaluate {
-				color: $color-yellow;
-
-				&:after {
-					border-color: $color-yellow;
-				}
+			.ksps {
+				border-color: #4589ec;
+				color: #4589ec;
 			}
 		}
 	}
@@ -706,7 +644,8 @@
 			opacity: 0.2;
 		}
 	}
-	/deep/ .empty-content{
+
+	/deep/ .empty-content {
 		background: transparent;
 	}
 </style>

pages/order/WriteOff.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="content">
+		<view class="qr-box position-relative">
+			<view class="title-box">
+				<view class="title">
+					服务确认二维码
+				</view>
+				<view class="tip-text">
+					请扫码核销
+				</view>
+			</view>
+			<view class="qr-content flex-center">
+				<uqrcode :loading='loading' :auto='false' :start='false' sizeUnit='rpx' ref="qrcode" canvas-id="qrcode" :value="item.verify_code" size="500"></uqrcode>
+			</view>
+			<view class="text-code">
+				{{item.verify_code}}
+			</view>
+			<view class="tip-icon top-left"></view>
+			<view class="tip-icon bottom-left"></view>
+			<view class="tip-icon top-right"></view>
+			<view class="tip-icon bottom-right"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		orderDetail
+	} from '@/api/order.js';
+	export default {
+		data() {
+			return {
+				orderId: '',
+				item: {
+					verify_code: ''
+				},
+				loading:true
+			};
+		},
+		onLoad(option) {
+			this.orderId = option.id;
+			this.loadOrder();
+		},
+		methods: {
+			// 载入订单详细
+			loadOrder() {
+				let obj = this;
+				orderDetail({}, obj.orderId).then(e => {
+					obj.item = e.data;
+					obj.$refs.qrcode.make({
+					  success: () => {
+						  obj.loading=false;
+					    console.log('生成成功');
+					  },
+					  fail: err => {
+					    console.log(err)
+					  }
+					});
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	page {
+		background-color: $base-color;
+	}
+	.qr-box{
+		color: $font-color-dark;
+		background-color: #FFF;
+		text-align: center;
+		margin: 0 30rpx;
+		.title-box{
+			padding-top: 50rpx;
+			padding-bottom: 30rpx;
+			background-color: #F5F5F5;
+			.title{
+				font-weight: bold;
+				font-size: 44rpx;
+			}
+			.tip-text{
+				font-size: $font-sm;
+				color: $font-color-light;
+			}
+		}
+		.qr-content{
+			padding-top: 110rpx;
+		}
+		.tip-icon{
+			position: absolute;
+			background-color: $base-color;
+			border-radius: 99rpx;
+			width: 100rpx;
+			height: 100rpx;
+		}
+		.top-left,.bottom-left{
+			left: -40rpx;
+		}
+		.top-right,.bottom-right{
+			right: -40rpx;
+		}
+		.bottom-left,.bottom-right{
+			bottom: -40rpx;
+		}
+		.top-left,.top-right{
+			top: -40rpx;
+		}
+		.text-code{
+			font-size: 44rpx;
+			font-weight: bold;
+			padding-top: 60rpx;
+			padding-bottom: 110rpx;
+		}
+	}
+	.content{
+		padding-top: 90rpx;
+	}
+</style>

pages/order/createOrder.vue

@@ -476,7 +476,7 @@
 					});
 					return;
 				}
-				if (!obj.day.day) {
+				if (!obj.day.day&&obj.tabCurrentIndex==1) {
 					uni.showModal({
 						title: '提示',
 						content: '请选择送水时间！',