uni-xiudoyou/src/pages/index/conversion.vue

<!-- 订单兑换 -->
<template>
  <view class="conversion">
    <Header :title="title"></Header>
    <view class="" style="height: 94upx;"></view>
    <view class="order-detail-content">
      <view class="order-message">
        <view class="title">订单信息</view>
        <view class="ordername titlebar"
          >产品名称：<text class="txt">{{ orderDetail.goodsName }}</text></view
        >
        <view class="shopname titlebar"
          >店铺名称：<text class="txt">{{ orderDetail.shopName }}</text></view
        >
        <view class="waternum titlebar"
          >流水号：<text class="txt">{{ orderDetail.outOrderNo }}</text></view
        >
        <view class="ordernum titlebar"
          >订单号：<text class="txt">{{ orderDetail.ordersNo }}</text></view
        >

        <view class="phonenum titlebar"
          >手机号：<text class="txt">{{ orderDetail.buyPhone }}</text></view
        >
        <view class="goindate titlebar"
          >入园日期：<text class="txt">{{ orderDetail.orderTime }}</text></view
        >
        <view class="price titlebar"
          >产品价格：<text class="txt">{{
            orderDetail.ordersPrice
          }}</text></view
        >
        <view class="buynum titlebar"
          >购买数量：<text class="txt">{{
            orderDetail.playManList.length
          }}</text></view
        >
        <view class="palytime titlebar"
          >游玩时间：<text class="txt">{{ orderDetail.payTime }}</text></view
        >
        <view class="orderstatus titlebar"
          >订单状态：<text class="txt">{{ orderDetail.statusName }}</text>
        </view>
        <view class="tourist">
          <view class="title">游客信息</view>
          <view
            class="tourist-warp"
            v-for="(item, index) in orderDetail.playManList"
            :key="index"
          >
            <view class="name touristbar"
              >姓名：<text class="txt">{{ item.name }}</text></view
            >
            <view class="idcard touristbar"
              >身份证：<text class="txt">{{ item.idcard }}</text></view
            >
          </view>
        </view>
      </view>
      <view class="paymessage">
        <view class="title">支付信息</view>
        <view class="shoppric"
          >产品价格:<text class="money"
            >￥{{ orderDetail.ordersPrice }}</text
          ></view
        >
        <view class="realitypirc"
          >实付金额:<text class="money"
            >￥{{ orderDetail.ordersPrice }}</text
          ></view
        >
      </view>
      <view class="btns">
        <view class="btn cancel" @tap="cancelChange">取消兑换</view>
        <view class="btn convert" @tap="sureconvert">确认兑换</view>
      </view>
    </view>

    <mask
      :txt="masktxt"
      :iconShow="iconShow"
      v-if="isShowMask"
      @isSureConver="isSureConver"
    ></mask>

    <rf-loading v-if="loading"></rf-loading>
  </view>
</template>

<script>
import Header from '../components/header.vue';
import mask from '../components/mask';
export default {
  components: {
    Header,
    mask,
  },
  data() {
    return {
      title: '订单兑换',
      loading: false,

      isShowMask: false,
      iconShow: false,
      masktxt: '是的',

      orderDetail: uni.getStorageSync('orderDetail'),

      type: false,
    };
  },
  onLoad() {
    console.log(this.orderDetail);
  },
  methods: {
    // 取消兑换
    cancelChange() {
      this.type = false;
      this.masktxt = '是否取消兑换？';
      this.iconShow = false;
      this.isShowMask = true;
    },

    //  确认兑换
    sureconvert() {
      this.type = true;
      this.iconShow = true;
      this.masktxt = '是否兑换？';
      this.isShowMask = true;
    },

    // 监听遮罩层行为
    isSureConver(e) {
      // 兑换
      if (this.type) {
        if (e) {
          this.$http
            .get('/orders/verOrdersByNo/' + this.orderDetail.qrcode)
            .then((res) => {
              console.log(res);
              if (res.code === 200 ) {
                this.$mHelper.toast('核销成功！');
              }
            }).catch(err0r=>{
              this.$mHelper.toast(res.msg);
            });
        } else {
          this.$mHelper.toast('已取消核销该订单');
        }
      } else {  // 取消兑换
        if (e) {
          this.$mHelper.toast('已取消兑换')
        } else {
          this.isShowMask = false
          return
        }
      }
      this.isShowMask = false;
      this.$mRouter.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.conversion {
  .order-detail-content {
    padding: 24upx 32upx 44upx;

    .order-message {
      background-color: #ffffff;
      padding: 31upx 33upx 35upx;
      border-radius: 17upx;

      .title {
        font-size: 34upx;
        color: #111111;
      }

      .titlebar {
        font-size: 28upx;
        color: #666666;
        letter-spacing: 2upx;
        margin-top: 12upx;

        .txt {
          margin-left: 10upx;
          font-size: 28upx;
        }
      }

      .ordername {
        margin-top: 15upx;
      }

      .orderstatus {
        height: 98upx;
        line-height: 98upx;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
      }

      .tourist {
        .tourist-warp {
          padding-bottom: 20upx;
          border-bottom: 1px solid #e1e1e1;
          &:last-child {
            border-bottom: none;
          }
        }
        .title {
          padding: 15upx 0;
          font-size: 34upx;
          color: #111111;
        }

        .touristbar {
          color: #666666;
        }

        .txt {
          margin-left: 10upx;
          font-size: 28upx;
        }
      }
    }

    .paymessage {
      background-color: #ffffff;
      padding: 31upx 33upx 35upx;
      border-radius: 17upx;
      margin-top: 24upx;

      .title {
        font-size: 34upx;
        color: #111111;
      }
      .shoppric {
        color: #666666;
        margin-top: 20upx;
        .money {
          margin-left: 10upx;
        }
      }

      .realitypirc {
        color: #666666;
        font-size: 28upx;
        margin-top: 20upx;
        border-top: 1upx solid #e1e1e1;
        padding-top: 20upx;
        .money {
          margin-left: 10upx;
          color: #fa4141;
        }
      }
    }

    .btns {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 40upx;
      .btn {
        width: 321upx;
        height: 92upx;
        box-sizing: border-box;
        text-align: center;
        line-height: 92upx;
        font-size: 38upx;
        letter-spacing: 2upx;
        color: #7a7c7c;
        margin-right: 31upx;
        background-color: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 10upx;
      }
      .convert {
        margin-right: 0;
        background-color: #a95cff;
        color: #ffffff;
        border: none;
      }
    }
  }
}
</style>