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" v-if="orderDetail.outOrderNo === '1'">流水号：<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.timePart ? orderDetail.timePart : orderDetail.palyTime }}</text></view
        >
        <view class="price titlebar"
          >产品价格：<text class="txt">{{
            orderDetail.ordersPrice | doMoney
          }}</text></view
        >
        <view class="buynum titlebar"
          >购买数量：<text class="txt">{{
            orderDetail.playManList.length
          }}</text></view
        >
        <view class="palytime titlebar"
          >游玩时间：<text class="txt">{{ orderDetail.timePart ? orderDetail.timePart : orderDetail.palyTime }}</text></view
        >
        <view class="orderstatus titlebar"
          >订单状态：<text class="txt">{{ orderDetail.statusName }}</text>
        </view>
        <view class="titlebar chechNum"
          >核销次数：<text class="txt">{{ orderDetail.checkList.length }} / {{ orderDetail.checkNum}} </text></view
        >
        <view class="titlebar checkedTime" v-for="(item,index) in orderDetail.checkList" :key="index">
          核销时间：<text class="txt">{{ item.checkTime }}</text>
        </view>

        <view class="tourist" v-if="orderDetail.playManList[0].name">
          <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 | doMoney}}</text
          ></view
        >
        <view class="realitypirc"
          >实付金额:<text class="money"
            >{{ orderDetail.ordersPrice | doMoney}}</text
          ></view
        >
      </view>
      <view class="btns">
        <view class="btn cancel" @tap="cancelChange">取消兑换</view>
        <view class="btn convert" @tap="sureconvert">确认兑换</view>
      </view>
    </view>


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

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

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

      orderDetail: uni.getStorageSync('orderDetail'),

    };
  },
  filters :{
    doMoney (val){
      return `￥${val/100}`
    }
  },
  onLoad() {
    console.log(this.orderDetail);
  },
  methods: {
    // 取消兑换
    cancelChange() {
      this.$mRouter.back();
    },

    //  确认兑换
    sureconvert() {
      let _self = this
      uni.showModal({
        content: '是否兑换？',
        success: confirmRes => {
          if (confirmRes.confirm) {
            if (!_self.orderDetail.qrcode) {
              _self.$mHelper.toast('非自营订单无法兑换！')
              return
            }
            _self.$http.get('/orders/verOrdersByNo/' + _self.orderDetail.qrcode)
            .then((res) => {
              console.log(res);
              if (res.code === 200 ) {
                _self.$mHelper.toast('兑换成功！');
                setTimeout(() => {
                  _self.$mRouter.back()
                }, 500);
              }
            }).catch(err0r=>{
              _self.$mHelper.toast(res.msg);
            });
          } else {
            _self.$mHelper.toast('兑换取消')
          }
        }
      });
    },
  },
};
</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 {
        border-top: 1px solid #e1e1e1;
        padding-top: 22upx;
        // height: 98upx;
        // line-height: 98upx;
      }
      .checkedTime {
        &:last-child {
          padding-bottom: 22upx;
          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>