shop4.3.57/components/page-component/app-product-list/app-product-list.vue

<template>
	<view :class="[!listStyle ? 'list-padding' : '', 'page-width', 'product-list', 'dir-top-nowrap']">
		<view class="f-swipe-content" @click="routeGo(item)" v-if="listStyle" v-for="(item, index) in goods_list"
			:key="item.id">
			<view class="f-item  dir-left-nowrap">
				<view class="f-out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
					<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
				</view>
				<image class="f-img" :src="item.cover_pic" :lazy-load="true" mode="aspectFill"></image>
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="f-content dir-top-wrap main-between">
					<text class="t-omit-two f-title">{{ item.name }}</text>
					<view>
						<!-- 会员价 -->
						<view class="member-price" v-if="item.is_level == 1 && item.is_negotiable != 1">
							<app-member-price :price="item.level_price" :theme="themeObject" :sign="sign">
							</app-member-price>
						</view>

						<!-- 超级会员卡 -->
						<view class="app-sup-vip" v-if="item.vip_card_appoint.discount && item.is_negotiable != 1">
							<app-sup-vip :discount="item.vip_card_appoint.discount"
								:is_vip_card_user="item.vip_card_appoint.is_vip_card_user"></app-sup-vip>
						</view>
						<view class="dir-left-nowrap main-between">
							<view class="dir-top-wrap main-between">
								<text class="f-price"
									:class="sign === 'gift' ? theme + '-color' : theme + '-m-text ' + theme">{{item.price_content}}</text>
								<text class="f-scale"
									v-if="item.is_negotiable != 1 && isShowSalesNum == 1">{{item.sales}}</text>
							</view>
							<view
								v-if="sign !== 'gift' && item.is_negotiable != 1 && isShowCart == 1 && item.goods_stock > 0">
								<image class="f-cat-icon" @click.stop="specification(item)"
									:class="theme +'-m-back ' + theme" src="/static/image/icon/cats.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!listStyle" class="page-width dir-left-wrap main-between">
			<view @click="routeGo(item)" class="u-goods box-grow-0 dir-top-nowrap main-between"
				v-for="(item, index) in goods_list" :class="'index-'+index" :key="index">
				<view class="image-name dir-top-nowrap main-left">
					<view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
						<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic">
						</image>
					</view>
					<image class="image" :src="item.cover_pic" :lazy-load="true" mode="aspectFill"></image>
					<view class="name t-omit-two" v-if="is_name && isShowGoodsName == 1">{{item.name}}</view>
				</view>
				<view class="content dir-top-nowrap main-right"
					:style="{height: is_name ? 'calc(100% - #{426rpx})': 'height: calc(100% - #{384rpx});'}">

					<!-- 会员价 -->
					<view class="member-price"
						v-if="(item.is_level == 1 || (sign === 'exchange' && item.level_show != 0)) && item.is_negotiable != 1">
						<app-member-price :price="item.level_price" :theme="themeObject" :sign="sign">
						</app-member-price>
					</view>

					<!-- 超级会员卡 -->
					<view class="app-sup-vip" v-if="item.vip_card_appoint.discount && item.is_negotiable != 1">
						<app-sup-vip :discount="item.vip_card_appoint.discount"
							:is_vip_card_user="item.vip_card_appoint.is_vip_card_user"></app-sup-vip>
					</view>

					<!-- 价格 销量 -->
					<view v-if="sign !== 'exchange'"
						class="price-total page-width dir-left-nowrap main-between cross-bottom">
						<view>
							<view class="price"
								:class="sign === 'gift' ? theme + '-color' : theme + '-m-text ' + theme">
								{{item.price_content}}
							</view>
							<view class="origin-price" v-if="isListUnderlinePrice == 1">
								￥{{item.original_price}}
							</view>
						</view>
						<template v-if="sign === 'gift'">
							<text v-if="item.is_negotiable != 1" class="gray sales">{{item.sales}}</text>
						</template>
						<template v-else>
							<text v-if="item.is_negotiable != 1 && isShowSalesNum == 1"
								class="gray sales">{{item.sales}}</text>
							<view class="box-grow-1" style="position: relative;"
								v-if="item.is_negotiable != 1 && isShowCart == 1 && item.goods_stock > 0">
								<!--  #ifdef  MP-ALIPAY -->
								<div class="cart-box" @click.stop="specification(item)"
									style="-webkit-background-origin: content-box;background-origin: content-box;">
									<app-cart-image class="goods-cart" :sign="sign" :theme="theme"></app-cart-image>
								</div>
								<!--  #endif -->
								<!-- #ifndef MP-ALIPAY -->
								<div class="cart-box" @click.stop="specification(item)">
									<app-cart-image class="goods-cart" :sign="sign" :theme="theme"></app-cart-image>
								</div>
								<!-- #endif -->
							</view>
						</template>
					</view>
					<view v-if="sign === 'exchange'" class="price-total exchange page-width">
						<template>
							<text class="price" :class="theme + '-m-text ' + theme">
								{{item.price_content}}
							</text>
							<view class="dir-left-nowrap cross-center sales-box box-grow-0">
								<view class="sales">{{item.sales}}</view>
							</view>
							<view class="dir-left-nowrap cross-center sales-box box-grow-0">
								<view class="sales">库存:{{item.goods_stock}}{{item.unit}}</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<u-attr v-model="attrGoods.attrShow" :checked="attrGoods.select" :goods="attrGoods.goods"
			:theme-object="themeObject" @check="checkClick"></u-attr>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import appAttr from '../../../components/page-component/app-attr/app-attr.vue';
	import uAttr from '../../../components/page-component/goods/u-attr.vue';

	export default {
		name: 'product-list',

		props: {
			goods_list: Array,
			theme: String,
			is_name: {
				type: Boolean,
				default: true,
			},
			is_cart: {
				type: Boolean,
				default: true,
			},
			sign: String,
			listStyle: {
				type: Boolean,
				default: false
			},
			isShowAttr: {
				type: Boolean,
				default: true
			},
			themeObject: {
				type: Object
			}
		},
		computed: {
			...mapState({
				appImg: state => state.mallConfig.__wxapp_img.mall,
				isShowCart: state => state.mallConfig.mall.setting.is_show_cart,
				isShowGoodsName: state => state.mallConfig.mall.setting.is_show_goods_name,
				isShowSalesNum: state => state.mallConfig.mall.setting.is_show_sales_num,
				appSetting: state => state.mallConfig.mall.setting,
				isListUnderlinePrice: state => state.mallConfig.mall.setting.is_list_underline_price
			})
		},

		methods: {
			routeGo(data) {
				console.log(180)
				console.log(data)
				this.$emit('routeGo', data);
			},
			specification(goods) {
				this.attrGoods.select = null;
				if (this.isShowAttr) {
					this.attrGoods.goods = goods;
					this.attrGoods.attrShow = true;
				} else {
					uni.showLoading({
						text: '',
						mask: true
					});
					this.$request({
						url: this.$api.goods.attr,
						data: {
							id: goods.id,
							mch_id: goods.mch_id
						}
					}).then(e => {
						uni.hideLoading();
						if (e.code === 0) {
							this.attrGoods.goods = Object.assign(goods, e.data);
							this.attrGoods.attrShow = true;
						} else {
							uni.showToast({
								title: e.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			checkClick(select) {
				console.log(this.attrGoods,">>>>>>>>>>>>>>>>>>>>")
				this.attrGoods.select = select;
			}
		},
		data() {
			return {
				attrGoods: {
					goods: null,
					attrShow: 0,
					select: null
				}
			}
		},
		components: {
			'app-attr': appAttr,
			uAttr
		}
	}
</script>

<style scoped lang="scss">
	.product-list {
		position: relative;

		.u-goods {
			margin-top: #{15upx};
			background-color: #ffffff;
			width: #{344upx};
			border-radius: #{15upx};
		}
	}

	.list-padding {
		padding: #{0 20upx};
	}

	/*图片名字*/
	.image-name {
		width: 100%;
		border-top-left-radius: #{15upx};
		border-top-right-radius: #{15upx};
		position: relative;

		.out-dialog {
			border-top-left-radius: #{15upx};
			border-top-right-radius: #{15upx};
			width: #{344upx};
			height: #{344upx};
			position: absolute;
			top: 0;
			z-index: 10;
			left: 0;
			background-color: rgba(0, 0, 0, .5);

			image {
				width: #{344upx};
				height: #{344upx};
			}
		}

		.image {
			width: 100%;
			height: #{344upx};
			border-top-left-radius: #{15upx};
			border-top-right-radius: #{15upx};
		}

		.name {
			font-size: #{26upx};
			color: #353535;
			padding: #{0 24upx};
			margin-top: #{20upx};
			line-height: #{36upx};
		}
	}

	.content-name {
		height: calc(100% - #{426upx});
	}

	.content-no {
		height: calc(100% - #{384upx});
	}

	/*复杂内容*/
	.content {
		padding: #{0 24upx};

		.price-total {
			margin: #{16upx 0 30upx 0};

			&.exchange {
				margin-top: #{6upx};
				margin-bottom: #{16upx};
			}

			.sales {
				font-size: #{20rpx};
				margin-left:#{12rpx};
			}

			.sales-box {
				color: #999999;

				.sales {
					margin-left: 0;
				}
			}

			.price {
				font-size: #{28rpx};
			}
		}

		/*会员价组件*/
		.member-price {
			margin-top: #{12upx};
		}

		/*超级会员卡组件*/
		.app-sup-vip {
			margin-top: #{9upx};
		}

	}

	/*默认文字颜色*/
	.default-color {
		color: #ff4544;
	}

	.cart-box {
		width: #{92upx};
		height: #{92upx};
		position: absolute;
		padding: #{32upx};
		right: #{-24rpx};
		top: #{-60rpx};
	}

	.goods-cart {
		width: #{28rpx};
		height: #{28rpx};
	}

	.f-swipe-content {
		background-color: #ffffff;

		.f-item {
			padding: 24upx;
			border-bottom: 1upx solid #e2e2e2;
			position: relative;

			.f-img {
				width: 200upx;
				height: 200upx;
				border-radius: 23upx;
				margin-right: 24upx;
			}

			.f-out-dialog {
				width: 200upx;
				height: 200upx;
				border-radius: 23upx;
				margin-right: 24upx;
				position: absolute;
				z-index: 10;
				background-color: rgba(0, 0, 0, .5);

				image {
					width: #{200upx};
					height: #{200upx};
				}
			}

			.f-content {
				width: 478upx;
			}

			.f-title {
				font-size: 26upx;
				line-height: 36upx;
				color: #353535;
			}

			.f-invalid {
				width: 128upx;
				height: 42upx;
				line-height: 42upx;
				background-color: #f7f7f7;
				padding: 0 27upx 0 18upx;

				>text {
					font-size: 23upx;
					color: #999999;
				}

				>image {
					width: 24upx;
					height: 24upx;
				}
			}

			.f-low-stock {
				width: 148upx;
				height: 42upx;
				line-height: 42upx;
				background-color: #ffecec;
				padding: 0 27upx 0 18upx;

				>text {
					font-size: 23upx;
					color: #ff4544;
				}

				>image {
					width: 24upx;
					height: 24upx;
				}
			}

			.f-low-price {
				height: 42upx;
				display: inline-block;
				background-color: #ffecec;
				padding: 0 27upx 0 18upx;
				position: relative;

				>text {
					font-size: 23upx;
					color: #ff4544;
				}

				>image {
					width: 24upx;
					margin-right: 14upx;
					height: 24upx;
				}
			}

			.f-cat-icon {
				width: 56upx;
				height: 56upx;
			}

			.f-price {
				font-size: 24upx;
				margin-top: 12upx;
			}

			.f-scale {
				font-size: 21upx;
				color: #b0b0b0;
			}
		}
	}

	.origin-price {
		font-size: 21upx;
		color: #999999;
		text-decoration: line-through;
	}
</style>