更新用户头像昵称功能
This commit is contained in:
9
.gitignore
vendored
9
.gitignore
vendored
@@ -3,3 +3,12 @@
|
||||
node_modules/
|
||||
.vscode/
|
||||
.hbuilderx/
|
||||
/.idea/inspectionProfiles/Project_Default.xml
|
||||
/.idea/.gitignore
|
||||
/.idea/cashier_wx.iml
|
||||
/.idea/jsLibraryMappings.xml
|
||||
/.idea/misc.xml
|
||||
/.idea/modules.xml
|
||||
/.idea/uniappSupport.xml
|
||||
/.idea/UniappTool.xml
|
||||
/.idea/vcs.xml
|
||||
|
||||
@@ -31,6 +31,14 @@ export const APIuser = (data) => {
|
||||
})
|
||||
}
|
||||
|
||||
export const updateUserInfoReq = (data) => {
|
||||
return request({
|
||||
url: url + '/user',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//获取手机号
|
||||
export const APIuserphone = (data) => {
|
||||
return request({
|
||||
|
||||
@@ -1,52 +1,32 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<image
|
||||
class="topBack"
|
||||
:src="
|
||||
<image class="topBack" :src="
|
||||
userInfo.shopExtendList
|
||||
? userInfo.shopExtendList[1].value
|
||||
? userInfo.shopExtendList[1].value
|
||||
: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'
|
||||
: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'
|
||||
"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
" mode="aspectFill"></image>
|
||||
<view class="myContent">
|
||||
<view class="my_info flex-between">
|
||||
<view class="my_info_left">
|
||||
<image
|
||||
class="my_info_left_head"
|
||||
:src="userInfo.headImg"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="name">{{ userInfo.nickName }}</view>
|
||||
<button class="atatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- <view class="name">{{ userInfo.nickName }}</view> -->
|
||||
<input type="nickname" class="name" v-model="userInfo.nickName" placeholder="输入昵称"
|
||||
@blur="onNicknameInput" />
|
||||
</view>
|
||||
<view class="right-icons">
|
||||
<image
|
||||
class="my_info_right_qr"
|
||||
src="/static/icon/code.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image class="my_info_right_qr" src="/static/icon/code.png" mode="aspectFill"></image>
|
||||
<view class="msg-view" @click="viewUserMsgList">
|
||||
<view class="msg-icon-wrapper">
|
||||
<image
|
||||
v-if="unreadMsgCount > 0"
|
||||
class="my-msg-icon"
|
||||
src="/static/mine/msg_select.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
class="my-msg-icon"
|
||||
src="/static/mine/msg.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image v-if="unreadMsgCount > 0" class="my-msg-icon" src="/static/mine/msg_select.png"
|
||||
mode="aspectFill"></image>
|
||||
<image v-else class="my-msg-icon" src="/static/mine/msg.png" mode="aspectFill"></image>
|
||||
|
||||
<!-- 角标 -->
|
||||
<view
|
||||
v-if="unreadMsgCount > 0"
|
||||
class="badge"
|
||||
>
|
||||
<view v-if="unreadMsgCount > 0" class="badge">
|
||||
<text class="badge-text">{{ unreadMsgCount > 99 ? '99+' : unreadMsgCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -69,11 +49,9 @@
|
||||
<view class="amount">
|
||||
<view class="u-flex u-flex-between u-m-t-20">
|
||||
<view class="u-flex">
|
||||
<image
|
||||
style="width: 50rpx; height: 37rpx"
|
||||
<image style="width: 50rpx; height: 37rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
mode="aspectFill"></image>
|
||||
<text class="color-333 font-14 u-m-l-20">储值</text>
|
||||
</view>
|
||||
<view class="u-flex color-666" @click="toChargeList">
|
||||
@@ -83,18 +61,9 @@
|
||||
</view>
|
||||
|
||||
<view class="card-list">
|
||||
<view
|
||||
class="card-list-item"
|
||||
v-for="(item, index) in rechargeList"
|
||||
:key="index"
|
||||
@click="toCharge(item)"
|
||||
>
|
||||
<up-image
|
||||
radius="20rpx"
|
||||
width="182rpx"
|
||||
height="182rpx"
|
||||
:src="item.logo"
|
||||
></up-image>
|
||||
<view class="card-list-item" v-for="(item, index) in rechargeList" :key="index"
|
||||
@click="toCharge(item)">
|
||||
<up-image radius="20rpx" width="182rpx" height="182rpx" :src="item.logo"></up-image>
|
||||
<view class="info text-center">
|
||||
<view class="color-333 u-m-t-14">
|
||||
<text class="font-10">¥</text>
|
||||
@@ -107,12 +76,8 @@
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-flex u-flex-column u-flex-center"
|
||||
style="width: 12px"
|
||||
v-if="rechargeList.length"
|
||||
@click="toChargeList"
|
||||
>
|
||||
<view class="u-flex u-flex-column u-flex-center" style="width: 12px" v-if="rechargeList.length"
|
||||
@click="toChargeList">
|
||||
<view class="text-center color-333 font-12">查看全部</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -120,11 +85,8 @@
|
||||
<view class="vip u-m-t-40">
|
||||
<view class="u-flex u-flex-between u-m-t-20">
|
||||
<view class="u-flex">
|
||||
<image
|
||||
style="width: 50rpx; height: 40rpx"
|
||||
src="/static/icon/vip.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image style="width: 50rpx; height: 40rpx" src="/static/icon/vip.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="color-333 font-14 u-m-l-20">会员</text>
|
||||
</view>
|
||||
<view class="u-flex color-666" @click="tomemberList">
|
||||
@@ -134,43 +96,26 @@
|
||||
</view>
|
||||
|
||||
<view class="card-list">
|
||||
<view
|
||||
class="card-list-item"
|
||||
v-for="(item, index) in memberList"
|
||||
:key="index"
|
||||
@click="tomember(item)"
|
||||
>
|
||||
<up-image
|
||||
radius="20rpx"
|
||||
width="182rpx"
|
||||
height="182rpx"
|
||||
:src="item.logo"
|
||||
></up-image>
|
||||
<view class="card-list-item" v-for="(item, index) in memberList" :key="index"
|
||||
@click="tomember(item)">
|
||||
<up-image radius="20rpx" width="182rpx" height="182rpx" :src="item.logo"></up-image>
|
||||
<view class="info text-center">
|
||||
<view class="font-12 color-666 u-m-t-14 u-line-1">{{
|
||||
item.shopName
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-flex u-flex-column u-flex-center"
|
||||
style="width: 12px"
|
||||
v-if="memberList.length"
|
||||
>
|
||||
<view class="text-center color-333 font-12" @click="tomemberList"
|
||||
>查看全部</view
|
||||
>
|
||||
<view class="u-flex u-flex-column u-flex-center" style="width: 12px" v-if="memberList.length">
|
||||
<view class="text-center color-333 font-12" @click="tomemberList">查看全部</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="amount">
|
||||
<view class="u-flex u-flex-between u-m-t-20">
|
||||
<view class="u-flex">
|
||||
<image
|
||||
style="width: 50rpx; height: 44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image style="width: 50rpx; height: 44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="color-333 font-14 u-m-l-20">积分</text>
|
||||
</view>
|
||||
<view class="u-flex color-666" @click="toCoin">
|
||||
@@ -180,18 +125,9 @@
|
||||
</view>
|
||||
|
||||
<view class="card-list">
|
||||
<view
|
||||
class="card-list-item"
|
||||
v-for="(item, index) in coinList"
|
||||
:key="index"
|
||||
@click="toCoin(item)"
|
||||
>
|
||||
<up-image
|
||||
radius="20rpx"
|
||||
width="182rpx"
|
||||
height="182rpx"
|
||||
:src="item.logo"
|
||||
></up-image>
|
||||
<view class="card-list-item" v-for="(item, index) in coinList" :key="index"
|
||||
@click="toCoin(item)">
|
||||
<up-image radius="20rpx" width="182rpx" height="182rpx" :src="item.logo"></up-image>
|
||||
<view class="info text-center">
|
||||
<view class="color-333 u-m-t-14">
|
||||
<text class="font-10">¥</text>
|
||||
@@ -204,12 +140,8 @@
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-flex u-flex-column u-flex-center"
|
||||
style="width: 12px"
|
||||
v-if="coinList.length"
|
||||
@click="toCoin"
|
||||
>
|
||||
<view class="u-flex u-flex-column u-flex-center" style="width: 12px" v-if="coinList.length"
|
||||
@click="toCoin">
|
||||
<view class="text-center color-333 font-12">查看全部</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -217,18 +149,10 @@
|
||||
</view>
|
||||
<view class="my_item my_fun u-m-t-30">
|
||||
<view class="my_fun_list">
|
||||
<view
|
||||
class="my_list_item"
|
||||
v-for="(item, index) in myFunList"
|
||||
:key="index"
|
||||
@click="clickTo(item, index)"
|
||||
>
|
||||
<view class="my_list_item" v-for="(item, index) in myFunList" :key="index"
|
||||
@click="clickTo(item, index)">
|
||||
<view class="my_list_item_left">
|
||||
<image
|
||||
class="my_list_item_icon"
|
||||
:src="item.icon"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
|
||||
<view class="my_list_item_name">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="my_list_item_right u-flex">
|
||||
@@ -237,34 +161,19 @@
|
||||
}}</text>
|
||||
<!-- <text v-else-if="item.type=='my_coupon'" class="font-12 ">{{userInfo.couponNum || 0}}</text> -->
|
||||
<text class="font-12 color-999" v-else>查看</text>
|
||||
<u-icon
|
||||
class="u-m-t-2"
|
||||
name="arrow-right"
|
||||
color="#999999"
|
||||
size="12"
|
||||
></u-icon>
|
||||
<u-icon class="u-m-t-2" name="arrow-right" color="#999999" size="12"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <l-qrcode :value="wechatAcQrcode" @complete="e=>qrcodeResult(e)"/> -->
|
||||
<view
|
||||
class="qrcode u-flex u-col-center justify-between"
|
||||
v-if="showQrcode"
|
||||
>
|
||||
<view class="qrcode u-flex u-col-center justify-between" v-if="showQrcode">
|
||||
<view>
|
||||
<view class="color-000 font-14 font-bold">扫码关注公众号</view>
|
||||
<view class="u-m-t-16 color-999 font-12"
|
||||
>长按识别关注,更多优惠不能错过</view
|
||||
>
|
||||
<view class="u-m-t-16 color-999 font-12">长按识别关注,更多优惠不能错过</view>
|
||||
</view>
|
||||
<up-image
|
||||
width="178rpx"
|
||||
height="178rpx"
|
||||
:show-menu-by-longpress="true"
|
||||
:src="qrcode"
|
||||
></up-image>
|
||||
<up-image width="178rpx" height="178rpx" :show-menu-by-longpress="true" :src="qrcode"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -279,13 +188,35 @@
|
||||
import weQrcode from "@/components/wechat-ac-qrcode.vue";
|
||||
import devetools from "@/components/devetools.vue";
|
||||
|
||||
import { ref, computed, onMounted, reactive, watch } from "vue";
|
||||
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
|
||||
import { productStore } from "@/stores/user.js";
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
reactive,
|
||||
watch
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow
|
||||
} from "@dcloudio/uni-app";
|
||||
import {
|
||||
productStore
|
||||
} from "@/stores/user.js";
|
||||
import * as vipApi from "@/common/api/account/vip.js";
|
||||
import * as rechargeApi from "@/common/api/market/recharge.js";
|
||||
import { pointsShopList } from '@/common/api/market/points.js'
|
||||
import { getUnReadCountReq } from "../../common/api/account/message";
|
||||
import {
|
||||
pointsShopList
|
||||
} from '@/common/api/market/points.js'
|
||||
import {
|
||||
getUnReadCountReq
|
||||
} from "../../common/api/account/message";
|
||||
import {
|
||||
updateUserInfoReq
|
||||
} from "../../common/api/api";
|
||||
import {
|
||||
uploadFile
|
||||
} from '@/common/api/upload.js';
|
||||
|
||||
|
||||
|
||||
@@ -419,7 +350,9 @@ const clickTo = (item, index) => {
|
||||
let shopId = null;
|
||||
switch (item.type) {
|
||||
case "msg":
|
||||
uni.navigateTo({ url: "/pageChat/index" });
|
||||
uni.navigateTo({
|
||||
url: "/pageChat/index"
|
||||
});
|
||||
break;
|
||||
case "my_order":
|
||||
uni.pro.switchTab("order/index");
|
||||
@@ -528,7 +461,15 @@ const viewUserMsgList = () => {
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
store.actionsAPIuser();
|
||||
loadUserInfo()
|
||||
console.log("userInfo", userInfo);
|
||||
getData();
|
||||
|
||||
getUnReadMsgCount()
|
||||
});
|
||||
|
||||
const loadUserInfo = async () => {
|
||||
await store.actionsAPIuser();
|
||||
if (uni.cache.get("shopId")) {
|
||||
Object.assign(userInfo, uni.cache.get("orderVIP"));
|
||||
} else {
|
||||
@@ -537,11 +478,7 @@ onShow(() => {
|
||||
...uni.cache.get("userInfo").assetsSummary,
|
||||
});
|
||||
}
|
||||
console.log("userInfo", userInfo);
|
||||
getData();
|
||||
|
||||
getUnReadMsgCount()
|
||||
});
|
||||
}
|
||||
|
||||
const qrcode = ref("");
|
||||
const showQrcode = computed(() => {
|
||||
@@ -550,6 +487,25 @@ const showQrcode = computed(() => {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
const onChooseAvatar = async (e) => {
|
||||
const fileRes = await uploadFile(e.detail.avatarUrl)
|
||||
updateUserInfo({
|
||||
"headImg": fileRes
|
||||
})
|
||||
}
|
||||
|
||||
const onNicknameInput = (e) => {
|
||||
updateUserInfo({
|
||||
"nickName": e.detail.value
|
||||
})
|
||||
}
|
||||
|
||||
const updateUserInfo = async (param) => {
|
||||
await updateUserInfoReq(param)
|
||||
|
||||
loadUserInfo()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -574,6 +530,13 @@ const showQrcode = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.atatar-btn {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.my_info_left_head {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
@@ -714,12 +677,14 @@ const showQrcode = computed(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
padding: 24rpx;
|
||||
margin: 60rpx 32rpx 60rpx 32rpx;
|
||||
border-radius: 18rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
}
|
||||
|
||||
.qrcode-box {
|
||||
position: fixed;
|
||||
transform: translateX(200vw, 200vh);
|
||||
|
||||
Reference in New Issue
Block a user