angelo
/
web-zk-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
web-zk-h5/pages/selfService/updateDomicile/addDomicile.vue

502 lines
12 KiB
Vue
Raw Normal View History

## 初始化；
2025-03-23 09:29:40 +08:00
<template>
<view class="main">
<view class="contents">
<u-form :model="dataForm" labelWidth="auto" ref="uForm">
<view class="view-class">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<u-form-item :label="'会员姓名'" label-width="200rpx" prop="memberName">
## 初始化；
2025-03-23 09:29:40 +08:00
<u-input v-model="dataForm.memberName" disabled placeholder-class="place-class"
class="border-color" placeholder="请输入收货人姓名" />
</u-form-item>
</view>
<view class="view-class">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<u-form-item :label="'联系方式'" label-width="200rpx" prop="phone">
## 初始化；
2025-03-23 09:29:40 +08:00
<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">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<u-form-item label-width="200rpx" :label="'验证码'" prop="verificationCode" borderBottom ref="item1">
## 初始化；
2025-03-23 09:29:40 +08:00
<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">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<u-form-item :label="'备注'" label-width="200rpx" prop="remark">
## 初始化；
2025-03-23 09:29:40 +08:00
<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>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<u-button type="success" shape="circle" class="btn" @click="submit">{{'确定'}}</u-button>
## 初始化；
2025-03-23 09:29:40 +08:00
<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>
fix(addAddress): bug-10 删除售后电话
2025-04-09 11:55:43 +08:00
<!-- 售后电话：400-111-2818 -->
## 初始化；
2025-03-23 09:29:40 +08:00
</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()方法中的提示覆盖
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
uni.$u.toast('验证码已发送');
## 初始化；
2025-03-23 09:29:40 +08:00
// 通知验证码组件内部开始倒计时
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;
}
}
fix(style): 修复css预处理器无法处理/deep/ 导致编译崩溃的问题
2025-04-01 17:06:24 +08:00
:v-deep .u-form-item__body__right__message {
## 初始化；
2025-03-23 09:29:40 +08:00
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;
}
fix(style): 修复css预处理器无法处理/deep/ 导致编译崩溃的问题
2025-04-01 17:06:24 +08:00
:v-deep .label-style .u-form-item__body__left {
## 初始化；
2025-03-23 09:29:40 +08:00
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>