<template>
  <view class="content">
    <!-- <view class="fixed">
			<view class="status_bar" :style="'height:'+BarHeight+'px'"></view>
			<image src="../../static/mine/back.png" mode="" class="header-left-title"  @click="back()"></image>
		</view> -->
    <uni-nav-bar
      left-icon="left"
      title="魔晶令"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="money-rule">
      <view class="money">当前累计消费:{{ datas.money }}</view>

      <view @click="$refs.show.open()" class="rule">
        <image class="icon" :src="$img('/static/icon/info.png')"></image>

        魔晶令规则
      </view>
    </view>

    <view class="date-area">
      {{ datas.time }}
    </view>

    <!-- <view class="topbox">
      <view class="" style="display: flex; justify-content: space-between">
        <view class="">
          <image
            @click="$refs.show.open()"
            class="wugz"
            :src="z_imgPath + 'wugz.png'"
            mode=""
          ></image>
        </view>
        <view class="time">{{ datas.time }}</view>
      </view>
      <view
        class="flex_center"
        style="display: flex; justify-content: space-between"
      >
        <view class="leiji">
          当前累计消费：
          <text style="color: #1ff7f0">{{ datas.money }}</text>
        </view>
        <image :src="z_imgPath+'yijian.png'" class="btns" @click="ling"></image>
        <view
          class="btns"
          :style="
            'background: url(' +
            z_imgPath +
            'yijian.png' +
            ') no-repeat 0 0 / 100% 100%;'
          "
          @click="ling"
        >
          一键领取
        </view>
      </view>
    </view> -->

    <view
      class="items common_bg"
      v-for="(item, index) in lists"
      :style="{
        'background-image': `url(${$img('/static/img/ling_list_border.png')})`
      }"
    >
      <view class="flex_center" style="display: flex; justify-content: start">
        <!-- <view class="jingbi">￥</view> -->
        <view class="leixiao">累计消费满{{ item.give_money }}即可抽取赏品</view>
      </view>
      <view class="heiline"></view>
      <scroll-view scroll-x class="list-wrap">
        <view class="imgbox" v-for="a in item.give_list">
          <image class="spimg" :src="a.imgurl" mode="aspectFill"></image>
          <view class="zhaozi" v-if="item.give_is == 1">
            <image class="lq" :src="z_imgPath + 'zhaozi.png'" mode=""></image>
          </view>
          <view class="btext hang1">{{ a.title }}</view>
        </view>
      </scroll-view>
    </view>
    <uni-popup ref="show" type="center">
      <view
        class="pop common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
        }"
      >
        <view class="pop_title">规则</view>
        <view class="pop_con">
          <scroll-view scroll-y="true" style="height: 600rpx">
            <view v-html="guize"></view>
          </scroll-view>
        </view>

        <image
          @click="$refs.show.close()"
          class="close"
          :src="$img('/static/icon/close.png')"
        ></image>
      </view>
    </uni-popup>

    <view class="bt-fixed">
      <view
        @click="ling"
        class="bt-btn common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/ling_yjlq.png')})`
        }"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2 + 'wuxian/',
      lists: '',
      datas: '',
      show: false,
      guize: '',
      BarHeight: ''
    }
  },
  methods: {
    back() {
      uni.navigateBack()
    },

    ling() {
      let that = this
      that.req({
        url: 'infinite_give_goods',
        data: {},
        success(res) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })

          if (res.status == 1) {
            setTimeout(() => {
              that.getData()
            }, 500)
          }
        }
      })
    },
    getData() {
      let that = this
      that.req({
        url: 'infinite_give_list',
        data: {},
        success(res) {
          that.lists = res.data.data
          that.datas = res.data.other_data
        }
      })
    },
    back() {
      uni.navigateBack()
    }
  },
  onLoad() {
    let that = this
    this.getData()
    uni.getSystemInfo({
      success: function (res) {
        that.BarHeight = res.statusBarHeight
        console.log(res.statusBarHeight)
      }
    })
    that.req({
      url: 'danye',
      data: {
        type: 5
      },
      success(res) {
        console.log(res)
        that.guize = res.data
      }
    })
  }
}
</script>

<style lang="scss">
.fixed {
  width: 750rpx;
  padding: 30rpx;
  box-sizing: border-box;
  position: fixed;
  top: 0rpx;
  z-index: 15;
}

.header-left-title {
  width: 48rpx;
  height: 48rpx;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.pop {
  width: 607rpx;
  // height: 904rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  position: relative;

  .pop_title {
    font-size: 36rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }

  .pop_con {
    padding: 30rpx 40rpx 50rpx;
    box-sizing: border-box;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 42rpx;
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 50rpx;
    height: 50rpx;
  }
}

.btns {
  width: 180rpx;
  height: 60rpx;
  margin-top: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #021f1d;
}
.imgbox:nth-child(1) {
  margin-left: 0rpx;
}

.imgbox {
  display: inline-flex;
  flex-flow: column nowrap;

  margin: 20rpx 16rpx 0;
  position: relative;
  width: 140rpx;
}

.zhaozi {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  position: absolute;
  left: 14rpx;
  top: 14rpx;
  background-color: rgba(0, 0, 0, 0.2);
}

.lq {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
}

.spimg {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
}

.heiline {
  width: 630rpx;
  height: 1rpx;
  // background: #333333;
  border-radius: 1rpx;
  margin-top: 16rpx;
}

.btext {
  font-size: 24rpx;
  /* background: #000000; */
  color: rgba(255, 255, 255, 0.7);
  // width: 650rpx;
  padding: 4rpx 10rpx;
  box-sizing: border-box;
  margin-top: 10rpx;
}

.leixiao {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.jingbi {
  width: 49rpx;
  height: 49rpx;
  /* line-height: 50rpx; */
  margin-right: 10rpx;
  /* background: url($img0+'bi_bg.png') no-repeat;
		background-size: 100% 100%;
		font-size: 28rpx;
		font-weight: 400;
		color: #F9D775; */
  /* -webkit-text-stroke: 1rpx #212121;
		text-stroke: 1rpx #212121; */
  text-align: center;
}

.items {
  width: 730rpx;
  /* background: #11141D; */
  // border: 3rpx solid #c5fadc;
  border-radius: 10rpx;
  margin: 20rpx auto 0;
  padding: 50rpx;
  box-sizing: border-box;
  /* box-shadow: rgba(223,182,62,0.6) 0px 0px 14rpx inset; */
  /* box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); */

  .list-wrap {
    white-space: nowrap;
  }
}

.leiji {
  font-size: 32rpx;
  font-weight: 400;
  color: #ffffff;
  margin-top: 30rpx;
}

.topbox {
  width: 694rpx;
  /* background: #FFFFFF; */
  padding: 24rpx 28rpx;
}

.time {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-top: 4rpx;
  opacity: 0.7;
}

.wugz {
  width: 190rpx;
  height: 40rpx;
}

.content {
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 150rpx;
  box-sizing: border-box;
  /* padding-top: calc(var(--status-bar-height) + 140rpx); */
}

.money-rule {
  padding: 30rpx 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .money {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .rule {
    display: flex;
    align-items: center;

    .icon {
      width: 12rpx;
      height: 26rpx;
      margin-right: 6rpx;
    }

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.date-area {
  padding: 0 30rpx;
  margin-top: 10rpx;

  font-size: 22rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #dddddd;
}

.bt-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 40rpx;
  display: flex;
  justify-content: center;

  .bt-btn {
    width: 336rpx;
    height: 84rpx;
  }
}
</style>
