mayou/htmldev/cps/src/views/order/index.vue

<template>
  <div class="order-container">
    <h2>下单记录</h2>
    <van-dropdown-menu
      :active-color="'#4D69A4'">
      <van-dropdown-item
        :title="'类型'"
        v-model="orderPlatformSonType"
        :options="ordertype"
        @change="handleTypeChange"/>
      <van-dropdown-item
        :title="'状态'"
        v-model="orderStatus"
        :options="arrOrderStatus"
        @change="handleStatusChange"/>
    </van-dropdown-menu>
    <Main
      :orderPlatformSonType="orderPlatformSonType"
      :orderStatus="orderStatus"
      @setOrderDetail="setOrderDetail"
      ref="myMain"/>
    <van-popup
      class="fbt-van-popup"
      v-model="showDetail"
      position="bottom">
      <div class="fbt-van-popup-body">
        <h3>订单详情</h3>
        <p>
          <span class="label" style="color: #333333;">{{ orderDetail.product_name }}</span>
          <span class="value"></span>
        </p>
        <p>
          <span class="label">创建时间：</span>
          <span class="value">{{ orderDetail.created_at }}</span>
        </p>
        <p>
          <span class="label">支付时间：</span>
          <span class="value">{{ orderDetail.order_pay_at }}</span>
        </p>
        <p>
          <span class="label">订单号：</span>
          <span class="value">
            <i>{{ orderDetail.order_number }}</i>
            <a href="javascript:;">复制</a>
          </span>
        </p>
        <p>
          <span class="label">支付金额：</span>
          <span class="value">￥{{ orderDetail.order_realy_price | fen2Yuan }}</span>
        </p>
        <p>
          <span class="label">预计收益：</span>
          <span class="value" style="color: #FA4A4A;">￥{{ orderDetail.order_commission | fen2Yuan }}</span>
        </p>
        <p>
          <span class="label">订单平台类型：</span>
          <span class="value">{{ orderPlatformType[orderDetail.order_platform_type] }}</span>
        </p>
        <template
          v-if="[4, 5].findIndex(item => item === orderDetail.order_status) > -1">
          <p>
            <span class="label">退款时间：</span>
            <span class="value">{{ orderDetail.order_refund_at }}</span>
          </p>
          <p>
            <span class="label">退款金额：</span>
            <span class="value">{{ orderDetail.order_refund_price }}</span>
          </p>
        </template>
        <p class="status">{{ allOrderStatus[orderDetail.order_status] }}</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { DropdownMenu, DropdownItem, Popup } from 'vant'
import Main from './child/main'

export default {
  name: 'index',
  components: {
    'van-dropdown-menu': DropdownMenu,
    'van-dropdown-item': DropdownItem,
    Main,
    'van-popup': Popup
  },
  data () {
    return {
      orderPlatformSonType: 0,
      orderStatus: 0,
      arrOrderStatus: [
        { text: '全部', value: 0 },
        { text: '未结算', value: 1 },
        { text: '已结算', value: 2 }
      ],
      showDetail: false,
      orderDetail: {}
    }
  },
  computed: {
    ordertype () {
      const result = this.$store.getters['common/orderType'].map(item => ({
        ...item,
        text: item.type_name,
        value: item.order_platform_son_type
      }))

      return [{ text: '全部', value: 0 }, ...result]
    },
    orderPlatformType () {
      return this.$store.getters['common/orderPlatformType']
    },
    allOrderStatus () {
      return this.$store.getters['common/allOrderStatus']
    }
  },
  async mounted () {
    await this.$nextTick()
  },
  methods: {
    handleTypeChange () {
      this.$nextTick(() => {
        this.$refs.myMain.onRefresh()
      })
    },
    handleStatusChange () {
      this.$nextTick(() => {
        this.$refs.myMain.onRefresh()
      })
    },
    setOrderDetail (obj) {
      if (Object.prototype.toString.call(obj) === '[object Object]') {
        this.orderDetail = obj
        this.showDetail = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

h2 {
  padding: 16px 0 16px 24px;
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 33px;
}

.fbt-van-popup {
  background: transparent;

  &-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 343px;
    background: #FFFFFF;
    border-radius: 8px;
    padding-top: 24px;
    margin: 0 auto 16px;

    h3 {
      width: 304px;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 33px;
    }

    p {
      display: flex;
      align-items: center;
      width: 304px;
      margin-top: 12px;

      &:nth-of-type(1) {
        margin-top: 20px;
      }

      span {
        font-size: 14px;
        line-height: 20px;
      }

      .label {
        width: 100px;
        color: #999999;
      }

      .value {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: calc(100% - 100px);
        text-align: right;
        color: #333333;

        i {
          font-size: 14px;
          color: #333333;
          line-height: 20px;
        }

        a {
          padding-left: 10px;
          font-size: 14px;
          color: #4D69A4;
          line-height: 20px;
        }
      }
    }

    .status {
      justify-content: flex-end;
      padding: 15px 0 17px;
      margin-top: 20px;
      border-top: 1px solid rgba(31, 49, 74, 0.1);
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FA4A4A;
      line-height: 28px;
    }
  }
}
</style>