开始

昵称修改

改成Input
image.png

  1. <input type="text" v-model="username" />

image.png

  1. username:'哈哈哈'

文本框内容居右
image.png

  1.     /* 右侧文本框 */
  2.     .user-set-userinfo-list>view:last-child>input{
  3.         text-align: right;
  4.     }

image.png
可以输入文字
image.png

性别选择

image.png

image.png

用通用的选择
image.png

  1. <view class="u-f-ac" @tap="changeOne('sex')">
  2.                 <view>{{sex}}</view>
  3.                 <view class="icon iconfont icon-bianji1"></view>
  4.             </view>

情感
image.png
image.png

  1. <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  2.             <view>情感</view>
  3.             <view class="u-f-ac" @tap="changeOne('qg')">
  4.                 <view>{{qg}}</view>
  5.                 <view class="icon iconfont icon-bianji1"></view>
  6.             </view>
  7.         </view>

职业
image.png

  1. <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  2.             <view>职业</view>
  3.             <view class="u-f-ac" @tap="changeOne('job')">
  4.                 <view>{{job}}</view>
  5.                 <view class="icon iconfont icon-bianji1"></view>
  6.             </view>
  7.         </view>

image.png
data内定义这几个属性

  1. data() {
  2.             return {
  3.                 userpic: '../../static/demo/userpic/11.jpg',
  4.                 username:'哈哈哈',
  5.                 sex:"不限",
  6.                 qg:"未婚",
  7.                 job:"IT"
  8.             }
  9.         },

image.png

image.png

image.png

  1. let sex=['不限','男','女'];

image.png

image.png

image.png

image.png

image.png

image.png

  1. let qg=['秘密','未婚','已婚'];
  3. let job=['秘密','IT','老师'];

image.png

image.png

image.png

image.png
这里写错了 改过来
image.png

本节代码

  1. <template>
  2.     <view class="body">
  4.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  5.             <view>头像</view>
  6.             <view class="u-f-ac" @tap="changeimg">
  7.                 <image :src="userpic" mode="aspectFill" lazy-load="true"></image>
  8.                 <view class="icon iconfont icon-bianji1"></view>
  9.             </view>
  10.         </view>
  11.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  12.             <view>昵称</view>
  13.             <view class="u-f-ac">
  14.                 <!-- <view>昵称</view> -->
  15.                 <input type="text" v-model="username" />
  16.                 <view class="icon iconfont icon-bianji1"></view>
  17.             </view>
  18.         </view>
  19.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  20.             <view>性别</view>
  21.             <view class="u-f-ac" @tap="changeOne('sex')">
  22.                 <view>{{sex}}</view>
  23.                 <view class="icon iconfont icon-bianji1"></view>
  24.             </view>
  25.         </view>
  26.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  27.             <view>生日</view>
  28.             <view class="u-f-ac">
  29.                 <view>1987-02-07</view>
  30.                 <view class="icon iconfont icon-bianji1"></view>
  31.             </view>
  32.         </view>
  33.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  34.             <view>情感</view>
  35.             <view class="u-f-ac" @tap="changeOne('qg')">
  36.                 <view>{{qg}}</view>
  37.                 <view class="icon iconfont icon-bianji1"></view>
  38.             </view>
  39.         </view>
  40.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  41.             <view>职业</view>
  42.             <view class="u-f-ac" @tap="changeOne('job')">
  43.                 <view>{{job}}</view>
  44.                 <view class="icon iconfont icon-bianji1"></view>
  45.             </view>
  46.         </view>
  47.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  48.             <view>家乡</view>
  49.             <view class="u-f-ac">
  50.                 <view>中国广州</view>
  51.                 <view class="icon iconfont icon-bianji1"></view>
  52.             </view>
  53.         </view>
  54.         <button class="user-set-btn" :class="{'user-set-btn-disable':disabled}" :loading="loading" @tap="submit"
  55.             type="primary" :disabled="disabled">完成</button>
  56.     </view>
  57. </template>
  59. <script>
  60.     import {
  61.         pathToBase64
  62.     } from '../../js_sdk/mmmm-image-tools/index.js'
  63.     let sex=['不限','男','女'];
  64.     let qg=['秘密','未婚','已婚'];
  65.     let job=['秘密','IT','老师'];
  66.     export default {
  67.         data() {
  68.             return {
  69.                 userpic: '../../static/demo/userpic/11.jpg',
  70.                 username:'哈哈哈',
  71.                 sex:"不限",
  72.                 qg:"未婚",
  73.                 job:"IT"
  74.             }
  75.         },
  76.         methods: {
  77.             changeOne(val){
  78.                 let arr=[];
  79.                 switch(val){
  80.                     case 'sex':
  81.                         arr=sex;
  82.                         break;
  83.                     case 'qg':
  84.                         arr=qg;
  85.                         break;
  86.                     case 'job':
  87.                         arr=job;
  88.                         break;
  89.                 }
  90.                 uni.showActionSheet({
  91.                     itemList:arr,
  92.                     success: res => {
  93.                         switch(val){
  94.                             case 'sex':
  95.                                 this.sex=arr[res.tapIndex];
  96.                                 break;
  97.                             case 'qg':
  98.                                 this.qg=arr[res.tapIndex];
  99.                                 break;
  100.                             case 'job':
  101.                                 this.job=arr[res.tapIndex];
  102.                                 break;
  103.                         }
  104.                         console.log(res);
  105.                     }
  106.                 })
  107.             },
  108.             // 修改头像
  109.             changeimg() {
  110.                 uni.chooseImage({
  111.                     count: 1, //默认9
  112.                     sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
  113.                     // sourceType: ['album'], //从相册选择
  114.                     success: function(res) {
  115.                         console.log(JSON.stringify(res));
  116.                         // this.userpic=res.tempFilePaths;
  117.                         //解决跨越问题，让通过微信上传的图片你能够展示在浏览器前端
  118.                         uni.getImageInfo({
  119.                             src: res.tempFilePaths[0],
  120.                             success: (path) => {
  121.                                 pathToBase64(path.path).then(base64 => {
  122.                                         // console.log(base64); // 这就是转为base64格式的图片
  123.                                         console.log('base64赋值');
  124.                                         this.userpic=base64;
  125.                                     })
  126.                                     .catch(error => {
  127.                                         console.error(error)
  128.                                     })
  129.                             }
  130.                         });
  134.                     }
  135.                 });;
  136.             },
  137.             submit(){
  139.             }
  140.         }
  141.     }
  142. </script>
  144. <style>
  145.     @import url('@/common/form.css');
  147.     .user-set-userinfo-list {
  148.         padding: 20upx;
  149.         border-bottom: 1upx solid #F4F4F4;
  150.     }
  152.     /* 左侧的文字 */
  153.     .user-set-userinfo-list>view:first-child {
  154.         font-size: 32upx;
  155.         font-weight: bold;
  156.         color: #9B9B9B;
  157.     }
  159.     /* 右侧头像 */
  160.     .user-set-userinfo-list>view:last-child>image {
  161.         width: 80upx;
  162.         height: 80upx;
  163.         border-radius: 100%;
  164.     }
  165.     /* 右侧文本框 */
  166.     .user-set-userinfo-list>view:last-child>input{
  167.         text-align: right;
  168.     }
  170.     /* 最右侧的修改的铅笔图标 */
  171.     .user-set-userinfo-list>view:last-child>view:last-of-type {
  172.         margin-left: 20upx;
  173.         color: #9B9B9B;
  174.     }
  177. </style>

结束