chanyishenghuo-uniapp/pages/home/index.vue

<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="aspectFill"></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" v-if="live.length> 0">
			<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" @click="toCourseDetail(item.id)">
					<image :src="item.coverImge" mode="aspectFill"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 推荐课程 -->
		<view class="recommend-box p30" v-if="courseList.length> 0">
			<ListTitleBox :titImg="'../../../static/tit2.png'" :titWord="'查看更多课程'" @seeMoreClick="toCourse">
			</ListTitleBox>
			<CourseList :list="courseList"></CourseList>
		</view>
		<!-- 学习榜 -->
		<view class="study-list-box p30" v-if="studyList.length> 0">
			<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'),
				}
			},
			toCourseDetail(id){
				this.$yrouter.push({
				  path: '/pages/course/detail',
				  query: {
				    id:id,
				  },
				})
			},
			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: 36rpx;

		.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-bottom: 20rpx;

			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>