hengmei-two/pagesA/nodifyData/nodifyData.vue

283 lines
11 KiB
Vue
Raw Normal View History

2021-08-19 06:40:59 +00:00
<template>
2021-08-26 09:57:04 +00:00
<view>
2021-08-19 06:40:59 +00:00
<!-- 状态栏 -->
2021-08-19 09:27:37 +00:00
<status-nav :titleVal="'修改资料'" :whereCome="whereCome" :statusTitle="true"></status-nav>
2021-08-19 06:40:59 +00:00
<!-- 自定义二级分类 -->
<!-- 列表 -->
2021-08-26 09:57:04 +00:00
<view :style="{paddingTop: statusHNH+'px'}" class="fon28 pad-x20">
2021-08-19 06:40:59 +00:00
<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" :disabled="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"/>
2021-08-19 06:40:59 +00:00
<!-- 用户头像 -->
<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>
2021-08-26 09:57:04 +00:00
<!-- 底部客服 -->
<public-customer :nbottom="100"></public-customer>
2021-08-19 06:40:59 +00:00
</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 {
2022-03-04 08:48:40 +00:00
statusHNH:uni.getStorageSync('electric_nav_height'),
2021-08-19 06:40:59 +00:00
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:'',//当前城市
2021-08-19 09:27:37 +00:00
newDistrict:'',//当前区县
2021-08-26 01:50:19 +00:00
whereCome:0,
2021-08-19 06:40:59 +00:00
}
},
2021-08-22 08:53:12 +00:00
onShow() {
// 禁用小程序分享
this.$toolAll.tools.disableShareEv();
2021-08-22 08:53:12 +00:00
this.$toolAll.tools.isLogin()
},
onUnload() {
uni.removeStorageSync('firstInfo')
},
2021-08-19 09:27:37 +00:00
onLoad(options) {
if(options.whereNum==2){
this.whereCome = options.whereNum
}
2021-08-19 06:40:59 +00:00
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)
},
})
2021-08-22 08:53:12 +00:00
let firstObj = uni.getStorageSync('firstInfo')
if(firstObj==''){
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//省市区县
} else {
this.dataList[0].imgSrc = firstObj.headimgurl//用户头像
this.dataList[1].content = firstObj.nickname//用户昵称
2021-08-26 01:50:19 +00:00
this.dataList[2].content = firstObj.coding//恒美ID
2021-08-22 08:53:12 +00:00
this.current = firstObj.gender//性别1男2女,0未知
}
2021-08-19 06:40:59 +00:00
},
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(()=>{
if(this.whereCome==2){
uni.navigateTo({
url:'/pages/tabbar/my/my'
})
} else {
uni.navigateBack({delta:1})
}
2021-08-19 06:40:59 +00:00
},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>