622 lines
13 KiB
Vue
622 lines
13 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 搜索 -->
|
||
<view class="head">
|
||
<piker-search @handleSearch="handleSearch" :placeholder='"找产品/找方案"' :width="'60'"></piker-search>
|
||
<view class="fangke">
|
||
<icon class="iconfont icon-remen"></icon>
|
||
<text>今日访客：{{todayviewer}}人</text>
|
||
</view>
|
||
</view>
|
||
<view class="login" @click="handleLogin" v-if="!token">
|
||
登录/注册后查看更多，点击此处<text>登录/注册</text>
|
||
</view>
|
||
<!-- banner -->
|
||
<view class="tips" :style="{'margin':!token?'0':'50px 0 10px'}">
|
||
<text @click="navTo('/pageTwo/me/company')" v-if="token&&!mobile" style="margin-top: 10px;">请尽快完善企业信息</text>
|
||
</view>
|
||
<view class="f_banner" 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 class="box">
|
||
<view class="notice" v-if="notices.length">
|
||
<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)">
|
||
<image :src="item.image"></image>
|
||
<text>{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 简介 -->
|
||
<view class="f_banner centerList" style="margin-top: 10px;" 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='true' object-fit="fill" :loop="true"></video>
|
||
</swiper-item>
|
||
</swiper>
|
||
</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>
|
||
<!-- 底部 -->
|
||
<tabbar :tabInd="0"></tabbar>
|
||
<!-- 微信小店 -->
|
||
<view class="wrapper" v-if="isShop">
|
||
<view class="bg" @click="isShop = false">
|
||
<view class="edit" @click.stop>
|
||
<store-home :appid="shopId" style="width: 100%;height: 90px;"></store-home>
|
||
<view @click="isShop = false" class="close">取消</view>
|
||
<!-- <image src="../../static/error.png" @click="isShop = false"></image> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
import headbg from "@/components/header.vue"
|
||
import tabbar from "@/components/tabBar.vue"
|
||
import list from "@/components/newsList.vue"
|
||
import pikerSearch from "../../components/search.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
token: '',
|
||
shopId: "",
|
||
isShop: false
|
||
}
|
||
},
|
||
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,
|
||
headbg,
|
||
tabbar,
|
||
pikerSearch,
|
||
},
|
||
onLoad() {
|
||
let that = this
|
||
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(res2) {
|
||
if (res2.code) {
|
||
if (res2.errMsg = "login:ok") {
|
||
console.log("code", res2.code)
|
||
that.$model.onlogin({
|
||
code: res2.code,
|
||
}).then(res => {
|
||
if (res.code == 2) {
|
||
that.token = null
|
||
uni.clearStorageSync()
|
||
uni.setStorageSync('UserInfo', {})
|
||
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
|
||
// }
|
||
if (ite != "") {
|
||
uni.navigateTo({
|
||
url: "/pages/index/searchList?ite=" + ite
|
||
})
|
||
}
|
||
},
|
||
// 工具栏跳转
|
||
handlePath(ind, ite) {
|
||
let that = this
|
||
if (ite.link != "") {
|
||
that.navTo(ite.link)
|
||
}
|
||
if (ite.appid != "") {
|
||
that.shopId = ite.appid
|
||
that.isShop = true
|
||
}
|
||
},
|
||
// 轮播、公告、资讯详情
|
||
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;
|
||
min-height: calc(100vh - 90px);
|
||
padding-bottom: 90px;
|
||
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 10px;
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.head {
|
||
height: 35px;
|
||
position: fixed;
|
||
top: 84px;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 0 10px 10px;
|
||
z-index: 999;
|
||
}
|
||
|
||
.login {
|
||
width: 100%;
|
||
text-align: center;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
border-radius: 5px;
|
||
margin-top: 45px;
|
||
|
||
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: 19;
|
||
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;
|
||
overflow: hidden;
|
||
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: $blue;
|
||
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;
|
||
}
|
||
}
|
||
|
||
.bg {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.edit {
|
||
border-radius: 5px;
|
||
height: 125px;
|
||
padding: 20px;
|
||
margin: 0 !important;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
|
||
.close {
|
||
width: 100px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
margin-top: 15px;
|
||
border-radius: 5px;
|
||
background-color: #eae7e7;
|
||
}
|
||
}
|
||
}
|
||
</style> |