realty/virgo.wzfrontend/workark_wx/subPages/shopPage/checkout/checkout.vue

<template>
	<view class="wrap">
		<view class="uv-m-t-5">
			<uv-cell-group>
				<uv-cell is-link icon="map" :title="addr.name+' '+addr.tel" @click="chooseAddr"
					:label="addr.wholeAddressInfo">
				</uv-cell>
			</uv-cell-group>
		</view>
		<uv-list>
			<uv-list-item v-for="(item,index) in cartList" :key="item.id" border>
				<template #body>
					<view class="gl-item">
						<view class="gl-img">
							<uv-image width="170rpx" height="170rpx" :src="shopImage(item.goods.pic)">
							</uv-image>
						</view>
						<view class="gl-content">
							<view class="gl-name">{{item.title}}</view>
							<view class="gl-descript">{{item.goods.descript}}</view>
							<view class="gl-price">
								<uv-row>
									<uv-col :span="10">
										￥{{formatPrice(item.price)}}
									</uv-col>
									<uv-col :span="2">
										x{{item.count}}
									</uv-col>
								</uv-row>
							</view>
						</view>
					</view>
				</template>
			</uv-list-item>
		</uv-list>
		<view class="navigation">
			<view class="left">
				<view class="item total-price">
					合计: ￥{{formatPrice(totalPrice)}}
				</view>
			</view>
			<view class="right">
				<uv-button type="error" shape="circle" @click="submit">提交订单</uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRequest,
		saveOrder
	} from '@/request/api/shop.js'
	export default {
		data() {
			return {
				ids: '',
				addr: {
					name: '',
					tel: ''
				},
				chooseAddrId: '',
				cartList: []
			}
		},
		computed: {
			totalPrice() {
				return this.cartList.reduce((total, item) => total + (parseFloat(item.price) * item.count), 0)
			}
		},
		onShow() {
			let chooseAddrId = uni.getStorageSync('chooseAddrId');
			this.chooseAddrId = chooseAddrId;
			this.init();
		},
		onLoad(option) {
			this.ids = option.ids
			uni.setStorageSync('idCarts', option.ids);
			this.init();
		},
		methods: {
			async init() {
				if (!this.ids) return;
				let url = 'user/order/prepareCheckout?idCarts=' + this.ids
				if (this.chooseAddrId) {
					url += '&chosenAddressId=' + this.chooseAddrId
				}
				let requestData = await getRequest(url);
				if (requestData.state) {
					let res = requestData.data;
					let addr = res.addr
					if (!addr || !addr.name) {
						this.addr.name = '请选择收获地址'
					} else {
						this.addr = addr
						this.chooseAddrId = addr.id
					}
					let cartList = res.list
					for (const index in cartList) {
						let cart = cartList[index]
					}
					this.cartList = cartList;
				}
			},
			formatPrice(price) {
				if (!price) return 0;
				return (price / 100).toFixed(2)
			},
			chooseAddr() {
				this.$navigateTo('/subPages/shopPage/addressList/addressList?choose=true&chooseAddrId=' + this
					.chooseAddrId);
			},
			async submit() {
				if (!this.addr || !this.addr.tel || this.addr.tel == '') {
					this.$u.toast('请选择收货地址')
					return
				}
				let idCarts = ''
				for (var i in this.cartList) {
					idCarts += this.cartList[i].id + ','
				}
				const params = {
					idAddress: this.chooseAddrId,
					idCarts: idCarts
				}
				let saveData = await saveOrder(this.chooseAddrId, idCarts);
				if (saveData.state) {
					const order = saveData.data;
					uni.setStorageSync('chooseAddrId', undefined);
					uni.getStorageSync('idCarts', undefined);
					uni.redirectTo({
						url: '/subPages/shopPage/payment/payment?orderSn=' + order.orderSn + '&totalPrice=' +
							order.totalPrice
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx 0rpx;

		.uv-m-t-5 {
			background: #ffffff;
			margin-bottom: 30rpx;
		}

		.gl-content {
			flex: 1;
			width: 0;
		}

		.gl-item {
			display: flex;
			align-items: center;
			width: 100%;
		}

		.gl-name {
			font-size: 26rpx;
		}

		.gl-img {
			margin: 0 20rpx;
		}

		.gl-descript {
			margin-top: 14rpx;
			font-size: 20rpx;
		}

		.gl-price {
			margin-top: 26rpx;
			font-size: 24rpx;
			color: #FA3534;
		}

		.navigation {
			background-color: #ffffff;
			box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			padding-right: 40rpx;
			padding-left: 40rpx;
			justify-content: space-between;

			.left {
				display: flex;
				font-size: 20rpx;

				.item {
					margin: 0 8rpx;
				}

				.total-price {
					font-size: 30rpx;
					color: red;
					padding-top: 20rpx;
				}
			}

			.right {
				display: flex;
				font-size: 28rpx;
				align-items: center;
			}
		}
	}
</style>