ydd_front/mer_uniapp/pages/activity/components/listStyle.vue

<template>
	<view :data-theme="theme">
		<!--  #ifdef  H5 -->
		<view class="w-full bg-top h-604 relative" :style="{backgroundImage:headerBg}">
		<!--  #endif -->
			<!--  #ifndef  H5 -->
			<view class="w-full bg-top relative"
				:style="{backgroundImage:headerBg,height: (sysHeight + 262) * 2 + 'rpx'}">
			<!--  #endif -->
			</view>
			<view class="relative w-full content">
				<view class="_box h-106 flex-y-center" :class="pageScrollStatus ? '' : 'rd-t-24rpx'"
					:style="{'top': 50 + sysHeight + 'px'}">
					<scroll-view scroll-x="true" style="white-space: nowrap;" scroll-with-animation
						class="white-nowrap vertical-middle w-full relative z-10"
						:class="{'sel1':active == 0,'sel-last': timeLine.length > 4 && active == timeLine.length - 1}"
						show-scrollbar="false" :scroll-left="tabLeft">
						<view class="scroll-item" v-for="(item,index) in timeLine" :key='index'
							:class="active == index ? 'active-card' : ''"
							:style="{'background-image': active == index ? navActiveBg : ''}"
							@tap='checkSeckill(index,item)'>
							<view class="flex-col flex-center z-10 relative t-22">
								<text class="SemiBold fs-40 lh-40rpx semiBold"
									:class="active == index ? 'text--w111-333':'text--w111-fff'">{{item.startTime}}</text>
								<text class="inline-block h-36 lh-34rpx fs-24"
									:class="active == index ? 'red-tag':'text--w111-fff'">{{item.status | timeStatusFilter}}</text>
							</view>
						</view>
					</scroll-view>
					<view class="abs-lb w-full"
						:style="{'background': pageScrollStatus ? '#e93323' : 'rgba(245,245,245,0.2)','height': pageScrollStatus ? '130rpx' : '96rpx'}">
					</view>
				</view>
				<view class="bg--w111-f5f5f5 pt-32 pl-20 pr-20 relative">
					<view class="card w-full bg--w111-fff rd-24rpx p-20 flex" v-for="(item,index) in seckillList"
						:key="index" @tap='goDetail(item.id)'>
						<view class="w-240 h-240">
							<easy-loadimage mode="aspectFit" :image-src="item.image" :border-src="item.image"
								width="240rpx" height="240rpx" :radius="10"></easy-loadimage>
						</view>
						<view class="flex-1 pl-20 flex-col justify-between">
							<view class="w-full">
								<view class="w-410 fs-28 lh-40rpx line2">
									<text v-if="item.isSelf" class="font-bg-red bt-color mr10 self_min merType bg-red">自营</text>
									{{item.name}}
								</view>
							</view>
							<view class="flex items-baseline">
								<text class="fs-22 lh-30rpx text-primary pr-8">秒杀价:</text>
								<baseMoney :money="item.seckillPrice" symbolSize="24" integerSize="40" decimalSize="24"
									incolor="E93323" weight></baseMoney>
								<text class="fs-22 lh-30rpx text--w111-999 pl-16 text-line regular">¥{{item.price}}</text>
							</view>
							<view class="w-full progress-box flex-between-center" v-if="status == 1">
								<view class="flex-y-center">
									<view class="progress ml-16">
										<view class="active" :style="'width:'+item.payRange"></view>
									</view>
									<text class="fs-22 text-primary pl-8">已抢{{item.payRange}}</text>
								</view>
								<view class="qiang"></view>
							</view>
							<view class="w-full yuyue-box flex-between-center" v-if="status == 2 || status ==3">
								<view class="flex-y-center fs-22 pl-16">活动即将开始</view>
								<view class="yuyue"></view>
							</view>
							<view class="w-full over-box flex-between-center" v-if="status == 0">
								<view class="flex-y-center fs-22 pl-16">活动已结束</view>
								<view class="over"></view>
							</view>
						</view>
					</view>
					<view class="abs-lt cir" v-show="active > 0"></view>
				</view>
				<view class="bg--w111-f5f5f5 p-20" v-if="!seckillList.length && !loading">
					<emptyPage title="暂无秒杀商品，去看看其他商品吧～" :imgSrc="urlDomain+'crmebimage/presets/noShopper.png'">
					</emptyPage>
				</view>
			</view>
		</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue';
	import easyLoadimage from '@/components/base/easy-loadimage.vue'
	import {
		goProductDetail
	} from "@/libs/order";
	let sysHeight = uni.getWindowInfo() ? uni.getWindowInfo().statusBarHeight : '';
	let app = getApp();
	export default {
		name: 'ListStyle',
		components: {
			emptyPage,
			easyLoadimage
		},
		props: {
			//秒杀商品列表
			seckillList: {
				type: Array,
				default: function() {
					return [];
				}
			},
			timeLine: {
				type: Array,
				default: function() {
					return [];
				}
			},
			loading: {
				type: Boolean,
				default: false
			},
			active: {
				type: Number,
				default: 0
			},
			//控制页面滑动
			pageScrollStatus: {
				type: Boolean,
				default: false
			},
			tabLeft: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				theme: app.globalData.theme,
				urlDomain: this.$Cache.get("imgHost"),
				sysHeight: sysHeight,
				scrollLeft: 0,
				status: 1,
			}
		},
		computed: {
			headerBg() {
				return 'url(' + this.urlDomain + 'crmebimage/presets/seckill_header.png' + ')'
			},
			navActiveLeft() {
				if (this.active == 0) {
					return 0
				} else if (this.active == 1) {
					return '134rpx'
				} else {
					return 154 * this.active + 'rpx'
				}
			},
			navActiveBg() {
				if (this.active == 0) {
					return 'url(' + this.urlDomain + 'crmebimage/presets/seckill_header_icon1.png' + ')'
				} else {
					return 'url(' + this.urlDomain + 'crmebimage/presets/seckill_header_icon2.png' + ')'
				}
			}
		},

		methods: {
			checkSeckill(index, item) {
				this.$emit('getCheckSeckill', index, item);
			},
			/*
			 *去商品详情页 
			 */
			goDetail(id) {
				goProductDetail(id, 1, `&status=${this.status}&datatime=${this.datatime}`)
			},
		},
	}
</script>

<style lang="scss" scoped>
  .bg-top{
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .sticky{
      &:after{
          content:'';
          width:100%;
          height: 20px;
          background-color: #E93323;
          position: absolute;
          left: 0;
          bottom: -20rpx;
      }
  }
  .content{
      top: -114rpx;
  }
  ._box{
      position: sticky;
      z-index: 99;
  }
  .card ~ .card{
      margin-top: 20rpx;
  }
  .w-21-p111-{
      width: 21%;
  }
  .max-w-96{
      max-width: 96rpx;
  }
  .fq{
      background-color: #E93323;
      color: #fff;
  }
  .text-primary{
      color: #E93323;;
  }
  .text-line{
      text-decoration: line-through;
  }
  .progress-box{
      height: 64rpx;
      background-color: rgba(233, 51, 35, 0.05);
      border-radius: 16rpx;
  }
  .progress{
     width:160rpx;
      height: 18rpx;
      border-radius: 10rpx;
      background-color: rgba(233, 51, 35, 0.2);
      .active{
          height: 18rpx;
          border-radius: 10rpx;
          background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
      }
  }
  .qiang{
      width:112rpx;
      height: 64rpx;
      background-image: url('../static/images/qiang.png');
      background-size: cover;
  }
  .yuyue-box{
      height: 64rpx;
      background-color: #FFF1E5;
      border-radius: 16rpx;
      color: #FF7D00;
  }
  .yuyue{
      width:140rpx;
      height: 64rpx;
      background-image: url('../static/images/yuyue.png');
      background-size: cover;
  }
  .over-box{
      height: 64rpx;
      background-color: rgba(233, 51, 35, 0.05);
      border-radius: 16rpx;
      color: rgba(233, 51, 35, 0.60);
  }
  .over{
      width:140rpx;
      height: 64rpx;
      background-image: url('../static/images/over.png');
      background-size: cover;
  }
	.sel1 .scroll-item{
		right: 30rpx;
	}

	.sel-last {
		/deep/.uni-scroll-view {

			margin-right: -10rpx;
		}

		.scroll-item {
			// left: 40rpx;
			// left: 32rpx;
		}

		.active-card {
			width: 180rpx;
			padding-left: 10px;

			.relative {
				width: 160rpx;
			}
		}
	}
  .scroll-item{
      display: inline-block;
      height: 96rpx;
      width: 21%;
      position: relative;
      bottom: 0;
  }
  .active-card{
      width:234rpx;
      height: 106rpx;
      background-size: cover;
      z-index: 99;
  }
  .t-22{
      top: 22rpx;
  }
  .red-tag{
      display: inline-block;
      padding: 0 12rpx;
      height: 36rpx;
      border-radius: 18rpx;
      text-align: center;
      line-height: 36rpx;
      background-color: #E93323;
      font-size: 22rpx;
      color: #fff;
  }
  .cir{
	  width: 24rpx;
	  height: 24rpx;
	  background-color: #ED593E;
	  &:after{
		  content: '';
		  width: 24rpx;
		  height: 24rpx;
		  position: absolute;
		  left: 0;
		  top: 0;
		  border-top-left-radius: 100%; /* 左上角为半径大小的弧形 */
		  background-color: #f5f5f5;
	  }
  }
  .brand-tag{
  	background-color: #e93323 !important;
  }
</style>