450 lines
12 KiB
Vue
450 lines
12 KiB
Vue
<template>
|
|
<view class="main">
|
|
<p class="title">{{ item.name }}</p>
|
|
<view v-if="item.value === 1" class="first">
|
|
<view v-for="(item, index) in item.list" :key="index" @click="handleGoFirst(item)" class="useListItem">
|
|
<image class="bg" :src="item.bgUrl"></image>
|
|
<view class="iconStart">
|
|
<image
|
|
:class="index === 0 ? 'icon icon_first' : index === 1 ? 'icon icon_second' : index === 2 ? 'icon icon_third' : ''"
|
|
src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>
|
|
</view>
|
|
<p class="name">{{ item.name }}</p>
|
|
<image class="img" :src="item.imagePath"></image>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.value === 2" class="second">
|
|
<view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGoSecond(item)">
|
|
<view class="img">
|
|
<image :src="item.imagePath"></image>
|
|
</view>
|
|
<span class="name">{{ item.name }}</span>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.value === 3" class="third">
|
|
<view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGo(item)">
|
|
<view v-if="!item.isNotice" class="imgParent">
|
|
<view class="img">
|
|
<image style="width: 100%;height: 100%" :src="item.imagePath"></image>
|
|
</view>
|
|
</view>
|
|
<image v-else class="img_normal" :src="item.imagePath"></image>
|
|
<span class="name">{{ item.name }}</span>
|
|
<span v-if="item.notice !== 0" class="notice" :style="{ background: colorList[index] }">{{ item.notice }}</span>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.value === 4" class="fourth">
|
|
<view v-for="(item, index) in item.list" :key="index" class="useListItem" @click="handleGoFourth(item)">
|
|
<view v-if="!item.isNotice" class="imgParent">
|
|
<view class="img">
|
|
<image style="width: 100%;height: 100%" :src="item.imagePath"></image>
|
|
</view>
|
|
</view>
|
|
<image v-else class="img_normal" :src="item.imagePath"></image>
|
|
<span class="name">{{ item.name }}</span>
|
|
<span v-if="item.notice !== 0 && item.isNotice" class="notice" style="{ background: red }">{{ item.notice
|
|
}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "userList",
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
lastDay: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
isReturn: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
colorList: ['#3473FE', '#5B5BFB', '#B55FFB', '#0095FB', '#FB8922', '#EAAB00', '#1CB953', '#149FB3']
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log(this.colorList, 'colorList')
|
|
},
|
|
methods: {
|
|
// 第一行的跳转
|
|
handleGoFirst(item) {
|
|
if (item.isNotice) {
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
} else {
|
|
uni.showToast({ title: '栏目建设中', icon: 'none' })
|
|
}
|
|
},
|
|
// 第二行的跳转
|
|
handleGoSecond(item) {
|
|
if (this.isReturn) {
|
|
let _this = this
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请您授权登录后再操作。',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
_this.$util.toNextRoute('redirectTo', '/pages/register/register')
|
|
}
|
|
}
|
|
})
|
|
return
|
|
}
|
|
|
|
let version = uni.getStorageSync('version')
|
|
if (version === 1) {
|
|
this.$util.toNextRoute('navigateTo', '/pages/summaryOfPortraits/index?index=' + item.type)
|
|
} else {
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
}
|
|
},
|
|
// 第四行的跳转
|
|
handleGoFourth(item) {
|
|
//通过权限来判断是否可以点击跳转
|
|
let userInfo = uni.getStorageSync("vuex");
|
|
userInfo = userInfo ? JSON.parse(userInfo) : ""
|
|
console.log('userInfouserInfouserInfo', userInfo);
|
|
if (!userInfo.userData || !userInfo.userData.WeChat_UserId) {
|
|
this.$util.toNextRoute('redirectTo', '/pages/register/register')
|
|
} else if (userInfo.userData && userInfo.userData.WeChat_UserId && userInfo.userData.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
|
|
uni.redirectTo({
|
|
url: `/pages/commercialBI/noData?type=homeIndex`,
|
|
});
|
|
return
|
|
}
|
|
|
|
let version = uni.getStorageSync('version')
|
|
if (version === 1) {
|
|
if (item.summaryOfPortraits) {
|
|
this.$util.toNextRoute('navigateTo', '/pages/summaryOfPortraits/index?index=' + item.type)
|
|
} else {
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
}
|
|
} else {
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
}
|
|
},
|
|
|
|
// 根据数组信息判断是否能跳转
|
|
handleGo(item) {
|
|
if (this.isReturn) {
|
|
let _this = this
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请您授权登录后再操作。',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
_this.$util.toNextRoute('redirectTo', '/pages/register/register')
|
|
}
|
|
}
|
|
})
|
|
return
|
|
}
|
|
|
|
if (item.value === 2) {
|
|
if (item.value === 2) {
|
|
let currentService = uni.getStorageSync('currentService')
|
|
this.$util.toNextRoute('navigateTo', `${item.homeUrl}?time=${this.lastDay}&serviceInfo=${JSON.stringify(currentService)}&type=userCenter`)
|
|
} else {
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
}
|
|
} else if (item.value === 3 && item.isNotice || item.value === 4 && item.isNotice) {
|
|
if (item.name === '基础信息') {
|
|
this.$util.toNextRoute('navigateTo', `${item.homeUrl}?isPicker=${true}`)
|
|
} else {
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
}
|
|
} else if (item.value === 1) {
|
|
if (item.isNotice) {
|
|
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
|
} else {
|
|
uni.showToast({ title: '栏目建设中', icon: 'none' })
|
|
}
|
|
|
|
} else {
|
|
uni.showToast({ title: '暂无权限,请联系管理员', icon: 'none' })
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
.title {
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 48rpx;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.first {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 28px;
|
|
|
|
.useListItem {
|
|
width: calc((100% - 16px)/3);
|
|
height: 72px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 8px 11px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
|
|
.bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.iconStart {
|
|
width: 20px;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 11px;
|
|
top: 27px;
|
|
z-index: 2;
|
|
|
|
.icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
transform: translateX(30px);
|
|
border-right: 30px solid transparent;
|
|
}
|
|
|
|
.icon_first {
|
|
filter: drop-shadow(-30px 0px #9564F6);
|
|
}
|
|
|
|
.icon_second {
|
|
filter: drop-shadow(-30px 0px #F5921D);
|
|
}
|
|
|
|
.icon_third {
|
|
filter: drop-shadow(-30px 0px #28BAD3);
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #55277d;
|
|
line-height: 40rpx;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 11px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.img {
|
|
width: 32px;
|
|
height: 32px;
|
|
position: absolute;
|
|
bottom: 9px;
|
|
right: 14px;
|
|
}
|
|
}
|
|
|
|
//.firstBg_1 {
|
|
// background: url('/static/images/user/firstBg_1.svg');
|
|
//}
|
|
//.firstBg_2 {
|
|
// background: url('/static/images/user/firstBg_2.svg');
|
|
//}
|
|
//.firstBg_3 {
|
|
// background: url('/static/images/user/firstBg_3.svg');
|
|
//}
|
|
}
|
|
|
|
.second {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 28px;
|
|
|
|
.useListItem {
|
|
width: 20%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
|
|
.img {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(22, 0, 2, 0.05);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
|
|
image {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.third {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
|
|
.useListItem {
|
|
width: 25%;
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.imgParent {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-bottom: 6px;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-bottom: 6px;
|
|
transform: translateX(30px);
|
|
border-right: 30px solid transparent;
|
|
filter: drop-shadow(-30px 0px #ccc);
|
|
}
|
|
}
|
|
|
|
.img_normal {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.notice {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 0;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.meng {
|
|
//position: absolute;
|
|
//top: 0;left: 0;
|
|
//width: 100%;
|
|
//height: 100%;
|
|
//background: rgba(0,0,0,0.4);
|
|
}
|
|
}
|
|
|
|
.fourth {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
.useListItem {
|
|
width: 20%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.imgParent {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 6px;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 6px;
|
|
transform: translateX(30px);
|
|
border-right: 30px solid transparent;
|
|
filter: drop-shadow(-30px 0px #ccc);
|
|
}
|
|
}
|
|
|
|
.img_normal {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #091732;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.notice {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: red;
|
|
position: absolute;
|
|
right: 20%;
|
|
top: -4px;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|