You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
494 lines
11 KiB
494 lines
11 KiB
<!--销售-个人资料-详情-->
|
|
<template>
|
|
<view class="main_box">
|
|
|
|
<view class="main_section">
|
|
<view class="section">
|
|
<view class="item">
|
|
<image
|
|
@click="changeAvatar()"
|
|
class="pic"
|
|
:src="$util.img(formData.header)"
|
|
></image>
|
|
|
|
<view class="btn" @click="changeAvatar()">修改头像</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<view class="item">
|
|
<view class="title">
|
|
姓名 <text class="required">*</text>
|
|
</view>
|
|
<view class="input">
|
|
<input v-model="formData.name" placeholder="请输入姓名" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title">
|
|
账号 <text class="required"></text>
|
|
</view>
|
|
<view class="input">
|
|
<input v-model="formData.username" disabled placeholder="暂无" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title">
|
|
部门 <text class="required"></text>
|
|
</view>
|
|
<view class="input">
|
|
<input disabled placeholder="暂无" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title">
|
|
等级 <text class="required"></text>
|
|
</view>
|
|
<view class="input">
|
|
<input v-model="formData.member_level_name" disabled placeholder="暂无" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<view class="item">
|
|
<view class="title">
|
|
性别 <text class="required">*</text>
|
|
</view>
|
|
<view class="input">
|
|
<input placeholder="请选择性别" v-model="formData.gender" @click="picker_show_sex=true"/>
|
|
<fui-picker
|
|
layer="1"
|
|
:linkage="true"
|
|
:options="options_sex_arr"
|
|
:show="picker_show_sex"
|
|
@change="changePickerSex"
|
|
@cancel="picker_sex_show=false"
|
|
></fui-picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title">
|
|
生日 <text class="required">*</text>
|
|
</view>
|
|
<view class="input">
|
|
<input placeholder="请选择生日" @click="picker_show_birthday=true" v-model="formData.birthday"/>
|
|
<fui-date-picker
|
|
:minDate="minDate"
|
|
:maxDate="maxDate"
|
|
:show="picker_show_birthday"
|
|
type="3"
|
|
@change="changePickerBirthday"
|
|
@cancel="picker_show_birthday=false"
|
|
></fui-date-picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title">
|
|
邮箱 <text class="required">*</text>
|
|
</view>
|
|
<view class="input">
|
|
<input v-model="formData.email" placeholder="请输入邮箱" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title">
|
|
手机 <text class="required">*</text>
|
|
</view>
|
|
<view class="input">
|
|
<input v-model="formData.phone" placeholder="请输入手机" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title">
|
|
微信 <text class="required"></text>
|
|
</view>
|
|
<view class="input">
|
|
<input v-model="formData.wx" placeholder="请输入微信" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="submet_btn" @click="submit">提交</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import marketApi from '@/api/market.js';
|
|
import {
|
|
Api_url
|
|
} from "@/common/config.js";
|
|
import AQTabber from "@/components/AQ/AQTabber"
|
|
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
formData:{
|
|
header:'',//头像地址
|
|
name:'',//姓名
|
|
username:'',//账号
|
|
address:'',//住址
|
|
gender:'',//性别|男,女
|
|
birthday:'',//生日
|
|
email:'',//邮箱
|
|
phone:'',//手机
|
|
wx:'',//微信号
|
|
},
|
|
|
|
userInfo: {},
|
|
|
|
//上传图片APi路径
|
|
uploadUrl: `${Api_url}/file/image`,
|
|
|
|
//性别选择器 相关
|
|
picker_show_sex: false,
|
|
sex_name:'请选择',
|
|
options_sex_arr: [
|
|
{
|
|
value: 1,
|
|
text: '男'
|
|
},
|
|
{
|
|
value: 2,
|
|
text: '女'
|
|
},
|
|
],
|
|
|
|
//生日选择器相关
|
|
minDate: '',
|
|
maxDate: '',
|
|
picker_show_birthday: false,
|
|
upload_type: 1,
|
|
uploadHeadimg: '',
|
|
editHeadimg: '',
|
|
}
|
|
},
|
|
onLoad() {
|
|
},
|
|
onShow() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
|
|
async init(){
|
|
// this.getBirthday()
|
|
this.setDateYear()
|
|
await this.getUserInfo()
|
|
},
|
|
|
|
//设置年份
|
|
setDateYear() {
|
|
let currentYear = new Date().getFullYear();
|
|
this.minDate = String(currentYear - 100);
|
|
this.maxDate = String(currentYear + 1);
|
|
},
|
|
|
|
//获取用户详情
|
|
async getUserInfo(){
|
|
let res = await marketApi.member({})
|
|
if (res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
//用户表单
|
|
this.formData = {
|
|
header: res.data.headimg,//头像地址
|
|
name: res.data.name,//姓名
|
|
username: res.data.username,//账号
|
|
address: res.data.address,//住址
|
|
gender: res.data.gender,//性别|男,女
|
|
birthday: res.data.birthday,//生日
|
|
email: res.data.email,//邮箱
|
|
phone: res.data.phone,//手机
|
|
wx: res.data.wx || '',//微信号
|
|
member_level_name: res.data.member_level_name || '',//等级名称
|
|
}
|
|
console.log(123,this.formData);
|
|
|
|
},
|
|
|
|
// 修改头像按钮
|
|
changeAvatar() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
const tempFilePath = res.tempFilePaths[0]
|
|
// 这里可以调用上传接口
|
|
this.uploadFilePromise(tempFilePath)
|
|
}
|
|
})
|
|
},
|
|
uploadFilePromise(url) {
|
|
let token = uni.getStorageSync('token') || ''
|
|
let a = uni.uploadFile({
|
|
url: this.uploadUrl, //仅为示例，非真实的接口地址
|
|
filePath: url,
|
|
name: 'file',
|
|
header: {
|
|
'token': `${token}`, //请求头设置token
|
|
},
|
|
success: (e) => {
|
|
let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}")
|
|
console.log('上传成功2', res)
|
|
if (res.code == 1) {
|
|
this.upload_type = 2
|
|
this.formData.header = res.data.path
|
|
// this.editHeadimg = res.data.path
|
|
// this.uploadHeadimg = res.data.url
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
});
|
|
},
|
|
//修改头像Api
|
|
async editPic(pic) {
|
|
let res = await salesmanApi.editPic({pic: pic})
|
|
if (res.code >= 0) {
|
|
this.$util.showToast({
|
|
title: '修改成功'
|
|
})
|
|
} else {
|
|
this.$util.showToast({
|
|
title: res.message
|
|
})
|
|
}
|
|
},
|
|
|
|
//性别选择相关
|
|
changePickerSex(e) {
|
|
console.log('监听选择', e)
|
|
this.formData.gender = e.text
|
|
this.picker_show_sex = false
|
|
},
|
|
|
|
//生日选择相关
|
|
//获取当前年月日+获取30年前的日期
|
|
getBirthday() {
|
|
let date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
let year_30 = year - 30;
|
|
let month_30 = month;
|
|
let day_30 = day;
|
|
if (month_30 == 2 && day_30 > 28) {
|
|
month_30 = 3;
|
|
day_30 = 1;
|
|
}
|
|
if (month_30 == 4 && day_30 > 30) {
|
|
month_30 = 5;
|
|
day_30 = 1;
|
|
}
|
|
if (month_30 == 6 && day_30 > 30) {
|
|
month_30 = 7;
|
|
day_30 = 1;
|
|
}
|
|
if (month_30 == 9 && day_30 > 30) {
|
|
month_30 = 10;
|
|
day_30 = 1;
|
|
}
|
|
if (month_30 == 11 && day_30 > 30) {
|
|
month_30 = 12;
|
|
day_30 = 1;
|
|
}
|
|
if (month_30 > 12) {
|
|
month_30 = month_30 - 12;
|
|
year_30 = year_30 + 1;
|
|
}
|
|
let minDate = year_30 + "-" + month_30 + "-" + day_30
|
|
let maxDate = year + "-" + month + "-" + day
|
|
this.minDate = minDate
|
|
this.maxDate = maxDate
|
|
},
|
|
|
|
//监听生日选择
|
|
changePickerBirthday(e) {
|
|
console.log('监听生日选择', e)
|
|
this.formData.birthday = e.result
|
|
this.picker_show_birthday = false
|
|
},
|
|
|
|
//提交信息
|
|
async submit() {
|
|
let data = {...this.formData}
|
|
|
|
if(!data.header){
|
|
uni.showToast({
|
|
title: '请上传头像',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(!data.name){
|
|
uni.showToast({
|
|
title: '请填写',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(!data.gender){
|
|
uni.showToast({
|
|
title: '请选择性别',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(!data.birthday){
|
|
uni.showToast({
|
|
title: '请选择生日',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(!data.email){
|
|
uni.showToast({
|
|
title: '请填写邮箱',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(!data.phone){
|
|
uni.showToast({
|
|
title: '请填写手机',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
let res = await marketApi.memberEdit(data)
|
|
if(res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success'
|
|
})
|
|
|
|
this.getUserInfo()
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.main_box{
|
|
background: #292929 ;
|
|
}
|
|
|
|
//自定义导航栏
|
|
.navbar_section{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #29d3b4;
|
|
.title{
|
|
padding: 40rpx 0rpx;
|
|
|
|
/* 小程序端样式 */
|
|
// #ifdef MP-WEIXIN
|
|
padding: 80rpx 0rpx;
|
|
// #endif
|
|
|
|
font-size: 30rpx;
|
|
color: #315d55;
|
|
}
|
|
}
|
|
|
|
.main_section{
|
|
min-height: 100vh;
|
|
background: #292929 100%;
|
|
padding: 0 0rpx;
|
|
padding-top: 32rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
|
|
.section{
|
|
background-color: #434544;
|
|
.item{
|
|
padding: 20rpx 40rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.pic{
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.btn{}
|
|
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
color: #D7D7D7;
|
|
.required{
|
|
margin-left: 10rpx;
|
|
color: red;
|
|
}
|
|
}
|
|
.input{
|
|
input{
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.submet_btn{
|
|
margin: 0 auto;
|
|
margin-top: 40rpx;
|
|
border: 2px solid #25a18b;
|
|
color: #25a18b;
|
|
width: 80%;
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|