mall_client/zyhs3_uniapp/pages/setting/personal.vue

646 lines
20 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="bg-w main">
<view class="con">
<view class="flex flex-between title">
<text class="font32 color-b3">头像照片</text>
<text class="font30 color-b9">须为本人真实头像</text>
</view>
<view class="flex flex-align-center">
<image :src="userInfo.headPortrait||avatar" mode="" class="avatar" @tap="selectImg"></image>
<view class="examine avatar" style="margin-left: 20rpx;" v-if="examineAvatar.status === 2 || examineAvatar.status === 4" @tap="showPhoto(examineAvatar.ossUrl)">
<image :src="examineAvatar.ossUrl" mode="" class="avatar"></image>
<text class="status color-red" v-if="examineAvatar.status === 2">违规</text>
<text class="status color-w" v-if="examineAvatar.status === 4">审核中</text>
<text class="iconfont icon" v-if="examineAvatar.violationInformation" @tap.stop="showMsg(examineAvatar.violationInformation)">&#xe659;</text>
</view>
</view>
<block>
<view class="flex flex-between title">
<text class="font32 color-b3">视频展示</text>
<text class="font30 color-b9">让美丽动起来</text>
</view>
<view class="video-wrap flex flex-center" v-if="!videoResources.ossTailoringUrl" @tap="chooseVideo">
<text class="iconfont icon">&#xe656;</text>
</view>
<view class="examine video-img" v-else @click="viewVideo">
<image :src="videoResources.ossTailoringUrl" class="video-img" mode=""></image>
<text class="status color-red" v-if="videoResources.status === 2">违规</text>
<text class="status color-w" v-if="videoResources.status === 4">审核中</text>
<text class="iconfont icon" v-if="videoResources.violationInformation">&#xe659;</text>
</view>
<view class="flex flex-between title">
<text class="font32 color-b3">封面照片</text>
<text class="font30 color-b9">本人照片 最多可添加五张</text>
</view>
<view class="flex flex-align-center" style="flex-wrap: wrap; width: 100%;">
<view class="pic flex flex-center examine" v-for="(item, i) in imgList" @tap="viewPhoto(item, i)">
<image :src="item.ossUrl" class="img" mode=""></image>
<text class="status color-red" v-if="item.status === 2">违规</text>
<text class="status color-w" v-if="item.status === 4">审核中</text>
<text class="iconfont icon" v-if="item.violationInformation">&#xe659;</text>
<text class="iconfont color-red del" @tap.stop="onDel(item, i)">&#xe638;</text>
</view>
<view class="pic flex flex-center" v-if="imgList.length < 5" @click="selectCoverPhoto">
<text class="iconfont icon">&#xe62d;</text>
</view>
</view>
</block>
<view class="flex flex-between title">
<text class="xian">———————————</text>
<text class="font32 color-b6">基本信息</text>
<text class="xian">———————————</text>
</view>
<view class="flex flex-between list" @tap="$navigateTo('updateMobile')">
<text class="font32 color-b3">手机号</text>
<view class="flex flex-align-center">
<text class="font28 color-b9">{{userInfo.mobile}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</view>
</view>
<view class="flex flex-between list">
<text class="font32 color-b3">昵称</text>
<view class="flex flex-align-center" @click="showPopup('popup')">
<text class="font28 color-b9">{{userInfo.nickname}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</view>
</view>
<view class="flex flex-between list">
<text class="font32 color-b3">身高cm</text>
<view class="flex flex-align-center" @click="showPopup('heightPopup')">
<text class="font28 color-b9">{{userInfo.height||"请输入"}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</view>
</view>
<view class="flex flex-between list">
<text class="font32 color-b3">体重kg</text>
<view class="flex flex-align-center" @click="showPopup('weightPopup')">
<text class="font28 color-b9">{{userInfo.weight||"请输入"}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</view>
</view>
<view class="flex flex-between list">
<text class="font32 color-b3">性别</text>
<picker class="flex flex-align-center" mode="selector" range-key="name" @change="bindGenderPickerChange" :value="genderIndex" :range="genderList">
<text class="font28 color-b9">{{genderList[genderIndex].name||'请选择'}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</picker>
</view>
<view class="flex flex-between list">
<text class="font32 color-b3">生日</text>
<view class="flex flex-align-center" @click="dateVisible = true">
<text class="font28 color-b9">{{userInfo.birthDate||"请选择"}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</view>
</view>
<view class="flex flex-between list">
<text class="font32 color-b3">学历</text>
<picker class="flex flex-align-center" mode="selector" range-key="name" @change="bindEducationPickerChange" :value="educationIndex" :range="educationList">
<text class="font28 color-b9">{{educationTxt||'请选择'}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</picker>
</view>
<view class="flex flex-between list" @click="regionVisible = true">
<text class="font32 color-b3">所在地区</text>
<view class="flex flex-align-center">
<text class="font28 color-b9">{{positionTxt||'请选择'}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</view>
</view>
<view class="flex flex-between list">
<text class="font32 color-b3">个性签名</text>
<view class="flex flex-align-center" @click="$navigateTo('signature?personalizedSignature='+userInfo.personalSignature)">
<text class="font28 color-b9 line" style="width: 450rpx; text-align: right;">{{userInfo.personalSignature||"未设置"}}</text>
<text class="iconfont font34 icon">&#xe770;</text>
</view>
</view>
<view class="flex flex-between title">
<text class="xian">———————————</text>
<text class="font32 color-b6">我的标签</text>
<text class="xian">———————————</text>
</view>
<view class="cell" v-if="labelPastOccupationList.length > 0">
<view class="item" v-for="(item, i) in labelPastOccupationList" :key="i">{{item}}</view>
</view>
<view class="flex flex-between list" @click="$navigateTo('hobby?labels='+JSON.stringify(labels))">
<text class="font32 color-b3">兴趣爱好</text>
<view class="flex flex-align-center">
<text class="font28 color-b9" v-if="!userInfo.labelHobby">请选择</text>
<text class="iconfont font34 icon">&#xe770;</text>
</view>
</view>
<view class="cell" v-if="labelHobbyList.length > 0">
<view class="item" v-for="(item, i) in labelHobbyList" :key="i">{{item}}</view>
</view>
</view>
<!-- 修改昵称 -->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog
mode="input"
title="修改昵称"
placeholder="请输入昵称"
:value="nickname"
@close="close('popup')"
@confirm="confirm">
</uni-popup-dialog>
</uni-popup>
<!-- 修改身高 -->
<uni-popup ref="heightPopup" type="dialog">
<uni-popup-dialog
mode="input"
title="修改身高"
placeholder="请输入身高"
:value="height"
@close="close('heightPopup')"
@confirm="heightConfirm">
</uni-popup-dialog>
</uni-popup>
<!-- 修改体重 -->
<uni-popup ref="weightPopup" type="dialog">
<uni-popup-dialog
mode="input"
title="修改体重"
placeholder="请输入体重"
:value="weight"
@close="close('weightPopup')"
@confirm="weightConfirm">
</uni-popup-dialog>
</uni-popup>
<!-- 出生年月 -->
<w-picker
:visible.sync="dateVisible"
mode="date"
:value="userInfo.birthDate"
:current="false"
fields="day"
@confirm="dateConfirm($event)"
@cancel="dateVisible=false"
:disabled-after="false"
themeColor="#3a2397"
ref="date"
></w-picker>
<!-- 地区 -->
<w-picker
:visible.sync="regionVisible"
ref="region"
mode="region"
:value="positionValue"
themeColor="#3a2397"
@confirm="regionConfirm"
></w-picker>
<avatar @upload="myUpload" ref="avatar"></avatar>
</view>
</template>
<script>
import { mapMutations } from "vuex"
import wPicker from "@/components/w-picker/w-picker.vue"
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import uniPopup from "@/components/uni-popup/uni-popup.vue"
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue"
import url from "@/common/http/url.js"
import selectOptions from "@/common/utils/selectOptions.js"
import upload from "@/common/http/upload.js"
import { getAstro, getAge, timestampToTime } from "@/common/utils/index.js"
import publics from "@/common/utils/public.js"
export default{
components: { wPicker, avatar, uniPopup, uniPopupDialog },
data(){
return {
avatar: this.$staticUrl + 'user/avatar.png',
dateVisible: false,
regionVisible: false,
userInfo: {},
examineAvatar: {},
nickname: "",
weight: "",
height: "",
positionTxt: "",
positionValue: [],
educationList: selectOptions.educationList,
educationIndex: 0,
educationTxt: "",
genderList: [
{name: "请设置", value: 1},
...selectOptions.genderList
],
genderIndex: 0,
imgList: [],
applicationType: 0,
videoObj: {},
videoResources: {},
labels: [],
labelHobbyList: [],
labelPastOccupationList: [],
}
},
onBackPress(e) {
// if (e.from !== 'navigateBack') {
// if ((!this.userInfo.headPortrait && !this.examineAvatar.ossUrl) || !this.userInfo.birthDate || !this.userInfo.gender || !this.userInfo.nickname) {
// this.$showModal("请检查您的头像、昵称、生日、性别信息是否已完善,未完善点击返回则退出登录,是否确认退出登录?", "提示", res =>{
// if (res.confirm) {
// // uni.navigateBack()
// }
// })
// }
// } else {
// return false
// }
// return true
// if ((!this.userInfo.headPortrait && !this.examineAvatar.ossUrl) || !this.userInfo.birthDate || !this.userInfo.gender || !this.userInfo.nickname) {
// this.$showModal("请检查您的头像、昵称、生日、性别信息是否已完善,未完善点击返回则退出登录,是否确认退出登录?", "提示", res =>{
// if (res.confirm) {
// this.logout()
// }
// })
// return true
// } else {
// return false
// }
return false;
},
onShow() {
this.getInfo()
this.$http("GET", url.user.getLabels).then(res =>{
this.labels = res.data
})
},
methods:{
...mapMutations(["logout"]),
getInfo(){
this.imgList = []
this.$http("GET", url.user.getUserInfoBasic).then(res =>{
this.userInfo = res.data
if (this.userInfo.birthDate) {
this.userInfo.birthDate = this.userInfo.birthDate.split(" ")[0]
}
if (res.data.userResources.length > 0){
res.data.userResources.forEach(v=>{
if (v.type === 0 && v.status === 4){
this.examineAvatar = v
}
if (v.type === 1){
this.imgList.push(v)
}
if (v.type === 2) {
this.videoResources = v
}
})
}
if (res.data.education){
this.educationIndex = res.data.education-1
this.educationTxt = this.educationList[this.educationIndex].name
}
if (res.data.gender){
// this.genderIndex = res.data.gender - 2
this.genderList.forEach((v, i) => {
if (v.value === res.data.gender){
this.genderIndex = i
return false
}
})
}
let addrObj = publics.getLngAndLatByCode(res.data.adcode)
if (addrObj){
this.positionTxt = ""
addrObj.map(v=>{
this.positionTxt = this.positionTxt + v.name
this.positionValue.push(v.name)
})
}
if (res.data.labelHobby) {
this.labelHobbyList = res.data.labelHobby.split("-")
}
if (res.data.labelPastOccupation) {
this.labelPastOccupationList = res.data.labelPastOccupation.split("-")
}
})
},
showPopup(name){
this.nickname = this.userInfo.nickname
this.weight = this.userInfo.weight
this.height = this.userInfo.height
this.$refs[name].open()
},
close(){
this.$refs.popup.close()
},
// 修改昵称
confirm(done,value){
if (!value) return
this.$http("POST", url.user.editUserInfo, {nickname: value}).then(res =>{
this.userInfo.nickname = value
done()
})
},
// 修改身高
heightConfirm(done,value){
if (!value) return
this.$http("POST", url.user.editUserInfo, {height: value}).then(res =>{
this.userInfo.height = value
done()
})
},
// 修改体重
weightConfirm(done,value){
if (!value) return
this.$http("POST", url.user.editUserInfo, {weight: value}).then(res =>{
this.userInfo.weight = value
done()
})
},
// 修改地区
regionConfirm(e){
let adcode = e.value[e.value.length - 1]
this.positionTxt = e.result
this.$http("POST", url.user.editUserInfo, {adcode:adcode}).then(res =>{
this.userInfo.birthDate = value
})
},
// 修改出生年月
dateConfirm(e) {
let value = e.value
let valueSplit = value.split("-")
let params = {
birthDate: value
}
this.$http("POST", url.user.editUserInfo, params).then(res =>{
this.userInfo.birthDate = value
})
},
// 修改性别
bindGenderPickerChange(e){
this.genderIndex = e.detail.value
this.$http("POST", url.user.editUserInfo, {
gender: this.genderList[e.detail.value].value
})
},
// 修改学历
bindEducationPickerChange(e){
this.educationIndex = e.detail.value
this.educationTxt = this.educationList[e.detail.value].name
this.$http("POST", url.user.editUserInfo, {
education: this.educationList[e.detail.value].value
})
},
showPhoto(url){
uni.previewImage({
current: url,
urls: [url]
})
},
viewPhoto(row, i){
let _this = this
let urls = []
this.imgList.map(v =>{
urls.push(v.ossUrl)
})
uni.previewImage({
current: i,
urls: urls
})
},
onDel(row, i){
this.$http("POST", url.common.delResources, {id: row.id}).then(res =>{
this.imgList.splice(i, 1)
this.$forceUpdate()
})
},
viewVideo(){
let _this = this
uni.showActionSheet({
itemList: ["选择视频", "查看视频", "删除视频"],
success(res) {
if (res.tapIndex === 0) {
_this.chooseVideo()
} else if (res.tapIndex === 1) {
_this.$navigateTo("video")
} else {
_this.$http("POST", url.common.delResources, {id: _this.videoResources.id}).then(res =>{
_this.videoResources = {}
_this.$forceUpdate()
})
}
}
})
},
showMsg(msg){
this.$msg(msg)
},
// 选择头像
selectImg(){
uni.showModal({
title: '提示',
content: '是否允许打开您的相册和照相机功能,用于上传头像?',
cancelText: '取消',
confirmText: '确定',
success: (res) => {
if (res.confirm) {
this.applicationType = 0
upload.showAvatarModal(this, 300, 300)
}else if (res.cancel) {
console.log('用户点击取消');
}
}
})
},
// 选择封面
selectCoverPhoto(){
uni.showModal({
title: '提示',
content: '是否允许打开您的相册和照相机功能,用于上传封面图片?',
cancelText: '取消',
confirmText: '确定',
success: (res) => {
if (res.confirm) {
this.applicationType = 1
upload.showAvatarModal(this, 700, 600)
}else if (res.cancel) {
console.log('用户点击取消');
}
}
})
},
// 选择视频
chooseVideo(){
uni.showModal({
title: '提示',
content: '是否允许打开您的相册和照相机功能,用于上传视频展示?',
cancelText: '取消',
confirmText: '确定',
success: (res) => {
if (res.confirm) {
let _this = this
this.applicationType = 2
uni.chooseVideo({
count: 1,
sourceType: ['camera', 'album'],
compressed: false,
success: function (res) {
_this.videoObj = res
let rsp = {path: res.tempFilePath}
_this.myUpload(rsp)
}
});
}else if (res.cancel) {
console.log('用户点击取消');
}
}
})
},
myUpload(rsp) {
let _this = this
upload.getOssSignature(rsp.path, this.applicationType, 1).then(data=>{
upload.uploadImageOss(data).then(list=>{
let successCallBackParamsList = [{
resourceTemporaryUUID: list[0].resourceTemporaryUUID
}]
if (this.applicationType===0){ // 头像
this.examineAvatar = {
ossUrl: list[0].url,
status: 4
}
// } else if(this.applicationType===2) { // 视频
// successCallBackParamsList[0].size = this.videoObj.size
// successCallBackParamsList[0].ossWidth = this.videoObj.width
// successCallBackParamsList[0].ossHeight = this.videoObj.height
// successCallBackParamsList[0].ossTime = this.videoObj.duration
// this.videoResources = {
// ossUrl: list[0].url,
// ossTailoringUrl: list[0].ossTailoringUrl,
// status: 4
// }
}
successCallBackParamsList = JSON.stringify(successCallBackParamsList)
this.$http("POST", url.user.editUserInfo, {successCallBackParamList:successCallBackParamsList}).then(e =>{
if (this.applicationType!==0){
this.getInfo()
}
})
})
})
}
}
}
</script>
<style scoped lang="scss">
.main{
min-height: 100vh;
.con{
padding: 50rpx 30rpx 0rpx 30rpx;
.title{
width: 100%;
margin: 30rpx 0;
.xian{
font-size: 24rpx;
color: #ebeaed;
display: inline-block;
}
}
.avatar{
width: 140rpx;
height: 140rpx;
// border-radius: 50%;
border-radius: 10rpx;
overflow: hidden;
}
.examine{
position: relative;
display: block;
.status{
width: 100%;
background-color: rgba($color: #000000, $alpha: .5);
font-size: 24rpx;
height: 34rpx;
text-align: center;
display: inline-block;
line-height: 34rpx;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.icon{
color: #ddd;
position: absolute;
right: 0;
top: 0;
font-size: 34rpx;
}
}
.video-wrap{
border: 2rpx dotted #999999;
width: 140rpx;
height: 140rpx;
border-radius: 10rpx;
.icon{
font-size: 70rpx;
color: #b8b7b9;
}
}
.video-img{
border-radius: 10rpx;
width: 250rpx;
height: 320rpx;
overflow: hidden;
}
.pic{
border: 2rpx dotted #999999;
width: 140rpx;
height: 140rpx;
border-radius: 10rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
position: relative;
.icon{
font-size: 70rpx;
color: #b8b7b9;
}
.img{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.del{
position: absolute;
top: -20rpx;
right: -20rpx;
font-size: 40rpx;
}
}
.list{
margin-bottom: 50rpx;
.icon{
margin-left: 10rpx;
color: #999999;
}
}
.cell{
display: flex;
align-items: center;
flex-wrap: wrap;
// margin-bottom: 20rpx;
margin-top: -30rpx;
.item{
border-radius: 50rpx;
font-size: 26rpx;
background-color: rgba($color: #F8D247, $alpha: .3);
color: #F8D247;
margin-right: 30rpx;
margin-bottom: 30rpx;
padding: 16rpx 30rpx;
}
}
}
}
</style>