<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="widthFix" v-if="typeid == 1" class="img"> </image> <image src="../qianzhu-KFC/static/imgs/skicon.png" mode="widthFix" 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 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; /* border: 6px solid #141d27; */ } .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; } .img { font-size: 24px; line-height: 24px; width: 30px; height: 30px; padding-left: 10px; padding-top: 8px; color: #cccccc; border-radius: 50%; } .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>