H5_module/components/goodsList/goodsList.vue

<template>
	<!--components/topicList/topicList.wxml-->
	<view :style="'background-color:' + pageList.backgroundColor + ';'">
		<!-- 分块版式一 -->
		<view class="list1" v-if="pageList.displayStyle=='2' && pageList.lineNumber=='1'">
			<view v-for="(item, index) in pageList.products" :key="index" @tap="goUrl" :data-id="item.id"
				:data-type="type" :data-index="index" class="li dflex">
				<view class="jsdimgs1">
					<image lazy-load="true" :src="item.pic+ '?x-oss-process=style/w750-auto'" mode="aspectFill"
						class="liimg"></image>
					<image v-if="item.isJs && about.timely_close != 1" src="/static/pages/images/jishida.png" class="jsdimg1"></image>
					<image :src="picUrlss + 'shouqing.png'" class="shouqing" v-if="item.stock < 1"></image>
				</view>
				<view class="info flex">
					<block v-if="!type">
						<view class="proname"><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.title}}</view>
						<view :class="!item.brief?'Ninfos infos':'infos'">{{item.brief==null?' ':item.brief}}</view>
					</block>
					<block v-else>
						<view class="proname"><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.productName}}</view>
						<view style="height: 46rpx;" v-if="type!=5">
							<view :class="item.times?'endtime':'endtimes'" v-if="item.times">
								<block v-if="item.times">
									{{item.start ? '距结束' : '距开始'}}
									{{item.times?item.times:''}}
								</block>
							</view>
						</view>
						<view style="height: 46rpx;" v-else>
							<view class="kan-time dflex" v-if="item.times && item.times.length > 0">
								<block v-if="item.times.length==4">
									<block v-if="item.times[0] !=0"><text>{{item.times[0]}}</text>天</block>
									<text>{{item.times[1]}}</text>:
									<text>{{item.times[2]}}</text>:
									<text>{{item.times[3]}}</text>
								</block>
								<block v-else>
									<text>{{item.times[0]}}</text>:
									<text>{{item.times[1]}}</text>:
									<text>{{item.times[2]}}</text>
								</block>
								<view>{{item.start==false?'后开始':'后结束'}}</view>
							</view>
						</view>

					</block>
					<view class="xiaol xiaoll dflex">
						<block v-if="item.isOtc != 5 && about.is_open_shop == 1 && (isDistriUser == 2 || ascription)">
							<view class="zhuan dflex" v-if="item.commission>0">
								<block>
									<text>赚</text>
									<view class="dflex">￥{{item.commission }}</view>
								</block>
							</view>
						</block>
						<view class="yishou">{{item.sellStock}}件已售</view>
					</view>
					<view class="operate dflex">
						<block v-if="!type">
							<view class="price proprice">
								￥<text>{{item.salePrice}}</text>
								<text class="vip" v-if="about.show_membership_price==1&&item.actualPrice < item.salePrice"><text class="sale">VIP</text><text class="members">{{item.actualPrice}}</text></text>
								<text class="vip"
									v-if="about.show_membership_price==1&&item.membersPrice<item.salePrice"><text
										class="sale">VIP</text><text
										class="members">{{item.membersPrice}}</text></text>
								<text class="del" v-if="about.show_membership_price!=1">
									<block v-if="item.marketPrice!=0&&item.marketPrice>item.salePrice">
										￥{{item.marketPrice}}
									</block>
								</text>
							</view>
							<view class="btn">立即抢购</view>
						</block>
						<block v-else>
							<view class="price dflex">
								<block>{{typeName?typeName:''}}</block>
								￥<text>{{item.money}}</text><text class="del"
									v-if="item.marketPrice!=0&&item.marketPrice>item.money">￥{{item.marketPrice}}</text>
							</view>
							<view class="add-cart">
								<!-- <image src="/static/pages/images/jia.png" v-if="item.start"></image> -->
								<block v-if="!item.start">
									<view class="remind mbggreen" v-if="item.isRemind" data-type="1">取消提醒</view>
									<view class="remind mbggreen" v-else>开团提醒</view>
								</block>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 分块版式二 -->
		<view class="list2 dflex" v-if="pageList.displayStyle=='2' && pageList.lineNumber=='2'">
			<view v-for="(item, index) in pageList.products" :key="index" class="li">
				<view @tap="goUrl" :data-id="item.id" :data-type="type" :data-index="index">
					<view class="jsdimgs">
						<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w375'" mode="aspectFill"
							class="jsdpro"></image>
						<image v-if="item.isJs && about.timely_close != 1" src="/static/pages/images/jishida.png" class="jsdimg"></image>
						<image :src="picUrlss + 'shouqing.png'" class="shouqing" v-if="item.stock < 1"></image>
					</view>
					<view class="jsdinfo">
						<view class="proname" v-if="!type"><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.title}}</view>
						<view class="proname" v-else><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.productName}}</view>
						<view class="xiaol dflex">
							<block
								v-if="item.isOtc != 5 && about.is_open_shop == 1 && (isDistriUser == 2 || ascription)">
								<view class="zhuan dflex" v-if="item.commission>0">
									<block>
										<text>赚</text>
										<view class="dflex">￥{{item.commission }}</view>
									</block>
								</view>
							</block>
							<view class="yishou">{{item.sellStock}}件已售</view>
						</view>
						<!-- <view class="show-vip">
							<text class="vip" v-if="about.show_membership_price==1&&item.actualPrice < item.salePrice"><text class="sale">VIP</text><text class="members">{{item.actualPrice}}</text></text>
							<text class="vip"
								v-if="about.show_membership_price==1&&item.membersPrice<item.salePrice"><text
									class="sale">VIP</text><text
									class="members">{{item.membersPrice}}</text></text>
						</view> -->
						<view class="operate dflex">
							<block v-if="!type">
								<view class="price proprice">
									￥<text>{{item.salePrice}}</text>
									<text class="vip" v-if="about.show_membership_price==1&&item.actualPrice < item.salePrice"><text class="sale">VIP</text><text class="members">{{item.actualPrice}}</text></text>
									<text class="vip"
										v-if="about.show_membership_price==1&&item.membersPrice<item.salePrice"><text
											class="sale">VIP</text><text
											class="members">{{item.membersPrice}}</text></text>
									<text class="del" v-if="about.show_membership_price!=1">
										<block v-if="item.marketPrice!=0&&item.marketPrice>item.salePrice">
											￥{{item.marketPrice}}
										</block>
									</text>
								</view>
								<view class="add-cart">
									<image src="/static/pages/images/jia.png"></image>
								</view>
							</block>
							<block v-else>
								<view class="price dflex">
									<block>{{typeName?typeName:''}}</block>
									￥<text>{{item.money}}</text><text class="del"
										v-if="item.marketPrice!=0&&item.marketPrice>item.money">￥{{item.marketPrice}}</text>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分块版式三 -->
		<view class="list3 dflex" v-if="pageList.displayStyle=='2' && pageList.lineNumber=='3'">
			<view v-for="(item, index) in pageList.products" :key="index" class="li">
				<navigator :url="'/product/detail/detail?id=' + item.id+merchant" hover-class="none">
					<view class="jsdimgs">
						<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w210'" mode="aspectFill"
							class="jsdpro"></image>
						<image v-if="item.isJs && about.timely_close != 1" src="/static/pages/images/jishida.png" class="jsdimg1"></image>
						<image :src="picUrlss + 'shouqing.png'" class="shouqing" v-if="item.stock < 1"></image>
					</view>
					<view class="jsdinfo">
						<view class="proname"><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.title}}</view>
						<view class="xiaol">
							<!-- <block v-if="item.isOtc != 5 && about.is_open_shop == 1 && (isDistriUser == 2 || ascription)">
							<view class="zhuan dflex" v-if="item.commission>0">
								<block>
								<text>赚</text>
								<view class="dflex">￥{{item.commission }}</view>
								</block>
							</view>
							</block> -->
							<view class="yishou">{{item.sellStock}}件已售</view>
						</view>
						<view class="operate dflex">
							<view class="price proprice">￥<text>{{item.salePrice}}</text>
							<!-- <text class="del" v-if="item.marketPrice!=0&&item.marketPrice>item.salePrice">￥{{item.marketPrice}}</text> -->
							</view>

							<view class="add-cart">
								<image src="/static/pages/images/jia.png"></image>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 分隔线版式一 -->
		<view class="list1 list4" v-if="pageList.displayStyle=='1' && pageList.lineNumber=='1'">
			<view v-for="(item, index) in pageList.products" :key="index" @tap="goUrl" :data-id="item.id"
				:data-type="type" :data-index="index" class="li dflex">
				<view class="jsdimgs1">
					<image lazy-load="true" :src="item.pic+ '?x-oss-process=style/w750-auto'" mode="aspectFill"
						class="liimg"></image>
					<image v-if="item.isJs && about.timely_close != 1" src="/static/pages/images/jishida.png" class="jsdimg1"></image>
					<image :src="picUrlss + 'shouqing.png'" class="shouqing" v-if="item.stock < 1"></image>
				</view>
				<view class="info flex">
					<block v-if="!type">
						<view class="proname"><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.title}}</view>
						<view :class="!item.brief?'Ninfos infos':'infos'">{{item.brief==null?' ':item.brief}}</view>
					</block>
					<block v-else>
						<view class="proname"><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.productName}}</view>

						<view style="height: 46rpx;" v-if="type!=5">
							<view :class="item.times?'endtime':'endtimes'" v-if="item.times">
								<block v-if="item.times">
									{{item.start ? '距结束' : '距开始'}}
									{{item.times?item.times:''}}
								</block>
							</view>
						</view>
						<view style="height: 46rpx;" v-else>
							<view class="kan-time dflex" v-if="item.times && item.times.length > 0">
								<block v-if="item.times.length==4">
									<block v-if="item.times[0] !=0"><text>{{item.times[0]}}</text>天</block>
									<text>{{item.times[1]}}</text>:
									<text>{{item.times[2]}}</text>:
									<text>{{item.times[3]}}</text>
								</block>
								<block v-else>
									<text>{{item.times[0]}}</text>:
									<text>{{item.times[1]}}</text>:
									<text>{{item.times[2]}}</text>
								</block>
								<view>{{item.start==false?'后开始':'后结束'}}</view>
							</view>
						</view>

					</block>
					<view class="xiaol dflex">
						<block v-if="item.isOtc != 5 && about.is_open_shop == 1 && (isDistriUser == 2 || ascription)">
							<view class="zhuan dflex" v-if="item.commission>0">
								<block>
									<text>赚</text>
									<view class="dflex">￥{{item.commission }}</view>
								</block>
							</view>
						</block>
						<view class="yishou">{{item.sellStock}}件已售</view>
					</view>
					<view class="operate dflex">
						<block v-if="!type">
							<view class="price proprice">
								￥<text>{{item.salePrice}}</text>
								<text class="vip" v-if="about.show_membership_price==1&&item.actualPrice < item.salePrice"><text class="sale">VIP</text><text class="members">{{item.actualPrice}}</text></text>
								<text class="vip"
									v-if="about.show_membership_price==1&&item.membersPrice<item.salePrice"><text
										class="sale">VIP</text><text
										class="members">{{item.membersPrice}}</text></text>
								<text class="del" v-if="about.show_membership_price!=1">
									<block v-if="item.marketPrice!=0&&item.marketPrice>item.salePrice">
										￥{{item.marketPrice}}
									</block>
								</text>
							</view>
							<view class="btn">立即抢购</view>
						</block>
						<block v-else>
							<view class="price dflex">
								<block>{{typeName?typeName:''}}</block>
								￥<text>{{item.money}}</text><text class="del"
									v-if="item.marketPrice!=0&&item.marketPrice>item.money">￥{{item.marketPrice}}</text>
							</view>
							<view class="add-cart">
								<!-- <image src="/static/pages/images/jia.png" v-if="item.start"></image> -->
								<block v-if="!item.start">
									<view class="remind mbggreen" v-if="item.isRemind" data-type="1">取消提醒</view>
									<view class="remind mbggreen" v-else>开团提醒</view>
								</block>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>

		<!-- 分隔线版式二 -->
		<view class="list2 list5 dflex" v-if="pageList.displayStyle=='1' && pageList.lineNumber=='2'">
			<view v-for="(item, index) in pageList.products" :key="index" class="li">
				<view @tap="goUrl" :data-id="item.id" :data-type="type" :data-index="index">
					<view class="jsdimgs">
						<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w375'" mode="aspectFill"
							class="jsdpro"></image>
						<image v-if="item.isJs && about.timely_close != 1" src="/static/pages/images/jishida.png" class="jsdimg1"></image>
						<image :src="picUrlss + 'shouqing.png'" class="shouqing" v-if="item.stock < 1"></image>
					</view>
					<view class="jsdinfo">
						<view class="proname" v-if="!type"><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.title}}</view>
						<view class="proname" v-else><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.productName}}</view>
						<view class="xiaol dflex">
							<block
								v-if="item.isOtc != 5 && about.is_open_shop == 1 && (isDistriUser == 2 || ascription)">
								<view class="zhuan dflex" v-if="item.commission>0">
									<block>
										<text>赚</text>
										<view class="dflex">￥{{item.commission }}</view>
									</block>
								</view>
							</block>
							<view class="yishou">{{item.sellStock}}件已售</view>
						</view>
						<!-- <view class="show-vip">
							<text class="vip" v-if="about.show_membership_price==1&&item.actualPrice < item.salePrice"><text class="sale">VIP</text><text class="members">{{item.actualPrice}}</text></text>
							<text class="vip"
								v-if="about.show_membership_price==1&&item.membersPrice<item.salePrice"><text
									class="sale">VIP</text><text
									class="members">{{item.membersPrice}}</text></text>
						</view> -->
						<view class="operate dflex">
							<block v-if="!type">
								<view class="price proprice">
									￥<text>{{item.salePrice}}</text>
									<text class="vip" v-if="about.show_membership_price==1&&item.actualPrice < item.salePrice"><text class="sale">VIP</text><text class="members">{{item.actualPrice}}</text></text>
									<text class="vip"
										v-if="about.show_membership_price==1&&item.membersPrice<item.salePrice"><text
											class="sale">VIP</text><text
											class="members">{{item.membersPrice}}</text></text>
									<text class="del" v-if="about.show_membership_price!=1">
										<block v-if="item.marketPrice!=0&&item.marketPrice>item.salePrice">
											￥{{item.marketPrice}}
										</block>
									</text>
								</view>
								<view class="add-cart">
									<image src="/static/pages/images/jia.png"></image>
								</view>
							</block>
							<block v-else>
								<view class="price dflex">
									<block>{{typeName?typeName:''}}</block>
									￥<text>{{item.money}}</text><text class="del"
										v-if="item.marketPrice!=0&&item.marketPrice>item.money">￥{{item.marketPrice}}</text>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分隔线版式三 -->
		<view class="list3 list6 dflex" v-if="pageList.displayStyle=='1' && pageList.lineNumber=='3'">
			<view v-for="(item, index) in pageList.products" :key="index" class="li">
				<navigator :url="'/product/detail/detail?id=' + item.id+merchant" hover-class="none">
					<view class="jsdimgs">
						<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w210'" mode="aspectFill"
							class="jsdpro"></image>
						<image v-if="item.isJs && about.timely_close != 1" src="/static/pages/images/jishida.png" class="jsdimg1"></image>
						<image :src="picUrlss + 'shouqing.png'" class="shouqing" v-if="item.stock < 1"></image>
					</view>
					<view class="jsdinfo">
						<view class="proname"><text class="yushou" v-if="item.estimatedDeliveryTimeStr">预售</text>{{item.title}}</view>
						<view class="xiaol dflex">
							<!-- <block v-if="item.isOtc != 5 && about.is_open_shop == 1 && (isDistriUser == 2 || ascription)">
							<view class="zhuan dflex" v-if="item.commission>0">
								<block>
								<text>赚</text>
								<view class="dflex">￥{{item.commission }}</view>
								</block>
							</view>
							</block> -->
							<view class="yishou">{{item.sellStock}}件已售</view>
						</view>
						<view class="operate dflex">
							<view class="price proprice">￥<text>{{item.salePrice}}</text>
								<text class="del"
									v-if="item.marketPrice!=0&&item.marketPrice>item.salePrice">￥{{item.marketPrice}}</text>
							</view>
							<view class="add-cart">
								<image src="/static/pages/images/jia.png"></image>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	// components/topicList/topicList.js
	const app = getApp();
	const req = require("../../utils/request");

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				isDistriUser: 0, // 判断用户是否是分销员 2为分销员
				ascription: false, //是否开启小店
			};
		},

		components: {},
		props: {
			pageList: Object,
			about: Object,
			merchant: String,
			type: String,
			typeName: String
		},

		/**
		 * 组件的属性列表
		 */
		options: {
			addGlobalClass: true
		},

		mounted() {
			this.getMy();
			console.log("组件页面pageList", this.pageList, this.merchant)
		},

		methods: {
			getMy() {
				let that = this;
				let userInfo = req.getStorage('userInfo');
				if (!userInfo || userInfo == null) return false;
				if (userInfo && userInfo.listShopBase && userInfo.listShopBase != null && userInfo.listShopBase.length >
					0) {
					if (userInfo.listShopBase[0].merchant_id == that.merchant.id && that.merchant.type != 5) {
						that.ascription = true;
					}
				}
				req.getRequest('/api/user/my', {}, data => {
					that.isDistriUser = data.isDistriUser;
				});
			},
			goUrl(event) {
				console.log("qwewqe")
				let id = event.currentTarget.dataset.id
				let type = event.currentTarget.dataset.type
				let index = event.currentTarget.dataset.index
				const activity = this.pageList.products[index];
				let merchant = this.merchant
				// console.log(type, !type)
				if (!type) {
					// console.log("123", id)
					app.globalData.openPage('product/detail/detail?id=' + id + merchant)
				} else if (type == 1) {
					app.globalData.openPage('product/groupDetail/groupDetail?acid=' + activity.id + "&id=" + activity
						.productId +
						merchant)
				} else if (type == 4) {
					app.globalData.openPage('activity/newbornDetails/newbornDetails?acid=' + activity.id + '&id=' +
						activity.productId +
						merchant)
				} else if (type == 5) {
					app.globalData.openPage('activity/bargain/detail/detail?acid=' + activity.id + '&id=' + activity
						.productId +
						merchant)
				} else if (type == 3) {
					app.globalData.openPage('activity/group/detail/detail?acid=' + activity.id + '&id=' + activity
						.productId +
						merchant)
				} else if (type == 2) {
					app.globalData.openPage('activity/seckillDetails/seckillDetails?acid=' + activity.id + '&id=' +
						activity.productId +
						merchant)
				}
			},
			// toGroupRemind(event) {
			// 	const index = event.currentTarget.dataset.index;
			// 	const activity = this.activityGroup[index];
			// 	const url = event.currentTarget.dataset.url;
			// 	console.log(url)
			// 	app.globalData.openPage('product/groupDetail/groupDetail?acid=' + activity.id + "&id=" + activity.productId + url); // app.openPage('product/groupDetail/groupDetail?acid=' + activity.id + "&id=" + activity.productId);
			// },


			cancelActivityRemind(event) {
				const index = event.currentTarget.dataset.index;
				const id = event.currentTarget.dataset.id;
				const type = event.currentTarget.dataset.type;
				if (req.header.appId == 'ZQ1VK5oc17I387E') {

				} else {
					route.cancelActivityRemind({
						id: id
					}, res => {
						req.msg('取消提醒成功');
						let data = {};
						if (type == 1) data['activityGroup[' + index + '].isRemind'] = false;
						this.setData(data);
					});
				}
			},

			addActivityRemind(event) {
				const index = event.currentTarget.dataset.index;
				const id = event.currentTarget.dataset.id;
				const type = event.currentTarget.dataset.type;

				route.addActivityRemind({
					activityId: id
				}, res => {
					// mes.remind().then(res=>res)
					// mes.requsetmessage()
					mes.remind().then(res => res);
					req.msg('订阅提醒成功');
					let data = {};
					if (type == 1) data['activityGroup[' + index + '].isRemind'] = true;
					this.setData(data);
				});
			}
		}
	};
</script>
<style>
	@import "./goodsList.css";
</style>