i
This commit is contained in:
@@ -1,169 +1,327 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view 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">小明</view>
|
||||
<view class="user-center-card__header__info__desc">这个人很懒，什么都没有留下</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--我的订单-->
|
||||
<view class="cell-card">
|
||||
<view class="top">
|
||||
<view>我的订单</view>
|
||||
<view class="sub">
|
||||
<view>全部订单</view>
|
||||
<ArrowRight/>
|
||||
<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>
|
||||
<view class="center">
|
||||
<view class="center-t">
|
||||
<Order size="25px"/>
|
||||
<view class="center-text">待付款</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="center-t">
|
||||
<Clock size="25px"/>
|
||||
<view class="center-text">待使用</view>
|
||||
</view>
|
||||
<view class="center-t">
|
||||
<Shop size="25px"/>
|
||||
<view class="center-text">已使用</view>
|
||||
</view>
|
||||
<view class="center-t">
|
||||
<Del size="25px"/>
|
||||
<view class="center-text">已失效</view>
|
||||
</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="user-center">
|
||||
<view>我的服务</view>
|
||||
<view class="box">
|
||||
<view class="box-mini" v-for="item in 10">
|
||||
<image src="http://jdt168.com/uploads/def/20230612/890553361077384e0c1b1d9e164e2feb.png"/>
|
||||
<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>
|
||||
</view>
|
||||
<!-- 登录 -->
|
||||
<Auth :visible="isShowLogin" @update:visible="cancelLogin" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {reactive, toRefs} from 'vue';
|
||||
import {ArrowRight, Order, Del, Clock, Shop} from '@nutui/icons-vue-taro';
|
||||
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;
|
||||
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;
|
||||
//height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
//flex-direction: row;
|
||||
align-items: center;
|
||||
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;
|
||||
color: #333;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.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;
|
||||
position: absolute;
|
||||
top: 350px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
margin: 20px;
|
||||
padding: 30px;
|
||||
width: 710px;
|
||||
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;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.sub {
|
||||
display: flex;
|
||||
color: #c9c9c9;
|
||||
align-items: center;
|
||||
.sub {
|
||||
display: flex;
|
||||
color: #c9c9c9;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #666;
|
||||
.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-t {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.center-text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.center-text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-center {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 640px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
margin: 20px;
|
||||
padding: 30px;
|
||||
width: 710px;
|
||||
|
||||
.box {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
margin: 20px;
|
||||
padding: 30px;
|
||||
width: 710px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
//justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.box-mini {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 150px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 13px;
|
||||
.box {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user