582 lines
12 KiB
Vue
582 lines
12 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 搜索 -->
|
|
<view class="head" v-if="token">
|
|
<piker-search @handleSearch="handleSearch" :placeholder='"找客户/找产品/找供应"' :width="'60'"></piker-search> -->
|
|
<view class="fangke">
|
|
<icon class="iconfont icon-remen"></icon>
|
|
<text>今日访客：{{todayviewer}}人</text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="login" @click="handleLogin">
|
|
登录后查看更多内容资讯，点击此处<text>登录</text>
|
|
</view>
|
|
<!-- banner -->
|
|
<view class="tips" :style="{'margin':!token?'0':'90rpx 0 10px'}">
|
|
<text @click="navTo('/pageTwo/me/company')" v-if="token&&!mobile" style="margin-top: 10px;">请尽快完善企业信息</text>
|
|
</view>
|
|
<view class="f_banner">
|
|
<view v-if="fimages.length">
|
|
<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true">
|
|
<swiper-item v-for="(image, index) in fimages" :key="index" @click="detail(image.id,5)">
|
|
<image :src="image.headimg" mode="scaleToFill" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<!-- 公告 -->
|
|
<view class="box">
|
|
<view class="notice">
|
|
<text>头条</text>
|
|
<!-- -->
|
|
<swiper class="swiper" vertical="true" autoplay="true">
|
|
<swiper-item v-for="(item,index) in notices" :key="index" @click="detail(item.id,6)">
|
|
<view class='overflow'>{{item.title}}</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
</view>
|
|
<!-- 工具 -->
|
|
<view class="tools">
|
|
<view class="item" v-for="(item,index) in navbarlist" :key="index" @click="handlePath(index,item.link)">
|
|
<image :src="item.image"></image>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 简介 -->
|
|
<view class="f_banner centerList" style="margin-top: 10px;">
|
|
<view v-if="HomeContent&¢erList.length">
|
|
<swiper class="swiper" autoplay="true">
|
|
<swiper-item v-for="(ite, index) in centerList" :key="index">
|
|
<image :src="ite.headimg" v-if='ite.posfmtype!=2' @click="detail(ite.id,5)" />
|
|
<video v-else id="myVideo" :src="ite.headimg" @error="videoErrorCallback" controls
|
|
:muted="true" :autoplay="true" show-mute-btn object-fit="fill"></video>
|
|
<!-- <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" @error="videoErrorCallback" controls
|
|
:muted="true" :autoplay="true" show-mute-btn object-fit="fill"></video> -->
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<!-- 风采 -->
|
|
<view class="tools fengcai" v-if="list.length">
|
|
<view class="title" @click="navTo('/pages/index/fengCai')">
|
|
<text class="ml-10">领导风采</text>
|
|
<text class="mr-10">查看更多></text>
|
|
</view>
|
|
<swiper class="swiper " display-multiple-items='5' autoplay="true" circular="true" interval='3000'>
|
|
<swiper-item v-for="(item,index) in list" :key="index" @click="handleDetail(item)">
|
|
<view class="item mt-15">
|
|
<image :src="item.avatar" mode="aspectFill"></image>
|
|
<view class="name">{{item.name}}</view>
|
|
<view class="post">{{item.posname}}</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
|
|
</view>
|
|
<!-- 资讯活动 -->
|
|
<view class="zixun">
|
|
<view class="title mt-10" @click="navTo('/pageTwo/news/list?type=1')">
|
|
<text>资讯活动</text>
|
|
<text v-if="newsList.length">查看更多></text>
|
|
</view>
|
|
<list :isAddress="1" :list="newsList" v-if="newsList.length" @handleSearchId="handleSearchId"></list>
|
|
<view class="nolist" style="margin-top: 15px;" v-if="!newsList.length">
|
|
<image src="@/static/none.png"></image>
|
|
<text>暂无数据</text>
|
|
</view>
|
|
</view>
|
|
<!-- 客服 -->
|
|
<message></message>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import list from "@/components/newsList.vue"
|
|
import pikerSearch from "../../components/search.vue"
|
|
import UniNoticeBar from "../../uni_modules/uni-notice-bar/uni-notice-bar.vue"
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
token: '',
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["user", "HomeContent", 'InfoList', "navbarlist"]),
|
|
mobile() {
|
|
return this.user.name ? this.user.cominfo.mobile : ''
|
|
},
|
|
centerList() {
|
|
return this.HomeContent ? this.HomeContent.centerbannerlist : []
|
|
},
|
|
todayviewer() {
|
|
return this.HomeContent ? this.HomeContent.todayviewer : []
|
|
},
|
|
fimages() {
|
|
return this.HomeContent ? this.HomeContent.bannerlist : []
|
|
},
|
|
notices() {
|
|
return this.HomeContent ? this.HomeContent.noticelist : []
|
|
},
|
|
newsList() {
|
|
return this.InfoList.rows ? this.InfoList.rows : []
|
|
},
|
|
tools() {
|
|
return this.$json.tools
|
|
},
|
|
},
|
|
components: {
|
|
list,
|
|
pikerSearch,
|
|
UniNoticeBar
|
|
},
|
|
async onLoad() {
|
|
let that = this
|
|
await that.login()
|
|
that.token = uni.getStorageSync('token')
|
|
that.$store.dispatch('getInfoList', {
|
|
searchValue: "",
|
|
pageNo: 1,
|
|
pageSize: 3,
|
|
})
|
|
that.handleVipList()
|
|
},
|
|
onShareAppMessage() {
|
|
let that = this
|
|
return {
|
|
title: "智照团线上展厅",
|
|
path: '/pages/index/index',
|
|
imageUrl: '',
|
|
success: function(res) {
|
|
console.log("分享到朋友成功")
|
|
},
|
|
fail: function(res) {
|
|
console.log("分享到朋友失败")
|
|
},
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: '智照团线上展厅',
|
|
query: '',
|
|
imageUrl: '',
|
|
success: function(res) {
|
|
console.log("分享到朋友圈成功")
|
|
},
|
|
fail: function(res) {
|
|
console.log("分享到朋友圈失败")
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
login() {
|
|
let that = this
|
|
uni.login({
|
|
success(res) {
|
|
if (res.code) {
|
|
if (res.errMsg = "login:ok") {
|
|
that.$model.onlogin({
|
|
code: res.code,
|
|
}).then(res => {
|
|
if (res.code == 2) {
|
|
that.token = null
|
|
uni.clearStorageSync()
|
|
uni.setStorageSync('sessionid', res.data.sessionid)
|
|
return
|
|
}
|
|
if (res.code == 0) {
|
|
that.token = res.data.token
|
|
uni.setStorageSync('token', res.data.token)
|
|
uni.setStorageSync('refreshtoken', res.data.refreshtoken)
|
|
uni.setStorageSync('sessionid', res.data.sessionid)
|
|
that.$store.dispatch("getUserInfo")
|
|
}
|
|
}).catch(e => {})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
videoErrorCallback: function(e) {
|
|
uni.showModal({
|
|
content: e.target.errMsg,
|
|
showCancel: false
|
|
})
|
|
},
|
|
// 领导风采
|
|
handleVipList() {
|
|
let that = this
|
|
that.$model.getVipList({
|
|
pageNo: 1,
|
|
pageSize: 100,
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
console.log("风采", res.data.rows)
|
|
this.list = res.data.rows
|
|
}
|
|
})
|
|
},
|
|
// 领导风采详情
|
|
handleDetail(ite) {
|
|
let that = this
|
|
// if (!that.token) {
|
|
// that.$tools.msg("登录后查看更多")
|
|
// return
|
|
// }
|
|
uni.navigateTo({
|
|
url: "/pages/phoneList/detail?id=" + ite.id
|
|
})
|
|
},
|
|
|
|
// 全局搜索
|
|
handleSearch(ite) {
|
|
let that = this
|
|
console.log("搜索信息返回", ite)
|
|
// if (!that.token) {
|
|
// that.$tools.msg("登录后查看更多")
|
|
// return
|
|
// }
|
|
uni.navigateTo({
|
|
url: "/pages/index/searchList?ite=" + ite
|
|
})
|
|
},
|
|
// 工具栏跳转
|
|
handlePath(ind, url) {
|
|
let that = this
|
|
if (ind == 3) {
|
|
uni.switchTab({
|
|
url: url
|
|
})
|
|
} else if (ind == 2) {
|
|
uni.navigateTo({
|
|
url: url + "?content=2"
|
|
})
|
|
} else {
|
|
this.navTo(url)
|
|
}
|
|
},
|
|
// 轮播、公告、资讯详情
|
|
detail(id, type) {
|
|
let that = this
|
|
return that.$model.getInfoDetail({
|
|
id: id,
|
|
type: type
|
|
}).then((res) => {
|
|
console.log("资讯列表", res)
|
|
if (res.code != 0) return
|
|
res.data.type = type
|
|
that.$tools.NewsPtype(res.data)
|
|
|
|
})
|
|
},
|
|
handleSearchId(id, cnt) {
|
|
let that = this
|
|
console.log("返回", id, cnt)
|
|
that.newsList.forEach(ite => {
|
|
if (ite.id == id) {
|
|
ite.browsecnt = cnt
|
|
}
|
|
})
|
|
},
|
|
// 登录
|
|
handleLogin() {
|
|
uni.navigateTo({
|
|
url: "/pageTwo/login/login"
|
|
})
|
|
},
|
|
navTo(url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.head {
|
|
height: 35px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0 10px 10px;
|
|
z-index: 9;
|
|
background-color: $blue;
|
|
}
|
|
|
|
.login {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
border-radius: 5px;
|
|
|
|
text {
|
|
color: $blue;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-left: 5px;
|
|
padding: 0 3px;
|
|
border-bottom: 1px solid $blue;
|
|
}
|
|
}
|
|
|
|
.fangke {
|
|
position: fixed;
|
|
z-index: 9;
|
|
color: #fff;
|
|
right: 10px;
|
|
top: 0px;
|
|
font-size: 12px;
|
|
line-height: 35px;
|
|
display: flex;
|
|
|
|
icon {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
// banner
|
|
.f_banner {
|
|
width: 100%;
|
|
height: 360rpx;
|
|
|
|
/deep/swiper {
|
|
height: 360rpx;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.centerList {
|
|
height: 399.4rpx;
|
|
|
|
/deep/swiper {
|
|
height: 399.4rpx;
|
|
}
|
|
|
|
/deep/video {
|
|
width: 100%;
|
|
height: 399.4rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.notice {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
margin-top: 10px;
|
|
border-radius: 10px;
|
|
|
|
text {
|
|
width: 60px;
|
|
font-size: 18px;
|
|
color: $red;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
border-right: 1px solid #dfdfdf;
|
|
}
|
|
|
|
/deep/swiper {
|
|
width: calc(100% - 15px);
|
|
height: 40px;
|
|
line-height: 40px;
|
|
margin-left: 15px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
}
|
|
|
|
.tools {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
|
|
.item {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding-bottom: 10px;
|
|
|
|
text {
|
|
width: 100%;
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
}
|
|
|
|
.jianjie {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
height: 100px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
color: #000;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.fengcai {
|
|
padding-bottom: 5px;
|
|
|
|
/deep/swiper {
|
|
width: 100%;
|
|
height: 240rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
|
|
image {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name,
|
|
.post {
|
|
width: 90%;
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.post {
|
|
background-color: #F7B133;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
padding: 2px 0;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zixun {
|
|
width: calc(100% - 20px);
|
|
background: #fff;
|
|
margin-top: 10px;
|
|
margin-bottom: 15px;
|
|
padding: 0 10px;
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 15px 10px 0;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #f7f7f7;
|
|
|
|
.left {
|
|
width: calc(100% - 115px);
|
|
height: 70px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.time {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
|
|
view {
|
|
display: flex;
|
|
font-size: 12px;
|
|
align-items: center;
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 105px;
|
|
height: 70px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
width: 100%;
|
|
|
|
text {
|
|
width: 100%;
|
|
color: #f5222d;
|
|
background: #fff1f0;
|
|
border: 1px solid #ffa39e;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
display: block;
|
|
}
|
|
}
|
|
</style> |