yanzong_qianduan/pages/activity/seckill.vue

<template>
	<view class="seckill">
		<view>
			<u-navbar title="限时秒杀" back-icon-color="#fff" :border-bottom="false" title-color="#fff"
				:background="background"></u-navbar>
		</view>
		<view class="title" :style="{backgroundImage:'url('+backgroundImg+')'}" style="background-size: 100% 100%;">
			<image src="/static/seckill/topHeader.png" mode="" class="bgImg"></image>
			<view class="limitTitle">
				<image src="/static/seckill/limit.png" mode="" class="img"></image>
			</view>
			<view class="time" v-if="tabbar.length">
				<view class="timeItem" v-for="(item,index) in tabbar" :key="index">
					<view class="num">
						{{item.active_time}}
					</view>
					<view class="desc">
						{{item.status_text}}
					</view>
				</view>

			</view>
		</view>
		<view class="main">
			<view class="over" v-if="tabbar.length">
				<view class="info">
					距秒杀<text
						class="m-r-10">{{ tabbar[curTabIndex].status == ActiveStatusEnum.STATE_BEGIN.value ? '距结束' : '距开始' }}</text>还剩
					<count-down style='display: inline-block;' :date="tabbar[curTabIndex].count_down_time"
						separator="colon" theme="custom" />
				</view>
			</view>
			<view class="goodsList">
				<view class="goodItem" v-for="(item,index) in goodsList" :key="index"
					@click="handleTargetGoods(item.goods_id)">
					<view class="itemImg">
						<image :src="item.goods_image" mode="" class="goodsImg"></image>
					</view>
					<view class="goodsInfo">
						<view class="name">
							{{item.goods_name}}
						</view>
						<view class="sellNum">
							爆卖{{item.sales_actual}}件
						</view>
						<view class="info">
							<view class="price">
								¥{{item.original_price}}
							</view>
							<view class="delPrice">
								<view class="delText">
									直降{{item.original_price-item.seckill_price_min}}元
								</view>

							</view>
							<view class="update">
								即将调整
							</view>
						</view>
						<view class="line">
							<image src="/static/seckill/line.png" mode=""></image>
						</view>
						<view class="btn" v-if="tabbar.length">
							<view class="killPrice">
								秒杀价￥<text>{{item.original_price}}</text>
							</view>
							<view class="buyNow">
								马上抢
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import WxofficialMixin from '@/core/mixins/wxofficial'
	import CountDown from '@/components/countdown'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {
		hex2rgba
	} from '@/utils/color'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	import {
		ActiveStatusEnum
	} from '@/common/enum/sharp'
	import * as Api from '@/api/activity'

	const pageSize = 15

	export default {
		components: {
			CountDown
		},
		mixins: [MescrollMixin, WxofficialMixin],
		data() {
			return {
				// 是否正在加载中
				isLoading: true,
				// 当前tab索引
				curTabIndex: 0,
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: false,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于3条才显示无更多数据
					noMoreSize: 3,
				},
				// 枚举类
				ActiveStatusEnum,
				// 秒杀活动场次
				tabbar: [],
				// 秒杀商品列表
				goodsList: [],
				background: {
					background: 'url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat',
					backgroundSize: '100% auto',
				},
				backgroundImg:''
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getCarouselList()
			// 加载页面数据
			this.onRefreshPage()
			// 设置微信公众号链接分享卡片内容
			this.setWxofficialShareData()
		},

		methods: {
			// 获取背景图
			getCarouselList() {
				const app = this;
				Api.getImage({
						type: 2
					})
					.then(result => {
						app.backgroundImg = result.data.imgurl
					})
					.finally(() => app.isLoading = false)
			},
			// 加载页面数据
			onRefreshPage() {
				const app = this
				return new Promise((resolve, reject) => {
					Api.data()
						.then(result => {
							app.tabbar = result.data.tabbar;
							app.goodsList = result.data.goodsList.data
							if(app.goodsList && app.goodsList.length > 0){
								app.goodsList.map(a=>{
									a.original_price = Number(a.original_price)
									a.seckill_price_max = Number(a.seckill_price_max)
									a.seckill_price_min = Number(a.seckill_price_min)
								})
							}
							app.curTabIndex = 0
							if (!app.goodsList.data.length) {
								app.mescroll.showEmpty()
							}
							resolve()
						})
						.catch(reject)
				})
			},

			/**
			 * 获取商品列表
			 * @param {Number} pageNo 页码
			 */
			getListData(pageNo = 1) {
				const app = this
				const activeTimeId = app.getCurTabbarId()
				return new Promise((resolve, reject) => {
					Api.list(activeTimeId, {
							page: pageNo
						}, {
							load: false
						})
						.then(result => {
							// 合并新数据
							let newList = result.data.list
							app.goodsList = getMoreListData(newList, app.goodsList, pageNo)
							resolve(newList)
						})
						.catch(reject)
				})
			},

			// 下拉刷新的回调
			downCallback() {
				this.onRefreshPage()
					.finally(() => this.mescroll.endSuccess())
			},

			/**
			 * 上拉加载的回调
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据
				app.getListData(page.num)
					.then(list => {
						const curPageLen = list.data.length
						const totalSize = list.data.total
						app.mescroll.endBySize(curPageLen, totalSize)
					})
					.catch(() => app.mescroll.endErr())
			},

			// 点击切换标签(会场场次)
			handleTab(index) {
				const app = this
				app.curTabIndex = index
				// 刷新列表数据
				app.goodsList = getEmptyPaginateObj()
				app.mescroll.resetUpScroll()
			},

			// 获取当前选择的会场
			getCurTabbar() {
				return this.tabbar[this.curTabIndex]
			},

			// 获取当前会场场次ID
			getCurTabbarId() {
				const curTabbar = this.getCurTabbar()
				return curTabbar ? curTabbar.active_time_id : 0
			},

			// 跳转到秒杀商品详情
			handleTargetGoods(sharpGoodsId) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + sharpGoodsId
				})
			},

			// 设置微信公众号链接分享卡片内容
			setWxofficialShareData() {
				this.updateShareCardData({
					title: '整点秒杀会场'
				})
			},

		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			// 构建页面参数
			const params = this.$getShareUrlParams()
			return {
				title: '整点秒杀会场',
				path: `/pages/sharp/index?${params}`
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			// 构建页面参数
			const params = this.$getShareUrlParams()
			return {
				title: '整点秒杀会场',
				path: `/pages/sharp/index?${params}`
			}
		},

	}
</script>

<style lang="scss" scoped>
	.seckill {
		width: 100%;
		height: 100%;
	}

	.title {
		width: 100%;
		height: 220rpx;
		position: relative;

		.bgImg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.limitTitle {
			display: flex;
			justify-content: center;
			z-index: 20;

			.img {
				margin-top: 20rpx;
				width: 302rpx;
				height: 82rpx;
				z-index: 20;
			}
		}

		.time {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-around;
			z-index: 30;

			.timeItem {
				.num {
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 33rpx;
					text-shadow: 0px 0px 11px #FB3A22;
					text-align: center;
					margin-top: 10rpx;
				}

				.desc {
					width: 150rpx;
					height: 36rpx;
					background: #FFFFFF;
					border-radius: 62rpx 62rpx 62rpx 62rpx;
					opacity: 1;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FB3D27;
					line-height: 36rpx;
					margin-top: 10rpx;
					text-align: center;
				}
			}
		}
	}

	.main {
		width: 100%;
		height: 100%;
		background: #F4F6FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top: 34rpx;

		.over {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #3C3C3C;

			.info {
				line-height: 40rpx;
				margin-right: 18rpx;
			}

			.com {
				width: 54rpx;
				height: 48rpx;
				background: #252525;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}

			.hou {
				margin-right: 4rpx;
			}

			.min {
				margin: 0 4rpx;
			}

			.sec {
				margin-left: 4rpx;
			}
		}
	}

	.goodsList {
		overflow: hidden;
		.goodItem {
			width: 686rpx;
			height: 342rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			opacity: 1;
			display: flex;
			padding: 48rpx 32rpx 36rpx 0;
			margin: 0 auto;
			margin-top: 22rpx;
			.itemImg {
				width: 258rpx;
				height: 258rpx;
				margin-right: 10rpx;
				.goodsImg {
					width: 100%;
					height: 100%;
				}
			}

			.goodsInfo {
				.name {
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #0E0E0E;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					max-width: 350rpx;
				}

				.sellNum {
					font-size: 32rpx;
					font-weight: 400;
					color: #A9A9A9;
					line-height: 44rpx;
					margin-left: 10rpx;
					margin-bottom: 8rpx;
				}

				.info {
					display: flex;
					.price {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #979797;
						line-height: 40rpx;
					}

					.delPrice {
						width: 132rpx;
						height: 48rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #FB402B;
						line-height: 23rpx;
						background-image: url('https://www.royaum.com.cn/static/seckill/bottom.png');
						background-size: 100% 100%;
						margin: 0 12rpx 0 14rpx;
						.delText {
							width: 132rpx;
							text-align: center;
							margin-top: 8rpx;
						}
					}

					.update {
						width: 112rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #979797;
						line-height: 40rpx;
					}
				}

				.line {
					width: 302rpx;
					height: 30rpx;
					margin-left: 22rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.btn {
					margin-top: 14rpx;
					width: 390rpx;
					height: 70rpx;
					border-radius: 96rpx;
					opacity: 1;
					text-align: center;
					line-height: 70rpx;
					display: flex;
					justify-content: space-between;
					background-image: url('https://www.royaum.com.cn/static/seckill/btnBg.png');
					background-size: 100% 100%;

					.killPrice {
						font-size: 24rpx;
						font-weight: 500;
						color: #FF423D;
						margin-left: 26rpx;
						text{
							font-size: 36rpx;
						}
					}

					.buyNow {
						width: 120rpx;
						font-size: 28rpx;
						font-weight: 500;
						text-align: center;
						color: #FFFFFF;
						margin-right: 14rpx;
					}
				}
			}
		}
	}
</style>