开始

日期选择
image.png
上节课，我们这里写的全局变量的好处。定义全局变量。
image.png

image.png

image.png

生日的修改

image.png

  1. <view>{{birthday}}</view>

image.png

  1. birthday:'1987-02-07'

用到时间的选择器

image.png

image.png
image.png

image.png

  1. <picker mode="date" :value="birthday" :sstart="startDate" :end="endDate" @change="bindDateChange">
  2.                 <view class="u-f-ac">
  3.                     <view>{{birthday}}</view>
  4.                     <view class="icon iconfont icon-bianji1"></view>
  5.                 </view>
  6.             </picker>

image.png
我们直接绑定生日的字段
image.png
计算属性复制过来
image.png

  1. computed: {
  2.             startDate() {
  3.                 return this.getDate('start');
  4.             },
  5.             endDate() {
  6.                 return this.getDate('end');
  7.             }
  8.         },

getDate是在methods复制过来的方法

image.png

  1. getDate(type) {
  2.                 const date = new Date();
  3.                 let year = date.getFullYear();
  4.                 let month = date.getMonth() + 1;
  5.                 let day = date.getDate();
  7.                 if (type === 'start') {
  8.                     year = year - 60;
  9.                 } else if (type === 'end') {
  10.                     year = year + 2;
  11.                 }
  12.                 month = month > 9 ? month : '0' + month;;
  13.                 day = day > 9 ? day : '0' + day;
  14.                 return `${year}-${month}-${day}`;
  15.             }

这个方法复制过来
image.png

image.png

image.png

image.png

  1. // 修改生日
  2.             bindDateChange(e){
  3.                 this.birthday=e.target.value;
  4.             },

image.png

image.png

本节代码

user-set-userinfo.vue页面

  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.             <picker mode="date" :value="birthday" :sstart="startDate" :end="endDate" @change="bindDateChange">
  29.                 <view class="u-f-ac">
  30.                     <view>{{birthday}}</view>
  31.                     <view class="icon iconfont icon-bianji1"></view>
  32.                 </view>
  33.             </picker>
  34.         </view>
  35.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  36.             <view>情感</view>
  37.             <view class="u-f-ac" @tap="changeOne('qg')">
  38.                 <view>{{qg}}</view>
  39.                 <view class="icon iconfont icon-bianji1"></view>
  40.             </view>
  41.         </view>
  42.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  43.             <view>职业</view>
  44.             <view class="u-f-ac" @tap="changeOne('job')">
  45.                 <view>{{job}}</view>
  46.                 <view class="icon iconfont icon-bianji1"></view>
  47.             </view>
  48.         </view>
  49.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  50.             <view>家乡</view>
  51.             <view class="u-f-ac">
  52.                 <view>中国广州</view>
  53.                 <view class="icon iconfont icon-bianji1"></view>
  54.             </view>
  55.         </view>
  56.         <button class="user-set-btn" :class="{'user-set-btn-disable':disabled}" :loading="loading" @tap="submit"
  57.             type="primary" :disabled="disabled">完成</button>
  58.     </view>
  59. </template>
  61. <script>
  62.     import {
  63.         pathToBase64
  64.     } from '../../js_sdk/mmmm-image-tools/index.js'
  65.     let sex = ['不限', '男', '女'];
  66.     let qg = ['秘密', '未婚', '已婚'];
  67.     let job = ['秘密', 'IT', '老师'];
  68.     export default {
  69.         data() {
  70.             return {
  71.                 userpic: '../../static/demo/userpic/11.jpg',
  72.                 username: '哈哈哈',
  73.                 sex: "不限",
  74.                 qg: "未婚",
  75.                 job: "IT",
  76.                 birthday: '1987-02-07'
  77.             }
  78.         },
  79.         computed: {
  80.             startDate() {
  81.                 return this.getDate('start');
  82.             },
  83.             endDate() {
  84.                 return this.getDate('end');
  85.             }
  86.         },
  87.         methods: {
  88.             // 修改生日
  89.             bindDateChange(e){
  90.                 this.birthday=e.target.value;
  91.             },
  92.             changeOne(val) {
  93.                 let arr = [];
  94.                 switch (val) {
  95.                     case 'sex':
  96.                         arr = sex;
  97.                         break;
  98.                     case 'qg':
  99.                         arr = qg;
  100.                         break;
  101.                     case 'job':
  102.                         arr = job;
  103.                         break;
  104.                 }
  105.                 uni.showActionSheet({
  106.                     itemList: arr,
  107.                     success: res => {
  108.                         switch (val) {
  109.                             case 'sex':
  110.                                 this.sex = arr[res.tapIndex];
  111.                                 break;
  112.                             case 'qg':
  113.                                 this.qg = arr[res.tapIndex];
  114.                                 break;
  115.                             case 'job':
  116.                                 this.job = arr[res.tapIndex];
  117.                                 break;
  118.                         }
  119.                         console.log(res);
  120.                     }
  121.                 })
  122.             },
  123.             // 修改头像
  124.             changeimg() {
  125.                 uni.chooseImage({
  126.                     count: 1, //默认9
  127.                     sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
  128.                     // sourceType: ['album'], //从相册选择
  129.                     success: res => {
  130.                         console.log(JSON.stringify(res));
  131.                         // this.userpic=res.tempFilePaths;
  132.                         //解决跨越问题，让通过微信上传的图片你能够展示在浏览器前端
  133.                         uni.getImageInfo({
  134.                             src: res.tempFilePaths[0],
  135.                             success: (path) => {
  136.                                 pathToBase64(path.path).then(base64 => {
  137.                                         // console.log(base64); // 这就是转为base64格式的图片
  138.                                         console.log('base64赋值');
  139.                                         this.userpic = base64;
  140.                                         // console.log(this.userpic);
  141.                                     })
  142.                                     .catch(error => {
  143.                                         console.error(error)
  144.                                     })
  145.                             }
  146.                         });
  150.                     }
  151.                 });;
  152.             },
  153.             submit() {
  155.             },
  156.             getDate(type) {
  157.                 const date = new Date();
  158.                 let year = date.getFullYear();
  159.                 let month = date.getMonth() + 1;
  160.                 let day = date.getDate();
  162.                 if (type === 'start') {
  163.                     year = year - 60;
  164.                 } else if (type === 'end') {
  165.                     year = year + 2;
  166.                 }
  167.                 month = month > 9 ? month : '0' + month;;
  168.                 day = day > 9 ? day : '0' + day;
  169.                 return `${year}-${month}-${day}`;
  170.             }
  171.         }
  172.     }
  173. </script>
  175. <style>
  176.     @import url('@/common/form.css');
  178.     .user-set-userinfo-list {
  179.         padding: 20upx;
  180.         border-bottom: 1upx solid #F4F4F4;
  181.     }
  183.     /* 左侧的文字 */
  184.     .user-set-userinfo-list>view:first-child {
  185.         font-size: 32upx;
  186.         font-weight: bold;
  187.         color: #9B9B9B;
  188.     }
  190.     /* 右侧头像 */
  191.     .user-set-userinfo-list>view:last-child>image {
  192.         width: 80upx;
  193.         height: 80upx;
  194.         border-radius: 100%;
  195.     }
  197.     /* 右侧文本框 */
  198.     .user-set-userinfo-list>view:last-child>input {
  199.         text-align: right;
  200.     }
  202.     /* 最右侧的修改的铅笔图标 */
  203.     .user-set-userinfo-list>view:last-child>view:last-of-type {
  204.         margin-left: 20upx;
  205.         color: #9B9B9B;
  206.     }
  207. </style>

结束