1

pagesHome/order/order.vue

@@ -110,6 +110,24 @@
 								<view class="other_1">加购商品</view>
 								<view class="other_4">去加购></view>
 							</view>
+							<view class="act" v-if="plus_goods.length>0">
+								<view class="act_1">您已选择商品为</view>
+								<view class="act_2">
+									<view class="plusList" v-for="(item,index) in plusList" :key="index">
+										<image class="image" :src="item.file.length>0?item.file[0].url:item.file[0].url"
+											mode="aspectFill"></image>
+										<view class="name">{{item.goods_name}}</view>
+										<view class="money">
+											<text class="text_1">￥{{item.flow_money}}</text>
+											<text class="text_2">￥{{item.sell_money}}</text>
+										</view>
+									</view>
+									<view class="bottom" @tap="toOpen">
+										<text
+											:class="[change==false?'iconfont icon-xiajiantou-copy':'iconfont icon-shangjiantou-copy']"></text>
+									</view>
+								</view>
+							</view>
 						</view>
 					</view>
 				</scroll-view>
@@ -216,7 +234,10 @@
 				skip: 0,
 				limit: 10,
 				// 抽屉
-				width: '100%'
+				width: '100%',
+				change: false,
+				// 显示加购商品
+				plus_total: 3,
 			};
 		},
 		onLoad: function(e) {
@@ -231,6 +252,20 @@
 			that.$set(that, `group_id`, e.group_id || '');
 			that.watchLogin()
 		},
+		computed: {
+			plusList() { // 计算属性使用切片生成新数组
+				let data = [];
+				// 大于三条，使用切片，返回新数组
+				if (this.plus_goods.length > 3) {
+					data = this.plus_goods.slice(0, this.plus_total);
+					return data;
+				} else {
+					// 否则使用原来数组，不进行切片处理
+					data = this.plus_goods
+					return data;
+				}
+			},
+		},
 		methods: {
 			// 监听用户是否登录
 			watchLogin() {
@@ -272,6 +307,11 @@
 					if (act) {
 						that.searchAct(act);
 						that.$set(that, `actInfo`, act);
+						arr.data.orderTotal.push({
+							zh: "加购总价",
+							key: 'plus',
+							money: 0
+						})
 					}
 					// 分享人id
 					that.$set(that, `inviter`, arr.data.inviter);
@@ -358,17 +398,44 @@
 					for (let val of that.actList) {
 						if (val.checked == true) val.checked = false
 					}
+					for (let arr of that.total_detail) {
+						if (arr.key == 'plus') arr.money = 0
+					}
 					that.$set(that, 'plus_goods', []);
 					that.computedTotal();
 					that.$refs.showRight.close();
 				} else {
 					// 选购中商品
 					let plus_goods = that.actList.filter(item => item.checked == true)
+					if (plus_goods) {
+						let plus_total = 0;
+						for (let arr of that.total_detail) {
+							if (arr.key == 'plus') {
+								for (let val of plus_goods) {
+									if (val.config.plus_money) plus_total = that.$plus(plus_total, val.config.plus_money)
+									else plus_total = that.$plus(plus_total, val.sell_money)
+								}
+								arr.money = plus_total
+							}
+						}
+					}
 					that.$set(that, 'plus_goods', plus_goods);
 					that.computedTotal();
 					that.$refs.showRight.close();
 				}
 			},
+			// 显示
+			toOpen() {
+				const that = this;
+				if (that.plus_goods.length > that.plus_total) {
+					// 每次点击加三条 
+					that.plus_total += 3;
+					that.$set(that, 'change', true);
+				} else {
+					that.$set(that, `plus_total`, 3)
+					that.$set(that, `change`, false)
+				}
+			},
 			// 分页
 			toPage() {
 				const that = this;
@@ -495,14 +562,6 @@
 				const total_detail = this.total_detail;
 				let total = 0;
 				for (let val of total_detail) total = this.$plus(total, val.money)
-				if (this.plus_goods.length > 0) {
-					let plus_total = 0;
-					for (let val of this.plus_goods) {
-						if (val.config.plus_money) plus_total = this.$plus(plus_total, val.config.plus_money)
-						else plus_total = this.$plus(plus_total, val.sell_money)
-					}
-					total = this.$plus(plus_total, total)
-				}
 				if (this.coupon.length > 0) {
 					let discount = 0;
 					for (const coupon of this.coupon) {
@@ -727,6 +786,61 @@
 						font-size: var(--font20Szie);
 					}
 				}
+
+				.act {
+					background-color: var(--mainColor);
+					border-bottom: 0.1vw solid var(--fcColor);
+					margin: 0 0 2vw 0;
+					width: 96vw;
+					padding: 2vw;
+
+					.act_1 {
+						font-size: var(--font14Size);
+						font-weight: bold;
+
+						text {
+							color: #FFA500;
+						}
+					}
+
+					.act_2 {
+						.plusList {
+							display: flex;
+							margin: 2vw 0;
+
+							.image {
+								width: 12vw;
+								height: 10vw;
+								border: 1px solid #ffffff;
+							}
+
+							.name {
+								width: 60vw;
+								font-size: 12px;
+								margin: 0 0 0 1vw;
+							}
+
+							.money {
+								width: 25vw;
+
+								.text_1 {
+									font-size: 12px;
+									color: #858585;
+									text-decoration: line-through;
+								}
+
+								.text_2 {
+									font-size: 14px;
+									color: #ff0000;
+								}
+							}
+						}
+					}
+
+					.bottom {
+						text-align: center;
+					}
+				}
 			}
 		}