kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页入库

Browse Source
This commit is contained in:
aixianling
2022-07-15 18:45:06 +08:00
parent 6ddbb022f6
commit e17fefbc9d
3 changed files with 508 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

508
src/project/shandong10086/AppHome/AppHome.vue Normal file
View File

@@ -0,0 +1,508 @@
<template>
<div class="page">
<div class="search-wrap">
<AiAreaPicker v-model="search.areaId" :name.sync="areaName" @input="getCategoryList" :areaId="$areaId">
<u-icon :label="areaName" name="arrow-down-fill" color="#fff" size="16" label-pos="left" label-color="#fff"
label-size="40" margin-right="16"/>
</AiAreaPicker>
<div class="search fill" @click="$linkTo('/mods/AppContent/contentManager?moduleId=' + search.moduleId)">
<u-icon name="search" color="#ffffff" size="40"></u-icon>
<span class="desc">请输入新闻资讯标题</span>
</div>
</div>
<div class="header-bg"></div>
<img class="border" src="../../static/img/border.png" alt=""/>
<div class="swiper-content">
<u-swiper :list="swiperList" mode="none" height="240" bg-color="none" @click="handleBannerClick"/>
</div>
<div class="grid-content">
<u-grid :col="4" hover-class="text-hover" :border="false">
<u-grid-item v-for="(item, index) in grids" :key="index" :custom-style="{ padding: '8px 0' }" bg-color="none"
class="grid-item" @click="handleClick(item)">
<img :src="item.pictureUrl" alt=""/>
<div class="grid-text">{{ item.name }}</div>
</u-grid-item>
</u-grid>
</div>
<!-- <div class="notice">-->
<!-- <img src="../../static/img/notice-new.png" alt="">-->
<!-- <u-notice-bar mode="vertical" color="#4181FF" style="flex: 1;" :volume-icon="false" :is-circular="false"-->
<!-- duration="5000" speed="5000" :list="noticeList" @click="clickNotice"/>-->
<!-- </div>-->
<template v-if="activeList.length > 0">
<header>推荐专题</header>
<scroll-view :scroll-x="true" style="width: 100%" class="scroll-wrap">
<div class="scroll-card"
:style="{ background: 'url(' + item.pictureUrl + ') no-repeat no-repeat;background-size:100% 100%;' }"
v-for="(item, index) in activeList" :key="index" @click="handleActive(item)"/>
</scroll-view>
</template>
<template v-if="categorys && categorys.length > 0">
<u-tabs :list="categorys.map((e) => ({ name: e.categoryName }))" font-size="40" bg-color="transparent"
inactive-color="#999999" :active-item-style="active" :is-scroll="true" :current="index"
@change="tabChange"/>
<div class="list-wrap" v-if="categoryList && categoryList.length > 0">
<div class="list-card" v-for="(category, index) in categoryList" :key="index"
@click="$linkTo('/mods/AppContent/contentDetail?id=' + category.id)">
<div class="header">{{ category.title }}</div>
<div class="content-wrap"
v-if="category.contentType == 0 && category.files && category.files.length < 3 && category.files.length > 0">
<img class="img" :src="item.url" v-for="(item, index) in category.files.slice(0, 1)" :key="index.id"/>
</div>
<div class="content-wrap" v-if="category.contentType == 0 && category.files && category.files.length >= 3">
<img class="min-img" :src="item.url" v-for="(item, index) in category.files.slice(0, 3)" :key="index.id"/>
</div>
<div class="content-wrap" v-if="category.contentType == 1">
<img class="img" :src="category.pictureUrl" alt=""/>
<img class="play-icon" src="../../static/img/play.png" alt=""/>
</div>
<div class="bottom">
<div class="left">
<div class="tag">{{ category.categoryName }}</div>
{{ category.createTime }}
</div>
<div class="right">
<em>{{ category.viewCount }}</em>
人看过
</div>
</div>
</div>
</div>
<AiEmpty v-else/>
</template>
<AiLogin ref="login"/>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex'
export default {
name: 'AppHome',
label: "首页",
data() {
return {
areaName: '',
swiperList: [],
index: 0,
grids: [],
activeList: [],
notices: [],
categorys: [],
categoryList: [],
search: {areaId: ''},
}
},
computed: {
...mapState(['global', 'user', 'token']),
active() {
return {
fontSize: '22px',
color: '#333333',
}
},
noticeList() {
let {notices} = this
return notices?.length > 0 ? notices?.map((e) => e.title) || ['暂无公告'] : ['暂无公告']
},
},
onLoad() {
this.autoLogin().then(() => {
this.getSwiperList();
this.getName();
this.getGrids();
this.getActive();
this.getNotice();
})
},
methods: {
...mapActions(['autoLogin', 'authCheck']),
getName() {
this.$instance
.post('/app/appcontentmoduleinfo/listByName', null, {
params: {names: '新闻发布'},
withoutToken: true,
})
.then((res) => {
if (res?.data?.[0]?.categoryList?.length) {
this.categorys = res.data[0]['categoryList']
this.search.moduleId = res.data[0]['id']
this.search.categoryId = res.data[0]['categoryList'][0]['id']
this.getCategoryList()
}
})
},
tabChange(idx) {
this.index = idx
this.search.categoryId = this.categorys[idx]['id']
this.getCategoryList()
},
getCategoryList() {
this.$instance
.post('/app/appcontentinfo/list', null, {
params: {...this.search, size: 100},
})
.then((res) => {
if (res?.data) {
this.categoryList = res.data.records
}
})
},
clickNotice(val) {
const id = this.notices[val]['id']
if (id) {
uni.navigateTo({
url: '/mods/AppNotice/AppNotice?id=' + id,
})
}
},
handleActive({type, appId, url}) {
if (type == 0) {
uni.navigateToMiniProgram({appId})
} else if (type == 1) {
this.$linkTo('/subPages/h5/webview?link=' + url)
}
},
getNotice() {
this.$instance
.post('/app/appmininotice/list', null, {
params: {size: 999},
withoutToken: true,
})
.then((res) => {
if (res?.data) {
this.notices = res.data.records
}
})
},
getActive() {
this.$instance
.post('/app/appminitopicconfig/list', null, {
params: {size: 999},
withoutToken: true,
})
.then((res) => {
if (res?.data) {
this.activeList = res.data.records
}
})
},
/**
* 获取顶部九宫格
*/
getGrids() {
this.$instance
.post('/app/appminihomeconfig/list', null, {
params: {picked: 1},
withoutToken: true,
})
.then((res) => {
if (res?.data) {
this.grids = res.data.records
}
})
},
getSwiperList() {
this.$instance
.post('/app/appbanner/listForWx', null, {
withoutToken: true,
})
.then((res) => {
if (res?.data) {
this.swiperList = res.data?.map((e) => ({...e, image: e.imgUrl})) || []
}
})
},
handleClick({type, appId, modulePath, url, checkType, corpId}) {
//先判读是不是系统应用
if (type != '0') {
if (type == '1') {
uni.navigateToMiniProgram({appId})
} else if (type == '2') {
uni.navigateTo({url: '/subPages/h5/webview?link=' + url})
} else if (type == '3') {
this.$linkTo(url)
} else if (type == '4') {
uni.openCustomerServiceChat({
extInfo: {url: url},
corpId: corpId,
fail: () => {
this.$u.toast('请使用普通微信打开小程序进行咨询')
},
})
}
} else if (type && type == "0") {
uni.showLoading({title: '正在进入应用...'})
this.authCheck({checkType, modulePath}).finally(() => uni.hideLoading())
}
},
handleBannerClick(index) {
if (!this.swiperList[index].linkUrl) return
if (this.swiperList[index].type == '0') {
//0 h5链接； 1 小程序链接； 2外部小程序
this.$linkTo(`/subPages/h5/webview?link=${this.swiperList?.[index]?.linkUrl}&title=${this.swiperList?.[index]?.title}`)
} else if (this.swiperList[index].type == '1') {
this.$linkTo(`${this.swiperList?.[index]?.linkUrl}`)
} else {
wx.navigateToMiniProgram({
appId: this.swiperList[index].linkUrl,
})
}
},
},
onShareAppMessage() {
return {
title: '欢迎使用数字乡村治理服务一体化平台~',
path: `/pages/home/home`,
}
},
}
</script>
<style scoped lang="scss">
@import '~dvcp-wui/common';
.page {
width: 100%;
min-height: 100%;
background-color: #f3f6f9;
position: relative;
.search-wrap {
width: 750px;
height: 64px;
box-sizing: border-box;
padding: 0 32px;
display: flex;
background-color: #4181ff;
align-items: center;
.search {
height: 100%;
background: #000000;
border-radius: 32px;
opacity: 0.2;
box-sizing: border-box;
padding: 0 32px;
display: flex;
align-items: center;
margin-left: 32px;
margin-top: 6px;
.desc {
font-size: 28px;
color: #ffffff;
margin-left: 16px;
}
}
}
.area-content {
height: 96px;
line-height: 96px;
background-color: #2d80fb;
.area-ai {
display: block;
width: 200px;
margin-left: 34px;
text-align: left;
}
.picker-location {
text-align: left;
}
}
.header-bg {
width: 100%;
height: 160px;
background-color: #4181ff;
}
.border {
width: 100%;
height: 40px;
}
.swiper-content {
width: 686px;
height: 240px;
margin: -176px auto 24px;
}
.grid-content {
box-sizing: border-box;
margin-bottom: 48px;
.grid-item {
img {
width: 108px;
height: 108px;
object-fit: fill;
}
.grid-text {
font-size: 26px;
font-weight: 400;
color: #333333;
line-height: 36px;
}
}
}
::v-deep .notice {
width: 686px;
height: 88px;
box-sizing: border-box;
padding: 0 24px;
margin: 30px auto 48px;
background: #ffffff;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
& > img {
width: 128px;
height: 52px;
}
.u-news-item {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
.list-wrap {
box-sizing: border-box;
padding: 32px;
.list-card {
width: 100%;
min-height: 100px;
background: #ffffff;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
border-radius: 16px;
box-sizing: border-box;
padding: 32px;
margin-bottom: 24px;
.header {
font-size: 36px;
font-weight: 600;
color: #333333;
line-height: 50px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.content-wrap {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 24px;
position: relative;
.img {
width: 100%;
height: 350px;
}
.min-img {
width: 204px;
height: 204px;
}
.play-icon {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
.left {
display: flex;
align-items: center;
font-size: 28px;
font-weight: 400;
color: #999999;
.tag {
width: 144px;
height: 48px;
background: #eeeeee;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 400;
color: #999999;
margin-right: 16px;
}
}
.right {
font-size: 28px;
font-weight: 400;
color: #999999;
display: flex;
align-items: center;
em {
font-style: normal;
color: #4181ff;
}
}
}
}
}
header {
font-size: 44px;
font-weight: 600;
color: #333333;
padding: 0 16px;
margin-bottom: 32px;
margin-left: 32px;
}
.scroll-wrap {
box-sizing: border-box;
padding: 0 32px;
width: 100%;
white-space: nowrap;
margin-bottom: 24px;
.scroll-card {
display: inline-block;
width: 440px;
height: 240px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
border-radius: 16px;
margin-right: 32px;
&:last-child {
margin-right: 0;
}
}
}
}
</style>

BIN
src/project/shandong10086/AppHome/home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 965 B

BIN
src/project/shandong10086/AppHome/home_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1000 B