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-10-08 22:53:13 +08:00
parent b883b02fb9
commit e36d60d015
83 changed files with 18303 additions and 9590 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,418 +1,477 @@
<template>
<view class="app">
<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.avatarUrl"/>
</nut-avatar>
</view>
<view class="user-center-card__header__info">
<view
class="user-center-card__header__transparent"
v-if="isLogin"
:style="{ width: isLogin ? '100%' : '70%' }"
class="user-center-card__header__info__name"
@click="toPage('/pages/users/user_setting/index')"
>{{ userInfo.nickName }}
</view
>
<view class="user-center-card__header__avatar">
<nut-avatar size="large">
<img :src="userInfo.avatarUrl" />
</nut-avatar>
</view>
<view class="user-center-card__header__info">
<view class="user-center-card__header__info__name">{{
userInfo.nickName
}}</view>
<view v-if="!userInfo.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" />
<Setting
style="margin-right: 20px"
@click="toSetting"
size="22"
/>
</view>
<view v-if="!userInfo.phone">
<nut-button
size="mini"
open-type="getPhoneNumber"
@getphonenumber="getphonenumber"
>点击绑定手机号
</nut-button>
</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"/> -->
<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">
<view>我的服务</view>
<view class="box">
<view
class="box-mini"
v-if="isLogin"
v-for="item in userMenuList"
:key="item.id"
@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.bid">
<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 class="copy">© 2023 </view>-->
</view>
<!-- 登录 -->
<Auth
:visible="isShowLogin"
@update:visible="cancelLogin"
@ok="getUserInfo"
</view>
<view class="rightIcon">
<Scan style="margin-right: 20px" @click="scanCode" size="22"/>
<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">
<view>我的服务</view>
<view class="box">
<view
class="box-mini"
v-if="isLogin"
v-for="item in userMenuList"
:key="item.id"
@click="toPage(item.url)"
>
<!-- <image :src="item.icon" /> -->
<IconFont size="40" :name="item.icon"></IconFont>
<view class="label">{{ item.label }}</view>
</view>
<button v-if="isLogin" class="box-mini" open-type='contact'>
<IconFont size="40"
name="http://jdt168.com/uploads/default/20220829/7437d90fdd0fba868084bd9cd0b59049.png"></IconFont>
<text class="label">联系客服</text>
</button>
</view>
</view>
<!-- 商家管理 -->
<view class="mer-box" v-if="userInfo.bid">
<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="订单统计"
@click="toPage('/pages/admin/order_manage/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="收益提现"
@click="toPage('/pages/admin/withdrawal/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="商品管理"-->
<!-- @click="toPage('/pages/product/list/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>
</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 } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import Auth from "@/components/Auth.vue";
import { getPersonalInfo, getPhone, bindParent } from "@/api/user";
import {ref} from 'vue'
import {ArrowRight, Setting, IconFont, Scan} 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 isShowLogin = ref(false)
const isLogin = ref(false);
const isLogin = ref(false)
interface UserInfo {
nickName?: string;
avatarUrl?: string;
ID?: string;
bid?: string;
phone?: string;
uid?: string;
nickName?: string;
avatarUrl?: string;
ID?: string;
bid?: string;
phone?: string;
uid?: string;
}
const userInfo = ref<UserInfo>({});
const userInfo = ref<UserInfo>({})
Taro.useDidShow(() => {
const token = Taro.getStorageSync("token");
if (token) {
getUserInfo();
}
});
const token = Taro.getStorageSync('token')
if (token) {
getUserInfo()
}
})
const cancelLogin = () => {
isShowLogin.value = false;
};
isShowLogin.value = false
}
const getUserInfo = async () => {
Taro.showLoading({
title: "加载中",
});
const res = await getPersonalInfo();
userInfo.value = res.data.data;
Taro.setStorageSync("userInfo", res.data.data);
Taro.setStorageSync("mer_type", res.data.store_type);
isLogin.value = true;
cancelLogin();
Taro.hideLoading();
};
Taro.showLoading({
title: '加载中'
})
const res = await getPersonalInfo()
userInfo.value = res.data.data
Taro.setStorageSync('userInfo', res.data.data)
Taro.setStorageSync('mer_type', res.data.store_type)
isLogin.value = true
cancelLogin()
Taro.hideLoading()
}
const getphonenumber = async (e: any) => {
await getPhone({
uid: userInfo.value.uid,
code: e.detail.code,
});
getUserInfo();
};
await getPhone({
uid: userInfo.value.uid,
code: e.detail.code
})
await getUserInfo()
}
const toOrderList = (e: number) => {
if (!isLogin)
return Taro.showToast({
title: "请先登录",
icon: "none",
});
Taro.navigateTo({
url: `/pages/users/order_list/index?type=${e}`,
});
};
if (!isLogin)
return Taro.showToast({
title: '请先登录',
icon: 'none'
})
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/distribution/index",
icon: "http://jdt168.com/uploads/default/20220829/73656833c1d849c050638f9ee9903b9d.png",
},
{
id: 4,
label: "关注商家",
url: "",
icon: "http://jdt168.com/uploads/default/20220829/13637589cd20785aa21fca1d4f9b26bc.png",
},
{
id: 5,
label: "问题反馈",
url: "",
icon: "http://jdt168.com/uploads/default/20220829/7437d90fdd0fba868084bd9cd0b59049.png",
},
]);
{
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/distribution/index',
icon: 'http://jdt168.com/uploads/default/20220829/73656833c1d849c050638f9ee9903b9d.png'
},
{
id: 4,
label: '关注商家',
url: '',
icon: 'http://jdt168.com/uploads/default/20220829/13637589cd20785aa21fca1d4f9b26bc.png'
}
// {
// id: 5,
// label: '联系客服',
// url: '',
// icon: 'http://jdt168.com/uploads/default/20220829/7437d90fdd0fba868084bd9cd0b59049.png'
// }
])
const toSetting = () => {
Taro.navigateTo({
url: "/pages/users/setting/index",
});
};
Taro.navigateTo({
url: '/pages/users/setting/index'
})
}
const clickLogin = () => {
isShowLogin.value = true;
};
// isShowLogin.value = true
Taro.redirectTo({
url: '/pages/users/login/index'
})
}
const toPage = (url: string) => {
Taro.navigateTo({
url: url,
});
};
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",
});
}
},
});
};
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));
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%;
}
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;
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;
}
.user-center-card__header__info {
margin-left: 20px;
width: 400px;
color: #333;
font-weight: bolder;
}
.rightIcon {
height: 100px;
margin: auto;
}
.rightIcon {
height: 100px;
margin: auto;
}
}
.container {
position: absolute;
top: 350px;
width: 710px;
position: absolute;
top: 350px;
width: 710px;
}
.cell-card {
box-sizing: border-box;
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;
padding: 0 30px;
.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: 15px;
}
}
.center-text {
margin-top: 15px;
}
}
}
}
.user-center {
background-color: #fff;
border-radius: 20px;
margin: 20px;
padding: 30px;
width: 710px;
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 {
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;
.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;
}
.label {
font-size: 25px;
margin-top: 10px;
color: #333;
}
image {
width: 80px;
height: 80px;
}
}
image {
width: 80px;
height: 80px;
}
}
button {
width: 150px;
position: relative;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
// font-size: 18px;
text-align: center;
text-decoration: none;
// line-height: 1;
line-height: 1.35;
// border-radius: 5px;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
color: #000000;
background-color: #fff;
height: 100%;
}
button::after {
border: none;
background: transparent;
}
}
}
.mer-box {
box-sizing: border-box;
background-color: #fff;
border-radius: 20px;
margin: 20px;
width: 710px;
box-sizing: border-box;
background-color: #fff;
border-radius: 20px;
margin: 20px;
width: 710px;
}
</style>