608 lines
12 KiB
Vue
608 lines
12 KiB
Vue
<template>
|
|
<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
|
|
|
|
<image class="imgPos_1" :src="mineUrl + '/main/mh.png'" />
|
|
<image class="imgPos_2" :src="mineUrl + '/main/hb.png'" />
|
|
|
|
<view class="flex-col group">
|
|
<view class="flex-row items-center group_2">
|
|
<button class="avatar_button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" >
|
|
<image class="avatar_son" mode="aspectFill" :src="publicPath + myAvatar" />
|
|
</button>
|
|
|
|
|
|
<view class="ml-20 flex-col items-start flex-1">
|
|
<!-- <text class="text">微信用户</text> -->
|
|
|
|
<input class="text" type="nickname" v-model="nickName" placeholder="请输入昵称" name="nickname"
|
|
@blur="onUpdateNick" maxlength="10" :disabled="disabledInput"/>
|
|
<text class="mt-18 font text_2">剩余积分：{{ myPoints }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row equal-division" style="z-index: 99;">
|
|
<view class="flex-col items-center" @click="gotoOrderListPage(0)">
|
|
<image class="shrink-0 image_2" :src="mineUrl + '/main/all.png'" />
|
|
<text class="font text_3">全部</text>
|
|
</view>
|
|
<view class="flex-col items-center ml-1" @click="gotoOrderListPage(1)">
|
|
<image class="shrink-0 image_2" :src="mineUrl + '/main/dzf.png'" />
|
|
<text class="font text_5">待支付</text>
|
|
</view>
|
|
<view class="flex-col items-center ml-1" @click="gotoOrderListPage(2)">
|
|
<image class="shrink-0 image_2" :src="mineUrl + '/main/dfh.png'" />
|
|
<text class="font text_4">待发货</text>
|
|
</view>
|
|
<view class="flex-col items-center ml-1" @click="gotoOrderListPage(3)">
|
|
<image class="shrink-0 image_2" :src="mineUrl + '/main/dsh.png'" />
|
|
<text class="font text_6">待收货</text>
|
|
</view>
|
|
<view class="flex-col items-center ml-1" @click="gotoOrderListPage(4)">
|
|
<image class="shrink-0 image_2" :src="mineUrl + '/main/ytk.png'" />
|
|
<text class="font text_7">已退款</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col mt-20" v-if="nickName != '未登录'" style="z-index: 99;">
|
|
<view class="flex-col group_3">
|
|
<view class="flex-row justify-between relative" @click="jump_addressList">
|
|
<image class="image_3" :src="mineUrl + '/main/address.png'" />
|
|
<image class="self-start image_4 image_5" :src="mineUrl + '/main/yjt.png'" />
|
|
<text class="font_2 text_8 pos">地 址 列 表</text>
|
|
<view class="divider pos_2"></view>
|
|
</view>
|
|
|
|
<view class="flex-row justify-between relative" @click="goToText">
|
|
<image class="image_6" :src="mineUrl + '/main/contact.png'" />
|
|
<image class="self-start image_4 image_7" :src="mineUrl + '/main/yjt.png'" />
|
|
<text class="font_2 pos_3">联系人列表</text>
|
|
<view class="divider pos_4"></view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col group_3">
|
|
<view class="flex-row justify-between relative" @click="jumpToBookingOrder">
|
|
<image class="image_33" :src="mineUrl + '/main/wdyy.png'" />
|
|
<image class="self-start image_4 image_5" :src="mineUrl + '/main/yjt.png'" />
|
|
<text class="font_2 text_8 pos">我 的 预 约</text>
|
|
<view class="divider pos_2"></view>
|
|
</view>
|
|
|
|
<view class="flex-row justify-between relative" @click="gotoRentOrder">
|
|
<image class="image_6" :src="mineUrl + '/main/rent.png'" />
|
|
<image class="self-start image_4 image_7" :src="mineUrl + '/main/yjt.png'" />
|
|
<text class="font_2 pos_3">我 的 租 赁</text>
|
|
<view class="divider pos_4"></view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col group_5">
|
|
<!-- <view class="divider view"></view> -->
|
|
<view class="flex-row justify-between items-center group_6" @click="jumpToMyCoupon">
|
|
<view class="flex-row items-center">
|
|
<image class="shrink-0 image_10" :src="mineUrl + '/main/coupon.png'" />
|
|
<text class="font_2">我的优惠券</text>
|
|
</view>
|
|
<image class="image_4 image_11" :src="mineUrl + '/main/yjt.png'" />
|
|
</view>
|
|
|
|
<view class="divider view_2"></view>
|
|
|
|
<view class="flex-row justify-between group_7" @click="userLogout" v-if="nickName != '未登录'">
|
|
<view class="flex-row self-center">
|
|
<view class="flex-row shrink-0">
|
|
<image class="shrink-0 image_12" :src="mineUrl + '/main/logout.png'" />
|
|
<text class="ml-10 self-start font_3 text_10">退 出 登 录</text>
|
|
</view>
|
|
</view>
|
|
<image class="self-start image_4 image_13" :src="mineUrl + '/main/yjt.png'" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col mt-20" v-if="nickName === '未登录'">
|
|
<view class="flex-col group_3">
|
|
<view class="flex-row justify-between relative" @click="gotoLogin">
|
|
<image class="image_3" :src="mineUrl + '/main/logout.png'" />
|
|
<image class="self-start image_4 image_5" :src="mineUrl + '/main/yjt.png'" />
|
|
<text class="font_2 text_8 pos">立 即 登 陆</text>
|
|
<!-- <view class="divider pos_2"></view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onMounted,
|
|
ref
|
|
} from 'vue';
|
|
import {
|
|
onShow,
|
|
onLoad
|
|
} from "@dcloudio/uni-app";
|
|
import { baseUrl } from '../../../api/request';
|
|
import { getFonts } from '../../../common/globalFont';
|
|
import { mineUrl } from '../../../common/globalImagesUrl';
|
|
import { publicPath,bkgPubilcPath } from '../../../common/globalImagesUrl';
|
|
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
|
import { JudgeIsNullity } from '../../../common/globalFunction';
|
|
|
|
onPullDownRefresh(async () => { //下拉刷新
|
|
await getMyUser()
|
|
setTimeout(() => {
|
|
uni.stopPullDownRefresh() //停止下拉刷新
|
|
}, 1000)
|
|
})
|
|
|
|
onShow( async ()=>{
|
|
await getMyUser()
|
|
})
|
|
|
|
|
|
onLoad(() => {
|
|
getFonts() //启动使从服务器下载字体
|
|
wx.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ["shareAppMessage","shareTimeline"]
|
|
})
|
|
})
|
|
|
|
const gotoLogin = () => {
|
|
uni.redirectTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getMyUser()
|
|
})
|
|
|
|
const goToText = () => { //跳转到联系人信息
|
|
uni.navigateTo({
|
|
url: '/pages/mine/Contact/testContact'
|
|
})
|
|
}
|
|
const goTo = () => { //跳转到预约
|
|
uni.navigateTo({
|
|
url: '/pages/mine/bookings/booking'
|
|
})
|
|
}
|
|
const gotoOrderListPage = (tab) => {
|
|
uni.navigateTo({
|
|
url: '/pages/my-order/myOrderList/myOrderList?status=' + tab
|
|
})
|
|
}
|
|
|
|
const jumpToBookingOrder = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/book/photoProductsOrderDetail/photoProductsOrderDetail'
|
|
})
|
|
}
|
|
|
|
const jumpToMyCoupon = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/coupon/MyCoupon/MyCoupon'
|
|
})
|
|
}
|
|
|
|
const jump_addressList = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/mine/addressList/addressList'
|
|
})
|
|
}
|
|
const cookie = wx.getStorageSync('cookie')
|
|
|
|
const gotoRentOrder = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/clothesRent/clotherRentOrderList/clotherRentOrderList'
|
|
})
|
|
}
|
|
|
|
const logout = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/user/mini/logout',
|
|
method: 'POST',
|
|
header: {
|
|
cookie
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
const userLogout = () => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '您确定要退出登录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
logout()
|
|
uni.showToast({
|
|
title: '退出成功'
|
|
})
|
|
uni.redirectTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
let tempFile = ''
|
|
const myAvatar = ref(mineUrl + '/main/avatar.png')
|
|
const onChooseAvatar = (e) => {
|
|
if(nickName.value === '未登录') {
|
|
uni.redirectTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
return;
|
|
}
|
|
tempFile = e.detail.avatarUrl
|
|
console.log(tempFile)
|
|
uni.uploadFile({
|
|
url: baseUrl + '/file/uploadFile',
|
|
filePath: tempFile,
|
|
name: 'file',
|
|
formData: {
|
|
biz: 'user_avatar'
|
|
},
|
|
header: {
|
|
cookie
|
|
},
|
|
success: (res) => {
|
|
myAvatar.value = JSON.parse(res.data).data
|
|
updateMyUser()
|
|
},
|
|
fail: (e) => {
|
|
console.log(e)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
const nickName = ref('非遗雅士')
|
|
const onUpdateNick = (e) => {
|
|
if(nickName.value === '未登录') {
|
|
uni.navigateTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
return;
|
|
}
|
|
if (JudgeIsNullity(nickName.value)) {
|
|
getMyUser()
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '呢称不能为空',
|
|
showCancel: false
|
|
})
|
|
return
|
|
}
|
|
nickName.value = e.detail.value
|
|
updateMyUser()
|
|
}
|
|
|
|
|
|
const updateMyUser = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/user/update/my',
|
|
method: 'POST',
|
|
header: {
|
|
cookie
|
|
},
|
|
data: {
|
|
userName: nickName.value,
|
|
userAvatar: myAvatar.value
|
|
}
|
|
})
|
|
console.log(res.data.data)
|
|
}
|
|
|
|
const disabledInput = ref(true)
|
|
const myPoints = ref(0)
|
|
const getMyUser = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/user/get/login',
|
|
method: 'GET',
|
|
header: {
|
|
cookie
|
|
}
|
|
})
|
|
console.log('登陆状态--->',res.data)
|
|
if(res.data.code === 40100) {
|
|
nickName.value = '未登录'
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '未登录'
|
|
})
|
|
} else if(res.data.code === 1) {
|
|
disabledInput.value = false
|
|
nickName.value = res.data.data.userName
|
|
myAvatar.value = res.data.data.userAvatar
|
|
myPoints.value = res.data.data.points
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pos_99 {
|
|
position: absolute;
|
|
left: 3.75rpx;
|
|
right: 37.5rpx;
|
|
top: 124.69rpx;
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
button::after {
|
|
border: none;
|
|
}
|
|
|
|
.ml-1 {
|
|
margin-left: 1.88rpx;
|
|
}
|
|
|
|
.mt-37 {
|
|
margin-top: 69.38rpx;
|
|
}
|
|
|
|
.page {
|
|
padding: 100rpx 0 211.88rpx;
|
|
background-color: #ffffff00;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.imgPos_1 {
|
|
position: absolute;
|
|
top: -80rpx;
|
|
right: 0;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.imgPos_2 {
|
|
position: absolute;
|
|
bottom: -160rpx;
|
|
right: 0;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.group {
|
|
padding: 0 7.5rpx;
|
|
}
|
|
|
|
.group_2 {
|
|
margin: 0 30rpx;
|
|
padding: 0 7.5rpx 37.5rpx;
|
|
border-bottom: solid 0.94rpx #aeaeae;
|
|
}
|
|
|
|
.image {
|
|
border-radius: 50%;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
|
|
.avatar_button {
|
|
padding: 0;
|
|
height: 150rpx;
|
|
width: 150rpx;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.avatar_son {
|
|
border-radius: 50%;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
|
|
.text {
|
|
color: #323232;
|
|
font-size: 40rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 40.61rpx;
|
|
}
|
|
|
|
.font {
|
|
font-size: 28.13rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 27.02rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.text_2 {
|
|
margin-left: 7.5rpx;
|
|
font-size: 30rpx;
|
|
line-height: 27.9rpx;
|
|
}
|
|
|
|
.equal-division {
|
|
margin-right: 5.63rpx;
|
|
}
|
|
|
|
.image_2 {
|
|
width: 144rpx;
|
|
height: 144rpx;
|
|
}
|
|
|
|
.text_3 {
|
|
margin-top: -7.5rpx;
|
|
}
|
|
|
|
.text_5 {
|
|
margin-top: -7.5rpx;
|
|
}
|
|
|
|
.text_4 {
|
|
margin-top: -7.5rpx;
|
|
}
|
|
|
|
.text_6 {
|
|
margin-top: -7.5rpx;
|
|
}
|
|
|
|
.text_7 {
|
|
margin-top: -7.5rpx;
|
|
}
|
|
|
|
.group_3 {
|
|
padding: 0 35.63rpx;
|
|
}
|
|
|
|
.image_33 {
|
|
width: 120rpx;
|
|
height: 123.75rpx;
|
|
}
|
|
|
|
.image_3 {
|
|
width: 120rpx;
|
|
height: 123.75rpx;
|
|
}
|
|
|
|
.image_4 {
|
|
width: 39.38rpx;
|
|
height: 41.25rpx;
|
|
}
|
|
|
|
.image_5 {
|
|
margin-right: 31.88rpx;
|
|
margin-top: 52.5rpx;
|
|
}
|
|
|
|
.font_2 {
|
|
font-size: 37.5rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 36.47rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.text_8 {
|
|
line-height: 35.74rpx;
|
|
}
|
|
|
|
.pos {
|
|
position: absolute;
|
|
left: 121.76rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.divider {
|
|
background-color: #aeaeae;
|
|
height: 0.94rpx;
|
|
}
|
|
|
|
.pos_2 {
|
|
position: absolute;
|
|
left: 3.75rpx;
|
|
right: 37.5rpx;
|
|
top: 117.19rpx;
|
|
}
|
|
|
|
.image_6 {
|
|
width: 120rpx;
|
|
height: 125.63rpx;
|
|
}
|
|
|
|
.image_7 {
|
|
margin-right: 31.88rpx;
|
|
margin-top: 52.5rpx;
|
|
}
|
|
|
|
.pos_3 {
|
|
position: absolute;
|
|
left: 116.72rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.pos_4 {
|
|
position: absolute;
|
|
left: 3.75rpx;
|
|
right: 37.5rpx;
|
|
top: 124.69rpx;
|
|
}
|
|
|
|
.group_4 {
|
|
margin-top: 4rpx;
|
|
padding: 0 28.13rpx 11.25rpx;
|
|
}
|
|
|
|
.image_8 {
|
|
width: 133.13rpx;
|
|
height: 114.38rpx;
|
|
}
|
|
|
|
.text_9 {
|
|
padding-top: 20rpx;
|
|
margin-left: -7.5rpx;
|
|
line-height: 33.99rpx;
|
|
}
|
|
|
|
.image_9 {
|
|
margin-right: 41.25rpx;
|
|
margin-top: 45.5rpx;
|
|
}
|
|
|
|
.group_5 {
|
|
padding: 0 39.38rpx;
|
|
}
|
|
|
|
.view {
|
|
margin-right: 33.75rpx;
|
|
}
|
|
|
|
.group_6 {
|
|
padding: 22.5rpx 0 7.5rpx;
|
|
}
|
|
|
|
.image_10 {
|
|
width: 118.13rpx;
|
|
height: 101.25rpx;
|
|
}
|
|
|
|
.image_11 {
|
|
margin-right: 28.13rpx;
|
|
}
|
|
|
|
.view_2 {
|
|
margin-right: 31.88rpx;
|
|
}
|
|
|
|
.group_7 {
|
|
padding: 28.13rpx 7.5rpx 0;
|
|
z-index: 9;
|
|
}
|
|
|
|
.image_12 {
|
|
width: 91.88rpx;
|
|
height: 91.88rpx;
|
|
}
|
|
|
|
.font_3 {
|
|
font-size: 37.5rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 30.47rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.text_10 {
|
|
margin-top: 26.25rpx;
|
|
}
|
|
|
|
.text_11 {
|
|
margin-top: 22.5rpx;
|
|
}
|
|
|
|
.image_13 {
|
|
margin-right: 20.63rpx;
|
|
margin-top: 16.88rpx;
|
|
}
|
|
|
|
@import url(../../../common/css/global.css);
|
|
</style> |