541 lines
10 KiB
Vue
541 lines
10 KiB
Vue
<template>
|
||
<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
|
||
|
||
<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" :value="nickName" placeholder="请输入昵称" name="nickname" @blur="onUpdateNick" />
|
||
<text class="mt-18 font text_2">剩余积分：{{ myPoints }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row equal-division">
|
||
<view class="flex-col items-center" @click="goto(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="goto(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="goto(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="goto(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="goto(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-37">
|
||
<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-row justify-between group_4" @click="jumpToBookingOrder">
|
||
<view class="flex-row items-center">
|
||
<image class="shrink-0 image_8"
|
||
:src="mineUrl + '/main/wdyy.png'" />
|
||
<text class="font_2 text_9">我 的 预 约</text>
|
||
</view>
|
||
<image class="self-start image_4 image_9"
|
||
:src="mineUrl + '/main/yjt.png'" />
|
||
</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">
|
||
<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>
|
||
</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 } from '../../../common/globalImagesUrl';
|
||
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
||
|
||
const bkgUrl = ref(mineUrl + '/main/bkg.png')
|
||
|
||
onPullDownRefresh( async ()=>{ //下拉刷新
|
||
await getMyUser()
|
||
setTimeout(()=>{
|
||
uni.stopPullDownRefresh() //停止下拉刷新
|
||
},1000)
|
||
})
|
||
|
||
onLoad(() => {
|
||
getFonts() //启动使从服务器下载字体
|
||
})
|
||
|
||
onMounted(() => {
|
||
getMyUser()
|
||
})
|
||
|
||
const goToText = () => { //跳转到联系人信息
|
||
uni.navigateTo({
|
||
url: '/pages/mine/Contact/testContact'
|
||
})
|
||
}
|
||
const goTo = ()=>{ //跳转到预约
|
||
uni.navigateTo({
|
||
url: '/pages/mine/bookings/booking'
|
||
})
|
||
}
|
||
const goto = (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 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) => {
|
||
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) => {
|
||
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 myPoints = ref(0)
|
||
const getMyUser = async () => {
|
||
const res = await uni.request({
|
||
url: baseUrl + '/user/get/login',
|
||
method: 'GET',
|
||
header: {
|
||
cookie
|
||
}
|
||
})
|
||
console.log(res.data.data)
|
||
nickName.value = res.data.data.userName
|
||
myAvatar.value = res.data.data.userAvatar
|
||
myPoints.value = res.data.data.points
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
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: #000000;
|
||
font-size: 40rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 40.61rpx;
|
||
}
|
||
|
||
.font {
|
||
font-size: 28.13rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 27.02rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.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_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: #000000;
|
||
}
|
||
|
||
.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: #000000;
|
||
}
|
||
|
||
.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> |