<template>
<section class="user-info ">
<Header :title="title" :historyb="historyb" @toSomeThing="toSomeThingGo"></Header>
<div v-if="!isEdit" class="info-box ">
<div class="group-info">
<div class="group-left">联系人</div>
<div class="group-right" v-if="userInfo.user_info">
<input type="text" :value="userInfo.user_info.nike_name" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">性别</div>
<div class="group-right" v-if="userInfo.user_info">
<input type="text" :value="userInfo.user_info.sex==2?'女':'男'" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">手机号</div>
<div class="group-right" v-if="userInfo.user_info">
<input type="text" :value="userInfo.user_info.mobile" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">邮箱</div>
<div class="group-right" v-if="userInfo.user_info">
<input type="text" :value="userInfo.user_info.email" readonly placeholder="请登录PC端修改邮箱"/>
</div>
</div>
<div class="group-info">
<div class="group-left">公司名称</div>
<div class="group-right" v-if="userInfo.company_info">
<input type="text" :value="userInfo.company_info.com_name" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">公司类型</div>
<div class="group-right" v-if="userInfo.company_info">
<input type="text" :value="userInfo.company_info.type_name" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">公司座机</div>
<div class="group-right" v-if="userInfo.company_info">
<input type="text" :value="userInfo.company_info.com_telphone" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">公司简介</div>
<div class="group-right" v-if="userInfo.company_info">
<input type="text" :value="userInfo.company_info.com_desc" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">公司地址</div>
<div class="group-right" v-if="userInfo.company_info">
<input type="text" :value="(userInfo.company_info.province_name+userInfo.company_info.city_name+userInfo.company_info.area_name)||''" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">详细地址</div>
<div class="group-right" v-if="userInfo.company_info">
<input type="text" :value="userInfo.company_info.com_address" readonly />
</div>
</div>
<div class="tips">
<font class="f-red">*</font>
每完善一项基本信息，可以获得40个积分哦！
</div>
<div class="btnsub">
<span class="btnnext" @click="editUi">编辑信息</span>
</div>
</div>
<transition name="slide-right">
<div v-if="isEdit" class="info-edit Router">
<div class="group-info">
<div class="group-left">联系人</div>
<div class="group-right" >
<input type="text" v-model="xlxr" />
</div>
</div>
<div class="group-info">
<div class="group-left">性别</div>
<div class="group-right" @click="actShow=!actShow" readonly>
<input type="text" :value="xxb" />
</div>
</div>
<div class="group-info">
<div class="group-left">手机号</div>
<div class="group-right">
<input type="text" v-model="xsj" onkeyup="if(event.keyCode !=37 && event.keyCode != 39){if (!/^[\d]+$/ig.test(this.value)){this.value='';}}" />
</div>
</div>
<div class="group-info">
<div class="group-left">邮箱</div>
<div class="group-right">
<input type="text" v-model="xyx" placeholder="请登录PC端修改邮箱" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">公司名称</div>
<div class="group-right">
<input type="text" v-model="xgsmc">
</div>
</div>
<div class="group-info">
<div class="group-left">公司类型</div>
<div class="group-right">
<input type="text" :value="xgslx" @click="actShow1=!actShow1" readonly />
</div>
</div>
<div class="group-info">
<div class="group-left">公司座机</div>
<div class="group-right">
<input type="text" v-model="xgszj">
</div>
</div>
<div class="group-info">
<div class="group-left">公司简介</div>
<div class="group-right">
<input type="text" v-model="xgsjj">
</div>
</div>
<div class="group-info">
<div class="group-left">公司地址</div>
<div class="group-right">
<input type="text" v-model="xgsdz" readonly @click="showp"/>
</div>
</div>
<div class="group-info">
<div class="group-left">详细地址</div>
<div class="group-right">
<input type="text" v-model="xxxdz">
</div>
</div>
<div class="tips">
<font class="f-red">*</font>
每完善一项基本信息，可以获得40个积分哦！
</div>
<div class="btnsub" ref="pickerNew2">
<div class="btnnext submitbtn" @click="submitG">保存信息</div>
</div>
</div>
</transition>
<van-loading type="spinner" color="#000" class="loading-background" v-if="loading"/>
<van-actionSheet v-model="actShow" :actions="actions" @select="onSelect"/>
<van-actionSheet v-model="actShow1" :actions="actions1" @select="onSelect1"/>
<van-popup v-model="showPicker" position="bottom">
<van-picker ref="test123"
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
@change="onChange"
/>
</van-popup>
</section>
</template>
<script>
import Vue from 'vue';
import {mapState} from 'vuex'
import { Loading,ActionSheet,Picker,Popup } from 'vant';
import Header from '@/views/common/Header.vue';
Vue.use(Loading).use(ActionSheet ).use(Picker).use(Popup );
var province = [];
var city = {}
var area = {}
export default {
name: 'userInfo',
data() {
return {
title:"基本信息",
isEdit:false,
historyb:true,//开启自定义回跳
actions:[{
name:"男",value:1
},{
name:"女",value:2
}],
showPicker:false,
columns:[],
actShow:false,
actShow1:false,
actions1:[{
value: 3,
name: '授权分销商'
}, {
value: 1,
name: '终端采购商'
}, {
value: 2,
name: '原厂制造商'
}, {
value: 4,
name: '学校、科研机构'
}, {
value: 5,
name: '贸易商'
}, {
value: 0,
name: '个体经营者'
}, {
value: 0,
name: '其他'
}],
xlxr:"",
xxb:"",
xxbVal:"",
xsj:"",
xyx:"",
xgsmc:"",
xgslx:"",
xgslxVal:"",
xgszj:"",
xgsjj:"",
xgsdz:"",
com_province:"",
com_city:"",
com_area:"",
com_province_id:"",
com_city_id:"",
com_area_id:"",
xxxdz:""
}
},
computed: {
...mapState({
loading: state => state.userInfo.loading,
userInfo: state => state.userInfo.userInfo,
addressInfo: state => state.userInfo.addressInfo,
})
},
watch: {
},
created() {
this.$store.dispatch({
type: 'getUserType2'
})
this.$store.dispatch({
type: 'allAddressInfo'
})
},
methods: {
editUi(){
if(this.isEdit){
this.title="基本信息";
this.isEdit=false;
}else{
this.title="基本信息编辑";
this.isEdit=true;
this.xlxr=this.userInfo.user_info.nike_name;
this.xxb=this.userInfo.user_info.sex==2?'女':'男';
this.xxbVal=this.userInfo.user_info.sex;
this.xsj=this.userInfo.user_info.mobile;
this.xyx=this.userInfo.user_info.email;
this.xgsmc=this.userInfo.company_info.com_name;
this.xgslx=this.userInfo.company_info.type_name;
this.xgszj=this.userInfo.company_info.com_telphone;
this.xgsjj=this.userInfo.company_info.com_desc;
this.com_province=this.userInfo.company_info.province_name||"北京";
this.com_city=this.userInfo.company_info.city_name||"北京";
this.com_area=this.userInfo.company_info.area_name||"东城区";
if(this.userInfo.company_info.province_name&&this.userInfo.company_info.city_name){
this.xgsdz=this.userInfo.company_info.province_name+this.userInfo.company_info.city_name+this.userInfo.company_info.area_name;
}else{
this.xgsdz="";
}
this.com_province_id=this.userInfo.company_info.com_province_id;
this.com_city_id=this.userInfo.company_info.com_city_id;
this.com_area_id=this.userInfo.company_info.com_area_id;
this.xxxdz=this.userInfo.company_info.com_address;
}
},
toSomeThingGo(){
if(this.isEdit){
this.editUi();
}else{
history.go(-1);
}
},
onSelect(item) {
// 点击选项时默认不会关闭菜单，可以手动关闭
this.actShow = false;
this.xxb=item.name;
this.xxbVal=item.value;
},
onSelect1(item){
this.actShow1 = false;
this.xgslx=item.name;
this.xgslxVal=item.value;
},
showp(){
this.showPicker=!this.showPicker;
var obj_=this.addressInfo;
for(var i=0;i<obj_.length;i++){
province.push({
value:obj_[i].value,
text:obj_[i].text,
})
city[obj_[i].text]=obj_[i].children;
var list2=obj_[i].children;
for(var j=0;j<list2.length;j++){
area[list2[j].text]=list2[j].children
}
}
this.columns=[
{
values: province , //可以是数组，或者对象数组
className: 'column1' //选择器的第一列
},
{
values: city [this.com_province], //默认选中country对象中的第一项
className: 'column2', //选择器的第二列
},
{
values: area [this.com_city], //默认选中country对象中的第一项
className: 'column3', //选择器的第二列
}
]
this.$nextTick(()=> {
this.$refs['test123'].setColumnValue(0,this.com_province)
this.$refs['test123'].setColumnValue(1,this.com_city)
this.$refs['test123'].setColumnValue(2,this.com_area)
})
},
onConfirm(value) {
this.showPicker = false;
this.com_province=value[0]['text'];
this.com_city=value[1]['text'];
this.com_area=value[2]['text'];
this.xgsdz=this.com_province+this.com_city+this.com_area;
this.com_province_id=value[0]['value'];
this.com_city_id=value[1]['value'];
this.com_area_id=value[2]['value'];
console.log(value)
},
onChange(picker, values) {
this.columns=[
{
values: province , //可以是数组，或者对象数组
className: 'column1' //选择器的第一列
},
{
values: city [values[0]['text']], //默认选中country对象中的第一项
className: 'column2', //选择器的第二列
},
{
values: area [values[1]['text']], //默认选中country对象中的第一项
className: 'column3', //选择器的第二列
}
]
picker.setColumnValue(0, values[0]['text']);
picker.setColumnValue(1, values[1]['text']);
picker.setColumnValue(2, values[2]['text']);
},
submitG:function(){
this.$store.dispatch({
type: 'changeUserInfo',
nike_name: this.xlxr,
com_name: this.xgsmc,
type_id: this.xgslxVal,
sex: this.xxbVal,
com_telphone:this.xgszj,
com_desc: this.xgsjj,
com_province_id: this.com_province_id,
com_city_id: this.com_city_id,
com_area_id: this.com_area_id,
com_address:this.xxxdz,
com_mobile: this.xsj,
urlback:this.$route.query.orderPage||""
})
}
},
components: {
Header
}
}
</script>
<style scoped>
@import "../../assets/css/user/userInfo.min.css";
</style>