food_wechat/pages/shop/confirm.vue

<template>
	<view class="flex column">
		<!-- topbar -->
		<u-navbar title="确认订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- 地址框 -->
		<view class="m-l-24 m-r-24 m-t-24 p-t-24 p-b-24 bg-w rad8 boxshadow">
			<view class="flex md msb p-b-24 p-l-24 p-r-24">
				<view class="flex md">
					<u--image src="/static/icons/site-48.svg" width="75rpx" height="75rpx" />
					<view class="m-l-24 fz36 fb">收货站点：<font class="fcm">{{siteCon.sitename}}</font>
					</view>
				</view>
				<view>
					<u--image src="/static/icons/pulldown-40.svg" width="40rpx" height="40rpx" />
				</view>
			</view>
			<view class="colorBar"></view>
			<view class="flex m-t-24 p-l-24 p-r-24 fz28 msb">
				<view>配置物流</view>
				<view>{{shopCon.name}}</view>
			</view>
			<view class="flex m-t-12 p-l-24 p-r-24 fz28 msb">
				<view>送达时间</view>
				<view>预估{{estimated}}分钟之后送达</view>
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
			<view class="fb fz36 m-b-24">餐品详情</view>
			<!-- cart -->
			<view class="flex m-t-24 msb" v-for="(item,index) in cartList" :key="index">
				<view class="flex">
					<u--image :src="item.photo" width="192rpx" height="144rpx" />
					<view class="m-l-24 flex column">
						<view class="fz32 m-b-12">{{item.spu_name}}</view>
						<view class="fz24 fcb" v-for="(i,index) in item.sku_nameG" :key="index"
							v-if="item.sku_nameG.length>1">
							X1 {{i}}
						</view>
						<view class="fz24 m-t-12">X{{item.countG[0]}}</view>
					</view>
				</view>
				<view class="fz36 fb m-l-12">¥{{item | calculateTotal}}</view>
			</view>
		</view>
		<!-- 价格明细 -->
		<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
			<view class="fb fz36 m-b-24 l-h-18 borderBDas">价格明细</view>
			<view class="flex msb fb m-b-12">
				<view class="fz28">商品小计</view>
				<view class="fz36">¥{{total | formatPrice}}</view>
			</view>
			<view class="flex msb fz28 m-b-12">
				<view>外送费</view>
				<view>¥{{transportPrice | formatPrice}}</view>
			</view>
			<view class="flex msb fz28 m-b-24 p-b-24 borderBDas">
				<view>打包服务费</view>
				<view>¥{{packPrice | formatPrice}}</view>
			</view>
			<view class="flex mr mac">
				<view class="fcb fz24">合计</view>
				<view class="m-l-12 fz36 fb">¥{{fullPrice | formatPrice}}</view>
			</view>
		</view>
		<!-- 客户备注 -->
		<cell cellTit="备注" :cellCon="remarkDescription | truncate(8)" @click="handledrRemarkShow"></cell>
		<!-- 底部空白占位 -->
		<view class="extra-space1"></view>
		<!-- 提交订单 -->
		<view class="subBox flex mr mu p-t-24 p-b-24">
			<view class="fz24 fcb m-r-12 l-h-18">
				合计
			</view>
			<view class="flex column m-r-12">
				<view class="fb fz36">¥{{fullPrice | formatPrice}}</view>
				<view class="fz24">共{{totalCount}}件</view>
			</view>
			<view class="fz32 flex column mac mc fci rad8 m-r-24 checkBox" @click="handleCheckout"
				:class="isPressed?'bg-g':'bg-m'">
				<view>提交订单</view>
				<view>Checkout</view>
			</view>
		</view>
		<!-- 客户备注 折叠面板 -->
		<u-popup :show="remarkShow" round="10" mode="bottom" @close="closeRemark" zIndex="10080" :closeable="true">
			<view class="p-24">
				<!-- title -->
				<view class="flex mc md">
					<view class="fz32">备注</view>
				</view>
				<!-- list -->
				<view class="ofa m-t-12 m-b-12 flex column" style="max-height: 60vh;">
					<view v-for="(item,index) in remark_presup" :key='index' @click="currentRemark=index"
						class="flex mac msb fz28 borderBDas m-t-12" style="height: 60rpx;">
						<view>{{item}}</view>
						<view class="border rad-c radioBox" :class="currentRemark===index?'border-m bg-m':''">
							<u-icon name="checkbox-mark" size="40rpx" color="#fff"
								v-if="currentRemark===index"></u-icon>
						</view>
					</view>
					<view class="flex mac msb fz28 m-t-12" style="height: 60rpx;"
						@click="currentRemark=remark_presup.length+1">
						<view class="flex mub">
							<view>其他</view>
							<view class="fz24 fcb m-l-12" v-if="currentRemark===remark_presup.length+1">{{ remarkValue.length }}/{{ txtmaxlength }}</view>
						</view>
						<view class="border rad-c radioBox"
							:class="currentRemark===remark_presup.length+1?'border-m bg-m':''">
							<u-icon name="checkbox-mark" size="40rpx" color="#fff"
								v-if="currentRemark===remark_presup.length+1"></u-icon>
						</view>
					</view>
					<view @click="currentRemark=remark_presup.length+1">
						<u-input class="border" v-model="remarkValue" type="textarea" placeholder="请填写你的订单备注"
							:maxlength="txtmaxlength" :border="false" :auto-height="true" />
					</view>
				</view>
				<!-- 占位 -->
				<view class="extra-space1"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		calculateTotal,
		formatPrice,
		totalPrice,
		truncate
	} from '@/utils/index.js'

	export default {
		data() {
			return {
				isPressed: false, //提交按钮是否锁定
				remark: '', //用户备注 提交时候的值
				remarkShow: false, //用户备注弹出层
				currentRemark: -1, // 当前选中的备注索引
				remarkValue: '', // 备注输入的内容
				txtmaxlength: 30, //备注其他文本框最多字数限制
			}
		},
		computed: {
			//站点信息
			siteCon() {
				return this.$store.state.siteList.find(item => item.id === this.$store.state.site_id.toString())
			},
			//商铺信息
			shopCon() {
				return this.$store.state.shopCon
			},
			//备注预设列表
			remark_presup() {
				if (this.shopCon !== null && this.shopCon.remark_presup !== '[]') {
					return JSON.parse(this.shopCon.remark_presup)
				} else {
					return []
				}
			},
			//备注缩略显示
			remarkDescription() {
				if (this.currentRemark !== -1) {
					if (this.currentRemark === this.remark_presup.length + 1) {
						if (this.remarkValue) {
							return this.remarkValue
						}
					} else {
						return this.remark_presup[this.currentRemark]
					}
				}
				return '口味、偏好等要求'
			},
			//预估送达时间
			estimated() {
				return 30
			},
			//购物车列表
			cartList() {
				return this.$store.state.cartList
			},
			//购物车总价
			total() {
				return Number(this.totalPrice(this.$store.state.cartList))
			},
			//外送费
			transportPrice() {
				return Number(this.$store.state.shopCon.default_transport_price)
			},
			//打包服务费
			packPrice() {
				return Number(this.$store.state.shopCon.default_pack_price)
			},
			//购物车货品总数 ps:sku的总数 即单品总数
			totalCount() {
				let total = 0
				for (let i = 0; i < this.cartList.length; i++) {
					for (let j = 0; j < this.cartList[i].countG.length; j++) {
						total += this.cartList[i].countG[j]
					}
				}
				return total
			},
			//所有总价包括 商品总价 打包费 等总和
			fullPrice() {
				return Number(this.total) + Number(this.transportPrice) + Number(this.packPrice)
			},
			//用户信息
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		methods: {
			handledrRemarkShow() {
				this.remarkShow = true
			},
			closeRemark() {
				this.remarkShow = false
			},
			//计算购物车总价
			totalPrice,
			//提交订单
			handleCheckout() {
				if (this.isPressed) { //防止提交订单按钮重复点击
					return
				}
				this.isPressed = true
				//提交订单
				if(this.currentRemark!==-1){
					if(this.currentRemark===this.remark_presup.length+1){
						this.remark=this.remarkValue
					}else{
						this.remark=this.remark_presup[this.currentRemark]
					}
				}
				uni.$u.http.post('/Api/Check/checkout', {
					cartList: JSON.stringify(this.cartList), //购物车列表
					shop_id: this.$store.state.shop_id, //商铺id
					total: this.total, //商品总价格
					transport_price: this.transportPrice, //运费
					pack_price: this.packPrice, //打包费
					site_id: this.$store.state.site_id, //站点id
					remark: this.remark //客户订单备注
				}, {
					header: {
						'Token': this.$store.state.userInfo.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					//订单添加成功
					if (res.data.status === 1) {
						let fullPrice = String(this.fullPrice)
						//清空购物车
						this.$store.commit('clearCartList')
						//跳转到支付页面
						uni.navigateTo({
							url: `/pages/shop/pay?order_sn=${res.data.order_sn}&fullPrice=${fullPrice}`
						})
					} else if (res.data.status === -1) {
						uni.removeStorage({ //清除用户信息 跳转首页
							key: 'userInfo',
							success: (res) => {
								this.$store.commit('clearUserInfo')
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						})
						this.isPressed = false
					}
				})
			}
		},
		filters: {
			calculateTotal, //计算spu单价
			formatPrice, //格式化价格
			truncate //文本截取
		},
		onShow() {
			//购物车没有信息 跳转到订单查询页面
			if (this.$store.state.cartList.length === 0) {
				uni.redirectTo({
					url: '/pages/order/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.subBox {
		height: 122rpx;
		background-color: $uni-bg-color;
		z-index: 10076;
		width: 100vw;
		position: fixed;
		bottom: 0rpx;
	}

	.colorBar {
		height: 5rpx;
		background-image: url('/static/colorBar.png');
		background-size: contain;
		/* 防止图像重复 */
		background-position: center;
		/* 居中显示 */
	}

	.checkBox {
		width: 220rpx;
		height: 100rpx;
	}

	.radioBox {
		width: 40rpx;
		height: 40rpx;
	}
</style>