ydd_front/mer_uniapp/components/homeIndex/seckill.vue

<template>
	<!-- 秒杀 -->
	<view v-if="spikeList && spikeList.length">
		<view class="seckill" :style="[boxStyle]" @click="toSeckillList()">
			<view class="bg_box" :style="[boxBgStyle]"></view>
			<view class="title acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<view class="pictrue skeleton-rect">
						<image :src="logoUrl"></image>
					</view>
					<view class="lines"></view>
					<view class="point skeleton-rect" :style="[titleColor]">{{titleText}}</view>
				</view>
				<view class="more acea-row row-center-wrapper skeleton-rect">
					GO<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
			<view class="conter" v-if="listStyle == 0">
				<scroll-view scroll-x="true" style="white-space: nowrap; vertical-align: middle;"
					show-scrollbar="false">
					<view class="itemCon" :style="[{'margin-right':itemStyle}]" v-for="(item, index) in spikeList"
						:key="index">
						<view class="item">
							<view class="pictrue skeleton-rect relative">
								<view v-show="item.stock===0" class="sellOut">已售罄</view>
								<easy-loadimage :image-src="item.image" :radius="dataConfig.contentStyle.val">
								</easy-loadimage>
							</view>
							<view v-show="nameShow" :style="[nameColor]" class="name line1 skeleton-rect">{{item.name}}
							</view>
							<view v-show="priceShow" :style="[priceColor]" class="x_money semiBold line1 skeleton-rect">
								¥<text class="num semiBold">{{item.seckillPrice}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="conter_y" :style="[{'grid-gap':itemStyle}]" v-if="listStyle == 1">
				<view class="item" v-for="(item, index) in spikeList" :key="index">
					<view class="pictrue relative">
						<view v-show="item.stock===0" class="sellOut">已售罄</view>
						<easy-loadimage :image-src="item.image" :radius="dataConfig.contentStyle.val">
						</easy-loadimage>
					</view>
					<view class="text-info acea-row row-column row-between">
						<view v-show="nameShow">
							<view :style="[nameColor]" class="title line2">{{ item.name }}</view>
						</view>
						<view v-show="priceShow" :style="[priceColor]" class="price semiBold">
							<view>
								<text class="semiBold">￥</text>
								<text class="semiBold">{{ item.seckillPrice }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		seckillMerchantApi
	} from "../../api/activity";

	let app = getApp();
	import {
		getSeckillIndexApi
	} from '@/api/activity.js';
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	export default {
		name: 'homeSeckill',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			merId: { // 商户id
				type: Number,
				default: 0
			},
		},
		components: {
			easyLoadimage
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				spikeList: [], // 秒杀
				datatime: 0,
				status: 0,
				themeColor:this.$options.filters.filterTheme(app.globalData.theme)
			}
		},
		computed: {
			//秒杀样式
			listStyle() {
				return this.dataConfig.tabConfig.tabVal
			},
			//最外层盒子的背景图片
			boxBgStyle() {
				return {
					borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx' + ' ' + this.dataConfig.bgStyle.val * 2 + 'rpx' +
						' ' + 0 + ' ' + 0,
					backgroundImage: `url(${this.urlDomain}crmebimage/presets/seckill_bg_pic.png),linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`
				}
			},
			//最外层盒子的样式
			boxStyle() {
				return {
					borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
					margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
						' ' + 0,
					padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + '24rpx' + ' ' + this.dataConfig.downConfig
						.val * 2 + 'rpx'
				}
			},
			//图片圆角
			itemStyle() {
				return this.dataConfig.contentConfig.val * 2 + 'rpx'
			},
			//标题图片
			logoUrl() {
				return this.dataConfig.logoConfig.url
			},
			//标题
			titleText() {
				return this.dataConfig.titleConfig.val
			},
			//标题颜色
			titleColor() {
				return {
					color: this.dataConfig.titleColor.color[0].item
				}
			},
			//名称颜色
			nameColor() {
				return {
					color: this.dataConfig.nameColor.color[0].item
				};
			},
			//价格颜色
			priceColor() {
				return {
					color: this.dataConfig.themeStyleConfig.tabVal?this.dataConfig.priceColor.color[0].item:this.themeColor
				};
			},
			//商品名称
			nameShow() {
				if (this.dataConfig.typeConfig.activeValue.indexOf(0) !== -1) {
					return true;
				} else {
					return false;
				}
			},
			//商品价格
			priceShow() {
				if (this.dataConfig.typeConfig.activeValue.indexOf(1) !== -1) {
					return true;
				} else {
					return false;
				}
			},
		},
		created() {
			this.getSeckillIndex();
		},
		methods: {
			getSeckillIndex() {
				this.merId ? seckillMerchantApi({
					limit: 6,
					merId: this.merId,
					page: 1
				}).then(({
					data
				}) => {
					this.spikeList = [];
					this.spikeList = data ? data.list : [];
				}) : getSeckillIndexApi().then(({
					data
				}) => {
					this.spikeList = [];
					this.spikeList = data ? data : [];
				})
			},
			toSeckillList() {
				if (this.merId) {
					this.$util.navigateTo(`/pages/activity/mer-good-seckill/index?merId=${this.merId}`)
				} else {
					this.$util.navigateTo(this.dataConfig.linkConfig.val)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.seckill {
		width: auto;
		background: #fff;
		border-radius: 14rpx;
		box-sizing: border-box;
		position: relative;

		.bg_box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 256rpx;
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 14rpx 14rpx 0 0;
		}

		.title {
			.pictrue {
				width: 124rpx;
				height: 32rpx;
				z-index: 9;

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

			.lines {
				width: 1rpx;
				height: 24rpx;
				background-color: #fff;
				opacity: 0.6;
				margin-left: 16rpx;
			}

			.point {
				font-size: 26rpx;
				color: #fff;
				margin-left: 21rpx;
				margin-right: 4rpx;
				z-index: 9;
			}

			.styleAll {
				width: 35rpx;
				height: 35rpx;
				background-color: #2F2F2F;
				border-radius: 6rpx;
				color: #fff;
				text-align: center;
			}

			.more {
				width: 86rpx;
				height: 40rpx;
				background: linear-gradient(142deg, #FFE9CE 0%, #FFD6A7 100%);
				opacity: 1;
				border-radius: 18px;
				font-size: 22rpx;
				color: #FE960F;
				padding-left: 8rpx;
				font-weight: 800;
				z-index: 9;

				.iconfont {
					font-size: 21rpx;
				}
			}
		}

		.conter {
			border-radius: 12px;
			margin-top: 30rpx;

			.itemCon {
				display: inline-block;
				width: 186rpx;

				.item {
					width: 100%;

					.pictrue {
						width: 100%;
						height: 186rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
							border-radius: 6rpx;
						}
					}

					.name {
						font-size: 26rpx;
						color: #333;
						margin-top: 8rpx;
					}

					.y_money {
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;
					}

					.x_money {
						font-size: 28rpx;
						height: 100%;
						margin-top: 4rpx;

						.num {
							font-size: 28rpx;
						}
					}

					.money {
						margin-top: 14rpx;
					}
				}
			}
		}
	}

	.conter_y {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: auto;
		width: 100%;
		margin-top: 30rpx;

		.item {
			display: flex;
			width: 100%;
			z-index: 9;

			.pictrue {
				width: 108px;
				height: 108px;

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

			.text-info {
				z-index: 9;
				margin-left: 20rpx;
				flex: 1;

				.title {
					width: 100%;
					height: 80rpx;
					line-height: 40rpx;
					color: #333;
				}

				.old-price {
					font-weight: normal;
					font-size: 24rpx;
					color: #999;
				}

				.price {
					font-size: 36rpx;

					text {
						padding-bottom: 4rpx;
						font-size: 26rpx;
						font-weight: normal;
					}
				}
			}
		}
	}

	.semiBold {
		font-size: 36rpx !important;
	}
</style>