<template>
  <div>
    <div style="margin: 20px 20px">
      <el-tabs v-model="activeName" @tab-click="handleChangeBrand" type="card">
        <el-tab-pane label="推广资源位" name="1">
          <div>
            <img src="../../../assets/img/ziyuanwei-logo.jpg" alt="">
          </div>
          <!--e淘宝-->
          <div>
            <p style="margin: 10px auto;font-weight: bold;font-size: 17px">TV版<span style="color: #ff2315">（面向消费者展示）</span></p>
            <el-row :gutter="10">
              <el-col  :span="8" v-for="(item,index) in etbList" ><div @click="goback(item.advId)" class="grid-content bg-purple" style="margin-top: 10px;position: relative;cursor: pointer">
                <el-card :body-style="{ padding: '0px' }"  shadow="never" >
                  <img  style="width: 100%" :src="item.mainImg" class="image">
                  <div style="display: flex;align-items: center;justify-content: space-between;margin: 10px 5px 10px 10px">
                    <div>
                      <p>{{item.title}}</p>
                      <p style="color: #FF4400;margin-top: 10px;font-weight: bold">￥{{item.salePrice}}</p>
                    </div>
                    <div class="btn" >去投放</div>
                  </div>
                  <div>
                    <img v-if="item.status==0" style="position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);"  src="../../../assets/img/ziyuanwei-node.png" alt="">
                  </div>
                </el-card>
              </div></el-col>
            </el-row>
            <el-divider></el-divider>
            <p style="margin: 10px auto;font-weight: bold;font-size: 17px">分销APP <span style="color: #ff2315">(面向经销商展示)</span> </p>
            <el-row :gutter="10">
              <el-col :span="8" v-for="item in appList" >
                <div @click="goback(item.advId)" class="grid-content bg-purple" style="margin-top: 10px;position: relative;cursor: pointer">
                <el-card :body-style="{ padding: '0px' }"  shadow="never">
                  <img style="width: 100%" :src="item.mainImg" class="image">
                  <div style="display: flex;align-items: center;justify-content: space-between;margin: 10px 10px 10px 10px">
                    <div>
                      <p>{{item.title}}</p>
                      <p style="color: #FF4400;margin-top: 10px;font-weight: bold">￥{{item.salePrice}}</p>
                    </div>
                    <div class="btn" >去投放</div>
                  </div>
                  <div>
                    <img v-if="item.status==0" style="position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);"  src="../../../assets/img/ziyuanwei-node.png" alt="">
                  </div>
                </el-card>
              </div>
          </el-col>
            </el-row>
            <el-divider></el-divider>
            <p style="margin: 10px auto;font-weight: bold;font-size: 17px">分销PC<span style="color: #ff2315">(面向经销商展示)</span> </p>
            <el-row :gutter="10">
              <el-col :span="8" v-for="item in pcList"><div  @click="goback(item.advId)" class="grid-content bg-purple" style="margin-top: 10px;position: relative;cursor: pointer">
                <el-card :body-style="{ padding: '0px' }"  shadow="never">
                  <img style="width: 100%" :src="item.mainImg"  class="image">
                  <div style="display: flex;align-items: center;justify-content:space-between;margin: 10px 10px 10px 10px">
                    <div>
                      <p>{{item.title}}</p>
                      <p style="color: #FF4400;margin-top: 10px;font-weight: bold">￥{{item.salePrice}}</p>
                    </div>
                    <div class="btn" >去投放</div>
                  </div>
                  <div>
                    <img v-if="item.status==0" style="position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);"  src="../../../assets/img/ziyuanwei-node.png" alt="">
                  </div>
                </el-card>
              </div></el-col>
            </el-row>
            <el-divider></el-divider>
            <p style="margin: 10px auto;font-weight: bold;font-size: 17px">E淘商城小程序<span style="color: #ff2315">（面向消费者展示）</span></p>
            <el-row :gutter="10">
              <el-col :span="8" v-for="item in mallList"><div  @click="goback(item.advId)" class="grid-content bg-purple" style="margin-top: 10px;position: relative;cursor: pointer">
                <el-card :body-style="{ padding: '0px' }"  shadow="never">
                  <img style="width: 100%" :src="item.mainImg"  class="image">
                  <div style="display: flex;align-items: center;justify-content:space-between;margin: 10px 10px 10px 10px">
                    <div>
                      <p>{{item.title}}</p>
                      <p style="color: #FF4400;margin-top: 10px;font-weight: bold">￥{{item.salePrice}}</p>
                    </div>
                    <div class="btn" >去投放</div>
                  </div>
                  <div>
                    <img v-if="item.status==0" style="position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);"  src="../../../assets/img/ziyuanwei-node.png" alt="">
                  </div>
                </el-card>
              </div></el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的推广" name="2">
          <el-row :gutter="10">
          <el-col :span="8" v-for="(item,index) in myList"><div class="grid-content bg-purple" style="margin-top: 20px;position: relative" @click="seeDetails(item.orderId)">
            <el-card :body-style="{ padding: '0px' }"  shadow="never" style="position: relative;cursor: pointer" >
                <img style="width: 100%" :src="item.mainImg" class="image">
              <div style="display: flex;align-items: center;justify-content: space-between;margin: 10px 10px">
                <div>
                <p style="color: #3A3A3A;font-weight: 600">{{item.title}}</p>
                <p style="margin-top: 6px;font-size: 12px;color: #606266;">投放时间：{{item.dateMsg}} </p>
              </div>
                <div class="btn1" >查看</div>
              </div>
              <div class="text-state" :style="{'background':stateColor[item.auditStatus],'width':item.auditStatus==3||item.auditStatus==4?'89px':'60px'}">
                {{state[item.auditStatus]}}
              </div>
              <!--<div class="text-state1">-->
                <!--查看详情-->
              <!--</div>-->
            </el-card>
          </div></el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        top="3vh"
        title="推广详情"
        :visible.sync="showModel"
        width="800px"
      >
        <el-row>
          <el-col :span="10"><div class="grid-content bg-purple" style="position: relative">
            <img style="width: 300px;height: 300px;border: 1px solid #303133" :src="infoData.mainImg" >
            <p style="margin-top: 10px;color: #303133;"> <i class="el-icon-headset"></i> &nbsp咨询电话：{{infoData.contactsMsg}}</p>
            <div>
              <img v-if="false" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"  src="../../../assets/img/ziyuanwei-node.png" alt="">
            </div>
          </div>
          </el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light" style="line-height: 40px;margin-left: 10px">
            <div style="font-weight: bold;font-size: 22px">{{infoData.title}}
              <div class="text-state" :style="{'background':stateColor[infoData.auditStatus],'width':(infoData.auditStatus==3||infoData.auditStatus==4)?'89px':'60px'}">
                {{state[infoData.auditStatus]}}
              </div>
            </div>
            <p>投放平台：{{infoData.portMsg}}</p>
            <p>类型：{{infoData.typeMsg}}</p>
            <p>内容制作说明：{{infoData.context}}</p>
            <p>投放时间：{{infoData.dateMsg}}</p>
            <p>价格：<span  style="font-size: 16px;color: #147ef9;">￥{{infoData.salePrice}} </span> <span style="text-decoration-line: line-through;color: #A8ABB2;">￥{{infoData.productPrice}}</span></p>
            <p style="margin-top: 125px" v-if="false">
              <el-button type="primary" style="width:201px;text-align: center" @click="showType">立即投放</el-button>
            </p>
          </div></el-col>
        </el-row>
        <el-divider ></el-divider>
        <p style="width: 100%;height: 50px;line-height: 50px;background: #f0f0f0;text-indent: 1em;margin-bottom: 15px" v-if="infoData.auditContext">理由：{{infoData.auditContext}}</p>
        <div v-if="infoData.auditStatus==3||infoData.auditStatus==4">
          <!--投放视频-->
          <div v-if="infoData.type==1">
            <div>
              <p>投放视频</p>
              <div class="imgsizeCom compalin_img" style="margin-top: 10px">
                <uploadImg ref="uploadImgRefVIdeo" @uploadResult="uploadResultVIdeo"
                           :isMultiple="true"   :limitNum='1' :uploadSize="51200" uploadType="video"></uploadImg>
              </div>
              <div v-if="infoData.isSpecial==1||infoData.isSpecial==2">
                <p style="margin:20px auto ">置顶商品（{{seckenList.length}}/{{infoData.isSpecial==2?2:1}}）</p>
                <div v-if="seckenList.length>0">
                  <div class="box-shop" v-for="(item,index) in seckenList">
                    <el-row>
                      <el-col :span="6">
                        <img :src="item.mainImg" style="width: 80px;height: 80px" alt="">
                      </el-col>
                      <el-col :span="12" style="line-height: 20px">
                        <div style="margin-top: 10px">{{item.skuModel||item.model}}</div>
                        <div>
                          <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                          <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                        </div>
                      </el-col>
                    </el-row>
                    <div style="position: absolute;top: 10px;right: 10px" @click="delList(index)">
                      <img src="@/assets/img/sale/set4.png" style="cursor: pointer" alt="" >
                    </div>
                  </div>
                </div>
                <div v-else>
                  <img @click="showShopList" style="cursor: pointer" src="./addShop.jpg" alt="">
                </div>
              </div>
            </div>
          </div>
          <!--投放图片-->
          <div v-if="infoData.type==4">
            <div>
              <p>投放图片</p>
              <div class="imgsizeCom compalin_img" style="margin-top: 30px">
                <uploadImg ref="uploadImgRef" @uploadResult="uploadResult"
                           :isMultiple="true"  :uploadWH="uploadWHList"  :limitNum='1'></uploadImg>
              </div>
              <div v-if="infoData.isSpecial==1||infoData.isSpecial==2">
                <p style="margin:20px auto ">置顶商品（{{seckenList.length}}/{{infoData.isSpecial==2?2:1}}）</p>
                <div v-if="seckenList.length>0">
                  <div class="box-shop" v-for="(item,index) in seckenList">
                    <el-row>
                      <el-col :span="6">
                        <img :src="item.mainImg" style="width: 80px;height: 80px" alt="">
                      </el-col>
                      <el-col :span="16" style="line-height: 20px">
                        <div style="margin-top: 10px">{{item.skuModel||item.model}}</div>
                        <div>
                          <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                          <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                        </div>
                      </el-col>
                    </el-row>
                    <div style="position: absolute;top: 10px;right: 10px" @click="delList(index)">
                      <img src="@/assets/img/sale/set4.png" style="cursor: pointer" alt="" >
                    </div>
                  </div>
                </div>
                <div v-else>
                  <img @click="showShopList" style="cursor: pointer" src="./addShop.jpg" alt="">
                </div>
              </div>
            </div>
          </div>
          <!--商品类-->
          <div v-if="infoData.type==3">
            <div>
              <p style="margin:20px auto ">已选商品（{{seckenList.length}}/{{infoData.setNum}}）</p>
              <div>

                <el-row>
                  <el-col :span="12"  v-for="(item,index) in seckenList" :key="index">
                    <div class="box-shop">
                      <el-row>
                        <el-col :span="6">
                          <img :src="item.mainImg" style="width: 80px;height: 80px" alt="">
                        </el-col>
                        <el-col :span="12" style="line-height: 20px">
                          <div style="margin-top: 10px">{{item.skuModel}}</div>
                          <div>
                            <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                            <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                          </div>
                        </el-col>
                      </el-row>
                      <div style="position: absolute;top: 10px;right: 10px" @click="delShop(index)">
                        <img src="@/assets/img/sale/set4.png" style="cursor: pointer" alt="" >
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div  v-if="seckenList.length<infoData.setNum">
                <img @click="showShopList" style="cursor: pointer;width: 372px" src="./addShop.jpg" alt="">
              </div>
            </div>
            <div v-if="infoData.isAdvGoodsToImgPath==1">
              <p style="margin-top: 20px">上传效果图：建议尺寸300*300，大小1MB内（非必填项）</p>
              <div class="imgsizeCom compalin_img" style="margin-top: 30px">
                <uploadImg ref="uploadImgRef" @uploadResult="uploadResult"
                           :isMultiple="true" :uploadWH="uploadWHList"   :limitNum='1'></uploadImg>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div v-if="infoData.type==1">
            <p style="margin-bottom: 15px">投放视频</p>
            <video style="height: 300px;height: 200px" v-if="infoData.advVideoPath" :src="infoData.advVideoPath" controls="controls">
              您的浏览器不支持 video 标签。
            </video>
          </div>
          <div v-if="infoData.type==4">
            <p style="margin-bottom: 15px">投放图片</p>
            <img style="height: 300px;height: 200px"  :src="infoData.advImgPath" alt="">
          </div>
          <div v-if="infoData.type==3">
            <p style="margin-bottom: 15px">投放商品</p>
            <el-row>
              <el-col :span="12"  v-for="(item,index) in infoData.advGoodsMap" :key="index">
                <div class="box-shop">
                  <el-row>
                    <el-col :span="6">
                      <img :src="item.mainImg" style="width: 80px;height: 80px" alt="">
                    </el-col>
                    <el-col :span="12" style="line-height: 20px">
                      <div style="margin-top: 10px">{{item.model}}</div>
                      <div>
                        <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                        <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
            <div v-if="infoData.isAdvGoodsToImgPath==1">
              <div class="imgsizeCom compalin_img" style="margin-top: 30px">
                <img style="width: 500px" :src="infoData.advGoodsImgPath" alt="">
              </div>
            </div>
          </div>
          <div v-if="infoData.isSpecial>0&&infoData.isSpecialSkuIdMap">
            <el-divider ></el-divider>
            <p style="margin:20px auto ">置顶商品（ {{infoData.isSpecialSkuIdMap.length}}/{{infoData.isSpecial}}）</p>
            <div>

              <el-row>
                <el-col :span="12"  v-for="(item,index) in infoData.isSpecialSkuIdMap" :key="index">
                  <div class="box-shop">
                    <el-row>
                      <el-col :span="6">
                        <img :src="item.mainImg" style="width: 80px;height: 80px" alt="">
                      </el-col>
                      <el-col :span="16" style="line-height: 20px">
                        <div style="margin-top: 10px">{{item.skuModel||item.model}}</div>
                        <div>
                          <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                          <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" v-if="infoData.auditStatus==3||infoData.auditStatus==4">
          <el-button type="primary" @click="save">提交审核</el-button>
          <el-button @click="showModel = false">取消</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :close-on-click-modal="false"
        top="2vh"
        title="投放设置"
        :visible.sync="dialogVisible"
        width="800px"
      >
        <div style="display: flex">
          <div class="search-item">
            <el-input class="input"  style="width: 300px" clearable v-model="params.search"
                      placeholder="请输入SPU ID/SPU型号/SKU型号"></el-input>
          </div>
          <div style="margin-left: 10px">
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </div>
        </div>
        <el-row :gutter="10">
          <el-col  :span="6" v-for="(item,index) in actSkuList"><div class="grid-content bg-purple" style="margin-top: 10px;position: relative" >
            <el-card :body-style="{ padding: '0px' }"  shadow="never" >
              <img  style="width: 100%" :src="item.mainImg" class="image">
              <div style="margin: 10px 10px;line-height: 20px">
                <div>{{item.skuModel}}</div>
                <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
              </div>
              <div>
                <div style="position: absolute;top: 10px;left: 10px">
                  <img src="./set3.png" style="cursor: pointer" alt="" v-if="item.checken" @click="addShop(item,3)">
                  <img src="./set1.png" style="cursor: pointer" alt="" v-else="item.checken" @click="addShop(item,1)">
                </div>
              </div>
            </el-card>
          </div>
          </el-col>
        </el-row>
        <pagination
          @eventCurrentChange="eventCurrentChange"
          :total="total"
          :pageSize="params.pageSize"
          :currentPage="params.pageNum"
          :pagerCount='5'
          layout="total, prev, pager, next, jumper"
        ></pagination>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false,seckenList=[]">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定({{seckenList.length}}/{{infoData.type==3?infoData.setNum:infoData.isSpecial==2?2:1}})</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import pagination from "@/components/common/pagination";
  import uploadImg from "@/components/common/uploadImg"
  export default {
    components: {
      uploadImg,pagination
    },
    name: "ziyuanwei",
    data(){
      return{
        uploadWHList:[],
        dialogVisible:false,
        seckenList:[],
        showModel:false,
        mallList:[],
        myList:[],
        etbList:[],
        appList:[],
        pcList:[],
        state:['审核中','推广中','推广结束','审核不通过','未上传资料','','未支付','待推广'],
        stateColor:['#409eff','#67c23a','#c0c4cc','#f53636','#f53636','','#e29f39','#e29f39'],
        activeName:'1',
        infoData:{},
        paramsCompalin:{
          "voucherImage":"",//多张图片逗号隔开
        },
        params: {
          pageSize: 8,
          pageNum: 1,
          search: "",
        },
        total: 0,
        actSkuList:[],
      }
    },
    mounted(){
      if(this.$route.query.type){
        this.activeName='2'
        this.myAdvlist()
      }
      this.initData()
    },
    methods:{
      delShop(index){
        this.seckenList.splice(index,1)
      },
      uploadResult(res){
        this.paramsCompalin.voucherImage = res?res:''
      },
      save(){
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let p ={
          advId:this.infoData.advId,
          text:this.paramsCompalin.voucherImage
        }
        if(this.infoData.type==3){
          if(this.seckenList.length>0){
            p.text = (this.seckenList.map(item=>item.skuId)).join(',')
          }
          if(this.infoData.isAdvGoodsToImgPath==1){
            p.advGoodsImgPath=this.paramsCompalin.voucherImage
          }
        }
        if(this.infoData.isSpecial==1&&this.seckenList.length>0){
          p.isSpecialSkuId=this.seckenList[0].skuId
        }
        if(this.infoData.isSpecial==2&&this.seckenList.length>0){
          p.isSpecialSkuId=(this.seckenList.map(item=>item.skuId)).join(',')
        }
        p.orderDetailId=this.infoData.orderDetailId
        p.orderId=this.infoData.orderId
        this.$axios
          .post("/etaoadv/againAdv",p)
          .then(res => {
            if (res.data.code == 200) {
              this.initData()
              this.myAdvlist()
              this.showModel=false
              loading.close()
            }else {
              this.$message.error(res.data.message)
              loading.close()
            }
          })
          .catch(() => {});
      },
      delList(index){
        this.seckenList.splice(index,1)
      },
      addShop(data,type){
        // 单选
        if(this.infoData.isSpecial==1){
          this.actSkuList.forEach(item=>{
            item.checken=false
          })
          this.$set(data,'checken',true)
          this.seckenList=[data]
          return
        }
        if(type==1){
          if(this.infoData.type==3){
            if(this.seckenList.length==this.infoData.setNum){
              this.$message.error(`最多可投放${this.infoData.setNum}个商品`)
              return
            }
          }
          if(this.infoData.isSpecial==2){
            if(this.seckenList.length==2){
              this.$message.error(`最多可投放2个商品`)
              return
            }
          }
          this.seckenList.push(data)
          this.$set(data,'checken',true)
        }else {
          this.$set(data,'checken',false)
          if(this.seckenList.length>0){
            let index = this.seckenList.findIndex(item=>data.skuId==item.skuId)
            this.seckenList.splice(index,1)
          }
        }
      },
      onSearch() {
        this.params.pageNum = 1;
        this.getActSkuList();
      },
      getActSkuList() {
        this.$axios.post("/etaoadv/productList", {
          ...this.params
        }).then(res => {
          let { code, data } = res.data;
          if (code === 200) {
            this.total = parseInt(data.total);
            data.list.forEach(item=>{
              item.checken=false
              this.seckenList.forEach(e=>{
                if(item.skuId==e.skuId){
                  item.checken=true
                }
              })
            })
            this.actSkuList = data.list;
          }else {
            this.actSkuList=[]
            this.total=0
          }
        })
      },
      eventSizeChange(e) {
        this.params.pageSize = e;
        this.getActSkuList();
      },
      eventCurrentChange(e) {
        this.params.pageNum = e;
        this.getActSkuList();
      },
      showShopList(){
        this.params.pageNum=1
        this.getActSkuList()
        this.dialogVisible=true
      },
      uploadResultVIdeo(res){
        this.paramsCompalin.voucherImage = res?res:''
      },
      handleChangeBrand(){
        if(this.activeName==2){
          this.myAdvlist()
        }
      },
      seeDetails(orderId){
        this.$axios
          .get("/etaoadv/getMyAdvInfo?orderId="+orderId)
          .then(res => {
            if (res.data.code == 200) {
              this.seckenList=[]
              this.infoData=res.data.data
              if(this.infoData.advSizes){
                this.uploadWHList=this.infoData.advSizes
              }
              this.showModel=true
                if(this.infoData.isSpecialSkuIdMap&&this.infoData.isSpecialSkuIdMap.length>0){
                  this.seckenList=this.infoData.isSpecialSkuIdMap
                }
              if(this.infoData.type==1&&this.infoData.advVideoPath){
                this.$nextTick(()=>{
                  if(!!this.$refs.uploadImgRefVIdeo){
                    this.$refs.uploadImgRefVIdeo.imgsJson.supMainImgs =[{url:this.infoData.advVideoPath}]
                  }
                })
                this.paramsCompalin.voucherImage=this.infoData.advVideoPath
              }
              if(this.infoData.type==4&&this.infoData.advImgPath){
                this.$nextTick(()=>{
                  if(!!this.$refs.uploadImgRef){
                    this.$refs.uploadImgRef.imgsJson.supMainImgs =[{url:this.infoData.advImgPath}]
                  }
                })
                this.paramsCompalin.voucherImage=this.infoData.advImgPath
              }
              if(this.infoData.type==3&&this.infoData.advGoodsMap){
                this.seckenList=this.infoData.advGoodsMap
              }
            }
          })
          .catch(() => {});
      },
      myAdvlist(){
        this.$axios
          .post("/etaoadv/myAdvlist")
          .then(res => {
            if (res.data.code == 200) {
              this.myList=res.data.data.list
            }else {
              this.myList=[]
            }
          })
          .catch(() => {});
      },
      goback(advId) {
        this.$router.push("/marketing/ziyuanweiDetails?advId="+advId);
      },
      initData(){
        this.$axios
          .post("/etaoadv/list")
          .then(res => {
            if (res.data.code == 200) {
              this.etbList=res.data.data.etbList
              this.appList=res.data.data.appList
              this.pcList=res.data.data.pcList
              this.mallList=res.data.data.mallList
            }
          })
          .catch(() => {});
      },
    },
  };
</script>

<style scoped>
  .box-shop{
    margin-bottom: 10px;
    position: relative;
    width: 360px;
    min-height: 80px;
    background: #FFFFFF;
    border: 1px solid #E4E7ED;
  }
  .text-state2{
    font-size: 14px;
    color: #FFFFFF;
    height: 24px;
    line-height: 24px;
    text-align: center;
    z-index: 9;
    border-radius: 3px;
  }
  .text-state1{
    position: absolute;
    bottom: 50px;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 41px;
    width: 310px;
    height: 41px;
    background: rgba(0,0,0,0.6);
    cursor: pointer;
  }
  .text-state{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    color: #FFFFFF;
    height: 24px;
    line-height: 24px;
    text-align: center;
    z-index: 9;
    border-radius: 3px;
  }
  .btn1{
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    color: #606266;
    text-align: center;
    line-height: 28px;
    width: 52px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #DCDFE6;
  }
 .btn{
   cursor: pointer;
   text-align: center;
   line-height: 28px;
   font-weight: 600;
   font-size: 14px;
   color: #FFFFFF;
   width: 66px;
   height: 28px;
   background: #FF6602;
   border-radius: 8px;
 }
</style>
