| xqd
@@ -4,18 +4,26 @@
|
|
|
<view class="topCard" :style="{backgroundImage:'url('+imgurl+')'}">
|
|
|
<!-- 用户名 -->
|
|
|
<view class="user">
|
|
|
- <view class="">
|
|
|
- <image class="user-avatar" src="/static/icon/avatar.png" style="height: 176rpx;width: 176rpx;" ></image>
|
|
|
+ <view v-if="admin.avatar">
|
|
|
+ <button class="avatar" open-type="chooseAvatar" @click="handleGetWechatUserInfo">
|
|
|
+ <image class="user-avatar" style="height: 176rpx;width: 176rpx;border-radius: 50%;"
|
|
|
+ :src="admin.avatar? admin.avatar : '/static/icon/avatar.png'" />
|
|
|
+ </button>
|
|
|
+ <view class="userinfo">
|
|
|
+ <text class="unlogin">{{admin.nickname}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <image class="user-avatar" src="/static/icon/avatar.png" style="height: 176rpx;width: 176rpx;">
|
|
|
+ </image>
|
|
|
<view class="userinfo">
|
|
|
<text class="unlogin" v-if="!islogin" @click="login">请点击登录</text>
|
|
|
- <text class="username" v-if="islogin" @click="goPersonData">用户oo1</text>
|
|
|
- <text class="userId" v-if="islogin" @click="goPersonData">ID23923</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <image src="/static/icon/setting.png" @click="goSetting"
|
|
|
+ <image src="/static/icon/setting.png" @click="goSetting"
|
|
|
style="width: 44rpx;height: 44rpx; position: absolute;top:0rpx;right: 24rpx;"></image>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<!-- 会员 -->
|
|
|
<view class="membership" @click="goJoin">
|
|
|
<view class="flex">
|
| xqd
@@ -30,7 +38,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<!-- 订单 -->
|
|
|
<view class="orders">
|
|
|
<view class="nav">
|
| xqd
@@ -40,28 +48,32 @@
|
|
|
<image style="width: 12rpx ;height: 20rpx;" src="../../static/icon/right05.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="content">
|
|
|
<view class="flexbox" @click="goMyorders(1)">
|
|
|
- <view style="width: 56rpx; height: 56rpx; display: flex;align-items: center;justify-content: center; ">
|
|
|
+ <view
|
|
|
+ style="width: 56rpx; height: 56rpx; display: flex;align-items: center;justify-content: center; ">
|
|
|
<image style="width: 56rpx ;height: 42rpx;" src="../../static/icon/exchange.png"></image>
|
|
|
</view>
|
|
|
<text>待兑换</text>
|
|
|
</view>
|
|
|
<view class="flexbox" @click="goMyorders(2)">
|
|
|
- <view style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
|
|
|
+ <view
|
|
|
+ style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
|
|
|
<image style="width: 54rpx ;height: 52rpx;" src="../../static/icon/shipments.png"></image>
|
|
|
</view>
|
|
|
<text>待发货</text>
|
|
|
</view>
|
|
|
<view class="flexbox" @click="goMyorders(3)">
|
|
|
- <view style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
|
|
|
+ <view
|
|
|
+ style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
|
|
|
<image style="width: 56rpx ;height: 56rpx;" src="../../static/icon/Receipt.png"></image>
|
|
|
</view>
|
|
|
<text>待收货</text>
|
|
|
</view>
|
|
|
<view class="flexbox" @click="goMyorders(4)">
|
|
|
- <view style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
|
|
|
+ <view
|
|
|
+ style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
|
|
|
<image style="width: 54rpx ;height: 54rpx;" src="../../static/icon/finish.png"></image>
|
|
|
</view>
|
|
|
<text>已完成</text>
|
| xqd
@@ -69,21 +81,31 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<!-- 列表 -->
|
|
|
<view style="padding:0 30rpx;">
|
|
|
<view class="list" v-for="(item,index) in list" @click="goDetail(index)">
|
|
|
<view class="title">{{item.title}}</view>
|
|
|
<view class="container">{{item.content}}</view>
|
|
|
- <image src="../../static/icon/right.png"></image>
|
|
|
+ <image src="../../static/icon/right.png"></image>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
-
|
|
|
+ <u-modal :show="modal.show" :title="modal.title" :show-confirm-button="false">
|
|
|
+ <view>
|
|
|
+ <button class="avatar" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
|
|
|
+ <image class="user-avatar" style="height: 176rpx;width: 176rpx;border-radius: 50%;"
|
|
|
+ :src="modal.avatar?modal.avatar:'/static/icon/avatar.png'" />
|
|
|
+ </button>
|
|
|
+ <input class="avatar" type="nickname" :value="modal.nickname" placeholder="填写昵称"
|
|
|
+ @change="handleChangeNickname">
|
|
|
+
|
|
|
+ <button class="confirm" @click="handleConfirmWechatUserInfo">提交</button>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
<!-- 底部导航栏 -->
|
|
|
<view style="height: 140rpx; width: 100%;"></view>
|
|
|
<tab-bar checked="my"></tab-bar>
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
| xqd
@@ -97,96 +119,143 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- admin:'',
|
|
|
+ modal: {
|
|
|
+ show: false,
|
|
|
+ title: '用户信息获取',
|
|
|
+ nickname: '',
|
|
|
+ avatar: ''
|
|
|
+ },
|
|
|
+ admin: '',
|
|
|
// 顶部背景图
|
|
|
- imgurl:'http://t9.9026.com/imgs/bg@2x.png',
|
|
|
+ imgurl: 'http://t9.9026.com/imgs/bg@2x.png',
|
|
|
// 是否登录
|
|
|
islogin: false,
|
|
|
// 列表内容
|
|
|
- list:[{
|
|
|
- title:'积分',
|
|
|
- content:'积分兑换奖品'
|
|
|
- },{
|
|
|
- title:'奖品',
|
|
|
- content:'查看所有奖品'
|
|
|
- },{
|
|
|
- title:'点赞',
|
|
|
- content:'查看所有点赞'
|
|
|
+ list: [{
|
|
|
+ title: '积分',
|
|
|
+ content: '积分兑换奖品'
|
|
|
+ }, {
|
|
|
+ title: '奖品',
|
|
|
+ content: '查看所有奖品'
|
|
|
+ }, {
|
|
|
+ title: '点赞',
|
|
|
+ content: '查看所有点赞'
|
|
|
}]
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
- onLoad() {
|
|
|
- this.$store.getters = this.admin
|
|
|
- console.log(this.$store.getters,111);
|
|
|
-
|
|
|
+
|
|
|
+ onShow() {
|
|
|
+ this.admin = this.$store.getters.userInfo
|
|
|
},
|
|
|
-
|
|
|
- methods:{
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 微信获取头像
|
|
|
+ handleGetWechatUserInfo() {
|
|
|
+ console.log(1111);
|
|
|
+ this.modal.show = true
|
|
|
+ this.modal.nickname = this.admin.nickname
|
|
|
+ this.modal.avatar = this.admin.avatar
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //提交微信名称和头像
|
|
|
+ handleConfirmWechatUserInfo() {
|
|
|
+ if (!this.modal.avatar) {
|
|
|
+ this.$u.toast('请上传头像')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.modal.nickname) {
|
|
|
+ this.$u.toast('请填写昵称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$loading('数据提交中...')
|
|
|
+ this.$api.my.update({avatar: this.modal.avatar, nickname: this.modal.nickname}).then(res=>{
|
|
|
+ this.$hideLoading()
|
|
|
+ this.$store.dispatch('user/info', res.data)
|
|
|
+ this.modal.show = false
|
|
|
+ })
|
|
|
+ // this.$api.user.update({ avatar: this.modal.avatar, nickname: this.modal.nickname }).then(res => {
|
|
|
+ // this.code = null
|
|
|
+ // this.$hideLoading()
|
|
|
+ // this.$store.dispatch('user/info', res.data)
|
|
|
+ // this.modal.show = false
|
|
|
+ // }).catch(() => {
|
|
|
+ // this.$hideLoading()
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 微信获取头像
|
|
|
+ handleChooseAvatar(e) {
|
|
|
+ console.log(e.detail);
|
|
|
+ this.modal.avatar = e.detail.avatarUrl
|
|
|
+ },
|
|
|
+ handleChangeNickname(res) {
|
|
|
+ this.modal.nickname = res.detail.value
|
|
|
+ },
|
|
|
+
|
|
|
// 跳转登录页
|
|
|
- login(){
|
|
|
+ login() {
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/login/login'
|
|
|
+ url: '/pages/login/login'
|
|
|
})
|
|
|
},
|
|
|
// 跳转个人信息
|
|
|
- goPersonData(){
|
|
|
+ goPersonData() {
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/PersonalData/personalData'
|
|
|
+ url: '/pages/my/PersonalData/personalData'
|
|
|
})
|
|
|
},
|
|
|
// 跳转设置页面
|
|
|
- goSetting(){
|
|
|
+ goSetting() {
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/setting/setting'
|
|
|
+ url: '/pages/my/setting/setting'
|
|
|
})
|
|
|
},
|
|
|
// 跳转积分页
|
|
|
- goDetail(index){
|
|
|
- if(index==0){
|
|
|
+ goDetail(index) {
|
|
|
+ if (index == 0) {
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/integral/integral'
|
|
|
+ url: '/pages/my/integral/integral'
|
|
|
})
|
|
|
- }else if(index==1){
|
|
|
+ } else if (index == 1) {
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/prize/prize'
|
|
|
+ url: '/pages/my/prize/prize'
|
|
|
})
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/Kudos/Kudos'
|
|
|
+ url: '/pages/my/Kudos/Kudos'
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 跳转订单页
|
|
|
- goMyorders(index){
|
|
|
- switch(index){
|
|
|
+ goMyorders(index) {
|
|
|
+ switch (index) {
|
|
|
case 0:
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/myorders/orders'
|
|
|
+ url: '/pages/my/myorders/orders'
|
|
|
})
|
|
|
break;
|
|
|
case 1:
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/myorders/orders?isActive='+1
|
|
|
+ url: '/pages/my/myorders/orders?isActive=' + 1
|
|
|
})
|
|
|
- break;
|
|
|
+ break;
|
|
|
case 2:
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/myorders/orders?isActive='+2
|
|
|
+ url: '/pages/my/myorders/orders?isActive=' + 2
|
|
|
})
|
|
|
- break;
|
|
|
+ break;
|
|
|
case 3:
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/myorders/orders?isActive='+3
|
|
|
+ url: '/pages/my/myorders/orders?isActive=' + 3
|
|
|
})
|
|
|
- break;
|
|
|
+ break;
|
|
|
case 4:
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/my/myorders/orders?isActive='+4
|
|
|
+ url: '/pages/my/myorders/orders?isActive=' + 4
|
|
|
})
|
|
|
- break;
|
|
|
+ break;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
// 跳转其他小程序
|
|
|
goJoin() {
|
| xqd
@@ -207,7 +276,7 @@
|
|
|
})
|
|
|
},
|
|
|
// 上传头像
|
|
|
- uploadAvatar(){
|
|
|
+ uploadAvatar() {
|
|
|
// let img = []
|
|
|
// uni.chooseImage({
|
|
|
// count: 1, //默认9
|
| xqd
@@ -247,6 +316,14 @@
|
|
|
background-color: $pageColor;
|
|
|
}
|
|
|
|
|
|
+ .avatar {
|
|
|
+ width: 176rpx;
|
|
|
+ height: 176rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
.topCard {
|
|
|
width: 100%;
|
|
|
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
| xqd
@@ -255,14 +332,15 @@
|
|
|
background-position: center;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
-
|
|
|
+
|
|
|
|
|
|
.user {
|
|
|
width: 690rpx;
|
|
|
height: 176rpx;
|
|
|
position: relative;
|
|
|
margin-bottom: 38rpx;
|
|
|
- .user-avatar{
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
object-fit: cover;
|
|
|
object-position: center;
|
|
|
}
|
| xqd
@@ -315,12 +393,14 @@
|
|
|
padding-right: 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
margin-bottom: 24rpx;
|
|
|
+
|
|
|
.flex {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
height: 68rpx;
|
|
|
width: 650rpx;
|
|
|
+
|
|
|
.join {
|
|
|
font-size: 36rpx;
|
|
|
font-family: PingFang-SC-Bold, PingFang-SC;
|
| xqd
@@ -340,44 +420,51 @@
|
|
|
|
|
|
|
|
|
}
|
|
|
- .orders{
|
|
|
+
|
|
|
+ .orders {
|
|
|
width: 690rpx;
|
|
|
background: $bgColor;
|
|
|
border-radius: 8rpx;
|
|
|
padding: 40rpx 30rpx 36rpx 36rpx;
|
|
|
box-sizing: border-box;
|
|
|
- .nav{
|
|
|
+
|
|
|
+ .nav {
|
|
|
height: 50rpx;
|
|
|
width: 633rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- .myorder{
|
|
|
+
|
|
|
+ .myorder {
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Heavy, PingFang-SC;
|
|
|
font-weight: 800;
|
|
|
color: #333333;
|
|
|
}
|
|
|
- .more{
|
|
|
+
|
|
|
+ .more {
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
font-weight: bold;
|
|
|
color: #627885;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- .content{
|
|
|
+
|
|
|
+ .content {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- padding:0 20rpx;
|
|
|
- margin-top:72rpx;
|
|
|
- .flexbox{
|
|
|
+ padding: 0 20rpx;
|
|
|
+ margin-top: 72rpx;
|
|
|
+
|
|
|
+ .flexbox {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- text{
|
|
|
- margin-top:16rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-top: 16rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
| xqd
@@ -389,36 +476,41 @@
|
|
|
|
|
|
|
|
|
}
|
|
|
- .list{
|
|
|
+
|
|
|
+ .list {
|
|
|
width: 100%;
|
|
|
padding-top: 32rpx;
|
|
|
- padding-bottom:32rpx;
|
|
|
- border-bottom: 2rpx solid #F0F0F0;
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+ border-bottom: 2rpx solid #F0F0F0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
- &:first-child{
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
padding-top: 50rpx;
|
|
|
}
|
|
|
- .title{
|
|
|
+
|
|
|
+ .title {
|
|
|
font-size: 36rpx;
|
|
|
font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
font-weight: bold;
|
|
|
color: #333333;
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
- .container{
|
|
|
+
|
|
|
+ .container {
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
}
|
|
|
- image{
|
|
|
- width: 12rpx ;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 12rpx;
|
|
|
height: 20rpx;
|
|
|
position: absolute;
|
|
|
- top:70rpx;
|
|
|
+ top: 70rpx;
|
|
|
right: 0rpx;
|
|
|
}
|
|
|
}
|