订单详情页部分完成

2024-05-13 09:18:11 +08:00
parent 7c1a4edbaf
commit 1d00f35bc9
7 changed files with 210 additions and 12 deletions
--- a/pages/product/placeOrder.vue
+++ b/pages/product/placeOrder.vue
@@ -0,0 +1,172 @@
+<template>
+	<view class="placeOrder">
+		<view class="placetop">
+			<view class="placetopone">
+				<view style="display: flex;">
+					<image :src="info.proImg"
+						style="width: 102rpx;height: 102rpx;border-radius: 50%;margin-left: 28rpx;" mode=""></image>
+					<view class="placetopInfo">
+						<view>{{info.proName.length>12?info.proName.substring(0,12)+'...':info.proName}} </view>
+						<view>{{info.avaTime}} </view>
+						<view>{{info.proDetail}} </view>
+					</view>
+				</view>
+				<view class="placetopmoney">
+					<view>
+						<text>￥12</text>
+						<text>￥13</text>
+					</view>
+					<u-number-box v-model="Quantity">
+						<view slot="minus" class="minus">
+							<u-icon name="minus" color="#CCCCCC" bold size="40"></u-icon>
+						</view>
+						<text slot="input" style="width: 20px;text-align: center;">{{Quantity}}</text>
+						<view slot="plus" class="plus">
+							<u-icon name="plus" color="#FF4B10" bold size="30"></u-icon>
+						</view>
+					</u-number-box>
+				</view>
+			</view>
+			<view class="redMoney">
+				<view class="">
+					红包/低佣券
+				</view>
+				<view class="">
+					有20张优惠券可选择
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		onLoad(e) {
+			this.getInfo(e.id)
+		},
+		data() {
+			return {
+				info: null,
+				Quantity: 1
+			}
+		},
+		methods: {
+			valChange(e) {
+				console.log('当前值为: ' + e.value)
+			},
+			async getInfo(id) {
+				let res = await this.api.getproductorderConfirm({
+					productId: id,
+				})
+				if (res.code == 0) {
+					this.info = res.data
+					console.log(this.info, 'tiaoshi1')
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.placeOrder {
+
+		.placetop {
+			width: 750rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx 16rpx 16rpx 16rpx;
+			padding: 30rpx;
+
+			.placetopone {
+				.df(space-between);
+
+				.placetopInfo {
+					margin-left: 18rpx;
+
+					>view:first-child {
+						font-weight: 400;
+						font-size: 32rpx;
+						color: #333333;
+					}
+
+					>view:nth-child(2),
+					>view:last-child {
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #666666;
+
+					}
+				}
+
+				.placetopmoney {
+
+					>view:first-child {
+						margin-bottom: 20rpx;
+
+						>text:first-child {
+							text-decoration: line-through;
+							color: #999;
+							font-weight: 400;
+							font-size: 24rpx;
+						}
+
+						>text:last-child {
+							font-weight: bold;
+							font-size: 28rpx;
+							color: #333333;
+						}
+					}
+
+				}
+			}
+
+			.redMoney {
+				.df(space-between);
+				margin-top: 30rpx;
+				.m(30rpx);
+
+				>view:first-child {
+					.df
+				}
+			}
+		}
+	}
+
+	.m(@top, @right: 0, @bottom: 0, @left: 0) {
+		margin: @top, @right, @bottom, @left
+	}
+
+	.df(@start: flex-start, @position: center) {
+		display: flex;
+		align-items: @position;
+		justify-content: @start;
+	}
+</style>
+<style lang="scss">
+	.minus {
+		width: 22px;
+		height: 22px;
+		border-width: 1px;
+		border-color: #F0F0F0;
+		border-style: solid;
+		border-top-left-radius: 100px;
+		border-top-right-radius: 100px;
+		border-bottom-left-radius: 100px;
+		border-bottom-right-radius: 100px;
+		@include flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.plus {
+		width: 22px;
+		height: 22px;
+		background-color: #FFF1EC;
+		border-radius: 50%;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+	}
+</style>