<template>
	<view>
		<view style="display: flex;justify-content: flex-start; flex-wrap: wrap;" class="goodsBox">
			<view v-for="item in goodsArr" :key="item.id">
				<view v-if="item.count>0">
					<view style="display: flex;">
						<image style="height: 50px; width: 50px;" mode="aspectFit" :src="item.icon"></image>
						<view>
							<text style="font-size:9px; display: block;">{{item.name}}</text>
							<text style="font-size:9px; display: block;">{{item.count}}</text>
							<text style="font-size:9px; display: block; color: firebrick;">价格{{item.price}}</text>
							<text
								style="font-size:9px; display: block; text-decoration: line-through;">原价{{item.originalPrice}}</text>
							<button size="mini" @click="addToCase(item.id)">购买</button>
						</view>
					</view>
				</view>


			</view>
		</view>
		<view class="caseBox" style="border: 1px black soild;">
			<text>共需付款:{{total}}</text>
			<view style="border: 2px black solid;">
				<view v-for="(count,id,index) in caseArr" :key="index">
					<view style="display: flex; margin-top: 10px;" v-if="count>0" >
						<image style="height: 50px; width: 50px;" mode="aspectFit" :src="goodsArr[id].icon"></image>
						<view>
							<text style="font-size:9px; display: block;">{{goodsArr[id].name}}</text>
						</view>
						<view>
							<button style="display: inline-block; height: 30px;" @click="addToCase(id)">+</button>
							<text style="display: inline-block; width: 40px; text-align: center;" >{{count}}</text>
							<button style="display: inline-block; height: 30px;" @click="deleteFromCase(id)">-</button>
							<text style="font-size:9px; display: block; margin-left: 10px;">总价：{{goodsArr[id].price*count}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				goodsArr: [{
					    id:0,
						name: "冰红茶",
						icon: "../../static/1.png",
						price: 12,
						originalPrice: 15,
						count: 10
					},
					{
						id:1,
						name: "劲凉",
						icon: "../../static/2.png",
						price: 13,
						originalPrice: 16,
						count: 100
					},
					{
						id:2,
						name: "无糖冰红茶",
						icon: "../../static/3.png",
						price: 14,
						originalPrice: 17,
						count: 100
					},
					{
						id:3,
						name: "蜜桃乌龙茶",
						icon: "../../static/4.png",
						price: 15,
						originalPrice: 18,
						count: 100
					},
				],
				caseArr: {},
				total: 0
			}
		},
		methods: {
			addToCase(i) {
				if (this.goodsArr[i].count == 0) return;
				this.goodsArr[i].count--;
				if (!this.caseArr[i]) this.caseArr[i] = 0;
				this.caseArr[i]++;
				this.total += this.goodsArr[i].price;
			},
			deleteFromCase(i) {
				if (this.caseArr[i] == 0) return;
				this.goodsArr[i].count++;
				this.caseArr[i]--;
				this.total -= this.goodsArr[i].price;
			}
		}
	}
</script>

学习做的一个简单的购物车逻辑。在HBuilderX中运行正常，可以从上方的商品列表添加到下方的已选列表中。已选列表中可以增减商品数量。
但是在微信开发平台上运行时会出现错位增减的情况，即发生改变的不是操作的商品，而是其下的商品。