<template>
    <view>
        <c-popup
            :show="isShow"
            :max-height="testType ? '89%' : '85%'"
            :height="height"
            show-close
            close-icon="close-circle"
            @masktap="onClose"
            @close="onClose"
        >   
            <view v-if="testType === 'A' || testType === 'B'" class="">
                <new-comment-popup
                    :commentcontent="responseData"
                    :comment-value="commentValue"
                    :clk-loc="clk_loc"
                    :page="page"
                    @updateComment="updateComment"
                />
            </view>
            <view v-else class="med-comment old">
                <!-- <view class="top"> -->
                <view class="med-comment-top">
                    <image class="expert-img" :src="content.expertAvatar || 'https://zhuanjia.su.bcebos.com/zhuanjia/b1556002148936538624.png'"/>
                    <view v-if="content.expertName" class="font-bold c-font-large">{{ content.expertName }}</view>
                    <!-- 评价信息,只在老评价下生效 -->
                    <view v-if="!testType" class="comment-tip c-gap-top-large c-gap-inner-top">{{ content.tips }}</view>
                    <!-- 医生信息,只在新的两个评价下展示 -->
                    <view v-if="testType" class="expert-comment c-color c-font-normal">
                        <view v-if="content.expertHospital" class="info c-inline c-gap-right">
                            {{ content.expertHospital }}
                        </view>
                        <view v-if="content.expertDepartment" class="info c-inline c-gap-right">
                            {{ content.expertDepartment }}
                        </view>
                        <view v-if="content.expertLevel" class="info c-inline">{{ content.expertLevel }}</view>
                    </view>
                        
                    <view v-if="testType === 'emoji'" class="med-comment-emoji c-gap-bottom-large">
                        <comment-emoji
                            :evaluate-list="content.emojiList"
                            :select="starsNum"
                            :comment-status="!!status"
                            :is-popup-source="true"
                            @onEvaluateTap="onStarChange"
                        />
                    </view>
                    <view v-else class="med-comment-star c-gap-bottom">
                        <c-stars
                            :num="starsNum"
                            :disabled="!!status"
                            :size="24"
                            icon="star-solid"
                            icon-color="#ff6050"
                            :empty-icon="testType ? 'star-solid' : 'star'"
                            :empty-icon-color="testType ? '#eee' : '#ff6050'"
                            text-color="#ff6050"
                            :show-text="false"
                            @change="onStarChange"
                        />
                    </view>
                    <view
                        v-if="starsNum && testType !== 'emoji'"
                        class="c-gap-bottom-large c-font-normal"
                        :class="testType ? 'comment-red' : ''"
                    >{{ star[starsNum].txt }}</view>
                    <!-- 只在老评价下生效 -->
                    <view v-if="starsNum === 0 && !testType" class="c-gap-top-large c-gap-bottom-large">
                        {{ content.emptyTip }}
                    </view>
                </view>
                <view
                    v-if="tags && tags.length > 0"
                    class="c-font-normal"
                    :class="testType ? 'comment-tags-wrapper' : 'comment-tags-wrapper-old'"
                >
                    <view
                        v-for="(item, index) in tags"
                        :key="index"
                        class="comment-tag"
                        :class="{'comment-tag-gray': commentGray, 'comment-tag-select': item.selected}"
                        @tap="onTagTap(index)"
                    >
                        {{ item.txt }}
                    </view>
                </view>
                <!-- 文本框 -->
                <view v-if="(content.inputTips || text) && !testType" class="comment-textarea-cont">
                    <textarea
                        class="comment-textarea c-font-normal"
                        :value="text"
                        :disabled="!!status"
                        :maxlength="200"
                        cursor="-1"
                        :placeholder="content.inputTips" 
                        placeholder-class="comment-textarea-ph" 
                        selection-start="-1"
                        selection-end="-1"
                        :show-confirm-bar="false"
                        :adjust-position="true"
                        @input="onTextChange"
                    ></textarea>
                </view>
                <!-- 匿名评价 -->
                <view 
                    v-if="(starsNum === 0 || !starsNum) && content.coupon > 0 && testType" 
                    class="comment-tip c-color-gray c-font-normal c-tac"
                >
                    每日首次评价可获得<text class="comment-red">{{ content.coupon }}张</text>
                    3元问医生咨询券
                    <text class="label c-gap-left c-font-tiny comment-red">匿名</text>
                </view>
                <!-- </view> -->
                <view v-if="testType" class="comment-btn-placeholder"/>
                <!-- 评价后按钮 -->
                <view
                    v-if="succBtn && succBtn.length"
                    class="swan-security-padding-bottom c-row"
                    :class="testType ? 'comment-btn-cont' : 'comment-btn-cont-old'"
                >
                    <view
                        v-for="(btn, i) in succBtn"
                        :key="i"
                        :class="'c-span' + (12 / succBtn.length)"
                        @tap="onTapBtn(btn)"
                    >
                        <view
                            class="comment-btn c-font-17"
                            :style="{
                                'background': btn.bg,
                            }"
                        >{{ btn.txt }}</view>
                    </view>
                </view>
                <!-- 评价按钮 -->
                <view
                    v-else-if="!status && ((content.submitBtnUrl && starsNum > 0) || !testType)"
                    class="swan-security-padding-bottom"
                    :class="testType ? 'comment-btn-cont' : 'comment-btn-cont-old'"
                >
                    <view
                        v-if="tagsCount === 0 && testType === 'emoji' && starsNum < 5"
                        class="comment-btn c-font-17 comment-btn-gray"
                    >
                        {{ testType ? '匿名评价' : content.submitBtnTxt }}
                    </view>
                    <view
                        v-else-if="tagsCount === 0 && testType === 'stars' && starsNum <= 3"
                        class="comment-btn c-font-17 comment-btn-gray"
                    >
                        {{ testType ? '匿名评价' : content.submitBtnTxt }}
                    </view>
                    <view
                        v-else
                        class="comment-btn c-font-17"
                        @tap.stop="onSubmit"
                    >{{ testType ? '匿名评价' : content.submitBtnTxt }}</view>
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 评价弹层
 * @author haoyan
 * @categories 问诊评价组件
 * @tags [component]
 */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CStars from '@baidu/med-ui/components/Stars/Stars';
import CommentEmoji from './comment-emoji';
import NewCommentPopup from './new-comment-popup';

import {request} from '../../utils/request';
import {navigate} from '../../utils/navigate';
import {send} from '../../utils/log';
import * as core from '../../utils/core';

export default {
    config: {
        component: true
    },
    components: {
        CPopup,
        CStars,
        CommentEmoji,
        NewCommentPopup
    },
    props: {
        /**
         * 评价请求地址
         */
        callback: {
            type: String,
            default: ''
        },
        /**
         * 评分
         */
        commentValue: {
            type: Number,
            default: 0
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            content: {},
            isShow: false,
            starsNum: 0,
            star: {},
            status: 0,
            tags: [],
            text: '',
            xtext: '', // trick：解决ios小程序中，textarea input事件中set val，循环调用的问题
            succBtn: [],
            testType: '', // 当前评价实验标记 ''为原先线上效果、stars为新星星实验、emoji为表情实验
            commentGray: false, // 评价成功后未选中标签置灰
            submitClickTime: 0, // 提交按钮防抖
            responseData: {}, // 优化对比的数据
            height: '',
            clk_loc: '' // 来源
        };
    },
    lifetimes: {
        attached() {
            this.$api.showLoading({title: '加载中...'});
            this.getData().then(() => {
                this.isShow = true;
                this.$api.hideLoading();
                send({
                    type: 'b',
                    action: 'show_comment',
                    extra: {
                        qid: this.content.questionID
                    }
                });
                let clk_loc = core.getQueryObject(this.callback)['clk_loc'];
                if (clk_loc) {
                    this.clk_loc = clk_loc;
                    send({
                        type: 'b',
                        action: clk_loc,
                        extra: {
                            qid: this.content.questionID
                        }
                    });
                };
            });
        }
    },
    computed: {
        tagsCount() {
            return this.tags.reduce((pre, item) => {
                if (item.selected) {
                    pre++;
                }
                return pre;
            }, 0);
        }
    },
    methods: {
        getData() {
            return new Promise((resolve, reject) => {
                request({
                    url: this.callback
                }).then(res => {
                    this.testType = res.data.exp;
                    this.responseData = res;
                    // 兼容height 的 高度
                    if (this.testType === 'A' || this.testType=== 'B') {
                        if (!res.data.comment) {
                            this.height = '85%';
                        } else {
                            if (res.data.coupon && res.data.coupon.length>1) {
                                this.height = '80%';
                            } else {
                                this.height = '60%';
                            }
                        }
                    } else {
                        if (this.testType) {
                            this.height = '89%';
                        } else {
                            this.height = '85%';
                        }
                    }
                    this.status = res.data.comment;
                    this.text = res.data.content || '';
                    this.star = res.data.star;
                    if (this.status || this.commentValue) {
                        let starsNum = res.data.score || this.commentValue;
                        this.starsNum = starsNum;
                        this.tags = this.star[starsNum].tag;
                    }
                    this.succBtn = res.data.dialog && res.data.dialog.btn ? res.data.dialog.btn : null;
                    this.content = {
                        expertName: res.data.expertName,
                        expertUrl: res.data.expertUrl,
                        expertAvatar: res.data.expertAvatar,
                        expertDepartment: res.data.expertDepartment,
                        expertHospital: res.data.expertHospital,
                        expertLevel: res.data.expertLevel,
                        coupon: res.data.coupon,
                        title: res.data.title,
                        tips: res.data.tips,
                        inputTips: res.data.inputTips,
                        emptyTip: res.data.emptyTip,
                        submitBtnTxt: res.data.submitBtnTxt,
                        submitBtnUrl: res.data.submitBtnUrl,
                        rsID: res.data.rsID,
                        expertID: res.data.expertID,
                        questionID: res.data.questionID,
                        emojiList: res.data.emojiList
                    };

                    // 存储实验标记
                    this.testType = res.data.exp;
                    
                    this.$mpUpdated(() => {
                        resolve();
                    });
                }).catch(() => {
                    resolve();
                });
            });
        },
        // 关闭弹层
        onClose() {
            // this.$emit('updateComment', 5);
            this.isShow = false;

            /**
             * 关闭弹层
             */
            this.$emit('close');
        },
        // 选择星星
        onStarChange(e) {
            if (this.status) {
                return;
            }

            this.starsNum = e.current;
            this.tags = this.star[this.starsNum].tag;
        },
        // 点击评价标签
        onTagTap(index) {
            if (this.status) {
                return;
            }
            let tag = this.tags[index];
            // 实验二（表情评价选中多个之后，至少保留一个）
            if (this.tagsCount > 1 || this.testType !== 'emoji') {
                tag.selected = !tag.selected;
            } else {
                tag.selected = true;
            }
            this.tags.splice(
                index, 1,
                JSON.parse(JSON.stringify(this.tags[index]))
            );

            let tags = [];
            this.tags.map(item => {
                if (item.selected) {
                    tags.push(item.no);
                }
            });
        },
        // 输入评价文字
        onTextChange(e) {
            this.xtext = e.detail.value;
        },
        // 点击评价后按钮
        onTapBtn(btn) {
            // 跳转
            if (btn.type === 'url') {
                navigate({
                    url: btn.msUrl
                });
            }
            else if (btn.type === 'back') {
                this.isShow = false;
            }
        },
        // 提交评价
        onSubmit() {
            // 防抖处理，避免多次点击
            let time = Date.now();
            if (time - this.submitClickTime < 1000) {
                return;
            }
            this.submitClickTime = time;

            if (this.xtext.length > 200 && !this.testType) {
                this.$api.showToast({
                    icon: 'none',
                    duration: 1000,
                    title: '输入评价应小于200字'
                });
                return;
            }
            if (this.starsNum === 0) {
                this.$api.showToast({
                    icon: 'none',
                    duration: 1000,
                    title: '请您评分后提交'
                });
                return;
            }

            let tags = [];
            this.tags.map(item => {
                if (item.selected) {
                    tags.push(item.no);
                }
            });
            if (this.clk_loc) {
                send({
                    type: 'b',
                    action: this.clk_loc,
                    extra: {
                        qid: this.content.questionID
                    }
                });
            }
            request({
                url: this.content.submitBtnUrl,
                data: {
                    star: this.starsNum,
                    tag: tags.join(','),
                    comment: this.xtext,
                    question_id: this.content.questionID,
                    expert_id: this.content.expertID,
                    rs_id: this.content.rsID
                },
                method: 'POST',
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                isNeedLogin: true
            }).then(res => {
                // 更新消息内容
                if (this.testType) {
                    /**
                     * 更新评价消息
                     */
                    this.$emit('updateComment', this.starsNum);
                }

                // 删除没有选中的tag
                let tempTags = this.tags.slice();
                this.tags = tempTags.filter(item => {
                    if (item.selected) {
                        delete item.selected;
                        return true;
                    }
                });

                const {
                    strToast,
                    dialog
                } = res.data;

                // toast
                this.$api.showToast({
                    title: strToast,
                    icon: 'none'
                });

                // 按钮
                this.succBtn = dialog.btn;

                this.status = 1;
                // 文本域禁用后文字消失，在此处回显
                if (!this.testType) {
                    this.text = this.xtext;
                }
            });
        },
        // 新版评价更新星
        updateComment (updateObj) {
            // 修改高度
            this.height = updateObj.height;
            this.$emit('updateComment', updateObj.starsNum);
        },
        modifyCommentBtn () {
            this.status = 0;
        }
    }
};
</script>

<style lang="less" scoped>
.med-comment {
    position: relative;
    min-height: calc(74vh - 38px);
    box-sizing: border-box;
    padding: .1rem .1rem .08rem;
    &.old {
        padding: .1rem .25rem .08rem;
    }
    &-top {
        text-align: center;
        .expert-img {
            width: 86px;
            height: 86px;
            border-radius: 100%;
        }
    }
    &-tag {
        min-height: 40px;
    }
    &-star {
        margin-top: 20px;
        display:flex;
        justify-content: center;
    }
    &-emoji {
        margin-top: 25px;
    }
    .comment-red {
        color: #ff6050;
    }
    .comment-tip {
        .label {
            border: 1px solid #ff6050;
            border-radius: 8px;
            padding: 0 5px;
        }
    }
    .comment-textarea-cont {
        margin-top: .1rem;
        border-radius: 5px;
        border: 1px solid #eee;
        padding: .1rem;
    }
    .comment-textarea {
        width: 100%;
        height: 100px;
        font-size: 14px;
        color: #333;
        resize:none;
        border: none;
        outline-offset: none;
        outline:none;
        background-color: #fff;
        &:focus {
            outline-offset: none;
            outline: none;
        }
        &-ph {
            color: #999;
            font: 14px/24px Arial, Helvetica, sans-serif;
        }
    }
    .comment-btn {
        border-radius: 22px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        background-image: linear-gradient(-134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
    }
    .comment-btn-gray {
        background-image: linear-gradient(-134deg, rgba(93, 203, 165, .6) 0%, rgba(94, 209, 231, .6) 100%);
        // opacity: .6;
    }
    .comment-btn-placeholder {
        height: 44px;
        padding-top: 10px;
    }
    /* 原先线上效果 */
    .comment-btn-cont-old {
        // position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px 0 18px 0;
        background: #fff;
    }
    /* 新实验样式 */
    .comment-btn-cont {
        padding: 8px;
        position: fixed;
        bottom: 0;
        left: 17px;
        right: 17px;
        background: #fff;
        z-index: 20;
    }
    .comment-btn-blank {
        height: .7rem;
    }
    /* 原先线上样式 */
    .comment-tags-wrapper-old {
        width: 100%;
        margin: 25px -8px 0 0;
        .comment-tag {
            display: inline-block;
            color: #333;
            line-height: 14px;
            padding: 8px 10px;
            margin: 0 8px 10px 0;
            border: 1px solid #eee;
            border-radius: 5px;
        }
        .comment-tag-select {
            position: relative;
            color: #00c8c8;
            border: 1px solid #00c8c8;
            &::after {
                content: '✓';
                position: absolute;
                right: 0;
                bottom: 0;
                font-size: 10px;
                width: 0;
                height: 0;
                color: #fff;
                border: 8px solid #00c8c8;
                border-top-color: transparent;
                border-left-color: transparent;
                line-height: 6px;
            }
        }
    }
    /* 新实验样式 */
    .comment-tags-wrapper {
        width: 100%;
        margin: 25px 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .comment-tag {
            display: inline-block;
            color: #333;
            min-width: calc(50% - 5px);
            text-align: center;
            line-height: 14px;
            padding: 9px 10px;
            margin-bottom: 10px;
            border: 1px solid #eee;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .comment-tag-gray {
            color: #bbb;
        }
        .comment-tag-select {
            position: relative;
            color: #ff6050;
            border: 1px solid #ff6050;
            &::after {
                content: '✓';
                position: absolute;
                right: 0;
                bottom: 0;
                font-size: 10px;
                width: 0;
                height: 0;
                color: #fff;
                border: 8px solid #ff6050;
                border-top-color: transparent;
                border-left-color: transparent;
                line-height: 6px;
            }
        }
    }
}
.comment-version-A {
    padding-bottom: 0.93rem;
    .head-top {
        display: flex;
        align-items: center;
        margin-bottom: 36px;
        .avatar-view {
            height: 60px;
            position: relative;
            margin-right: 10px;
        }
        .avatar-sign {
            width: 44px;
            height: 16px;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translate(-50%,0);
        }
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .doctor-name {
            font-size: 19px;
            color: #333333;
            line-height: 19px;
            font-weight: 500;
            margin-bottom: 9px;
        }
        .professional-title {
            font-size: 15px;
            line-height: 15px;
            color: #555555;
        }
    }
    .stars {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        line-height: 18px;
        color: #333333;
        font-weight: 500;
    }
    .complaint {
        font-size: 14px;
        line-height: 14px;
        color: #333333;
        margin-top: 20px;
        .c-complaint {
            color: #00C8C8;
        }
    }
    .tags-A {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 30px;
        .comment-tag {
            text-align: center;
            width: 121px;
            height: 32px;
            line-height: 32px;
            box-sizing: border-box;
            border: 1px solid #E5E5E5;
            border-radius: 19px;
            margin-bottom: 10px;
        }
        .comment-tag-select {
            color: #00C8C8;
            background: rgba(0,200,200,0.08);
            border: 1px solid #00C8C8;
        }
    }
    .tags-A::after {
        content: "";
        width: 121px;
    }
    .comment-textarea-cont {
        margin-top: 20px;
    }
    .comment-textarea-cont-title {
        font-size: 18px;
        color: #333333;
        line-height: 18px;
        font-weight: 500;
        margin-bottom: 15px;
    }
    .comment-textarea {
        width: 100%;
        border-radius: 8px;
        padding: 12px 14px;
        background: #F5F5F5;
        height: 100px;
        font-size: 14px;
        color: #1F1F1F;
        resize:none;
        border: none;
        outline-offset: none;
        outline:none;
        background: #F5F5F5;
        box-sizing: border-box;
        &:focus {
            outline-offset: none;
            outline: none;
        }
        &-ph {
            color: #999;
            font: 14px/24px Arial, Helvetica, sans-serif;
        }
    }
    .bottom-btn {
        position: fixed;
        bottom: 15px;
        left: 17px;
        right: 17px;
        z-index: 20;
    }
    .tips {
        text-align: center;
        font-size: 14px;
        margin-bottom: 20px;
        color: #999999;
        line-height: 14px;
    }
    .comment-btn-cont {
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }
    .comment-btn {
        background-image: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
        border-radius: 66px;
    }
}
.comment-version-B {
    padding-bottom: 1rem;
    .head-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        .head-top-avatar {
            height: 60px;
            margin-bottom: 10px;
            position: relative;
        }
        .avatar-sign {
            width: 44px;
            height: 16px;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translate(-50%,0);
        }
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .doctor-name {
            font-size: 19px;
            color: #333333;
            line-height: 19px;
            font-weight: 500;
            margin-bottom: 10px;
        }
        .professional-title {
            font-size: 15px;
            color: #555555;
            line-height: 15px;
        }
    }
    .stars-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 15px auto 0;
        .complaint {
            font-size: 14px;
            line-height: 14px;
            color: #333333;
            margin-top: 15px;
            .c-complaint {
                color: #00C8C8;
            }
        }
        .tags-B {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            text-align: justify;
            margin-top: 30px;
            .comment-tag {
                color: #555555;
                text-align: center;
                width: 140px;
                height: 32px;
                line-height: 32px;
                box-sizing: border-box;
                border: 1px solid #E5E5E5;
                border-radius: 19px;
                margin-bottom: 10px;
                margin-right: 8px;
            }
            .comment-tag-select {
                color: #00C8C8;
                background: rgba(0,200,200,0.08);
                border: 1px solid #00C8C8;
            }
        }
        .tags-B::after {
            content: "";
            width: 140px;
        }
    }
    .comment-textarea-cont {
        margin-top: 20px;
        padding: 0 10px;
    }
    .comment-textarea-cont-title {
        font-size: 18px;
        color: #333333;
        line-height: 18px;
        font-weight: 500;
        margin-bottom: 18px;
    }
    .comment-textarea {
        width: 100%;
        border-radius: 8px;
        padding: 15px;
        background: #F5F5F5;
        height: 100px;
        font-size: 14px;
        color: #999999;
        resize:none;
        border: none;
        outline-offset: none;
        outline:none;
        box-sizing: border-box;
        &:focus {
            outline-offset: none;
            outline: none;
        }
        &-ph {
            color: #999;
            font: 14px/24px Arial, Helvetica, sans-serif;
        }
    }
    .bottom-btn {
        position: fixed;
        bottom: 15px;
        left: 17px;
        right: 17px;
        z-index: 20;
    }
    .tips {
        text-align: center;
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 15px;
        color: #555555;
    }
    .comment-btn-cont {
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }
    .comment-btn {
        background-image: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
        border-radius: 66px;
    }
}
.comment-success {
    padding-bottom: .59rem;
    .comment-success-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #F5F5F5;
        padding-bottom: 20px;
        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 18px;
            color: #333333;
            margin-bottom: 10px;
            .success-icon {
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }
        }
    }
    .stars {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .description {
        text-align: center;
        font-size: 14px;
        line-height: 14px;
        color: #999999;
        margin-top: 8px;
    }
    .modify-comment {
        width: 90px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: #FFFFFF;
        border: 1px solid #E5E5E5;
        border-radius: 19px;
        font-size: 14px;
        color: #1F1F1F;
        margin-top: 15px;
    }
    .coupons {
        padding-top: 30px;
    }
    .coupons-list {
        margin-bottom: 24px;
        .coupons-title {
            font-size: 15px;
            line-height: 15px;
            color: #333333;
            font-weight: 500;
            margin-bottom: 15px;
        }
        .coupons-content {
            position: relative;
        }
        .coupons-btn {
            padding: 7px 14px;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translate(0,-50%);
            background: #FD503E;
            border-radius: 19px;
            font-size: 14px;
            line-height: 14px;
            color: #fff;
            font-weight: 500;
        }
        .coupons-image {
            width: 100%;
            height: 24vw;
        }
    }
    .bottom-button {
        position: fixed;
        bottom: 15px;
        left: 17px;
        right: 17px;
        z-index: 20;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        background-image: linear-gradient(134deg, #FFA500 0%, #FFBC10 55%, #FFD36C 100%);
        border-radius: 22px;
    }
}
</style>
