hengmei-two/components/score-list.vue

<template>
	<view class="pad20 shop_list_box">
		<view style="width: 48.6%;float: left;">
			<view v-if="index1%2==0" v-for="(item1,index1) in dataList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn" @tap="goPage(item1.id,index1)">
				<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
				<view class="pad-zy20 pad-s10 pad-x30">
					<view class="fon28 bold col3 clips2">{{item1.title}}</view>
					<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
						<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
						<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
						<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
						<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
					</view>
					<view class="disac">
						<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
							<view v-if="item1.isIntegral" class="mar-s20">
								<view>积分:{{item1.integral}}</view>
								<view class="disac mar-s20" v-if="item1.grade!=0">
									<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
									<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
								</view>
								<view v-else class="fon24 col3 mar-s20">所有人可买</view>
							</view>
							<view v-else>
								<span v-if="item1.isPing">拼团价</span>
								<span v-if="item1.isXian">促销价</span>
								￥{{item1.zhePrice}}
							</view>
						</view>
						<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">￥{{item1.yuanPrice}}</view>
					</view>
					<view v-if="item1.isPing" class="disjbac mar-s20">
						<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
						<view class="disac">
							<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
						</view>
					</view>
					<view v-if="item1.isXian" class="fon24 col80 mar-s20">结束时间：{{item1.activity_end_at}}</view>
				</view>
			</view>
		</view>
		<view style="width: 48.6%;float: right;">
			<view v-if="index1%2!=0" v-for="(item1,index1) in dataList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn" @tap="goPage(item1.id,index1)">
				<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
				<view class="pad-zy20 pad-s10 pad-x30">
					<view class="fon28 bold col3 clips2">{{item1.title}}</view>
					<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
						<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
						<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
						<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
						<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
					</view>
					<view class="disac">
						<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
							<view v-if="item1.isIntegral" class="mar-s20">
								<view>积分:{{item1.integral}}</view>
								<view class="disac mar-s20" v-if="item1.grade!=0">
									<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
									<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
								</view>
								<view v-else class="fon24 col3 mar-s20">所有人可买</view>
							</view>
							<view v-else>
								<span v-if="item1.isPing">拼团价</span>
								<span v-if="item1.isXian">促销价</span>
								￥{{item1.zhePrice}}
							</view>
						</view>
						<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">￥{{item1.yuanPrice}}</view>
					</view>
					<view v-if="item1.isPing" class="disjbac mar-s20">
						<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
						<view class="disac">
							<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
						</view>
					</view>
					<view v-if="item1.isXian" class="fon24 col80 mar-s20">结束时间：{{item1.activity_end_at}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"shop-list",
		props:{
			dataList:{
				type:Array,
				default:function(){
					return [
						{
							imgSrc:'/static/public/wen-one.png',//商品图片
							title:'【99皮皮节】【种植发际 线】1000单位FUE技术...',//标题
							zhePrice:'3888',//折扣价
							yuanPrice:'4205',//原价
							integral:'2888',//积分
							isTuan:false,//是否团购
							isPing:false,//是否拼团
							isXian:false,//是否限时促销
							isIntegral:false,//是否是积分
							grade:0,//等级
						}
					]
				}
			}
		},
		data() {
			return {
				newList:[],
				timeList:[]//时间列表
			};
		},
		computed: {
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			}
		},
		methods:{
			goPage(id,index){//进入商品详情事件
				uni.navigateTo({
					url:`/pagesB/shopDetail/shopDetail?id=${id}&isIntegral=${this.dataList[index].isIntegral}`
				})
			}
		}
	}
</script>

<style>

</style>