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.
 
 
 
 
 

951 lines
22 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>
<!-- #ifndef H5 -->
<view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'">
<image src="../../static/saoyisao-icon.png" />
</view>
<!-- #endif -->
</view>
<view class="banner-box">
<image src="https://www.cyjyyjy.com:8081/static/home-banner.png" mode=""></image>
</view>
<!-- 每日一签 -->
<view class="today-fortune-content">
<view class="today-fortune-box">
<view class="top-box acea-row row-between-wrapper">
<view class="title">今日·宜忌</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">宜</view>
<view class="fortune">{{yi}}</view>
</view>
<view class="fortune-b acea-row-nowrap mt20">
<view class="fortune-icon bad">忌</view>
<view class="fortune">{{ji}}</view>
</view>
</view>
<view class="qiuqian-box" v-if="flag == 1">
<image class="qiuqian-bg" @click="todiandeng()" src="https://qiniu.upload.gznl.top/90a6420b-abd9-41e2-be4f-dcf10fe93bed.png"></image>
<!-- <view class="txt-box acea-row row-between-wrapper">
<view></view>
<view class="qiuqin-btn" @click="todiandeng()">祈福点灯</view>
</view> -->
</view>
</view>
<!-- <view class="fortune-menu-box acea-row row-between">
<view class="fortune-menu-item acea-row row-middle" @click="toWebView()">
<image src="../../static/f-menu1.png" mode=""></image>
<text>周公解梦</text>
</view>
<view class="fortune-menu-item acea-row row-middle">
<image src="../../static/f-menu2.png" mode=""></image>
<text>周易八卦</text>
</view>
<view class="fortune-menu-item acea-row row-middle">
<image src="../../static/f-menu3.png" mode=""></image>
<text>八字财运</text>
</view>
</view> -->
</view>
<!-- 推荐课程 -->
<view class="recommend-box p30">
<view class="title-box acea-row row-between-wrapper">
<view class="title">今日推荐</view>
<view class="more" @click="toCourse">查看全部课程</view>
</view>
<view class="recommend-list-box acea-row">
<view class="recommend-item" v-for="(item,index) in courseList" :key="index" @click="toCourseDetail(item.id)">
<view class="img-box"><image :src="item.imageArr[0]" mode="aspectFill"></image></view>
<view class="course-content">
<view class="course-title line1">{{item.courseName}}</view>
<view class="course-tips-box acea-row">
<view class="course-tip-item blue">{{item.categoryName}}</view>
<view class="course-tip-item yellow">{{item.levelName}}</view>
</view>
<!-- <view class="price" v-if="item.level > 2">{{item.level}}级课程</view>
<view class="price" v-if="item.level == 2">¥{{item.courseCharge}}</view>
<view class="price colG" v-if="item.chargeType == 0 || item.level == 1">免费</view> -->
<view class="course-address acea-row row-between-wrapper">
<view class="address">{{item.coursePlace}}</view>
<view class="course-time">{{setDate(item.courseStartTime)}}-{{setDate(item.courseEndTime)}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 学习榜 -->
<view class="study-list-box">
<view class="title-box acea-row row-between-wrapper">
<view class="title">学习榜单</view>
<view class="more" @click="toCourse">查看全部榜单</view>
</view>
<view class="study-list uni-padding-wrap uni-common-mt">
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="study-item scroll-view-item_H" v-for="(item,index) in studyList" :key="index" @click="toStudyDetail(item.id)">
<view class="day-box acea-row row-middle">
<image src="../../static/date-icon.png" v-if="index%2 == 0"></image>
<image src="../../static/date-icon2.png" v-if="index%2 != 0"></image>
<text>{{item.clockTimes}}</text>
</view>
<view class="study-content">
<view class="study-title">{{item.listName}}</view>
<view class="study-time acea-row-nowrap row-between-wrapper">
<view>{{setDate(item.listStartTime)}}开始</view>
<view>{{item.enterNum}}人已参与</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 都在看 -->
<view class="readyarticle-box">
<view class="title-box acea-row row-between-wrapper">
<view class="title">大家都在看</view>
<view class="more" @click="toKnowledge">查看全部文章</view>
</view>
<view class="article-list">
<view class="article-item" v-for="(item,index) in articleList" :key="index" @click="toArticleDetail(item.id)">
<image :src="item.imageInput" mode="aspectFill"></image>
<view class="article-content">
<view class="article-title line1">{{item.title}}</view>
<view class="article-desc line1">{{item.synopsis}}</view>
<view class="author-box acea-row row-between">
<view class="acea-row">
<view class="author">{{item.author}}</view>
<view class="time">{{item.addTime.split(' ')[0]}}</view>
<view>{{item.visit}}人阅读</view>
</view>
<view class="tips"
:class="item.chargeType == 0 ? 'free-bg' : item.chargeType == 1 ? '' : 'jifen'">
{{item.chargeType == 0 ? '免费' : item.chargeType == 1 ? '收费' : '积分'}}
</view>
</view>
</view>
</view>
</view>
</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 { 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: {
// swiper,
// swiperSlide,
UniNoticeBar,
GoodList,
PromotionGood,
CouponWindow,
Menu,
Adv,
Groupon,
Banner,
HotCommodity,
FirstNewProduct,
ProductsRecommended,
Live,
},
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
}
},
computed: {
singNew() {
return this.roll.length > 0 ? this.roll[0] : '你还没添加通知哦!'
},
customStyle() {
var bgImage = this.bgImage
// var style = `height:${this.CustomBar}px;padding-top:${0}px;background: ${this.bgcolor}`;
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:'正在加载中...'
})
// getCanvas()
// .then(res => {})
// .catch(error => {
// this.homeData = JSON.parse(error.data.json)
// })
getBlessingFlag().then((res)=>{
this.flag = res.data
})
getHomeData().then(res => {
uni.hideLoading()
that.logoUrl = res.data.logoUrl
res.data.banner.map(item => (item.bgcolor = item.color || ''))
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.cyCourseDtos)
that.$set(that, 'studyList', res.data.studyLists)
that.$set(that, 'articleList', res.data.articleDtos)
uni.hideLoading()
that.setOpenShare()
})
getWanniali(this.dateStr2).then((res)=>{
console.log(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(' ')
}
})
},
methods: {
...mapActions(['getLocation']),
todiandeng(){
uni.navigateTo({
url:'/pages/diandeng/index'
})
},
setDate(t){
let str = t.split(" ")[0].split("-")[1] + "." + t.split(" ")[0].split("-")[2]
return str
},
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'),
}
},
toCourseDetail(id){
this.$yrouter.push({
path: '/pages/course/detail',
query: {
id:id,
},
})
},
toStudyDetail(id){
this.$yrouter.push({
path: '/pages/study/detail',
query: {
id:id,
},
})
},
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
})
}
})
// switch (option.pageType) {
// case 'good':
// // 跳转商品详情
// this.$yrouter.push({
// path: '/pages/shop/GoodsCon/index',
// query: {
// q: res.result,
// },
// })
// break
// case 'group':
// // 跳转团购
// this.$yrouter.push({
// path: '/pages/activity/GroupRule/index',
// query: {
// q: res.result,
// },
// })
// break
// case 'dargain':
// // 跳转砍价
// this.$yrouter.push({
// path: '/pages/activity/DargainDetails/index',
// query: {
// q: res.result,
// },
// })
// break
// default:
// // 跳转分销
// this.$yrouter.push({
// path: '/pages/Loading/index',
// query: {},
// })
// break
// }
},
})
},
getbgcolor(e) {
this.bgcolor = e
},
},
created: async function() {
// await this.doColorThief();
},
}
</script>
<style scoped lang="less">
.content_box {
background: #F5F6F7;
}
.colG{
color: #8FB85B !important;
}
.index {
background-color: #F5F6F7;
padding-bottom: 68rpx;
.header{
.qr {
width: 36rpx;
height: 38rpx;
image{
width: 36rpx;
height: 38rpx;
}
}
}
}
.swiper-item {
height: 100%;
}
.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: 100%;
height: 372rpx;
}
.today-fortune-content{
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
margin-bottom: 40rpx;
.today-fortune-box{
width: 100%;
background: #fff;
box-sizing: border-box;
padding: 30rpx 40rpx;
border-radius: 20rpx;
box-shadow: 0px 6px 14px 0px rgba(124,124,124,0.08);
font-size: 24rpx;
position: relative;
top: -24rpx;
}
.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: 44rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
border-radius: 25px;
font-size: 28rpx;
color: #fff;
margin-right: 20rpx;
}
.fortune{
width:calc(100% - 70rpx)
}
.nice{
background: #EA533E;
}
.bad{
background: #8FB85B;
}
}
.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;
box-sizing: border-box;
margin-bottom: 40rpx;
}
.recommend-box{
.recommend-list-box{
width: 100%;
// margin-top: 20rpx;
.recommend-item{
width: 334rpx;
background: #fff;
border-radius: 10rpx;
font-size: 28rpx;
color: #333;
margin-right: 23rpx;
margin-top: 23rpx;
overflow: hidden;
image{
width: 334rpx;
height: 216rpx;
}
.course-content{
width: 100%;
box-sizing: border-box;
padding:0 20rpx 20rpx;
}
.course-title{
line-height: 40rpx;
}
.course-tips-box{
margin: 12rpx 0 24rpx;
font-size: 24rpx;
color: #999;
.course-tip-item{
min-width: 60rpx;
height: 34rpx;
line-height: 32rpx;
text-align: center;
background: #EDEFF8;
border-radius: 4rpx;
border: 1px solid #6E85EB;
padding: 0 6rpx;
font-size: 22rpx;
margin-right: 20rpx;
box-sizing: border-box;
margin-right: 10rpx;
}
.blue{
color: #6E85EB;
background: #EDEFF8;
border-color: #6E85EB;
}
.yellow{
color: #F99C10;
background: #FFEDCC;
border-color: #F99C10;
}
}
.price{
font-size: 32rpx;
color: #EA533E;
font-weight: 500;
margin: 16rpx 0;
}
.course-address{
font-size: 24rpx;
color: #999999;
}
}
.recommend-item:nth-child(2n){
margin-right: 0;
}
}
}
.study-list-box,.readyarticle-box{
margin-bottom: 40rpx;
.title-box{
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
}
}
.study-list{
width: 100%;
margin-top: 20rpx;
margin-bottom: 40rpx;
padding-left: 20rpx;
box-sizing: border-box;
.scroll-view_H{
white-space: nowrap;
width: 100%;
}
.study-item{
width: 334rpx;
height: 180rpx;
display: inline-block;
background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%);
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
border-radius: 10rpx;
margin-right: 20rpx;
.day-box{
color: #E73D21;
font-size: 48rpx;
line-height: 58rpx;
margin-left: 10rpx;
image{
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
}
.study-content{
width: calc(100% - 12rpx);
background: #fff;
font-size: 24rpx;
color: #999;
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
border-radius: 10rpx;
margin: 2rpx auto;
padding:16rpx 10rpx 10rpx;
box-sizing: border-box;
.study-title{
font-size: 28rpx;
font-weight: 500;
color: #222222;
line-height: 40rpx;
margin-bottom: 12rpx;
}
}
}
.study-item:nth-child(2n){
background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%);
.day-box{
color: #557AB3;
}
}
}
.readyarticle-box{
.article-list{
width: 100%;
margin-top: 20rpx;
.article-item{
width: 100%;
background: #fff;
padding: 20rpx;
box-sizing: border-box;
margin-bottom: 12rpx;
image{
width: 710rpx;
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{
color: #222;
.title{
font-size: 40rpx;
font-weight: 500;
}
.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;
}
}
.header-search {
transition: all linear 0.3s;
background: #fff;
color: #999999;
.search{
border: 2rpx solid #EA533E;
background-color: #fff;
}
}
.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>