jje_spread_uniapp/pages/purchaseCoupon/purchaseCoupon.vue

<template>
	<view class="page">
		<view class="flex-row coupon" v-for="i in 10">
			<view class="flex-col couponLeft">
				<text class="discounts">￥50</text>
				<text class="condition">满300可用</text>
			</view>
			<view class="couponRight">
				<view class="flex-col couponRight1">
					<view class="flex-row justify-between">
						<text class="couponName">门店通用</text>
						<view class="price">
							<text class="couponValue">单价：</text>
							<text class="couponPrice">￥50</text>
						</view>
					</view>
					<view class="flex-row">
						<view class="couponMsg">
							<view class="couponValue">
								<text>使用平台：</text>
								<text>全平台</text>
							</view>
							<view class="couponValue">
								<text>使用次数：</text>
								<text>1次</text>
							</view>
							<view class="couponValue">
								<text>到期时间：</text>
								<text>2024-01-01</text>
							</view>
						</view>
						<view class="flex-col justify-end">
							<view class="purchaseBtn" @click="openPurchase">
								<text>立即购买</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<uni-popup ref="purchasePopup" type="bottom">
			<view class="purchasePopup">
				<view class="flex-row justify-between">
					<text class="popupTitle">价格明显</text>
					<u-icon name="close-circle" color="#000000" size="28"></u-icon>
				</view>

				<view class="flex-row coupon">
					<view class="flex-col couponLeft">
						<text class="discounts">￥50</text>
						<text class="condition">满300可用</text>
					</view>
					<view class="couponRight">
						<view class="flex-col couponRight1">
							<view class="flex-row justify-between">
								<text class="couponName">门店通用</text>
							</view>
							<view class="flex-row">
								<view class="couponMsg">
									<view class="couponValue">
										<text>使用平台：</text>
										<text>全平台</text>
									</view>
									<view class="couponValue">
										<text>使用次数：</text>
										<text>1次</text>
									</view>
									<view class="couponValue">
										<text>到期时间：</text>
										<text>2024-01-01</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="flex-row justify-between titleView bordBottom">
					<text class="title">优惠券单价</text>
					<text class="couponPrice1">￥50.00</text>
				</view>

				<view class="flex-row justify-between titleView">
					<text class="title">数量</text>
					<u-number-box
							min="1"
							step="1"
							inputWidth="50"
							integer
							button-size="30"
							color="#666666"
							bgColor="#ffffff"
							iconStyle="color: #999999"
					></u-number-box>
				</view>

				<view class="flex-row justify-between conView">
					<view>
						<text class="conPriceValue">待支付</text>
						<text class="conPrice">￥500</text>
					</view>
					<view class="conBtn">
						<text>提交</text>
					</view>
				</view>

			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {

			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			openPurchase(){
				this.$refs.purchasePopup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.css';
</style>