From 231eef069727de992e018e70d89c47e4af7504f4 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 13 Sep 2024 15:11:58 +0800
Subject: [PATCH] =?UTF-8?q?1.diy---=E4=BC=98=E6=83=A0=E5=88=B8=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/coupon.vue | 1825 ++++++++++++++++++++-----------------
 1 file changed, 991 insertions(+), 834 deletions(-)

diff --git a/components/diy/coupon.vue b/components/diy/coupon.vue
index e91aa874..a5cd3219 100644
--- a/components/diy/coupon.vue
+++ b/components/diy/coupon.vue
@@ -1,834 +1,991 @@
-<template>
-    <!-- 优惠券 -->
-    <view class="coupon-theme-container">
-        <view class="pr" :style="style_container">
-            <view class="hide-scrollbar">
-                <template v-if="theme == '1'">
-                    <view class="coupon-theme-1" :style="'gap:' + theme_style.spacing">
-                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background">
-                            <view class="coupon-theme-1-content tc" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
-                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
-                                <view class="price" :style="'color:' + theme_style.price_color">
-                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                    <span class="number">{{ item.discount_value }}</span>
-                                    <span v-if="item.type == '1'" class="symbol">折</span>
-                                </view>
-                            </view>
-                            <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
-                        </view>
-                    </view>
-                </template>
-                <template v-else-if="theme == '2'">
-                    <view class="coupon-theme-2" :style="'gap:' + theme_style.spacing">
-                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
-                            <view class="tc">
-                                <view class="price" :style="'color:' + theme_style.price_color">
-                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                    <span class="number">{{ item.discount_value }}</span>
-                                    <span v-if="item.type == '1'" class="symbol">折</span>
-                                </view>
-                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
-                                <view class="desc text-line-1" :style="'color:' + theme_style.desc_color">{{ item.desc }}</view>
-                            </view>
-                            <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
-                        </view>
-                    </view>
-                </template>
-                <template v-else-if="theme == '3'">
-                    <view class="coupon-theme-3" :style="'gap:' + theme_style.spacing">
-                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background">
-                            <view class="left" :style="'background: ' + theme_style.background_inside">
-                                <div class="price-before" :style="'border-right: 2rpx dashed ' + theme_style.border_style">
-                                    <view class="price" :style="'color:' + theme_style.price_color">
-                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                        <span class="number">{{ item.discount_value }}</span>
-                                        <span v-if="item.type == '1'" class="symbol self-e">折</span>
-                                    </view>
-                                </div>
-                                <view class="text padding-left-xs padding-right-sm">
-                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
-                                    <view class="desc text-line-1" :style="'color:' + theme_style.desc_color">{{ item.use_limit_type_name }}</view>
-                                    <view v-if="item.limit_send_count && item.limit_send_count > 0" class="limit text-line-1" :style="'color:' + theme_style.limit_send_count">(限领{{ item.limit_send_count }}张)</view>
-                                </view>
-                            </view>
-                            <view class="right">
-                                <div class="right-before" :style="'background: ' + theme_style.background"></div>
-                                <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">
-                                    <text>{{ item.status_operable_name }}</text>
-                                    <icon name="arrow-right-o" class="icon"></icon>
-                                </view>
-                            </view>
-                        </view>
-                    </view>
-                </template>
-                <template v-else-if="theme == '4'">
-                    <view class="coupon-theme-4" :style="'background: ' + theme_style.background">
-                        <view class="hide-scrollbar">
-                            <view class="left" :style="'gap: ' + theme_style.spacing">
-                                <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background_inside">
-                                    <view class="type" :style="'background: ' + theme_style.type_background + ';color:' + theme_style.type_color">
-                                        <view class="type-before" :style="'background: ' + theme_style.type_background"></view>
-                                        <text>通用券</text>
-                                        <view class="type-after" :style="'background: ' + theme_style.type_background"></view>
-                                    </view>
-                                    <view class="price" :style="'color:' + theme_style.price_color">
-                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                        <span class="number">{{ item.discount_value }}</span>
-                                        <span v-if="item.type == '1'" class="symbol">折</span>
-                                    </view>
-                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
-                                </view>
-                            </view>
-                        </view>
-                        <view class="right">
-                            <view class="right-before" :style="'background: ' + theme_style.background"></view>
-                            <view class="re z-i flex-col jc-c align-c">
-                                <view class="title text-line-1" :style="'color:' + theme_style.content_title_color">{{ content_title }}</view>
-                                <view class="desc text-line-1" :style="'color:' + theme_style.content_desc_color">{{ content_desc }}</view>
-                                <view class="coupon-btn" :class="data_list.filter((item) => item.status_type == 0).length > 0 ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background" @tap="receive_all_event">
-                                    {{ data_list.filter((item) => item.status_type == 0).length > 0 ? '立即领取' : '不可领取' }}
-                                </view>
-                            </view>
-                        </view>
-                    </view>
-                </template>
-                <template v-else-if="theme == '5'">
-                    <view class="coupon-theme-5" :style="'gap:' + theme_style.spacing">
-                        <view v-for="(item, index) in data_list" :key="index" class="item">
-                            <view class="left" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
-                                <view class="price" :style="'color:' + theme_style.price_color">
-                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                    <span class="number">{{ item.discount_value }}</span>
-                                    <span v-if="item.type == '1'" class="symbol">折</span>
-                                </view>
-                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
-                            </view>
-                            <view class="right" :style="'background: ' + theme_style.background">
-                                <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
-                            </view>
-                        </view>
-                    </view>
-                </template>
-                <template v-else-if="theme == '6'">
-                    <view class="coupon-theme-6" :style="'gap:' + theme_style.spacing">
-                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background">
-                            <view class="pr oh">
-                                <view class="top-before" :style="'background: ' + theme_style.background"></view>
-                                <view class="top" :style="'background: ' + theme_style.background_inside">
-                                    <view class="price" :style="'color:' + theme_style.price_color">
-                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                        <span class="number">{{ item.discount_value }}</span>
-                                        <span v-if="item.type == '1'" class="symbol">折</span>
-                                    </view>
-                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
-                                </view>
-                                <view class="top-after" :style="'background: ' + theme_style.background"></view>
-                            </view>
-                            <view class="bottom">
-                                <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
-                            </view>
-                        </view>
-                    </view>
-                </template>
-                <template v-else-if="theme == '7'">
-                    <view class="coupon-theme-7" :style="'gap:' + theme_style.spacing">
-                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background">
-                            <view class="item-before" :style="'background: ' + theme_style.theme_7_background"></view>
-                            <view class="flex-row flex-1">
-                                <view class="left">
-                                    <view class="price" :style="'color:' + theme_style.price_color">
-                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                        <span class="number">{{ item.discount_value }}</span>
-                                        <span v-if="item.type == '1'" class="symbol">折</span>
-                                    </view>
-                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
-                                </view>
-                                <view class="right">
-                                    <view class="right-before" :style="'border: 2rpx dashed ' + theme_style.theme_7_background"></view>
-                                    <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
-                                </view>
-                            </view>
-                            <view class="item-after" :style="'background: ' + theme_style.theme_7_background"></view>
-                        </view>
-                    </view>
-                </template>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script>
-    const app = getApp();
-    import { common_styles_computer, gradient_computer } from '@/common/js/common/common.js';
-    export default {
-        props: {
-            value: {
-                type: Object,
-                default: () => ({}),
-            },
-        },
-        data() {
-            return {
-                currency_symbol: app.globalData.currency_symbol(),
-                style_container: '',
-                data_list: [],
-                // 主题
-                theme: '0',
-                // 主题样式
-                theme_style: {},
-                // 主题4 标题
-                content_title: '',
-                // 主题4 描述
-                content_desc: '',
-                theme_bg_img: {
-                    url_1: '',
-                    url_2: '',
-                    url_3: '',
-                },
-                // 首页地址
-                home_page_url: app.globalData.data.tabbar_pages[0],
-            };
-        },
-        mounted() {
-            this.init();
-        },
-        methods: {
-            init() {
-                const new_content = this.value.content || {};
-                const new_style = this.value.style || {};
-                const temp_theme = new_content.theme;
-                // 主题
-                const new_background = gradient_computer({ color_list: new_style.background, direction: new_style.direction }, false);
-                const new_background_inside = gradient_computer({ color_list: new_style.background_inside, direction: new_style.direction_inside }, false);
-                const new_btn_background = gradient_computer({ color_list: new_style.btn_background, direction: new_style.btn_direction }, false);
-                this.setData({
-                    content_title: new_content.content_title || '',
-                    content_desc: new_content.content_desc || '',
-                    // 判断是自动还是手动
-                    data_list: new_content.data_type == '0' ? new_content.data_list : new_content.data_auto_list,
-                    theme: temp_theme,
-                    theme_style: {
-                        price_color: new_style.price_color,
-                        name_color: new_style.name_color,
-                        // 判断是否向对象添加desc_color属性
-                        ...(!['1', '5', '6', '7'].includes(temp_theme) && { desc_color: new_style.desc_color }),
-                        ...(!['1', '2', '4', '5', '6', '7'].includes(temp_theme) && { limit_send_count: new_style.limit_send_count }),
-                        ...(!['5', '6', '7'].includes(temp_theme) && { btn_background: new_btn_background }),
-                        btn_color: new_style.btn_color,
-                        ...(!['2'].includes(temp_theme) && { background: new_background }),
-                        ...(!['1', '2', '5', '7'].includes(temp_theme) && { background_inside: new_background_inside }),
-                        spacing: new_style.spacing + 'px',
-                        ...(!['1', '2', '3', '5', '6', '7'].includes(temp_theme) && { type_background: new_style.type_background }),
-                        ...(!['1', '2', '3', '5', '6', '7'].includes(temp_theme) && { type_color: new_style.type_color }),
-                        ...(!['1', '2', '3', '5', '6', '7'].includes(temp_theme) && { content_title_color: new_style.content_title_color }),
-                        ...(!['1', '2', '3', '5', '6', '7'].includes(temp_theme) && { content_desc_color: new_style.content_desc_color }),
-                        ...(['3'].includes(temp_theme) && { border_style: new_style.background[0].color }),
-                        ...(['7'].includes(temp_theme) && { theme_7_background: new_style.common_style.color_list[0].color }),
-                    },
-                    theme_bg_img: {
-                        url_1: new_content.theme_1_static_img[0].url,
-                        url_2: new_content.theme_2_static_img[0].url,
-                        url_3: new_content.theme_5_static_img[0].url,
-                    },
-                    style_container: common_styles_computer(new_style.common_style),
-                });
-            },
-            // 领取优惠券
-            receive_event(e) {
-                const coupon_status_type = e.currentTarget.dataset.type;
-                const coupon_index = e.currentTarget.dataset.index;
-                const coupon_id = e.currentTarget.dataset.id;
-                switch (coupon_status_type) {
-                    case 0:
-                        // 登录校验
-                        var user = app.globalData.get_user_info(this, 'coupon_receive_event');
-                        if (user != false) {
-                            var temp_list = this.data_list;
-                            if (temp_list[coupon_index]['is_operable'] != 0) {
-                                uni.showLoading({
-                                    title: this.$t('common.processing_in_text'),
-                                });
-                                this.coupon_api(coupon_id, coupon_index);
-                            }
-                        }
-                        break;
-                    case 3:
-                        app.globalData.url_event(e);
-                        break;
-                }
-            },
-            // 全部领取
-            receive_all_event() {
-                const filter_data_list = this.data_list.map((item) => {
-                    if (item.is_operable != 0 && item.status_type == 0) {
-                        return item.id;
-                    }
-                });
-                this.coupon_api(filter_data_list.join(','));
-            },
-            // 优惠劵领取事件
-            coupon_api(val, index) {
-                uni.request({
-                    url: app.globalData.get_request_url('receive', 'coupon', 'coupon'),
-                    method: 'POST',
-                    data: {
-                        coupon_id: val,
-                    },
-                    dataType: 'json',
-                    success: (res) => {
-                        uni.hideLoading();
-                        if (res.data.code == 0) {
-                            app.globalData.showToast(res.data.msg, 'success');
-                            if (index) {
-                                temp_list = res.data.data.coupon || [];
-                            } else {
-                                temp_list[index] = res.data.data.coupon || {};
-                            }
-                            this.setData({
-                                data_list: temp_list,
-                            });
-                        } else {
-                            if (app.globalData.is_login_check(res.data, this, 'coupon_receive_event')) {
-                                app.globalData.showToast(res.data.msg);
-                            }
-                        }
-                    },
-                    fail: () => {
-                        uni.hideLoading();
-                        app.globalData.showToast(this.$t('common.internet_error_tips'));
-                    },
-                });
-            },
-        },
-    };
-</script>
-<style lang="scss" scoped>
-    .coupon-theme-1 {
-        display: flex;
-        flex-direction: row;
-        .item {
-            flex-basis: auto;
-            flex-shrink: 0;
-            width: 180rpx;
-            height: 180rpx;
-            border-radius: 20rpx;
-            margin-top: 20rpx;
-            .name {
-                padding: 10rpx 10rpx 0 10rpx;
-                margin-bottom: 10rpx;
-                font-size: 20rpx;
-            }
-            .price {
-                padding: 10rpx 0 16rpx 0;
-                .symbol {
-                    font-size: 24rpx;
-                    position: relative;
-                    bottom: 6rpx;
-                }
-                .number {
-                    font-size: 52rpx;
-                    line-height: 48rpx;
-                    font-weight: 500;
-                    padding: 0 8rpx;
-                }
-            }
-            .coupon-theme-1-content {
-                width: calc(100% - 20rpx);
-                margin: 0 10rpx;
-                background-size: 100% 100%;
-                position: relative;
-                top: -20rpx;
-            }
-
-            .coupon-btn {
-                margin: 0 auto;
-                width: 142rpx;
-                height: 35.112rpx;
-                line-height: 35.112rpx;
-                text-align: center;
-                font-size: 18rpx;
-                border-radius: 46rpx;
-                position: relative;
-                top: -4rpx;
-            }
-        }
-    }
-    .coupon-theme-2 {
-        display: flex;
-        flex-direction: row;
-        .item {
-            flex-basis: auto;
-            flex-shrink: 0;
-            background-size: 100% 100%;
-            width: 170rpx;
-            height: 200rpx;
-            padding: 10rpx;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            .price {
-                padding: 6rpx 0;
-                .symbol {
-                    font-size: 16rpx;
-                }
-                .number {
-                    font-size: 52rpx;
-                    font-weight: 500;
-                    padding: 0 8rpx;
-                }
-            }
-            .name {
-                font-size: 16rpx;
-                font-weight: 500;
-                margin-bottom: 8rpx;
-            }
-            .desc {
-                font-size: 16rpx;
-            }
-
-            .coupon-btn {
-                margin: 0 auto;
-                width: 110rpx;
-                height: 32rpx;
-                line-height: 32rpx;
-                text-align: center;
-                font-size: 18rpx;
-                border-radius: 46rpx;
-                margin-top: 10rpx;
-                margin-bottom: 4rpx;
-            }
-        }
-    }
-    .coupon-theme-3 {
-        display: flex;
-        .item {
-            overflow: hidden;
-            border-radius: 32rpx;
-            flex-basis: auto;
-            flex-shrink: 0;
-            width: 100%;
-            padding: 16rpx;
-            display: flex;
-            .left {
-                flex: 1;
-                width: 0;
-                border-radius: 16rpx;
-                padding: 12rpx 24rpx 6rpx 24rpx;
-                display: flex;
-                align-items: center;
-                .price-before {
-                    height: calc(100% + 120rpx);
-                    display: flex;
-                    align-items: center;
-                }
-                .price {
-                    text-align: center;
-                    width: 200rpx;
-                    position: relative;
-                    display: flex;
-                    align-items: flex-start;
-                    .symbol {
-                        font-size: 36rpx;
-                        font-weight: 600;
-                    }
-                    .number {
-                        font-size: 64rpx;
-                        font-weight: 600;
-                        padding: 0 8rpx;
-                        line-height: 60rpx;
-                    }
-                }
-                .text {
-                    flex: 1;
-                    width: 0;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    text-align: center;
-                    .name {
-                        font-size: 36rpx;
-                        font-weight: 500;
-                        line-height: 50rpx;
-                    }
-                    .desc {
-                        font-size: 28rpx;
-                        font-weight: 500;
-                        line-height: 40rpx;
-                    }
-                    .limit {
-                        font-size: 24rpx;
-                    }
-                }
-            }
-            .right {
-                width: 172rpx;
-                position: relative;
-                padding: 0 36rpx;
-                text-align: center;
-                display: flex;
-                align-items: center;
-                .right-before {
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    width: 200%;
-                    height: 200%;
-                    left: -32rpx;
-                    border-radius: 100%;
-                }
-                .coupon-btn {
-                    position: relative;
-                    font-size: 36rpx;
-                    font-weight: 500;
-                    text-align: center;
-                    .icon {
-                        font-size: 40rpx;
-                    }
-                }
-            }
-        }
-    }
-    .coupon-theme-4 {
-        overflow: hidden;
-        border-radius: 32rpx;
-        padding: 16rpx;
-        display: flex;
-        .left {
-            width: 428rpx;
-            display: flex;
-            flex-direction: row;
-            .item {
-                overflow: hidden;
-                flex-basis: auto;
-                flex-shrink: 0;
-                width: 144rpx;
-                height: 144rpx;
-                border-radius: 20rpx;
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-end;
-                align-items: center;
-                padding: 8rpx;
-                .type {
-                    position: absolute;
-                    top: 0;
-                    left: 50%;
-                    transform: translateX(-50%);
-                    font-size: 20rpx;
-                    line-height: 28rpx;
-                    .type-before {
-                        position: absolute;
-                        width: 30rpx;
-                        height: 60rpx;
-                        left: -16rpx;
-                        border-radius: 100%;
-                        top: -32rpx;
-                        z-index: -1;
-                    }
-                    .type-after {
-                        position: absolute;
-                        width: 30rpx;
-                        height: 60rpx;
-                        right: -16rpx;
-                        border-radius: 100%;
-                        top: -32rpx;
-                        z-index: -1;
-                    }
-                }
-                .price {
-                    text-align: center;
-                    position: relative;
-                    display: flex;
-                    align-items: flex-end;
-                    .symbol {
-                        font-size: 24rpx;
-                    }
-                    .number {
-                        font-size: 48rpx;
-                        line-height: 48rpx;
-                        font-weight: 600;
-                        padding-left: 8rpx;
-                    }
-                }
-                .name {
-                    font-size: 22rpx;
-                    line-height: 32rpx;
-                }
-            }
-        }
-        .right {
-            flex: 1;
-            width: 0;
-            position: relative;
-            .right-before {
-                width: 360rpx;
-                height: 360rpx;
-                position: absolute;
-                left: -14rpx;
-                top: 50%;
-                transform: translateY(-50%);
-                border-radius: 100%;
-            }
-            .title {
-                font-size: 32rpx;
-                font-weight: 500;
-                line-height: 44rpx;
-            }
-            .desc {
-                margin-top: 6rpx;
-                font-size: 24rpx;
-                line-height: 34rpx;
-            }
-            .coupon-btn {
-                width: 144rpx;
-                height: 44rpx;
-                font-size: 24rpx;
-                line-height: 44rpx;
-                text-align: center;
-                border-radius: 24rpx;
-                margin-top: 12rpx;
-            }
-        }
-    }
-    .coupon-theme-5 {
-        display: flex;
-        flex-direction: row;
-        .item {
-            flex-basis: auto;
-            flex-shrink: 0;
-            border-radius: 12rpx;
-            width: 252rpx;
-            height: 128rpx;
-            position: relative;
-            .left {
-                position: absolute;
-                left: 0;
-                width: 200rpx;
-                height: 100%;
-                padding: 12rpx;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                z-index: 1;
-                .price {
-                    text-align: center;
-                    position: relative;
-                    display: flex;
-                    align-items: flex-end;
-                    margin-bottom: 10rpx;
-                    .symbol {
-                        font-size: 24rpx;
-                        font-weight: 500;
-                    }
-                    .number {
-                        font-size: 48rpx;
-                        font-weight: 500;
-                        line-height: 40rpx;
-                        padding-left: 8rpx;
-                    }
-                }
-                .name {
-                    font-size: 24rpx;
-                }
-            }
-            .right {
-                width: 92rpx;
-                padding-left: 40rpx;
-                border-radius: 12rpx;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                right: 0;
-                height: 100%;
-                text-align: center;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                .coupon-btn {
-                    position: relative;
-                    font-size: 24rpx;
-                    font-weight: 500;
-                    text-align: center;
-                    letter-spacing: 4rpx;
-                }
-            }
-        }
-    }
-    .coupon-theme-6 {
-        display: flex;
-        .item {
-            flex-basis: auto;
-            flex-shrink: 0;
-            border-radius: 24rpx;
-            padding: 12rpx;
-            width: 280rpx;
-            height: 200rpx;
-            position: relative;
-            .top-before {
-                position: absolute;
-                left: -14rpx;
-                top: 50%;
-                transform: translateY(-50%);
-                width: 28rpx;
-                height: 28rpx;
-                border-radius: 50%;
-                z-index: 2;
-            }
-            .top-after {
-                position: absolute;
-                right: -14rpx;
-                top: 50%;
-                transform: translateY(-50%);
-                width: 28rpx;
-                height: 28rpx;
-                border-radius: 50%;
-                z-index: 2;
-            }
-            .top {
-                width: 100%;
-                padding: 8rpx;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                z-index: 1;
-                border-radius: 12rpx;
-                position: relative;
-                overflow: hidden;
-                .price {
-                    text-align: center;
-                    position: relative;
-                    display: flex;
-                    align-items: flex-end;
-                    margin-bottom: 2rpx;
-                    .symbol {
-                        font-size: 40rpx;
-                        font-weight: 500;
-                    }
-                    .number {
-                        font-size: 64rpx;
-                        font-weight: 500;
-                        line-height: 64rpx;
-                        padding-left: 8rpx;
-                    }
-                }
-                .name {
-                    font-size: 24rpx;
-                }
-            }
-            .bottom {
-                margin-top: 12rpx;
-                text-align: center;
-                .coupon-btn {
-                    position: relative;
-                    font-size: 32rpx;
-                    line-height: 44rpx;
-                    font-weight: 500;
-                    text-align: center;
-                }
-            }
-        }
-    }
-    .coupon-theme-7 {
-        display: flex;
-        .item {
-            flex-basis: auto;
-            flex-shrink: 0;
-            border-radius: 8rpx;
-            width: 236rpx;
-            height: 128rpx;
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            .item-before {
-                position: absolute;
-                left: 160rpx;
-                top: -12rpx;
-                width: 24rpx;
-                height: 24rpx;
-                border-radius: 50%;
-            }
-            .item-after {
-                position: absolute;
-                left: 160rpx;
-                bottom: -12rpx;
-                width: 24rpx;
-                height: 24rpx;
-                border-radius: 50%;
-            }
-            .left {
-                width: 172rpx;
-                padding: 8rpx;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                position: relative;
-                .price {
-                    text-align: center;
-                    position: relative;
-                    display: flex;
-                    align-items: flex-end;
-                    margin-bottom: 10rpx;
-                    .symbol {
-                        font-size: 24rpx;
-                        font-weight: 500;
-                    }
-                    .number {
-                        font-size: 48rpx;
-                        font-weight: 500;
-                        line-height: 40rpx;
-                        padding-left: 8rpx;
-                    }
-                }
-                .name {
-                    font-size: 24rpx;
-                }
-            }
-            .right {
-                flex: 1;
-                width: 0;
-                padding-left: 14rpx;
-                position: relative;
-                .right-before {
-                    position: absolute;
-                    left: -1rpx;
-                    top: 0;
-                    bottom: 0;
-                    width: 0;
-                    height: 100%;
-                    opacity: 0.61;
-                }
-                .coupon-btn {
-                    padding: 8rpx;
-                    width: 100%;
-                    font-size: 20rpx;
-                    font-weight: 500;
-                    text-align: center;
-                    letter-spacing: 4rpx;
-                    height: 100%;
-                    display: flex;
-                    align-items: center;
-                }
-            }
-        }
-    }
-    // 已领取
-    .btn-already {
-        color: #e3ca90 !important;
-    }
-    .hide-scrollbar {
-        overflow: auto;
-        &::-webkit-scrollbar {
-            display: none;
-            width: 0;
-            height: 0;
-            color: transparent;
-        }
-    }
-    * {
-        box-sizing: border-box;
-    }
-</style>
+<template>
+    <!-- 优惠券 -->
+    <view class="coupon-theme-container">
+        <view class="pr" :style="style_container">
+            <view class="hide-scrollbar">
+                <template v-if="theme == '1'">
+                    <view class="coupon-theme-1" :style="'gap:' + theme_style.spacing">
+                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background">
+                            <view class="coupon-theme-1-content tc" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
+                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                <view class="price" :style="'color:' + theme_style.price_color">
+                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol">折</span>
+                                </view>
+                            </view>
+                            <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
+                        </view>
+                    </view>
+                </template>
+                <template v-else-if="theme == '2'">
+                    <view class="coupon-theme-2" :style="'gap:' + theme_style.spacing">
+                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
+                            <view class="tc">
+                                <view class="price" :style="'color:' + theme_style.price_color">
+                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol">折</span>
+                                </view>
+                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                <view class="desc text-line-1" :style="'color:' + theme_style.desc_color">{{ item.desc }}</view>
+                            </view>
+                            <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
+                        </view>
+                    </view>
+                </template>
+                <template v-else-if="theme == '3'">
+                    <view class="coupon-theme-3" :style="'gap:' + theme_style.spacing">
+                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background">
+                            <view class="left" :style="'background: ' + theme_style.background_inside">
+                                <div class="price-before" :style="'border-right: 2rpx dashed ' + theme_style.border_style">
+                                    <view class="price" :style="'color:' + theme_style.price_color">
+                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                        <span class="number">{{ item.discount_value }}</span>
+                                        <span v-if="item.type == '1'" class="symbol self-e">折</span>
+                                    </view>
+                                </div>
+                                <view class="text padding-left-xs padding-right-sm">
+                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                    <view class="desc text-line-1" :style="'color:' + theme_style.desc_color">{{ item.use_limit_type_name }}</view>
+                                    <view v-if="item.limit_send_count && item.limit_send_count > 0" class="limit text-line-1" :style="'color:' + theme_style.limit_send_count">(限领{{ item.limit_send_count }}张)</view>
+                                </view>
+                            </view>
+                            <view class="right" :class="item.status_operable_name.length > 3 ? ' long-name' : ' short-name'">
+                                <div class="right-before" :style="'background: ' + theme_style.background"></div>
+                                <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">
+                                    <text class="text">{{ item.status_operable_name }}</text>
+                                    <iconfont name="icon-arrow-right-round" class="icon"></iconfont>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </template>
+                <template v-else-if="theme == '4'">
+                    <view class="coupon-theme-4" :style="'background: ' + theme_style.background">
+                        <view class="hide-scrollbar">
+                            <view class="left" :style="'gap: ' + theme_style.spacing">
+                                <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background_inside">
+                                    <view class="type" :style="'background: ' + theme_style.type_background + ';color:' + theme_style.type_color">
+                                        <view class="type-before" :style="'background: ' + theme_style.type_background"></view>
+                                        <text>通用券</text>
+                                        <view class="type-after" :style="'background: ' + theme_style.type_background"></view>
+                                    </view>
+                                    <view class="price" :style="'color:' + theme_style.price_color">
+                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                        <span class="number">{{ item.discount_value }}</span>
+                                        <span v-if="item.type == '1'" class="symbol">折</span>
+                                    </view>
+                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                </view>
+                            </view>
+                        </view>
+                        <view class="right">
+                            <view class="right-before" :style="'background: ' + theme_style.background"></view>
+                            <view class="re z-i flex-col jc-c align-c">
+                                <view class="title text-line-1" :style="'color:' + theme_style.content_title_color">{{ content_title }}</view>
+                                <view class="desc text-line-1" :style="'color:' + theme_style.content_desc_color">{{ content_desc }}</view>
+                                <view class="coupon-btn" :class="data_list.filter((item) => item.status_type == 0).length > 0 ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background" @tap="receive_all_event">
+                                    {{ data_list.filter((item) => item.status_type == 0).length > 0 ? '立即领取' : '不可领取' }}
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </template>
+                <template v-else-if="theme == '5'">
+                    <view class="coupon-theme-5" :style="'gap:' + theme_style.spacing">
+                        <view v-for="(item, index) in data_list" :key="index" class="item">
+                            <view class="left" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
+                                <view class="price" :style="'color:' + theme_style.price_color">
+                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                    <span class="number">{{ item.discount_value }}</span>
+                                    <span v-if="item.type == '1'" class="symbol">折</span>
+                                </view>
+                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                            </view>
+                            <view class="right" :style="'background: ' + theme_style.background">
+                                <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
+                            </view>
+                        </view>
+                    </view>
+                </template>
+                <template v-else-if="theme == '6'">
+                    <view class="coupon-theme-6" :style="'gap:' + theme_style.spacing">
+                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background">
+                            <view class="pr oh">
+                                <view class="top-before" :style="'background: ' + theme_style.background"></view>
+                                <view class="top" :style="'background: ' + theme_style.background_inside">
+                                    <view class="price" :style="'color:' + theme_style.price_color">
+                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                        <span class="number">{{ item.discount_value }}</span>
+                                        <span v-if="item.type == '1'" class="symbol">折</span>
+                                    </view>
+                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                </view>
+                                <view class="top-after" :style="'background: ' + theme_style.background"></view>
+                            </view>
+                            <view class="bottom">
+                                <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
+                            </view>
+                        </view>
+                    </view>
+                </template>
+                <template v-else-if="theme == '7'">
+                    <view class="coupon-theme-7" :style="'gap:' + theme_style.spacing">
+                        <view v-for="(item, index) in data_list" :key="index" class="item" :style="'background: ' + theme_style.background">
+                            <view class="item-before" :style="'background: ' + theme_style.theme_7_background"></view>
+                            <view class="flex-row flex-1">
+                                <view class="left">
+                                    <view class="price" :style="'color:' + theme_style.price_color">
+                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                        <span class="number">{{ item.discount_value }}</span>
+                                        <span v-if="item.type == '1'" class="symbol">折</span>
+                                    </view>
+                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                </view>
+                                <view class="right">
+                                    <view class="right-before" :style="'border: 2rpx dashed ' + theme_style.theme_7_background"></view>
+                                    <view class="coupon-btn" :class="[0, 3].includes(item.status_type) ? '' : 'btn-already'" :style="'color:' + theme_style.btn_color" :data-value="home_page_url" :data-type="item.status_type" :data-index="index" :data-id="item.id" @tap="receive_event">{{ item.status_operable_name }}</view>
+                                </view>
+                            </view>
+                            <view class="item-after" :style="'background: ' + theme_style.theme_7_background"></view>
+                        </view>
+                    </view>
+                </template>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    const app = getApp();
+    import {
+        common_styles_computer,
+        gradient_computer
+    } from '@/common/js/common/common.js';
+    export default {
+        props: {
+            value: {
+                type: Object,
+                default: () => ({}),
+            },
+        },
+        data() {
+            return {
+                currency_symbol: app.globalData.currency_symbol(),
+                style_container: '',
+                data_list: [],
+                // 主题
+                theme: '0',
+                // 主题样式
+                theme_style: {},
+                // 主题4 标题
+                content_title: '',
+                // 主题4 描述
+                content_desc: '',
+                theme_bg_img: {
+                    url_1: '',
+                    url_2: '',
+                    url_3: '',
+                },
+                // 首页地址
+                home_page_url: app.globalData.data.tabbar_pages[0],
+            };
+        },
+        mounted() {
+            this.init();
+        },
+        methods: {
+            init() {
+                const new_content = this.value.content || {};
+                const new_style = this.value.style || {};
+                const temp_theme = new_content.theme;
+                // 主题
+                const new_background = gradient_computer({
+                    color_list: new_style.background,
+                    direction: new_style.direction
+                }, false);
+                const new_background_inside = gradient_computer({
+                    color_list: new_style.background_inside,
+                    direction: new_style.direction_inside
+                }, false);
+                const new_btn_background = gradient_computer({
+                    color_list: new_style.btn_background,
+                    direction: new_style.btn_direction
+                }, false);
+                this.setData({
+                    content_title: new_content.content_title || '',
+                    content_desc: new_content.content_desc || '',
+                    // 判断是自动还是手动
+                    data_list: new_content.data_type == '0' ? new_content.data_list : new_content.data_auto_list,
+                    theme: temp_theme,
+                    theme_style: {
+                        price_color: new_style.price_color,
+                        name_color: new_style.name_color,
+                        // 判断是否向对象添加desc_color属性
+                        ...(!['1', '5', '6', '7'].includes(temp_theme) && {
+                            desc_color: new_style.desc_color
+                        }),
+                        ...(!['1', '2', '4', '5', '6', '7'].includes(temp_theme) && {
+                            limit_send_count: new_style.limit_send_count
+                        }),
+                        ...(!['5', '6', '7'].includes(temp_theme) && {
+                            btn_background: new_btn_background
+                        }),
+                        btn_color: new_style.btn_color,
+                        ...(!['2'].includes(temp_theme) && {
+                            background: new_background
+                        }),
+                        ...(!['1', '2', '5', '7'].includes(temp_theme) && {
+                            background_inside: new_background_inside
+                        }),
+                        spacing: new_style.spacing + 'px',
+                        ...(!['1', '2', '3', '5', '6', '7'].includes(temp_theme) && {
+                            type_background: new_style.type_background
+                        }),
+                        ...(!['1', '2', '3', '5', '6', '7'].includes(temp_theme) && {
+                            type_color: new_style.type_color
+                        }),
+                        ...(!['1', '2', '3', '5', '6', '7'].includes(temp_theme) && {
+                            content_title_color: new_style.content_title_color
+                        }),
+                        ...(!['1', '2', '3', '5', '6', '7'].includes(temp_theme) && {
+                            content_desc_color: new_style.content_desc_color
+                        }),
+                        ...(['3'].includes(temp_theme) && {
+                            border_style: new_style.background[0].color
+                        }),
+                        ...(['7'].includes(temp_theme) && {
+                            theme_7_background: new_style.common_style.color_list[0].color
+                        }),
+                    },
+                    theme_bg_img: {
+                        url_1: new_content.theme_1_static_img[0].url,
+                        url_2: new_content.theme_2_static_img[0].url,
+                        url_3: new_content.theme_5_static_img[0].url,
+                    },
+                    style_container: common_styles_computer(new_style.common_style),
+                });
+            },
+            // 领取优惠券
+            receive_event(e) {
+                const coupon_status_type = e.currentTarget.dataset.type;
+                const coupon_index = e.currentTarget.dataset.index;
+                const coupon_id = e.currentTarget.dataset.id;
+                switch (coupon_status_type) {
+                    case 0:
+                        // 登录校验
+                        var user = app.globalData.get_user_info(this, 'coupon_receive_event');
+                        if (user != false) {
+                            var temp_list = this.data_list;
+                            if (temp_list[coupon_index]['is_operable'] != 0) {
+                                uni.showLoading({
+                                    title: this.$t('common.processing_in_text'),
+                                });
+                                this.coupon_api(coupon_id, coupon_index);
+                            }
+                        }
+                        break;
+                    case 3:
+                        app.globalData.url_event(e);
+                        break;
+                }
+            },
+            // 全部领取
+            receive_all_event() {
+                const filter_data_list = this.data_list.map((item) => {
+                    if (item.is_operable != 0 && item.status_type == 0) {
+                        return item.id;
+                    }
+                });
+                this.coupon_api(filter_data_list.join(','));
+            },
+            // 优惠劵领取事件
+            coupon_api(val, index) {
+                uni.request({
+                    url: app.globalData.get_request_url('receive', 'coupon', 'coupon'),
+                    method: 'POST',
+                    data: {
+                        coupon_id: val,
+                    },
+                    dataType: 'json',
+                    success: (res) => {
+                        uni.hideLoading();
+                        if (res.data.code == 0) {
+                            app.globalData.showToast(res.data.msg, 'success');
+                            if (index) {
+                                temp_list = res.data.data.coupon || [];
+                            } else {
+                                temp_list[index] = res.data.data.coupon || {};
+                            }
+                            this.setData({
+                                data_list: temp_list,
+                            });
+                        } else {
+                            if (app.globalData.is_login_check(res.data, this, 'coupon_receive_event')) {
+                                app.globalData.showToast(res.data.msg);
+                            }
+                        }
+                    },
+                    fail: () => {
+                        uni.hideLoading();
+                        app.globalData.showToast(this.$t('common.internet_error_tips'));
+                    },
+                });
+            },
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .coupon-theme-1 {
+        display: flex;
+        flex-direction: row;
+
+        .item {
+            flex-basis: auto;
+            flex-shrink: 0;
+            width: 180rpx;
+            height: 180rpx;
+            border-radius: 20rpx;
+            margin-top: 20rpx;
+
+            .name {
+                padding: 10rpx 10rpx 0 10rpx;
+                margin-bottom: 10rpx;
+                font-size: 20rpx;
+                box-sizing: border-box;
+            }
+
+            .price {
+                padding: 10rpx 0 16rpx 0;
+                box-sizing: border-box;
+
+                .symbol {
+                    font-size: 24rpx;
+                    position: relative;
+                    bottom: 6rpx;
+                }
+
+                .number {
+                    font-size: 52rpx;
+                    line-height: 48rpx;
+                    font-weight: 500;
+                    padding: 0 8rpx;
+                    box-sizing: border-box;
+                }
+            }
+
+            .coupon-theme-1-content {
+                width: calc(100% - 20rpx);
+                margin: 0 10rpx;
+                background-size: 100% 100%;
+                position: relative;
+                top: -20rpx;
+            }
+
+            .coupon-btn {
+                margin: 0 auto;
+                width: 142rpx;
+                height: 35.112rpx;
+                line-height: 35.112rpx;
+                text-align: center;
+                font-size: 18rpx;
+                border-radius: 46rpx;
+                position: relative;
+                top: -4rpx;
+            }
+        }
+    }
+
+    .coupon-theme-2 {
+        display: flex;
+        flex-direction: row;
+
+        .item {
+            flex-basis: auto;
+            flex-shrink: 0;
+            background-size: 100% 100%;
+            width: 170rpx;
+            height: 200rpx;
+            padding: 10rpx;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .price {
+                padding: 6rpx 0;
+                box-sizing: border-box;
+
+                .symbol {
+                    font-size: 16rpx;
+                }
+
+                .number {
+                    font-size: 52rpx;
+                    font-weight: 500;
+                    padding: 0 8rpx;
+                    box-sizing: border-box;
+                }
+            }
+
+            .name {
+                font-size: 16rpx;
+                font-weight: 500;
+                margin-bottom: 8rpx;
+            }
+
+            .desc {
+                font-size: 16rpx;
+            }
+
+            .coupon-btn {
+                margin: 0 auto;
+                width: 110rpx;
+                height: 32rpx;
+                line-height: 32rpx;
+                text-align: center;
+                font-size: 18rpx;
+                border-radius: 46rpx;
+                margin-top: 10rpx;
+                margin-bottom: 4rpx;
+            }
+        }
+    }
+
+    .coupon-theme-3 {
+        display: flex;
+
+        .item {
+            overflow: hidden;
+            height: 176rpx;
+            border-radius: 32rpx;
+            flex-basis: auto;
+            flex-shrink: 0;
+            width: 100%;
+            padding: 16rpx;
+            box-sizing: border-box;
+            display: flex;
+
+            .left {
+                flex: 1;
+                width: 0;
+                border-radius: 16rpx;
+                padding: 12rpx 24rpx 6rpx 24rpx;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+
+                .price-before {
+                    height: calc(100% + 120rpx);
+                    display: flex;
+                    align-items: center;
+                }
+
+                .price {
+                    text-align: center;
+                    width: 200rpx;
+                    position: relative;
+                    display: flex;
+                    align-items: flex-start;
+
+                    .symbol {
+                        font-size: 36rpx;
+                        font-weight: 600;
+                    }
+
+                    .number {
+                        font-size: 64rpx;
+                        font-weight: 600;
+                        padding: 0 8rpx;
+                        box-sizing: border-box;
+                        line-height: 60rpx;
+                    }
+                }
+
+                .text {
+                    flex: 1;
+                    width: 0;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    text-align: center;
+                    box-sizing: border-box;
+
+                    .name {
+                        font-size: 36rpx;
+                        font-weight: 500;
+                        line-height: 50rpx;
+                    }
+
+                    .desc {
+                        font-size: 28rpx;
+                        font-weight: 500;
+                        line-height: 40rpx;
+                    }
+
+                    .limit {
+                        font-size: 24rpx;
+                    }
+                }
+            }
+
+            .right {
+                width: 172rpx;
+                position: relative;
+                padding: 0 36rpx;
+                box-sizing: border-box;
+                text-align: center;
+                display: flex;
+                align-items: center;
+
+                &.long-name {}
+
+                &.short-name {
+                    height: 132rpx;
+                    justify-content: center;
+                    padding: 0 10rpx;
+
+                    .coupon-btn {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 6rpx;
+                        width: 100%;
+                    }
+                }
+
+                .right-before {
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    width: 200%;
+                    height: 200%;
+                    left: -32rpx;
+                    border-radius: 100%;
+                }
+
+                .coupon-btn {
+                    position: relative;
+                    font-size: 36rpx;
+                    text-align: center;
+
+                    .text {
+                        height: 100rpx;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+
+                    .icon {
+                        font-size: 40rpx;
+                        line-height: 32rpx;
+                    }
+                }
+            }
+        }
+    }
+
+    .coupon-theme-4 {
+        overflow: hidden;
+        border-radius: 32rpx;
+        padding: 16rpx;
+        box-sizing: border-box;
+        display: flex;
+
+        .left {
+            width: 428rpx;
+            display: flex;
+            flex-direction: row;
+
+            .item {
+                overflow: hidden;
+                flex-basis: auto;
+                flex-shrink: 0;
+                width: 144rpx;
+                height: 144rpx;
+                border-radius: 20rpx;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+                align-items: center;
+                padding: 8rpx;
+                box-sizing: border-box;
+
+                .type {
+                    position: absolute;
+                    top: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    font-size: 20rpx;
+                    line-height: 28rpx;
+
+                    .type-before {
+                        position: absolute;
+                        width: 30rpx;
+                        height: 60rpx;
+                        left: -16rpx;
+                        border-radius: 100%;
+                        top: -32rpx;
+                        z-index: -1;
+                    }
+
+                    .type-after {
+                        position: absolute;
+                        width: 30rpx;
+                        height: 60rpx;
+                        right: -16rpx;
+                        border-radius: 100%;
+                        top: -32rpx;
+                        z-index: -1;
+                    }
+                }
+
+                .price {
+                    text-align: center;
+                    position: relative;
+                    display: flex;
+                    align-items: flex-end;
+
+                    .symbol {
+                        font-size: 24rpx;
+                    }
+
+                    .number {
+                        font-size: 48rpx;
+                        line-height: 48rpx;
+                        font-weight: 600;
+                        padding-left: 8rpx;
+                        box-sizing: border-box;
+                    }
+                }
+
+                .name {
+                    font-size: 22rpx;
+                    line-height: 32rpx;
+                }
+            }
+        }
+
+        .right {
+            flex: 1;
+            width: 0;
+            position: relative;
+
+            .right-before {
+                width: 360rpx;
+                height: 360rpx;
+                position: absolute;
+                left: -14rpx;
+                top: 50%;
+                transform: translateY(-50%);
+                border-radius: 100%;
+            }
+
+            .title {
+                font-size: 32rpx;
+                font-weight: 500;
+                line-height: 44rpx;
+            }
+
+            .desc {
+                margin-top: 6rpx;
+                font-size: 24rpx;
+                line-height: 34rpx;
+            }
+
+            .coupon-btn {
+                width: 144rpx;
+                height: 44rpx;
+                font-size: 24rpx;
+                line-height: 44rpx;
+                text-align: center;
+                border-radius: 24rpx;
+                margin-top: 12rpx;
+            }
+        }
+    }
+
+    .coupon-theme-5 {
+        display: flex;
+        flex-direction: row;
+
+        .item {
+            flex-basis: auto;
+            flex-shrink: 0;
+            border-radius: 12rpx;
+            width: 252rpx;
+            height: 128rpx;
+            position: relative;
+
+            .left {
+                position: absolute;
+                left: 0;
+                width: 200rpx;
+                height: 100%;
+                padding: 12rpx;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                z-index: 1;
+
+                .price {
+                    text-align: center;
+                    position: relative;
+                    display: flex;
+                    align-items: flex-end;
+                    margin-bottom: 10rpx;
+
+                    .symbol {
+                        font-size: 24rpx;
+                        font-weight: 500;
+                    }
+
+                    .number {
+                        font-size: 48rpx;
+                        font-weight: 500;
+                        line-height: 40rpx;
+                        padding-left: 8rpx;
+                        box-sizing: border-box;
+                    }
+                }
+
+                .name {
+                    font-size: 24rpx;
+                }
+            }
+
+            .right {
+                width: 92rpx;
+                padding-left: 40rpx;
+                box-sizing: border-box;
+                border-radius: 12rpx;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                height: 100%;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .coupon-btn {
+                    position: relative;
+                    font-size: 24rpx;
+                    font-weight: 500;
+                    text-align: center;
+                    letter-spacing: 4rpx;
+                }
+            }
+        }
+    }
+
+    .coupon-theme-6 {
+        display: flex;
+
+        .item {
+            flex-basis: auto;
+            flex-shrink: 0;
+            border-radius: 24rpx;
+            padding: 12rpx;
+            width: 280rpx;
+            height: 200rpx;
+            position: relative;
+            box-sizing: border-box;
+
+            .top-before {
+                position: absolute;
+                left: -14rpx;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 28rpx;
+                height: 28rpx;
+                border-radius: 50%;
+                z-index: 2;
+            }
+
+            .top-after {
+                position: absolute;
+                right: -14rpx;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 28rpx;
+                height: 28rpx;
+                border-radius: 50%;
+                z-index: 2;
+            }
+
+            .top {
+                width: 100%;
+                padding: 8rpx;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                z-index: 1;
+                border-radius: 12rpx;
+                position: relative;
+                overflow: hidden;
+                box-sizing: border-box;
+
+                .price {
+                    text-align: center;
+                    position: relative;
+                    display: flex;
+                    align-items: flex-end;
+                    margin-bottom: 2rpx;
+
+                    .symbol {
+                        font-size: 40rpx;
+                        font-weight: 500;
+                    }
+
+                    .number {
+                        font-size: 64rpx;
+                        font-weight: 500;
+                        line-height: 64rpx;
+                        padding-left: 8rpx;
+                        box-sizing: border-box;
+                    }
+                }
+
+                .name {
+                    font-size: 24rpx;
+                }
+            }
+
+            .bottom {
+                margin-top: 12rpx;
+                text-align: center;
+
+                .coupon-btn {
+                    position: relative;
+                    font-size: 32rpx;
+                    line-height: 44rpx;
+                    font-weight: 500;
+                    text-align: center;
+                }
+            }
+        }
+    }
+
+    .coupon-theme-7 {
+        display: flex;
+
+        .item {
+            flex-basis: auto;
+            flex-shrink: 0;
+            border-radius: 8rpx;
+            width: 236rpx;
+            height: 128rpx;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+
+            .item-before {
+                position: absolute;
+                left: 160rpx;
+                top: -12rpx;
+                width: 24rpx;
+                height: 24rpx;
+                border-radius: 50%;
+            }
+
+            .item-after {
+                position: absolute;
+                left: 160rpx;
+                bottom: -12rpx;
+                width: 24rpx;
+                height: 24rpx;
+                border-radius: 50%;
+            }
+
+            .left {
+                width: 172rpx;
+                padding: 8rpx;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                box-sizing: border-box;
+
+                .price {
+                    text-align: center;
+                    position: relative;
+                    display: flex;
+                    align-items: flex-end;
+                    margin-bottom: 10rpx;
+
+                    .symbol {
+                        font-size: 24rpx;
+                        font-weight: 500;
+                    }
+
+                    .number {
+                        font-size: 48rpx;
+                        font-weight: 500;
+                        line-height: 40rpx;
+                        padding-left: 8rpx;
+                        box-sizing: border-box;
+                    }
+                }
+
+                .name {
+                    font-size: 24rpx;
+                }
+            }
+
+            .right {
+                flex: 1;
+                width: 0;
+                padding-left: 14rpx;
+                position: relative;
+                box-sizing: border-box;
+
+                .right-before {
+                    position: absolute;
+                    left: -1rpx;
+                    top: 0;
+                    bottom: 0;
+                    width: 0;
+                    height: 100%;
+                    opacity: 0.61;
+                }
+
+                .coupon-btn {
+                    box-sizing: border-box;
+                    padding: 8rpx;
+                    width: 100%;
+                    font-size: 20rpx;
+                    font-weight: 500;
+                    text-align: center;
+                    letter-spacing: 4rpx;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+        }
+    }
+
+    // 已领取
+    .btn-already {
+        color: #e3ca90 !important;
+    }
+
+    .hide-scrollbar {
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+            width: 0;
+            height: 0;
+            color: transparent;
+        }
+    }
+</style>
\ No newline at end of file