502 lines
12 KiB
Vue
502 lines
12 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="$t('CK_KS_14')" 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="$t('w_0052')" 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="$t('w_0043')" 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="$t('MY_WAL_22')" 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">{{$t('w_0035')}}</u-button>
|
|||
|
|
<u-popup class="thePopup" :show="successShow" mode="center" @close="successShow = false">
|
|||
|
|
<view class="successPopup">
|
|||
|
|
|
|||
|
|
<view class="poupTop">
|
|||
|
|
<view class="theiconbox">
|
|||
|
|
<u-icon name="checkbox-mark" color="#ffffff" size="26"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="theicontitle">
|
|||
|
|
提交成功
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="poupContent">
|
|||
|
|
我们将在24小时内完成业务受理！具体进度将会以
|
|||
|
|
短信通知形式发送您，请注意查收！</br>
|
|||
|
|
售后电话：400-111-2818
|
|||
|
|
</view>
|
|||
|
|
<view class="poupBtn" @click="sureBtn">
|
|||
|
|
确定
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</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.$t('MY_WAL_49'));
|
|||
|
|
// 通知验证码组件内部开始倒计时
|
|||
|
|
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: res.msg,
|
|||
|
|
// icon: 'none',
|
|||
|
|
// success() {
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/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: #FB3024;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-style {
|
|||
|
|
display: block !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/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: #FB3024;
|
|||
|
|
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: #FB3024;
|
|||
|
|
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>
|