xietaitai-shop-wx/packages/change/change.vue

<template>
	<view class="changecontainer">
		<view class="logobox">
			<image src="../../static/logo-xietaitai.png" mode="widthFix"></image>
		</view>
		<view class="formSystem">
			<view class="systemtop">
				<view class="systemtitle">蟹太太提货系统</view>
				<view class="systemtext" v-if="showHelp">
					<text style="width: 70%;margin: 0 auto;margin-top: 20rpx;">该产品
					<text v-if="openDate" class="colorOrange">于{{openDate}}</text>
					<text v-if="endDate" class="colorOrange">至{{endDate}}</text>可提货</text>
				</view>
			</view>
			<view class="formChange">
				<u-form :model="form" ref="uForm">
					<u-form-item class="formitem" prop="card_number" :border-bottom="false">
						<u-input type="text" class="card_number" v-model="form.card_number" placeholder="请输入卡号" />
					</u-form-item>
					<u-form-item class="formitem password" prop="password" :border-bottom="false">
						<u-input class="password" type="password" v-model="form.password" placeholder="请输入密码"
							:password-icon="false" />
					</u-form-item>
				</u-form>
				<u-button class="formitem submitform" form-type="submit" :plain="true" @click="goSubmit">点击提货</u-button>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		toast,
		isNull
	} from '@/common/util.js'
	export default {
		components: {},
		data() {
			return {
				form: {
					card_number: '',
					password: '',
				},
				rules: {
					card_number: [{
						required: true,
						message: '请输入卡号',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				},
				dateFalse:'',
				showHelp:false,
				openDate:'',
				endDate:''
			};
		},
		onLoad() {
			const configs = uni.getStorageSync('configs')
			configs.map(item=>{
				if(item.key==='dateFalse'){
					this.dateFalse = item.value
				}
			})
		},
		methods: {
			goSubmit() {
				if (isNull(this.form.card_number) || isNull(this.form.password)) {
					toast('请填写卡号或密码')
					return
				}
				this.$u.api.getCard(this.form).then(res => {
					if(res.available_dates.length===0){
						toast(this.dateFalse,4000)
						return
					}
					let open_date = res.card.sku.open?res.card.sku.open:false
					let end_date = res.card.sku.end?res.card.sku.end:false
					let today = this.$moment().format('YYYY-MM-DD')
					console.log(today,open_date,this.$moment(today).isBefore(open_date))
					// if(open_date){
						this.openDate = open_date?this.$moment(res.card.sku.open).format('YYYY年MM月DD日'):false
						this.endDate = end_date?this.$moment(res.card.sku.end).format('YYYY年MM月DD日'):false
						this.showHelp = this.openDate || this.endDate ? true : false
						if(this.$moment(today).isBefore(open_date) || this.$moment(today).isAfter(end_date)){
							if(!isNull(res.card.sku.help)){
								toast(res.card.sku.help,4000)
							}else{
								toast(this.dateFalse,4000)
							}
							return
						}else{
							
						}
					// }
					
					if (res.card.status === 2) {
						uni.setStorageSync('vuex_card', {
							card_number: this.form.card_number,
							password: this.form.password,
							card: res.card
						})
						uni.navigateTo({
							url: '/packages/order/order?hasCard=true'
						})
					} else {
						toast(res.card.can_delivery)
					}
				}).then(res => {
					// console.log("ressssss",res)
					// toast(res)
				})

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style scoped>
	.changecontainer {
		width: 100%;
		background-image: url(../../static/bg-change.jpg);
		background-position: center top;
		background-size: cover;
		padding-top: 114rpx;
		padding-bottom: 400rpx;
	}

	.logobox {
		width: 162rpx;
		height: 162rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		background: #fff;
		margin-bottom: 80rpx;
		box-shadow: 0 22rpx 32rpx rgba(53, 53, 53, .6);
	}

	.logobox image {
		width: 100%;
		height: auto;
	}

	.formSystem {
		width: 87.33%;
		margin: 0 auto;
		border-radius: 10rpx;
		background: #fff;
		padding-bottom: 84rpx;
	}

	.systemtop {
		padding-top: 80rpx;
		text-align: center;
		padding-bottom: 38rpx;
		border-bottom: 1rpx dashed #a4a5a4;
		position: relative;
		margin-bottom: 80rpx;
	}

	.systemtop::before,
	.systemtop::after {
		content: " ";
		position: absolute;
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background: #4a4b4a;
		bottom: -14rpx;
	}

	.systemtop::before {
		left: -14rpx;
	}

	.systemtop::after {
		right: -14rpx;
	}

	.systemtitle {
		font-size: 36rpx;
		font-weight: 700;
		color: #b98b44;
		/* margin-bottom: 25rpx; */
	}

	.systemtext text {
		display: block;
		font-size: 28rpx;
		color: #000;
		line-height: 36rpx;
	}

	.systemtext text.colorOrange {
		display: inline-block;
		color: #b98b44;
	}

	.formChange {
		width: 68.7%;
		margin: 0 auto;
	}

	/deep/ .u-form-item {
		margin-bottom: 40rpx;
		height: 74rpx;
		width: 100%;
		line-height: 74rpx;
		border-radius: 50rpx;
		background-color: #f4f3f2;
		border: none;
		padding: 0 !important;
		border: none !important;
		font-size: 20rpx;
		color: #676767;
	}

	/deep/ .u-form-item.password {
		background-image: url(../../static/icon-change2.png);
	}
	/deep/ .u-input{
		padding: 0 10px !important;
	}
	/deep/ .u-form-item .u-input__input{
		display: block;
		border: none;
		width: 100%;
		height: 74rpx;
		line-height: 74rpx;
		color: #676767 !important;
		font-size: 26rpx !important;
		padding-left: 94rpx;
		padding-right: 30rpx;
		background-position: left 30rpx center;
		background-size: 38rpx auto;
		background-repeat: no-repeat;
	}

	/deep/ .card_number .u-input__input {
		background-image: url(../../static/icon-change1.png) !important;
	}

	/deep/ .password .u-input__input {
		background-image: url(../../static/icon-change2.png) !important;
	}

	/deep/ .u-btn {
		color: #fff !important;
		font-size: 26rpx !important;
		font-weight: bold;
		padding: 0;
		height: 74rpx !important;
		width: 100%;
		line-height: 74rpx !important;
		border-radius: 50rpx;
		background-color: #b98b44 !important;
	}

	/deep/ .u-btn::after {
		display: none;
	}
</style>