新人礼

components/xinrenliPopup.vue

+<template>
+  <view class="xinrenli-component">
+    <!-- 标题区域 -->
+    <view class="title-section">
+      <text class="main-title">新人礼</text>
+      <text class="sub-title">200元优惠券包</text>
+    </view>
+    
+    <!-- 优惠券网格 -->
+    <view class="coupon-grid">
+      <!-- 第一行优惠券 -->
+      <view class="coupon-row">
+        <view class="coupon-item" @click="handleCouponClick(0)">
+          <view class="coupon-header">coupon新客周卡</view>
+          <view class="coupon-amount">20元</view>
+          <view class="coupon-condition">满49元使用</view>
+        </view>
+        
+        <view class="coupon-item" @click="handleCouponClick(1)">
+          <view class="coupon-header">优选自营</view>
+          <view class="coupon-amount">20元</view>
+          <view class="coupon-condition">满49元使用</view>
+        </view>
+        
+        <view class="coupon-item" @click="handleCouponClick(2)">
+          <view class="coupon-header">北纬</view>
+          <view class="coupon-amount">40元</view>
+          <view class="coupon-condition">满99元使用</view>
+        </view>
+      </view>
+      
+      <!-- 第二行优惠券 -->
+      <view class="coupon-row">
+        <view class="coupon-item" @click="handleCouponClick(3)">
+          <view class="coupon-header">六水香</view>
+          <view class="coupon-amount">40元</view>
+          <view class="coupon-condition">满99元使用</view>
+        </view>
+        
+        <view class="coupon-item" @click="handleCouponClick(4)">
+          <view class="coupon-header">功能营养</view>
+          <view class="coupon-amount">80元</view>
+          <view class="coupon-condition">满188元使用</view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 底部按钮 -->
+    <view class="bottom-button" @click="handleGoToShop">
+      <text class="button-text">去星妈优选</text>
+    </view>
+    
+    <!-- 说明文字 -->
+    <view class="description">
+      <text class="desc-text">
+        首次访问星妈优选的用户可以领取200元优惠券包，包含(满49-20coupon新客周卡，优选自营49-20，北纬99-40，六水香99-40，功能营养188-80)
+      </text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+// 定义组件属性
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0
+  }
+})
+
+// 定义组件事件
+const emit = defineEmits(['coupon-click', 'go-to-shop'])
+
+// 优惠券点击事件
+const handleCouponClick = (couponIndex) => {
+  emit('coupon-click', {
+    index: props.index,
+    couponIndex: couponIndex
+  })
+}
+
+// 去星妈优选按钮点击
+const handleGoToShop = () => {
+  emit('go-to-shop', {
+    index: props.index
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.xinrenli-component {
+  width: 100%;
+  padding: 32rpx;
+  box-sizing: border-box;
+  
+  .title-section {
+    text-align: center;
+    margin-bottom: 40rpx;
+    
+    .main-title {
+      display: block;
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #1d1e25;
+      margin-bottom: 8rpx;
+    }
+    
+    .sub-title {
+      display: block;
+      font-size: 28rpx;
+      color: #1d1e25;
+    }
+  }
+  
+  .coupon-grid {
+    margin-bottom: 40rpx;
+    
+    .coupon-row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .coupon-item {
+        width: 160rpx;
+        height: 120rpx;
+        background: #e8d4b8;
+        border: 2rpx solid #d4c4a8;
+        border-radius: 16rpx;
+        padding: 16rpx;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        
+        // 添加虚线效果
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: -10rpx;
+          width: 20rpx;
+          height: 2rpx;
+          background: repeating-linear-gradient(
+            to right,
+            #d4c4a8 0,
+            #d4c4a8 4rpx,
+            transparent 4rpx,
+            transparent 8rpx
+          );
+        }
+        
+        &:last-child::after {
+          display: none;
+        }
+        
+        .coupon-header {
+          font-size: 20rpx;
+          color: #1d1e25;
+          margin-bottom: 8rpx;
+          text-align: center;
+          line-height: 1.2;
+        }
+        
+        .coupon-amount {
+          font-size: 32rpx;
+          font-weight: bold;
+          color: #1d1e25;
+          margin-bottom: 8rpx;
+        }
+        
+        .coupon-condition {
+          font-size: 18rpx;
+          color: #1d1e25;
+          text-align: center;
+          line-height: 1.2;
+        }
+      }
+    }
+  }
+  
+  .bottom-button {
+    width: 100%;
+    height: 80rpx;
+    background: #8b6b4a;
+    border-radius: 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24rpx;
+    
+    .button-text {
+      font-size: 28rpx;
+      color: #ffffff;
+      font-weight: 500;
+    }
+  }
+  
+  .description {
+    .desc-text {
+      font-size: 20rpx;
+      color: #1d1e25;
+      line-height: 1.5;
+      text-align: center;
+    }
+  }
+}
+</style>