328 lines
9.0 KiB
Vue
328 lines
9.0 KiB
Vue
<template>
|
|
<view class="app">
|
|
<view
|
|
class="user-center-card__header__transparent"
|
|
v-if="isLogin"
|
|
:style="{width: isLogin ? '100%' : '70%'}"
|
|
>
|
|
<view class="user-center-card__header__avatar">
|
|
<nut-avatar size="large">
|
|
<img
|
|
src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
|
|
/>
|
|
</nut-avatar>
|
|
</view>
|
|
<view class="user-center-card__header__info">
|
|
<view class="user-center-card__header__info__name">小明</view>
|
|
<view class="user-center-card__header__info__desc"
|
|
>ID:{{ 1 }}</view
|
|
>
|
|
</view>
|
|
<view class="rightIcon">
|
|
<Setting @click="toSetting" size="22" />
|
|
</view>
|
|
</view>
|
|
<view v-else class="user-center-card__header__transparent">
|
|
<view class="user-center-card__header__avatar">
|
|
<nut-avatar size="large">
|
|
<img
|
|
src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
|
|
/>
|
|
</nut-avatar>
|
|
</view>
|
|
<view class="user-center-card__header__info">
|
|
<view
|
|
class="user-center-card__header__info__name"
|
|
@tap="clickLogin"
|
|
>点击立即授权</view
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="container">
|
|
<!--我的订单-->
|
|
<view class="cell-card">
|
|
<view class="top">
|
|
<view>我的订单</view>
|
|
<view class="sub" @click="toOrderList(0)">
|
|
<view>全部订单</view>
|
|
<ArrowRight />
|
|
</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="center-t" @click="toOrderList(1)">
|
|
<Order size="25px" />
|
|
<view class="center-text">待付款</view>
|
|
</view>
|
|
<view class="center-t" @click="toOrderList(2)">
|
|
<Clock size="25px" />
|
|
<view class="center-text">待使用</view>
|
|
</view>
|
|
<view class="center-t" @click="toOrderList(3)">
|
|
<Shop size="25px" />
|
|
<view class="center-text">已使用</view>
|
|
</view>
|
|
<view class="center-t" @click="toOrderList(4)">
|
|
<Del size="25px" />
|
|
<view class="center-text">已失效</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的服务 -->
|
|
<view class="user-center">
|
|
<view>我的服务</view>
|
|
<view class="box">
|
|
<view
|
|
class="box-mini"
|
|
v-for="item in userMenuList"
|
|
:key="item.id"
|
|
>
|
|
<!-- <image :src="item.icon" /> -->
|
|
<IconFont size="40" :name="item.icon"></IconFont>
|
|
<view class="label">{{ item.label }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商家管理 -->
|
|
<view class="mer-box">
|
|
<nut-grid :gutter="10" :border="false">
|
|
<nut-grid-item
|
|
:border="false"
|
|
text="订单核销"
|
|
@click="toPage('/pages/admin/verify/index')"
|
|
>
|
|
<IconFont
|
|
size="50"
|
|
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
|
|
></IconFont>
|
|
</nut-grid-item>
|
|
<nut-grid-item text="订单统计">
|
|
<IconFont
|
|
size="50"
|
|
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
|
|
></IconFont>
|
|
</nut-grid-item>
|
|
</nut-grid>
|
|
</view>
|
|
</view>
|
|
<!-- 登录 -->
|
|
<Auth :visible="isShowLogin" @update:visible="cancelLogin" />
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import {
|
|
ArrowRight,
|
|
Order,
|
|
Del,
|
|
Clock,
|
|
Shop,
|
|
Setting,
|
|
IconFont,
|
|
} from "@nutui/icons-vue-taro";
|
|
import Taro from "@tarojs/taro";
|
|
import Auth from "../../components/Auth.vue";
|
|
|
|
const isShowLogin = ref(false);
|
|
|
|
const isLogin = ref(false);
|
|
|
|
// const userInfo = ref({});
|
|
|
|
Taro.useLoad(() => {
|
|
const token = Taro.getStorageSync("token");
|
|
if (token) {
|
|
isLogin.value = true;
|
|
}
|
|
});
|
|
|
|
const cancelLogin = () => {
|
|
isShowLogin.value = false;
|
|
};
|
|
|
|
const toOrderList = (e: number) => {
|
|
Taro.navigateTo({
|
|
url: `/pages/users/order_list/index?type=${e}`,
|
|
});
|
|
};
|
|
|
|
const userMenuList = ref([
|
|
{
|
|
id: 1,
|
|
label: "我的账户",
|
|
url: "/pages/users/account/index",
|
|
icon: "http://jdt168.com/uploads/default/20220829/e819815623276fdbb9a54d685292e5c7.png",
|
|
},
|
|
// {
|
|
// id: 2,
|
|
// label: "商家入驻",
|
|
// url: "/pages/users/account/index",
|
|
// icon: "http://jdt168.com/uploads/default/20220829/583fd6cbd729b24eab9c3cae20ae694d.png",
|
|
// },
|
|
{
|
|
id: 3,
|
|
label: "分销中心",
|
|
url: "/pages/users/account/index",
|
|
icon: "http://jdt168.com/uploads/default/20220829/73656833c1d849c050638f9ee9903b9d.png",
|
|
},
|
|
{
|
|
id: 4,
|
|
label: "关注商家",
|
|
url: "/pages/users/account/index",
|
|
icon: "http://jdt168.com/uploads/default/20220829/13637589cd20785aa21fca1d4f9b26bc.png",
|
|
},
|
|
{
|
|
id: 5,
|
|
label: "问题反馈",
|
|
url: "/pages/users/account/index",
|
|
icon: "http://jdt168.com/uploads/default/20220829/7437d90fdd0fba868084bd9cd0b59049.png",
|
|
},
|
|
]);
|
|
|
|
const toSetting = () => {
|
|
Taro.navigateTo({
|
|
url: "/pages/users/setting/index",
|
|
});
|
|
};
|
|
|
|
const clickLogin = () => {
|
|
isShowLogin.value = true;
|
|
};
|
|
|
|
const toPage = (url: string) => {
|
|
Taro.navigateTo({
|
|
url: url,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.app {
|
|
box-sizing: border-box;
|
|
background-color: #f5f5f5;
|
|
height: 100vh;
|
|
background-image: url("https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png");
|
|
background-size: auto 40%;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666));
|
|
}
|
|
|
|
.user-center-card__header__transparent {
|
|
position: absolute;
|
|
left: 30px;
|
|
top: 200px;
|
|
background-color: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
|
|
.user-center-card__header__info {
|
|
margin-left: 20px;
|
|
width: 400px;
|
|
color: #333;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.rightIcon {
|
|
height: 100px;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
position: absolute;
|
|
top: 350px;
|
|
width: 710px;
|
|
}
|
|
|
|
.cell-card {
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
margin: 20px;
|
|
padding: 30px;
|
|
width: 710px;
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.sub {
|
|
display: flex;
|
|
color: #c9c9c9;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #666;
|
|
padding: 0 30px;
|
|
|
|
.center-t {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.center-text {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-center {
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
margin: 20px;
|
|
padding: 30px;
|
|
width: 710px;
|
|
box-sizing: border-box;
|
|
|
|
.box {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
|
|
.box-mini {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 150px;
|
|
margin-bottom: 20px;
|
|
margin-right: 13px;
|
|
|
|
.label {
|
|
font-size: 25px;
|
|
margin-top: 10px;
|
|
color: #333;
|
|
}
|
|
|
|
image {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mer-box {
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
margin: 20px;
|
|
//padding: 30px;
|
|
width: 710px;
|
|
}
|
|
</style>
|