提交兑换页面切图

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

@ -1,43 +1,33 @@
<template>
<view class="cotainer">
<view class="myswiper">
<u-swiper :list="list" height="450"></u-swiper>
<view class="changecontainer">
<view class="logobox">
<image src="../../static/logo-xietaitai.png" mode="widthFix"></image>
</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 class="formSystem">
<view class="systemtop">
<view class="systemtitle">蟹太太提货系统</view>
<view class="systemtext">
<text>2024年提货已开放!</text>
<text>自2024年<text class="colorOrange">9月25日</text> 至2024年<text class="colorOrange">12月15日</text></text>
</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>
</template>
<script>
<script>
import {toast,isNull} from '@/common/util.js'
export default {
components: {},
@ -45,140 +35,168 @@
return {
form: {
card_number: '',
password: ''
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: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
}
],
}
rules:{
card_number:[{
required: true,
message: '请输入卡号',
trigger: 'change'
}],
password:[{
required: true,
message: '请输入密码',
trigger: 'change'
}]
}
};
},
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=>{
})
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: ''
// })
// }else{
// toast(res.card.can_delivery)
// }
// }).then(res=>{
// })
}
},
onReady() {
this.$refs.uForm.setRules(this.rules);
}
}
</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 type="text/css" 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: 58rpx;
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: 20rpx;
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>

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