forked from angelo/web-retail-h5
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="'会员姓名'" 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>
|
||
<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.$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;
|
||
}
|
||
}
|
||
|
||
: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>
|