<script setup>
|
import { onMounted,ref} from 'vue';
|
|
const form = ref({
|
waterwaterCardNumber:'',
|
userName:'',
|
userPhone:'',
|
address:'',
|
remark:'',
|
})
|
function submit(){
|
console('res')
|
}
|
onMounted(() =>{
|
})
|
</script>
|
<template>
|
<view class="container">
|
<view class="content">
|
<navbar title="绑定会员卡"></navbar>
|
<view class="main">
|
<view class="title">请填写卡及个人信息</view>
|
<view class="form">
|
<view class="form-item card-item">
|
<text>卡号：</text>
|
<input v-model="form.waterCardNumber" placeholder="请输入卡号"/>
|
<image src="../../static/images/addCard/code.png" alt=""></image>
|
</view>
|
<view class="form-item">
|
<text>姓名：</text>
|
<input v-model="form.waterCardNumber" placeholder="请输入姓名"/>
|
</view>
|
<view class="form-item">
|
<text>联系方式：</text>
|
<input v-model="form.waterCardNumber" placeholder="请输入手机号"/>
|
</view>
|
<view class="form-item">
|
<text>区域：</text>
|
<input v-model="form.waterCardNumber" placeholder="请选择区域"/>
|
</view>
|
<view class="form-item">
|
<text>地址：</text>
|
<input v-model="form.waterCardNumber" placeholder="请输入地址"/>
|
</view>
|
<view class="form-item">
|
<text>备注：</text>
|
<input v-model="form.waterCardNumber" placeholder="请输入内容"/>
|
</view>
|
</view>
|
<view class="tips">
|
<text>1、完成实名认证，方便遗失挂失及补卡等。</text>
|
<text>2、绑卡后，运营商可以看到您实名时填写的 姓名和电话。</text>
|
</view>
|
<view class="subBtn" @click="submit()">提交信息</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
height:100vh;
|
.content{
|
width:100%;
|
height:100vh;
|
.navbar{
|
width:100%;
|
height:176rpx;
|
background: linear-gradient(to bottom,#5EA1FA,#8BC1FC);
|
display: flex;
|
align-items: flex-end;
|
padding-bottom:24rpx;
|
box-sizing: border-box;
|
image{
|
width:20rpx;
|
height:40rpx;
|
margin-left:32rpx;
|
}
|
text{
|
font-weight: 400;
|
font-size: 36rpx;
|
color: #000000;
|
margin-left: 234rpx;
|
|
}
|
}
|
.main{
|
width:100%;
|
height: calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
padding:0 32rpx 38rpx;
|
box-sizing:border-box;
|
.title{
|
width:100%;
|
height:130rpx;
|
text-align:left;
|
line-height:130rpx;
|
// background: #e6e6e6;
|
}
|
.form{
|
height: 700rpx;
|
width:100%;
|
background: #FFFFFF;
|
border-radius: 24rpx;
|
.form-item{
|
height:100rpx;
|
width:96%;
|
border-bottom:1px solid rgba(226,226,226,0.6);
|
display: flex;
|
justify-content:space-between;
|
align-items: center;
|
margin: 0 auto;
|
text{
|
width:160rpx;
|
font-weight:400;
|
font-size: 32rpx;
|
color: #000000;
|
margin-left: 24rpx;
|
// margin-right: 82rpx;
|
}
|
input{
|
width: 450rpx;
|
:deep(.uni-input-placeholder ){
|
font-weight: 300;
|
font-size:32rpx;
|
color: #ccc;
|
}
|
}
|
}
|
.card-item{
|
input{
|
width:375rpx;
|
}
|
image{
|
width:44rpx;
|
height:44rpx;
|
}
|
}
|
}
|
.tips{
|
width: 100%;
|
padding:0 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
flex-direction: column;
|
margin-top:56rpx;
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #484848;
|
text:first-child{
|
margin-bottom:28rpx;
|
}
|
}
|
.subBtn{
|
width: 100%;
|
height: 98rpx;
|
background-color:#5EA1FA;
|
border-radius: 50rpx;
|
font-weight: 300;
|
font-size: 36rpx;
|
color: #FFFFFF;
|
text-align: center;
|
line-height:98rpx;
|
margin-top: 236rpx;
|
letter-spacing:2px;
|
}
|
}
|
}
|
}
|
</style>
|
