488 lines
12 KiB
Vue
488 lines
12 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="userInfo.data?.avatarUrl" />
|
|
</nut-avatar>
|
|
</view>
|
|
<view class="user-center-card__header__info">
|
|
<view
|
|
class="user-center-card__header__info__name"
|
|
@click="toPage('/pages/users/user_setting/index')"
|
|
>{{ userInfo.data?.nickName }}
|
|
</view>
|
|
<view v-if="!userInfo.data?.phone">
|
|
<nut-button
|
|
size="mini"
|
|
open-type="getPhoneNumber"
|
|
@getphonenumber="getphonenumber"
|
|
>点击绑定手机号
|
|
</nut-button>
|
|
</view>
|
|
</view>
|
|
<view class="rightIcon">
|
|
<Scan style="margin-right: 20px" @click="scanCode" size="22" />
|
|
<button v-if="isLogin" open-type="contact">
|
|
<Message
|
|
color="#666666"
|
|
style="margin-right: 20px"
|
|
@click="toSetting"
|
|
size="22"
|
|
/>
|
|
</button>
|
|
|
|
<Setting style="margin-right: 20px" @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" @click="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"/> -->
|
|
<IconFont
|
|
name="http://article.biliimg.com/bfs/article/131eda0add8662808d97ffb1191d19bf3e420647.png"
|
|
size="40"
|
|
/>
|
|
<view class="center-text">待付款</view>
|
|
</view>
|
|
<view class="center-t" @click="toOrderList(2)">
|
|
<!-- <Clock size="25px"/> -->
|
|
<IconFont
|
|
name="http://article.biliimg.com/bfs/article/002434c9ed4774cb732517eb27e0ff547a41c606.png"
|
|
size="40"
|
|
/>
|
|
<view class="center-text">待使用</view>
|
|
</view>
|
|
<view class="center-t" @click="toOrderList(3)">
|
|
<!-- <Shop size="25px"/> -->
|
|
<IconFont
|
|
name="http://article.biliimg.com/bfs/article/7c2ca0228180fe5f3b1d74b0043d80e76c42eb7d.png"
|
|
size="40"
|
|
/>
|
|
<view class="center-text">已使用</view>
|
|
</view>
|
|
<view class="center-t" @click="toOrderList(4)">
|
|
<!-- <Del size="25px"/> -->
|
|
<IconFont
|
|
name="http://article.biliimg.com/bfs/article/c4f4e069dddfa7104f794a46a759a7ed478b81ea.png"
|
|
size="40"
|
|
/>
|
|
<view class="center-text">已失效</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的服务 -->
|
|
<view class="user-center" v-if="isLogin">
|
|
<view>我的服务</view>
|
|
<view class="box">
|
|
<view
|
|
class="box-mini"
|
|
v-for="(item, idx) in userMenuList"
|
|
:key="idx"
|
|
@click="toPage(item.url)"
|
|
>
|
|
<!-- <image :src="item.icon" /> -->
|
|
<IconFont size="40" :name="item.icon"></IconFont>
|
|
<view class="label">{{ item.label }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商家管理 -->
|
|
<view
|
|
class="mer-box"
|
|
v-if="userInfo.data?.bid && userInfo.store_status === 1"
|
|
>
|
|
<nut-grid :gutter="10" :border="false">
|
|
<nut-grid-item
|
|
:border="false"
|
|
v-if="userInfo.data.permission.dd"
|
|
text="点单"
|
|
@click="toPage('/pages/admin/add_order/index')"
|
|
>
|
|
<IconFont
|
|
size="40"
|
|
:name="require('../../static/user/1-1.png')"
|
|
></IconFont>
|
|
</nut-grid-item>
|
|
<nut-grid-item
|
|
:border="false"
|
|
v-if="userInfo.data.permission.hx"
|
|
text="订单核销"
|
|
@click="toPage('/pages/admin/verify/index')"
|
|
>
|
|
<IconFont
|
|
size="40"
|
|
:name="require('../../static/user/1-2.png')"
|
|
></IconFont>
|
|
</nut-grid-item>
|
|
<nut-grid-item
|
|
:border="false"
|
|
v-if="userInfo.data.permission.tj"
|
|
text="订单统计"
|
|
@click="toPage('/pages/admin/order_manage/index')"
|
|
>
|
|
<IconFont
|
|
size="40"
|
|
:name="require('../../static/user/1-3.png')"
|
|
></IconFont>
|
|
</nut-grid-item>
|
|
<nut-grid-item
|
|
:border="false"
|
|
v-if="userInfo.data.permission.tx"
|
|
text="收益提现"
|
|
@click="toPage('/pages/admin/withdrawal/index')"
|
|
>
|
|
<IconFont
|
|
size="40"
|
|
:name="require('../../static/user/1-4.png')"
|
|
></IconFont>
|
|
</nut-grid-item>
|
|
</nut-grid>
|
|
</view>
|
|
|
|
<!-- 版权 -->
|
|
<!-- <view class="copy">© 2023 </view>-->
|
|
</view>
|
|
<!-- 登录 -->
|
|
<Auth
|
|
:visible="isShowLogin"
|
|
@update:visible="cancelLogin"
|
|
@ok="getUserInfo"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import {
|
|
ArrowRight,
|
|
Setting,
|
|
IconFont,
|
|
Scan,
|
|
Message,
|
|
} from "@nutui/icons-vue-taro";
|
|
import Taro from "@tarojs/taro";
|
|
import Auth from "@/components/Auth.vue";
|
|
import { getPersonalInfo, getPhone, bindParent } from "@/api/user";
|
|
|
|
const isShowLogin = ref(false);
|
|
|
|
const isLogin = ref(false);
|
|
|
|
interface UserInfo {
|
|
data?: {
|
|
nickName?: string;
|
|
avatarUrl?: string;
|
|
ID?: string;
|
|
bid?: string;
|
|
phone?: string;
|
|
uid?: string;
|
|
permission?: any;
|
|
};
|
|
store_status?: number;
|
|
store_name?: string;
|
|
}
|
|
|
|
const userInfo = ref<UserInfo>({});
|
|
|
|
Taro.useDidShow(() => {
|
|
const token = Taro.getStorageSync("token");
|
|
if (token) {
|
|
getUserInfo();
|
|
}
|
|
});
|
|
|
|
const cancelLogin = () => {
|
|
isShowLogin.value = false;
|
|
};
|
|
|
|
const getUserInfo = async () => {
|
|
Taro.showLoading({
|
|
title: "加载中",
|
|
});
|
|
const res = await getPersonalInfo();
|
|
userInfo.value = {
|
|
...res.data,
|
|
data: {
|
|
...res.data.data,
|
|
permission: res.data.data.permission
|
|
? JSON.parse(res.data.data.permission)
|
|
: {},
|
|
},
|
|
};
|
|
Taro.setStorageSync("userInfo", userInfo.value);
|
|
isLogin.value = true;
|
|
cancelLogin();
|
|
Taro.hideLoading();
|
|
};
|
|
|
|
const getphonenumber = async (e: any) => {
|
|
await getPhone({
|
|
uid: userInfo.value.data?.uid,
|
|
code: e.detail.code,
|
|
});
|
|
await getUserInfo();
|
|
};
|
|
|
|
const toOrderList = (e: number) => {
|
|
if (!isLogin.value)
|
|
return Taro.showToast({
|
|
title: "请先登录",
|
|
icon: "none",
|
|
});
|
|
Taro.navigateTo({
|
|
url: `/pages/users/order_list/index?type=${e}`,
|
|
});
|
|
};
|
|
|
|
const userMenuList = ref([
|
|
{
|
|
label: "后结订单",
|
|
url: "/pages/users/pending_order/index",
|
|
icon: require("../../static/user/dd.png"),
|
|
},
|
|
{
|
|
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",
|
|
// },
|
|
{
|
|
label: "我的推广",
|
|
url: "/pages/users/distribution/index",
|
|
icon: "http://jdt168.com/uploads/default/20220829/73656833c1d849c050638f9ee9903b9d.png",
|
|
},
|
|
// {
|
|
// label: "聚合积分",
|
|
// url: "/pages/users/integral/index",
|
|
// icon: require("../../static/jhjf.png"),
|
|
// },
|
|
]);
|
|
|
|
const toSetting = () => {
|
|
Taro.navigateTo({
|
|
url: "/pages/users/setting/index",
|
|
});
|
|
};
|
|
|
|
const clickLogin = () => {
|
|
// isShowLogin.value = true
|
|
Taro.redirectTo({
|
|
url: "/pages/users/login/index",
|
|
});
|
|
};
|
|
|
|
const toPage = (url: string) => {
|
|
Taro.navigateTo({
|
|
url: url,
|
|
});
|
|
};
|
|
|
|
const scanCode = () => {
|
|
Taro.scanCode({
|
|
onlyFromCamera: true,
|
|
scanType: ["qrCode"],
|
|
success: async (data) => {
|
|
try {
|
|
await bindParent({
|
|
uid: data.result,
|
|
});
|
|
Taro.showToast({
|
|
title: "绑定成功",
|
|
icon: "none",
|
|
});
|
|
} catch (error) {
|
|
Taro.showToast({
|
|
title: error.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
};
|
|
</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__avatar {
|
|
img {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
padding-right: 20px;
|
|
|
|
.user-center-card__header__info {
|
|
margin-left: 20px;
|
|
width: 400px;
|
|
color: #333;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.rightIcon {
|
|
height: 100px;
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
// align-items: center;
|
|
button {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
background: transparent;
|
|
-webkit-tap-highlight-color: transparent;
|
|
overflow: hidden;
|
|
position: relative;
|
|
top: -13px;
|
|
}
|
|
|
|
button::after {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-center {
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
margin: 20px;
|
|
padding: 20px;
|
|
width: 710px;
|
|
box-sizing: border-box;
|
|
|
|
.box {
|
|
margin-top: 20px;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-gap: 20px;
|
|
box-sizing: border-box;
|
|
|
|
.box-mini {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
width: 150px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.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;
|
|
width: 710px;
|
|
}
|
|
</style>
|