<template>
    <app-layout>
        <view v-if="!bargain" class="u-goods-detail"></view>
        <template v-if="bargain">
            <app-goods-banner :pic-list="bargain.pic_url" :share="bargain.share"
                              :goods_id="bargain.goods_id"
                              sign="bargain"
                              :video-url="bargain.video_url"></app-goods-banner>
            <view v-if="begin_list || end_list" class="main-center cross-center time-bg">
                <app-plugin-time-bar
                    :theme="getTheme"
                    :day="begin_list ? begin_list.d : end_list.d"
                    :hour="begin_list ? begin_list.h : end_list.h"
                    :minute="begin_list ? begin_list.m : end_list.m"
                    :second="begin_list ? begin_list.s : end_list.s"
                    :start_begin="begin_list ? '距活动开始' : '距活动结束'"
                >
                </app-plugin-time-bar>
            </view>
            <view class="goods" v-if="bargain">
                <view class="t-omit-three name">{{bargain.name}}</view>
                <view v-if="bargain.subtitle" class="goods-subtitle">
                    <view class="t-omit-three">{{bargain.subtitle}}</view>
                </view>
                <view class="dir-left-nowrap cross-center">
                    <view class="detail box-grow-1 dir-top-nowrap">
                        <view class="box-grow-0 dir-left-nowrap cross-bottom end">
                            <view>最低</view>
                            <view :class="getTheme + '-m-text ' + getTheme">￥</view>
                            <view class="price" :class="getTheme + '-m-text ' + getTheme">{{bargain.min_price}}</view>
                            <view class="del" v-if="isUnderlinePirce == 1">原价{{bargain.price}}</view>
                        </view>
                        <view class="box-grow-0 num dir-left-nowrap">
                            <view>库存:{{bargain.stock}}{{bargain.unit}}</view>
                            <view>已有{{bargain.join_num}}人参与砍价</view>
                        </view>
                    </view>
                    <view @click="shareClick" class="share box-grow-0 cross-center dir-top-nowrap">
                        <icon class="icon"></icon>
                        <view class="share">分享</view>
                    </view>
                    <view>
                        <app-share-qr-code :url="poster + `&goods_id=` + goods_id"
                                           v-model="shareShow"
                                           :has-poster-nav="true"
                                           :poster-config="poster_config + `&goods_id=` + goods_id"
                                           :poster-generate="poster_generate + `&goods_id=` + goods_id"
                        ></app-share-qr-code>
                    </view>
                </view>
            </view>
            <view class="attr-box">
                <view class="attr dir-left-nowrap">
                    <view class="box-grow-0 left cross-center dir-top-nowrap">
                        <view>商品信息</view>
                    </view>
                    <view class="box-grow-1 right dir-left-wrap">
                        <view class="attr-item" v-for="(item, index) in bargain.select_attr_group" :key="index">
                            {{item.attr_group_name + ':' + item.attr_name}}
                        </view>
                    </view>
                </view>
            </view>
            <bd-coupon @change="setCoupon" :theme="themeObject" :coupons="bargain.goods_coupon_center"></bd-coupon>
            <bd-xbc
                :guarantee-title="bargain.guarantee_title"
                :guarantee-pic="bargain.guarantee_pic"
                :param_content="bargain.param_content"
                :param_name="bargain.param_name"
                :services="bargain.service"
            ></bd-xbc>
            <bd-hc
                :integral="bargain.goods_marketing_award.integral"
                :coupon="bargain.goods_marketing_award.coupon"
                :card="bargain.goods_marketing_award.card"
                :balance="bargain.goods_marketing_award.balance"
                :theme="themeObject"
            ></bd-hc>
            <bd-kb
                :limit="bargain.goods_marketing.limit"
                :express="bargain.express"
                :shipping="bargain.goods_marketing.shipping"
                :pickup="bargain.goods_marketing.pickup"
            ></bd-kb>
            <view class="activity goods-margin" v-if="bargain.bargain_info">
                <view class="dir-left-nowrap cross-center">
                    <image class="box-grow-0 user-img" :src="userInfo.avatar" load-lazy></image>
                    <view class="dir-top-nowrap">
                        <view class="dir-left-nowrap">
                            <view>距本次砍价结束仅剩</view>
                            <view class="yellow">
                                <block v-if="finish_list">
                                    {{finish_list.d}}天{{finish_list.h}}：{{finish_list.m}}：{{finish_list.s}}
                                </block>
                                <block v-else>0天0：0：0</block>
                            </view>
                        </view>

                        <view v-if="bargain.bargain_info.now_price == bargain.bargain_info.min_price"
                              class="yellow">已砍至最低价，赶快优惠购买吧！
                        </view>
                        <view class="yellow" v-else>快让你的好友助你一臂之力！</view>
                    </view>
                </view>
                <view class="main-center">
                    <view class="current">当前价￥{{bargain.bargain_info.now_price}}</view>
                </view>
                <view class='progress-box'>
                    <view class='progress-view' :style="{width:bargain.bargain_info.bargain_price_per+'%'}"></view>
                </view>
                <view class='dir-left-nowrap price'>
                    <view class='box-grow-1'>原价￥{{bargain.bargain_info.price}}</view>
                    <view class='box-grow-0'>底价￥{{bargain.bargain_info.min_price}}</view>
                </view>
                <view class='info'>
                    <scroll-view class="user-scroll" scroll-y :scroll-into-view="'user-'+user_index"
                                 scroll-with-animation="true">
                        <block v-for="(v,k) in bargain.bargain_info.list" :key="k">
                            <view class="item dir-left-nowrap cross-center">
                                <image class='box-grow-0' :src="v.avatar" load-lazy></image>
                                <view class="box-grow-1 dir-left-nowrap cross-center">
                                    <view class="nickname">{{v.nickname}}</view>
                                    <view> 小刀一挥帮忙砍了</view>
                                    <view class="red">{{v.price}}</view>
                                    <view>元</view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                </view>
            </view>
            <view class="circuit-label goods-margin dir-left-nowrap cross-center">
                <icon class="icon-circuit"></icon>
                <view>砍价流程</view>
            </view>
            <view class="circuit-value dir-left-nowrap main-center">
                <block v-for="(v,k) in circuit" :key="k">
                    <view class="cross-center dir-top-nowrap">
                        <image :src="v.url" :class="v.name ? 'icon-circuit-i' : 'icon-circuit-j'"></image>
                        <view class="box-grow-0 name">{{v.name}}</view>
                    </view>
                </block>
            </view>
            <view class="circuit-label goods-margin dir-left-nowrap cross-center">
                <icon class="icon-circuit"></icon>
                <view>活动说明</view>
            </view>
            <view class="activity-time">
                <view>本活动开始时间{{bargain.begin_time}}</view>
                <view>本活动结束时间{{bargain.end_time}}</view>
            </view>
            <view class="circuit-label goods-margin dir-left-nowrap cross-center">
                <icon class="icon-circuit"></icon>
                <view>商品详情</view>
            </view>
            <view class="bd-detail">
                <app-rich-text :content="bargain.detail"></app-rich-text>
            </view>
            <!-- 底部空格 -->
            <view class="safe-area-inset-bottom">
                <view class="u-bottom-height"></view>
            </view>
            <!-- 底部按钮 -->
            <view v-if="is_open" class="safe-area-inset-bottom u-bottom-fixed">
                <view class="bargain-goods-bottom main-center cross-center">
                    <block v-if="bargain.bargain_info">
                        <block v-if="bargain.bargain_info.min_price < bargain.bargain_info.now_price">
                            <view @click="submit" class="btn shop" :class="getTheme === 'a' ? 'default-btn text' : getTheme === 'b' || getTheme === 'f' ?  getTheme + '-s-back text ' + getTheme : getTheme + '-s-back ' + getTheme + '-m-text ' + getTheme">立即购买</view>
                            <view @click="bargainFriend" class="btn friend" :class="getTheme === 'a' ? 'default-friend' : getTheme + '-m-back '+ getTheme + '-s-text ' + getTheme">找人帮砍</view>
                        </block>
                        <view v-else @click="submit" class="btn" style="color: #ffffff;" :class="getTheme === 'a' ? 'default-btn' : getTheme + '-m-back ' + getTheme">立即购买</view>
                    </block>
                    <block v-else>
                        <view v-if="bargain.stock == 0" class="btn" style="background: #CDCDCD;color: #fff;">已售罄</view>
                        <view v-else-if="compareTime === 'no-start'" class="btn" style="background: #CDCDCD;color: #fff;">未开始
                        </view>
                        <view v-else-if="compareTime === 'end'" class="btn" style="background: #CDCDCD;color: #fff;">已结束</view>
                        <view v-else @click="subscribe" class="btn" style="color: #ffffff;"
                              :class="getTheme === 'a' ? 'default-btn' : getTheme + '-m-back ' + getTheme">立即砍价
                        </view>
                    </block>
                </view>
            </view>
        </template>
        <app-close v-if="showClose" :modal="false" @update="getMall"></app-close>
    </app-layout>
</template>

<script>

import {mapGetters, mapState} from 'vuex';
import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation";
import appRichText from "../../../components/basic-component/app-rich/parse.vue";
import appGoodsBanner from "../../../components/page-component/goods/app-goods-banner.vue";
import appService from "../../../components/page-component/goods/app-goods-service.vue";
import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
import appGoodsMarketing from '../../../components/page-component/goods/app-goods-marketing.vue';
import appPluginTimeBar from '../components/app-plugin-time-bar.vue';
import appGoodsCoupon from "../../../components/page-component/goods/app-goods-coupon";
import bdCoupon from '@/components/page-component/goods/bd-coupon.vue';
import bdXbc from '@/components/page-component/goods/bd-xbc.vue';
import bdKb from '@/components/page-component/goods/bd-kb.vue';
import bdHc from '@/components/page-component/goods/bd-hc.vue';
import bdComments from '@/components/page-component/goods/bd-comments.vue';
import appClose from '@/components/basic-component/app-close/app-close.vue';

export default {
    name: "goods",
    components: {
        appQuickNavigation,
        appRichText,
        appGoodsBanner,
        appService,
        appShareQrCode,
        appGoodsMarketing,
        appPluginTimeBar,
        appGoodsCoupon,
        appClose,
        bdCoupon,
        bdXbc,
        bdKb,
        bdHc,
        bdComments
    },
    computed: {
        ...mapState({
            appImg: state => state.mallConfig.plugin.bargain.app_image,
            userInfo: state => state.user.info,
            isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
        }),
        ...mapState('gConfig', {
            iphone: (data) => {
                return data.iphone;
            },
            iphoneHeight: (state) => {
                return state.iphoneHeight;
            },
        }),
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
        ...mapState({
            themeObject: function (state) {
                let theme = state.mallConfig.mall.setting.theme_color;
                return {
                    back: theme + '-m-back ' + theme,
                    backO: theme + '-m-back-o ' + theme,
                    theme: theme,
                    color: theme + '-m-text ' + theme,
                    sBack: theme + '-s-back ' + theme
                }
            }
        }),
        compareTime() {
            if (this.bargain) {
                let {begin_time, end_time} = this.bargain;

                function getStamp(time = '') {
                    if (time) {
                        time = time.trim().substring(0, 19);
                        time = time.replace(/-/g, '/');
                        return new Date(time).getTime();
                    }
                    return new Date().getTime();
                }

                let begin_time_stamp = getStamp(begin_time)
                let end_time_stamp = getStamp(end_time)
                let time_stamp = getStamp();
                if (begin_time_stamp <= time_stamp && time_stamp < end_time_stamp) {
                    return '';
                }
                if (time_stamp >= end_time_stamp) {
                    return 'end';
                }
                if (time_stamp < begin_time_stamp) {
                    return 'no-start';
                }
            }
            return '';
        },
    },

    data() {
        return {
            showClose: false,
            is_open: false,
            timeIntegral: null,
            goods_id: '',
            bargain: null,
            finish_list: null,
            begin_list: null,
            end_list: null,

            shareShow: false,
            title: '砍价',
            page: 1,

            circuit: [{
                name: '点击砍价',
                url: './../image/bargain-click.png',
            }, {
                name: '',
                url: './../image/bargain-jiantou.png',
            }, {
                name: '找人砍价',
                url: './../image/bargain-help.png',
            }, {
                name: '',
                url: './../image/bargain-jiantou.png',
            }, {
                name: '价格合适',
                url: './../image/bargain-price.png',
            }, {
                name: '',
                url: './../image/bargain-jiantou.png',
            }, {
                name: '优惠购买',
                url: './../image/bargain-buy.png'
            }],
            poster: this.$api.bargain.poster,

            poster_config: this.$api.bargain.poster_config,
            poster_generate: this.$api.bargain.poster_generate,
        }
        },
        onLoad(options) {
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
            const self = this;
            this.$store.dispatch('user/info');
            this.goods_id = options.goods_id;

            this.$showLoading();
            this.$request({
                url: this.$api.bargain.goods_detail,
                data: {
                    goods_id: this.goods_id,
                }
            }).then(info => {
                self.$hideLoading();
                if (info.code === 0) {
                    self.bargain = info.data.bargain;
                    //定时器
                    let func = function () {
                        self.begin_list = self.setTimeStart(self.bargain.begin_time);
                        self.end_list = self.setTimeStart(self.bargain.end_time);
                        if (self.bargain.bargain_info) {
                            self.finish_list = self.setTimeStart(self.bargain.bargain_info.finish_at);
                        }
                    };
                    func();
                    self.timeIntegral = setInterval(() => {
                        func();
                    }, 1000);
                } else {
                    uni.showToast({icon: 'none', title: info.msg});
                    uni.navigateBack();
                }
            }).catch(() => {
                self.$hideLoading();
            });
        },

        onShow() {
            this.showClose = false;
            setTimeout(()=>{
                this.showClose = true;
            })
        },

        onUnload() {
            clearInterval(this.timeIntegral);
        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
            return this.$shareAppMessage({
                title: this.bargain.goods.app_share_title ? this.bargain.goods.app_share_title : this.bargain.name,
                path: '/plugins/bargain/goods/goods',
                imageUrl: this.bargain.goods.app_share_pic ? this.bargain.goods.app_share_pic : this.bargain.cover_pic,
                params: {
                    goods_id: this.bargain.goods_id
                }
            });
        },
        // #ifdef MP-WEIXIN
        onShareTimeline() {
            // 分享朋友圈beta
            return this.$shareTimeline({
                title: this.bargain.goods.app_share_title ? this.bargain.goods.app_share_title : this.bargain.name,
                query: {
                    goods_id: this.bargain.goods_id
                } // 此处填写页面的参数
            });
        },
        // #endif
        methods: {
            getMall(e) {
                this.is_open = e.is_open == 1 ? true : false;
            },
            bargainFriend() {
                uni.navigateTo({url: '/plugins/bargain/activity/activity?id=' + this.bargain.bargain_info.bargain_order_id});
            },
            setTimeStart: function (e) {
                let time = e.replace(/-/g, '/');
                let diff_time = parseInt((new Date(time).getTime() - new Date().getTime()) / 1000)
                let day = 0, hour = 0, minute = 0, second = 0;

                if (diff_time > 0) {
                    day = Math.floor(diff_time / (60 * 60 * 24));
                    hour = Math.floor(diff_time / (60 * 60)) - (day * 24);
                    minute = Math.floor(diff_time / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(diff_time) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                } else {
                    return null;
                }
                return {
                    d: day,
                    h: hour < 10 ? ('0' + hour) : hour,
                    m: minute < 10 ? ('0' + minute) : minute,
                    s: second < 10 ? ('0' + second) : second,
                };
            },

            subscribe: function () {
                const self = this;
                this.$subscribe(this.bargain.template_message).then(res => {
                    self.save();
                }).catch(() => {
                    self.save();
                });
            },

            save: function () {
                const self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.bargain.bargain_submit,
                    data: {
                        goods_id: self.bargain.goods_id
                    },
                }).then(info => {
                    self.$hideLoading();
                    if (info.code == 0) {
                        self.bargainResult(info);
                    } else {
                        uni.showToast({icon: 'none', title: info.msg});
                    }
                }).catch(e => {
                    self.$hideLoading();
                });
            },

            bargainResult(data) {
                const self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.bargain.bargain_result,
                    data: {
                        queueId: data.data.queueId,
                        token: data.data.token,
                    },
                }).then(info => {
                    if (info.code === 0) {
                        if (info.data.retry) {
                            setTimeout(() => {
                                self.bargainResult(data);
                            }, 1000);
                            return;
                        }
                        self.$hideLoading();
                        uni.redirectTo({
                            url: '/plugins/bargain/activity/activity?order_id=' + info.data.bargain_order_id,
                        })
                    } else {
                        self.$hideLoading();
                        uni.showToast({icon: 'none', title: info.msg});
                    }
                }).catch(e => {
                    self.$hideLoading();
                });
            },

            submit: function () {
                const bargain = this.bargain;
                const mchList = [{
                    "mch_id": 0,
                    "bargain_order_id": bargain.bargain_info.bargain_order_id,
                    "goods_list": [{
                        "id": bargain.goods_id,
                        "attr": [],
                        "num": 1,
                        "cart_id": 0,
                        "goods_attr_id": bargain.goods_attr_id
                    }]
                }];
                uni.navigateTo({
                    url: '/pages/order-submit/order-submit?mch_list=' +
                        JSON.stringify(mchList) +
                        '&preview_url=' + encodeURIComponent(this.$api.bargain.order_preview) +
                        '&submit_url=' + encodeURIComponent(this.$api.bargain.order_submit)
                });
            },

            shareClick() {
                this.shareShow = true;
            },

            setCoupon(index) {
                this.$set(this.bargain.goods_coupon_center[index], 'is_receive', 1);
            }
        }
    }
</script>

<style scoped lang="scss">
    .time-bg {
        width: 100%;
        height: #{88rpx};
        .icon-time {
            position: relative;
            height: 100%;
            width: #{710rpx};
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        .time-desc {
            position: absolute;
            font-size: #{26rpx};
            left: 0;
            right: 0;
            margin: 0 auto;
            color: #353535;
        }

        .time-box {
            height: #{42rpx};
            color: #fff;
            width: #{46rpx};
            line-height: #{42rpx};
            text-align: center;
            background-color: #666;
            border-radius: #{4rpx};
            margin: 0 #{10rpx};
        }
    }

    .activity {
        font-size: #{28rpx};
        color: #353535;
        padding: #{24rpx};
        background: #FFFFFF;
        width: 702upx;
        border-radius: 15upx 15upx 0 0;
        margin: 24upx 24upx 0 24upx;
        .user-img {
            height: #{96rpx};
            width: #{96rpx};
            display: block;
            margin-right: #{34rpx};
        }

        .yellow {
            color: #ff8c40;
        }

        .current {
            margin-top: #{20rpx};
            font-size: #{38rpx};
            color: #ff4544;
        }

        .progress-box {
            width: 100%;
            height: #{40rpx};
            border-radius: #{20rpx};
            border: #{1px} solid #ff5c5c;
            overflow: hidden;
            margin-top: #{28rpx};
            margin-bottom: #{16rpx};
        }

        .progress-view {
            width: 50%;
            height: 100%;
            border-radius: #{20rpx};
            background-color: #ff9f9f;
        }

        .price {
            font-size: #{26rpx};
            color: #666666;
            padding-bottom: #{20rpx};
        }
    }

    .goods {
        width: 702upx;
        border-radius: 15upx 15upx 0 0;
        margin: 24upx 24upx 0 24upx;
        background: #FFFFFF;
        padding: #{32rpx} #{24rpx} #{40rpx};
        color: #999999;

        .name {
            color: #353535;
            margin-bottom:#{32rpx};
            font-size: #{32rpx};
        }
        .goods-subtitle {
            font-size: 24rpx;
            background-color: #ffffff;
            color: #999999;
            margin-bottom:#{24rpx};
        }

        .detail {
            color: #999999;
            font-size: #{28rpx};

            .end {
                line-height: 1;
            }

            .red {
                color: #ff4544;
            }

            .price {
                font-size: #{46rpx};
            }

            .del {
                margin-left: #{16rpx};
                text-decoration: line-through;
            }

            .num {
                margin-top: #{32rpx};
            }

            .num view:first-child {
                margin-right: #{32rpx};
            }
        }

        .share {
            margin-top: #{24rpx};

            .icon {
                height: #{40rpx};
                width: #{40rpx};
                background-image: url('../../../static/image/icon/icon-share.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            view {
                font-size: #{22rpx};
                color: #999999;
                margin-top: #{10rpx};
            }
        }
    }

    .circuit-label {
        height: #{88rpx};
        color: #ff4544;
        width: 702upx;
        margin: 24upx 24upx 0 24upx;
        font-size: #{32rpx};
        background: #FFFFFF;
        border-bottom: #{1px} solid #e2e2e2;

        .icon-circuit {
            height: #{34}rpx;
            width: #{34rpx};
            background-image: url("./../image/bargain-flow.png");
            background-repeat: no-repeat;
            background-size: 100% auto;
            margin: 0 #{16rpx};
        }
    }

    .user-scroll {
        max-height: #{264rpx};
    }

    .info {
        width: 100%;
        border-radius: #{16rpx};
        background-color: #fff7f7;
        padding: #{32rpx} #{24rpx};

        .nickname {
            max-width: #{200rpx};
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .red {
            color: #ff4544;
        }

        image {
            width: #{64rpx};
            height: #{64rpx};
            margin-right: #{24rpx};
        }


        .item {
            margin-bottom: #{32rpx};
        }

        .item:last-child {
            margin-bottom: 0;
        }
    }

    .circuit-value {
        padding-top: #{20rpx};
        background: #FFFFFF;
        padding-bottom: #{30rpx};
        width: 702upx;
        border-radius: 0 0 15upx 15upx;
        margin: 0 24upx;
        .icon-circuit-i {
            height: #{72rpx};
            width: #{72rpx};
        }

        .name {
            font-size: #{26rpx};
            color: #999999;
            margin-top: #{20rpx};
        }

        .icon-circuit-j {
            margin-top: #{19rpx};
            height: #{34rpx};
            width: #{52rpx};
        }

        > view {
            margin: 0 #{10rpx}
        }
    }

    .activity-time {
        padding-bottom: #{40rpx};
        background: #FFFFFF;
        padding-left: #{20rpx};
        width: 702upx;
        border-radius: 0 0 15upx 15upx;
        margin: 0 24upx;
        view {
            padding-top: #{28rpx};
            font-size: #{28rpx};
            color: #666666;
        }

        view:before {
            content: '●';
            margin-right: #{20rpx};
        }
    }

    .bargain-goods-bottom {
        height: #{120rpx};
        width: 100%;
        background: #FFFFFF;
        .btn {
            font-size: #{32rpx};
            height: #{80rpx};
            line-height: #{80rpx};
            text-align: center;
            width: #{702rpx};
            border-radius: #{40rpx};
        }

        .default-btn {
            background: linear-gradient(#ff9292, #fc6969);
        }

        .btn.shop {
            width: #{346rpx};
        }

        .btn.friend {
            width: #{346rpx};
            margin-left: #{12rpx};
        }
        .default-friend {
            background: linear-gradient(#ffc46b, #ffa13c);
            color: #ffffff;
        }
    }
    .attr-box {
        width: 702upx;
        margin: 0 24upx 0 24upx;
        border-radius: 0 0 15upx 15upx;
        padding: #{0 24rpx};
        background: #ffffff;
        .attr {
            padding: #{28rpx 0};
            border-top: #{1rpx solid #eeeeee};

            .left {
                color: #666666;
                margin-right: #{24rpx};
                font-size: $uni-font-size-weak-one;

                view {
                    border: #{1rpx solid #666666};
                    padding: #{8rpx 16px};
                    -webkit-border-radius: #{30rpx};
                    -moz-border-radius: #{30rpx};
                    border-radius: #{30rpx};
                }
            }

            .right {
                font-size: $uni-font-size-general-two;
                margin-top: #{10rpx};

                .attr-item {
                    margin-right: #{10rpx};
                }
            }
        }
    }

    .text {
        color: #ffffff;
    }

    .goods-margin {
        margin-top: 20upx;
    }
    .u-bottom-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1602;
        background-color: #ffffff;
    }
    .u-bottom-height {
        height: 110upx;
    }

    .bd-detail {
        width: 702upx;
        background-color: #ffffff;
        padding: 20upx;
        margin: 0 24upx;
        border-radius: 0 0 15upx 15upx;
    }

</style>
