434 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			434 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <template> | |||
|  | 	<view> | |||
|  | 		<view class="pop-bg" @click="closeFunc(null)"></view> | |||
|  | 		<view class="pb100 pop-box"> | |||
|  | 			<form @submit="formSubmit" @reset="formReset"> | |||
|  | 				<view class="form-group"> | |||
|  | 					<view class="form-item"> | |||
|  | 						<view class="form-label"> | |||
|  | 							<text class="domation mr10">*</text> | |||
|  | 							{{ $t('w_0052') }} | |||
|  | 						</view> | |||
|  | 						<input v-model="phone" :disabled="true" class="form-input" type="text" value="" | |||
|  | 							:placeholder="$t('w_0134')" /> | |||
|  | 					</view> | |||
|  | 					<view class="form-item"> | |||
|  | 						<view class="form-label"> | |||
|  | 							<text class="domation mr10">*</text> | |||
|  | 							{{ $t('MY_WAL_22') }} | |||
|  | 						</view> | |||
|  | 						<textarea v-model="form.remark" auto-height class="form-textarea" value="" | |||
|  | 							:placeholder="$t('w_0072')" /> | |||
|  | 					</view> | |||
|  | 					<view class="form-item" style="display: block;"> | |||
|  | 						<view class="f26 gray3 pt20 mb10">{{ $t('MY_CK_20') }}:</view> | |||
|  | 						<view class="f26 gray9 line-h-2"> | |||
|  | 							<u-parse :content=" | |||
|  | 					`<p>1.`+$t('MY_CK_21')+`</p>
 | |||
|  | 					<p>2.`+$t('MY_CK_22')+`</p> | |||
|  | 					<p>3.`+$t('MY_CK_23')+`</p> | |||
|  | 					<p>4.`+$t('MY_CK_24')+`</p>`
 | |||
|  | 								"></u-parse> | |||
|  | 						</view> | |||
|  | 					</view> | |||
|  | 				</view> | |||
|  | 				<button class="normal-sub-btn" form-type="submit" | |||
|  | 					style="margin-top: 37rpx;">{{ $t('MY_CK_25') }}</button> | |||
|  | 			</form> | |||
|  | 			<Popup :show="isPopup" :width="665" :padding="0" @hidePopup="hidePopupFunc"> | |||
|  | 				<view class="d-e-c ww100"> | |||
|  | 					<view class="p20" @click="hidePopupFunc(true)"><text class="icon iconfont icon-guanbi"></text> | |||
|  | 					</view> | |||
|  | 				</view> | |||
|  | 				<view class="ww100 box-s-b" style="padding: 0 60rpx;"> | |||
|  | 					<view class="d-s-c" style="margin-bottom: 50rpx;"> | |||
|  | 						<u-icon name="checkmark-circle-fill" color="#333333" size="38rpx"></u-icon> | |||
|  | 						<text class="ml20">{{ $t('MY_CK_35') }}</text> | |||
|  | 					</view> | |||
|  | 					<view class="f36 tc mb30 fb" style="color: #333333;"> | |||
|  | 						{{ $t('MY_CK_26') }}:{{ order.selfCode }} | |||
|  | 						<text class="domation f26 ml20" @click="copyMes(order.selfCode)">{{ $t('MY_CK_27') }}</text> | |||
|  | 					</view> | |||
|  | 					<view class="f28 gray3 line-h-2">{{ $t('MY_ORD_80') }}</view> | |||
|  | 					<view class="f26 gray6 line-h-2">{{$t('MY_CK_23')}}</view> | |||
|  | 					<view class="f26 gray6 line-h-2 mb40">{{ $t('CK_KS_23') }}</view> | |||
|  | 					<button class="s-pop-btn" @click="hidePopupFunc(true)">{{ $t('MY_WAL_23') }}</button> | |||
|  | 				</view> | |||
|  | 			</Popup> | |||
|  | 		</view> | |||
|  | 	</view> | |||
|  | </template> | |||
|  | 
 | |||
|  | <script> | |||
|  | 	import Popup from '@/components/uni-popup.vue'; | |||
|  | 	export default { | |||
|  | 		components: { | |||
|  | 			Popup | |||
|  | 		}, | |||
|  | 		data() { | |||
|  | 			return { | |||
|  | 				form: { | |||
|  | 					orderCode: '', | |||
|  | 					phone: '', | |||
|  | 					remark: '' | |||
|  | 				}, | |||
|  | 				order: { | |||
|  | 					phone: '', //联系方式
 | |||
|  | 					selfCode: '', //提货码
 | |||
|  | 					orderCode: '', //订单编号
 | |||
|  | 					centerCodeId: '', | |||
|  | 					pkSettleCountry: '', | |||
|  | 					pkCreator: '', | |||
|  | 					remark: '' //备注
 | |||
|  | 				}, | |||
|  | 				isPopup: false, | |||
|  | 				/*是否已发验证码*/ | |||
|  | 				is_send: false, | |||
|  | 				/*发送按钮文本*/ | |||
|  | 				send_btn_txt: this.$t("w_0055"), | |||
|  | 				/*当前秒数*/ | |||
|  | 				second: 60, | |||
|  | 				textContent: '' | |||
|  | 			}; | |||
|  | 		}, | |||
|  | 		props: ['module', 'orderCode', 'phone'], | |||
|  | 		methods: { | |||
|  | 			formSubmit: function(e) { | |||
|  | 				let self = this; | |||
|  | 				var formdata = self.form; | |||
|  | 				// if (formdata.phone == '') {
 | |||
|  | 				// 	uni.showToast({
 | |||
|  | 				// 		title: '请输入手机号',
 | |||
|  | 				// 		duration: 1000,
 | |||
|  | 				// 		icon: 'none'
 | |||
|  | 				// 	});
 | |||
|  | 				// 	return false;
 | |||
|  | 				// }
 | |||
|  | 				// if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.phone)) {
 | |||
|  | 				// 	uni.showToast({
 | |||
|  | 				// 		title: '手机有误,请重填!',
 | |||
|  | 				// 		duration: 2000,
 | |||
|  | 				// 		icon: 'none'
 | |||
|  | 				// 	});
 | |||
|  | 				// 	return;
 | |||
|  | 				// }
 | |||
|  | 				formdata.phone = self.phone; | |||
|  | 				formdata.orderCode = self.orderCode; | |||
|  | 				if (formdata.remark == '') { | |||
|  | 					uni.showToast({ | |||
|  | 						title: '请输入备注', | |||
|  | 						duration: 1000, | |||
|  | 						icon: 'none' | |||
|  | 					}); | |||
|  | 					return false; | |||
|  | 				} | |||
|  | 				self._post('sale/api/order/self-pick-up', formdata, function(res) { | |||
|  | 					self.showSuccess(res.msg, function() { | |||
|  | 						self.order.selfCode = res.data.selfCode; | |||
|  | 						self.isPopup = true; | |||
|  | 						// // #ifndef H5
 | |||
|  | 						// uni.navigateBack({
 | |||
|  | 						// 	delta: parseInt(self.delta)
 | |||
|  | 						// });
 | |||
|  | 						// // #endif
 | |||
|  | 						// // #ifdef H5
 | |||
|  | 						// history.go(-self.delta);
 | |||
|  | 						// // #endif
 | |||
|  | 					}); | |||
|  | 				}); | |||
|  | 			}, | |||
|  | 			closeFunc(e) { | |||
|  | 				this.$emit('close', e); | |||
|  | 			}, | |||
|  | 			hidePopupFunc() { | |||
|  | 				this.isPopup = false; | |||
|  | 				this.closeFunc(true); | |||
|  | 			}, | |||
|  | 			copyMes(message) { | |||
|  | 				uni.setClipboardData({ | |||
|  | 					data: message, | |||
|  | 					showToast: true, | |||
|  | 					success: function() { | |||
|  | 						uni.showToast({ | |||
|  | 							icon: 'none', | |||
|  | 							title: self.$t('MY_CK_29') | |||
|  | 						}); | |||
|  | 					} | |||
|  | 				}); | |||
|  | 			} | |||
|  | 		} | |||
|  | 	}; | |||
|  | </script> | |||
|  | 
 | |||
|  | <style lang="scss"> | |||
|  | 	.agreement-box { | |||
|  | 		width: 750rpx; | |||
|  | 		background: #ffffff; | |||
|  | 		padding: 28rpx 22rpx; | |||
|  | 		box-sizing: border-box; | |||
|  | 		margin-top: 2rpx; | |||
|  | 		margin-bottom: 20rpx; | |||
|  | 
 | |||
|  | 		.agreement-content { | |||
|  | 			font-size: 24rpx; | |||
|  | 			font-family: SourceHanSansCN; | |||
|  | 			font-weight: 400; | |||
|  | 			color: #999999; | |||
|  | 			line-height: 32rpx; | |||
|  | 			word-break: break-all; | |||
|  | 			margin-bottom: 32rpx; | |||
|  | 		} | |||
|  | 
 | |||
|  | 		.agreement-btn { | |||
|  | 			min-width: 320rpx; | |||
|  | 			height: 76rpx; | |||
|  | 			line-height: 1.5; | |||
|  | 			display: flex; | |||
|  | 			justify-content: center; | |||
|  | 			align-items: center; | |||
|  | 			padding: 0 20rpx; | |||
|  | 			box-sizing: border-box; | |||
|  | 			background: #282828; | |||
|  | 			border-radius: 38rpx; | |||
|  | 			color: #ffffff; | |||
|  | 			font-size: 24rpx; | |||
|  | 		} | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.form-title { | |||
|  | 		width: 750rpx; | |||
|  | 		height: 106rpx; | |||
|  | 		background: #fb3024; | |||
|  | 		padding-left: 44rpx; | |||
|  | 		position: relative; | |||
|  | 		box-sizing: border-box; | |||
|  | 		font-size: 28rpx; | |||
|  | 		color: #fff; | |||
|  | 		line-height: 106rpx; | |||
|  | 		font-weight: bold; | |||
|  | 		z-index: 1; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.form-title::before { | |||
|  | 		content: ''; | |||
|  | 		position: absolute; | |||
|  | 		top: 0; | |||
|  | 		bottom: 0; | |||
|  | 		margin: auto; | |||
|  | 		left: 25rpx; | |||
|  | 		width: 6rpx; | |||
|  | 		height: 24rpx; | |||
|  | 		background-color: #fb3024; | |||
|  | 		z-index: 1; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.form-group { | |||
|  | 		padding: 0 22rpx; | |||
|  | 		background: #ffffff; | |||
|  | 
 | |||
|  | 		.form-item { | |||
|  | 			min-height: 104rpx; | |||
|  | 			box-sizing: border-box; | |||
|  | 			padding: 15rpx 0; | |||
|  | 			line-height: 1.5; | |||
|  | 			display: flex; | |||
|  | 			justify-content: center; | |||
|  | 			align-items: center; | |||
|  | 			border-bottom: 1rpx solid #eee; | |||
|  | 
 | |||
|  | 			.icon-jiantou { | |||
|  | 				font-size: 32rpx; | |||
|  | 				color: 090000; | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.form-tips { | |||
|  | 				font-size: 24rpx; | |||
|  | 				color: #999; | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.form-label { | |||
|  | 				width: 255rpx; | |||
|  | 				flex-shrink: 0; | |||
|  | 				word-break: break-all; | |||
|  | 				margin-right: 20rpx; | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.disabled-input { | |||
|  | 				width: 450rpx; | |||
|  | 				height: 78rpx; | |||
|  | 				padding: 0 18rpx; | |||
|  | 				line-height: 78rpx; | |||
|  | 				background: #eee; | |||
|  | 				font-size: 28rpx; | |||
|  | 				color: #333; | |||
|  | 				flex: 1; | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.form-textarea { | |||
|  | 				width: 450rpx; | |||
|  | 				padding: 0 18rpx; | |||
|  | 				line-height: 1.5; | |||
|  | 				font-size: 28rpx; | |||
|  | 				color: #333; | |||
|  | 				flex: 1; | |||
|  | 				background: #fff; | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.form-input { | |||
|  | 				width: 450rpx; | |||
|  | 				height: 78rpx; | |||
|  | 				padding: 0 18rpx; | |||
|  | 				line-height: 78rpx; | |||
|  | 				background: #fff; | |||
|  | 				font-size: 28rpx; | |||
|  | 				color: #333; | |||
|  | 				flex: 1; | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.form-item:last-child { | |||
|  | 				border: none; | |||
|  | 			} | |||
|  | 		} | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.form-upload { | |||
|  | 		padding: 30rpx 23rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.form-upload-name { | |||
|  | 		font-size: 28rpx; | |||
|  | 		color: #333; | |||
|  | 		margin-bottom: 20rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.form-upload-tips { | |||
|  | 		font-size: 24rpx; | |||
|  | 		color: #999; | |||
|  | 		margin-bottom: 20rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.form-upload-tips2 { | |||
|  | 		font-size: 24rpx; | |||
|  | 		color: #fb3024; | |||
|  | 		line-height: 1.5; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.upload-add { | |||
|  | 		width: 142rpx; | |||
|  | 		height: 142rpx; | |||
|  | 		margin-right: 18rpx; | |||
|  | 		margin-bottom: 18rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.tips-box { | |||
|  | 		padding: 33rpx 27rpx 29rpx 41rpx; | |||
|  | 		font-size: 26rpx; | |||
|  | 		color: #666; | |||
|  | 		line-height: 1.5; | |||
|  | 		word-break: break-all; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.address-box { | |||
|  | 		width: 706rpx; | |||
|  | 		padding: 21rpx 26rpx; | |||
|  | 		background-color: #f5f5f5; | |||
|  | 		border-radius: 15rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.address-item { | |||
|  | 		display: flex; | |||
|  | 		justify-content: center; | |||
|  | 		align-items: center; | |||
|  | 		margin-bottom: 20rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.radio-check { | |||
|  | 		width: 40rpx; | |||
|  | 		height: 40rpx; | |||
|  | 		background: #ffffff; | |||
|  | 		border: 1rpx solid #dddddd; | |||
|  | 		border-radius: 50%; | |||
|  | 		box-sizing: border; | |||
|  | 		position: relative; | |||
|  | 		margin-right: 20rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.radio-check.checked { | |||
|  | 		border: 1rpx solid #fb3024; | |||
|  | 		background: #fb3024; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.icon.icon-guanbi { | |||
|  | 		font-size: 24rpx; | |||
|  | 		color: #999; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.s-pop-btn { | |||
|  | 		width: 462rpx; | |||
|  | 		height: 78rpx; | |||
|  | 		background: #fb3024; | |||
|  | 		border-radius: 39rpx; | |||
|  | 		text-align: center; | |||
|  | 		line-height: 1.2; | |||
|  | 		display: flex; | |||
|  | 		justify-content: center; | |||
|  | 		align-items: center; | |||
|  | 		font-size: 28rpx; | |||
|  | 		color: #fff; | |||
|  | 		margin: 0 auto; | |||
|  | 		margin-bottom: 68rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.get-code-btn { | |||
|  | 		min-width: 72rpx; | |||
|  | 		height: 62rpx; | |||
|  | 		background: #333333; | |||
|  | 		line-height: 62rpx; | |||
|  | 		padding: 0rpx 20rpx; | |||
|  | 		border-radius: 40rpx; | |||
|  | 		white-space: nowrap; | |||
|  | 		// border: 1rpx solid $dominant-color;
 | |||
|  | 		color: #ffffff; | |||
|  | 		box-sizing: border-box; | |||
|  | 		margin-left: 46rpx; | |||
|  | 		font-size: 24rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.get-code-btn[disabled='true'] { | |||
|  | 		// border: 1rpx solid #cccccc;
 | |||
|  | 		color: #333; | |||
|  | 		background-color: #ffffff; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.card-pic { | |||
|  | 		width: 316rpx; | |||
|  | 		height: 192rpx; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.pop-bg { | |||
|  | 		position: fixed; | |||
|  | 		left: 0; | |||
|  | 		top: 0; | |||
|  | 		bottom: 0; | |||
|  | 		right: 0; | |||
|  | 		background: rgba(0, 0, 0, 0.7); | |||
|  | 		z-index: 98; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.pop-box { | |||
|  | 		position: fixed; | |||
|  | 		top: 20%; | |||
|  | 		left: 0; | |||
|  | 		right: 0; | |||
|  | 		width: 690rpx; | |||
|  | 		margin: auto; | |||
|  | 		background: #fff; | |||
|  | 		z-index: 99; | |||
|  | 		border-radius: 12rpx; | |||
|  | 		overflow: hidden; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.normal-sub-btn { | |||
|  | 		width: 60%; | |||
|  | 	} | |||
|  | </style> |