Переглянути джерело

增加 头像上传功能

develop
JinxChen 3 тижднів тому
джерело
коміт
afea3086bc
6 змінених файлів з 30 додано та 10 видалено
  1. +20
    -6
      pages/user/info.vue
  2. +1
    -1
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/user/info.js.map
  3. +1
    -1
      unpackage/dist/dev/mp-weixin/pages/user/info.js
  4. +1
    -1
      unpackage/dist/dev/mp-weixin/pages/user/info.wxml
  5. +6
    -0
      unpackage/dist/dev/mp-weixin/pages/user/info.wxss
  6. +1
    -1
      unpackage/dist/dev/mp-weixin/project.private.config.json

+ 20
- 6
pages/user/info.vue Переглянути файл

@@ -2,7 +2,11 @@
<view class="info">
<view class="main">
<view class="avatar">
<u-avatar :src="avatarSrc" size="70"></u-avatar>
<button open-type="chooseAvatar" class="avatar-btn" @chooseavatar="chooseavatar"
hover-class="none">
<u-avatar :src="avatarSrcLoca" size="70"></u-avatar>
</button>
</view>
<view class="form-box">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
@@ -64,7 +68,8 @@ export default {
gender: '',
date: '',
height: '',
weight: ''
weight: '',
avatarSrc: ''
},
genderList: [
{
@@ -98,6 +103,7 @@ export default {
}],
},
action: '',
avatarSrcLoca: '' || require('../../static/tabbar/user_default.png')
}
},
onReady() {
@@ -112,9 +118,6 @@ export default {
bgthemeColor() {
return '#333'
},
avatarSrc() {
return this.$store.state.user.userInfo.avatarSrc || require('../../static/tabbar/user_default.png')
},
minDate() {
const now = new Date();
const minDate = new Date(now.getFullYear() - 50, now.getMonth(), now.getDate());
@@ -139,7 +142,7 @@ export default {
if(props.action === 'update' && this.userInfo) {
this.form = {... this.userInfo}
this.pickerDate = new Date(this.userInfo.date)
/* this.form.date = new Date(this.userInfo.date).getTime() */
this.avatarSrcLoca = this.userInfo.avatarSrc
}
console.log("this.action", this.action);
}
@@ -200,6 +203,11 @@ export default {
},
onCancelDate() {
this.showDate = false;
},
chooseavatar(e) {
this.avatarSrcLoca = e.detail.avatarUrl; // 获取临时头像路径
this.form.avatarSrc = e.detail.avatarUrl;
console.log('头像路径:', this.avatarSrcLoca);
}
}
}
@@ -221,6 +229,12 @@ export default {
justify-content: center;
align-items: center;
padding: 20rpx 0;
.avatar-btn {
height: 140rpx;
width: 140rpx;
border-radius: 50%;
padding: 0;
}
}

.form-box {


+ 1
- 1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/user/info.js.map
Різницю між файлами не показано, бо вона завелика
Переглянути файл


+ 1
- 1
unpackage/dist/dev/mp-weixin/pages/user/info.js
Різницю між файлами не показано, бо вона завелика
Переглянути файл


+ 1
- 1
unpackage/dist/dev/mp-weixin/pages/user/info.wxml Переглянути файл

@@ -1 +1 @@
<view class="info"><view class="main"><view class="avatar"><u-avatar vue-id="6d2caedd-1" src="{{avatarSrc}}" size="70" bind:__l="__l"></u-avatar></view><view class="form-box"><u--form class="vue-ref" vue-id="6d2caedd-2" labelPosition="left" model="{{form}}" rules="{{rules}}" data-ref="uForm" bind:__l="__l" vue-slots="{{['default']}}"><u-form-item vue-id="{{('6d2caedd-3')+','+('6d2caedd-2')}}" required="{{true}}" prop="name" borderBottom="{{true}}" bind:__l="__l" vue-slots="{{['default']}}"><u--input bind:input="__e" vue-id="{{('6d2caedd-4')+','+('6d2caedd-3')}}" type="text" maxlength="15" border="{{true}}" placeholder="请输入昵称" value="{{form.name}}" data-event-opts="{{[['^input',[['__set_model',['$0','name','$event',[]],['form']]]]]}}" bind:__l="__l"></u--input></u-form-item><u-form-item vue-id="{{('6d2caedd-5')+','+('6d2caedd-2')}}" required="{{true}}" prop="gender" borderBottom="{{true}}" data-event-opts="{{[['^click',[['e0']]]]}}" bind:click="__e" bind:__l="__l" vue-slots="{{['default','right']}}"><u--input bind:input="__e" vue-id="{{('6d2caedd-6')+','+('6d2caedd-5')}}" disabled="{{true}}" disabledColor="#ffffff" placeholder="请选择性别" border="{{true}}" value="{{form.gender}}" data-event-opts="{{[['^input',[['__set_model',['$0','gender','$event',[]],['form']]]]]}}" bind:__l="__l"></u--input><u-icon vue-id="{{('6d2caedd-7')+','+('6d2caedd-5')}}" slot="right" name="arrow-right" bind:__l="__l"></u-icon></u-form-item><u-form-item vue-id="{{('6d2caedd-8')+','+('6d2caedd-2')}}" required="{{true}}" labelWidth="80" prop="date" borderBottom="{{true}}" data-event-opts="{{[['^click',[['e1']]]]}}" bind:click="__e" bind:__l="__l" vue-slots="{{['default','right']}}"><u--input bind:input="__e" vue-id="{{('6d2caedd-9')+','+('6d2caedd-8')}}" disabled="{{true}}" disabledColor="#ffffff" placeholder="请选择出生日期" border="{{true}}" value="{{form.date}}" data-event-opts="{{[['^input',[['__set_model',['$0','date','$event',[]],['form']]]]]}}" bind:__l="__l"></u--input><u-icon vue-id="{{('6d2caedd-10')+','+('6d2caedd-8')}}" slot="right" name="arrow-right" bind:__l="__l"></u-icon></u-form-item><u-form-item vue-id="{{('6d2caedd-11')+','+('6d2caedd-2')}}" borderBottom="{{true}}" bind:__l="__l" vue-slots="{{['default']}}"><u-input bind:input="__e" vue-id="{{('6d2caedd-12')+','+('6d2caedd-11')}}" border="{{true}}" placeholder="请输入身高" type="number" maxlength="3" value="{{form.height}}" data-event-opts="{{[['^input',[['__set_model',['$0','height','$event',[]],['form']]]]]}}" bind:__l="__l"></u-input></u-form-item><u-form-item vue-id="{{('6d2caedd-13')+','+('6d2caedd-2')}}" borderBottom="{{true}}" bind:__l="__l" vue-slots="{{['default']}}"><u--input bind:input="__e" vue-id="{{('6d2caedd-14')+','+('6d2caedd-13')}}" border="{{true}}" placeholder="请输入体重" type="number" maxlength="3" value="{{form.weight}}" data-event-opts="{{[['^input',[['__set_model',['$0','weight','$event',[]],['form']]]]]}}" bind:__l="__l"></u--input></u-form-item></u--form></view><u-action-sheet vue-id="6d2caedd-15" actions="{{genderList}}" show="{{showGender}}" data-event-opts="{{[['^select',[['selectClickGender']]]]}}" bind:select="__e" bind:__l="__l"></u-action-sheet><u-datetime-picker class="vue-ref" vue-id="6d2caedd-16" closeOnClickOverlay="{{true}}" show="{{showDate}}" mode="date" minDate="{{minDate}}" maxDate="{{maxDate}}" confirmColor="#E19F4B" formatter="{{formatter}}" data-ref="datetimePicker" value="{{pickerDate}}" data-event-opts="{{[['^confirm',[['onConfirmDate']]],['^cancel',[['onCancelDate']]],['^input',[['__set_model',['','pickerDate','$event',[]]]]]]}}" bind:confirm="__e" bind:cancel="__e" bind:input="__e" bind:__l="__l"></u-datetime-picker><view class="action-box"><view class="btn-box"><u-button vue-id="6d2caedd-17" shape="circle" color="{{bgthemeColor}}" type="info" size="large" data-event-opts="{{[['^click',[['onSubmit']]]]}}" bind:click="__e" bind:__l="__l" vue-slots="{{['default']}}"><text style="{{'color:'+(themeColor)+';'+('font-size:'+('32rpx')+';')+('font-weight:'+('bold')+';')}}">{{actionText}}</text></u-button></view></view></view></view>
<view class="info"><view class="main"><view class="avatar"><button class="avatar-btn" open-type="chooseAvatar" hover-class="none" data-event-opts="{{[['chooseavatar',[['chooseavatar',['$event']]]]]}}" bindchooseavatar="__e"><u-avatar vue-id="6d2caedd-1" src="{{avatarSrcLoca}}" size="70" bind:__l="__l"></u-avatar></button></view><view class="form-box"><u--form class="vue-ref" vue-id="6d2caedd-2" labelPosition="left" model="{{form}}" rules="{{rules}}" data-ref="uForm" bind:__l="__l" vue-slots="{{['default']}}"><u-form-item vue-id="{{('6d2caedd-3')+','+('6d2caedd-2')}}" required="{{true}}" prop="name" borderBottom="{{true}}" bind:__l="__l" vue-slots="{{['default']}}"><u--input bind:input="__e" vue-id="{{('6d2caedd-4')+','+('6d2caedd-3')}}" type="text" maxlength="15" border="{{true}}" placeholder="请输入昵称" value="{{form.name}}" data-event-opts="{{[['^input',[['__set_model',['$0','name','$event',[]],['form']]]]]}}" bind:__l="__l"></u--input></u-form-item><u-form-item vue-id="{{('6d2caedd-5')+','+('6d2caedd-2')}}" required="{{true}}" prop="gender" borderBottom="{{true}}" data-event-opts="{{[['^click',[['e0']]]]}}" bind:click="__e" bind:__l="__l" vue-slots="{{['default','right']}}"><u--input bind:input="__e" vue-id="{{('6d2caedd-6')+','+('6d2caedd-5')}}" disabled="{{true}}" disabledColor="#ffffff" placeholder="请选择性别" border="{{true}}" value="{{form.gender}}" data-event-opts="{{[['^input',[['__set_model',['$0','gender','$event',[]],['form']]]]]}}" bind:__l="__l"></u--input><u-icon vue-id="{{('6d2caedd-7')+','+('6d2caedd-5')}}" slot="right" name="arrow-right" bind:__l="__l"></u-icon></u-form-item><u-form-item vue-id="{{('6d2caedd-8')+','+('6d2caedd-2')}}" required="{{true}}" labelWidth="80" prop="date" borderBottom="{{true}}" data-event-opts="{{[['^click',[['e1']]]]}}" bind:click="__e" bind:__l="__l" vue-slots="{{['default','right']}}"><u--input bind:input="__e" vue-id="{{('6d2caedd-9')+','+('6d2caedd-8')}}" disabled="{{true}}" disabledColor="#ffffff" placeholder="请选择出生日期" border="{{true}}" value="{{form.date}}" data-event-opts="{{[['^input',[['__set_model',['$0','date','$event',[]],['form']]]]]}}" bind:__l="__l"></u--input><u-icon vue-id="{{('6d2caedd-10')+','+('6d2caedd-8')}}" slot="right" name="arrow-right" bind:__l="__l"></u-icon></u-form-item><u-form-item vue-id="{{('6d2caedd-11')+','+('6d2caedd-2')}}" borderBottom="{{true}}" bind:__l="__l" vue-slots="{{['default']}}"><u-input bind:input="__e" vue-id="{{('6d2caedd-12')+','+('6d2caedd-11')}}" border="{{true}}" placeholder="请输入身高" type="number" maxlength="3" value="{{form.height}}" data-event-opts="{{[['^input',[['__set_model',['$0','height','$event',[]],['form']]]]]}}" bind:__l="__l"></u-input></u-form-item><u-form-item vue-id="{{('6d2caedd-13')+','+('6d2caedd-2')}}" borderBottom="{{true}}" bind:__l="__l" vue-slots="{{['default']}}"><u--input bind:input="__e" vue-id="{{('6d2caedd-14')+','+('6d2caedd-13')}}" border="{{true}}" placeholder="请输入体重" type="number" maxlength="3" value="{{form.weight}}" data-event-opts="{{[['^input',[['__set_model',['$0','weight','$event',[]],['form']]]]]}}" bind:__l="__l"></u--input></u-form-item></u--form></view><u-action-sheet vue-id="6d2caedd-15" actions="{{genderList}}" show="{{showGender}}" data-event-opts="{{[['^select',[['selectClickGender']]]]}}" bind:select="__e" bind:__l="__l"></u-action-sheet><u-datetime-picker class="vue-ref" vue-id="6d2caedd-16" closeOnClickOverlay="{{true}}" show="{{showDate}}" mode="date" minDate="{{minDate}}" maxDate="{{maxDate}}" confirmColor="#E19F4B" formatter="{{formatter}}" data-ref="datetimePicker" value="{{pickerDate}}" data-event-opts="{{[['^confirm',[['onConfirmDate']]],['^cancel',[['onCancelDate']]],['^input',[['__set_model',['','pickerDate','$event',[]]]]]]}}" bind:confirm="__e" bind:cancel="__e" bind:input="__e" bind:__l="__l"></u-datetime-picker><view class="action-box"><view class="btn-box"><u-button vue-id="6d2caedd-17" shape="circle" color="{{bgthemeColor}}" type="info" size="large" data-event-opts="{{[['^click',[['onSubmit']]]]}}" bind:click="__e" bind:__l="__l" vue-slots="{{['default']}}"><text style="{{'color:'+(themeColor)+';'+('font-size:'+('32rpx')+';')+('font-weight:'+('bold')+';')}}">{{actionText}}</text></u-button></view></view></view></view>

+ 6
- 0
unpackage/dist/dev/mp-weixin/pages/user/info.wxss Переглянути файл

@@ -46,6 +46,12 @@ text {
align-items: center;
padding: 20rpx 0;
}
.info .main .avatar .avatar-btn {
height: 140rpx;
width: 140rpx;
border-radius: 50%;
padding: 0;
}
.info .main .form-box .u-form-item {
padding: 0 20rpx;
border-radius: 50rpx;


+ 1
- 1
unpackage/dist/dev/mp-weixin/project.private.config.json Переглянути файл

@@ -5,7 +5,7 @@
"useIsolateContext": true
},
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"libVersion": "2.33.0",
"libVersion": "2.28.1",
"condition": {
"miniprogram": {
"list": [


Завантаження…
Відмінити
Зберегти