<template>
|
<view class="person-msg">
|
<view class="head c-content">
|
<image v-if="form.face" :src="endpoint + '/' + form.face" mode=""></image>
|
<image v-else :src="'/pages/subComponents/static/missing-face.png'" mode=""></image>
|
<button class="avatar-button" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">点击修改头像</button>
|
</view>
|
<u-form :model="form" ref="uForm" class="form">
|
<u-form-item label="昵称" label-width="150">
|
<u-input v-model="form.nickName" placeholder="请输入昵称" type="nickname"/>
|
|
</u-form-item>
|
|
<u-form-item label="性别" label-width="150">
|
<u-radio-group v-model="form.sex" :active-color="lightColor">
|
<u-radio name="1">男</u-radio>
|
<u-radio name="0">女</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
|
<u-form-item label="生日" label-width="150" right-icon="arrow-right">
|
<div style="width: 100%;" @click="showBirthday = true">{{ birthday || '请选择出生日期' }}</div>
|
<u-picker v-model="showBirthday" mode="time" :confirm-color="lightColor"
|
@confirm="selectTime"></u-picker>
|
</u-form-item>
|
<u-form-item label="城市" label-width="150" placeholder="请选择城市" right-icon="arrow-right">
|
<div style="width: 100%;" @click="clickRegion">{{ form.___path || '请选择城市' }}</div>
|
</u-form-item>
|
|
<u-form-item label="手机号" label-width="150">
|
<view v-if="form.mobile">
|
{{form.mobile}}
|
</view>
|
<view v-else>
|
<view class="submit" @click="navigateTo(form.username)">绑定手机号码</view>
|
</view>
|
</u-form-item>
|
<u-form-item label="我的标签" label-width="150">
|
|
<view class="tags-container">
|
<view v-for="(tag, index) in memberTags" :key="index"
|
:class="tag.tagName.length >=5 ? 'longTag' : 'tag'" @click="toggleTag(tag)">
|
{{tag.tagName}}
|
<u-icon name="close" size="16" class="delete-icon" @click.stop="removeTag(tag)"></u-icon>
|
</view>
|
<view class="add-tag" @click="showAddTagDialog">
|
<u-icon name="plus" size="24"></u-icon> 自定义
|
</view>
|
</view>
|
</u-form-item>
|
|
</u-form>
|
<div class="bottom">
|
<view class="submit" @click="submit">保存</view>
|
<view class="submit light" @click="quiteLoginOut">退出登录</view>
|
</div>
|
<m-city :provinceData="region" headTitle="区域选择" ref="cityPicker" @funcValue="getPickerParentValue"
|
pickerSize="4"></m-city>
|
</view>
|
</template>
|
<script>
|
import '@/components/uview-components/uview-ui';
|
import {
|
getSTSToken
|
} from "@/api/common.js";
|
import {
|
saveUserInfo,
|
getUserInfo
|
} from "@/api/members.js";
|
import {
|
upload
|
} from "@/api/common.js";
|
import {
|
getFileKey
|
} from "@/utils/file.js";
|
import storage from "@/utils/storage.js";
|
import city from "@/pages/mine/set/m-city/m-city.vue";
|
import {
|
getMemberTag,
|
addTag,
|
removeTag
|
} from "@/api/memberCustomerTag.js"
|
export default {
|
components: {
|
"m-city": city
|
},
|
data() {
|
return {
|
memberTags: null,
|
cosClient: null,
|
bucket: '',
|
region: '',
|
endpoint: '',
|
lightColor: this.$lightColor, //高亮颜色
|
form: {
|
nickName: storage.getUserInfo().nickName || "",
|
birthday: storage.getUserInfo().birthday || "",
|
face: storage.getUserInfo().face, //默认头像
|
regionId: [], //地址Id
|
region: storage.getUserInfo().region || [], //地址
|
sex: storage.getUserInfo().sex, //性别
|
___path: storage.getUserInfo().region,
|
mobile: storage.getUserInfo().mobile,
|
username: storage.getUserInfo().username,
|
},
|
birthday: storage.getUserInfo().birthday || "", //生日
|
photo: [{
|
text: "立即拍照",
|
color: this.$mainColor
|
},
|
{
|
text: "从相册选择",
|
color: this.$mainColor
|
},
|
],
|
region: [
|
//请求城市默认地址
|
{
|
id: "",
|
localName: "请选择",
|
children: [],
|
},
|
],
|
showBirthday: false, //显示生日日期
|
};
|
},
|
onLoad() {
|
this.initCOS()
|
this.getMemberTag()
|
},
|
methods: {
|
|
toggleTag(tag) {
|
console.log(tag)
|
},
|
addTag(content) {
|
const form = {
|
tagName: content,
|
}
|
addTag(form).then(res => {
|
if (res.statusCode === 200) {
|
if(res.data.code !==200){
|
uni.showToast({
|
title: res.data.msg,
|
icon: 'none'
|
});
|
return
|
}
|
this.getMemberTag()
|
}
|
})
|
},
|
removeTag(tag) {
|
removeTag(tag.id).then(res => {
|
if (res.statusCode === 200) {
|
if(res.data.code !==200){
|
uni.showToast({
|
title: res.data.msg,
|
icon: 'none'
|
});
|
return
|
}
|
this.getMemberTag()
|
}
|
})
|
},
|
getMemberTag() {
|
uni.showLoading({
|
title: '加载中',
|
mask: true
|
});
|
getMemberTag().then(res => {
|
uni.hideLoading();
|
if (res.statusCode === 200) {
|
if(res.data.code !== 200){
|
uni.showToast({
|
title: res.data.msg,
|
icon: 'none'
|
});
|
return
|
}
|
this.memberTags = res.data.data
|
|
}
|
})
|
},
|
showAddTagDialog() {
|
uni.showModal({
|
title: '添加自定义标签',
|
editable: true,
|
placeholderText: '请输入标签内容（最多8个字）',
|
success: (res) => {
|
if (res.confirm) {
|
if (!res.content) {
|
uni.showToast({
|
title: '标签内容不能为空',
|
icon: 'none'
|
});
|
return;
|
}
|
|
if (res.content.length > 8) {
|
uni.showToast({
|
title: '标签长度不能超过8个字',
|
icon: 'none'
|
});
|
return;
|
}
|
this.addTag(res.content)
|
}
|
}
|
});
|
},
|
// 初始化腾讯云cos客户端
|
initCOS() {
|
// 调用后端获取sts临时访问凭证
|
getSTSToken().then(res => {
|
const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
|
// const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 上线时使用压缩包
|
|
// console.log(COS.version); sdk 版本需要不低于 1.7.2
|
this.cosClient = new COS({
|
SecretId: res.data.data.tmpSecretId, // sts 服务下发的临时 secretId
|
SecretKey: res.data.data.tmpSecretKey, // sts 服务下发的临时 secretKey
|
SecurityToken: res.data.data.sessionToken, // sts 服务下发的临时 SessionToken
|
StartTime: res.data.data.stsStartTime, // 建议传入服务端时间，可避免客户端时间不准导致的签名错误
|
ExpiredTime: res.data.data.stsEndTime, // 临时密钥过期时间
|
SimpleUploadMethod: 'putObject', // 强烈建议，高级上传、批量上传内部对小文件做简单上传时使用 putObject,sdk 版本至少需要v1.3.0
|
});
|
this.bucket = res.data.data.bucket
|
this.region = res.data.data.region
|
this.endpoint = res.data.data.endpoint
|
})
|
},
|
/**
|
* 退出登录
|
*/
|
quiteLoginOut() {
|
this.$options.filters.quiteLoginOut();
|
},
|
|
/**
|
* 选择地址回调
|
*/
|
getPickerParentValue(e) {
|
this.form.region = [];
|
this.form.regionId = [];
|
let name = "";
|
|
e.forEach((item, index) => {
|
if (item.id) {
|
this.form.region.push(item.localName);
|
this.form.regionId.push(item.id);
|
if (index == e.length - 1) {
|
name += item.localName;
|
} else {
|
name += item.localName + ",";
|
}
|
this.form.___path = name;
|
}
|
});
|
},
|
|
/**
|
* 点击选择地址
|
*/
|
clickRegion() {
|
this.$refs.cityPicker.show();
|
},
|
|
/**
|
* 提交保存
|
*/
|
submit() {
|
delete this.form.___path;
|
let params = JSON.parse(JSON.stringify(this.form));
|
saveUserInfo(params).then((res) => {
|
if (res.statusCode == 200) {
|
storage.setUserInfo(res.data.result);
|
uni.navigateBack();
|
}
|
});
|
},
|
/**
|
* 修改头像
|
* @param {Object} e
|
*/
|
onChooseAvatar(e){
|
console.log(e.detail.avatarUrl)
|
console.log("")
|
console.log(e.detail)
|
const tempFilePath = e.detail.avatarUrl;
|
let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
|
if (fileName.indexOf('%') > -1) {
|
fileName = decodeURIComponent(fileName);
|
}
|
const fileKey = getFileKey(fileName);
|
this.cosClient.uploadFile({
|
Bucket: this.bucket,
|
Region: this.region,
|
Key: fileKey,
|
FilePath: tempFilePath,
|
SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */
|
}, (err, data) => {
|
if (err) {
|
console.log('上传失败', err);
|
} else {
|
this.form.face = fileKey;
|
}
|
});
|
},
|
/**
|
* 修改头像
|
*/
|
// changeFace(index) {
|
// uni.chooseImage({
|
// count: 1,
|
// sizeType: ['compressed'],
|
// sourceType: ['album'],
|
// success: (chooseImageRes) => {
|
|
// const tempFilePath = chooseImageRes.tempFilePaths[0];
|
// let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
|
// // 处理安卓可能的URI编码
|
// if (fileName.indexOf('%') > -1) {
|
// fileName = decodeURIComponent(fileName);
|
// }
|
// const fileKey = getFileKey(fileName);
|
// this.cosClient.uploadFile({
|
// Bucket: this.bucket,
|
// Region: this.region,
|
// Key: fileKey,
|
// FilePath: tempFilePath,
|
// SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */
|
// }, (err, data) => {
|
// if (err) {
|
// console.log('上传失败', err);
|
// } else {
|
// this.form.face = fileKey;
|
// }
|
// });
|
// },
|
// });
|
// },
|
|
/**
|
* 选择地址
|
*/
|
selectRegion(region) {
|
this.$set(
|
this.form,
|
"address",
|
`${region.province.label} ${region.city.label} ${region.area.label}`
|
);
|
},
|
|
/**
|
* 选择时间
|
*/
|
selectTime(time) {
|
this.form.birthday = `${time.year}-${time.month}-${time.day}`;
|
this.birthday = `${time.year} - ${time.month} - ${time.day}`;
|
},
|
|
navigateTo(username) {
|
uni.navigateTo({
|
url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
|
});
|
},
|
}
|
|
};
|
</script>
|
<style>
|
page {
|
background: #fff;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.submit {
|
height: 90rpx;
|
line-height: 90rpx;
|
text-align: center;
|
margin-top: 90rpx;
|
|
width: 100%;
|
margin: 0 auto;
|
color: $main-color;
|
border-radius: 100px;
|
}
|
|
.head {
|
height: 260rpx;
|
color: $font-color-light;
|
font-size: $font-sm;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
line-height: 2em;
|
|
image {
|
width: 144rpx;
|
height: 144rpx;
|
border-radius: 50%;
|
}
|
}
|
|
/deep/ .u-form {
|
background-color: #ffffff;
|
padding: 0;
|
margin-top: 30rpx;
|
|
.u-form-item {
|
padding: 0 20rpx;
|
height: 110rpx;
|
line-height: 110rpx;
|
}
|
}
|
|
.form {
|
background-color: #ffffff;
|
}
|
|
.bottom {
|
position: fixed;
|
bottom: 40px;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
|
>.submit {
|
background: $light-color;
|
color: #fff;
|
width: 40%;
|
}
|
|
}
|
|
.light {
|
background: rgba($color: $light-color, $alpha: 0.2) !important;
|
color: $light-color !important;
|
}
|
|
/**
|
* 标签位置样式
|
*/
|
.tags-container {
|
display: flex;
|
flex-flow: row wrap;
|
/* 保持宽度且换行 */
|
gap: 12rpx;
|
/* 标签间距 */
|
padding: 10rpx 0;
|
width: 100%;
|
/* 确保容器宽度填满 */
|
|
}
|
|
/* 标签基础样式 */
|
.tag,
|
.add-tag {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
height: 60rpx;
|
line-height: 60rpx;
|
border-radius: 30rpx;
|
font-size: 26rpx;
|
padding: 0 24rpx;
|
white-space: nowrap;
|
margin-right: 12rpx;
|
margin-bottom: 12rpx;
|
flex-shrink: 0;
|
/* 禁止压缩 */
|
}
|
|
/* 普通标签样式 */
|
.tag {
|
background-color: #f5f5f5;
|
color: #666;
|
position: relative;
|
padding-right: 48rpx;
|
/* 为删除图标留空间 */
|
}
|
|
.longTag {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
height: 60rpx;
|
line-height: 60rpx;
|
border-radius: 30rpx;
|
font-size: 26rpx;
|
padding: 0 24rpx;
|
white-space: nowrap;
|
margin-right: 12rpx;
|
margin-bottom: 12rpx;
|
flex-shrink: 0;
|
/* 禁止压缩 */
|
width: 300rpx;
|
background-color: #f5f5f5;
|
color: #666;
|
position: relative;
|
padding-right: 48rpx;
|
/* 为删除图标留空间 */
|
}
|
|
/* 添加标签按钮样式 */
|
.add-tag {
|
border: 1px dashed #ccc;
|
color: #999;
|
}
|
|
/* 删除按钮 */
|
.delete-icon {
|
position: absolute;
|
right: 12rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 24rpx;
|
height: 24rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 50%;
|
background: rgba(0, 0, 0, 0.1);
|
color: #999;
|
font-size: 24rpx;
|
}
|
.avatar-button {
|
background: transparent;
|
color: $font-color-light;
|
font-size: $font-sm;
|
line-height: 2em;
|
margin: 0;
|
padding: 0;
|
border: none;
|
&::after {
|
border: none;
|
}
|
}
|
</style>
|
