<template>
    <div style="background: #f2f3f7">
        <div style="width: 1200px; margin: 0 auto">
            <div style="padding-top: 20px">
                <el-link :underline="false" v-if="!mydetails" @click="toolback" style="font-size: 14px; cuesor: pointer"
                    >测试工具市场>{{ tool.name }}</el-link
                >
            </div>
        </div>
        <div style="display: flex; justify-content: center">
            <div>
                <div style="width: 920px; margin: 0 auto" :class="mydetails ? 'person' : 'noperson'">
                    <div style="background: #fff" :class="mydetails ? 'nobgnk' : 'bgnk'">
                        <div class="keyda" style="margin: 35px; display: flex">
                            <div style="width: 80px; height: 80px; margin-right: 35px">
                                <img :src="tool.newUrl" style="width: 80px; height: 80px; margin-right: 35px" alt="" />
                                <!-- <img
                                    v-if="tool.name == '代码静态分析工具'"
                                    src="/assets/toolmarket/EagleEye.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == '源代码安全检测工具'"
                                    src="/assets/toolmarket/wukong.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == 'C/C++单元测试工具'"
                                    src="/assets/toolmarket/EagleWing-C.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == '接口测试工具'"
                                    src="/assets/toolmarket/Kinterface.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == 'JAVA单元测试工具'"
                                    src="/assets/toolmarket/EagleWing-Java.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == '功能测试工具AutoFun'"
                                    src="/assets/toolmarket/AutoFun.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == '代码组成分析平台'"
                                    src="/assets/toolmarket/KeySwan.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == '性能测试工具'"
                                    src="/assets/toolmarket/KeySphere.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == '自鉴-交互式应用安全测试系统IAST'"
                                    src="/assets/toolmarket/自鉴交互式.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == 'Web应用安全测试工具'"
                                    src="/assets/toolmarket/web.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == '资产识别及漏洞管理工具'"
                                    src="/assets/toolmarket/资产识别.png"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                />
                                <img
                                    v-if="tool.name == '性能测试工具KeyTurbo'"
                                    src="/assets/toolmarket/AutoLoad.jpg"
                                    style="width: 80px; height: 80px; margin-right: 35px"
                                    alt=""
                                /> -->
                            </div>
                            <div>
                                <div class="keydap" style="display: flex; justify-content: space-between">
                                    {{ tool.name }}

                                    <div v-if="tool.price == 0" style="font-weight: bold; color: #e93a3a">限时免费</div>
                                    <div v-else style="font-weight: bold">
                                        <span style="color: #e93a3a">￥ {{ tool.price }} </span>
                                        <span>/月</span>
                                    </div>
                                </div>
                                <p
                                    :title="tool.toolDesc"
                                    style="
                                        cursor: pointer;
                                        font-size: 15px;
                                        line-height: 25px;
                                        color: #4d4d4d;
                                        font-weight: 400;
                                        width: 742px;
                                    "
                                >
                                    {{ tool.toolDesc }}
                                </p>
                                <div
                                    style="
                                        display: flex;
                                        width: 742px;
                                        align-items: center;
                                        justify-content: space-around;
                                        padding: 10px 0;
                                        background: #f2f3f7;
                                    "
                                >
                                    <!-- <div class="toolprice" style="margin-left: 30px">
                                        <div>
                                            工具价格：<span
                                                style="color: #e84c3d; font-size: 24px; margin: 0; font-weight: bold"
                                                >¥{{ tool.price }}</span
                                            >
                                        </div>
                                    </div> -->
                                    <div class="toolprice">
                                        <div>
                                            工具类型：{{
                                                findLabelValueByProp(
                                                    tooltypelist,
                                                    tool.toolType,
                                                    'dictValue',
                                                    'dictLabel',
                                                )
                                            }}
                                        </div>
                                    </div>
                                    <div style="font-size: 10px">|</div>
                                    <div class="toolprice">
                                        <div>交付方式：{{ tool.deliverType }}</div>
                                    </div>
                                    <div style="font-size: 10px">|</div>
                                    <div class="toolprice">
                                        <div>上架时间：{{ tool.onlineTime.slice(0, 10) }}</div>
                                    </div>
                                </div>

                                <div class="joinpurch">
                                    <el-button @click="buynow">立即购买</el-button>
                                    <!-- <el-button style="border-radius:20px;background: #FC8C1F;" @click='addtocat'>加入购物车</el-button> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div :style="{ background: mydetails ? '#FFFFFF' : '#F4F5FA' }">
                        <div class="goodsde">
                            <div ref="obtain" id="menuFlag" :class="scrolltop ? 'isFixedTop' : ''">
                                <ul style="list-style-type: none; margin: 0">
                                    <li class="menuListBtn" @click="toDetail" :class="{ activeBtn: goodsBtnType == 1 }">
                                        产品简介
                                    </li>
                                    <li class="menuListBtn" @click="toPrice" :class="{ activeBtn: goodsBtnType == 2 }">
                                        产品价格
                                    </li>
                                    <li
                                        v-if="tool.package || tool.instructionManual || tool.userGuide"
                                        class="menuListBtn"
                                        @click="toServiceSupport"
                                        :class="{ activeBtn: goodsBtnType == 3 }"
                                    >
                                        服务与支持
                                    </li>
                                    <li
                                        v-if="tool.vedio"
                                        class="menuListBtn"
                                        @click="toVideo"
                                        :class="{ activeBtn: goodsBtnType == 4 }"
                                    >
                                        产品视频
                                    </li>
                                    <li
                                        class="menuListBtn"
                                        @click="toQuestion"
                                        :class="{ activeBtn: goodsBtnType == 5 }"
                                    >
                                        常见问题
                                    </li>
                                    <!-- <li class="menuListBtn" @click="toComments" :class="{activeBtn:goodsBtnType == 5}">
                                        商品评论
                                    </li> -->
                                    <li style="clear: both; margin-right: 50px"></li>
                                </ul>
                            </div>
                            <div>
                                <div
                                    id="goodsDetail"
                                    ref="goodsDetail"
                                    style="background: #ffffff; padding: 30px 30px 50px 30px"
                                >
                                    <!-- <el-carousel :interval="3000"  height="282px">
                                        <el-carousel-item v-for="item in detailImages" :key="item.fileId" >
                                            <el-col :span='24'>
                                                <el-image  style="width:1140px;height:282px;object-fit:contain;" :src="item.fileUrl" :preview-src-list="[item.fileUrl]">
                                                </el-image>
                                            </el-col>
                                        </el-carousel-item>
                                    </el-carousel> -->
                                    <img src="/assets/tool/-s-1@2x.png" alt="" />
                                    <div class="contentTitle">产品简介</div>
                                    <p style="color: #333; font-size: 14px; line-height: 26px; font-weight: 400">
                                        {{ tool.toolDesc }}
                                    </p>
                                    <div class="contentTitle">产品功能</div>
                                    <div>
                                        <div v-for="(fun, key) of functions" :key="key">
                                            <div class="product">{{ fun.title }}：{{ fun.funDesc }}</div>
                                        </div>
                                    </div>
                                    <div class="contentTitle">产品亮点</div>
                                    <div>
                                        <div v-for="(fun, key) of highlights" :key="key">
                                            <div class="product">{{ fun.title }}：{{ fun.funDesc }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 商品定价 -->
                        <div
                            id="goodsPrice"
                            ref="goodsPrice"
                            style="width: 920px; margin: 0 auto; margin-top: 20px; background: #fff"
                        >
                            <div style="background: #ffffff; padding: 30px">
                                <div class="contentTitle" style="margin-top: 0">产品价格</div>
                                <div
                                    style="
                                        display: flex;
                                        align-items: center;
                                        margin-top: 30px;
                                        height: 93px;
                                        background: #f4f5fa;
                                    "
                                >
                                    <div style="width: 93px; height: 93px; background: #0066eb">
                                        <img
                                            src="/assets/tool/jiage.png"
                                            style="margin: 50%; transform: translate(-50%, -50%)"
                                            alt=""
                                        />
                                    </div>
                                    <div>
                                        <p
                                            style="
                                                margin-left: 20px;
                                                font-size: 14px;
                                                line-height: 22px;
                                                font-weight: 400;
                                            "
                                        >
                                            系统处于运营推广初级阶段，该款测试工具供广大用户免费试用。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 服务与支持 -->
                        <!-- <div id="serviceSupport" ref="serviceSupport" v-if="tool.deliverType=='License'" style="width:920px;margin:0 auto;margin-top:20px;background:#FFF;"> -->
                        <div
                            id="serviceSupport"
                            ref="serviceSupport"
                            v-if="tool.package || tool.instructionManual || tool.userGuide"
                            style="width: 920px; margin: 0 auto; margin-top: 20px; background: #fff"
                        >
                            <div style="background: #ffffff; padding: 30px">
                                <div class="contentTitle" style="margin-top: 0">服务与支持</div>
                                <div
                                    style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin: 20px 0 0px 0;
                                        height: 50px;
                                        background: #f4f5fa;
                                    "
                                    v-if="tool.package"
                                >
                                    <p class="download" style="font-size: 14px; margin: 0 25px">
                                        <img
                                            style="margin-right: 10px; vertical-align: bottom"
                                            src="/assets/tool/pdf.png"
                                            alt=""
                                        />下载软件包
                                    </p>
                                    <el-button class="downBtn" @click="warnBuy"
                                        >下载 <i class="el-icon-download"></i
                                    ></el-button>
                                </div>
                                <div
                                    style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin: 0px 0 20px 0;
                                        height: 50px;
                                        background: #f4f5fa;
                                        margin-top: 20px;
                                    "
                                    v-if="tool.instructionManual"
                                >
                                    <p class="download" style="font-size: 14px; margin: 0 25px">
                                        <img
                                            style="margin-right: 10px; vertical-align: bottom"
                                            src="/assets/tool/pdf.png"
                                            alt=""
                                        />下载安装手册
                                    </p>
                                    <el-button class="downBtn" @click="downloadReadme"
                                        >下载 <i class="el-icon-download"></i
                                    ></el-button>
                                </div>
                                <div
                                    style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin: 0px 0 20px 0;
                                        height: 50px;
                                        background: #f4f5fa;
                                        margin-top: 20px;
                                    "
                                    v-if="tool.userGuide"
                                >
                                    <p class="download" style="font-size: 14px; margin: 0 25px">
                                        <img
                                            style="margin-right: 10px; vertical-align: bottom"
                                            src="/assets/tool/pdf.png"
                                            alt=""
                                        />下载用户手册
                                    </p>
                                    <el-button class="downBtn" @click="downloadInstruction"
                                        >下载 <i class="el-icon-download"></i
                                    ></el-button>
                                </div>
                            </div>
                        </div>
                        <!-- 产品视频 -->
                        <div
                            id="productVideo"
                            v-if="tool.vedio"
                            ref="productVideo"
                            style="width: 920px; margin: 0 auto; margin-top: 20px; background: #fff"
                        >
                            <div style="background: #ffffff; padding: 30px">
                                <div class="contentTitle" style="margin-top: 0">产品视频</div>
                                <div style="display: flex; justify-content: space-around; margin-top: 20px">
                                    <video width="385px" controls="controls" class="avatar" :src="tool.vedio"></video>
                                    <!-- <video width="385px"
                                    controls="controls"
                                    class="avatar" src=""></video> -->
                                </div>
                            </div>
                        </div>
                        <!-- 常见问题 -->
                        <div
                            id="goodsQuestion"
                            ref="goodsQuestion"
                            style="width: 920px; margin: 0 auto; margin-top: 20px; background: #fff"
                        >
                            <div style="background: #ffffff; padding: 30px">
                                <div class="contentTitle" style="margin-top: 0">常见问题</div>
                                <div
                                    style="
                                        background: #ffffff;
                                        font-size: 14px;
                                        font-weight: 400;
                                        color: #000000;
                                        line-height: 35px;
                                    "
                                >
                                    <p style="white-space: pre-line">{{ tool.productQA ? tool.productQA : '暂无' }}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 商品评论 -->
                        <!-- <div id="goodsComments" ref="goodsComments" style="width:920px;margin:0 auto;margin-top:20px;background:#FFF;">
                            <div style="background:#FFFFFF;padding:30px;">
                                <div style="text-align:center;">   
                                    <div style="font-size: 22px;font-weight: 400;color: #000000;">商品评论</div>
                                </div>
                                <div style="margin-top:30px;" v-for="(item,index) in commentsList" :key="index">
                                    <div>
                                        <div style="display:flex;justify-content: space-between;align-items: center;">
                                            <div style="display:flex;align-items: center;">
                                                <el-avatar :size="58" :src="item.avatar"></el-avatar>
                                                <div style="margin-left: 20px;">
                                                    <div style="font-size: 16px;font-weight: bold;color: #000000;line-height: 27px;">{{item.tel}}</div>
                                                    <div style="font-size: 15px;font-weight: 400;color: #999999;line-height: 27px;">{{item.createTime}}</div>
                                                </div>
                                            </div>
                                            <div class="rateClass">
                                                <el-rate disabled-void-color="#D9D9D9" v-model="item.score" disabled></el-rate>
                                            </div>
                                        </div>
                                        <p style="font-size: 15px;font-weight: 400;color: #1A1A1A;line-height: 27px;">评论：{{item.content}}</p>
                                    </div>
                                     <el-divider></el-divider>
                                </div>
                            </div>   
                        </div> -->
                    </div>
                </div>
            </div>
            <div style="padding-top: 30px">
                <!-- <div class="rightTopBox" :style="{ 'margin-top':mydetails?'20px':'30px'}">
                    <div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 56px;margin-left: 10px;">
                        服务商：北京关键科技股份有限公司
                    </div>
                    <el-divider></el-divider>
                    <div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 24px;text-align: left;">
                        <p><img style="margin: 0 10px;" src="/assets/tool/kefurexianxianxing.png" alt=""> 服务热线：010-56682165 </p>
                        <p><img style="margin: 0 10px;" src="/assets/tool/shouji.png" alt="">手机：18611768463</p>
                        <p><img style="margin: 0 10px;" src="/assets/tool/shijian.png" alt="">服务时间：24小时</p>
                        <p><img style="margin: 0 10px;" src="/assets/tool/youxiang.png" alt="">通讯邮箱：keyware@keyware.cn </p>
                    </div>
                </div> -->
                <div class="rightBottomBox">
                    <div
                        style="
                            height: 56px;
                            font-size: 18px;
                            font-weight: bold;
                            color: #1a1a1a;
                            line-height: 56px;
                            margin-left: 30px;
                        "
                    >
                        相关产品推荐
                    </div>
                    <el-divider></el-divider>
                    <div>
                        <div v-for="(item, index) in toolslist" :key="index" style="margin: 20px">
                            <div style="display: flex; cursor: pointer" @click="switchTool(item)">
                                <img :src="item.img" style="min-width: 63px; height: 63px; margin-right: 5px" alt="" />
                                <!-- <img
                                    v-if="item.name == '代码静态分析工具'"
                                    src="/assets/toolmarket/EagleEye.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == '源代码安全检测工具'"
                                    src="/assets/toolmarket/wukong.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == 'C/C++单元测试工具'"
                                    src="/assets/toolmarket/EagleWing-C.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == '接口测试工具'"
                                    src="/assets/toolmarket/Kinterface.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == 'JAVA单元测试工具'"
                                    src="/assets/toolmarket/EagleWing-Java.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == '功能测试工具AutoFun'"
                                    src="/assets/toolmarket/AutoFun.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == '代码组成分析平台'"
                                    src="/assets/toolmarket/KeySwan.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == '性能测试工具'"
                                    src="/assets/toolmarket/KeySphere.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == '自鉴-交互式应用安全测试系统IAST'"
                                    src="/assets/toolmarket/自鉴交互式.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == 'Web应用安全测试工具'"
                                    src="/assets/toolmarket/web.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == '资产识别及漏洞管理工具'"
                                    src="/assets/toolmarket/资产识别.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                />
                                <img
                                    v-if="item.name == '性能测试工具AutoLoad'"
                                    src="/assets/toolmarket/AutoLoad.png"
                                    style="width: 63px; height: 63px; margin-right: 5px"
                                    alt=""
                                /> -->
                                <!-- <img :src="item.img" alt="" style="width:63px;height:63px;margin-right: 5px;"> -->
                                <div>
                                    <div style="font-size: 14px; font-weight: bold; color: #1a1a1a">
                                        {{ item.name }}
                                    </div>
                                    <div style="font-size: 12px; font-weight: 400; color: #333333;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;line-clamp: 2;-webkit-line-clamp: 2;">
                                        {{ item.toolDesc }}
                                    </div>
                                </div>
                            </div>
                            <el-divider></el-divider>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="paydiaopen"
            width="574px"
            :close-on-click-modal="false"
            append-to-body
            @close="closeBuyDialog()"
            class="paydialog"
        >
            <el-divider></el-divider>
            <el-form :model="buyTool" label-width="100px" class="demo-ruleForm" style="margin-top: 20px">
                <el-form-item label="商品名称:">
                    {{ buyTool.name }}
                </el-form-item>
                <el-form-item label="服务类型:">
                    <el-select v-model="serviceType" size="small" placeholder="请选择">
                        <el-option
                            v-if="buyTool.deliverType == 'SaaS'"
                            label="测试服务(按次计)"
                            value="测试服务(按次计)"
                        >
                        </el-option>
                        <el-option label="使用时长(按月计)" value="使用时长(按月计)"> </el-option>
                    </el-select>

                    <!-- {{ buyTool.deliverType == 'License' ? '按月' : '按次' }} -->
                </el-form-item>
                <el-form-item label="商品价格:">
                    <span v-if="serviceType == '测试服务(按次计)' && buyTool.priceTime == 0">限时免费</span>
                    <span v-if="serviceType == '使用时长(按月计)' && buyTool.price == 0">限时免费</span>
                    <span v-else>￥{{ serviceType == '测试服务(按次计)' ? buyTool.priceTime : buyTool.price }}</span>
                </el-form-item>
                <el-form-item label="购买数量:">
                    <el-input-number
                        size="mini"
                        v-model="buyAmount"
                        :min="1"
                        :max="999"
                        label="购买数量"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="交付方式:">
                    {{ buyTool.deliverType }}
                </el-form-item>
                <el-form-item label="应付金额:">
                    <span style="font-weight: bold; font-size: 22px; color: #fd461a">
                        <span v-if="addPriceAll == 0">限时免费</span>
                        <span v-else>￥ {{ addPriceAll }}</span>
                    </span>
                </el-form-item>
                <el-form-item label="支付方式:">
                    <el-row>
                        <el-col class="paytypebtn">
                            <el-radio size="small" v-model="paymentType" label="A01" border>
                                <img class="btnpayimg" src="/assets/home/zfb.png" alt="" />支付宝</el-radio
                            >
                            <el-radio size="small" v-model="paymentType" label="W01" border>
                                <img class="btnpayimg" src="/assets/home/wx.png" alt="" />微信</el-radio
                            >
                            <el-radio size="small" v-model="paymentType" label="WALLET" border :disabled="myLQDDisable">
                                <img class="btnpayimg" src="/assets/home/lingqian.png" alt="" />{{
                                    myLQDDisable ? '零钱不足' : '零钱'
                                }}</el-radio
                            >
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <div class="joinpurch123">
                <el-button @click="immediatelypay">立即支付</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="待支付"
            :visible.sync="boxShow"
            width="600px"
            :before-close="handleClose"
            class="qcode"
            :close-on-click-modal="false"
            @close="closeCode"
        >
            <div style="width: 500px; margin: 0 auto; text-align: center">
                <!-- <canvas width="150px" height="150px"></canvas>
                <div id="qrcode" ref="qrcode"></div> -->
                <qrcode :value="codeUrl" :options="options"></qrcode>
                <div style="color: #fd461a; font-size: 28px; font-weight: 700; margin-bottom: 20px">
                    {{ addPriceAll }}元
                </div>
                <div style="margin-top: 20px; font-size: 16px">
                    请使用{{ paymentType == 'A01' ? '支付宝' : '微信' }}扫描二维码支付
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title="钱包支付"
            :visible.sync="qianbaoShow"
            width="600px"
            class="qcode"
            :close-on-click-modal="false"
        >
            <div style="display: flex">
                <div style="width: 100px; line-height: 40px">交易密码:</div>
                <el-input v-model="jypassword" type="password" show-password></el-input>
            </div>
            <div class="joinpurch123">
                <el-button @click="qianbaozhifu">立即支付</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="设置密码"
            :visible.sync="nopasswordDialog"
            width="600px"
            class="qcode"
            :close-on-click-modal="false"
        >
            <div style="font-weight: 500; font-size: 16px; color: #333333; text-align: center">
                您还未设置过交易密码
            </div>
            <div class="joinpurch123">
                <el-button @click="goSetPassword">去设置</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import { findByvalue, findLabelValueByProp } from '@/util/util'
import { getTool, getFunction, queryOrderState, buyTool, noPayBuy } from '@/api/toolInfo/market'
import { addShoppingCart } from '@/api/my/my'
import { listMyMessageCount } from '@/api/system/message'
import VueQrcode from '@xkeshi/vue-qrcode'
import { listTools } from '@/api/toolInfo/market'
import { orderPay, searchOrderStatus, searchMyMoney } from '@/api/pay/index.js'

import { queryAccount } from '@/api/my/testb.js'
import { encrypt } from '@/util/encrypt'
export default {
    props: ['mydetails'],
    data() {
        return {
            nopasswordDialog: false,
            orderTimers: null,
            qianbaoShow: false,
            jypassword: '',
            id: '',
            amount: '', //购买数量
            buyAmount: '', //弹窗购买数量
            goodsactive: '1',
            // swipcelist:[{id:0,imgurl:'/assets/tool/swipc.png'},{id:1,imgurl:'/assets/tool/swipc.png'},{id:2,imgurl:'/assets/tool/swipc.png'}],
            tool: {}, //工具详情
            functions: [], //主要功能
            highlights: [], //技术亮点
            images: [], //图片全集
            icon: {}, //推荐图信息
            detailImages: [], //详情图片列表
            packageUrl: '',
            readmeUrl: '',
            paydiaopen: false,
            buyTool: {},
            title: '订单支付',
            paymentType: 'A01', //支付方式
            myLQDDisable: false,
            boxShow: false,
            rules: {},
            orderNumber: '', //订单id
            codeUrl: '',
            options: { size: 150 },

            goodsBtnType: 1, //商品按钮类型

            scrolltop: false,

            // 评论list
            commentsList: [
                {
                    avatar: '/assets/tool/avatar1.png',
                    tel: '135****3213',
                    createTime: '2022-03-10 12:32:53',
                    score: 5,
                    content:
                        '测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。',
                },
                {
                    avatar: '/assets/tool/avatar2.png',
                    tel: '156****1132',
                    createTime: '2022-03-10 12:32:53',
                    score: 4,
                    content: '测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。',
                },
                {
                    avatar: '/assets/tool/avatar3.png',
                    tel: '187****5326',
                    createTime: '2022-03-10 12:32:53',
                    score: 3,
                    content: '测试工具非常好用，测试简单方便，值得购买。',
                },
            ],

            toolslist: [],
            mp4Info: [
                {
                    name: '代码静态分析工具',
                    videoUrl: 'https://www.keyitest.cn/prod-api/profile/upload/tools/eagleEye/EagleEye.mp4',
                    uploadApp: '',
                    uploadInstall: '',
                    uploadUse: '',
                },
                {
                    name: 'C/C++单元测试工具',
                    videoUrl: 'https://www.keyitest.cn/prod-api/profile/upload/tools/eagleWing/EagleWing_for_C.mp4',
                    uploadApp:
                        'https://www.keyitest.cn/prod-api/profile/upload/tools/eagleWing/EagleWing-V2.0.2(271)-setup.exe',
                    uploadInstall:
                        'https://www.keyitest.cn/prod-api/profile/upload/tools/eagleWing/EagleWing单元测试工具安装手册.pdf',
                    uploadUse:
                        'https://www.keyitest.cn/prod-api/profile/upload/tools/eagleWing/EagleWing单元测试工具用户手册.pdf',
                },
                {
                    name: '代码组成分析平台',
                    videoUrl: 'https://www.keyitest.cn/prod-api/profile/upload/tools/keyswan/keyswan.mp4',
                    uploadApp: '',
                    uploadInstall: '',
                    uploadUse: '',
                },
                {
                    name: '接口测试工具',
                    videoUrl: 'https://www.keyitest.cn/prod-api/profile/upload/tools/kinterface/Kinterface.mp4',
                    uploadApp:
                        'https://www.keyitest.cn/prod-api/profile/upload/tools/kinterface/Kinterface-V2.6.1(1578)-setup.exe',
                    uploadInstall:
                        'https://www.keyitest.cn/prod-api/profile/upload/tools/kinterface/Kinterface安装手册.pdf',
                    uploadUse:
                        'https://www.keyitest.cn/prod-api/profile/upload/tools/kinterface/Kinterface用户手册.pdf',
                },
                {
                    name: '性能测试工具KeyTurbo',
                    videoUrl: 'https://www.keyitest.cn/prod-api/profile/upload/tools/keyTurbo/keyTurbo.mp4',
                    uploadApp: 'https://www.keyitest.cn/prod-api/profile/upload/tools/keyTurbo/KeyTurbo-1.7.0-JHM.exe',
                    uploadInstall:
                        'https://www.keyitest.cn/prod-api/profile/upload/tools/keyTurbo/性能测试工具-安装部署手册.pdf',
                    uploadUse:
                        'https://www.keyitest.cn/prod-api/profile/upload/tools/keyTurbo/性能测试工具用户手册-V1.0.3.pdf',
                },
            ],
            mp4InfoActive: {},
            serviceType: '使用时长(按月计)',
            baseUrl: process.env.VUE_APP_BASE_TARGET,
        }
    },
    components: {
        qrcode: VueQrcode,
    },
    filters: {
        
    },
    computed: {
        ...mapGetters(['paytype', 'tooltypelist', 'token', 'userinform']),
        addPriceAll() {
            if (this.serviceType == '测试服务(按次计)') {
                return this.buyTool.priceTime * this.buyAmount
            } else {
                return this.buyTool.price * this.buyAmount
            }
        },
    },
    beforeDestroy(to, from, next) {
        window.addEventListener('scroll', this.handleScrollx)
    },
    mounted() {
        window.addEventListener('scroll', this.handleScrollx, true)
        this.getList()
        this.id = this.$route.query.id
        getTool(this.id).then((response) => {
            this.tool = response.tool

            // 处理可下载链接
            // const selectItem = this.mp4Info.find((it) => it.name == this.tool.name)
            // if (selectItem) {
            //     this.tool.videoUrl = selectItem.videoUrl
            //     this.tool.uploadApp = selectItem.uploadApp
            //     this.tool.uploadInstall = selectItem.uploadInstall
            //     this.tool.uploadUse = selectItem.uploadUse
            // }

            // this.buyTool=response.tool;
            this.$emit('inform', this.tool)
            this.tool.amount = 1
            // this.images = response.fileInfoList
            // this.images.forEach(item=>{
            //     if(item.fileType == 'head'){
            //         this.icon.push(item)
            //     }else if(item.fileType == 'detail'){
            //         this.icon.push(item)
            //     }
            // })
            // for (let index in this.images) {
            //     if (this.images[index].fileType == 'head') this.icon = this.images[index]
            //     else if (this.images[index].fileType == 'detail') {
            //         this.detailImages.push(this.images[index])
            //     } else if (this.images[index].fileType == 'package') {
            //         this.packageUrl = this.images[index].fileId
            //     } else if (this.images[index].fileType == 'readme') {
            //         this.readmeUrl = this.images[index].fileId
            //     } else if (this.images[index].fileType == 'icon') {
            //         this.tool.img = this.images[index].fileUrl
            //     }
            // }

            // 处理可下载文件fileType  fileUrl  filePath
            if (response.fileInfoList.length) {
                response.fileInfoList.forEach((it) => {
                    if (it.fileType == 'vedio') {
                        // mp4
                        this.tool.vedio = this.baseUrl + it.filePath
                    } else if (it.fileType == 'package') {
                        // 软件包package
                        this.tool.package = this.baseUrl + it.filePath
                    } else if (it.fileType == 'instructionManual') {
                        // 安装手册instructionManual
                        this.tool.instructionManual = this.baseUrl + it.filePath
                    } else if (it.fileType == 'userGuide') {
                        // 用户使用手册userGuide
                        this.tool.userGuide = this.baseUrl + it.filePath
                    } else if (it.fileType == 'userGuide') {
                        // 用户使用手册userGuide
                        this.tool.userGuide = this.baseUrl + it.filePath
                    } else if (it.fileType == 'icon') {
                        this.tool.newUrl = this.baseUrl + it.filePath
                    }
                })
            }

            this.functions = response.functionList.filter((item) => item.funType == 0)
            this.highlights = response.functionList.filter((item) => item.funType == 1)
        })
    },
    methods: {
        // 没交易密码，去设置交易密码
        goSetPassword() {
            this.$router.push({
                path: '/console/account',
                query: {code: '3'}
            })
        },
        findByvalue,
        findLabelValueByProp,
        toolback() {
            this.$router.back()
        },
        //购买数量的方法
        handleChange(value) {},
        //tab点击
        handleClick(tab, event) {},
        /** 查询列表 */
        getList() {
            this.loading = true
            let data = {
                toolType: this.toolType,
                deliverType: this.deliverType,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                status: 1,
            }
            Object.keys(data).forEach((keyd) => {
                if (!data[keyd] || data[keyd] == '' || data[keyd] == '0' || data[keyd] == "''") {
                    delete data[keyd]
                }
            })
            listTools(data)
                .then((response) => {
                    this.toolslist = response.rows.splice(0, 5)
                    this.total = response.total
                    this.loading = false
                })
                .catch((err) => {})
        },
        switchTool(row) {
            getTool(row.toolId).then((response) => {
                this.tool = response.tool
                this.tool.amount = 1
                this.images = response.fileInfoList

                for (let index in this.images) {
                    if (this.images[index].fileType == 'head') this.icon = this.images[index]
                    else if (this.images[index].fileType == 'detail') {
                        this.detailImages.push(this.images[index])
                    } else if (this.images[index].fileType == 'package') {
                        this.packageUrl = this.images[index].fileId
                    } else if (this.images[index].fileType == 'readme') {
                        this.readmeUrl = this.images[index].fileId
                    }
                }

                this.functions = response.functionList.filter((item) => item.funType == 0)
                this.highlights = response.functionList.filter((item) => item.funType == 1)
            })
        },

        // 下载安装包
        warnBuy() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                this.tool.package && window.open(this.tool.package)
            }
            // this.$alert("请您购买后在我的工具下载。")
        },
        // 下载安装手册
        downloadReadme() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                this.tool.instructionManual && window.open(this.tool.instructionManual)
            }
        },
        // 下载用户手册
        downloadInstruction() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                this.tool.userGuide && window.open(this.tool.userGuide)
            }
        },
        //加入购物车
        addtocat() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                addShoppingCart(this.id, this.amount).then((response) => {
                    if (response.code == 200) {
                        this.$notify({
                            title: '添加购物车成功',
                            message: '',
                            align: 'center',
                            type: 'success',
                        })
                        // if(response.cartCount==0){
                        //     response.cartCount=1
                        // }
                        listMyMessageCount().then((res) => {
                            store.commit('SET_CARTCOUNT', res.cartCount)
                            setTimeout(() => {
                                this.$router.push('/console/cart')
                            }, 1000)
                        })
                    }
                })
            }
        },
        //立即购买
        buynow() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                this.paydiaopen = true
                this.buyTool = this.tool
                this.buyAmount = this.amount
            }
        },
        //关闭支付弹窗
        handleClose() {
            this.boxShow = false
            clearInterval(this.timers)
        },
        // 钱包支付
        qianbaozhifu() {
            let param = {}
            param.toolId = this.buyTool.toolId
            param.amount = this.buyAmount
            param.deliverType = this.buyTool.deliverType
            param.price = this.serviceType == '使用时长(按月计)' ? this.buyTool.price : this.buyTool.priceTime
            param.payType = this.paymentType
            param.paytype = this.paymentType
            param.toolType = this.buyTool.toolType
            param.userId = this.userinform.userId
            param.password = encrypt(this.jypassword)
            param.priceType = this.serviceType == '使用时长(按月计)' ? 'month' : 'times'
            param.recordName = '购买工具：' +  this.buyTool.name
            orderPay(param).then((res) => {
                if (res.retcode == 'SUCCESS') {
                    this.qianbaoShow = false
                    this.paydiaopen = false
                    this.$message.success('支付成功，请前往工作台-我的工具使用')
                    // 跳工作台
                    setTimeout(() => {
                        this.$router.push('/console/mytools')
                    }, 1000)
                } else {
                    this.$message.error('支付失败，请联系管理员')
                }
            })
        },
        closeCode() {
            clearInterval(this.orderTimers)
        },
        //立即支付
        immediatelypay() {
            let param = {}
            param.toolId = this.buyTool.toolId
            param.amount = this.buyAmount
            param.deliverType = this.buyTool.deliverType
            param.price = this.serviceType == '使用时长(按月计)' ? this.buyTool.price : this.buyTool.priceTime
            param.payType = this.paymentType
            param.paytype = this.paymentType
            param.toolType = this.buyTool.toolType
            param.userId = this.userinform.userId
            param.priceType = this.serviceType == '使用时长(按月计)' ? 'month' : 'times'
            //价格为0直接生成支付成功的订单
            if (param.price == 0) {
                noPayBuy(param).then((response) => {
                    this.$notify({
                        title: '限时免费产品购买成功',
                        message: '可在我的工具中查看已购买的工具',
                        align: 'center',
                        type: 'success',
                    })
                    this.paydiaopen = false
                    setTimeout(() => {
                        this.$router.push('/console/mytools')
                    }, 1000)
                })
            } else {
                // 价格不为零
                // 零钱支付
                if (param.payType == 'WALLET') {
                    // 获取金额
                    queryAccount(this.userinform.userId).then((res) => {
                        // 查询钱包余额是否足够
                        if (this.addPriceAll > res.balance) {
                            // 钱不够
                            this.myLQDDisable = true
                            this.paymentType = 'A01'
                            this.$message.warning('你的账户零钱不足,请使用其他支付方式')
                        } else {
                            // 钱够了
                            if (!res.password) {
                                this.nopasswordDialog = true
                            } else {
                                this.qianbaoShow = true
                            }
                        }
                    })
                } else {
                    // 微信支付宝支付
                    const loading = this.$loading({
                        lock: true,
                        text: '请稍候···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255, 0.1)',
                    })
                    orderPay(param)
                        .then((res) => {
                            if (res.payinfo && res.payinfo != '') {
                                loading.close()

                                this.codeUrl = res.payinfo
                                this.boxShow = true
                                // 轮训查订单状态
                                this.orderTimers = setInterval(() => {
                                    searchOrderStatus({ reqsn: res.reqsn }).then((res) => {
                                        if (res) {
                                            this.boxShow = false
                                            this.paydiaopen = false
                                            clearInterval(this.orderTimers)
                                            this.$message.success('支付成功，请前往工作台-我的工具使用')
                                            setTimeout(() => {
                                                this.$router.push('/console/mytools')
                                            }, 1000)
                                        }
                                    })
                                }, 3000)
                            }
                        })
                        .catch((error) => {
                            loading.close()
                        })
                }
            }
        },
        getOrderstate() {
            let self = this
            let num = 0
            self.timers = setInterval(() => {
                //创建一个全局的定时器
                num++
                queryOrderState(this.orderNumber).then((res) => {
                    if (res.data == true) {
                        //判断 如果data.data==true就是订单支付成功
                        this.$notify({
                            title: '支付成功',
                            message: '可在我的工具中查看已购买的工具',
                            align: 'center',
                            type: 'success',
                        })
                        this.boxShow = false
                        this.paydiaopen = false
                        setTimeout(() => {
                            this.$router.push('/console/mytools')
                        }, 1000)
                        // this.$store.dispatch("tagsView/delView", this.$route);
                        // this.$router.push({path: "/market/market"});
                        clearInterval(this.timers) //别忘记关闭定时器，否则会一直调这个接口
                    }
                })
                if (num == 500) {
                    //这里是判断num++到500的情况下用户还没有支付则自动关闭定时器和二维码
                    this.boxShow = false
                    clearInterval(this.timers)
                }
            }, 1500)
        },
        //关闭支付弹窗
        closeBuyDialog() {
            if (this.timers) {
                clearInterval(this.timers) //关闭
            }
        },

        // 锚点定位
        toDetail() {
            this.goodsBtnType = 1
            document.querySelector('#goodsDetail').scrollIntoView({ behavior: 'smooth' })
        },
        toPrice() {
            this.goodsBtnType = 2
            document.querySelector('#goodsPrice').scrollIntoView({ behavior: 'smooth' })
        },
        toServiceSupport() {
            this.goodsBtnType = 3
            document.querySelector('#serviceSupport').scrollIntoView({ behavior: 'smooth' })
        },
        toVideo() {
            this.goodsBtnType = 4
            document.querySelector('#productVideo').scrollIntoView({ behavior: 'smooth' })
        },
        toQuestion() {
            this.goodsBtnType = 5
            document.querySelector('#goodsQuestion').scrollIntoView({ behavior: 'smooth' })
        },
        // toComments () {
        //     this.goodsBtnType = 5
        //     document.querySelector("#goodsComments").scrollIntoView({behavior: "smooth"});
        // },
        handleScrollx() {
            //计算滚动条位置
            var scrollTop1 = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            //计算绑定div位置this.$refs.piediv.getBoundingClientRect().top;
            // var offsetTop = document.querySelector('#goodsPrice').getBoundingClientRect().top;
            //进行比较设置位置fixed
            // this.scrolltop = scrollTop1 > offsetTop;
            if (scrollTop1 > 600) {
                this.scrolltop = true
            } else {
                this.scrolltop = false
            }
            if (this.$refs.goodsDetail) {
                if (this.$refs.goodsDetail.getBoundingClientRect().top < 200) {
                    this.goodsBtnType = 1
                }
            }
            if (this.$refs.goodsPrice) {
                if (this.$refs.goodsPrice.getBoundingClientRect().top < 200) {
                    this.goodsBtnType = 2
                }
            }
            if (this.$refs.serviceSupport) {
                if (this.$refs.serviceSupport.getBoundingClientRect().top < 200) {
                    this.goodsBtnType = 3
                }
            }
            if (this.$refs.productVideo) {
                if (this.$refs.productVideo.getBoundingClientRect().top < 200) {
                    this.goodsBtnType = 4
                }
            }
            if (this.$refs.goodsQuestion) {
                if (this.$refs.goodsQuestion.getBoundingClientRect().top < 200) {
                    this.goodsBtnType = 5
                }
            }
        },
    },
}
</script>
<style scoped>
.noperson {
    /* background:#FFFFFF; */
    /* border-top:1px solid #EBEBEB */
}
.person {
    background: #ffffff;
}
.bgnk {
    width: 920px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
}
.nobgnk {
    width: 920px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}
.keydap {
    font-size: 18px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 35px;
}
.el-divider--horizontal {
    margin: 0;
}
/* .keyda :nth-child(2){
        font-weight: bold;
        color: #666666;
        font-size:14px;
    } */
.toolprice {
    /* display:flex;
        align-items:center; */
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 35px;
}
/* .toolprice :nth-child(1){
        color: #666666;
        font-size:14px;
        margin-right:35px;
    }
    .toolprice :nth-child(2){
        color: #333333;
        font-size:14px;
    } */
.joinpurch >>> .el-button {
    margin-top: 15px;
    font-size: 15px !important;
    border: none;
    color: #ffffff;
    width: 150px;
    height: 40px;
    background: #f73530;
    border-radius: 4px;
}
.joinpurch123 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.joinpurch123 >>> .el-button {
    width: 496px;
    height: 50px;
    background: #2084f9;
    border-radius: 6px;
    color: #ffffff;
}
.goodsde >>> .el-tabs__item {
    font-size: 18px;
    color: #333333;
}
.goodsde >>> .el-tabs__item.is-active {
    font-size: 18px;
    font-weight: bold;
    color: #0066eb;
}
.goodsde >>> .el-tabs__item:hover {
    font-size: 18px;
    font-weight: bold;
    color: #0066eb;
}
.goodsde >>> .el-tabs__active-bar {
    background-color: #0066eb;
}
.dvied {
    width: 4px;
    height: 18px;
    background: #0066eb;
}
.sourcecode {
    width: 530px;
    height: 93px;
    background: #f4f5fa;
    border-radius: 4px;
    text-align: left;
    /* padding-bottom:1px; */
    margin-top: 25px;
    /* margin-left:30px; */
    /* padding:10px 0 */
}
.sourcecode :nth-child(1) {
    /* width: 93px; */
    /* height: 93px; */
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
    /* margin:10px 0 */
}
.sourcecode :nth-child(2) {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
}
.paydialog >>> .el-form-item__content {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
}
.paydialog >>> .el-form-item__label {
    font-weight: 500;
    font-size: 16px;
    color: #808080;
}

/* .paydialog >>> .el-form-item__label {
    color: #333333;
    font-weight: bold;
    margin-right: 20px;
} */
.paydialog >>> .el-divider--horizontal {
    margin: -30px 0 10px 0;
}
.paydialog >>> .el-dialog__title {
    font-weight: bold;
    color: #0969bd;
}
.paydialog >>> .el-form-item {
    margin-bottom: 10px;
}
.goodsde {
    width: 920px;
    background: #fff;
    margin: 0px auto;
    padding: 30px 0;
}
.menuListBtn {
    float: left;
    margin-right: 50px;
    font-size: 18px;
}
.menuListBtn:hover {
    cursor: pointer;
    color: #0066eb;
    font-weight: bold;
}
.activeBtn {
    color: #0066eb;
    font-weight: bold;
}

.contentTitle {
    font-size: 18px;
    font-weight: bold;
    color: #1a1a1a;
    margin-top: 40px;
}
.product {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 37px;
}
.product::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #444444;
    border-radius: 50%;
    margin-right: 6px;
    margin-bottom: 2px;
}
.downBtn {
    background: #0066eb;
    border: none;
    border-radius: 0;
    color: #ffffff;
    height: 50px;
    padding: 8px 20px;
    line-height: 0;
}
.downBtn:hover {
    background: #0066eb;
    border: none;
    border-radius: 0;
    color: #ffffff;
    height: 50px;
    padding: 8px 20px;
    line-height: 0;
}
.downBtn:focus {
    background: #0066eb;
    border: none;
    border-radius: 0;
    color: #ffffff;
    height: 50px;
    padding: 8px 20px;
    line-height: 0;
}

.rightTopBox {
    width: 264px;
    height: 249px;
    background: #ffffff;
    margin: 30px 0 15px 15px;
}
.rightBottomBox {
    width: 264px;
    height: 500px;
    background: #ffffff;
    margin: 0 0 15px 15px;
}

.isFixedTop {
    padding: 20px 0;
    position: fixed;
    top: 0;
    background: #fff;
    width: 920px;
    z-index: 3;
    box-shadow: 0px 5px 15px rgb(0 0 0 / 10%);
}
@media screen and (max-width: 1500px) {
    .bgnk {
        width: 920px;
        margin: 30px auto;
        display: flex;
        justify-content: space-between;
    }
    .nobgnk {
        width: 920px;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
    }
    .goodsde {
        width: 920px;
        margin: 0px auto;
        padding: 30px 0;
    }
}
.btnpayimg {
    width: 17px;
    height: 17px;
    margin-right: 5px;
}
.paytypebtn >>> .el-radio__input {
    display: none;
}
.paytypebtn >>> .el-radio {
    margin-right: 0;
}
.paytypebtn >>> .el-radio__label {
    display: flex;
    align-items: center;
    padding: 0;
}
</style>