novelQuick/src/pages/commonModule/redPacket/index.ux

<!-- src/components/tools-mall/index.ux -->
<template>
  <div class="content">
    <div class="box text-white">
      <text class="text-24 text-white" style="font-size: 24px;">金币明细</text>
      <div class="mgy-20" style="align-items: center;">
        <text class="text-48 text-white" style="margin-right: 5px;font-size: 48px;">{{ coinNum }}</text>
        <text class="text-white" style="font-size: 24px;margin-left: 10px;" @click="navTo('pages/commonModule/coinRecord')">金币 ></text>
      </div>
      <text class="text-24 text-white" style="font-size: 24px;">活动奖品数量有限，先到先得，兑完即止</text>
    </div>
    <div class="box2">
      <div class="top_box">
        <text class="text-36" style="color: #333;">新人签到 必得金币</text>
        <text class="text-24" style="color: #ffcdaf;margin-top: 10px;">活动盛启，福利满满</text>
      </div>
      <div class="bottom_box">
        <div class="bottom_item" style="border-bottom: 1px solid #ddd;">
          <div class="fd_c">
            <text class="text-32 text-000">签到</text>
            <text class="text-24 text-999">连续签到奖励更高！</text>
          </div>
          <div class="{{ signStatus?'disBtn':'btn' }}" @click="signIn">
            <text>{{ signStatus ? '已签到' : '签到'}}</text>
          </div>
        </div>
        <div class="bottom_item" style="border-bottom: 1px solid #ddd;">
          <div class="fd_c">
            <text class="text-32 text-000">天天惊喜，红包多多</text>
            <text class="text-24 text-999">金币兑换海量福利等你来拿</text>
          </div>
          <div class="{{ getStatus?'disBtn':'btn' }}" @click="getCoin">
            <text>{{getStatus?'已领取':'立即领取'}}</text>
          </div>
        </div>
        <div class="bottom_item" style="border-bottom: 1px solid #ddd;">
          <div class="fd_c">
            <text class="text-32 text-000">易推小说</text>
            <text class="text-24 text-999">点击右边按钮体验</text>
          </div>
          <div class="btn" @click="backIndex()">
            <text>返回首页</text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@system.router'

export default {
  private: {
    coinNum:0,//金币数量
    signStatus:false, // 是否已经签到
    getStatus:false,// 是否已领取
  },
  onInit() {},
  backIndex() {
    router.replace({
      uri: 'pages/main',
      params: {
        testId: '1'
      }
    })
  },
  navTo(uri){
    router.push({
      uri,
    })
  },
  getCoin(){
      if(!this.getStatus){
        $utils.showToast('领取成功')
        this.coinNum += 10
        this.getStatus = true
      }else{
        $utils.showToast('已领取')
      }
  },
  signIn(){
      if(!this.signStatus){
        $utils.showToast('签到成功')
        this.coinNum += 10
        this.signStatus = true
      }else{
        $utils.showToast('已签到')
      }
  },
  
}
</script>

<style lang="less">
.content {
  padding: 28px;
  flex-direction: column;
  background: linear-gradient(to bottom, #ff8843, #ffffff);
}
.box {
  width: 100%;
  height: 220px;
  padding: 28px;
  background: linear-gradient(90deg, #ff7a3d, #ff582e);
  border-radius: 30px;
  flex-direction: column;
}
.text-white{
    color: #fff;
  }
  .mgy-20{
    margin: 20px 0;
  }
.box2 {
  flex-direction: column;
  margin-top: 50px;
  border-radius: 30px;
  .top_box {
    height: 180px;
    background: linear-gradient(90deg, #ff843c, #ff6e6e);
    border-radius: 30px;
    flex-direction: column;
    padding: 30px;
  }
  
  .text-36{
    font-size: 36px;
  }
  .text-32{
    font-size: 32px;
  }
  .text-24{
    font-size: 24px;
  }
  .fd_c{
    flex-direction: column;
  }
  .text-000{
    color: #000;
  }
  .text-white{
    color: #fff;
  }
  .bottom_box {
    margin-top: -30px;
    border-radius: 30px;
    background-color: #ffffff;
    height: 600px;
    flex-direction: column;
    .bottom_item{
      justify-content: space-between;
      align-items: center;
      padding: 20px;
    }
    .disBtn{
      text{
        color: #999;
        font-size: 22px;
      }
      background-color: #ccc;
      height: 60px;
      line-height: 60px;
      width: 150px;
      justify-content: center;
      border-radius: 30px;
    }
    .btn {
      text{
        color: #ffffff;
        font-size: 22px;
      }
      background-color: #ff843c;
      height: 60px;
      line-height: 60px;
      width: 150px;
      justify-content: center;
      border-radius: 30px;
    }
  }
}
</style>