提交兑换页面切图

master
DESKTOP-SORBLEM\xuyay 2 years ago
parent 37f58234d0
commit 594c3b2af6

@ -1,43 +1,33 @@
<template> <template>
<view class="cotainer"> <view class="changecontainer">
<view class="myswiper"> <view class="logobox">
<u-swiper :list="list" height="450"></u-swiper> <image src="../../static/logo-xietaitai.png" mode="widthFix"></image>
</view> </view>
<view class="scan"> <view class="formSystem">
<view @click="getScanCode" class="scan-code"> <view class="systemtop">
<u-icon name="scan" size="120" color="#ddd"></u-icon> <view class="systemtitle">蟹太太提货系统</view>
<view>点击扫码提货</view> <view class="systemtext">
</view> <text>2024年提货已开放!</text>
<view class="scan-form"> <text>自2024年<text class="colorOrange">9月25日</text> 至2024年<text class="colorOrange">12月15日</text></text>
<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>
<view class="formChange">
<u-form :model="form" ref="uForm">
<u-form-item class="formitem card_number" prop="card_number" :border-bottom="false">
<u-input type="text" v-model="form.card_number" placeholder="请输入卡号"/>
</u-form-item>
<u-form-item class="formitem password" prop="password" :border-bottom="false">
<u-input 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>
</view> </view>
</template> </template>
<script> <script>
import {toast,isNull} from '@/common/util.js' import {toast,isNull} from '@/common/util.js'
export default { export default {
components: {}, components: {},
@ -45,140 +35,168 @@
return { return {
form: { form: {
card_number: '', card_number: '',
password: '' password: '',
}, },
list: [{ rules:{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg', card_number:[{
title: '昨夜星辰昨夜风,画楼西畔桂堂东' required: true,
}, message: '请输入卡号',
{ trigger: 'change'
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg', }],
title: '身无彩凤双飞翼,心有灵犀一点通' password:[{
}, required: true,
{ message: '请输入密码',
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg', trigger: 'change'
title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳' }]
} }
], };
}
}, },
methods: { methods: {
getScanCode() { goSubmit() {
uni.scanCode({ if(isNull(this.form.card_number)||isNull(this.form.password)){
onlyFromCamera: false, toast('请填写卡号或密码')
scanType: ['qrCode', 'barCode', 'dataMatrix'], return
success: res => { }
if (res.errMsg == 'scanCode:ok') { // this.$u.api.getCard(this.form).then(res=>{
this.form.password = res.result // if(res.card.status===2){
} else { // uni.setStorageSync('vuex_card',{
uni.showToast({ // card_number:this.form.card_number,
title: '扫码失败', // password:this.form.password,
icon: "none", // card:res.card
mask: true, // })
}) // uni.navigateTo({
} // url: ''
}, // })
fail: err => { // }else{
console.log(JSON.stringify(err)) // toast(res.card.can_delivery)
} // }
// }).then(res=>{
})
}, // })
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=>{
})
} }
},
onReady() {
this.$refs.uForm.setRules(this.rules);
} }
} }
</script> </script>
<style lang="scss"> <style type="text/css" scoped>
.cotainer { .changecontainer{
width: 100%;
background-image: url(../../static/bg-change.jpg);
background-position: center top;
.myswiper { background-size: cover;
padding: 40rpx; padding-top: 114rpx;
} padding-bottom: 400rpx;
}
.scan { .logobox{
margin: 30rpx; width: 162rpx;
height: 162rpx;
&-code { border-radius: 50%;
text-align: center; overflow: hidden;
font-size: 30rpx; margin: 0 auto;
color: #ddd; background: #fff;
margin-bottom: 80rpx;
u-icon { box-shadow: 0 22rpx 32rpx rgba(53,53,53,.6);
margin-bottom: 15rpx; }
} .logobox image{
} width: 100%;
height: auto;
&-form { }
display: flex; .formSystem{
margin: 30rpx; width: 87.33%;
flex-wrap: wrap; margin: 0 auto;
border-radius: 10rpx;
&-flex { background: #fff;
display: flex; padding-bottom: 84rpx;
align-items: center; }
margin: 0 auto; .systemtop{
width: 80%; padding-top: 80rpx;
margin-bottom: 20rpx; text-align: center;
} padding-bottom: 58rpx;
border-bottom: 1rpx dashed #a4a5a4;
&-label { position: relative;
margin-right: 20rpx; margin-bottom: 80rpx;
font-size: 32rpx; }
width: 80rpx; .systemtop::before,.systemtop::after{
} content: " ";
position: absolute;
&-input { display: inline-block;
display: flex; width: 28rpx;
align-items: center; height: 28rpx;
border: 1px solid #ddd; border-radius: 50%;
border-radius: 10rpx; background: #4a4b4a;
padding: 0 20rpx; bottom: -14rpx;
width: calc(100% - 100rpx); }
.systemtop::before{
u-input { left: -14rpx;
width: 100%; }
} .systemtop::after{
right: -14rpx;
u-icon { }
margin-left: 15rpx; .systemtitle{
} font-size: 36rpx;
} font-weight: 700;
color: #b98b44;
&-btn { margin-bottom: 25rpx;
background-color: #A4ADB3; }
color: #fff; .systemtext text{
border-radius: 10rpx; display: block;
padding: 10rpx 30rpx; font-size: 20rpx;
margin: 20rpx auto; color: #000;
line-height: 36rpx;
} }
} .systemtext text.colorOrange{
} display: inline-block;
color: #b98b44;
}
.formChange{
width: 68.7%;
margin: 0 auto;
}
.formitem{
margin-bottom: 40rpx;
height: 74rpx;
width: 100%;
line-height: 74rpx;
border-radius: 50rpx;
background-color: #f4f3f2;
border: none;
padding: 0;
padding-left: 104rpx;
padding-right: 40rpx;
border: none !important;
background-position: left 40rpx center;
background-size: 38rpx auto;
background-repeat: no-repeat;
font-size: 20rpx;
color: #676767;
}
.formitem.card_number{
background-image: url(../../static/icon-change1.png);
}
.formitem.password{
background-image: url(../../static/icon-change2.png);
}
.formitem u-input{
display: block;
border: none;
width: 100%;
height: 100%;
line-height: 76rpx;
color: #676767;
font-size: 20rpx;
}
.formitem.submitform{
color: #b98b44;
font-size: 24rpx;
font-weight: bold;
padding: 0;
/* border: none !important; */
}
.formitem.submitform::after{
display: none;
} }
</style> </style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Loading…
Cancel
Save