project/mobile-shop/pages/order/order.vue

<template>
	<view class="order">
		<view class="address">
			<van-cell icon="user-circle-o" :border="false" is-link @click="goAddress">
				<template #title>
					<view class="top">
						姓名:<text>{{defaultArr === '' ? '' : addressList[0].receiver + " " + addressList[0].mobile}}</text>
					</view>
					<div class="bottom">
						地址:<text>{{defaultArr === '' ? "默认收货地址" : defaultArr}}</text>
					</div>
				</template>
			</van-cell>
		</view>
		<!-- 分割线 -->
		<van-divider hairline customStyle="border:3px solid #eee;" />
		<!-- 商品信息 -->
		<view v-for="(item,index) in shopCartInfo.shopCartOrders" :key="index">
			<view v-for="(item1,index1) in item.shopCartItemDiscounts[0].shopCartItems" :key="index1">
					<view class="main">
						<text class="shop-name">{{item.shopName}}</text>
						<van-card
						  :num="item1.prodCount"
						  :price="item1.price"
						  :desc="item1.skuName"
						  :title="item1.prodName"
						  :thumb="item1.pic"
						>
							<template #footer>
								<van-stepper :value="item1.prodCount" disabled integer />
								<view class="goods">邮费:{{item.transfee}}元</view>
							</template>
						</van-card>
					</view>
			</view>
			<!-- 订单 -->
			<van-cell-group>
			  <van-field
			    :value="item.remarks"
			    placeholder="请输入备注信息"
			    :border="false"
			    @change="onChange"
					label="订单备注"
			  />
			</van-cell-group>
			<!-- 优惠劵 -->
			<van-cell title="优惠劵" :border="false" is-link />
		</view>
		<!-- 分割线 -->
		<van-divider hairline customStyle="border:9px solid #eee;" />
		<!-- 订单信息 -->
		<view class="prod">
			<van-cell-group>
					<van-cell title="总金额" :value="shopCartInfo.total">
							<template #default>
									<div> ￥{{ shopCartInfo.total }}</div>
							</template>
					</van-cell>
					<van-cell title="优惠金额" :value="shopCartInfo.orderReduce" />
					<van-cell title="优惠金额" :value="shopCartInfo.orderReduce" />
					<van-cell title="商品总数" :value="shopCartInfo.totalCount" />
					<van-cell title="支付金额">
							<template #default>
									<div class="money-total-count">合计: ￥{{ shopCartInfo.actualTotal }}</div>
							</template>
					</van-cell>
			</van-cell-group>
		</view>
		<!-- 提交 -->
		<van-submit-bar :price="shopCartInfo.actualTotal * 100" button-text="提交订单" @submit="onSubmit" />
		<!-- 弹出框 -->
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import {addressList} from '@/api/address.js'
	import {confirm} from '@/api/detail.js'
	import {pay,submit} from '@/api/order.js'
	import {Dialog} from '@/wxcomponents/dist/dialog/dialog';
	export default {
		data() {
			return {
				comfirm:{},
				addressList:[],
				defaultArr:"",
				shopCartInfo:[],
				submitData: {
						orderShopParam: []
				}
			}
		},
		onShow() {
			this.comfirm = JSON.parse(uni.getStorageSync("confirm"))
			this.init();
		},
		methods:{
			async init() {
				this.addressList = await addressList();
				for(const key in this.addressList) {
					if(Object.hasOwnProperty.call(this.addressList,key)) {
						if(this.addressList[key].commonAddr === 1) {
								this.comfirm.addrId = this.addressList[key].addrId;
								const result = this.addressList[key];
								this.defaultArr = result.province + "" + result.city + "" + result.area + "" + result.addr;
							
						}
					}
				}
				confirm(this.comfirm).then(res => {
					res.shopCartOrders.map(item => item.remarks = "")
					this.shopCartInfo = res;
				})
			},
			async onSubmit() {
				let cartInfo = this.shopCartInfo.shopCartOrders;
				for(var i=0;i<cartInfo.length;i++) {
					this.submitData.orderShopParam.push({
						shopId: cartInfo[i].shopId,
						remarks: cartInfo[i].remarks
					})
				}
				const result = await submit(this.submitData);
				const payMain = await pay({
					orderNumbers: result.orderNumbers,
					payType: 1
				})
				uni.showModal({
					title: '支付成功',
						content: '恭喜您支付已完成',
						success: function (res) {							
							uni.switchTab({
								url:"/pages/my/my"
							})
						}
				})
			},
			goAddress() {
				uni.navigateTo({
					url:"/pages/address/address"
				})
			}
		}
	}
</script>

<style lang="scss">
	.prod {
		padding-bottom: 130rpx;
	}
	.money-total-count {
		color: red;
	}
</style>