mteacher/src/views/shopMall/GoodsOrderDetail.vue

<template>
  <div class="goodsOrder">
    <m-header :backUrl="backUrl" />
    <van-cell-group
      v-if="goodsDetail"
      class="order-section"
      style="margin-top: 0.1rem"
    >
      <!-- @click="getGoodsDetail(item)" is-link= -->
      <van-cell
        v-for="(item, index) in goodsDetail.goodsJson"
        :key="index"
        class="input-cell"
        :center="true"
      >
        <template #icon>
          <van-image :src="item.productPic" class="logo">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </template>
        <template #title>
          {{ item.productName }}
          <p class="money">￥{{ item.productPrice | moneyFormat }}</p>
        </template>
        <template #default>
          <span> x {{ item.productQuantity }}</span>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group v-if="goodsDetail" class="order-section order-info">
      <p class="order-item">
        <span>订单总金额</span><span>￥{{ allPrice | moneyFormat }}</span>
      </p>
      <p class="order-item">
        <span>应付金额</span
        ><span style="color: #ff3535"
          >￥{{ goodsDetail.totalAmount | moneyFormat }}</span
        >
      </p>
      <p class="order-item">
        <span>乐器减免</span
        ><span>￥{{ -goodsDetail.marketAmount | moneyFormat }}</span>
      </p>
      <p class="order-item">
        <span>优惠券</span
        ><span>￥{{ -goodsDetail.couponRemitFee | moneyFormat }}</span>
      </p>
      <p class="order-item">
        <span>余额支付</span
        ><span>￥{{ -goodsDetail.balancePaymentAmount | moneyFormat }}</span>
      </p>
      <p class="order-item">
        <span>现金支付</span
        ><span>￥{{ goodsDetail.actualAmount | moneyFormat }}</span>
      </p>
      <p class="order-item">
        <span>订单状态</span>
        <span v-if="goodsDetail.status == 'SUCCESS'" style="color: #01c1b5"
          >支付成功</span
        >
        <span v-else style="color: #ff3535">待支付</span>
      </p>
      <p class="order-item">
        <span>学员姓名</span><span>{{ goodsDetail.userName }}</span>
      </p>
      <p class="order-item">
        <span>收货状态</span>
        <span
          v-if="goodsDetail.receiveStatus == 'NO_RECEIVE'"
          style="color: #ff802c"
          >未确认收货</span
        >
        <span v-if="goodsDetail.receiveStatus == 'AUTO_RECEIVE'"
          >自动确认收货</span
        >
        <span v-if="goodsDetail.receiveStatus == 'MANUAL_RECEIVE'"
          >手动确认收货</span
        >
      </p>
      <p class="order-item">
        <span>订单号</span><span>{{ goodsDetail.orderNo }}</span>
      </p>
      <p class="order-item">
        <span>交易流水号</span
        ><span
          style="max-width: 60%; word-break: break-all; line-height: 1.5"
          >{{ goodsDetail.transNo }}</span
        >
      </p>
      <p class="order-item">
        <span>创建时间</span><span>{{ goodsDetail.createTime }}</span>
      </p>
      <p class="order-item">
        <span>付款时间</span><span>{{ goodsDetail.payTime }}</span>
      </p>
    </van-cell-group>

    <!-- 商品详情 -->
    <van-popup
      v-model="goodsStatus"
      class="goodsDetail"
      :lock-scroll="true"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <m-header :backUrl="backUrl2" name="商品详情" />
      <van-cell-group>
        <van-cell class="input-cell" :center="true">
          <template slot="icon">
            <van-image
              :src="popupGoodsDetail.image"
              class="logo"
              style="width: 1rem; height: 1rem"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </template>
          <template slot="title">
            <div>{{ popupGoodsDetail.name }}</div>
            <van-tag plain color="#C2A076" style="margin: 0.04rem 0"
              >品牌：{{ popupGoodsDetail.brand }}</van-tag
            >
            <div class="price-section">
              <span class="money"
                ><i>现价：￥</i
                >{{ popupGoodsDetail.discountPrice | moneyFormat }}</span
              >
              <del
                >原价：￥{{ popupGoodsDetail.marketPrice | moneyFormat }}</del
              >
            </div>
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group>
        <van-cell
          title="品牌"
          value-class="valueStyle"
          :value="popupGoodsDetail.brand"
          :center="true"
        ></van-cell>
        <van-cell title="商品类型" value-class="valueStyle" :center="true">
          {{ popupGoodsDetail.type | shopType }}
        </van-cell>
        <van-cell
          title="商品分类"
          value-class="valueStyle"
          :value="popupGoodsDetail.goodsCategoryName"
          :center="true"
        ></van-cell>
        <van-cell
          title="具体型号"
          value-class="valueStyle"
          :value="popupGoodsDetail.specification"
          :center="true"
        ></van-cell>
      </van-cell-group>

      <van-cell-group style="margin-bottom: 0.75rem">
        <van-cell
          title="商品详情"
          style="flex-direction: column"
          title-class="title-detail"
          value-class="value-detail"
          :value="popupGoodsDetail.desc"
        ></van-cell>
      </van-cell-group>

      <van-row gutter="10" type="flex" justify="center" class="btn-group">
        <van-col span="22">
          <van-button
            @click="goodsStatus = false"
            type="primary"
            color="#01C1B5"
            plain
            round
            block
            >关闭</van-button
          >
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
/* eslint-disable */
import { browser } from "@/common/util";
import MHeader from "@/components/MHeader";
import MEmpty from "@/components/MEmpty";
import setLoading from "@/common/loading";
import { goodsGet } from "./api";
export default {
  name: "goodsOrder",
  components: { MHeader, MEmpty },
  data() {
    let query = this.$route.query;
    let that = this;
    return {
      headerStatus: false,
      goodsDetail: null,
      backUrl: {
        status: true,
        path: "/shopGoodsOrder?activeTab=" + query.activeTab,
      },
      backUrl2: {
        callBack() {
          that.goodsStatus = false;
        },
      },
      goodsStatus: false,
      popupGoodsDetail: {},
    };
  },
  mounted() {
    // 判断是否在app里面
    document.title = "订单详情";
    this.__init();
  },
  methods: {
    __init() {
      let goodsDetail = localStorage.getItem("shopOrderGoodsDetail");
      goodsDetail = goodsDetail ? JSON.parse(goodsDetail) : null;
      this.goodsDetail = goodsDetail;
    },
    async getGoodsDetail(item) {
      // 判断是否请求同一个商品信息
      if (
        this.popupGoodsDetail.id &&
        this.popupGoodsDetail.id == item.goodsId
      ) {
        this.goodsStatus = true;
        return;
      }
      setLoading(true);
      await goodsGet(item.goodsId)
        .then((res) => {
          setLoading(false);
          let result = res.data;
          if (result.code == 200) {
            this.popupGoodsDetail = result.data;
            this.goodsStatus = true;
          }
        })
        .catch(() => {
          setLoading(false);
        });
    },
  },
  destroyed() {
    localStorage.removeItem("shopOrderGoodsDetail");
  },
  computed: {
    allPrice() {
      let money = 0;
      if (Array.isArray(this.goodsDetail.goodsJson)) {
        this.goodsDetail.goodsJson.forEach((goods) => {
          money += goods.goodsPrice * goods.goodsNum;
        });
      }

      return money;
    },
  },
};
</script>

<style lang="less" scoped>
.goodsOrder {
  min-height: 100vh;
  overflow: hidden;
}
/deep/.van-tab__pane {
  padding-top: 0.2rem;
}
/deep/.van-tab {
  color: #333;
  font-size: 0.17rem;
}
/deep/.van-tab--active {
  color: #01c1b5;
}
.order-section {
  margin: 0 0.12rem 0.16rem;
  border-radius: 0.05rem;
  overflow: hidden;
  &.order-info {
    padding: 0.15rem 0.16rem;
  }
  .order-item {
    font-size: 0.14rem;
    color: #333;
    line-height: 2;
    display: flex;
    justify-content: space-between;
  }
}
.order-title {
  color: #808080;
  font-size: 0.14rem;
  flex: auto 1;
}
.order-status {
  font-size: 0.14rem;
  color: #f5222d;
  &.success {
    color: #01c1b5;
  }
}
.order-money {
  color: #000;
  font-size: 0.16rem;
  span {
    color: #ff3535;
  }
}
.input-cell {
  padding: 0.12rem 0.16rem;
  .logo {
    width: 1rem;
    height: 1rem;
    margin-right: 0.15rem;
    border-radius: 0.05rem;
    overflow: hidden;
  }

  .price-section {
    del {
      font-size: 0.12rem;
      color: #666666;
      padding-left: 0.1rem;
    }
  }

  .money {
    color: #ff3535;
    font-weight: 600;
    font-size: 0.16rem;
    i {
      font-style: normal;
      font-size: 0.14rem;
    }
  }

  /deep/.van-cell__title {
    font-size: 0.16rem;
    color: #000000;
    flex: 1 auto;
    flex-basis: 47%;
  }

  /deep/.van-cell__value {
    height: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.goodsDetail {
  background: #f3f4f8;
  /deep/.van-cell-group {
    margin-bottom: 0.15rem;
  }
  /deep/.van-cell {
    padding: 0.1rem 0.16rem;
    line-height: 1.5;
    font-size: 0.14rem;
    color: #808080;
  }
  .valueStyle {
    color: #000000;
  }

  .title-detail {
    font-size: 0.16rem;
    color: #000;
    padding-bottom: 0.1rem;
  }

  .value-detail {
    font-size: 0.14rem;
    color: #808080;
    text-align: left;
  }

  .btn-group {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.1rem 0;
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    .van-button {
      font-size: 0.16rem;
      height: 0.44rem;
      line-height: 0.42rem;
    }
  }
}
</style>