caimei-applets-hehe/components/cm-module/cm-cart-product/cm-cart-product.vue

<template>
	<view class="cm-cart-product">
		<template v-if="productList.length > 0">
			<!-- 供应商名称 -->
			<view class="shop-info">
				<template v-if="isExpired">
					<view class="expired">失效商品{{ productList.length }}件</view>
					<view class="clear" @click="deletefailureList">清空失效商品</view>
				</template>
				<template v-else>
					<view
						class="radio iconfont"
						:class="data.checked ? 'icon-xuanze' : 'icon-weixuanze'"
						@click="chooseAll"
					></view>
					<view class="name">{{ data.name }}</view>
				</template>
			</view>
			<!-- 商品列表 -->
			<view class="product-list">
				<view
					class="row"
					v-for="(item, index) in productList"
					:key="index"
					:class="{ 'no-border': index === 0 }"
				>
					<view
						class="radio iconfont"
						:class="item.productsChecked ? 'icon-xuanze' : 'icon-weixuanze'"
						@click="chooseOne(item)"
						v-if="isNormal || isDelete"
					></view>
					<view class="expired" v-else>失效</view>
					<view class="product">
						<image class="cover" :src="item.mainImage"></image>
						<view class="content">
							<view class="title">{{ item.productName }}</view>
							<!-- 普通列表 -->
							<template v-if="isNormal">
								<view class="params">规格：{{ item.unit || '' }}</view>
								<view class="tags">
									<view class="tag type1">{{ item.heUserId ? '促销' : '自营' }}</view>
									<view
										class="tag type2"
										v-if="item.activeStatus == 1"
										@click="clickPopupShow(item, 2)"
									>
										活动价
									</view>
								</view>
								<view class="footer">
									<view class="price">￥{{ item.price | formatPrice }}</view>
									<view>
										<cm-number-box
											v-model="item.productCount"
											:defaultVal="item.productCount"
											:min="1"
											max="1000"
											@change="numberChange(item, $event)"
										></cm-number-box>
										<!-- <number-box
                                            @change="numberChange(item, $event)"
                                            v-if="!isDelete"
                                            :value="item.productCount"
                                        ></number-box> -->
									</view>
								</view>
							</template>
							<template v-if="isExpired">
								<view class="tip">商品已下架</view>
							</template>
						</view>
					</view>
				</view>
			</view>
			<!-- 合计价格 -->
			<!-- <view class="total" v-if="isNormal && !isDelete">
                <text class="title">合计：</text> <text class="price">￥{{ data.totalPrice | formatPrice }}</text>
            </view> -->
		</template>
		<!-- 促销活动弹窗 -->
		<activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
		<!-- 操作弹窗 -->
		<tui-modal
			:show="modal"
			@click="confirm"
			@cancel="modal = false"
			:content="contentModalText"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		></tui-modal>
		<cm-loading :visible="showLoading" text="加载中..."></cm-loading>
	</view>
</template>

<script>
import NumberBox from './number-box.vue'
import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
import CmNumberBox from '@/components/cm-module/cm-number-box/cm-number-box.vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
	name: 'cm-cart-product',
	components: {
		NumberBox,
		activiPopup,
		CmLoading,
		CmNumberBox
	},
	data() {
		return {
			modal: false,
			contentModalText: '',
			popupShow: false,
			handlerPros: {},
			showLoading: false
		}
	},
	props: {
		// 列表类型 list普通列表  delete删除列表  expired失效列表
		listType: {
			type: String,
			default: 'list'
		},
		// 数据
		data: {
			type: [Array, Object],
			default: () => {}
		},
		vkey: {
			type: String,
			default: ''
		}
	},
	computed: {
		// 是普通商品列表
		isNormal() {
			return this.listType.indexOf('normal') !== -1
		},
		// 是失效商品列表
		isExpired() {
			return this.listType.indexOf('expired') !== -1
		},
		// 当前状态为删除状态
		isDelete() {
			return this.listType.indexOf('delete') !== -1
		},
		productList() {
			if (this.isExpired) {
				return this.data
			} else {
				return this.data[this.vkey]
			}
		}
	},
	methods: {
		...mapActions('cart', ['updateShoppogCount', 'removeFailureFromCart']),
		...mapMutations('cart', ['selectProduct', 'selectAllShopProduct', 'selectFailure']),
		// 商品数量变化
		numberChange(product, count) {
			this.$emit('countChange')
			this.countChange(product, count)
		},
		// 勾选 / 取消勾选 供应商下所有商品
		chooseAll() {
			this.selectAllShopProduct({
				shopId: this.data.shopId,
				checked: !this.data.checked
			})
			this.$emit('chooseAll')
		},
		// 勾选到单个商品
		chooseOne(product) {
			if (this.isNormal) {
				this.selectProduct({
					shopId: this.data.shopId,
					productId: product.productId,
					checked: !product.productsChecked
				})
			} else {
				this.selectFailure({
					productId: product.productId,
					checked: !product.productsChecked
				})
			}
			this.$emit('chooseOne')
		},
		//商品数量加加
		countChange(product, count) {
			this.showLoading = true
			this.updateShoppogCount({
				cartId: product.cartId,
				productCount: count
			}).finally(() => {
				this.showLoading = false
			})
		},
		// 促销活动弹窗
		clickPopupShow(pros, type) {
			if (pros.ladderList.length > 0) {
				this.popupShow = true
				this.handlerPros = pros
			}
		},
		// 清空失效商品
		deletefailureList() {
			this.modal = true
			this.contentModalText = '确定清除所有失效商品吗？'
		},
		// 确认清空
		confirm(e) {
			if (e.index !== 1) return (this.modal = false)
			this.showLoading = true
			this.removeFailureFromCart().finally(() => {
				this.modal = false
				this.showLoading = false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
$grid: 24rpx;
.cm-cart-product {
	overflow: hidden;
	background: #fff;
	margin-bottom: $grid;
}
.shop-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: $grid $grid 0;
	.name {
		width: 622rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.expired {
		font-size: 30rpx;
		color: #333333;
	}
	.clear {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 184rpx;
		height: 42rpx;
		background: #fff8fd;
		border: 1rpx solid #ff457b;
		border-radius: 28rpx;
		font-size: 26rpx;
		color: #ff457b;
	}
}
.radio {
	font-size: 36rpx;
	color: #b2b2b2;
	&.icon-xuanze {
		color: #f83c6c;
	}
}
.product-list {
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 $grid;
		padding: 30rpx 0;
		border-top: 1px solid #e1e1e1;
		&.no-border {
			border-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		.expired {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 72rpx;
			height: 36rpx;
			background: rgba(51, 51, 51, 0.3);
			border-radius: 24rpx;
			font-size: 24rpx;
			color: #ffffff;
		}
	}
	.product {
		width: 622rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.cover {
			width: 180rpx;
			height: 180rpx;
			box-sizing: border-box;
			border: 1rpx dashed #e1e1e1;
		}
		.content {
			width: 442rpx;
			.title,
			.tags,
			.params,
			.footer,
			.tip {
				padding-left: $grid;
			}
			.tags,
			.params {
				margin-top: 10rpx;
			}
			.tip {
				margin-top: 80rpx;
				margin-bottom: 0;
				font-size: 26rpx;
				color: #f83c6c;
			}
			.title {
				height: 66rpx;
				font-size: 26rpx;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; // 这里控制几行显示省略号
				-webkit-box-orient: vertical;
			}
			.tags {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 24rpx;
				.tag {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 30rpx;
					margin-right: 8rpx;
					font-size: 22rpx;
					&.type1 {
						width: 56rpx;
						background: #ff457b;
						border-radius: 4rpx;
						color: #ffffff;
					}
					&.type2 {
						width: 80rpx;
						background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
							no-repeat;
						background-size: 80rpx 30rpx;
						color: #f83c6c;
					}
				}
			}
			.params {
				font-size: 20rpx;
				color: #999999;
			}
			.footer {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 4rpx;
				height: 48rpx;
				.add-cart {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 44rpx;
					height: 44rpx;
					background: #ff457b;
					color: #fff;
					border-radius: 50%;
				}
				.price {
					flex: 1;
					font-size: 26rpx;
					font-weight: 600;
					color: #f83c6c;
				}
			}
		}
	}
}
.total {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 30rpx $grid;
	font-size: 26rpx;
	font-weight: bold;
	.title {
		color: #333333;
	}
	.price {
		color: #ff457b;
	}
}
</style>