web-store-retail-h5/pages/selfService/orderPick/applyPick.vue

<template>
	<view class="content">
		<view class="centerbox">
			<u--form labelPosition="left" :model="dataForm" ref="uForm">
				<u-form-item borderBottom :label="$t('w_0052')" label-width="200rpx" prop="phone">
					<u-input border="none" v-model="dataForm.phone" disabled placeholder-class="place-class"
          maxlength="20"
						class="border-color" :placeholder="$t('S_C_70')" />
				</u-form-item>

				<u-form-item borderBottom :label="$t('MY_WAL_22')" label-width="200rpx" prop="remark">
					<u-input border="none" v-model="dataForm.remark" placeholder-class="place-class"
						class="border-color" :placeholder="$t('S_C_70')" />
				</u-form-item>

				<view class="thetexts">
					<view class="text_title">
						{{$t('MY_CK_20')}}
					</view>
					<view class="text_content">
						1.{{$t('MY_CK_21')}}
						</br>2.{{$t('MY_CK_22')}}
						</br>3.{{$t('MY_CK_23')}}
						</br>4.{{$t('MY_CK_24')}}
					</view>
				</view>
			</u--form>
		</view>
		<view class="bottombtn">
			<u-button shape="circle" @click="submit" :text="$t('MY_CK_25')" color="#FB3024"></u-button>
		</view>
		<u-popup class="thePopup" :show="successShow" mode="center" @close="successShow = false">
			<view class="successPopup">

				<view class="poupTop">
					<view class="theiconbox">
						<u-icon name="checkbox-mark" color="#ffffff" size="26"></u-icon>
					</view>
					<view class="theicontitle">
						{{$t('MY_CK_35')}}
					</view>
				</view>
				<view class="poupContent">
					<!-- {{selfCode}} -->
					<text class="green">{{selfCode}}</text>
					<text class="copy" @click="copy(selfCode)">{{$t('MY_CK_27')}}</text>
				</view>
				<view class="tipcontent">
					<view class="tip1">
						{{$t('MY_ORD_80')}}
					</view>
					<view class="tip2">
						{{$t('MY_CK_23')}}</br>
						{{$t('MY_ORD_81')}}：400-111-2818
					</view>
				</view>
				<view class="poupBtn" @click="sureBtn">
					{{$t('w_0035')}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as sel from '@/config/selfService.js'
	export default {
		data() {
			return {
				dataForm: {
					remark: ""
				},
				selfCode: "",
				successShow: false,
        userInfo:''


			}
		},
		onLoad(query) {
			this.dataForm.phone = query.recPhone
			this.dataForm.orderCode = query.orderCode
			this.dataForm.remark = ""
      this.userInfo = uni.getStorageSync('User')
		},
		methods: {
			sureBtn() {
				this.successShow = false
				uni.navigateBack()
			},
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: () => {
						uni.showToast({
							title: this.$t('MY_CK_29')
						})
					}
				})
			},
			submit() {
				sel.saveSelfPick(this.dataForm).then((res) => {
					if (res.code == 200) {
						this.selfCode = res.data.selfCode
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
							
						// })
						this.successShow = true

					}
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F9F9F9;
		padding: 10rpx 12rpx;

		.centerbox {
			padding: 18rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(204, 204, 204, 0.4);
			border-radius: 10rpx 10rpx 0rpx 0rpx;

			.thetexts {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-top: 40rpx;

				.text_title {
					margin-bottom: 16rpx;
				}

				.text_content {
					color: #999999;
					line-height: 40rpx;
				}
			}
		}

		.bottombtn {
			padding: 10rpx 30rpx 40rpx 30rpx;
			margin-top: 68rpx;
		}

		.successPopup {
			width: 560rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 26rpx 60rpx;

			.poupTop {
				display: flex;
				align-items: center;

				.theiconbox {
					background-color: #029b00;
					border-radius: 50%;
					display: flex;
					align-content: center;
					justify-content: center;
				}

				.theicontitle {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					margin-left: 13rpx;
					color: #333333;
				}
			}

			.poupContent {
				margin-top: 50rpx;

				text-align: center;

				.green {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #69A35B;
					margin-right: 18rpx;
				}

				.copy {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FB3024;
				}
			}

			.tipcontent {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				margin-top: 36rpx;

				.tip1 {
					color: #333333;

					font-weight: bold;
				}

				.tip2 {
					color: #666666;
					font-weight: 400;
					line-height: 42rpx;
				}

			}

			.poupBtn {
				background: #FB3024;
				border-radius: 39rpx;
				padding: 26rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				margin-top: 70rpx;
				margin-bottom: 40rpx;
			}
		}
	}
</style>