web-base-h5/components/newGift.vue

<template>
  <u-popup :show="newVip"
           class="notice"
           width="70%"
           @close="newVip = false"
           closeable
           round="10"
           mode="center">
    <div class="kuang">
      <!-- <i class="el-icon-close cha"
         @click="close"></i> -->
      <!-- <el-carousel @change="carouselHand"
                   :autoplay='false'
                   indicator-position="outside"
                   :height='bannerHeight + "px"'
                   class="switerAll"
                   arrow='never'
                   ref='swiper'
                   style="width:548px;margin:0 auto">
        <div class="left_arr"
             @click="arrowClick('prev')">
          <img src="@/static/images/arrowl.png"
               alt="">
        </div>
        <div class="right_arr"
             @click="arrowClick('next')">
          <img src="@/static/images/arrowr.png"
               alt="">
        </div>
        <el-carousel-item v-for="(item,index) in cGiftList"
                          :key="index">
          <div class="kuang_t">{{item.plan}}</div>
          <div class="n_kuang">
            <div class="n_kuang_t">
              <div v-if="cGiftList.length>1"
                   class="tit">{{item.actName}}</div>
              <div v-for="(itm,indx) in item.pgpList"
                   :key="indx"
                   class="bao">
                <img class="img_i"
                     :src="itm.cover"
                     alt="">
                <div class="bao_r">
                  <div class="bao_rl">
                    <div>{{itm.productName}}</div>
                    <div class="num">X{{itm.quantity}}</div>
                  </div>
                  <div class="price">￥{{itm.price}}</div>
                </div>
              </div>
            </div>

          </div>
        </el-carousel-item>
      </el-carousel> -->
      <view class="nei">
        <swiper class="swiper-box"
                :indicator-dots="true"
                :current="swiperDotIndex"
                @change="getIndex">
          <swiper-item v-for="(item, index) in cGiftList"
                       :key="index">
            <div class="kuang_t">{{item.plan}}</div>
            <div class="n_kuang">
              <div class="n_kuang_t">
                <div v-if="cGiftList.length>1"
                     class="tit">{{item.actName}}</div>
                <div v-for="(itm,indx) in item.pgpList"
                     :key="indx"
                     class="bao">
                  <img class="img_i"
                       :src="itm.cover"
                       alt="">
                  <div class="bao_r">
                    <div class="bao_rl">
                      <div>{{itm.productName}}</div>
                      <div class="num">X{{itm.quantity}}</div>
                    </div>
                    <div class="price">￥{{itm.price}}</div>
                  </div>
                </div>
              </div>

            </div>
          </swiper-item>
        </swiper>

        <div class="btns"
             @click="changeGift">{{ '立即领取' }}</div>
      </view>
    </div>
  </u-popup>
  <!-- </van-overlay> -->
</template>

<script>
import * as act from '@/config/bonus.js'
export default {
  name: 'Title',
  props: {
    // isAgree: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {
      current: 0,
      mode: 'default',
      dotsStyles: {},
      swiperDotIndex: 0,
      newVip: false,
      toChange: false,
      cGiftList: [],
      isChange: '',
      bannerIndex: 0,
      bannerHeight: 0,
    }
  },
  mounted() {},
  methods: {
    carouselHand(index) {
      this.bannerIndex = index
    },
    getIndex(e) {
      this.bannerIndex = e.detail.current
    },
    getGiftList(val) {
      act
        .getGiftPack({
          pkBaseId: val,
        })
        .then((res) => {
          if (res.code == 200) {
            if (res.data != undefined) {
              this.newVip = true
              this.cGiftList = res.data
            } else {
              this.newVip = false
            }
          }
        })
    },
    close() {
      this.newVip = false
    },
    changeGift() {
      let rows = this.cGiftList[this.bannerIndex]
      // this.$router.push({
      //   path: '/newGiftPay',
      //   query: {
      //     data: JSON.stringify(rows)
      //   },
      // })
      uni.navigateTo({
        url: '/pages/other/newGiftPay?data=' + JSON.stringify(rows),
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.notice ::v-deep .u-popup__content {
  width: 690rpx;
  background: none;
}
.kuang {
  width: 100%;
  // margin: 0 auto;
  // padding: 0 20rpx;
  // background: #fff;
  background: url('~@/static/images/nGift.png') no-repeat;
  background-size: 100% 100%;
  height: 500px;
  // text-align: center;
  // margin-top: 150px;
  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  position: relative;

  .cha {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 25px;
    color: #fff;
  }
}
.swiper-box {
  height: 400px;
}
.nei {
  padding: 0 20rpx;
}
.kuang_t {
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 34px;
  margin: 20px 0;
  // padding-top: 40px;
}
.n_kuang {
  border-radius: 8px;
  border: 2px dashed #ccc;
  // height: 330px;
  // width: 388px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  .n_kuang_t {
    flex: 1;
    overflow: auto;
    overflow-x: hidden;
    // ::-webkit-scrollbar {
    //   width: 0 !important;
    // }
    // ::-webkit-scrollbar {
    //   width: 0 !important;
    //   height: 0;
    // }
  }
  .tit {
    font-size: 24px;
    // margin: 12px 0;
    margin-top: 12px;
    font-weight: 600;
    color: #fff;
  }
}
.btns {
  background: #ffb95c;
  border-radius: 10px;
  padding: 10px;
  // width: 388px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
  // display: none;
}
.bao {
  margin-top: 12px;
  display: flex;
  background: rgba(207, 213, 250, 0.4);
  border-radius: 8px;
  margin-bottom: 10px;
  align-items: center;
  padding: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #333333;
  .bao_r {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    .bao_rl {
      display: flex;
      flex-direction: column;
      .num {
        font-size: 12px;
        margin-top: 10px;
        font-weight: 400;
        color: #333333;
      }
    }
    .price {
      font-size: 16px;

      font-weight: 600;
      color: #f64e49;
    }
  }
}
.img_i {
  width: 44px;
  height: 44px;
  margin-right: 10px;
}
* {
  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}
.zhuanpan1 {
  ::v-deep .el-dialog {
    background: transparent !important;
    box-shadow: none;
  }
}
.switerAll {
  .left_arr {
    position: absolute;
    top: 55%;
    left: 20px;
    z-index: 10;
    img {
      width: 44px;
      height: 44px;
    }
  }
  .right_arr {
    position: absolute;
    top: 55%;
    right: 20px;
    z-index: 10;
    img {
      width: 44px;
      height: 44px;
    }
  }
}
</style>
<style>
.kuang .el-icon-arrow-left {
  font-size: 18px;
  font-weight: 600;
}
.kuang .el-icon-arrow-right {
  font-size: 18px;
  font-weight: 600;
}
.kuang .el-carousel__arrow {
  top: 60%;
}
.kuang .el-carousel__button {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  opacity: none;
}
.kuang .el-carousel__indicator.is-active button {
  width: 50px;
  border-radius: 10px;
}
.kuang .el-carousel__indicators--outside .el-carousel__indicator:hover button {
  opacity: 1;
}
::v-deep .uni-swiper-dots-horizontal {
  bottom: 0px;
}
</style>