357 lines
10 KiB
Vue
357 lines
10 KiB
Vue
<template>
|
|
<view class="appUser">
|
|
<view
|
|
class="user-center-card__header__transparent"
|
|
v-if="isLogin"
|
|
:style="{width: isLogin ? '100%' : '70%'}">
|
|
<view
|
|
class="user-center-card__header__avatar"
|
|
@click="toPage('/pages/users/user_setting/index')">
|
|
<nut-avatar size="large">
|
|
<img :src="userInfo.data?.avatarUrl" />
|
|
</nut-avatar>
|
|
</view>
|
|
<view
|
|
class="user-center-card__header__info"
|
|
@click="toPage('/pages/users/user_setting/index')">
|
|
<view class="user-center-card__header__info__name"
|
|
>{{ userInfo.data?.nickName || '点击设置昵称' }}
|
|
</view>
|
|
<view v-if="!userInfo.data?.phone">
|
|
<nut-button
|
|
size="mini"
|
|
open-type="getPhoneNumber"
|
|
@getphonenumber="getphonenumber"
|
|
>点击绑定手机号
|
|
</nut-button>
|
|
</view>
|
|
<view v-else class="user-center-card__header__info__phone"
|
|
>{{ maskString(userInfo.data?.phone, 3, 7) }}
|
|
</view>
|
|
</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="user-acc flex items-center text-center justify-between">
|
|
<view>
|
|
<view class="text-[#ffc300] text-[40px] font-bold">{{
|
|
userInfo.data?.pulse || 0
|
|
}}</view>
|
|
<view class="text-[#CFAA32] text-[28px]">豆子</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view>
|
|
<view class="text-[#ffc300] text-[40px] font-bold">{{
|
|
userInfo.data?.integral || 0
|
|
}}</view>
|
|
<view class="text-[#CFAA32] text-[28px]">积分</view>
|
|
</view>
|
|
</view>
|
|
<!--我的订单-->
|
|
<view class="border-box bg-[#fff] p-[20px]">
|
|
<view class="flex justify-between items-center mt-2">
|
|
<view class="text-[#333333] text-[32px]">我的订单</view>
|
|
<view class="flex text-[#c9c9c9] items-center" @click="toOrderList(0)">
|
|
<view class="text-[26px]">查看全部</view>
|
|
<ArrowRight size="12" />
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between text-[#666] px-[20px]">
|
|
<view
|
|
class="mt-[30px] flex flex-col items-center"
|
|
@click="toOrderList(1)">
|
|
<IconFont
|
|
name="http://p0.meituan.net/csc/9943f6c938fc0e310141a2b99d5bde6617483.png"
|
|
size="42" />
|
|
<view class="mt-[15px] text-[25px] text-[#333333]">待付款</view>
|
|
</view>
|
|
<view
|
|
class="mt-[30px] flex flex-col items-center"
|
|
@click="toOrderList(2)">
|
|
<IconFont
|
|
name="http://p0.meituan.net/csc/5306d094d7b4b61848dd21c86b693a9515523.png"
|
|
size="42" />
|
|
<view class="mt-[15px] text-[25px] text-[#333333]">待使用</view>
|
|
</view>
|
|
<view
|
|
class="mt-[30px] flex flex-col items-center"
|
|
@click="toOrderList(3)">
|
|
<IconFont
|
|
name="http://p0.meituan.net/csc/32ea9bbf51e3bbb0cbd75bc0fea97ca815779.png"
|
|
size="42" />
|
|
<view class="mt-[15px] text-[25px] text-[#333333]">已使用</view>
|
|
</view>
|
|
<view
|
|
class="mt-[30px] flex flex-col items-center"
|
|
@click="toOrderList(4)">
|
|
<IconFont
|
|
name="http://p0.meituan.net/csc/2e0dee89e9a3e3f2e7bf65db355fa11c11630.png"
|
|
size="42" />
|
|
<view class="mt-[15px] text-[25px] text-[#333333]">已失效</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的服务 -->
|
|
<view class="user-center" v-if="isLogin">
|
|
<view class="text-[#333333] text-[32px] mt-2">我的服务</view>
|
|
<view class="box">
|
|
<view v-for="(item, idx) in userMenuList" :key="idx">
|
|
<view
|
|
v-if="item.type !== 333"
|
|
class="box-mini"
|
|
@click="toPage(item.url)">
|
|
<IconFont size="42" :name="item.icon"></IconFont>
|
|
<view class="label">{{ item.label }}</view>
|
|
</view>
|
|
<button v-else class="kf-btn" open-type="contact">
|
|
<IconFont class="IconFont" size="42" :name="item.icon"></IconFont>
|
|
<view class="label">{{ item.label }}</view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商家管理 -->
|
|
<view
|
|
class="user-center"
|
|
v-if="userInfo.data?.bid && userInfo.store_status === 1">
|
|
<view class="text-[#333333] text-[32px] mt-2">商家服务</view>
|
|
<view class="box">
|
|
<view
|
|
v-if="userInfo.data.permission.dd"
|
|
class="box-mini"
|
|
@click="toPage('/pages/admin/add_order/index')">
|
|
<IconFont
|
|
size="42"
|
|
name="http://p0.meituan.net/csc/72a389ac6a441061fd534b96644c431b7839.png"></IconFont>
|
|
<view class="label">后结点单</view>
|
|
</view>
|
|
<view
|
|
v-if="userInfo.data.permission.hx"
|
|
class="box-mini"
|
|
@click="toPage('/pages/admin/verify/index')">
|
|
<IconFont
|
|
size="42"
|
|
name="http://p1.meituan.net/csc/c236a8b7a73178da25218e1fb59a96f06610.png"></IconFont>
|
|
<view class="label">订单核销</view>
|
|
</view>
|
|
<view
|
|
v-if="userInfo.data.permission.tj"
|
|
class="box-mini"
|
|
@click="toPage('/pages/admin/order_manage/index')">
|
|
<IconFont
|
|
size="42"
|
|
name="http://p0.meituan.net/csc/bd9aca457a109b4d69a692a9109a73ed9045.png"></IconFont>
|
|
<view class="label">订单管理</view>
|
|
</view>
|
|
<view
|
|
v-if="userInfo.data.permission.tx"
|
|
class="box-mini"
|
|
@click="toPage('/pages/admin/withdrawal/index')">
|
|
<IconFont
|
|
size="42"
|
|
name="http://p0.meituan.net/csc/f85d7dc1bf9eda8977e9089b260a586b7440.png"></IconFont>
|
|
<view class="label">余额提现</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 版权 -->
|
|
<view class="text-[#999999] mt-5 text-[20px] text-center">
|
|
<view>鑫瓴科技版权所有</view>
|
|
<view>v4.0.0</view>
|
|
</view>
|
|
<!-- 登录 -->
|
|
<Auth
|
|
:visible="isShowLogin"
|
|
@update:visible="cancelLogin"
|
|
@ok="getUserInfo" />
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {ref} from 'vue';
|
|
import {ArrowRight, IconFont} from '@nutui/icons-vue-taro';
|
|
import Taro from '@tarojs/taro';
|
|
import Auth from '@/components/Auth.vue';
|
|
import {getPersonalInfo, getPhone, bindParent} from '@/api/user';
|
|
import {maskString} from '@/utils';
|
|
|
|
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;
|
|
integral?: string;
|
|
pulse?: string;
|
|
};
|
|
store_status?: number;
|
|
store_name?: string;
|
|
}
|
|
|
|
const userInfo = ref<UserInfo>({});
|
|
|
|
Taro.useDidShow(() => {
|
|
init_data();
|
|
});
|
|
|
|
// Taro.startPullDownRefresh({
|
|
// success: () => {
|
|
// init_data();
|
|
// },
|
|
// complete: () => {
|
|
// Taro.stopPullDownRefresh();
|
|
// },
|
|
// });
|
|
|
|
const init_data = () => {
|
|
const token = Taro.getStorageSync('token');
|
|
if (token) {
|
|
getUserInfo();
|
|
}
|
|
};
|
|
|
|
const test = () => {
|
|
console.log(process.env.TARO_APP_ID);
|
|
Taro.openCustomerServiceChat({
|
|
corpId: 'wwb5dd953ca36043ef',
|
|
extInfo: {
|
|
url: 'https://work.weixin.qq.com/kfid/kfcb2b0420e94102346',
|
|
},
|
|
});
|
|
};
|
|
|
|
const cancelLogin = () => {
|
|
isShowLogin.value = false;
|
|
};
|
|
|
|
const getUserInfo = async () => {
|
|
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();
|
|
};
|
|
|
|
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/account/index',
|
|
icon: 'http://p0.meituan.net/csc/104f787b7cc5582868be46ff52475ecf7084.png',
|
|
},
|
|
{
|
|
label: '后结订单',
|
|
url: '/pages/users/pending_order/index',
|
|
icon: 'http://p0.meituan.net/csc/68d3f1f1ea375897a2b918851199b6546322.png',
|
|
},
|
|
{
|
|
label: '我的推广',
|
|
url: '/pages/users/distribution/index',
|
|
icon: 'http://p0.meituan.net/csc/950814cc0ed1289f170e8612fab597cd5310.png',
|
|
},
|
|
{
|
|
label: '联系客服',
|
|
type: 333,
|
|
url: '/pages/users/account/index',
|
|
icon: 'http://p0.meituan.net/csc/ddd4b6ff4271ec05ced60db0aee1e9548383.png',
|
|
},
|
|
{
|
|
label: '设置',
|
|
url: '/pages/users/setting/index',
|
|
icon: 'http://p0.meituan.net/csc/1d8e6b328d384ff042c282976b82feec6005.png',
|
|
},
|
|
{
|
|
label: '关于我们',
|
|
url: '',
|
|
icon: 'http://p0.meituan.net/csc/3e772eca05bd56104e8a0a5c6cffe56c7447.png',
|
|
},
|
|
]);
|
|
|
|
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">
|
|
@import './index.scss';
|
|
</style>
|