food_wechat/components/cartBut/cartBut.vue

<template>
	<view class="p-l-24 p-r-24 cartBox">
		<view v-if="total === 0" class="rad16 bg-g flex ofh" style="height: 108rpx;">
			<view class="bg-b" style="width: 152rpx;"></view>
			<view class="flex1 flex mac p-l-24">
				<u--image src="/static/icons/cafe-48.svg" width="96rpx" height="96rpx" />
				<view class="m-l-12 fz36 fb">未选购餐品</view>
			</view>
		</view>
		<view v-else class="bg-m rad16 flex" style="height: 108rpx;">
			<view class="flex md p-b-12">
				<u--image src="/static/icons/planeBox-100.svg" width="136rpx" height="136rpx"
					@click="$store.commit('setCartShow',!$store.state.cartShow)" />
			</view>
			<view class="fci fz36 flex1 flex msb">
				<view class="flex1 p-l-12 flex column mc" @click="$store.commit('setCartShow',!$store.state.cartShow)">
					<view class="fz36 fb">¥{{total | formatPrice}}</view>
					<view class="fz24" v-if="minimumOrderDifference>0">还差¥{{minimumOrderDifference | formatPrice}}起送
					</view>
				</view>
				<view class="flex column mac mc" style="width: 180rpx;" @click="handleSeled">
					<view class="fz36">选好了</view>
					<view class="fz24">Order</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatPrice,
		totalPrice
	} from '@/utils/index.js'
	export default {
		name: "cartBut",
		data() {
			return {

			}
		},
		methods: {
			// 购物车价格总和
			totalPrice,
			//"选好了"执行
			handleSeled() {
				const regex = /^(\+?\d{1,4}[\s-]?)?\d{3}\*{4}\d{4}$/
				if (regex.test(this.$store.state.userInfo.tel)) { //手机号合法
					if (Number(this.minimumOrderDifference) <= 0) { //起送价判断
						uni.navigateTo({ //跳转到订单页面
							url: '/pages/shop/confirm'
						})
					} else {
						uni.showToast({
							title: '未达到起送价',
							icon: 'error'
						})
					}
				} else { //手机号不合法 获取为空
					uni.navigateTo({ //跳转到获取手机号页面
						url: '/pages/main/getTel'
					})
				}
			}
		},
		computed: {
			//购物车总价
			total() {
				return this.totalPrice(this.$store.state.cartList)
			},
			//起送差价
			minimumOrderDifference() {
				return Number(this.shopCon.price_min) - Number(this.total)
			},
			//商品信息
			shopCon() {
				return this.$store.state.shopCon
			},
		},
		filters: {
			formatPrice //格式化价格
		}
	}
</script>

<style lang="scss" scoped>
	.cartBox {
		z-index: 10071;
		width: calc(100vw - 48rpx);
		height: 156rpx;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 1) 100%);
		position: absolute;
		bottom: 0rpx;
	}
</style>