CommunityApp/pagesM/pages/integral_exchange.vue

<template>
  <view class="dt-page">
    <view class="main-poster-wrap">
      <image class="main-poster" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=3a0c96f6dfa20cf4529df68d17602053/8d5494eef01f3a294e7bc4bf9625bc315c607c0b.jpg" mode="aspectFill"></image>
    </view>
    <view class="goods-hd-wrap">
      <view class="title">《霹雳娇娃》电影票</view>
      <view class="sub-info-wrap">
        <view class="specifications">规格：1张</view>
        <view class="has-exchange">已兑换：250份</view>
      </view>
    </view>
    <view class="goods-detail-wrap">
      <view class="detail-item">
        <view class="subtitle">商品介绍</view>
        <view class="sub-content">霹雳娇娃电影票</view>
      </view>
      <view class="detail-item">
        <view class="subtitle">使用流程</view>
        <view class="sub-content">猫眼电影通兑换券使用说明》\n\n1.兑换券限在猫眼/美团客户端选座购票使用;\n\n2打开猫眼/美团客户端(美团需要先在首页点击猫眼LOGO,进入猫眼后兑换),登录后打开我的点击“优惠券”在页面上方白框中输入兑换券密码,点击“添加即可;\n\n3.打开并登录猫眼/美团客户端,选择影片,选择影城及座位后点击付款,选择“活动与优惠券”,选择兑换券即可,仅限票价不高于兑换券面值的场次使用;\n\n4.本通兑券不记名、不挂失、不兑现,请妥善保存,一旦添加不可解绑;\n\n5.每批次兑换券每个用户最多限领取4张,每张通兑券仅限使用1次\n\n6.每个订单最多使用4张(同一账号、手机号、设备或支付账号相同,即视为同一账户);\n\n7.不能异地兑换,只能兑换手机定位所在地当地影院场次影票;\n\n8.请在兑换券有效期内使用。\n\n9.仅可兑换2D/3D普通厅场次。</view>
      </view>
      <view class="detail-item">
        <view class="subtitle">使用规则</view>
        <view class="sub-content">特别注意:一个手机设备+一个帐号=一个用户。同一台手机设备,换不同的帐号来绑券是不允许的!猫眼电影券码不能用作包场使用</view>
      </view>
    </view>
    <view class="btn-submit-fix"></view>
    <button 
      class="btn-submit" 
      hover-class="button-hover-scale"
      :class="{
        'btn-submit-disable':disabled
      }"
      :disabled="disabled"
      @tap="tapSubmit" >16000积分兑换</button>
  </view>
</template>
<script>
export default {
  data () {
    return {
      disabled:false
    }
  },
  methods:{
    tapSubmit(){
      this.$dialog.confirm({
        content:'兑换后将扣除12600积分，确认兑换？',
        success:async (res)=>{
          if(res.confirm){
            console.log(res.confirm)
            this.disabled = true
            this.$dialog.alert({
              content:'兑换成功，请留意短信消息~'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dt-page {
  min-height:100vh;
  background-color:#f2f2f2;
  .main-poster-wrap{
    display:flex;
    .main-poster {
      width: 100%;
      height: 400upx;
    }
  }
  
  .goods-hd-wrap {
    display: flex;
    flex-wrap: wrap;
    padding:30upx;
    background-color: #fff;

    .title {
      width: 100%;
      font-size: 30upx;
      font-weight: bold;
    }
    .sub-info-wrap{
      padding-top:30upx;
      line-height: 1;
      display:flex;
      justify-content: space-between;
      width:100%;
      font-size:24upx;
      .specifications{
        color:#666;
      }
      .has-exchange{
        color:$dt-color-primary;
      }
    }
  }

  .goods-detail-wrap{
    margin-top:20upx;
    background-color:#fff;
    padding:36upx 30upx 0 40upx;
    .detail-item{
      padding-bottom:36upx;

      .subtitle{
        position:relative;
        font-weight:500;
        line-height:30upx;
      }
      .subtitle:before{
        position:absolute;
        left:-16upx;top:50%;
        transform: translateY(-50%);
        width:6upx;
        height:30upx;
        border-radius:4upx;
        background-color:$dt-color-primary;
        content:'';
      }
      .sub-content{
        margin-top:20upx;
        white-space: pre-wrap;
        font-size:24upx;
        color:#666;
        line-height:1.5;
      }
    }
  }
  .btn-submit-fix{
    width:100%;
    height:130upx;
  }
  .btn-submit{
    position:fixed;
    bottom:0;
    left: 0;
    width:100%;
    height:100upx;
    line-height:100upx;
    background-color:$dt-color-primary;
    border-radius:0;
  }
  .btn-submit-disable{
    color:#fff;
    background-color:#CCCCCC;
  }
}
</style>