142 lines
3.3 KiB
Vue
142 lines
3.3 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">{{ '抖音用户' || "-" }}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="company">{{ '-' || "-" }}</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="content">
|
||
|
<u-list :height="'200px'">
|
||
|
<u-list-item v-for="(item, index) in list" :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>
|
||
|
</Layout>
|
||
|
</template>
|
||
|
|
||
|
<script setup lang="ts">
|
||
|
import Layout from "@/components/Layout/index.vue";
|
||
|
import { url } from "@/utils/data";
|
||
|
const list = reactive([
|
||
|
{
|
||
|
name: "用户协议",
|
||
|
icon: "4.png",
|
||
|
},
|
||
|
{
|
||
|
name: "隐私政策",
|
||
|
icon: "5.png",
|
||
|
},
|
||
|
]);
|
||
|
|
||
|
const hanldeClick = (item: any) => {
|
||
|
if (item.name === "用户协议") {
|
||
|
openDoc("在生万有用户协议");
|
||
|
} else if (item.name === "隐私政策") {
|
||
|
openDoc("在生万有隐私政策");
|
||
|
}
|
||
|
};
|
||
|
|
||
|
const openDoc = (item: string) => {
|
||
|
//文件预览
|
||
|
uni.downloadFile({
|
||
|
url: `${url}/static/${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); //失败
|
||
|
},
|
||
|
});
|
||
|
};
|
||
|
</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%;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|