540 lines
12 KiB
Vue
540 lines
12 KiB
Vue
<template>
|
|
<view class="pb100">
|
|
<view class="form-group">
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
{{ $t('CK_KS_14') }}
|
|
</view>
|
|
<view class="disabled-input">{{ form.memberName }}</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
{{ $t('MN_F_23') }}
|
|
</view>
|
|
<view class="disabled-input">{{ form.phone }}</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
{{ $t('MY_CK_8') }}
|
|
</view>
|
|
<input class="form-input" type="text" v-model="form.changeMemberName" :placeholder="$t('S_C_70')" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
{{ $t('MY_CK_9') }}
|
|
</view>
|
|
<input class="form-input" type="text" v-model="form.changePhone" :placeholder="$t('S_C_70')" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
{{ $t('w_0043') }}
|
|
</view>
|
|
<input class="form-input" type="text" v-model="form.verificationCode" :placeholder="$t('S_C_70')" />
|
|
<button class="get-code-btn" type="default" @click="sendCode"
|
|
:disabled="is_send">{{ send_btn_txt }}</button>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
{{ $t('MY_CK_10') }}
|
|
</view>
|
|
<textarea auto-height class="form-textarea" v-model="form.description" placeholder="" />
|
|
</view>
|
|
<view class="form-item" style="display: block;">
|
|
<view class="form-label">
|
|
<text class="white mr10">*</text>
|
|
{{ $t('MY_CK_11') }}
|
|
</view>
|
|
<view class="d-b-c p-20-0">
|
|
<view>
|
|
<image class="card-pic" :src="form.idFront" mode="aspectFit"></image>
|
|
</view>
|
|
<view>
|
|
<image class="card-pic" :src="form.idBack" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item" style="display: block;">
|
|
<view class="form-label">
|
|
<text class="white mr10">*</text>
|
|
{{ $t('MY_CK_12') }}
|
|
</view>
|
|
<view class="d-b-c p-20-0">
|
|
<view>
|
|
<image @click="clearImage('changeIdFront')" v-if="form.changeIdFront" class="card-pic"
|
|
:src="form.changeIdFront" mode="aspectFit"></image>
|
|
<image @click="openUpload('changeIdFront')" v-else class="card-pic" src="/static/new-card.png"
|
|
mode="aspectFit"></image>
|
|
</view>
|
|
<view>
|
|
<image @click="clearImage('changeIdBack')" v-if="form.changeIdBack" class="card-pic"
|
|
:src="form.changeIdBack" mode="aspectFit"></image>
|
|
<image @click="openUpload('changeIdBack')" v-else class="card-pic" src="/static/new-card.png"
|
|
mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
{{ $t('MY_CK_6') }}({{currencyIcon()}})
|
|
</view>
|
|
<view class="disabled-input">{{ formatNum(form.amount) }}</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
{{ $t('MY_WAL_22') }}
|
|
</view>
|
|
<textarea auto-height class="form-textarea" v-model="form.remark" placeholder="" />
|
|
</view>
|
|
</view>
|
|
<button class="normal-sub-btn" style="margin-top: 37rpx;" @click="isPopup = true">{{ $t('w_0035') }}</button>
|
|
<template v-if="isPopup">
|
|
<view class="pop-bg" @click="isPopup = false"></view>
|
|
<view class="pop-success" v-if="isPopup">
|
|
<view class="d-c d-b-c hh100">
|
|
<view class="d-e-c ww100"><u-icon name="close" size="34rpx" color="#999"
|
|
@click="isPopup = false"></u-icon></view>
|
|
<view><u-icon size="77rpx" name="/static/icon/warn.png"></u-icon></view>
|
|
<view class="f24 gray9 tc">{{ $t('w_0422') }}</view>
|
|
<view class="f24 gray9 tc">{{$t('PER_DA_35')}}</view>
|
|
<button class="pop-btn" @click="subfunc()">{{ $t('w_0035') }}</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<Upload :num="1" v-if="isUpload" @getImgs="getImgsFunc"></Upload>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Popup from '@/components/uni-popup.vue';
|
|
import Upload from '@/components/upload/upload.vue';
|
|
export default {
|
|
components: {
|
|
Popup,
|
|
Upload
|
|
},
|
|
data() {
|
|
return {
|
|
isPopup: false,
|
|
/*是否已发验证码*/
|
|
is_send: false,
|
|
/*发送按钮文本*/
|
|
send_btn_txt: this.$t('w_0055'),
|
|
/*当前秒数*/
|
|
second: 60,
|
|
upload_type: '',
|
|
isUpload: false,
|
|
form: {
|
|
amount: '', //扣费金额
|
|
changeIdFront: '', //变更证件正面
|
|
changeIdBack: '', //变更证件反面
|
|
changeMemberName: '', //变更会员名称
|
|
changePhone: '', //变更联系方式
|
|
description: '',
|
|
idBack: '', //证件反面
|
|
idFront: '', //证件正面
|
|
memberCode: '', //会员编号
|
|
memberName: '', //会员名称
|
|
phone: '', //联系方式
|
|
pkAccount: 0, //扣费账户ID
|
|
remark: '',
|
|
verificationCode: ''
|
|
}
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getData() {
|
|
let self = this;
|
|
self.loading = false;
|
|
self._get('member/api/change-domicile/show-change-domicile', {}, res => {
|
|
Object.assign(self.form, res.data);
|
|
});
|
|
},
|
|
subfunc() {
|
|
let self = this;
|
|
let params = self.form;
|
|
let flag = false;
|
|
let values = [{
|
|
name: self.$t('S_C_70') + self.$t('w_0274'),
|
|
value: 'changeMemberName',
|
|
callback: function(e) {
|
|
return e != '';
|
|
}
|
|
}, {
|
|
name: self.$t('S_C_70') + self.$t('MY_CK_10'),
|
|
value: 'description',
|
|
callback: function(e) {
|
|
return e != '';
|
|
}
|
|
},
|
|
{
|
|
name: self.$t('S_C_70') + self.$t('MY_CK_5'),
|
|
value: 'changePhone',
|
|
callback: function(e) {
|
|
return e != '';
|
|
}
|
|
},
|
|
{
|
|
name: self.$t('S_C_70') + self.$t('MY_ORD_60'),
|
|
value: 'changeIdFront',
|
|
callback: function(e) {
|
|
return e != '';
|
|
}
|
|
},
|
|
{
|
|
name: self.$t('S_C_70') + self.$t('MY_ORD_61'),
|
|
value: 'changeIdBack',
|
|
callback: function(e) {
|
|
return e != '';
|
|
}
|
|
},
|
|
{
|
|
name: self.$t('S_C_70') + self.$t('w_0043'),
|
|
value: 'verificationCode',
|
|
callback: function(e) {
|
|
return e != '';
|
|
}
|
|
}
|
|
];
|
|
values.forEach((item, index) => {
|
|
if (!flag && !item.callback(params[item.value])) {
|
|
flag = item.name;
|
|
return;
|
|
}
|
|
});
|
|
if (flag) {
|
|
uni.showToast({
|
|
title: flag,
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
self._post('member/api/change-domicile/change-domicile', params, res => {
|
|
uni.showModal({
|
|
title: self.$t('w_0034'),
|
|
content: res.msg,
|
|
success() {
|
|
uni.navigateBack();
|
|
}
|
|
})
|
|
})
|
|
},
|
|
/*获取上传的图片*/
|
|
getImgsFunc(e) {
|
|
let self = this;
|
|
self.isUpload = false;
|
|
if (e && typeof e != 'undefined') {
|
|
self.form[self.upload_type] = e[0].url;
|
|
}
|
|
},
|
|
/*打开上传图片*/
|
|
openUpload(type) {
|
|
this.upload_type = type;
|
|
this.isUpload = true;
|
|
},
|
|
clearImage(name) {
|
|
this.form[name] = '';
|
|
},
|
|
/*发送短信*/
|
|
sendCode() {
|
|
let self = this;
|
|
if (self.form.changePhone == '') {
|
|
uni.showToast({
|
|
title: self.$t('w_0134'),
|
|
duration: 2000,
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
console.log(self.form.changePhone)
|
|
self._get(
|
|
'member/api/sms/verification', {
|
|
phone: self.form.changePhone
|
|
},
|
|
result => {
|
|
uni.showToast({
|
|
title: self.$t('MY_WAL_49')
|
|
});
|
|
self.is_send = true;
|
|
self.changeMsg();
|
|
},
|
|
err => {
|
|
console.log(err);
|
|
}
|
|
);
|
|
},
|
|
/*改变发送验证码按钮文本*/
|
|
changeMsg() {
|
|
if (this.second > 0) {
|
|
this.send_btn_txt = this.second + 'S';
|
|
this.second--;
|
|
setTimeout(this.changeMsg, 1000);
|
|
} else {
|
|
this.send_btn_txt = this.$t('w_0055');
|
|
this.second = 60;
|
|
this.is_send = false;
|
|
}
|
|
},
|
|
hidePopupFunc() {
|
|
this.isPopup = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.agreement-box {
|
|
width: 750rpx;
|
|
background: #ffffff;
|
|
padding: 28rpx 22rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 2rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.agreement-content {
|
|
font-size: 24rpx;
|
|
font-family: SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 32rpx;
|
|
word-break: break-all;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.agreement-btn {
|
|
min-width: 320rpx;
|
|
height: 76rpx;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
background: #282828;
|
|
border-radius: 38rpx;
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.form-title {
|
|
width: 750rpx;
|
|
height: 106rpx;
|
|
background: #fb3024;
|
|
padding-left: 44rpx;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
line-height: 106rpx;
|
|
font-weight: bold;
|
|
z-index: 1;
|
|
}
|
|
|
|
.form-title::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
left: 25rpx;
|
|
width: 6rpx;
|
|
height: 24rpx;
|
|
background-color: #fb3024;
|
|
z-index: 1;
|
|
}
|
|
|
|
.form-group {
|
|
padding: 0 22rpx;
|
|
background: #ffffff;
|
|
|
|
.form-item {
|
|
min-height: 104rpx;
|
|
box-sizing: border-box;
|
|
padding: 15rpx 0;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #eee;
|
|
|
|
.icon-jiantou {
|
|
font-size: 32rpx;
|
|
color: 090000;
|
|
}
|
|
|
|
.form-tips {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.form-label {
|
|
width: 255rpx;
|
|
flex-shrink: 0;
|
|
word-break: break-all;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.disabled-input {
|
|
width: 450rpx;
|
|
height: 78rpx;
|
|
padding: 0 18rpx;
|
|
line-height: 78rpx;
|
|
background: #eee;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 450rpx;
|
|
padding: 0 18rpx;
|
|
line-height: 1.5;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
background: #fff;
|
|
}
|
|
|
|
.form-input {
|
|
width: 450rpx;
|
|
height: 78rpx;
|
|
padding: 0 18rpx;
|
|
line-height: 78rpx;
|
|
background: #fff;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
.form-item:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-upload {
|
|
padding: 30rpx 23rpx;
|
|
}
|
|
|
|
.form-upload-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.form-upload-tips {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.form-upload-tips2 {
|
|
font-size: 24rpx;
|
|
color: #fb3024;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.upload-add {
|
|
width: 142rpx;
|
|
height: 142rpx;
|
|
margin-right: 18rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.tips-box {
|
|
padding: 33rpx 27rpx 29rpx 41rpx;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.address-box {
|
|
width: 706rpx;
|
|
padding: 21rpx 26rpx;
|
|
background-color: #f5f5f5;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.address-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.radio-check {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: #ffffff;
|
|
border: 1rpx solid #dddddd;
|
|
border-radius: 50%;
|
|
box-sizing: border;
|
|
position: relative;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.radio-check.checked {
|
|
border: 1rpx solid #fb3024;
|
|
background: #fb3024;
|
|
}
|
|
|
|
.icon.icon-guanbi {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.s-pop-btn {
|
|
width: 462rpx;
|
|
height: 78rpx;
|
|
background: #fb3024;
|
|
border-radius: 39rpx;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
margin: 0 auto;
|
|
margin-bottom: 68rpx;
|
|
}
|
|
|
|
.get-code-btn {
|
|
min-width: 72rpx;
|
|
height: 62rpx;
|
|
background: #333333;
|
|
line-height: 62rpx;
|
|
padding: 0rpx 20rpx;
|
|
border-radius: 40rpx;
|
|
white-space: nowrap;
|
|
// border: 1rpx solid $dominant-color;
|
|
color: #ffffff;
|
|
box-sizing: border-box;
|
|
margin-left: 46rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.get-code-btn[disabled='true'] {
|
|
// border: 1rpx solid #cccccc;
|
|
color: #333;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.card-pic {
|
|
width: 316rpx;
|
|
height: 192rpx;
|
|
}
|
|
</style> |