h5-draw-lots/src/pages/SaveShare.vue

<template>
  <div style=" height:100vh; width:100%;">
    <!-- 弹窗 -->
    <ShaerPopup :show="shaerShow" @closeMyself="cancelFrom" />
    <!-- 弹窗 -->

    <router-link :to="{path:'/'}">
      <div class="backhome" :style="`background:url('${backimg}');background-size: 100% auto;`"></div>
    </router-link>

    <div>
      <div v-if="item==0">
        <!-- 领取屏保 -->
        <div class="outer3 flex-col">
          <div class="haibao">
            <img class="haibao" src="~@/assets/saverShaerImg/haibao.jpg" alt />
          </div>
          <div class="mod2 flex-col">
            <div class="block1 flex-col">
              <div
                class="section1 flex-col"
                @click="()=>{this.shaerShow=true}"
                :style="`background-image: url(${shaerBut});`"
              ></div>
              <span :style="`background-image: url(${pressImage});`" class="info2"></span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <!-- 挂历 -->
        <div class="page flex-col">
          <div class="group1 flex-col">
            <div class="wrap3 flex-col">
              <img src="../assets/saverShaerImg/calendar.jpg" class="subhaibao" />
            </div>
            <div class="wrap5 flex-col">
              <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
              <div
                class="main5 flex-col"
                :style="`background-image: url(${shaerButRed});`"
                @click="()=>{this.shaerShow=true}"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SaveShare',
  components: {
    ShaerPopup: () => import('@/components/ShaerPopup.vue')
  },
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    cancelText: {
      type: String,
      default: '取消',
      required: false
    }
  },
  data() {
    return {
      item: null,
      shaerShow: false,
      backimg: require('../assets/saverShaerImg/back.png'),
      shaerBut: require('../assets/saverShaerImg/shaerLucky.png'),
      pressImage: require('../assets/saverShaerImg/PressImage.png'),
      shaerButRed: require('../assets/saverShaerImg/shaerLuckyRed.png'),
      pressLucky: require('../assets/saverShaerImg/PressLucky.png')
    }
  },

  watch: {
    '$route.query.states': {
      handler(val) {
        console.log('🚀 ~ file: SaveShare.vue ~ line 24 ~ val', val)

        if (val) {
          this.item = val
        } else {
          this.$router.go(-1)
        }
      },
      immediate: true // 页面加载时就启动
    }
  },
  methods: {
    cancelFrom() {
      this.shaerShow = false
    }
  }
}
</script>

<style lang="less" scoper>
.flex-col {
  display: flex;
  flex-direction: column;
}
.backhome {
  width: 75px;
  height: 42px;
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 19;
  background-repeat: no-repeat;
}
.outer3 {
  width: 100vw;
  height: 100vh;
  justify-content: flex-end;
  .haibao {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
  }
  .mod2 {
    z-index: 35;
    height: 210px;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
    width: 100vw;
    justify-content: flex-end;
    padding-bottom: 33px;
    align-items: center;
    .block1 {
      width: 180px;
      height: 113px;
      .section1 {
        height: 48px;
        border-radius: 8px;
        background-size: 100% auto;
        background-color: #fff;
        width: 180px;
        justify-content: center;
        align-items: center;
        border: 0;
      }
      .info2 {
        width: 152px;
        height: 54px;
        display: block;
        color: #fff;
        text-align: center;
        align-self: center;
        margin-top: 12px;
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
    }
  }
}

// 第二个页面
.page {
  // z-index: 1;
  // position: relative;
  // overflow-y: auto;
  // width: 100vw;
  // height: 100vh;

  .group1 {
    .wrap3 {
      z-index: 13;
      width: 98vw;
      overflow: hidden;
      align-self: center;
      margin-top: 1vw;
      margin-left: 0;
      .subhaibao {
        // position: absolute;
        width: 100%;
        left: 0;
        top: 0;
      }
    }
    .wrap5 {
      height: 137px;
      background-color: #efe9e0;
      margin-top: 19px;
      width: 100vw;
      justify-content: center;
      align-items: center;
      display: flex;
      .txt1 {
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 112px;
        height: 18px;
        margin-bottom: 80px;
      }
    }

    .main5 {
      background-size: 100% auto;
      background-repeat: no-repeat;
      height: 48px;
      border-radius: 8px;
      margin-top: 11px;
      width: 343px;
      background-color: #c1172d;
      border: 0;
      position: fixed;
      z-index: 15;
      bottom: 5vh;
    }
  }
}
</style>