forked from angelo/web-retail-h5
592 lines
14 KiB
Vue
592 lines
14 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="contents">
|
||
<u-form :model="dataForm" labelWidth="auto" ref="uForm">
|
||
<view class="view-class">
|
||
<u-form-item
|
||
:label="'会员姓名'"
|
||
label-width="200rpx"
|
||
prop="memberName"
|
||
>
|
||
<u-input
|
||
v-model="dataForm.memberName"
|
||
disabled
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入收货人姓名"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item :label="'联系方式'" label-width="200rpx" prop="phone">
|
||
<u-input
|
||
v-model="dataForm.phone"
|
||
disabled
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入联系方式"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item
|
||
label="新会员姓名"
|
||
label-width="200rpx"
|
||
prop="changeMemberName"
|
||
>
|
||
<u-input
|
||
v-model="dataForm.changeMemberName"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入收货人姓名"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item
|
||
label="新联系方式"
|
||
label-width="200rpx"
|
||
prop="changePhone"
|
||
>
|
||
<u-input
|
||
v-model="dataForm.changePhone"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入联系方式"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item
|
||
label-width="200rpx"
|
||
:label="'验证码'"
|
||
prop="verificationCode"
|
||
borderBottom
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
v-model="dataForm.verificationCode"
|
||
placeholder="请输入"
|
||
border="none"
|
||
></u--input>
|
||
<u-button
|
||
@tap="getCode"
|
||
class="getcodes"
|
||
type="primary"
|
||
shape="circle"
|
||
:text="tips"
|
||
color="#2FBC42"
|
||
></u-button>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item
|
||
label="情况说明"
|
||
class="label-style"
|
||
label-width="200rpx"
|
||
prop="description"
|
||
>
|
||
<u-textarea
|
||
v-model="dataForm.description"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入情况说明"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view
|
||
class="view-class"
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<u-form-item
|
||
labelPosition="top"
|
||
required
|
||
label-width="200rpx"
|
||
label="原证件(正面)"
|
||
>
|
||
<uploadImg
|
||
:ifsfz="true"
|
||
@imageUploaded="imageUploaded3"
|
||
prop="idFront"
|
||
style="margin-right: 30rpx"
|
||
:bgimg="`../../../static/images/idCard1.png`"
|
||
v-model="dataForm.idFront"
|
||
></uploadImg>
|
||
</u-form-item>
|
||
<u-form-item
|
||
labelPosition="top"
|
||
required
|
||
label-width="200rpx"
|
||
label="原证件(反面)"
|
||
>
|
||
<uploadImg
|
||
:ifsfz="true"
|
||
@imageUploaded="imageUploaded4"
|
||
prop="idBack"
|
||
style="margin-right: 30rpx"
|
||
:bgimg="`../../../static/images/idCard2.png`"
|
||
v-model="dataForm.idBack"
|
||
></uploadImg>
|
||
</u-form-item>
|
||
<!-- <u-form-item labelPosition='top' label="原会员证件照片" prop="remark">
|
||
<image class="idImages" style="margin-right: 20rpx;" :src="dataForm.idFront" mode=""></image>
|
||
<image class="idImages" :src="dataForm.idBack" mode=""></image>
|
||
</u-form-item> -->
|
||
</view>
|
||
<view
|
||
class="view-class"
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<!-- <u-form-item labelPosition='top' label="新会员证件照片" prop="changeIdFront">
|
||
<uploadImg style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard1.png`"
|
||
v-model="dataForm.changeIdFront"></uploadImg>
|
||
<uploadImg :bgimg="`../../../static/images/idCard2.png`" v-model="dataForm.changeIdBack">
|
||
</uploadImg>
|
||
</u-form-item> -->
|
||
<u-form-item
|
||
labelPosition="top"
|
||
required
|
||
label-width="180rpx"
|
||
label="证件(正面)"
|
||
>
|
||
<uploadImg
|
||
:ifsfz="true"
|
||
@imageUploaded="imageUploaded1"
|
||
prop="changeIdFront"
|
||
style="margin-right: 30rpx"
|
||
:bgimg="`../../../static/images/idCard1.png`"
|
||
v-model="dataForm.changeIdFront"
|
||
></uploadImg>
|
||
</u-form-item>
|
||
<u-form-item
|
||
labelPosition="top"
|
||
required
|
||
label-width="180rpx"
|
||
label="证件(反面)"
|
||
>
|
||
<uploadImg
|
||
:ifsfz="true"
|
||
@imageUploaded="imageUploaded2"
|
||
prop="changeIdBack"
|
||
style="margin-right: 30rpx"
|
||
:bgimg="`../../../static/images/idCard2.png`"
|
||
v-model="dataForm.changeIdBack"
|
||
></uploadImg>
|
||
</u-form-item>
|
||
</view>
|
||
<!-- <view class="view-class">
|
||
<u-form-item label="业务扣费(￥)" label-width="200rpx" prop="amount">
|
||
<u-input v-model="dataForm.amount" disabled placeholder-class="place-class" class="border-color"
|
||
placeholder="请输入" />
|
||
</u-form-item>
|
||
</view> -->
|
||
<view class="view-class">
|
||
<u-form-item :label="'备注'" label-width="200rpx" prop="remark">
|
||
<u-input
|
||
v-model="dataForm.remark"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<u-code
|
||
:seconds="seconds"
|
||
@end="end"
|
||
@start="start"
|
||
ref="uCode"
|
||
@change="codeChange"
|
||
></u-code>
|
||
</u-form>
|
||
</view>
|
||
|
||
<u-button type="success" shape="circle" class="btn" @click="submit">{{
|
||
'确定'
|
||
}}</u-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as sel from '@/config/selfService.js'
|
||
import * as ban from '@/config/balance.js'
|
||
import uploadImg from '@/components/uploadImg.vue'
|
||
import { setToken } from '@/config/auth.js'
|
||
export default {
|
||
components: {
|
||
uploadImg,
|
||
},
|
||
data() {
|
||
return {
|
||
userInfo: '',
|
||
check: false,
|
||
address: '',
|
||
defaultCode: [],
|
||
urls: '/member/api/maker-space/update-file',
|
||
dataForm: {
|
||
memberName: '',
|
||
phone: '',
|
||
changeMemberName: '',
|
||
changePhone: '',
|
||
description: '',
|
||
amount: '',
|
||
remark: '',
|
||
idFront: '',
|
||
idBack: '',
|
||
changeIdFront: '',
|
||
changeIdBack: '',
|
||
},
|
||
choiceValue: '',
|
||
successShow: false,
|
||
addressList: [],
|
||
rules: {
|
||
changeMemberName: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: '姓名不能为空',
|
||
},
|
||
],
|
||
|
||
changeIdFront: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: '证件照片不能为空',
|
||
},
|
||
],
|
||
changeIdBack: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: '证件照片不能为空',
|
||
},
|
||
],
|
||
// description: [{
|
||
// // 必填项
|
||
// required: true,
|
||
// // 提示内容（会出现在u-form-item内的底部）
|
||
// message: "情况说明不能为空",
|
||
|
||
// trigger: ["change"],
|
||
// }],
|
||
changePhone: [
|
||
{
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['blur'],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return this.$u.test.mobile(value)
|
||
},
|
||
message: '手机号格式不正确',
|
||
trigger: ['blur'],
|
||
},
|
||
],
|
||
idFront: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: '原证件照片不能为空',
|
||
},
|
||
],
|
||
idBack: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: '原证件照片不能为空',
|
||
},
|
||
],
|
||
},
|
||
tips: '',
|
||
seconds: 60,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.applyChange()
|
||
},
|
||
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
|
||
methods: {
|
||
imageUploaded1(url) {
|
||
this.dataForm.changeIdFront = url
|
||
},
|
||
imageUploaded2(url) {
|
||
this.dataForm.changeIdBack = url
|
||
},
|
||
imageUploaded3(url) {
|
||
this.dataForm.idFront = url
|
||
},
|
||
imageUploaded4(url) {
|
||
this.dataForm.idBack = url
|
||
},
|
||
applyChange() {
|
||
sel.showChangeDomicile().then(res => {
|
||
this.dataForm = res.data
|
||
})
|
||
},
|
||
codeChange(text) {
|
||
this.tips = text
|
||
},
|
||
getCode() {
|
||
if (this.dataForm.changePhone) {
|
||
if (this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码',
|
||
})
|
||
ban
|
||
.getVerification({
|
||
phone: this.dataForm.changePhone,
|
||
})
|
||
.then(res => {
|
||
uni.hideLoading()
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
uni.$u.toast('验证码已发送')
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start()
|
||
})
|
||
} else {
|
||
uni.$u.toast('倒计时结束后再发送')
|
||
}
|
||
} else {
|
||
uni.$u.toast('请先输入手机号')
|
||
return
|
||
}
|
||
},
|
||
end() {
|
||
// uni.$u.toast('倒计时结束');
|
||
},
|
||
start() {
|
||
// uni.$u.toast('倒计时开始');
|
||
},
|
||
|
||
submit() {
|
||
this.$refs.uForm.validate().then(res => {
|
||
sel.saveChangeDomicile(this.dataForm).then(res => {
|
||
if (res.code == '200') {
|
||
uni.showToast({
|
||
title: '修改成功',
|
||
icon: 'none',
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 600)
|
||
},
|
||
})
|
||
// this.successShow = true
|
||
}
|
||
})
|
||
})
|
||
},
|
||
sureBtn() {
|
||
uni.navigateBack()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-radio-label {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.custom-label-content {
|
||
margin-left: 20rpx;
|
||
|
||
.label_name {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.label_phone {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.label_address {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
:v-deep .u-form-item__body__right__message {
|
||
margin-left: 215rpx !important;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.drop {
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30rpx;
|
||
}
|
||
}
|
||
|
||
.check {
|
||
position: relative;
|
||
|
||
view {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 1rpx solid #dddddd;
|
||
border-radius: 50%;
|
||
margin-top: 25rpx;
|
||
}
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
right: 0rpx;
|
||
top: 25rpx;
|
||
// margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.lis_address {
|
||
background: rgba(231, 20, 26, 0.08);
|
||
border-radius: 15rpx;
|
||
padding: 20rpx 26rpx;
|
||
|
||
.lis_title {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #005bac;
|
||
}
|
||
}
|
||
|
||
.label-style {
|
||
display: block !important;
|
||
}
|
||
|
||
:v-deep .label-style .u-form-item__body__left {
|
||
display: block !important;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.uni-textarea {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.view-class {
|
||
border-bottom: 1rpx solid #eee;
|
||
margin: 0 30rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.border-color {
|
||
border: none;
|
||
}
|
||
|
||
page {
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.contents {
|
||
background-color: #fff;
|
||
|
||
.idImages {
|
||
width: 316rpx;
|
||
height: 192rpx;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
background-color: #005bac;
|
||
border: none;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 30rpx;
|
||
margin: 40rpx auto;
|
||
width: 690rpx;
|
||
}
|
||
|
||
.successPopup {
|
||
width: 560rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 26rpx 60rpx;
|
||
|
||
.poupTop {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.theiconbox {
|
||
background-color: #029b00;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.theicontitle {
|
||
font-size: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
margin-left: 13rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.poupContent {
|
||
margin-top: 50rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
line-height: 42rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.poupBtn {
|
||
background: #005bac;
|
||
border-radius: 39rpx;
|
||
padding: 26rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #ffffff;
|
||
margin-top: 70rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
}
|
||
|
||
::v-deep .u-popup__content {
|
||
background-color: rgba(0, 0, 0, 0);
|
||
}
|
||
|
||
.getcodes {
|
||
width: 197rpx;
|
||
// height: 76rpx;
|
||
background: #2fbc42;
|
||
border-radius: 38rpx;
|
||
color: #fff;
|
||
}
|
||
</style>
|