Task：礼品赠送/送礼、分享。收礼

2025-02-21 01:21:22 +08:00
parent 40207f11a1
commit e1328a7825
5 changed files with 419 additions and 67 deletions
@@ -0,0 +1,68 @@
+<template>
+  <view class="mask">
+    <view class="gift-card-modal" :style="{backgroundColor: '#C52733'}">
+      <!-- 弹窗内容 -->
+      <view class="address-btn v12-white v12-primary-text">
+        填写地址并收下
+      </view>
+      <view class="share-btn v12-white v12-primary-text">
+        点击转增给好友
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'GiftCard',
+  data() {
+    return {
+      // 组件数据
+    }
+  }
+}
+</script>
+
+<style scoped>
+.share-btn{
+  width: fit-content;
+  padding: 15rpx 30rpx;
+  border-radius: 100rpx;
+  font-size: 24rpx;
+  margin-top: 30rpx;
+}
+.address-btn{
+  width: fit-content;
+  padding: 20rpx 30rpx;
+  border-radius: 100rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-top: 30rpx;
+}
+.gift-card-modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 586rpx;
+    height: 704rpx;
+    background-color: #C52733;
+    justify-content: center;
+    z-index: 999;
+    margin: auto;
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+}
+
+.gift-card-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  width: 80%;
+  max-width: 300px;
+}
+</style>
@@ -0,0 +1,106 @@
+<template>
+  <u-popup
+    :show="show"
+    mode="bottom"
+    round="20rpx"
+    @close="close"
+    :customStyle="{height: '400rpx', padding: '30rpx'}"
+    closeable
+    safeAreaInsetBottom
+  >
+    <view class="pay-picker">
+      <view class="title">选择支付方式</view>
+      
+      <view class="pay-item" :class="{ active: activeType === 'weixin' }" @click="handleSelect('weixin')">
+        <text class="label">微信支付</text>
+        <radio :checked="activeType === 'weixin'" color="#09BB07"></radio>
+      </view>
+      
+      <view class="pay-item" :class="{ active: activeType === 'yue' }" @click="handleSelect('yue')">
+        <text class="label">余额支付</text>
+        <radio :checked="activeType === 'yue'" color="#09BB07"></radio>
+      </view>
+      
+      <view class="confirm-btn" @click="confirm">确定</view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activeType: 'weixin' // 默认选中微信支付
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('update:show', false)
+    },
+    handleSelect(type) {
+      this.activeType = type
+    },
+    confirm() {
+      this.$emit('confirm', this.activeType)
+      this.close()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pay-picker {
+  .title {
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 40rpx;
+  }
+  
+  .pay-item {
+    display: flex;
+    align-items: center;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    border-radius: 10rpx;
+    background-color: #f5f5f5;
+    
+    &.active {
+      background-color: #e8f5e9;
+    }
+    
+    .icon {
+      width: 40rpx;
+      height: 40rpx;
+      margin-right: 20rpx;
+    }
+    
+    .label {
+      flex: 1;
+      font-size: 28rpx;
+      color: #333;
+    }
+    
+    radio {
+      transform: scale(0.8);
+    }
+  }
+  
+  .confirm-btn {
+    margin-top: 40rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    background-color: #C52733;
+    color: #fff;
+    border-radius: 40rpx;
+    font-size: 32rpx;
+  }
+}
+</style>