hlm_pl_mall_h5/pages/home/marketmanage/Marketegg.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <home-base :show="false" >
    <view class="div home-marketegg">
      <view class="div top-main" :style="'background-image:url('+marketeggbg+')'">
        <view class="div tops">
          <image mode="aspectFit" class="img" :src="marketegglogo"
            style="width:320px;height:179px">
        </view>
        <view class="div tops_pic">
          <image mode="aspectFit" class="img" :src="marketegglamp"
            style="width:287px;height:100px">
        </view>
      </view>
      <view class="div center_sta ">
        <section class="stage ">
          <view class="div wide-wrapper">
            <view class="div carousel">
              <view class="div carousel-item" @click="selectEgg(1)">
                <image mode="aspectFit" class="img selected" v-if="active==1"
                  :src="marketegg1" style="width:200px;height:200px">
                  <image mode="aspectFit" class="img" v-else :src="marketegg0"
                    style="width:106px;height:136px">
              </view>
              <view class="div carousel-item" @click="selectEgg(2)">
                <image mode="aspectFit" class="img selected" v-if="active==2"
                  :src="marketegg1" style="width:200px;height:200px">
                  <image mode="aspectFit" class="img" v-else :src="marketegg0"
                    style="width:106px;height:136px">
              </view>
              <view class="div carousel-item" @click="selectEgg(3)">
                <image mode="aspectFit" class="img selected" v-if="active==3"
                  :src="marketegg1" style="width:200px;height:200px">
                  <image mode="aspectFit" class="img" v-else :src="marketegg0"
                    style="width:106px;height:136px">
              </view>
            </view>
          </view>
        </section>
      </view>
      <view class="div common-btn ds-button-large" @click="reset" v-if="canDraw">再来一次</view>
      <view class="div common-btn ds-button-large" v-else>机会用完了</view>

      <view class="div info-block">
        <view class="div info-area">
          <view class="ul activity-info" v-if="marketmanage_info">
            <view>活动名称：
              <view class="div activity-info-content">{{marketmanage_info.marketmanage_name}}</view>
            </view>
            <view>活动介绍：
              <view class="div activity-info-content">{{marketmanage_info.marketmanage_detail}}</view>
            </view>
            <view>活动有效时间：
              <view class="div activity-info-content">
                {{marketmanage_info.marketmanage_begintime_text}}至{{marketmanage_info.marketmanage_endtime_text}}</view>
            </view>
            <view>活动奖项设置：
              <view class="div activity-info-content">
                <view class="div" v-for="(marketmanageaward,index) in marketmanageaward_list" :key="index">
                  {{marketmanageaward.marketmanageaward_level}}等奖{{marketmanageaward.marketmanageaward_probability}}%：{{marketmanageaward.marketmanageaward_text}}
                </view>
              </view>
            </view>

          </view>
        </view>
      </view>
    </view>
    <uni-popup background-color="#fff" ref="confirm" type="dialog">
      <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content"
        :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
    </uni-popup>
  </home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import { env } from '../../../static/config'
  import HomeBase from '../HomeBase'
  import {
    getMarketmanageInfo,
    addMarketmanagelog
  } from '../../../api/homeMarketmanage'
  import {
    getMemberInfo
  } from '../../../api/member'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: 'Marketegg',
    data() {
      return {
        dialog: {},
        active: false,
        marketmanage_id: 0,
        marketmanage_info: false,
        marketmanageaward_list: false,
        isResult: false,
        drawResult: false,
        drawTitle: '谢谢参与',
        drawContent: '哎呀，肯定姿势不对！',
        canDraw: false,
        countLeft: 0,
        count: 0,
        drawInfo: false,
		marketeggbg:env.SITE_URL+'/uploads/home/h5/home/home-marketegg-bg.png',
		marketegglogo:env.SITE_URL+'/uploads/home/h5/home/home-marketegg-logo.png',
		marketegglamp:env.SITE_URL+'/uploads/home/h5/home/home-marketegg-lamp.gif',
		marketegg0: env.SITE_URL+'/uploads/home/h5/home/home-marketegg-0.png',
		marketegg1: env.SITE_URL+'/uploads/home/h5/home/home-marketegg-1.gif',
      }
    },
    components: {
      HomeBase,
    },
    computed:{
      fontSize(){
        return getFontSize()
      },
      ...mapState({
        isOnline: state => state.member.isOnline,
        token: state => state.member.token,
        info: state => state.member.info
      })
    },
    onLoad: function(option) {
      this.marketmanage_id = option.marketmanage_id
      if (!this.marketmanage_id) {
        uni.showToast({
          icon: 'none',
          title: '参数错误'
        })
        return
      }

      getMarketmanageInfo(this.marketmanage_id, this.token).then(res => {
        this.marketmanage_info = res.result.marketmanage_info
        this.marketmanageaward_list = res.result.marketmanageaward_list
        this.canDraw = res.result.can_draw
        this.countLeft = res.result.count_left
        this.drawContent = this.marketmanage_info.marketmanage_failed
        if (!this.canDraw) {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      }).catch(function(error) {
        uni.showToast({
          icon: 'none',
          title: error.message
        })
      })
    },
    methods: {
      closeDialog() {},
      confirmDialog(value) {},
      ...mapMutations({
        memberUpdate: 'memberUpdate'
      }),
      selectEgg(index) {
        if (this.active) return
        if (!this.isOnline) {
          uni.navigateTo({
            url: '/pages/home/memberlogin/Login'
          })
          return
        }
        if (!this.canDraw) return
        this.active = index
        addMarketmanagelog(this.marketmanage_id).then(res => {
          this.canDraw = res.result.can_draw
          this.countLeft = res.result.count_left

          if (res.result.draw_result) { // 中奖
            this.drawResult = true
            this.drawInfo = res.result.draw_info
            this.drawTitle = res.result.draw_info.marketmanageaward_level + '等奖'
            this.drawContent = res.result.draw_info.marketmanageaward_text
          }

          this.dialog = {
            title: this.drawTitle,
            content: this.drawContent
          }
          this.$refs.confirm.open()
        }).catch(function(error) {
          uni.showToast({
            icon: 'none',
            title: error.message
          })
        })
      },
      reset() {
        // 重置
        this.active = false
        this.drawResult = false
        this.drawTitle = '谢谢参与'
        this.drawContent = this.marketmanage_info.marketmanage_failed
      }
    },
    watch: {

    },

    mounted() {

    }
  }
</script>

<style scoped lang="scss">
  .home-marketegg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #FFE881;
    overflow-y: auto;
  }

  .top-main {
    width: 100%;
    margin: 0rem auto 0;
    text-align: center;
    position: relative;
    z-index: 80;
    background-size: 100%;
    height: 14rem;
  }

  .tops {
    width: 100%;
    margin: 0 auto 0;
    text-align: center;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 9;
  }

  .tops .img {
    width: 80%;
    margin: 15% auto 0;
  }

  .tops_pic {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 4%;
    left: 0%;
    z-index: 9;
  }

  .tops_pic .img {
    width: 60%;
    margin: 0 auto;
  }

  .wide-wrapper {
    width: 100%;
    margin: 0 auto;
  }

  .carousel {
    position: relative;
    overflow: hidden;
    padding: 5%;
    display: flex;

    .carousel-item {
      flex: 1;
      text-align: center;
      position: relative;
      height: 136px;

      image {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -53px
      }

      .selected {
        margin-left: -100px
      }
    }
  }

  .large-btn {
    width: 80%;
    margin: 0 auto
  }

  .info-block {
    font-size: $fontSize;
    padding: .5rem;
    margin: 1rem auto;
    color: #e93c3d;
    width: 80%;
    border: 1px dashed #e93c3d;
    box-sizing: border-box
  }

  .info-block .ul.activity-info .li {
    padding-bottom: .5rem;
  }
</style>