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

<template name="goods">
	<view class="goods-template">
		<!-- 商品列表 -->
		<view class="goods-list">
			<view v-for="(item, index) in goodsCloneData" :key="index" class="goods-item">
				<view class="shoptitle">
					<view class="title-text">{{ item.shopName }}</view>
				</view>
				<view class="productlist" v-for="(pros, idx) in item.cartList" :key="idx">
					<view class="goods-pros-t">
						<view class="pros-img"><image :src="pros.image" alt=""/></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>
					</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"
					:goodIndex="index"
					:goodsData="[item]"
					:ispopupShow="ispopupShow"
					@show-freight="showFreight"
					@change-freight="changeFreight"
				/>
				<view class="goods-pros-b">
					<view class="sum">
						<text>合计：</text> <text class="money">￥</text>
						<count-up
							:num="item.totalPrice.toFixed(2)"
							:width="16"
							:height="40"
							:fontSize="28"
							color="#F94B4B"
						></count-up>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cmFreightPopup from './cm-freight-popup.vue'
import CountUp from './countUp.vue'
export default {
	name: 'goods',
	props: {
		goodsData: {
			type: Array
		}
	},
	components: {
		cmFreightPopup,
		CountUp
	},
	data() {
		return {
			remark: [],
			vipFlag: 0,
			ispopupShow: false, // 运费选择弹窗
			allPrice: 0,
			goodsCloneData: []
		}
	},
	created() {},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	watch: {
		goodsData: {
			handler: function(el) {
				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				this.goodsCloneData = el
			},
			deep: true,
			immediate: true
		}
	},
	computed: {},
	methods: {
		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)
		},
		showFreight($event) {
			this.ispopupShow = $event
		},
		// 修改运费弹窗
		changeFreight($event) {
			this.goodsCloneData[$event[0]] = $event[1]
			this.goodsCloneData[$event[0]].totalPrice = this.goodsCloneData[$event[0]].originalPrice + $event[2]
			this.goodsCloneData[$event[0]].postage =
				$event[1].postageFlag === 2 ? 0 : JSON.parse(uni.getStorageSync('goodsData'))[$event[0]].postage
			this.$emit('handleGoodList', this.goodsCloneData)
			console.log('goodsCloneData', this.goodsCloneData)
		}
	}
}
</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;
			}
		}
		.productlist {
			width: 100%;
			height: auto;
		}
		.goods-pros-t {
			display: flex;
			width: 100%;
			height: auto;
			padding: 12rpx 0;
			.pros-img {
				width: 210rpx;
				height: 100%;
				border-radius: 10rpx;
				margin: 0 26rpx 0 0;
				position: relative;
				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 {
				color: #999999;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin: 8rpx 0 24rpx 0;
			}
			.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;
					}
				}
			}
		}
		.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;
				}
			}
		}
		.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;
				}
			}
		}
	}
}
</style>