19 修改资料页面（拍照or本地图片选择，显示操作菜单，pinker日期框，三级联动）
效果图：
总体效果图：
修改性别效果图；
pinker精确年月日效果图：
第三方三级联动效果图：
要点：
要点1：为uni-list-item增加了插槽
<uni-list-item title="头像" @click="changeUserpic">
<!-- 为uni-list-item增加了插槽 -->
<view class="flex align-center" slot="right_content">
<image :src="userpic" class="rounded-circle" style="width: 100rpx; height: 100rpx;" mode=""></image>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
要点2：拍照或选择本地图片
changeUserpic(){
// 拍照或者选择本地图片
uni.chooseImage({
count:1,
sizeType:["compressed"],
sourceType:["album","camera"],
success: (res) => {
this.userpic = res.tempFilePaths[0]
}
})
},
要点3：显示操作菜单
// 显示操作菜单
uni.showActionSheet({
itemList:sexArray,
success: (res) => {
// console.log(res)
this.sex = res.tapIndex
}
})
要点4: pinker精确日期框
....
<!-- picker日期表单,不用导入调用的是各个平台的原生日期渲染 -->
<picker mode="date" :value="birthday" @change="onDateChange">
<uni-list-item title="生日">
<view class="flex align-center" slot="right_content">
<text>{{this.birthday}}</text>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
</picker>
....
return {
userpic:"/static/default.jpg",
username:"不吃苹果",
sex:0,
emotion:0,
job:"保密",
birthday:"2019-01-01",
cityPickerValueDefault: [0, 0, 1],
pickerText: '',
address: '河南省-郑州市-中原区'
}
// 修改日期 methods下
onDateChange(e){
// console.log(e.detail)
this.birthday = e.detail.value
},
要点5：第三方三级联动库(具体见pinker相关官网推荐)
<uni-list-item title="家乡" @tap="openAddres2">
<view class="flex align-center" slot="right_content">
<text>{{address}}</text>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
<view class="py-2 px-3">
<button class="bg-main text-white" style="border-radius: 50rpx;border: 0;" type="primary">完成</button>
</view>
<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
// 三级联动
onConfirm(e) {
// console.log(JSON.stringify(e))
this.address = e.label
},
// 调用该三级联动组件
openAddres2() {
// 根据 label 获取
var index = this.$refs.simpleAddress.queryIndex(this.address.split('-'), 'label');
// console.log(index);
// 设置默认打开的地址
this.cityPickerValueDefault = index.index;
// 打开三级联动事件
this.$refs.simpleAddress.open();
},
代码
<template>
<view>
<uni-list-item title="头像" @click="changeUserpic">
<!-- 为uni-list-item增加了插槽 -->
<view class="flex align-center" slot="right_content">
<image :src="userpic" class="rounded-circle" style="width: 100rpx; height: 100rpx;" mode=""></image>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
<uni-list-item title="昵称" @click="changeUsername">
<view class="flex align-center w-100" slot="right_content">
<input ref="usernameInput" class="text-right" type="text " value="" v-model="username" />
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
<uni-list-item title="性别" @click="changeSex">
<view class="flex align-center" slot="right_content" >
<text class="font">{{this.sexText}}</text>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
<!-- picker日期表单,不用导入调用的是各个平台的原生日期渲染 -->
<picker mode="date" :value="birthday" @change="onDateChange">
<uni-list-item title="生日">
<view class="flex align-center" slot="right_content">
<text>{{this.birthday}}</text>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
</picker>
<uni-list-item title="情感 " @click='changeEmotion'>
<view class="flex align-center" slot="right_content">
<text>{{this.emotionText}}</text>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
<uni-list-item title="职业" @click="changeJob">
<view class="flex align-center" slot="right_content">
<text>{{job}}</text>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
<uni-list-item title="家乡" @tap="openAddres2">
<view class="flex align-center" slot="right_content">
<text>{{address}}</text>
<text class="iconfont icon-bianji1 ml-2"></text>
</view>
</uni-list-item>
<view class="py-2 px-3">
<button class="bg-main text-white" style="border-radius: 50rpx;border: 0;" type="primary">完成</button>
</view>
<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
</view>
</template>
<script>
const sexArray = ['保密','男','女']
const jobArray = ['农民','it','教师']
const emotionArray = ['保密', '未婚', '已婚']
import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue'
import simpleAddress from '@/components/other-author-dev/simple-address/simple-address.nvue'
export default {
components:{
uniListItem,
simpleAddress
},
data() {
return {
userpic:"/static/default.jpg",
username:"不吃苹果",
sex:0,
emotion:0,
job:"保密",
birthday:"2019-01-01",
cityPickerValueDefault: [0, 0, 1],
pickerText: '',
address: '河南省-郑州市-中原区'
}
},
computed:{
sexText(){
return sexArray[this.sex]
},
emotionText(){
return emotionArray[this.emotion]
},
},
methods: {
changeUserpic(){
// 拍照或者选择本地图片
uni.chooseImage({
count:1,
sizeType:["compressed"],
sourceType:["album","camera"],
success: (res) => {
this.userpic = res.tempFilePaths[0]
}
})
},
// 修改昵称 不用理会
changeUsername(){
// this.$nextTick(function(){
// console.log(this.$refs.usernameInput)
// })
// console.log('zzzzz')
// this.$refs.username_input.focus()
},
// 修改性别
changeSex(){
// 显示操作菜单
uni.showActionSheet({
itemList:sexArray,
success: (res) => {
this.sex = res.tapIndex
}
})
},
// 修改已婚未婚
changeEmotion(){
uni.showActionSheet({
itemList:emotionArray,
success:(res) => {
this.emotion = res.tapIndex
}
})
},
// 修改职业
changeJob(){
uni.showActionSheet({
itemList:jobArray,
success: (res) => {
this.job = jobArray[res.tapIndex]
}
})
},
// 修改日期
onDateChange(e){
// console.log(e.detail)
this.birthday = e.detail.value
},
// 三级联动
onConfirm(e) {
// console.log(JSON.stringify(e))
this.address = e.label
},
// 调用该三级联动组件
openAddres2() {
// 根据 label 获取
var index = this.$refs.simpleAddress.queryIndex(this.address.split('-'), 'label');
// console.log(index);
// 设置默认打开的地址
this.cityPickerValueDefault = index.index;
// 打开三级联动事件
this.$refs.simpleAddress.open();
},
}
}
</script>
<style>
</style>
