high-mini/components/shopcart.vue

<template>
	<view class="shopcart">
		<!-- @click="toggleList" -->
		<view class="cartBottom">
			<view class="carIcon" @click="toggleList">
				<view class="iconBox" :class="getAllCount ? 'active' : '' ">
					<text class="allcount" style="background-color: #f01414;"
						v-if="getAllCount && typeid == 1">{{getAllCount}}</text>
					<text class="allcount backcorf2f6" v-if="getAllCount && typeid == 2">{{getAllCount}}</text>
					<image src="../qianzhu-KFC/static/imgs/kfcicon.png" mode="aspectFit" v-if="typeid == 1" class="img">
					</image>
					<image src="../qianzhu-KFC/static/imgs/skicon.png" mode="aspectFit" v-if="typeid == 2" class="img">
					</image>
				</view>
			</view>
			<view class="middle" @click="toggleList">
				<text class="price" :class="getAllCount ?　'active': ''">￥{{getAllPrice}}</text>
				<text class="deliveryPrice" style="font-size: 12px;">已省:¥{{discountPrice}}</text>
			</view>
			<view class="BtnRight" style="background-color: #c72a20;" v-if="typeid == 1" @click="buyList">
				选好了
			</view>
			<view class="BtnRight backcorf2f6" v-if="typeid == 2" @click="buyList">
				选好了
			</view>
		</view>
		<!-- 选择的商品 -->
		<view class="cartList" v-show="isShowList && getList.length">
			<view class="title">
				<text class="font15 fcor666">已选餐品</text>
				<view class="font14 fcor999" @click="delShopcart">
					清空
				</view>
			</view>
			<scroll-view scroll-y style="max-height: 280px;">
				<view class="list">
					<view class="list-text alijusstart" v-for="(item,index) in getList" :key="index">
						<view class="width30">
							<image :src="item.imgs" mode="widthFix" class="width100"></image>
						</view>
						<view class="width40 fotlt">
							<view class="width100 fcor333 fontwig6 font14">
								{{item.name}}
							</view>
							<view class="width100 fcor999 font12 mart5">
								<text v-if="item.cupSize">{{item.cupSize}}</text><text
									v-if="item.temperature">,{{item.temperature}}</text><text
									v-if="item.cream">,{{item.cream}}</text><text
									v-if="item.espresso">,{{item.espresso}}</text><text
									v-if="item.milk">,{{item.milk}}</text><text
									v-if="item.milkBubble">,{{item.milkBubble}}</text>
							</view>
							<view class="width100 color2f6f43  font16 mart5" v-if="typeid == 2">
								￥<text class="fontwig6">{{item.price}}</text>
							</view>
							<view class="width100 font16 mart5" style="color: #c72a20;" v-else>
								￥<text class="fontwig6">{{item.price}}</text>
							</view>
						</view>
						<cartcontrol :food="item" @add="addCart" @dec="decreaseCart" @input="inputCart"></cartcontrol>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="listMask" v-show="isShowList && getList.length" @click="toggleList"></view>
	</view>
</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	// import {mul} from '@/utils/lib'
	let app = getApp();
	export default {
		props: {
			buyType: 'default',
			buyDis: true,
			goods: {
				type: Array
			}
		},
		data() {
			return {
				isShowList: false,
				typeid: app.globalData.distinguishid,
				totalprice: '', //总价
				yhprice: '' //优惠价格
			};
		},
		components: {
			cartcontrol
		},
		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					if (good.num != 0) {
						result.push(good)
						// console.log('res', JSON.stringify(result))
					}
				})
				// console.log('=='+JSON.stringify(result));
				// this.goods = result;
				// app.globalData.qianzhulist = result;
				return result
			},
			// 获得购物车所有商品数量
			getAllCount() {
				let result = 0;
				this.goods.forEach((food) => {
					result += food.num
				})
				return result
			},

			// 总价
			getAllPrice() {
				let result = 0;
				let result1 = 0;
				this.goods.forEach((good) => {
					result1 += this.accMul(good.num, good.price)
					result = result1.toFixed(2);
				})
				this.totalprice = result;
				return result
			},
			//优惠价格
			discountPrice() {
				let result = 0;
				let result1 = 0;
				this.goods.forEach((good) => {
					result1 += this.accMul(good.num, good.oldprice)
					result = (result1 - this.totalprice).toFixed(2);
				})
				return result
			},

		},
		methods: {
			// 解决浮点数 运算出现多位小数
			accMul(arg1, arg2) {
				let m = 0,
					s1 = '',
					s2 = '';
				if (arg1 && arg1 != null)
					s1 = arg1.toString();
				if (arg2 && arg2 != null)
					s2 = arg2.toString();
				// console.log('m1',s2.replace('.',''))
				try {
					m += s1.split('.')[1].length
				} catch (e) {}
				try {
					m += s2.split('.')[1].length
				} catch (e) {}

				return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m);
			},


			toggleList() {
				if (this.getList.length) {
					this.isShowList = !this.isShowList;
				}
			},
			buyList() {
				let nums = 0;
				this.goods.forEach((food) => {
					nums += food.num
				})
				if (nums == 0) {
					uni.showToast({
						title: '请选择购买的商品',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				let result = [];
				this.goods.forEach((good) => {
					if (good.num != 0) {
						result.push(good)
					}
				})
				app.globalData.qianzhulist = result;
				uni.navigateTo({
					url: '/qianzhu-KFC/confirmOrder/confirmOrder'
				})
			},
			delShopcart() {
				this.isShowList = false;
				this.$emit('delAll');
			},
			addCart: function(item) {
				this.$emit('add', item)
			},
			decreaseCart(item) {
				this.$emit('dec', item)
				if (this.getList.length == 0) {
					this.isShowList = false;
				}
			},
			inputCart(item) {
				this.fcount = item.count
				if (item.count >= 999) {
					uni.showToast({
						title: "该宝贝不能购买更多了~"
					})
					return false;
				} else {
					this.$emit('input', item)
				}

			}

		},
	}
</script>

<style lang="scss" scoped>
	.list-text {
		display: flex;
		flex-direction: row;
	}

	.shopcart .cartBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 54px;
		z-index: 99;
		display: flex;
		background-color: #141d27;
	}

	.carIcon {
		flex: 1;
	}

	.iconBox {
		position: absolute;
		bottom: 22px;
		left: 18px;
		z-index: 101;
		background-color: rgb(70, 73, 75);
		border-radius: 50%;
		height: 48px;
		width: 48px;
		/* line-height: 55px; */
		line-height: 48px;
		text-align: center;
		/* border: 6px solid #141d27; */
		
		.img {
			font-size: 24px;
			// line-height: 24px;
			width: 30px;
			height: 30px;
			vertical-align: middle;
			// padding-left: 10px;
			// padding-top: 8px;
			color: #cccccc;
			border-radius: 50%;
		}
		
	}

	.iconBox .allcount {
		position: absolute;
		right: -6px;
		top: 0;
		display: inline-block;
		padding: 0 6px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 10px;
		color: #ffffff;
	}

	

	.carIcon .active {
		background-color: #141d27;
	}

	.middle {
		display: flex;
		flex-direction: column;
		flex: 2;
		color: #ffffff;
	}

	.BtnRight {
		flex: 1;
		border-radius: 26px;
		margin: 18rpx;
		z-index: 99999;
		color: #fff;
		text-align: center;
		line-height: 36px;
		height: 36px;
		font-size: 14px;
	}

	.cartList {
		position: fixed;
		bottom: 54px;
		left: 0;
		right: 0;
		z-index: 90;
	}

	.cartList .title,
	.cartList .list-text {
		display: flex;
		flex-direction: row;
	}

	.cartList .title {
		background: #ffffff;
		justify-content: space-between;
		padding: 10px 14px;
		border-radius: 15px 15px 0 0;
	}

	.cartList .list-text {
		padding: 10px 6px 5px 8px;
		text-align: center;
		border-bottom: 1px solid #f4f4f4;
	}

	.list {
		background: #ffffff;
		padding-bottom: 10px;
	}


	/* 遮布 */
	.listMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 89;
		opacity: 0.5;
		background: #6a7076;
	}
</style>