260 lines
10 KiB
Vue
260 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'修改资料'" :whereCome="whereCome" :statusTitle="true"></status-nav>
|
||
<!-- 自定义二级分类 -->
|
||
<!-- 列表 -->
|
||
<view :style="{paddingTop: statusHNH+'px'}" class="fon28">
|
||
<view v-for="(itemd,indexd) in dataList" :key="indexd"
|
||
class="disjbac borbot mar-zy40" :class="(indexd!=1 && indexd!=5 && indexd!=6) ? 'pad-sx40':''">
|
||
<!-- 标题 -->
|
||
<view class="col9 flexs" style="width: 17.8%;">
|
||
<view v-if="indexd!=2 && indexd!=3 && indexd!=7">{{itemd.title}}:</view>
|
||
<!-- 恒美ID -->
|
||
<view v-if="indexd==2" class="disjb">
|
||
<view class="disjb width100">
|
||
<view>{{itemd.title.charAt(0)}}</view>
|
||
<view>{{itemd.title.charAt(1)}}</view>
|
||
<view>{{itemd.title.charAt(2)}}{{itemd.title.charAt(3)}}</view>
|
||
</view>
|
||
<view>:</view>
|
||
</view>
|
||
<!-- 性别、地址 -->
|
||
<view v-if="indexd==3 || indexd==7" class="disjb">
|
||
<view class="disjb width100">
|
||
<view>{{itemd.title.charAt(0)}}</view>
|
||
<view>{{itemd.title.charAt(1)}}</view>
|
||
</view>
|
||
<view>:</view>
|
||
</view>
|
||
</view>
|
||
<view class="disac fe width100 tright">
|
||
<!-- 内容 -->
|
||
<view v-if="itemd.content!='' && (indexd!=1 && indexd!=5 && indexd!=6)" :class="indexd==1?'nic':'col3'" class="mar-y20 width100" :style="{marginRight:indexd==2?'39rpx':''}">{{itemd.content}}</view>
|
||
<!-- 性别下拉弹框 -->
|
||
<picker v-if="indexd==3" class="col3 mar-y20 width100" @change="changePicker" :value="current" :range="pickerData">
|
||
<view>{{pickerData[current]}}</view>
|
||
</picker>
|
||
<!-- 出生日期下拉框 -->
|
||
<picker v-if="indexd==4" mode="date" class="col3 mar-y20 width100" @change="changeTime" :value="currentt" :range="pickerTime">
|
||
<view>{{pickerTime[currentt]}}</view>
|
||
</picker>
|
||
<!-- 地址下拉框 -->
|
||
<!-- <picker v-if="indexd==7" mode="multiSelector" class="col3 mar-y20 width100" @change="changeAddress" :value="currenta" :range="pickerAddress">
|
||
<view>{{pickerAddress[0]}}{{pickerAddress[1]}}{{pickerAddress[2]}}</view>
|
||
</picker> -->
|
||
<!-- <view v-if="indexd==7" @tap="openPicker" class="width100 mar-y20">{{region}}</view> -->
|
||
<view v-if="indexd==7" @tap="openAddres2" class="width100 mar-y20">{{pickerText}}</view>
|
||
<!-- 用户昵称、真实姓名、联系电话输入框 -->
|
||
<input @focus="inputFo(indexd)" @blur="inputB(indexd)" v-if="indexd==1 || indexd==5 || indexd==6" :type="(indexd==1 || indexd==5)?'text':'number'" :maxlength="indexd==6?11:10" v-model="itemd.content" class="mar-y20 tright pad-sx40 width100" style="border: none;" :placeholder="itemd.fcon"/>
|
||
<!-- 用户头像 -->
|
||
<image v-if="indexd==0" :src="itemd.imgSrc || moHead" :class="indexd==0?'head_img':'head_next'" class="" mode="aspectFill"></image>
|
||
<!-- <image @tap="chooseHead" v-if="itemd.imgSrc!=''" :src="itemd.imgSrc" :class="indexd==0?'head_img':'head_next'" class="" mode="aspectFill"></image> -->
|
||
<!-- 前进键 -->
|
||
<image v-if="indexd!=0 && indexd!=2" src="/static/public/nexth.png" class="head_next flexs"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" @tap="updataInfo" style="height: 90rpx;line-height: 90rpx;margin: 80rpx 100rpx 120rpx 100rpx;" class="radius20 fon40 bold colf tc" :style="{background:publicColor}">{{btnCon}}</view>
|
||
<!-- 底部弹框 -->
|
||
<!-- <city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city> -->
|
||
<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import city from '@/components/city/city.vue';
|
||
import simpleAddress from '@/components/simple-address/simple-address.vue';
|
||
export default {
|
||
components:{
|
||
// city,
|
||
simpleAddress
|
||
},
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
moHead:'/static/public/logo.png',
|
||
dataList:[
|
||
{title:'用户头像',content:'',imgSrc:'',fcon:''},
|
||
{title:'用户昵称',content:'',imgSrc:'',fcon:'请输入用户昵称'},
|
||
{title:'恒美ID',content:'',imgSrc:'',fcon:''},
|
||
{title:'性别',content:'',imgSrc:'',fcon:''},
|
||
{title:'出生日期',content:'',imgSrc:'',fcon:''},
|
||
{title:'真实姓名',content:'',imgSrc:'',fcon:'请输入真实姓名'},
|
||
{title:'联系电话',content:'',imgSrc:'',fcon:'请输入联系电话'},
|
||
{title:'地址',content:'',imgSrc:'',fcon:''},
|
||
],
|
||
isKuang:true,
|
||
current:0,
|
||
pickerData:['未知','男','女'],
|
||
currentt:0,
|
||
pickerTime:['1997-01-01'],
|
||
currenta:0,
|
||
// pickerAddress:['四川省 ','成都市 ','青羊区'],
|
||
// lotusAddressData:{
|
||
// visible:false,
|
||
// provinceName:'',
|
||
// cityName:'',
|
||
// townName:'',
|
||
// },
|
||
// region:'四川省成都市成华区',
|
||
cityPickerValueDefault: [0, 0, 1],
|
||
pickerText: '四川省成都市成华区',
|
||
btnCon:'保存',
|
||
uinfo:{},
|
||
addressInfo:[],
|
||
newProvice:'',//当前省份
|
||
newCity:'',//当前城市
|
||
newDistrict:'',//当前区县
|
||
whereCome:1
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if(options.whereNum==2){
|
||
this.whereCome = options.whereNum
|
||
}
|
||
let chuo = new Date().getTime()// 获取当前时间戳
|
||
let time = this.$toolAll.tools.timestampToTime(chuo)// 转换日期格式为XXXX-XX-XX
|
||
// 获取当前位置的经纬度
|
||
wx.getLocation({
|
||
success:(res)=> {
|
||
// 逆解析经纬度
|
||
this.getDistrict(res.latitude, res.longitude)
|
||
},
|
||
})
|
||
let obj = uni.getStorageSync('uinfo')
|
||
if(obj!='') this.uinfo = obj
|
||
this.dataList[0].imgSrc = obj.headimgurl//用户头像
|
||
this.dataList[1].content = obj.nickname//用户昵称
|
||
this.dataList[2].content = obj.coding//恒美ID
|
||
this.current = obj.gender//性别1男，2女,0未知
|
||
obj.birthday!='' ? this.pickerTime = [obj.birthday.slice(0,10)] : this.pickerTime = [time.slice(0,10)]//出生日期
|
||
obj.real_name!=null && obj.real_name !='' ? this.dataList[5].content = obj.real_name : this.dataList[5].fcon = '未知'//真实姓名
|
||
obj.mobile!='' ? this.dataList[6].content = obj.mobile : this.dataList[6].fcon = '未知'//电话
|
||
if(obj.county!='') this.pickerText = obj.province + obj.city + obj.county//省市区县
|
||
|
||
},
|
||
methods: {
|
||
updataInfo(){//修改资料事件
|
||
let params = {
|
||
real_name:this.dataList[5].content,//姓名
|
||
nickname:this.dataList[1].content,//昵称
|
||
mobile:this.dataList[6].content,//手机号
|
||
gender:this.current,//性别，0未知，1男，2女
|
||
province:this.addressInfo[0],//省份
|
||
city:this.addressInfo[1],//市
|
||
county:this.addressInfo[2],//区县
|
||
birthday:this.pickerTime[0]//生日（出生年月），日期格式：2021-08-10
|
||
}
|
||
this.$requst.post('user/edit-info',params).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('资料修改成功')
|
||
setTimeout(()=>{
|
||
uni.navigateBack({delta:1})
|
||
},1000)
|
||
}
|
||
},error=>{})
|
||
},
|
||
getDistrict(latitude, longitude) {//获取当前位置的省市区县
|
||
let ya = this
|
||
wx.request({
|
||
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
|
||
header: {
|
||
'Content-Type':'application/json'
|
||
},
|
||
success:function(res) {
|
||
// console.log('地址数据：',res)
|
||
ya.newProvice = res.data.result.address_component.province
|
||
ya.newCity = res.data.result.address_component.city
|
||
ya.newDistrict = res.data.result.address_component.district
|
||
if(ya.pickerText=='') ya.pickerText = ya.newProvice + ya.newCity + ya.newDistrict
|
||
}
|
||
})
|
||
},
|
||
openAddres2() {//地址弹框事件
|
||
// 根据 label 获取
|
||
var index = this.$refs.simpleAddress.queryIndex([this.newProvice, this.newCity, this.newDistrict], 'label');
|
||
this.cityPickerValueDefault = index.index;
|
||
this.$refs.simpleAddress.open();
|
||
},
|
||
onConfirm(e) {//地址确认事件
|
||
this.pickerText = e.labelArr[0]+e.labelArr[1]+e.labelArr[2];
|
||
this.addressInfo = [e.labelArr[0],e.labelArr[1],e.labelArr[2]]
|
||
},
|
||
chooseHead(){//选择头像事件
|
||
uni.chooseImage({
|
||
count:1,
|
||
success: (res) => {
|
||
this.dataList[0].imgSrc = res.tempFilePaths[0]
|
||
}
|
||
})
|
||
},
|
||
changePicker(e){//性别选择
|
||
this.current = e.detail.value
|
||
},
|
||
changeTime(e){//出生日期选择
|
||
this.pickerTime = [e.detail.value]
|
||
},
|
||
changeAddress(e){
|
||
|
||
},
|
||
inputFo(index){//输入框获取焦点
|
||
if(this.dataList[index].content!=''){
|
||
this.dataList[index].fcon = this.dataList[index].content//将当前输入框的实际值赋值给当前输入框的placeholder属性
|
||
this.dataList[index].content = ''//清空当前输入框的实际值
|
||
}
|
||
},
|
||
inputB(index){//输入框失去焦点
|
||
if(index==1){
|
||
if(this.dataList[1].content==''){
|
||
this.dataList[1].content = this.uinfo.nickname
|
||
}
|
||
}
|
||
if(index==5){
|
||
if(this.dataList[5].content==''){
|
||
this.dataList[5].content = this.uinfo.real_name
|
||
}
|
||
}
|
||
if(index==6){
|
||
if(this.dataList[6].content==''){
|
||
this.dataList[6].content = this.uinfo.mobile
|
||
}
|
||
}
|
||
}
|
||
//打开picker
|
||
// openPicker() {
|
||
// this.lotusAddressData.visible = true;
|
||
// this.lotusAddressData.provinceName = this.newProvice;
|
||
// this.lotusAddressData.cityName = this.newCity;
|
||
// this.lotusAddressData.townName = this.newDistrict;
|
||
// },
|
||
//回传已选的省市区的值
|
||
// choseValue(res){
|
||
// //res数据源包括已选省市区与省市区code
|
||
// // console.log(res);
|
||
// this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
|
||
// //res.isChose = 1省市区已选 res.isChose = 0;未选
|
||
// if(res.isChose){
|
||
// this.lotusAddressData.provinceName = res.province;//省
|
||
// this.lotusAddressData.cityName = res.city;//市
|
||
// this.lotusAddressData.townName = res.town;//区
|
||
// this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
|
||
// this.regionObj = {
|
||
// province:res.province,
|
||
// provinceCode:res.provinceCode,
|
||
// city:res.city,
|
||
// cityCode:res.cityCode,
|
||
// town:res.town,
|
||
// townCode:res.townCode
|
||
// }
|
||
// }
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page{background-color: #FFFFFF;}
|
||
</style>
|