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

<template>
	<view class="cotainer">
		<view class="myswiper">
			<u-swiper :list="list" height="450"></u-swiper>
		</view>
		<view class="scan">
			<view @click="getScanCode" class="scan-code">
				<u-icon name="scan" size="120" color="#ddd"></u-icon>
				<view>点击扫码提货</view>
			</view>
			<view class="scan-form">
				<view class="scan-form-flex">
					<view class="scan-form-label">
						卡号
					</view>
					<view class="scan-form-input">
						<u-input v-model="form.card_number" type="text" placeholder="请输入卡号/扫码提货" />
						<u-icon @click="getScanCode" name="scan" size="60" color="#333"></u-icon>
					</view>
				</view>
				<view class="scan-form-flex">
					<view class="scan-form-label">
						密码
					</view>
					<view class="scan-form-input">
						<u-input v-model="form.password" type="password" placeholder="请输入密码" />
					</view>
				</view>
				<view class="scan-form-flex">
					<view class="scan-form-btn" @click="goSubmit">
						点击提货
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {toast,isNull} from '@/common/util.js'
	export default {
		components: {},
		data() {
			return {
				form: {
					card_number: '',
					password: ''
				},
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],

			}
		},
		methods: {
			getScanCode() {
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode', 'barCode', 'dataMatrix'],
					success: res => {
						if (res.errMsg == 'scanCode:ok') {
							this.form.password = res.result
						} else {
							uni.showToast({
								title: '扫码失败',
								icon: "none",
								mask: true,
							})
						}
					},
					fail: err => {
						console.log(JSON.stringify(err))
					}

				})
			},
			goSubmit() {
				if(isNull(this.form.card_number)||isNull(this.form.password)){
					toast('请填写卡号或密码')
					return
				}
				this.$u.api.getCard(this.form).then(res=>{
					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=>{
					
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.cotainer {



		.myswiper {
			padding: 40rpx;
		}

		.scan {
			margin: 30rpx;

			&-code {
				text-align: center;
				font-size: 30rpx;
				color: #ddd;

				u-icon {
					margin-bottom: 15rpx;
				}
			}

			&-form {
				display: flex;
				margin: 30rpx;
				flex-wrap: wrap;

				&-flex {
					display: flex;
					align-items: center;
					margin: 0 auto;
					width: 80%;
					margin-bottom: 20rpx;
				}

				&-label {
					margin-right: 20rpx;
					font-size: 32rpx;
					width: 80rpx;
				}

				&-input {
					display: flex;
					align-items: center;
					border: 1px solid #ddd;
					border-radius: 10rpx;
					padding: 0 20rpx;
					width: calc(100% - 100rpx);

					u-input {
						width: 100%;
					}

					u-icon {
						margin-left: 15rpx;
					}
				}

				&-btn {
					background-color: #A4ADB3;
					color: #fff;
					border-radius: 10rpx;
					padding: 10rpx 30rpx;
					margin: 20rpx auto;

				}
			}
		}
	}
</style>