1
This commit is contained in:
Vinjor
parent
e00a6d85e2
commit
591c4788e3
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="my-card-box">
|
||||
<navigation-bar-vue title="地址详情" style="width: 100%;" background-color="#ffffff"
|
||||
<navigation-bar-vue title="名片详情" style="width: 100%;" background-color="#ffffff"
|
||||
title-color="#000000"></navigation-bar-vue>
|
||||
<view class="card-detail">
|
||||
<view class="title">名片信息</view>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="edit-box">
|
||||
<view class="edit-box" @click="goEdit()">
|
||||
<text style="margin-right: 10rpx;">编辑</text>
|
||||
<uni-icons v-if="ifHasCard" type="right" color="#623109" size="12"></uni-icons>
|
||||
<uni-icons v-else type="right" color="#929292" size="12"></uni-icons>
|
||||
@ -269,6 +269,12 @@
|
||||
},
|
||||
goMemberCard() {
|
||||
this.$tab.navigateTo('/pages/mine/member/member-card')
|
||||
},
|
||||
/**
|
||||
* 跳转编辑页
|
||||
*/
|
||||
goEdit() {
|
||||
this.$tab.navigateTo('/pages/mine/set/my-info')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,192 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="my-info-box">
|
||||
<navigation-bar-vue title="个人信息" style="width: 100%;" background-color="#ffffff"
|
||||
title-color="#000000"></navigation-bar-vue>
|
||||
<view class="form-data-box">
|
||||
<!-- 基础表单校验 -->
|
||||
<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
|
||||
<uni-forms-item labelWidth="280rpx" label="头像" required name="avatar">
|
||||
<uni-file-picker small="true" :value="fileList" :sizeType="sizeType" @select="afterRead"
|
||||
@delete="deleteFile" limit="1"></uni-file-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item labelWidth="280rpx" label="昵称" required name="nickName">
|
||||
<uni-easyinput v-model="valiFormData.nickName" placeholder="请输入" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item labelWidth="280rpx" label="联系方式" required name="phonenumber">
|
||||
<uni-easyinput v-model="valiFormData.phonenumber" placeholder="请输入" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item labelWidth="280rpx" label="绑定手机号" required name="userName">
|
||||
<uni-easyinput disabled v-model="valiFormData.userName" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item labelWidth="280rpx" label="收款码" required name="tRecipientImage">
|
||||
<uni-file-picker small="true" :value="recipientImageList" :sizeType="sizeType"
|
||||
@select="afterReadRecipient" @delete="deleteFileRecipient" limit="1"></uni-file-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item labelWidth="280rpx" label="收款码真实姓名" required name="tRecipientName">
|
||||
<uni-easyinput v-model="valiFormData.tRecipientName" placeholder="请输入" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item labelWidth="280rpx" label="通告报名免打扰" required name="tOpenDisturb">
|
||||
<uni-data-checkbox v-model="valiFormData.tOpenDisturb" :localdata="ranges" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button type="primary" style="background-color: #FC2B49;" @click="submit('valiForm')">提交</button>
|
||||
<view class="my-black-list" @click="goMyBlackList()">我的黑名单<uni-icons type="right" color="#623109"
|
||||
size="12"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||||
export default {
|
||||
components: {
|
||||
navigationBarVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
sizeType: ['compressed'],
|
||||
//头像数组
|
||||
fileList: [],
|
||||
//收款码数组
|
||||
recipientImageList: [],
|
||||
ranges: [{
|
||||
text: '开启',
|
||||
value: "1"
|
||||
}, {
|
||||
text: '关闭',
|
||||
value: "0"
|
||||
}],
|
||||
// 校验表单数据
|
||||
valiFormData: {
|
||||
avatar: "",
|
||||
nickName: "",
|
||||
phonenumber: "",
|
||||
userName: "",
|
||||
tRecipientImage: "",
|
||||
tRecipientName: "",
|
||||
tOpenDisturb: "0"
|
||||
},
|
||||
// 校验规则
|
||||
rules: {
|
||||
avatar: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '头像不能为空'
|
||||
}]
|
||||
},
|
||||
nickName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '昵称不能为空'
|
||||
}]
|
||||
},
|
||||
phonenumber: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '联系方式不能为空'
|
||||
}]
|
||||
},
|
||||
tRecipientImage: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '收款码不能为空'
|
||||
}]
|
||||
},
|
||||
tRecipientName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '收款码真实姓名不能为空'
|
||||
}]
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
goMyBlackList() {
|
||||
this.$tab.navigateTo('/pages/mine/set/black-list')
|
||||
},
|
||||
submit(ref) {
|
||||
this.$refs[ref].validate().then(res => {
|
||||
console.log('success', res);
|
||||
uni.showToast({
|
||||
title: `校验通过`
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log('err', err);
|
||||
})
|
||||
},
|
||||
afterRead(file) {
|
||||
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
||||
upload({
|
||||
url: '',
|
||||
filePath: file.tempFilePaths[i]
|
||||
}).then((res) => {
|
||||
console.log(res, '215')
|
||||
this.fileList.push({
|
||||
url: config.baseUrl + res.data
|
||||
})
|
||||
console.log(this.fileList, 'fileList')
|
||||
})
|
||||
}
|
||||
},
|
||||
deleteFile(file, index) {
|
||||
console.log('删除文件');
|
||||
this.fileList.splice(index, 1);
|
||||
},
|
||||
afterReadRecipient(file) {
|
||||
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
||||
upload({
|
||||
url: '',
|
||||
filePath: file.tempFilePaths[i]
|
||||
}).then((res) => {
|
||||
console.log(res, '215')
|
||||
this.recipientImageList.push({
|
||||
url: config.baseUrl + res.data
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
deleteFileRecipient(file, index) {
|
||||
console.log('删除文件');
|
||||
this.recipientImageList.splice(index, 1);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.my-info-box {
|
||||
padding-top: calc(90rpx + var(--status-bar-height));
|
||||
border-top: 1rpx solid #F4F4F4;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 30rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.form-data-box {
|
||||
border-top: 1rpx solid #F4F4F4;
|
||||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: white;
|
||||
|
||||
.my-black-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -4,13 +4,13 @@
|
||||
<text class="file-title">{{ title }}</text>
|
||||
<text class="file-count">{{ filesList.length }}/{{ limitLength }}</text>
|
||||
</view>
|
||||
<upload-image :samll="samll" v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly"
|
||||
<upload-image :small="small" v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly"
|
||||
:image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview"
|
||||
:delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
|
||||
<slot>
|
||||
<view class="is-add">
|
||||
<view class="icon-add"></view>
|
||||
<view class="icon-add rotate"></view>
|
||||
<view :class="['icon-add',small?'new-icon-add':'']"></view>
|
||||
<view :class="['icon-add rotate',small?'new-icon-add':'']"></view>
|
||||
</view>
|
||||
</slot>
|
||||
</upload-image>
|
||||
@ -115,7 +115,7 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
samll: {
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
@ -664,6 +664,10 @@
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.new-icon-add {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
<view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
|
||||
<view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
|
||||
<slot>
|
||||
<view class="icon-add"></view>
|
||||
<view class="icon-add rotate"></view>
|
||||
<view :class="['icon-add',small?'new-icon-add':'']"></view>
|
||||
<view :class="['icon-add rotate',small?'new-icon-add':'']"></view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
@ -44,7 +44,7 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
samll: {
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
@ -106,7 +106,7 @@
|
||||
if (height !== 'auto') {
|
||||
obj.width = this.value2px(height)
|
||||
} else {
|
||||
if (true == this.samll) {
|
||||
if (true == this.small) {
|
||||
obj.width = '25%'
|
||||
obj['padding-top'] = '25%'
|
||||
} else {
|
||||
@ -273,6 +273,10 @@
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.new-icon-add {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
|
||||
@ -465,7 +465,7 @@
|
||||
padding-bottom: 20rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 50rpx;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user