From 683b01ed30455ad41105e9d7f95bf649c3700470 Mon Sep 17 00:00:00 2001
From: chen-xin-zhi <3588068430@qq.com>
Date: Mon, 24 Feb 2025 15:24:22 +0800
Subject: [PATCH] hello

---
 pages/coupon/component/couponPopup.vue | 265 +++++++++++++++++++++++++
 1 file changed, 265 insertions(+)
 create mode 100644 pages/coupon/component/couponPopup.vue

diff --git a/pages/coupon/component/couponPopup.vue b/pages/coupon/component/couponPopup.vue
new file mode 100644
index 0000000..a929195
--- /dev/null
+++ b/pages/coupon/component/couponPopup.vue
@@ -0,0 +1,265 @@
+<template>
+	<view class="flex-col page">
+	  <view class="flex-col">
+	    <view class="flex-col section">
+	      <view class="flex-row justify-center items-center relative group">
+	        <text class="text">请选择优惠券</text>
+	        <image
+	          class="image pos"
+	          src="https://ide.code.fun/api/image?token=67bbe3944ae84d00122703c2&name=2bf89872f72e1782d4d3c087ad6881c0.png"
+	        />
+	      </view>
+	      <view class="flex-col mt-33">
+	        <view class="flex-row justify-between group_2">
+	          <text class="font">可用</text>
+	          <text class="font">不可用</text>
+	        </view>
+	        <view class="relative divider">
+	          <view class="section_2 pos_2"></view>
+	          <view class="section_2 pos_3"></view>
+	        </view>
+	      </view>
+	    </view>
+	    <view class="flex-row justify-between section_3">
+	      <text class="font_2 text_2">优惠券商城</text>
+	      <image
+	        class="image_2"
+	        src="https://ide.code.fun/api/image?token=67bbe3944ae84d00122703c2&name=2829399146af5054fd6e58109f33ddb9.png"
+	      />
+	    </view>
+	  </view>
+	  <view class="flex-col list">
+		  
+		<radio-group @change="selectedHandler">
+			<view class="flex-col list-item mt-17" v-for="(item, index) in items" :key="index">
+			  <view class="flex-row justify-between self-stretch group_3">
+				<view class="flex-row items-baseline self-start group_6">
+				  <text class="font_3 text_4">50</text>
+				  <text class="font_4 text_5">￥</text>
+				</view>
+				<view class="flex-row items-center self-center group_4">
+				  <view class="flex-col shrink-0 group_5">
+					<text class="self-start font text_3">满200元减50</text>
+					<text class="self-stretch font_5 text_6 mt-11">2025.01.08 00:00至2025.04.07 23:59</text>
+				  </view>
+				  <!-- <view class="ml-22 shrink-0 section_4"></view> -->
+				  <radio class="ml-22 shrink-0 section_4" :value="index"
+				   color="#FFB5B8"></radio>
+				</view> 
+			  </view>
+			  <text class="mt-14 self-start font_2 text_7">未满足使用门槛</text>
+			</view>
+		</radio-group>  
+
+		
+	  </view>
+	  <view class="flex-row section_5">
+	    <view class="flex-col justify-start items-center text-wrapper">
+	      <text class="font_6 text_8">不使用优惠券</text>
+	    </view>
+	    <view class="flex-col justify-start items-center text-wrapper_2"><text class="font_6 text_9">确定</text></view>
+	  </view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import {ref} from 'vue'
+	const items = ref([null, null])
+	const idx = ref(0)
+	const selectedHandler = (e:any) => {
+		idx.value = e.detail.value
+	}
+</script>
+
+<style scoped lang="scss">
+	.mt-33 {
+	  margin-top: 61.88rpx;
+	}
+	.mt-17 {
+	  margin-top: 31.88rpx;
+	}
+	.mt-11 {
+	  margin-top: 20.63rpx;
+	}
+	.page {
+	  background-color: #f4f3f3;
+	  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
+	  width: 100%;
+	  overflow-y: auto;
+	  overflow-x: hidden;
+	  height: 100%;
+	  border: 3rpx solid red;
+	}
+	.section {
+	  padding-top: 41.25rpx;
+	  background-color: #ffffff;
+	  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
+	  border-bottom: solid 1.88rpx #d9d9d9;
+	}
+	.group {
+	  padding: 0 35.63rpx;
+	}
+	.text {
+	  color: #323232;
+	  font-size: 33.75rpx;
+	  font-family: Inter;
+	  line-height: 31.18rpx;
+	}
+	.image {
+	  width: 37.5rpx;
+	  height: 37.5rpx;
+	}
+	.pos {
+	  position: absolute;
+	  right: 35.63rpx;
+	  top: 50%;
+	  transform: translateY(-50%);
+	}
+	.group_2 {
+	  padding: 0 138.75rpx 22.5rpx 157.5rpx;
+	}
+	.font {
+	  font-size: 30rpx;
+	  font-family: Inter;
+	  line-height: 25.65rpx;
+	  color: #323232;
+	}
+	.divider {
+	  height: 5.63rpx;
+	}
+	.section_2 {
+	  background-color: #ff3c3c;
+	  width: 80.63rpx;
+	  height: 5.63rpx;
+	}
+	.pos_2 {
+	  position: absolute;
+	  left: 144.38rpx;
+	  top: 0;
+	}
+	.pos_3 {
+	  position: absolute;
+	  right: 144.38rpx;
+	  top: 0;
+	}
+	.section_3 {
+	  padding: 22.5rpx 33.75rpx 22.5rpx 41.25rpx;
+	  background-color: #ffffff;
+	}
+	.image_2 {
+	  width: 26.25rpx;
+	  height: 22.5rpx;
+	}
+	.list {
+	  margin-top: 31.88rpx;
+	  padding: 0 22.5rpx;
+	}
+	.list-item {
+	  padding-bottom: 18.75rpx;
+	  background-color: #ffffff;
+	  border-radius: 18.75rpx;
+	}
+	.list-item:first-child {
+	  margin-top: 0;
+	}
+	.group_3 {
+	  padding: 33.75rpx 37.5rpx 18.75rpx;
+	  border-bottom: solid 1.88rpx #d9d9d9;
+	}
+	.group_6 {
+	  margin-top: 26.25rpx;
+	  width: 81.6rpx;
+	}
+	.font_3 {
+	  font-size: 45rpx;
+	  font-family: Inter;
+	  line-height: 33.81rpx;
+	  font-weight: 600;
+	  color: #c35c5d;
+	}
+	.text_4 {
+	  margin-left: 26.25rpx;
+	}
+	.font_4 {
+	  font-size: 30rpx;
+	  font-family: Inter;
+	  line-height: 21.64rpx;
+	  color: #c35c5d;
+	}
+	.text_5 {
+	  margin-left: -82.5rpx;
+	}
+	.group_4 {
+	  margin-right: 7.5rpx;
+	}
+	.group_5 {
+	  width: 365.66rpx;
+	}
+	.text_3 {
+	  font-size: 28.13rpx;
+	  line-height: 25.91rpx;
+	}
+	.font_5 {
+	  font-size: 26.25rpx;
+	  font-family: Inter;
+	  line-height: 30rpx;
+	  color: #000000;
+	}
+	.text_6 {
+	  font-size: 24.38rpx;
+	}
+	.section_4 {
+	  background-color: #ffffff;
+	  border-radius: 75rpx;
+	  width: 33.75rpx;
+	  height: 33.75rpx;
+	  // border-left: solid 1.88rpx #ff3c3cad;
+	  // border-right: solid 1.88rpx #ff3c3cad;
+	  // border-top: solid 1.88rpx #ff3c3cad;
+	  // border-bottom: solid 1.88rpx #ff3c3cad;
+	}
+	.font_2 {
+	  font-size: 26.25rpx;
+	  font-family: Inter;
+	  line-height: 25.65rpx;
+	  color: #323232;
+	}
+	.text_2 {
+	  line-height: 24.28rpx;
+	}
+	.text_7 {
+	  margin-left: 30rpx;
+	  line-height: 24.34rpx;
+	}
+	.section_5 {
+	  margin-top: 138.75rpx;
+	  padding: 15rpx 46.88rpx;
+	  background-color: #ffffff;
+	}
+	.text-wrapper {
+	  padding: 26.25rpx 0;
+	  flex: 1 1 328.13rpx;
+	  background-color: #ff3c3cad;
+	  border-radius: 93.75rpx 0rpx 0rpx 93.75rpx;
+	  height: 82.5rpx;
+	}
+	.font_6 {
+	  font-size: 30rpx;
+	  font-family: Inter;
+	  color: #ffffff;
+	}
+	.text_8 {
+	  line-height: 27.81rpx;
+	}
+	.text-wrapper_2 {
+	  padding: 26.25rpx 0;
+	  flex: 1 1 328.13rpx;
+	  background-color: #ffb5b8;
+	  border-radius: 0rpx 93.75rpx 93.75rpx 0rpx;
+	  height: 82.5rpx;
+	}
+	.text_9 {
+	  line-height: 27.79rpx;
+	}
+	@import url(../../../common/css/global.css);
+</style>
\ No newline at end of file