wx-qhb/pageA/order.vue

<template>
	<view class="back">
		<!-- 地址 -->
		<view class="address">
			<view class="u-flex u-row-between">
				<view class="add">102 Huangjiao Road,</view>
				<u-icon name="arrow-right" size='16'></u-icon>
			</view>
			<view class="info">
				<text>Curtis Morris</text>
				<text style="margin-left: 20rpx;">041***8314</text>
			</view>
		</view>
		<!-- 商品 -->
		<view class="shop">
			<view class="">
				<image src="../static/images/logo.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
				<text class="name">灰妈团购🔥</text>
			</view>
			<view class="u-flex" style="margin-top: 32rpx;">
				<image src="../static/images/logo.png" style="width: 184rpx;height: 184rpx;" mode=""></image>
				<view class=" "
					style="margin-left: 20rpx;flex-direction: column;justify-content: space-between;height: 184rpx;display: flex;">
					<view class="">
						<text>鲜活黑虎虾 越冬虾 1kg 35-48只</text>
						<view class="weight">黑虎虾 10kg</view>
					</view>
					<view class="u-flex u-row-between">
						<text class="money">¥528.5</text>
						<u-number-box v-model="value">
							<!-- <view class="bu"> -->
							<view slot="minus" class="">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<text slot="input" style="width: 40px;text-align: center;" class="input">{{value}}</text>
							<view slot="plus" class="">
								<u-icon name="plus" size="12"></u-icon>
							</view>
							<!-- </view> -->
						</u-number-box>
					</view>
				</view>
			</view>
		</view>
		<!-- 物流 -->
		<view class="logistics u-flex u-row-between">
			<text style="font-weight: 600;">跨境物流</text>
			<view class="u-flex" @click="show = true">
				<text class="change">请选择</text>
				<u-icon name="arrow-right" size='16'></u-icon>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="recommend">
			<view class="top">
				<image src="static/images/recommend.png" style="width: 124rpx;height: 30rpx;" mode=""></image>
			</view>
			<view class="bottom">
				<scroll-view scroll-x class="u-flex" style="column: gap 28rpx; display: flex;">
					<view class="u-flex">
						<view class="" v-for="(item,idx) in 6" :key="idx">
							<image src="../static/images/logo.png" style="width: 156rpx;height: 156rpx;" mode="">
							</image>
							<view class="title">Lemmycree/莱 米可蕊 洁净…</view>
							<view class="">¥26.9</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 商品相关 -->
		<view class="abount" style="margin-top: 20rpx;">
			<view class="u-flex u-row-between" style='margin-bottom:40rpx'>
				<view class="name">商品金额</view>
				<view class="money">¥2642.5</view>
			</view>
			<view class="u-flex u-row-between">
				<view class="name">商品总重</view>
				<view class="money">300kg</view>
			</view>
			<view class="back u-flex">
				<image src="static/images/warning.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
				<text style="margin-left: 12rpx;">购买到378-380kg单价¥21，会更优惠</text>
			</view>
			<view class="u-flex u-row-between" style='margin-bottom:40rpx'>
				<view class="name">每公斤费用</view>
				<view class="money">¥24</view>
			</view>
			<view class="u-flex u-row-between">
				<view class="name">运费</view>
				<view class="money">¥100.00</view>
			</view>
			<view class="zong u-flex u-row-right">
				<view class="">
					<text class="small">小计</text>
					<text class="mon">¥2642.5</text>
				</view>
			</view>
		</view>
		<view class="" style="height: 166rpx;"></view>
		<view class="btn u-flex u-row-right">
			<view class="">
				<text class="kg">共39kg,</text>
				<text>合计:</text>
				<text class="money">¥2792.5</text>
			</view>
			<view class="order" @click="topay">
				提交订单
			</view>
		</view>
		<!-- 跨境物流 -->
		<u-popup :show="show" @close="close" @open="open" mode="bottom" closeIconPos='top-right' round='28'>
			<view style="padding: 40rpx 28rpx;box-sizing:border-box;">
				<view class="poptitle">
					跨境物流
				</view>
				<view class="u-flex u-row-between" style="margin-top: 60rpx;flex-wrap: wrap;">
					<view :class="index==idx?'active':'unactive'" v-for="(item,idx) in 6" @click="change(idx)"
						style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-bottom: 28rpx;position: relative;">
						<image v-if="index==idx" src="static/images/change.png"
							style="width: 36rpx;height: 32rpx;position: absolute;top: 0;right: 0;" mode=""></image>
						<view class="logname">海运散货</view>
						<view class="wei">¥12/kg</view>
					</view>
				</view>
				<view class="nextto" @click="next">下一步</view>
			</view>
		</u-popup>
		<!-- 跨境物流下一步 -->
		<u-popup :safeAreaInsetTop='true' :show="show1" @close="close" @open="open" mode="bottom"
			closeIconPos='top-right' round='28' bgColor='#F4F4F4'>
			<view style="padding: 40rpx 28rpx;box-sizing:border-box;position: relative;">
				<view class="poptitle">
					跨境物流
				</view>
				<!-- <scroll-view :scroll-y="true" style="500rpx"> -->
				<view class="transport" style="margin-top: 32rpx;" @click="activea(idx)" v-for="(item,idx) in 5">
					<view class="u-flex u-row-between">
						<text class="yundate">发柜日期 2023-12-09</text>
						<image v-if="datechan==idx" src="/pageA/static/images/active.png"
							style="width: 36rpx;height: 36rpx;" mode=""></image>
						<image v-else src="/pageA/static/images/unactive.png" style="width: 36rpx;height: 36rpx;"
							mode=""></image>
					</view>
					<view class="u-flex u-row-between" style="margin-top: 28rpx;">
						<view class="chest">
							<text>2号海运柜</text>
							<text style="margin: 0 16rpx;">|</text>
							<text>预计到达时间22个工作日</text>
						</view>
						<view class="mone">
							<text>¥</text>
							<text style="font-size: 32rpx;">1820</text>
						</view>
					</view>
				</view>
				<!-- </scroll-view> -->
				<view class="" style="height: 166rpx;"></view>
				<view class="enbottom  u-flex u-row-between">
					<view class="cancel" @click="close">取消</view>
					<view class="confirm" @click="confirm">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				show: false,
				index: '',
				show1: false,
				datechan: ''
			};
		},
		methods: {
			change(index) {
				this.index = index
			},
			next() {
				this.show = false
				this.show1 = true
			},
			activea(idx) {
				this.datechan = idx
			},
			//确定
			confirm() {
				this.show1 = false
			},
			// 取消
			close() {
				this.show = false
				this.show1 = false
			},
			//提交订单
			topay(){
				uni.navigateTo({
					url:'/pageA/payorder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirm {
		width: 398rpx;
		height: 84rpx;
		background: #F83224;
		border-radius: 42rpx;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		font-style: normal;
	}

	.cancel {
		width: 280rpx;
		height: 84rpx;
		border-radius: 42rpx;
		border: 2rpx solid rgba(151, 151, 151, 0.3);
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #444444;
		line-height: 84rpx;
		text-align: center;
		font-style: normal;
	}

	.enbottom {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		position: absolute;
		left: 0rpx;
		bottom: 0;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.mone {
		font-family: JDZhengHT, JDZhengHT;
		font-weight: 400;
		font-size: 26rpx;
		color: #F83224;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.yundate {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
	}

	.chest {
		font-family: SFPro, SFPro;
		font-weight: 400;
		font-size: 24rpx;
		color: #555555;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.act {
		width: 702rpx;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		border: 1rpx solid #F83224;
	}

	.transport {
		width: 702rpx;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
	}

	.nextto {
		width: 702rpx;
		height: 84rpx;
		background: #F83224;
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		font-style: normal;
		margin-top: 108rpx;
	}

	.logname {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
	}

	.wei {
		font-family: JDZhengHT, JDZhengHT;
		font-weight: 400;
		font-size: 32rpx;
		color: #F83224;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
		margin-top: 8rpx;
	}

	.active {
		width: 218rpx;
		height: 148rpx;
		background: rgba(247, 50, 36, 0.05);
		border-radius: 8rpx;
		border: 1rpx solid #F83224;
	}

	.unactive {
		width: 218rpx;
		height: 148rpx;
		border-radius: 12rpx;
		border: 1rpx solid #C3C3C3;
	}

	.poptitle {
		width: 142rpx;
		height: 50rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #333333;
		text-align: center;
		width: 100%;
	}

	.back {
		background: rgba(244, 244, 244, 1);
		padding: 20rpx 24rpx;
		box-sizing: border-box;

		.btn {
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 24rpx 5rpx 5rpx;
			box-sizing: border-box;

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 48rpx;
				color: #F83224;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
			}

			.kg {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}

			.order {
				width: 232rpx;
				height: 80rpx;
				background: #F83224;
				border-radius: 40rpx;
				font-family: PingFangTC, PingFangTC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				margin-left: 20rpx;
			}
		}

		//商品相关
		.abount {
			padding: 28rpx 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx;
			width: 702rpx;

			.zong {
				width: 654rpx;
				padding: 22rpx 0 0 0;
				border-top: 2rpx solid #979797;
				margin-top: 32rpx;

				.small {
					font-family: PingFangTC, PingFangTC;
					font-weight: 400;
					font-size: 24rpx;
					color: #444444;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}

				.mon {
					font-family: HarmonyOS_Sans_Medium;
					font-size: 28rpx;
					color: #F83224;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					margin-left: 12rpx;
				}
			}

			.back {
				background: rgba(244, 244, 244, 1);
				padding: 22rpx 16rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 28rpx;
				color: #222222;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.recommend {
			margin-top: 20rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #222222;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				width: 148rpx;
			}

			.top {
				width: 702rpx;
				height: 64rpx;
				background: linear-gradient(180deg, #FFE7E3 0%, rgba(255, 255, 255, 1) 100%);
				border-radius: 16rpx 16rpx 0 0;
				padding: 24rpx 22rpx;
				box-sizing: border-box;
			}

			.bottom {
				padding: 0 20rpx 22rpx;
				box-sizing: border-box;
				background: #fff;
			}
		}

		//物流
		.logistics {
			width: 702rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx 22rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.change {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #F83224;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				margin-right: 8rpx;
			}
		}

		//商城
		.shop {
			width: 702rpx;
			// height: 322rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx 24rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.bu {
				width: 120rpx;
				height: 40rpx;
				border-radius: 20rpx;
				border: 1rpx solid rgba(151, 151, 151, 0.3);
			}

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 24rpx;
				color: #F83224;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				margin-left: 10rpx;
			}

			.weight {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				margin-top: 16rpx;
			}
		}

		// 地址
		.address {
			width: 702rpx;
			// height: 182rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;

			.add {
				font-family: SFPro, SFPro;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}

			.info {
				font-family: SFPro, SFPro;
				font-weight: 400;
				font-size: 24rpx;
				color: #555555;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				margin-top: 20rpx;
			}
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		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;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>