<!--
* @Descripttion:
* @version:
* @Author: Alex
* @Date: 2020-05-12 15:43:17
* @LastEditors: Alex
* @LastEditTime: 2020-07-04 10:27:58
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>user-info</title>
<link rel="stylesheet" href="./css/pulic.css">
<link rel="stylesheet" href="./css/user-info.css" />
<link rel="stylesheet" href="./css/iosSelect.css" />
</head>
<body>
<div id="app" v-cloak>
<form action="" method="post">
<input type="file" ref="imgfile" @change="upfile" style="display: none;" accept="image/*">
<!-- -->
<!-- -->
<!-- -->
<div class="list-layout">
<div class="title-box">
个人信息
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">头像</div>
<div class="item-content flex" @click="handfile('avatar')">
<div class="item-pic">
<img :src="avatarUrl" alt="">
</div>
<div class="item-icon"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex" v-if="form.live_image">
<div class="item-title">直播封面图</div>
<div class="item-content flex" @click="handfile('live_image')">
<div class="item-pic">
<img :src="live_imageUrl" alt="">
</div>
<div class="item-icon"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex" v-if="form.chat_image">
<div class="item-title">房间背景</div>
<div class="item-content flex" @click="handfile('chat_image')">
<div class="item-pic">
<img :src="chat_imageUrl" alt="">
</div>
<div class="item-icon"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">昵称</div>
<div class="item-content flex">
<input type="text" placeholder="昵称" v-model="form.nickname">
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">性别<span class="sex-tip">（不可修改）</span></div>
<div class="item-content flex" v-show="form.genderlist != 0 ">
<div class="item-sex-icon" :class="[form.genderlist == 1 ? 'item-boy':'item-girl']"></div>
<div class="item-text">{{ form.genderlist == 1 ? '男':'女' }}</div>
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">生日<span class="sex-tip">（不可修改）</span></div>
<div class="item-content flex" id="birthday">
<div class="item-check-title">{{ form.birthday }}</div>
<!-- <div class="item-icon"></div> -->
</div>
</div>
<!-- @click="openSelect('height',heigthList)" -->
<div class="list-item-box flex">
<div class="item-title">身高</div>
<div class="item-content flex" ref='height' @click="openSelect('height',heigthList)">
<div class="item-check-title">{{form.height_name}}</div>
<div class="item-icon" :class="[currentName == 'height' ? 'item-icon-active':'']"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">体重</div>
<div class="item-content flex" ref='weight' @click="openSelect('weight',weightList)">
<div class="item-check-title">{{form.weight_name}}</div>
<div class="item-icon" :class="[currentName == 'weight' ? 'item-icon-active':'']"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">标签<span class="sex-tip">（可多选）</span></div>
<div class="item-content flex" ref='label' @click="openSelect('label',labelList)">
<div class="item-check-title">{{form.label_name}}</div>
<div class="item-icon" :class="[currentName == 'label' ? 'item-icon-active':'']"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">星座<span class="sex-tip">（不可修改）</span></div>
<!-- <div class="item-content flex" ref='constellation' @click="openSelect('constellation',constellationList)">
<div class="item-check-title">{{ form.constellation_name}}</div>
<div class="item-icon" :class="[currentName == 'constellation' ? 'item-icon-active':'']"></div>
</div> -->
<div class="item-content flex" ref='constellation'>
<div class="item-check-title">{{ form.constellation_name}}</div>
<div class="item-icon"></div>
</div>
</div>
<!-- -->
</div>
<!-- -->
<!-- -->
<!-- -->
<div class="list-layout">
<div class="title-box">
交友信息
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">职业</div>
<div class="item-content flex" ref='occupation' @click="openSelect('occupation',occupationList)">
<div class="item-check-title">{{form.occupation_name}}</div>
<div class="item-icon" :class="[currentName == 'occupation' ? 'item-icon-active':'']"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">所在地</div>
<div class="item-content flex" ref='province' @click="openSelect('province',provinceList)">
<div class="item-check-title">{{ form.province_name }}</div>
<div class="item-icon" :class="[currentName == 'province' ? 'item-icon-active':'']"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">手机号</div>
<div class="item-content flex">
<!-- <input type="tel" novalidate="novalidate" pattern="[0-9]*" placeholder="未填写"
v-model="form.mobile"> -->
<input type="tel" pattern="[0-9]*" maxlength="11" placeholder="11位手机号" v-model="form.mobile">
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">个性签名</div>
<div class="item-content flex">
<input type="text" placeholder="个性签名" v-model="form.bio">
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">自我介绍</div>
<div class="item-content flex">
<input type="text" placeholder="自我介绍" v-model="form.introduce_oneself">
</div>
</div>
<!-- -->
</div>
<!-- -->
<!-- -->
<!-- -->
<div class="list-layout">
<div class="title-box">
情感
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">感情状况</div>
<div class="item-content flex" ref='feel' @click="openSelect('feel',feelList)">
<div class="item-check-title">{{form.feel_name}}</div>
<div class="item-icon" :class="[currentName == 'feel' ? 'item-icon-active':'']"></div>
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">对爱情的看法</div>
<div class="item-content flex">
<input type="text" placeholder="未填写" v-model="form.love_view" @focus="">
</div>
</div>
<!-- -->
<div class="list-item-box flex">
<div class="item-title">对另一半的看法</div>
<div class="item-content flex">
<input type="text" placeholder="未填写" v-model="form.partner_view">
</div>
</div>
<!-- -->
</div>
<!-- -->
<!-- -->
<!-- -->
<div class="submit-box">
<div class="go-submit" @click="preserveUser">
保存
</div>
</div>
</form>
<!-- -->
<div class="container">
</div>
</div>
<script src="./js/public.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/iosSelect.js"></script>
<!-- <script src="./js/datePicker.js"></script> -->
<script>
let app = new Vue({
el: '#app',
data: {
form: {
avatar: '',
live_image: '',
chat_image: '',
nickname: '',
birthday: '',
genderlist: 0, //性别
province: '', //省份id,
province_name: '',
city: '', //城市id
city_name: '',
feelinglist: '', //感情状况
love_view: '',
partner_view: '',
introduce_oneself: '',
height_id: '', //身高id
height_name: '',
weight_id: '', //体重id
weight_name: '',
constellation_id: '', //星座id
constellation_name: '',
occupation_id: '', //职业id
occupation_name: '',
label_id: [], //标签id
label_name: '',
bio: '',
mobile: '',
feelinglist: '',
feel_name: '',
feel_id: '',
},
heigthList: [],
weightList: [],
occupationList: [],
labelList: [],
constellationList: [],
provinceList: [],
cityList: [],
feelList: [{
id: 1,
name: '未婚',
value: '未婚',
},
{
id: 2,
name: '单身',
value: '单身',
},
{
id: 3,
name: '已婚',
value: '已婚',
},
],
labelID: [],
// provinceName: '',
// cityNname: '',
// feelNmae: '',
// heightName: '',
// weightName: '',
// constellationNmae: '',
// occupationName: '',
// labelName: '',
option: [],
showSelect: false,
optionIndex: 0,
currentName: '',
provinceNext: true,
uploadName: '',
avatarUrl: '',
live_imageUrl: '',
chat_imageUrl: '',
token: 'e278a88e-ef92-4d98-9828-87fe78e8fa64',
baseUrl: 'https://qingmeizb.heifeng.xin',
},
created() {
const that = this
getUserToken().then((response) => {
that.token = response
})
},
mounted() {
/**/
this.getUser()
/**/
this.getHeight()
this.getWeight()
this.getOccupation()
/**/
//this.getLabel()
this.getConstellation()
this.getProvince()
},
watch: {
token: function() {
this.getUser()
}
},
methods: {
//
getUser() {
const that = this
setajax({
url: '/index.php/api/Personal/get_personal',
headers: {
token: that.token
},
success: function(res) {
let labelid = res.data.label_id
let feel = res.data.feelinglist
let feelNmae = ''
that.avatarUrl = res.data.avatar
that.live_imageUrl = res.data.live_image
that.chat_imageUrl = res.data.chat_image
that.form = res.data
if (labelid.length) {
that.labelID = labelid.split(',')
console.log("0that.labelID",that.labelID)
that.getLabel()//等获取用户的标签列表后，在进行查询操作
}
if (feel == 1) {
feelNmae = '未婚'
} else if (feel == 2) {
feelNmae = '单身'
} else {
feelNmae = '已婚'
}
/*
let a = 0
//将数组内容结构成字符串
for (let i = 0; i < res.data.label.length; i++) {
if(a==0){
a = res.data.label[i].name
}else{
console.log("标签", res.data.label[i].name)
a = a + ',' + res.data.label[i].name
}
}
that.form.label_name = a
console.log("a",a)
console.log("显示最终标签列表", that.form.label_name)*/
that.form.label_name = ''
that.form.feel_name = feelNmae
that.form.feel_id = feel
if (that.form.province_name == '') {
that.form.province_name = '请选择省'
}
if (that.form.city_name == '') {
that.form.city_name = '请选择市'
}
that.form.province_name = that.form.province_name + ' ' + that.form.city_name
}
})
},
// 身高
getHeight() {
const that = this
setajax({
url: '/index.php/api/Personal/height_list',
success: function(res) {
let list = res.data
list.forEach((item, index) => {
item.checkStatus = false
item.value = item.name
})
that.heigthList = list
}
})
},
// 体重
getWeight() {
const that = this
setajax({
url: '/index.php/api/Personal/weight_list',
success: function(res) {
let list = res.data
list.forEach((item, index) => {
item.checkStatus = false
item.value = item.name
})
that.weightList = list
}
})
},
// 职业
getOccupation() {
const that = this
setajax({
url: '/index.php/api/Personal/occupation_list',
success: function(res) {
let list = res.data
list.forEach((item, index) => {
item.checkStatus = false
item.value = item.name
})
that.occupationList = list
}
})
},
//标签
getLabel() {
const that = this
setajax({
url: '/index.php/api/Personal/label_list',
success: function(res) {
let list = res.data
console.log("1list", list)
list.forEach((item, index) => {
/**/
item.checkStatus = false
item.value = item.name
})
console.log("2list", list)
console.log("111that.labelID", that.labelID)
if (that.labelID.length > 0) {
let labname = ''
that.labelID.forEach((labitem, labidx) => {
console.log("labitem", labitem)
list.forEach((listitem, listidx) => {
console.log("listitem", listitem)
console.log("labitem", labitem)
if (labitem == listitem.id) {
listitem.checkStatus = true
labname = labname == '' ? listitem.name : '' + labname + ',' + listitem.name + ''
}
})
})
that.form.label_name = labname
}
that.labelList = list
that.$forceUpdate()
}
})
},
//星座
getConstellation() {
const that = this
setajax({
url: '/index.php/api/Personal/constellation_list',
success: function(res) {
let list = res.data
list.forEach((item, index) => {
item.checkStatus = false
item.value = item.name
})
that.constellationList = list
}
})
},
// 地址
getProvince() {
const that = this
setajax({
url: '/index.php/api/index/region',
data: {
parent_id: 0
},
success: function(res) {
let list = res.data
list.forEach((item, index) => {
item.checkStatus = false
item.value = item.name
})
that.provinceList = list
that.getCity(list[0].id)
}
})
},
//二级城市
getCity(id) {
const that = this
setajax({
url: '/index.php/api/index/region',
data: {
parent_id: id,
type: 1
},
success: function(res) {
let list = res.data
list.forEach((item, index) => {
item.checkStatus = false
item.value = item.name
})
that.cityList = list
console.log(that.cityList.splice(that.cityList.length - 4, that.cityList.length - 1))
}
})
},
//
handfile(name) {
const that = this
let upfiles = that.$refs.imgfile
that.uploadName = name
upfiles.value = ''
upfiles.click()
},
//
upfile(e) {
const that = this
let files = that.$refs.imgfile
let form = new FormData()
form.append('file', files.files[0])
upajax({
data: form,
cache: false,
processData: false,
contentType: false,
success: function(res) {
console.log(res)
if (that.uploadName == "avatar") {
that.form.avatar = res.data.url
that.avatarUrl = res.data.url
} else if (that.uploadName == "live_image") {
that.form.live_image = res.data.url
that.live_imageUrl = res.data.url
} else if (that.uploadName == "chat_image") {
that.form.chat_image = res.data.url
that.chat_imageUrl = res.data.url
}
}
})
},
//
openSelect(name, list) {
const that = this
let titleName = {
height: '选择身高',
weight: '选择体重',
label: '选择标签',
constellation: '选择星座',
occupation: '选择职业',
province: '选择地区',
feel: '选择感情状况'
}
let thisName = name
let num = 1,
arr = [],
options = {
container: '.container',
title: titleName[thisName],
itemHeight: 50,
itemShowCount: 5,
showAnimate: true,
showLoading: true,
addClassName: 'iosSelectStyle',
};
if (name == 'label') {
num = 1
arr = [list]
options.callback = function(select) {
console.log(select)
if (select.checkstatus == 'true') {
that.labelID = that.labelID.filter(item => {
return item != select.id
})
console.log(that.labelID)
//
that.labelList.forEach((item, index) => {
if (item.id == select.id) {
item.checkStatus = false
}
})
console.log(that.labelList)
//
let labname = that.form.label_name.split(',')
labname = labname.filter(item => {
return item != select.name
})
that.form.label_name = labname.join()
} else {
that.labelID.push(select.id)
that.labelList.forEach((item, index) => {
if (item.id == select.id) {
item.checkStatus = true
}
})
that.form.label_name = that.form.label_name == '' ? select.name : '' + that.form.label_name + ',' + select.name +
''
}
that.$forceUpdate()
}
that.createSelect(num, arr, options)
} else if (name == 'province') {
num = 2
arr = [list, that.cityList]
options.relation = [1, 1]
options.oneLevelId = that.form.province
options.twoLevelId = that.form.city
options.callback = function(select, selectCity) {
console.log(select, selectCity)
let name = select.name
that.form.province = select.id
if (selectCity.name) {
name = name + ' ' + selectCity.name
that.form.city_name = selectCity.name
}
if (selectCity.id) {
that.form.city = selectCity.id
}
that.form.province_name = name
}
that.createSelect(num, arr, options)
} else {
let oneID = '' + thisName + '_id'
num = 1
arr = [list]
options.oneLevelId = that.form[oneID]
options.callback = function(select) {
console.log(select)
let name = '' + thisName + '_name'
// let id = '' + thisName + '_id'
that.form[name] = select.name
that.form[oneID] = select.id
that.$forceUpdate()
}
that.createSelect(num, arr, options)
}
},
createSelect(num, arr, options) {
const that = this
let selectShow = new IosSelect(num, [...arr], options)
},
//
preserveUser() {
const that = this
let form = that.form
let data = {
avatar: form.avatar,
live_image: form.live_image,
chat_image: form.chat_image,
nickname: form.nickname,
province: form.province,
city: form.city,
feelinglist: form.feel_id,
love_view: form.love_view,
partner_view: form.partner_view,
introduce_oneself: form.introduce_oneself,
height_id: form.height_id,
weight_id: form.weight_id,
constellation_id: form.constellation_id,
occupation_id: form.occupation_id,
bio: form.bio,
mobile: form.mobile
}
let label_id = that.labelID.join()
data.label_id = label_id
setajax({
url: '/index.php/api/Personal/sub_personal',
headers: {
token: that.token
},
data: data,
success: function(res) {
showTip(meg = "保存成功")
let setData = {
status: true
}
setTimeout(function() {
getbridge('wPageBack', setData, function() {})
}, 2000)
}
})
}
}
})
</script>
</body>
</html>
