v1.0
This commit is contained in:
hupeng
436
pages/user/user.vue
Normal file
436
pages/user/user.vue
Normal file
@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<layout class="user">
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:safeAreaInsetTop="true"
|
||||
height="0"
|
||||
bgColor="transparent"
|
||||
leftIcon=""
|
||||
/>
|
||||
|
||||
<container>
|
||||
<view
|
||||
class="user-card"
|
||||
v-if="main.user"
|
||||
>
|
||||
<view
|
||||
class="avatar-box"
|
||||
@tap=""
|
||||
>
|
||||
<button
|
||||
class="avatar"
|
||||
open-type="chooseAvatar"
|
||||
@chooseavatar="handleChooseAvatar"
|
||||
>
|
||||
<image :src="main.user.avatar" />
|
||||
</button>
|
||||
<view class="avatar-name">
|
||||
{{ main.user.nickname }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="user-card"
|
||||
v-else
|
||||
@tap="$yrouter.navigateTo({ url: '/pages/login/login' })"
|
||||
>
|
||||
<view class="avatar-box">
|
||||
<view class="avatar">
|
||||
<image :src="main?.user?.avatar" />
|
||||
</view>
|
||||
<view class="avatar-name">
|
||||
点击登录
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view
|
||||
class="card-head"
|
||||
@tap="goOrderList(-1)"
|
||||
>
|
||||
<view class="card-title">我的订单</view>
|
||||
<view class="card-more"><span>
|
||||
查看全部订单
|
||||
</span>
|
||||
<uv-icon name="arrow-right" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<uv-grid
|
||||
:border="false"
|
||||
:col="4"
|
||||
:gutter="0"
|
||||
>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="goOrderList(0)"
|
||||
>
|
||||
<view class="card-grid-item-badge">
|
||||
<uv-badge
|
||||
type="error"
|
||||
max="99"
|
||||
:value="orderUserCountData?.unpaidCount"
|
||||
/>
|
||||
</view>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-dfk.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">待付款</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="goOrderList(1)"
|
||||
>
|
||||
<view class="card-grid-item-badge">
|
||||
<uv-badge
|
||||
type="error"
|
||||
max="99"
|
||||
:value="orderUserCountData?.unshippedCount"
|
||||
/>
|
||||
</view>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-dfh.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">待发货</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="goOrderList(2)"
|
||||
>
|
||||
<view class="card-grid-item-badge">
|
||||
<uv-badge
|
||||
type="error"
|
||||
max="99"
|
||||
:value="orderUserCountData?.receivedCount"
|
||||
/>
|
||||
</view>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-dsh.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">待收货</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="goOrderList(3)"
|
||||
>
|
||||
<view class="card-grid-item-badge">
|
||||
<uv-badge
|
||||
type="error"
|
||||
max="99"
|
||||
:value="orderUserCountData?.evaluatedCount"
|
||||
/>
|
||||
</view>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-dpj.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">待评价</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
</uv-grid>
|
||||
</view>
|
||||
</view>
|
||||
<blank size="10"></blank>
|
||||
|
||||
<view class="card">
|
||||
<view class="card-content">
|
||||
<uv-grid
|
||||
:border="false"
|
||||
:col="4"
|
||||
:gutter="0"
|
||||
>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="goFootprint()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-wdzj.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">我的足迹</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="$toAuth()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-yhq.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">优惠券</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="goCollect()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-wdsc.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">我的收藏</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="$toAuth()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-kqzb.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">开启直播</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="$toAuth()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-wdtg.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">我的推广</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="$toAuth()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-kqjl.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">砍价记录</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="toRefundList()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-kqjl.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">售后记录</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="$toAuth()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-lxkf.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">联系客服</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
</uv-grid>
|
||||
</view>
|
||||
</view>
|
||||
<blank size="10"></blank>
|
||||
<view class="card">
|
||||
<view class="card-content">
|
||||
<uv-grid
|
||||
:border="false"
|
||||
:col="4"
|
||||
:gutter="0"
|
||||
>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="goAddress()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-zhsz.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">地址管理</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<view
|
||||
class="card-grid-item"
|
||||
@tap="goUserInfo()"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/icon-zhsz.png"
|
||||
alt=""
|
||||
>
|
||||
<span class="card-grid-item-label">账号设置</span>
|
||||
</view>
|
||||
</uv-grid-item>
|
||||
</uv-grid>
|
||||
</view>
|
||||
</view>
|
||||
</container>
|
||||
<blank size="15"></blank>
|
||||
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { orderUserCount } from '@/api/order'
|
||||
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { navigateTo } from '@/utils/router'
|
||||
|
||||
import { updateAvatar } from '@/api/user'
|
||||
|
||||
import { useMainStore } from '@/store/store'
|
||||
const main = useMainStore()
|
||||
console.log("--> % main:\n", main)
|
||||
|
||||
const orderUserCountData = ref(null)
|
||||
|
||||
const handleOrderUserCount = async () => {
|
||||
let res = await orderUserCount()
|
||||
orderUserCountData.value = res
|
||||
}
|
||||
|
||||
const goOrderList = (type) => {
|
||||
navigateTo({
|
||||
url: "/pages/orderList/orderList",
|
||||
query: {
|
||||
type
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const goCollect = (type) => {
|
||||
navigateTo({
|
||||
url: "/pages/collect/collect",
|
||||
query: {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const goFootprint = (type) => {
|
||||
navigateTo({
|
||||
url: "/pages/footprint/footprint",
|
||||
query: {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const goAddress = () => {
|
||||
navigateTo({
|
||||
url: "/pages/address/address"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const toNot = () => {
|
||||
uni.showToast({
|
||||
title: '暂未开放',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
})
|
||||
}
|
||||
|
||||
const toRefundList = () => {
|
||||
navigateTo({
|
||||
url: "/pages/refundList/refundList"
|
||||
});
|
||||
}
|
||||
|
||||
const goUserInfo = () => {
|
||||
navigateTo({
|
||||
url: "/pages/userInfo/userInfo"
|
||||
});
|
||||
}
|
||||
|
||||
const handleChooseAvatar = async (e) => {
|
||||
const { detail } = e
|
||||
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
await updateAvatar({
|
||||
avatarFile: detail.avatarUrl
|
||||
})
|
||||
uni.hideLoading()
|
||||
main.getUserInfo()
|
||||
console.log("gxs --> % handleChooseAvatar % e:\n", e)
|
||||
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
handleOrderUserCount()
|
||||
main.getUserInfo()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.user-card {
|
||||
padding: 50rpx 0;
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
background: none;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.avatar-name {
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user