确认收货改造

2024-01-02 21:41:41 +08:00
parent e12bdecc5a
commit ebd22b0eee
9 changed files with 267 additions and 96 deletions
--- a/pages/order/delivery.vue
+++ b/pages/order/delivery.vue
@@ -36,17 +36,29 @@
 					<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(5)"></image>
 				</u-form-item>
 			</view>
+			
+			<view class="form-wrapper">
+				<u-input type="number" v-model="receiptPhone" placeholder="请输入收货人手机号" />
+				<view class="captcha-item">
+					<u-input type="text" placeholder="请输入验证码" v-model="captcha" placeholder-class="captcha_input" />
+					<u-button class="yanzhengma" @click="getCaptcha">{{time}} {{text}}</u-button>
+				</view>
+				
+				<u-input type="text" v-model="emergentUser" placeholder="请输入紧急联系人" />
+				<u-input type="text" v-model="officeAddress" placeholder="请输入单位地址" />
+				<u-input type="text" v-model="homeAddress" placeholder="请输入家庭地址" />
+			</view>
 		</u-form>
 		<view class="btn">
 			<u-button type="primary" shape="circle" @click="handleSubmit()">
 				{{ submitText }}
 			</u-button>
 		</view>
-		<view class="btn">
+		<!-- <view class="btn">
 			<u-button shape="circle" @click="resetting">
 				重置
 			</u-button>
-		</view>
+		</view> -->
 		<view class="btn"></view>
 	</view>
 </template>
@@ -58,10 +70,51 @@
 	import {
 		pageOrder,
 		removeOrder,
-		receiptOrder,
+		receipt,
 		getOrder
 	} from '@/websoft/api/order.js'
-	import { fileUrl } from '@/config.js';
+	import { sendSmsCode } from '@/api/captcha.js'
+	import { fileUrl } from '@/config.js'
+	import { isMobile } from '@/utils/verify'
+	
+	
+	// 表单验证规则
+	const rules = {
+	  receiptPhone: [{
+		required: true,
+		message: '请输入手机号',
+		trigger: ['blur', 'change']
+	  }, {
+		// 自定义验证函数
+		validator: (rule, value, callback) => {
+		  // 返回true表示校验通过，返回false表示不通过
+		  return isMobile(value)
+		},
+		message: '手机号码不正确',
+		// 触发器可以同时用blur和change
+		trigger: ['blur'],
+	  }],
+	  captcha: [{
+		required: true,
+		message: '请输入验证码',
+		trigger: ['blur', 'change']
+	  }],
+	  emergentUser: [{
+		required: true,
+		message: '请输入紧急联系人',
+		trigger: ['blur', 'change']
+	  }],
+	  officeAddress: [{
+		required: true,
+		message: '请输入单位地址',
+		trigger: ['blur', 'change']
+	  }],
+	  homeAddress: [{
+		required: true,
+		message: '请输入家庭地址',
+		trigger: ['blur', 'change']
+	  }],
+	}
 	
 	export default {
 		data() {
@@ -69,12 +122,24 @@
 				form: {},
 				order: {},
 				orderSourceData: [],
+				// 验证码（主要代码，直接复制使用即可）
+				time: '',
+				text: '获取验证码',
+				receiptPhone: '',
+				captcha: '',
+				emergentUser: '',
+				officeAddress: '',
+				homeAddress: '',
 				// 按钮禁用
-				disabled: false,
+				// disabled: false,
 				submitText: '证件已上传并确认收货',
 			}
 		},

+		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
+		onReady() {
+			this.$refs.uForm.setRules(this.rules)
+		},
 		/**
 		 * 生命周期函数--监听页面加载
 		 */
@@ -88,48 +153,116 @@

 		methods: {
 			// 加载订单
-			getData(){
+			getData() {
 				const app = this
 				const { orderId } = this
 				getOrder(orderId).then(res => {
-					console.log("res: ",res);
 					app.order = res.data
 					if(res.data.orderSourceData.length > 0){
 						app.orderSourceData = JSON.parse(res.data.orderSourceData)
 					}
 				})
 			},
+			//获取验证码（主要代码，直接复制使用即可）
+			getCaptcha() {
+				if(this.disabled){
+					uni.showToast({
+						title: '请耐心等待',
+						icon: 'none'
+					})
+					return
+				}
+				var that = this;
+				
+				if (!that.receiptPhone) {
+					uni.showToast({
+						title: '请输入手机号',
+						icon: 'none'
+					})
+					return
+				}
+				console.log('that====: ');
+				sendSmsCaptcha({
+					phone: that.receiptPhone,
+					type: 'RECEIPT'
+				}).then(result => {
+					console.log(result)
+					if(result){
+						if(result.code == 0) {
+							that.$success("发送短信验证码成功")
+							that.orderSourceData = []
+							// 刷新订单列表
+							that.getData()
+							
+							that.disabled = true
+							that.setInterValFunc()
+						} else {
+							that.$toast(result.message)
+						}
+					}
+					
+				}).catch(err => {
+					console.log('e2: ',err);
+					that.$toast(err.message)
+				}).finally(e => {
+					console.log('e3: ',e);
+				})
+			},
+			
+			setInterValFunc() {
+				this.time = 60;
+				this.text = '秒';
+				this.setTime = setInterval(() => {
+					if (this.time - 1 == 0) {
+						this.time = '';
+						this.text = '重新获取';
+						this.code = '';
+						this.disabled = false;
+						clearInterval(this.setTime);
+					} else {
+						this.disabled = true;
+						this.time--;
+					}
+				}, 1000);
+			},
+					
 			// 重置
-			resetting(){
+			/* resetting(){
 				const app = this
 				const { orderId } = app
-				receiptOrder({
-					orderId,
-					orderSourceData: ''
+				receipt({
+					orderId: orderId,
+					orderSourceData: '',
 				}).then(result => {
 					app.$success("重置成功")
 					app.orderSourceData = []
-					// 刷新订单列表
+					receiptPhone = ''
+					captcha = ''
+					emergentUser = ''
+					officeAddress = ''
+					homeAddress = ''
+					time = ''
+					text = '获取验证码'
 					app.getData()
 				})
-			},
+			}, */
 			// 表单提交
 			handleSubmit() {
 				const app = this
-				const { orderId,orderSourceData } = app
+				const { orderId,orderSourceData,captcha,receiptPhone,emergentUser,officeAddress, homeAddress } = app
 				if(orderSourceData.length < 5) {
 					return
 				}
-				receiptOrder({
-					orderId,
-					orderSourceData: JSON.stringify(orderSourceData)
-				}).then(result => {
-					app.$success("上传成功")
-					uni.navigateBack()
+				receipt(app).then(result => {
+					if(result.code == 0) {
+						app.$success("上传成功")
+						uni.navigateBack()
+					} else {
+						app.$toast(result.message)
+					}
 				}).catch(err => {
 					app.$toast(err.message)
 				})
-				
 			},
 			
 			// 上传图片
@@ -219,9 +352,9 @@
 			background: linear-gradient(to right, $main-bg, $main-bg2);

 			// 禁用按钮
-			&.disabled {
+			/* &.disabled {
 				opacity: 0.6;
-			}
+			} */
 		}

 	}
@@ -328,4 +461,39 @@
 		width: 700rpx;
 		margin: 20rpx auto;
 	}
+	
+	.captcha_input {
+		font-size: 28rpx;
+		font-weight: 400;
+		color: #CACACA;
+	}
+	
+	.yanzhengma {
+		position: absolute;
+		right: 0;
+		top: -8rpx;
+		bottom: 0;
+		width: 140rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+		text-align: center;
+		background: #00BD87;
+		border-radius: 30rpx;
+		font-size: 22rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+	
+	.captcha-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10rpx;
+		border-bottom: 3rpx solid #DDDDDD;
+		margin-bottom: 25rpx;
+		position: relative;
+	}
+
+	
 </style>
--- a/pages/order/detail.vue
+++ b/pages/order/detail.vue
@@ -442,11 +442,16 @@
 							</view>
 						</view>
 					</view>
-					<view class="info-item" v-if="item.expirationDay > 0">
+					<view class="info-item" v-if="item.payStatus == 10 && item.expirationDay < 0">
 						<view class="item-lable">逾期天数</view>
 						<view class="item-content"><text class="yuqi-text">{{ item.expirationDay }}天</text>
 						</view>
 					</view>
+					<view class="info-item" v-if="item.expirationDay >= 0">
+						<view class="item-lable">剩余天数</view>
+						<view class="item-content"><text class="yuqi-text">{{ item.expirationDay }}天</text>
+						</view>
+					</view>
 				</view>


@@ -639,7 +644,7 @@
 				app.isLoading = true
 				OrderApi.getOrder(app.orderId)
 					.then(result => {
-						console.log("result: ", result);
+						console.log("result: {}", result);
 						const order = result.data
 						app.order = order
 						app.equipment = result.data.equipment
@@ -812,15 +817,18 @@
 					content: '确认收到商品了吗？',
 					success(o) {
 						if (o.confirm) {
-							OrderApi.receipt(orderId)
-								.then(result => {
-									// 显示成功信息
-									app.$success(result.message)
-									setTimeout(() => {
-										// 刷新当前订单数据
-										app.getOrderDetail(true)
-									}, 1500)
-								})
+							// OrderApi.receipt(orderId)
+							// 	.then(result => {
+							// 		// 显示成功信息
+							// 		app.$success(result.message)
+							// 		setTimeout(() => {
+							// 			// 刷新当前订单数据
+							// 			app.getOrderDetail(true)
+							// 		}, 1500)
+							// 	})
+							this.$navTo('pages/order/delivery', {
+								orderId
+							})
 						}
 					}
 				});
--- a/pages/order/index.vue
+++ b/pages/order/index.vue
@@ -50,10 +50,10 @@
 										v-if="item.orderStatus == 30">设备编号：{{ item.equipment.equipmentCode }}</text>
 									<text class="twoline-hide">设备名称：{{ item.equipmentGoods.goodsName }}</text>
 									<text class="twoline-hide">设备型号：{{ item.equipmentGoods.batteryModel }}</text>
-									<text class="twoline-hide yuqi-text" v-if="item.expirationDay < 0">逾期状态:
+									<text class="twoline-hide yuqi-text" v-if="item.payStatus == 10 && item.expirationDay < 0">逾期状态:
 										(已逾期{{ Math.abs(item.expirationDay) }}天)</text>
 									<text class="twoline-hide yuqi-text"
-										v-if="item.expirationDay < 7 && item.expirationDay > 0">逾期状态: 即将过期</text>
+										v-if="item.payStatus == 10 && item.expirationDay < 7 && item.expirationDay > 0">逾期状态: 即将过期</text>
 								</view>
 								<view class="goods-props clearfix">
 									<!-- <view class="goods-props-item">