caimei-applets-caimei/pages/user/order/components/cm-goods-temp.vue

<template name="goods">
	<view class="goods-template">
		<!-- 商品列表 -->
		<view class="goods-list">
			<view v-for="(supplier, index) in goodsData" :key="index" class="goods-item">
				<view class="shoptitle">
					<view v-if="supplier.promotions" class="floor-item-act">
						<view class="floor-tags">{{ supplier.promotions.name }}</view>
					</view>
					<view class="title-text">{{ supplier.shopName }}</view>
				</view>
				<view class="productlist" v-for="(pros, idx) in supplier.cartList" :key="idx">
					<view class="goods-pros-t">
						<view class="pros-img">
							<image :src="pros.image" alt="" />
							<text class="tips" v-if="pros.giftType == 2 || pros.giftType == 1">赠品</text>
						</view>
						<view class="pros-product">
							<view class="producttitle">{{ pros.name }}</view>
							<view class="productspec" v-if="pros.productCategory != 2">规格:{{ pros.unit }}</view>
							<view class="productspec" v-if="pros.productCode != '' && pros.productCode != null">
								<view>商品编码:{{ pros.productCode }}</view>
							</view>
							<view class="productprice">
								<view class="price"
									><text>￥{{ pros.price | NumFormat }}</text></view
								>
								<view class="count"><text class="small">x</text>{{ pros.number }}</view>
							</view>
							<view class="floor-item-act">
								<template v-if="pros.actStatus == 1 && pros.promotions">
									<view v-if="PromotionsFormat(pros.promotions)" class="floor-tags">
										{{ pros.promotions.name }}
										<text v-if="pros.promotions">
											:￥{{
												pros.promotions == null
													? '0.00'
													: pros.promotions.touchPrice | NumFormat
											}}
										</text>
									</view>
									<view v-else-if="pros.promotions.type != 3" class="floor-tags">{{
										pros.promotions.name
									}}</view>
								</template>
								<template v-if="pros.svipProductFlag == 1 && vipFlag == 1">
									<view class="svip-tags">
										<view class="tags">SVIP</view>
										<view class="price">{{ pros.svipPriceTag }}</view>
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-pros-m">
					<view class="m-text">留言:</view>
					<view class="m-input">
						<input
							type="text"
							v-model="remark[index]"
							@change="changeHandle(index)"
							placeholder-class="placeholder"
							maxlength="50"
							placeholder="选填，最多不超过50个汉字"
						/>
					</view>
				</view>
				<!-- 运费 -->
				<cm-freight-popup         
					ref="freight"
					:index.sync="index"
					:supplier.sync="supplier"
					@changePostage="changePostageFlag"
					@changeColdChina="hanldChangeColdChina"
				/>
				<view class="goods-pros-b">
					<view class="sum-none" v-if="supplier.reducedPrice > 0">
						<text class="money-sign">￥</text>
						<text class="money">{{ supplier.originalPrice | NumFormat }}</text>
						<text class="money-reduced"
							>减<text>￥{{ supplier.reducedPrice  | NumFormat }}</text></text
						>
					</view>
					<view class="sum"
						>合计:<text class="money">￥{{ supplier.totalPrice | NumFormat }}</text></view
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cmFreightPopup from './cm-freight-popup'
export default {
	name: 'goods',
	components: {
		cmFreightPopup
	},
	props: {
		goodsData: {
			type: Array
		}
	},
	data() {
		return {
			remark: [],
			vipFlag: 0
		}
	},
	created() {
		this.initGetStotage()
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	watch: {
		goodsData: {
			handler: function(el) {
				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				this.goodsData = el
			},
			deep: true
		}
	},
	computed: {},
	methods: {
		async initGetStotage() {
			const userInfo = await this.$api.getStorage()
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
		},
		// 勾选冷链费操作
		hanldChangeColdChina(supplier,index){
			this.goodsData[index] = supplier
			this.$emit('handleGoodList', this.goodsData)
			this.$emit('changeChina', supplier)
		},
		// 更换运费类型 1 不包邮  2 到付
		changePostageFlag(supplier,index){
			this.goodsData[index] = supplier
			this.$emit('handleGoodList', this.goodsData)
			this.$emit('changePostage', supplier)
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		changeHandle(index) {
			//输入框的值被改变后
			this.goodsData[index].note = this.remark[index]
			this.$emit('handleGoodList', this.goodsData)
		}
	}
}
</script>

<style lang="scss">
.goods-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	.goods-list {
		width: 100%;
		height: auto;
		background: #f7f7f7;
		.goods-item {
			width: 702rpx;
			padding: 0 24rpx;
			background: #ffffff;
			margin-bottom: 24rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
		.shoptitle {
			display: flex;
			align-items: center;
			height: 80rpx;
			line-height: 80rpx;
			.title-text {
				width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				float: left;
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
				line-height: 56rpx;
				font-weight: bold;
			}
			.floor-item-act {
				height: 56rpx;
				text-align: center;
				box-sizing: border-box;
				float: left;
				padding: 12rpx 0;
				margin-right: 12rpx;
			}
		}
		.productlist {
			width: 100%;
			height: auto;
		}
		.goods-pros-t {
			display: flex;
			align-items: center;
			width: 100%;
			height: auto;
			padding: 12rpx 0;
			.pros-img {
				width: 210rpx;
				height: 100%;
				border-radius: 10rpx;
				margin: 0 26rpx 0 0;
				position: relative;
				.tips {
					display: inline-block;
					width: 80rpx;
					height: 40rpx;
					background-image: linear-gradient(214deg, #ff4500 0%, #ff5800 53%, #ff4367 100%);
					line-height: 40rpx;
					text-align: center;
					font-size: $font-size-24;
					color: #ffffff;
					border-radius: 10rpx 0 10rpx 0;
					position: absolute;
					top: 0;
					left: 0;
				}
				image {
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
					border: 1px solid #f3f3f3;
				}
			}
		}
		.pros-product {
			width: 468rpx;
			height: 100%;
			line-height: 40rpx;
			font-size: $font-size-26;
			position: relative;
			.producttitle {
				width: 100%;
				display: inline-block;
				height: auto;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-bottom: 8rpx;
			}
			.productspec {
				height: 40rpx;
				line-height: 40rpx;
				color: #999999;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.productprice {
				height: 54rpx;
				width: 100%;
				float: left;
				.price {
					line-height: 54rpx;
					font-size: $font-size-28;
					width: 48%;
					color: #ff2a2a;
					float: left;
				}
				.count {
					height: 100%;
					float: right;
					position: relative;
					.small {
						color: #666666;
					}
				}
			}
			.floor-item-act {
				width: 100%;
				height: 56rpx;
				text-align: center;
				box-sizing: border-box;
				float: left;
				padding: 0 0 10rpx 0;
			}
		}
		.goods-pros-b {
			width: 100%;
			height: auto;
			padding: 10rpx 0;
			.sum-none {
				width: 100%;
				height: 48rpx;
				line-height: 48rpx;
				color: $text-color;
				float: left;
				text-align: right;
				.money {
					font-size: $font-size-26;
					color: #999999;
					text-decoration: line-through;
				}
				.money-sign {
					font-size: $font-size-26;
					color: #999999;
					text-decoration: line-through;
				}
				.money-reduced {
					margin-left: 10rpx;
					font-size: $font-size-26;
					color: $color-system;
					.iconfont {
						font-size: $font-size-34;
					}
				}
			}
			.sum {
				width: 100%;
				height: 48rpx;
				font-size: $font-size-28;
				line-height: 48rpx;
				color: $text-color;
				display: flex;
				justify-content: flex-end;
				.money {
					color: #ff2a2a;
					font-size: $font-size-28;
				}
			}
		}	
	}
}
.goods-pros-m {
	height: 76rpx;
	line-height: 76rpx;
	font-size: $font-size-26;
	color: $text-color;
	margin-top: 12rpx;
	.m-text {
		width: 62rpx;
		float: left;
		padding-right: 20rpx;
		font-weight: bold;
	}
	.m-input {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		width: 580rpx;
		height: 36rpx;
		padding: 20rpx;
		background: #f7f7f7;
		border-radius: 10rpx;
		input {
			width: 100%;
			height: 100%;
			background: #f7f7f7;
			font-size: $font-size-26;
			line-height: 36rpx;
			color: #333333;
			min-height: 36rpx;
		}
	}
}
</style>