You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

202 lines
4.6 KiB

<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">
<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>
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'
}]
}
};
},
methods: {
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 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>