XinLingKeJi/jdt-user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i

Browse Source
This commit is contained in:
YuanHuakk
2023-08-15 13:29:52 +08:00
parent 433a4d8f3d
commit c081f0fc29
25 changed files with 1328 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/user/index.config.ts
View File

@@ -1,4 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '个人中心',
navigationStyle: 'custom',
navigationStyle: 'custom'
})

418
src/pages/user/index.vue
View File

@@ -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>