You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
842 lines
18 KiB
842 lines
18 KiB
<template> |
|
<view class="index"> |
|
<view class="header header-search acea-row row-middle"> |
|
<view @click="goGoodSearch()" class="search acea-row row-middle"> |
|
<text class="iconfont icon-xiazai5"></text> |
|
搜索商品 |
|
</view> |
|
</view> |
|
<view class="banner-box"> |
|
<swiper class="swiper-box"> |
|
<swiper-item> |
|
<view class="swiper-item"> |
|
<image src="https://www.cyjyyjy.com:8081/static/home-banner.png" mode=""></image> |
|
</view> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
<!-- 每日一签 --> |
|
<view class="today-fortune-content"> |
|
<view class="today-fortune-box"> |
|
<view class="top-box acea-row row-between-wrapper"> |
|
<view class="title"> |
|
<image src="../../static/idx-icon1.png"></image> |
|
</view> |
|
<view>{{year}}年{{month}}月{{day}}日</view> |
|
</view> |
|
<view class="date-box acea-row row-middle row-center"> |
|
<view class="date-btn prev-btn"> |
|
<image src="../../static/prev.png"></image> |
|
</view> |
|
<view class="time-box">{{todayDate}}</view> |
|
<view class="date-btn next-btn"> |
|
<image src="../../static/next.png"></image> |
|
</view> |
|
</view> |
|
<view class="week-box"> |
|
<span class="week">星期{{week}}</span> |
|
<span>{{suici}}</span> |
|
</view> |
|
<view class="fortune-detail"> |
|
<view class="fortune-n acea-row-nowrap mt20"> |
|
<view class="fortune-icon nice"> |
|
<image src="../../static/yi.png"></image> |
|
</view> |
|
<view class="fortune">{{yi}}</view> |
|
</view> |
|
<view class="fortune-b acea-row-nowrap mt20"> |
|
<view class="fortune-icon bad"> |
|
<image src="../../static/ji.png"></image> |
|
</view> |
|
<view class="fortune">{{ji}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <view class="notice-box acea-row row-middle" @click="toNoticePage"> |
|
<view class="notice-t">公告</view> |
|
<view class="notice">点击下载直播APP，在线观看！！</view> |
|
</view> --> |
|
<!-- 推荐直播 --> |
|
<view class="liveCourse-list-box p30"> |
|
<ListTitleBox :titImg="'../../../static/tit1.png'"> </ListTitleBox> |
|
<view class="liveCourse-list acea-row row-between"> |
|
<view class="item" v-for="item in live" :key="item.id"> |
|
<image :src="item.coverImge" mode="aspectFill"></image> |
|
<text>{{item.name}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 推荐课程 --> |
|
<view class="recommend-box p30"> |
|
<ListTitleBox :titImg="'../../../static/tit2.png'" :titWord="'查看更多课程'" @seeMoreClick="toCourse"> |
|
</ListTitleBox> |
|
<CourseList :list="courseList"></CourseList> |
|
</view> |
|
<!-- 学习榜 --> |
|
<view class="study-list-box p30"> |
|
<ListTitleBox :titImg="'../../../static/tit3.png'" :titWord="'查看更多打卡榜单'" @seeMoreClick="toCourse"> |
|
</ListTitleBox> |
|
<StadyList :list="studyList"></StadyList> |
|
</view> |
|
<!-- 都在看 --> |
|
<view class="readyarticle-box p30"> |
|
<ListTitleBox :titImg="'../../../static/tit4.png'" :titWord="'查看全部文章'" @seeMoreClick="toKnowledge"> |
|
</ListTitleBox> |
|
<ArticleList :list="articleList"></ArticleList> |
|
|
|
</view> |
|
<view class="no-more">没有更多内容了～</view> |
|
</view> |
|
</template> |
|
<script> |
|
import { |
|
mapState, |
|
mapMutations, |
|
mapActions |
|
} from 'vuex' |
|
import GoodList from '@/components/GoodList' |
|
import PromotionGood from '@/components/PromotionGood' |
|
import CouponWindow from '@/components/CouponWindow' |
|
import Menu from '@/components/Menu' |
|
import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar' |
|
import Adv from '@/components/sh-adv' |
|
import Groupon from '@/components/sh-groupon.vue' |
|
import Banner from './components/Banner' |
|
import HotCommodity from './components/HotCommodity' |
|
import FirstNewProduct from './components/FirstNewProduct' |
|
import ProductsRecommended from './components/ProductsRecommended' |
|
// import Live from './components/Live' |
|
import CourseList from './components/CourseList.vue' |
|
import ListTitleBox from './components/ListTitleBox.vue' |
|
import StadyList from './components/StadyList.vue' |
|
import ArticleList from './components/ArticleList.vue' |
|
import { |
|
getHomeData, |
|
getShare, |
|
getCanvas |
|
} from '@/api/public' |
|
import cookie from '@/utils/store/cookie' |
|
import { |
|
isWeixin, |
|
handleUrlParam |
|
} from '@/utils/index' |
|
import { |
|
signCourse |
|
} from '@/api/knowledge' |
|
import { |
|
getWanniali, |
|
getBlessingFlag |
|
} from '@/api/diandeng' |
|
import { |
|
openShareAll |
|
} from '@/libs/wechat' |
|
const HAS_COUPON_WINDOW = 'has_coupon_window' |
|
|
|
export default { |
|
name: 'Index', |
|
components: { |
|
UniNoticeBar, |
|
GoodList, |
|
PromotionGood, |
|
CouponWindow, |
|
Menu, |
|
Adv, |
|
Groupon, |
|
Banner, |
|
HotCommodity, |
|
FirstNewProduct, |
|
ProductsRecommended, |
|
CourseList, |
|
ListTitleBox, |
|
StadyList, |
|
ArticleList, |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
homeData: [], |
|
CustomBar: this.CustomBar, |
|
StatusBar: this.StatusBar, |
|
formatMenus: [], |
|
categoryCurrent: 0, |
|
menuNum: 4, |
|
bgcolor: '', |
|
bgColor: '', |
|
swiperCurrent: 0, //轮播下标 |
|
webviewId: 0, |
|
showCoupon: false, |
|
logoUrl: '', |
|
banner: [], |
|
menus: [], |
|
combinationList: [], |
|
roll: [], |
|
activity: [], |
|
activityOne: {}, |
|
bastList: [], |
|
firstList: [], |
|
info: { |
|
fastList: [], |
|
bastBanner: [], |
|
bastList: [], |
|
}, |
|
likeInfo: [], |
|
live: [], |
|
lovely: [], |
|
benefit: [], |
|
couponList: [], |
|
bgImage: '', |
|
week: '', |
|
suici: '', |
|
year: '', |
|
month: '', |
|
day: '', |
|
ji: '', |
|
yi: '', |
|
dateStr: '', |
|
todayDate: '', |
|
courseList: [], |
|
studyList: [], |
|
articleList: [], |
|
flag: 0, |
|
titImg1: '../../../static/tit1.png', |
|
titleWord1: '查看更多课程', |
|
titImg2: '../../../static/tit2.png', |
|
titleWord2: '查看更多打卡榜单' |
|
} |
|
}, |
|
computed: { |
|
singNew() { |
|
return this.roll.length > 0 ? this.roll[0] : '你还没添加通知哦！' |
|
}, |
|
customStyle() { |
|
var bgImage = this.bgImage |
|
var style = `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background: ${this.bgcolor}` |
|
if (this.bgImage) { |
|
style = `${style}background-image:url(${bgImage});` |
|
} |
|
return style |
|
} |
|
}, |
|
onLoad: function() { |
|
|
|
|
|
this.getLocation() |
|
let that = this |
|
this.getDate(); |
|
uni.showLoading({ |
|
title: '正在加载中...' |
|
}) |
|
getBlessingFlag().then((res) => { |
|
this.flag = res.data |
|
}) |
|
this.getData() |
|
|
|
getWanniali(this.dateStr2).then((res) => { |
|
var data = res.data |
|
if (res.success) { |
|
this.suici = JSON.parse(data.huangli.suici).join(' ') |
|
this.week = data.week |
|
this.todayDate = data.lunarmonth + data.lunarday |
|
this.year = data.year |
|
this.month = data.month |
|
this.day = data.day |
|
this.ji = JSON.parse(data.huangli.ji).join(' ') |
|
this.yi = JSON.parse(data.huangli.yi).join(' ') |
|
} |
|
}) |
|
}, |
|
onPullDownRefresh() { |
|
this.getData() |
|
}, |
|
methods: { |
|
...mapActions(['getLocation']), |
|
getData() { |
|
var that = this; |
|
getHomeData().then(res => { |
|
uni.hideLoading() |
|
that.logoUrl = res.data.logoUrl |
|
res.data.banner.map(item => (item.bgcolor = item.color || '')) |
|
res.data.lessionDtos.map(item => { |
|
item.enterStartTime = this.setDate(item.enterStartTime) |
|
item.enterEndTime = this.setDate(item.enterEndTime) |
|
}) |
|
res.data.studyLists.map(item => { |
|
item.listStartTime = this.setDate(item.listStartTime) |
|
}) |
|
that.$set(that, 'info', res.data.info) |
|
that.$set(that, 'firstList', res.data.firstList) |
|
that.$set(that, 'bastList', res.data.bastList) |
|
that.$set(that, 'likeInfo', res.data.likeInfo) |
|
that.$set(that, 'live', res.data.liveList) |
|
that.$set(that, 'lovely', res.data.lovely) |
|
that.$set(that, 'benefit', res.data.benefit) |
|
that.$set(that, 'couponList', res.data.couponList) |
|
that.$set(that, 'combinationList', res.data.combinationList) |
|
that.$set(that, 'courseList', res.data.lessionDtos) |
|
that.$set(that, 'studyList', res.data.studyLists) |
|
that.$set(that, 'articleList', res.data.articleDtos) |
|
uni.hideLoading() |
|
that.setOpenShare() |
|
uni.stopPullDownRefresh() |
|
}) |
|
}, |
|
todiandeng() { |
|
uni.navigateTo({ |
|
url: '/pages/diandeng/index' |
|
}) |
|
}, |
|
setDate(t) { |
|
return t.split(" ")[0].split("-")[1] + "." + t.split(" ")[0].split("-")[2] |
|
}, |
|
getDate() { |
|
var today = new Date(); |
|
var y = today.getFullYear().toString() |
|
var m = (today.getMonth() + 1).toString() |
|
var d = today.getDate().toString() |
|
var day = today.getDay() |
|
this.dateStr = y + '年' + m + '月' + d + '日' |
|
this.dateStr2 = y + '-' + m + '-' + d |
|
}, |
|
onShareTimeline: function() { |
|
return { |
|
title: this.miniHomeRemark, |
|
imageUrl: this.miniHomeImg, |
|
path: 'pages/home/index?spread=' + uni.getStorageSync('uid'), |
|
} |
|
}, |
|
onShareAppMessage: function() { |
|
return { |
|
title: this.miniHomeRemark, |
|
imageUrl: this.miniHomeImg, |
|
path: 'pages/home/index?spread=' + uni.getStorageSync('uid'), |
|
} |
|
}, |
|
toNoticePage() { |
|
this.$yrouter.push({ |
|
path: '/pages/noticePage/index', |
|
}) |
|
}, |
|
toArticleDetail(id) { |
|
this.$yrouter.push({ |
|
path: '/pages/knowledge/detail', |
|
query: { |
|
id: id, |
|
}, |
|
}) |
|
}, |
|
toKnowledge() { |
|
uni.switchTab({ |
|
url: "/pages/knowledge/index" |
|
}) |
|
}, |
|
toCourse() { |
|
uni.switchTab({ |
|
url: "/pages/course/index" |
|
}) |
|
}, |
|
goRoll(item) { |
|
if (item.uniapp_url) { |
|
this.$yrouter.push(item.uniapp_url) |
|
} |
|
}, |
|
goGoodSearch() { |
|
// this.$yrouter.push('/pages/shop/GoodsEvaluate/index'); |
|
this.$yrouter.push('/pages/shop/GoodSearch/index') |
|
}, |
|
goWxappUrl(item) { |
|
this.$yrouter.push(item.uniapp_url) |
|
}, |
|
goHotNewGoods(type) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/HotNewGoods/index', |
|
query: { |
|
type, |
|
}, |
|
}) |
|
}, |
|
goGoodsCon(item) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: item.id, |
|
}, |
|
}) |
|
}, |
|
goGoodsPromotion() { |
|
this.$yrouter.push('/pages/shop/GoodsPromotion/index') |
|
}, |
|
setOpenShare: function() { |
|
if (this.$deviceType == 'weixin') { |
|
getShare().then(res => { |
|
var data = res.data.data |
|
var configAppMessage = { |
|
desc: data.synopsis, |
|
title: data.title, |
|
link: location.href, |
|
imgUrl: data.img, |
|
} |
|
openShareAll(configAppMessage) |
|
}) |
|
} |
|
}, |
|
startQr: function() { |
|
uni.showLoading({ |
|
title: '正在加载中...' |
|
}) |
|
uni.scanCode({ |
|
success: res => { |
|
// let option = handleUrlParam(res.result) |
|
let id = res.result; |
|
signCourse(id).then((res) => { |
|
uni.hideLoading() |
|
if (res.success) { |
|
uni.showModal({ |
|
title: '提示!', |
|
content: '签到成功！您的座位号是' + res.data, |
|
|
|
}) |
|
} else { |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none', |
|
duration: 5000 |
|
}) |
|
} |
|
}) |
|
}, |
|
}) |
|
}, |
|
getbgcolor(e) { |
|
this.bgcolor = e |
|
}, |
|
}, |
|
} |
|
</script> |
|
<style scoped lang="less"> |
|
.content_box { |
|
background: #fff; |
|
} |
|
|
|
.colG { |
|
color: #8FB85B !important; |
|
} |
|
|
|
.index { |
|
padding-bottom: 68rpx; |
|
background: #fff !important; |
|
|
|
.header { |
|
.qr { |
|
width: 36rpx; |
|
height: 38rpx; |
|
|
|
image { |
|
width: 36rpx; |
|
height: 38rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.header-search { |
|
width: 690rpx; |
|
height: 70rpx; |
|
background: #F3F3F3; |
|
color: #999999; |
|
margin: 0 auto; |
|
border-radius: 35rpx; |
|
|
|
.search { |
|
width: 100%; |
|
background: #F3F3F3; |
|
color: #999999; |
|
} |
|
} |
|
|
|
.notice-box { |
|
width: 690rpx; |
|
height: 66rpx; |
|
margin: 0rpx auto 36rpx; |
|
border-radius: 8px; |
|
background: #F9F9F9; |
|
font-weight: 500; |
|
|
|
.notice-t { |
|
width: 120rpx; |
|
height: 100%; |
|
background: #FBE5A8; |
|
color: #FF4224; |
|
text-align: center; |
|
line-height: 66rpx; |
|
border-top-right-radius: 8rpx; |
|
border-bottom-right-radius: 8rpx; |
|
} |
|
|
|
.notice { |
|
font-size: 28rpx; |
|
color: #411E04; |
|
margin-left: 20rpx; |
|
} |
|
} |
|
|
|
.swiper-item { |
|
height: 100%; |
|
image{ |
|
border-radius: 20rpx; |
|
} |
|
} |
|
|
|
.fixed-header { |
|
position: fixed; |
|
z-index: 99; |
|
// #ifdef H5 |
|
top: 88rpx; |
|
// #endif |
|
// #ifndef H5 |
|
top: 0; |
|
// #endif |
|
left: 0; |
|
right: 0; |
|
background: #fff; |
|
box-shadow: 0 0 20rpx -10rpx #aaa; |
|
|
|
&+.fixed-header-box { |
|
height: 98rpx; |
|
} |
|
} |
|
|
|
.banner-box { |
|
width: 688rpx; |
|
height: 268rpx; |
|
border-radius: 20rpx; |
|
overflow: hidden; |
|
margin: 32rpx auto; |
|
|
|
.swiper-box { |
|
height: 100%; |
|
} |
|
} |
|
|
|
.today-fortune-content { |
|
width: 100%; |
|
padding: 0 30rpx; |
|
box-sizing: border-box; |
|
margin-bottom: 20rpx; |
|
|
|
.today-fortune-box { |
|
width: 100%; |
|
background: #fff; |
|
box-sizing: border-box; |
|
padding: 30rpx 40rpx; |
|
border-radius: 20rpx; |
|
box-shadow: 0px 6rpx 14rpx rgba(80, 80, 80, 0.08); |
|
font-size: 24rpx; |
|
|
|
.top-box { |
|
color: #999999; |
|
|
|
.title { |
|
width: 208rpx; |
|
height: 62rpx; |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.date-box { |
|
font-size: 72rpx; |
|
color: #EA533E; |
|
margin-top: 38rpx; |
|
|
|
.time-box { |
|
margin: 0 24rpx; |
|
} |
|
|
|
.date-btn { |
|
width: 84rpx; |
|
height: 84rpx; |
|
font-weight: bold; |
|
line-height: 100rpx; |
|
} |
|
} |
|
|
|
.week-box { |
|
width: 100%; |
|
color: #7C7C7C; |
|
text-align: center; |
|
// border-bottom: 1px solid #ECECEC; |
|
padding: 30rpx 0; |
|
|
|
.week { |
|
display: inline-block; |
|
margin-right: 12rpx; |
|
color: #222; |
|
} |
|
} |
|
|
|
.fortune-detail { |
|
font-size: 30rpx; |
|
color: #222; |
|
|
|
.fortune-n { |
|
color: #EA533E; |
|
} |
|
|
|
.fortune-icon { |
|
width: 64rpx; |
|
height: 52rpx; |
|
margin-right: 24rpx; |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
|
|
.fortune { |
|
width: calc(100% - 88rpx) |
|
} |
|
} |
|
|
|
.qiuqian-box { |
|
width: 100%; |
|
height: 124rpx; |
|
position: relative; |
|
margin-top: 40rpx; |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
z-index: 1; |
|
} |
|
|
|
.txt-box { |
|
width: 100%; |
|
height: 100%; |
|
padding: 0 28rpx; |
|
box-sizing: border-box; |
|
font-size: 30rpx; |
|
color: #EA533E; |
|
position: absolute; |
|
z-index: 3; |
|
} |
|
|
|
.qiuqin-btn { |
|
width: 194rpx; |
|
height: 68rpx; |
|
background: linear-gradient(180deg, #EA533E 0%, #E5270F 100%); |
|
box-shadow: 0px 4rpx 6rpx 2rpx rgba(255, 213, 208, 0.59); |
|
border-radius: 34rpx; |
|
font-size: 32rpx; |
|
color: #fff; |
|
text-align: center; |
|
line-height: 68rpx; |
|
} |
|
} |
|
|
|
.fortune-menu-box { |
|
.fortune-menu-item { |
|
width: 216rpx; |
|
height: 88rpx; |
|
border-radius: 6rpx; |
|
background: #fff; |
|
font-size: 28rpx; |
|
color: #222; |
|
|
|
image { |
|
width: 60rpx; |
|
height: 60rpx; |
|
margin-right: 12rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.p30 { |
|
width: 100%; |
|
padding: 0 30rpx; |
|
margin-bottom: 40rpx; |
|
} |
|
|
|
.liveCourse-list { |
|
.item { |
|
width: 334rpx; |
|
font-size: 28rpx; |
|
color: #000; |
|
font-weight: bold; |
|
overflow: hidden; |
|
margin-right: 18rpx; |
|
|
|
image { |
|
width: 100%; |
|
height: 224rpx; |
|
margin-bottom: 18rpx; |
|
border-radius: 12rpx; |
|
} |
|
} |
|
} |
|
|
|
.readyarticle-box { |
|
.article-list { |
|
width: 100%; |
|
margin-top: 20rpx; |
|
|
|
.article-item { |
|
width: 100%; |
|
background: #fff; |
|
box-sizing: border-box; |
|
margin-bottom: 12rpx; |
|
|
|
image { |
|
width: 100%; |
|
height: 266rpx; |
|
border-radius: 10rpx; |
|
margin-bottom: 20rpx; |
|
} |
|
|
|
.article-title { |
|
font-size: 36rpx; |
|
font-weight: 500; |
|
color: #333333; |
|
line-height: 50rpx; |
|
margin-bottom: 8rpx; |
|
} |
|
|
|
.article-desc { |
|
font-size: 24rpx; |
|
font-weight: 400; |
|
color: #999999; |
|
line-height: 40rpx; |
|
margin-bottom: 30rpx; |
|
// text-indent: 1em; |
|
} |
|
|
|
.author-box { |
|
font-size: 24rpx; |
|
color: #999; |
|
|
|
// text-indent: 1em; |
|
.author { |
|
color: #EA533E; |
|
} |
|
|
|
.time { |
|
margin: 0 12rpx; |
|
} |
|
|
|
.tips { |
|
width: 100rpx; |
|
font-size: 20rpx; |
|
color: #FFAD3A; |
|
height: 34rpx; |
|
text-align: center; |
|
line-height: 34rpx; |
|
background: #fcd391; |
|
border-radius: 44rpx; |
|
} |
|
|
|
.free-bg { |
|
background: #8FB85B; |
|
color: #D7FFA4; |
|
} |
|
|
|
.jifen { |
|
background: #AAC8FA; |
|
color: #5693F9; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.title-box { |
|
width: 208rpx; |
|
height: 62rpx; |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.more { |
|
font-size: 24rpx; |
|
color: #999; |
|
} |
|
} |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.no-more { |
|
text-align: center; |
|
color: #999; |
|
font-size: 24rpx; |
|
} |
|
|
|
.head_box { |
|
width: 750rpx; |
|
// background: #fff; |
|
transition: all linear 0.3s; |
|
|
|
/deep/.cuIcon-back { |
|
display: none; |
|
} |
|
|
|
.nav-title { |
|
font-size: 38rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #fff; |
|
} |
|
} |
|
|
|
.cu-bar.fixed { |
|
position: fixed; |
|
width: 100%; |
|
top: 0; |
|
z-index: 1024; |
|
// box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.cu-bar { |
|
box-sizing: border-box; |
|
|
|
.index .header { |
|
height: 64rpx; |
|
} |
|
} |
|
|
|
|
|
.cu-bar .action { |
|
display: -webkit-box; |
|
display: -webkit-flex; |
|
display: flex; |
|
align-items: center; |
|
height: 100%; |
|
max-height: 100%; |
|
|
|
&:first-child { |
|
margin-left: 15px; |
|
font-size: 15px; |
|
} |
|
} |
|
|
|
.home_content_box { |
|
margin-top: -20rpx; |
|
} |
|
|
|
.head_box {} |
|
|
|
.nav-title { |
|
margin-left: 20rpx; |
|
line-height: 40px; |
|
} |
|
</style>
|
|
|