309 lines
7.2 KiB
Vue
309 lines
7.2 KiB
Vue
<template>
|
||
<Layout :select="'我的'">
|
||
<view class="profile">
|
||
<view class="baseinfo">
|
||
<view class="head">
|
||
<image
|
||
:src="`${url}/static/img/profile/user.png`"
|
||
class="user"
|
||
></image>
|
||
<view>
|
||
<view>
|
||
<text class="name">{{ profile.name || "-" }}</text>
|
||
</view>
|
||
<view>
|
||
<text class="company">{{ profile.phone || "-" }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="entry-card">
|
||
<uni-card
|
||
:shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
|
||
:padding="'10px'"
|
||
:margin="'10px 0px'"
|
||
:border="false"
|
||
>
|
||
<view class="title">我的订单</view>
|
||
<uni-grid :column="3" :showBorder="false" :square="false">
|
||
<uni-grid-item
|
||
v-for="(item, index) in entryItemList"
|
||
:key="index"
|
||
>
|
||
<view class="item">
|
||
<view @click="handleClickEntry(item)">
|
||
<view>
|
||
<image :src="`${url}/static/img/${item.path}`"></image>
|
||
</view>
|
||
<view>
|
||
<text class="text">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</uni-card>
|
||
</view>
|
||
<view class="content">
|
||
<u-list :height="'200px'">
|
||
<u-list-item
|
||
v-for="(item, index) in isHasToken() ? list : list1"
|
||
:key="index"
|
||
>
|
||
<u-cell
|
||
:title="item.name"
|
||
arrow-direction="right"
|
||
isLink
|
||
:url="item.path"
|
||
:border="false"
|
||
@click="hanldeClick(item)"
|
||
>
|
||
<template #icon>
|
||
<view style="width: 40rpx">
|
||
<image
|
||
:src="`${url}/static/img/profile/${item.icon}`"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
</template>
|
||
</u-cell>
|
||
</u-list-item>
|
||
</u-list>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<SmallModal
|
||
:title="'确认退出吗？'"
|
||
:content="'退出后将返回至登陆页'"
|
||
:okText="'确认退出'"
|
||
:isMain="true"
|
||
:show="isShowCancelModal"
|
||
@handleModal="(v:boolean) => {handleModal(v)}"
|
||
@handleOk="handleOk()"
|
||
/>
|
||
</Layout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Layout from "@/components/Layout/index.vue";
|
||
import { useMemberStore } from "@/store/index";
|
||
import pinia from "@/store";
|
||
import { url } from "@/utils/data";
|
||
import { UserApi } from "@/services";
|
||
import SmallModal from "@/components/Modal/smallModal.vue";
|
||
const store = useMemberStore(pinia);
|
||
const profile = store.profile.userInfo;
|
||
function isHasToken () {
|
||
return store.profile.token !== ""
|
||
}
|
||
const list = reactive<any>([
|
||
{
|
||
name: "收款信息",
|
||
icon: "pay.png",
|
||
},
|
||
{
|
||
name: "用户协议",
|
||
icon: "4.png",
|
||
},
|
||
{
|
||
name: "隐私政策",
|
||
icon: "5.png",
|
||
},
|
||
{
|
||
name: "退出登录",
|
||
icon: "3.png",
|
||
path: "",
|
||
},
|
||
]);
|
||
const list1 = reactive<any>([
|
||
{
|
||
name: "收款信息",
|
||
icon: "pay.png",
|
||
},
|
||
{
|
||
name: "用户协议",
|
||
icon: "4.png",
|
||
},
|
||
{
|
||
name: "隐私政策",
|
||
icon: "5.png",
|
||
}
|
||
]);
|
||
|
||
const entryItemList = ref([
|
||
{
|
||
path: "p1.png",
|
||
name: "报废车辆回收",
|
||
url: "/pagesOrder/vehicle/index",
|
||
},
|
||
{
|
||
path: "p2.png",
|
||
name: "电池回收",
|
||
url: "/pagesOrder/battery/index",
|
||
},
|
||
{
|
||
path: "p3.png",
|
||
name: "加入我们",
|
||
url: "/pagesOrder/joinus/index",
|
||
},
|
||
]);
|
||
|
||
const handleClickEntry = (item: any) => {
|
||
uni.navigateTo({
|
||
url: item.url, // 要跳转到的页面路径
|
||
});
|
||
};
|
||
|
||
const hanldeClick = (item: any) => {
|
||
if (item.name === "用户协议") {
|
||
openDoc("在生万有用户协议");
|
||
} else if (item.name === "隐私政策") {
|
||
openDoc("在生万有隐私政策");
|
||
} else if (item.name === "收款信息") {
|
||
uni.navigateTo({
|
||
url: "/pagesOrder/collection", // 要跳转到的页面路径
|
||
});
|
||
} else if (item.name === "退出登录") {
|
||
handleModal(true);
|
||
}
|
||
};
|
||
|
||
const isShowCancelModal = ref(false);
|
||
const handleModal = (v: boolean) => {
|
||
isShowCancelModal.value = v;
|
||
};
|
||
|
||
const handleOk = () => {
|
||
UserApi.logOut({}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
store.clearProfile();
|
||
uni.reLaunch({
|
||
url: "/pagesLogin/index", // 要跳转到的页面路径
|
||
});
|
||
}
|
||
});
|
||
};
|
||
const openDoc = (item: string) => {
|
||
//文件预览
|
||
const isWX = uni.getSystemInfoSync().uniPlatform === "mp-weixin";
|
||
console.log(
|
||
`${url}/static/${
|
||
isWX && item === "在生万有隐私政策" ? "weixin/" : ""
|
||
}${item}.docx`
|
||
);
|
||
uni.downloadFile({
|
||
url: `${url}/static/${
|
||
isWX && item === "在生万有隐私政策" ? "weixin/" : ""
|
||
}${item}.docx`,
|
||
success: function (res) {
|
||
setTimeout(
|
||
() =>
|
||
uni.openDocument({
|
||
filePath: res.tempFilePath,
|
||
showMenu: false,
|
||
success: function () {
|
||
console.log("打开文档成功");
|
||
},
|
||
fail: function () {
|
||
uni.showToast({
|
||
title: "暂不支持此类型",
|
||
duration: 2000,
|
||
icon: "none",
|
||
});
|
||
},
|
||
}),
|
||
100
|
||
);
|
||
},
|
||
fail: function (res) {
|
||
console.log(res); //失败
|
||
},
|
||
});
|
||
};
|
||
|
||
//隐藏官方的tabBar
|
||
// #ifdef MP-ALIPAY
|
||
my.hideTabBar({
|
||
animation: false, // 是否需要动画效果，alipay 1.95.0支持此参数
|
||
success: (res) => {
|
||
// 隐藏成功的回调
|
||
console.log("TabBar has been hidden", res);
|
||
},
|
||
fail: (err) => {
|
||
// 隐藏失败的回调
|
||
console.error("Failed to hide TabBar", err);
|
||
},
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXN || MP-TOUTIAO || H5
|
||
uni.hideTabBar();
|
||
// #endif
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.profile {
|
||
.bg {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
z-index: -1;
|
||
}
|
||
.baseinfo {
|
||
padding: 25.64rpx;
|
||
.head {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 41rpx;
|
||
.user {
|
||
width: 110.9rpx;
|
||
height: 110.9rpx;
|
||
margin-right: 20.51rpx;
|
||
}
|
||
.name {
|
||
font-size: 27rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
}
|
||
.company {
|
||
font-size: 21rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.content {
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
||
border-radius: 13rpx;
|
||
padding: 28.21rpx 21.15rpx;
|
||
margin-top: 24.36rpx;
|
||
image:nth-child(1) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.entry-card {
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.item {
|
||
text-align: center;
|
||
image {
|
||
width: 74rpx;
|
||
height: 76rpx;
|
||
}
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|