<script setup>
|
import { onMounted,ref} from 'vue';
|
import{ creatUserArchive } from '../../api/index.js'
|
|
const form = ref({
|
id:JSON.parse(uni.getStorageSync('userInfo')).id,
|
waterCardNumber:'',
|
userName:'',
|
userPhone:'',
|
remark:'',
|
})
|
function toScan(){
|
// 调用二维码扫描接口
|
uni.scanCode({
|
scanType: ['qrCode'],
|
success: function (res) {
|
console.log('条码内容：' + res.result);
|
let data = res.result.split('&id=')
|
form.value.waterCardNumber = data[1]
|
console.log('form.value.waterCardNumber',form.value.waterCardNumber)
|
}
|
});
|
}
|
//校验
|
const formRef = ref()
|
const rules = ref({
|
waterCardNumber: {
|
rules:[
|
{required: true,errorMessage: '请输入卡号'}]
|
},
|
userName: {
|
rules:[
|
{required: true,errorMessage: '请输入姓名'},
|
{pattern:/^[\u4e00-\u9fa5\\.]+$/, errorMessage: '请输入中文或" . "符号'}
|
]
|
},
|
userPhone: {
|
rules:[
|
{required: true,errorMessage: '请输入您的手机号'},
|
{pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确'}
|
]
|
},
|
})
|
async function submit(){
|
formRef.value.validate().then(async() =>{
|
await creatUserArchive(form.value).then((res) =>{
|
if(res.code == 200){
|
uni.showToast({
|
title: '添加成功！',
|
image: '../../static/images/other/success.svg',
|
duration:2000
|
}).then(() =>{
|
uni.navigateBack()
|
})
|
}else if(res.code == 300){
|
uni.showToast({
|
title: res.msg,
|
duration:2000,
|
icon:'none'
|
})
|
}else{
|
uni.showToast({
|
title:'绑卡失败',
|
duration:2000,
|
icon:'none'
|
})
|
}
|
})
|
})
|
}
|
onMounted(() =>{
|
})
|
</script>
|
<template>
|
<view class="container">
|
<view class="content">
|
<navbar title="绑定会员卡"></navbar>
|
<view class="main">
|
<view class="title">请填写卡及个人信息</view>
|
<view class="form">
|
<uni-forms ref="formRef" :model="form" :rules="rules" label-width = 100>
|
<uni-forms-item class="form-item" label="卡号：" name="waterCardNumber">
|
<view class="card-item">
|
<input class="scan-input" v-model="form.waterCardNumber" placeholder="请输入卡号或扫描二维码" />
|
<image class="scan-img" @click="toScan()" src="../../static/images/addCard/code.svg" alt=""></image>
|
</view>
|
</uni-forms-item>
|
<uni-forms-item label="姓名：" name="userName">
|
<input class="input-item" v-model="form.userName" placeholder="请输入姓名" />
|
</uni-forms-item>
|
<uni-forms-item label="联系方式：" name="userPhone">
|
<input class="input-item" type="textarea" v-model="form.userPhone" placeholder="请输入手机号" />
|
</uni-forms-item>
|
<uni-forms-item label="备注：" name="remark">
|
<input class="input-item" type="textarea" v-model="form.remark" placeholder="请输入内容" />
|
</uni-forms-item>
|
</uni-forms>
|
</view>
|
<view class="tips">
|
<text 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;
|
.main{
|
width:100%;
|
height: calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
padding:0 50rpx 38rpx;
|
box-sizing:border-box;
|
.title{
|
width:100%;
|
height:130rpx;
|
text-align:left;
|
line-height:130rpx;
|
// background: #e6e6e6;
|
}
|
.form{
|
height: 600rpx;
|
width:100%;
|
background: #FFFFFF;
|
border-radius: 24rpx;
|
padding:30rpx 50rpx 0;
|
box-sizing: border-box;
|
.input-item{
|
line-height:100%;
|
height:100%;
|
}
|
.card-item{
|
display: flex;
|
justify-content: space-around;
|
height:100%;
|
align-items: center;
|
.scan-input{
|
width:375rpx;
|
margin-right:20rpx;
|
line-height:100%;
|
height:100%;
|
}
|
.scan-img{
|
width:56rpx;
|
height:56rpx;
|
}
|
}
|
}
|
.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:28rpx;
|
color: #484848;
|
.tips-text{
|
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>
|
