InventoryOrderingxcx/pages/goods/orderOK/orderOK.vue

<template>
	<view class="order__ok">
		<view class="order__ok-top">
			<image class="order__ok-img" :src="selectedInfo.productImages"></image>
			<view class="order__ok-text">
				<view class="text-title">{{selectedInfo.productName}}</view>
				<view class="text-content">{{selectedInfo.productDesc}}</view>
			</view>
		</view>
		<view class="order__ok-spec">
			<view class="content-info">
				<view class="item-left">商品规格</view>
				<view class="item-right">
					<view v-for="item in selectedInfo.productAttr" :key="item.key">
						<!-- {{item.shopSpec}}-{{item.selectData.map((m) => m.name).join(" ")}} -->
						<view v-if="item.selectData && item.selectData.length > 0">
							{{item.shopSpec}}-{{item.selectData.map((m) => m.name).join(" ")}}
						</view>
					</view>
				</view>
			</view>
			<view class="content-info">
				<view class="item-left">商品数量</view>
				<view class="item-right">
					<view>
						{{selectedInfo.tradeCount}}
					</view>
				</view>
			</view>
			<view class="content-info">
				<view class="item-left">交易方式</view>
				<view class="item-right">
					<view>
						{{selectedInfo.tradeType=='1'?'借用':'购买 '}}
					</view>
				</view>
			</view>
			<view class="content-info">
				<view class="item-left">物流方式</view>
				<view class="item-right">
					<view>
						{{selectedInfo.tradeType=='1'?'寄付':'到付 '}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="order__ok-address" v-for="item in 1" :key="item"> -->
		<view class="order__ok-address">
			<view class="order__ok-title">配送信息</view>
			<view class="address-content">
				<view class="content-info">
					<view class="item-left">收货人</view>
					<view class="item-right">{{selectedInfo.contactsName}}</view>
				</view>
				<view class="content-info">
					<view class="item-left">收货人手机号</view>
					<view class="item-right">{{selectedInfo.contactsPhone}}</view>
				</view>
				<view class="content-info">
					<view class="item-left">收货地址</view>
					<view class="item-right">{{selectedInfo.address}}{{selectedInfo.receiveAddress}}</view>
				</view>
			</view>
		</view>
		<view class="footer"></view>
		<view class="btn">
			<u-button type="primary" text="立即下单" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		getOrderCreate,
	} from '@/api/goods.js'
	export default {
		onLoad(options) {
			this.id = options.id;
			const app = getApp();
			let selectedInfo = JSON.parse(JSON.stringify(app.globalData.selectedInfo));
			app.globalData.selectedInfo = null
			this.selectedInfo = selectedInfo
			console.log('this.selectedInfo', this.selectedInfo);
		},
		data() {
			return {
				id: '',
				selectedInfo: {},
			};
		},
		methods: {
			async submit() {
				const res = {
					productId: this.id,
					provinceId: this.selectedInfo.provinceId,
					areaId: this.selectedInfo.areaId,
					cityId: this.selectedInfo.cityId,
					contactsName: this.selectedInfo.contactsName,
					contactsPhone: this.selectedInfo.contactsPhone,
					expressType: this.selectedInfo.expressType,
					productAttr: JSON.stringify(this.selectedInfo.productAttr),
					productName: this.selectedInfo.productName,
					receiveAddress: this.selectedInfo.receiveAddress,
					tradeCount: this.selectedInfo.tradeCount,
					tradeType: this.selectedInfo.tradeType,
				}
				const res1 = await getOrderCreate(res)
				console.log(res1);
				const orderId = res1.data
				uni.navigateTo({
					url: `/pages/goods/orderOK/index?id=${orderId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order__ok {
		padding: 20px 16px;
		width: 100%;
		min-height: 100%;
		background-color: #fff;
		box-sizing: border-box;

		.order__ok-top {
			display: flex;
			//align-items: center;
			justify-content: space-between;
			width: 100%;

			.order__ok-img {
				width: 90px;
				height: 90px;
				border-radius: 8px;
			}

			.order__ok-text {
				width: calc(100% - 102px);
				// margin-left: 12px;
				margin-top: 4px;

				.text-title {
					color: #333;
					font-size: 18px;
					font-weight: 700;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					// width: 100%;
					line-height: 27px;
					margin-bottom: 4px;
				}

				.text-content {
					color: #868990;
					font-size: 13px;
					height: 40px;
					line-height: 20px;
					// width: 100%;
					display: -webkit-box;
					/* 将对象作为弹性伸缩盒子模型显示 */
					-webkit-box-orient: vertical;
					/* 设置或检索伸缩盒对象的子元素的排列方式 */
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					/* 显示的行数 */
				}
			}
		}

		.order__ok-spec {
			margin: 16px 0;
			background: rgba(245, 248, 253, 0.78);
			padding: 16px 12px;
		}

		.content-info {
			display: flex;
			align-items: flex-start; //顶部对齐
			justify-content: space-between;
			margin-bottom: 8px;

			&:last-child {
				margin-bottom: 0;
			}

			.item-left {
				color: #868990;
				font-size: 14px;
				font-weight: 500;
				width: 110px;
			}

			.item-right {
				color: #333;
				text-align: right;
				font-size: 15px;
				font-weight: 400;
				width: calc(100% - 110px);
			}
		}

		.order__ok-address {
			.order__ok-title {
				color: #333;
				font-size: 15px;
				font-weight: 500;
				margin-bottom: 10px;
			}

			.address-content {
				background: rgba(245, 248, 253, 0.78);
				padding: 16px 12px;
			}
		}

		.btn {
			background-color: #fff;
			height: 112px;
			width: 100%;
			text-align: center;
			padding: 10px 30px 20px;
			box-sizing: border-box;
			position: fixed;
			bottom: 0px;
			left: 0;
			// background-color: red;
		}
	}

	.footer {
		height: 140px;
	}

	::v-deep .u-button {
		height: 50px !important;
	}
</style>