food_wechat/pages/shop/order.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="flex p-24 borderB bg-w">
			<u--image src="/static/icons/site-48.svg" width="96rpx" height="96rpx" />
			<view class="flex column m-l-24">
				<view class="fz36 siteBox l-h-18">{{siteCon.sitename}}</view>
				<view>{{userInfo.tel}}</view>
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="fb fz36 m-24">商品详情</view>
		<view class="m-24 m-t-12 flex column">
			<!-- cart -->
			<view class="flex" v-for="(item,index) in cartList" :key="index">
				<view class="rad8" style="width:192rpx;height: 144rpx;">
					<u--image :src="item.photo" width="192rpx" height="144rpx"></u--image>
				</view>
				<view class="flex1 flex column p-24">
					<view class="fz28 m-b-24">{{item.spu_name}}</view>
					<view v-for="(i,index) in item.sku_nameG" :key="index" v-if="item.sku_nameG.length>1"
						class="fz24 fcb l-h-12">1 X {{i}}</view>
					<view class="fz32 fcm fb m-t-24" style="height: 36rpx;">¥{{item | calculateTotal}}</view>
				</view>
			</view>
		</view>
		<!-- 价格明细 -->
		<view class="fb fz36 m-24">价格明细</view>
		<view class="flex msb m-l-24 m-r-24 fz32">
			<view>商品小计</view>
			<view>¥{{total | formatPrice}}</view>
		</view>
		<!-- 客户备注 -->
		<textarea class="border" v-model="remark"></textarea>
		<!-- 提交订单 -->
		<view class="subBox flex mr mac">
			<view class="m-r-24 fb">
				<text class="fz24">合计：</text>
				<text class="fz44">¥{{total | formatPrice}}</text>
			</view>
			<view class="fz32 flex column mac mc fci rad16 m-r-24" style="width:220rpx;height:100rpx;"
				@click="handleCheckout" :class="isPressed?'bg-g':'bg-m'">
				<view>提交订单</view>
				<view>Checkout</view>
			</view>
		</view>
	</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				isPressed: false, //提交按钮是否锁定
				remark: '' //用户备注
			}
		},
		computed: {
			//站点信息
			siteCon() {
				return this.$store.state.siteList.find(item => item.id === this.$store.state.site_id.toString())
			},
			//购物车列表
			cartList() {
				return this.$store.state.cartList
			},
			//购物车总价
			total() {
				return this.totalPrice(this.$store.state.cartList)
			},
			//用户信息
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		methods: {
			//计算购物车总价
			totalPrice,
			//提交订单
			handleCheckout() {
				if (this.isPressed) {//防止提交订单按钮重复点击
					return
				}
				this.isPressed = true
				//提交订单
				uni.$u.http.post('/Api/Check/checkout', {
					cartList: JSON.stringify(this.cartList), //购物车列表
					shop_id: this.$store.state.shop_id, //商铺id
					total: this.total, //总价格
					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) {
						//清空购物车
						this.$store.commit('clearCartList')
						//跳转到支付页面
						uni.navigateTo({
							url: `/pages/shop/pay?order_sn=${res.data.order_sn}`
						});
					} 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, //格式化价格
		},
		onShow() {
			//购物车没有信息 跳转到订单查询页面
			if (this.$store.state.cartList.length === 0) {
				uni.redirectTo({
					url: '/pages/main/order'
				})
			}
		}
	}
</script>

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