yshopb2c-uniapp/pages/order/OrderDetails/index.vue

<template>
  <div class="order-details">
    <!-- 给header上与data上加on为退款订单-->
    <div class="header bg-color-red acea-row row-middle" :class="refundOrder ? 'on' : ''">
      <div class="data" :class="refundOrder ? 'on' : ''">
        <div class="state">{{ orderInfo._status._msg }}</div>
        <div>
          <data-format :data="orderInfo.addTime"></data-format>
        </div>
      </div>
    </div>
    <template v-if="!refundOrder">
      <div class="nav">
        <div class="navCon acea-row row-between-wrapper">
          <div :class="{ on: status.type === 0 || status.type === 9 }">待付款</div>
          <div :class="{ on: status.type === 1 }" v-if="orderInfo.shippingType === 2">待核销</div>
          <div :class="{ on: status.type === 1 }" v-else>待发货</div>
          <div :class="{ on: status.type === 2 }" v-if="orderInfo.shippingType === 1">待收货</div>
          <div :class="{ on: status.type === 3 }">待评价</div>
          <div :class="{ on: status.type === 4 }">已完成</div>
        </div>
        <div class="progress acea-row row-between-wrapper">
          <div
            class="iconfont"
            :class="[
              status.type === 0 || status.type === 9
                ? 'icon-webicon318'
                : 'icon-yuandianxiao',
              status.type >= 0 ? 'font-color-red' : ''
            ]"
          ></div>
          <div class="line" :class="{ 'bg-color-red': status.type > 0 && status.type != 9 }"></div>
          <div
            class="iconfont"
            :class="[
              status.type === 1 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 1 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 1 && status.type != 6 && status.type != 9
            }"
            v-if="orderInfo.shipping_type === 1"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type === 2 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 2 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
            v-if="orderInfo.shippingType === 1"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 2 && status.type != 6 && status.type != 9
            }"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type === 3 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 3 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 3 && status.type != 6 && status.type != 9
            }"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type == 4 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 4 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
        </div>
      </div>
      <!--<div-->
      <!--class="writeOff"-->
      <!--v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"-->
      <!--&gt;-->
      <!--<div class="title">核销信息</div>-->
      <!--<div class="grayBg">-->
      <!--<div class="pictrue"><img :src="orderInfo.code" /></div>-->
      <!--</div>-->
      <!--<div class="gear"><img :src="$VUE_APP_RESOURCES_URL+'/images/writeOff.jpg'" /></div>-->
      <!--<div class="num">{{ orderInfo._verify_code }}</div>-->
      <!--<!--<!--<!--<span class="rules">-->
      <!--<!--<!--<span class="item">-->
      <!--<!--<span class="rulesTitle acea-row row-middle">-->
      <!--<span class="iconfont icon-shijian"></span>核销时间-->
      <!--</!--<span>-->
      <!--<div class="info">-->
      <!--{{ system_store._valid_time-->
      <!--}}<span class="time">{{ system_store.day_time }}</span>-->
      <!--</div>-->
      <!--</!--<!--<span>-->
      <!--<div class="item">-->
      <!--<div class="rulesTitle acea-row row-middle">-->
      <!--<span class="iconfont icon-shuoming1"></span>使用说明-->
      <!--</div>-->
      <!--<div class="info">可将二维码出示给店员扫描或提供数字核销码</div>-->
      <!--</div>-->
      <!--</!--<!--<!--<span>-->
      <!--</!--<!--<!--<!--<span>-->
      <!--<div-->
      <!--class="map acea-row row-between-wrapper"-->
      <!--v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"-->
      <!--&gt;-->
      <!--<div>自提地址信息</div>-->
      <!--<div-->
      <!--class="place cart-color acea-row row-center-wrapper"-->
      <!--@click="showChang"-->
      <!--&gt;-->
      <!--<span class="iconfont icon-weizhi"></span>查看位置-->
      <!--</div>-->
      <!--</div>-->
      <div class="address" v-if="orderInfo.shippingType === 1">
        <div class="name">
          {{ orderInfo.realName
          }}
          <span class="phone">{{ orderInfo.userPhone }}</span>
          <span class="iconfont icon-tonghua font-color-red"></span>
        </div>
        <div>{{ orderInfo.userAddress }}</div>
      </div>
      <!--<div class="address" v-else>-->
      <!--<div class="name">-->
      <!--{{ system_store.name-->
      <!--}}<span class="phone">{{ system_store.phone }}</span>-->
      <!--<a-->
      <!--class="iconfont icon-tonghua font-color-red"-->
      <!--:href="'tel:' + system_store.phone"-->
      <!--&gt;</a>-->
      <!--</div>-->
      <!--<div>{{ system_store._detailed_address }}</div>-->
      <!--</div>-->
      <div class="line" v-if="orderInfo.shippingType === 1">
        <img :src="$VUE_APP_RESOURCES_URL+'/images/line.jpg'" />
      </div>
    </template>
    <OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []"></OrderGoods>
    <div class="wrapper">
      <div class="item acea-row row-between">
        <div>订单编号：</div>
        <div class="conter acea-row row-middle row-right">
          {{ orderInfo.orderId
          }}
          <span
            class="copy copy-data"
            @click="copyClipboard(orderInfo.orderId)"
          >复制</span>
        </div>
      </div>
      <div class="item acea-row row-between">
        <div>下单时间：</div>
        <div class="conter">
          <data-format :data="orderInfo.addTime"></data-format>
        </div>
      </div>
      <div class="item acea-row row-between">
        <div>订单类型：</div>
        <div class="conter">{{ orderTypeName }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>支付状态：</div>
        <div class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>支付方式：</div>
        <div class="conter">{{ orderInfo._status._payType }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.mark">
        <div>买家留言：</div>
        <div class="conter">{{ orderInfo.mark }}</div>
      </div>
    </div>

    <div v-if="orderInfo.status != 0">
      <div class="wrapper" v-if="orderInfo.deliveryType === 'express'">
        <div class="item acea-row row-between">
          <div>配送方式：</div>
          <div class="conter">发货</div>
        </div>
        <div class="item acea-row row-between">
          <div>快递公司：</div>
          <div class="conter">{{ orderInfo.deliveryName || "" }}</div>
        </div>
        <div class="item acea-row row-between">
          <div>快递号：</div>
          <div class="conter">{{ orderInfo.deliveryId || "" }}</div>
        </div>
      </div>

      <div class="wrapper" v-else>
        <div class="item acea-row row-between">
          <div>配送方式：</div>
          <div class="conter">送货</div>
        </div>
        <div class="item acea-row row-between">
          <div>配送人：</div>
          <div class="conter">{{ orderInfo.deliveryName || "" }}</div>
        </div>
        <div class="item acea-row row-between">
          <div>配送电话：</div>
          <div class="conter acea-row row-middle row-right">
            {{ orderInfo.deliveryId || "" }}
            <span class="copy">拨打</span>
          </div>
        </div>
      </div>
    </div>
    <!--     退款订单详情 -->
    <div class="wrapper" v-if="refundOrder">
      <div class="item acea-row row-between">
        <div>收货人：</div>
        <div class="conter">{{ orderInfo.realName }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>联系电话：</div>
        <div class="conter">{{ orderInfo.userPhone }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>收货地址：</div>
        <div class="conter">{{ orderInfo.userAddress }}</div>
      </div>
    </div>
    <div class="wrapper">
      <div class="item acea-row row-between">
        <div>支付金额：</div>
        <div class="conter">￥{{ orderInfo.totalPrice }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.couponPrice > 0">
        <div>优惠券抵扣：</div>
        <div class="conter">-￥{{ orderInfo.couponPrice }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.useIntegral > 0">
        <div>积分抵扣：</div>
        <div class="conter">-￥{{ orderInfo.deductionPrice }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.payPostage > 0">
        <div>运费：</div>
        <div class="conter">￥{{ orderInfo.payPostage }}</div>
      </div>
      <div class="actualPay acea-row row-right">
        实付款：
        <span class="money font-color-red">￥{{ orderInfo.payPrice }}</span>
      </div>
    </div>
    <div style="height:100rpx;" v-if="!refundOrder && offlineStatus"></div>
    <div class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
      <template v-if="status.type == 0">
        <div class="bnt cancel" @click="cancelOrder">取消订单</div>
        <div class="bnt bg-color-red" @click="pay = true">立即付款</div>
      </template>
      <template v-if="status.type == 1">
        <div class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</div>
      </template>
      <template v-if="status.type == 2">
        <div
          class="bnt default"
          @click="
            $yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
          "
        >查看物流</div>
        <div class="bnt bg-color-red" @click="takeOrder">确认收货</div>
      </template>
      <template v-if="status.type == 3 && orderInfo.deliveryType == 'express'">
        <div
          class="bnt default"
          @click="
            $yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
          "
        >查看物流</div>
      </template>
      <template v-if="status.type == 4">
        <div class="bnt cancel" @click="delOrder">删除订单</div>
        <div
          class="bnt default"
          @click="
        $yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
        "
        >查看物流</div>
      </template>
      <template v-if="status.type == 6">
        <div class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</div>
      </template>
    </div>
    <Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
    <div class="geoPage" v-if="mapShow">
      <iframe
        width="100%"
        height="100%"
        frameborder="0"
        scrolling="no"
        :src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey"
      ></iframe>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    goGoodsReturn(orderInfo) {
      this.$yrouter.push({
        path: "/pages/order/GoodsReturn/index",
        query: { id: orderInfo.orderId }
      });
    },
    goGroupRule(orderInfo) {
      this.$yrouter.push({
        path: "/pages/activity/GroupRule/index",
        query: { id: orderInfo.pinkId }
      });
    }
  }
};
</script>
<style scoped>
.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}
.order-details .writeOff {
  background-color: #fff;
  margin-top: 0.13rem;
  padding-bottom: 0.3rem;
}
.order-details .writeOff .title {
  font-size: 0.3rem;
  color: #282828;
  height: 0.87rem;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 0.3rem;
  line-height: 0.87rem;
}
.order-details .writeOff .grayBg {
  background-color: #f2f5f7;
  width: 5.9rem;
  height: 3.84rem;
  border-radius: 0.2rem 0.2rem 0 0;
  margin: 0.5rem auto 0 auto;
  padding-top: 0.55rem;
}
.order-details .writeOff .grayBg .pictrue {
  width: 2.9rem;
  height: 2.9rem;
  margin: 0 auto;
}
.order-details .writeOff .grayBg .pictrue img {
  width: 100%;
  height: 100%;
  display: block;
}
.order-details .writeOff .gear {
  width: 5.9rem;
  height: 0.3rem;
  margin: 0 auto;
}
.order-details .writeOff .gear img {
  width: 100%;
  height: 100%;
  display: block;
}
.order-details .writeOff .num {
  background-color: #f0c34c;
  width: 5.9rem;
  height: 0.84rem;
  color: #282828;
  font-size: 0.48rem;
  margin: 0 auto;
  border-radius: 0 0 0.2rem 0.2rem;
  text-align: center;
  padding-top: 0.04rem;
}
.order-details .writeOff .rules {
  margin: 0.46rem 0.3rem 0 0.3rem;
  border-top: 0.01rem solid #f0f0f0;
  padding-top: 0.1rem;
}
.order-details .writeOff .rules .item {
  margin-top: 0.15rem;
}
.order-details .writeOff .rules .item .rulesTitle {
  font-size: 0.28rem;
  color: #282828;
}
.order-details .writeOff .rules .item .rulesTitle .iconfont {
  font-size: 0.3rem;
  color: #333;
  margin-right: 0.08rem;
  margin-top: 0.05rem;
}
.order-details .writeOff .rules .item .info {
  font-size: 0.28rem;
  color: #999;
  margin-top: 0.05rem;
}
.order-details .writeOff .rules .item .info .time {
  margin-left: 0.2rem;
}
.order-details .map {
  height: 0.86rem;
  font-size: 0.3rem;
  color: #282828;
  line-height: 0.86rem;
  border-bottom: 0.01rem solid #f0f0f0;
  margin-top: 0.13rem;
  background-color: #fff;
  padding: 0 0.3rem;
}
.order-details .map .place {
  font-size: 0.26rem;
  width: 1.76rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  line-height: 0.5rem;
  text-align: center;
}
.order-details .map .place .iconfont {
  font-size: 0.27rem;
  height: 0.27rem;
  line-height: 0.27rem;
  margin: 0.02rem 0.03rem 0 0;
}
.order-details .address .name .iconfont {
  font-size: 0.34rem;
  margin-left: 0.1rem;
}
</style>
<script>
import OrderGoods from "@/components/OrderGoods";
import { orderDetail } from "@/api/order";
import Payment from "@/components/Payment";
import DataFormat from "@/components/DataFormat";
import { isWeixin, copyClipboard } from "@/utils";
import { mapGetters } from "vuex";
import {
  cancelOrderHandle,
  takeOrderHandle,
  delOrderHandle,
  payOrderHandle
} from "@/libs/order";
// import { wechatEvevt } from "@/libs/wechat";

const NAME = "OrderDetails";

export default {
  name: NAME,
  components: {
    OrderGoods,
    Payment,
    DataFormat
  },
  props: {},
  data: function() {
    return {
      offlinePayStatus: 2,
      orderTypeName: "普通订单",
      orderTypeNameStatus: true,
      offlineStatus: true,
      id: "",
      orderInfo: {
        _status: {}
      },
      status: {},
      pay: false,
      payType: ["yue", "weixin"],
      from: "routine",
      system_store: {},
      mapKay: "",
      mapShow: false
    };
  },
  computed: {
    refundOrder() {
      return this.orderInfo.refund_status > 0;
    },
    ...mapGetters(["userInfo"])
  },
  onShow() {
    this.id = this.$yroute.query.id;
    this.getDetail();
  },
  inject: ["app"],
  mounted: function() {
    this.id = this.$yroute.query.id;
    // this.getDetail();
  },
  methods: {
    copyClipboard,
    showChang: function() {
      if (isWeixin()) {
        let config = {
          latitude: this.system_store.latitude,
          longitude: this.system_store.longitude,
          name: this.system_store.name,
          address: this.system_store._detailed_address
        };
        // wechatEvevt("openLocation", config)
        //   .then(res => {
        //   })
        //   .catch(res => {
        //     if (res.is_ready) {
        //       res.wx.openLocation(config);
        //     }
        //   });
      } else {
        if (!this.mapKey)
          return this.$dialog.error(
            "暂无法使用查看地图，请配置您的腾讯地图key"
          );
        this.mapShow = true;
      }
    },
    goBack() {
      const history = this.app.history,
        last = history[history.length - 1] || {};
      if (last.name === "MyOrder") return this.$yrouter.back();
      else return this.$yrouter.replace({ path: "/order/list/" });
    },
    cancelOrder() {
      cancelOrderHandle(this.orderInfo.orderId)
        .then(() => {
          setTimeout(() => this.goBack(), 300);
        })
        .catch(() => {
          this.getDetail();
        });
    },
    takeOrder() {
      takeOrderHandle(this.orderInfo.orderId).finally(() => {
        this.getDetail();
      });
    },
    delOrder() {
      delOrderHandle(this.orderInfo.orderId).then(() => {
        setTimeout(() => this.goBack(), 300);
      });
    },
    setOfflinePayStatus: function(status) {
      var that = this;
      that.offlinePayStatus = status;
      if (status === 1 && that.orderTypeNameStatus === true) {
        that.payType.push("offline");
      }
    },
    getOrderStatus: function() {
      let orderInfo = this.orderInfo || {},
        _status = orderInfo._status || { _type: 0 },
        status = {};
      let type = parseInt(_status._type),
        delivery_type = orderInfo.deliveryType,
        seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0,
        bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0,
        combination_id = orderInfo.combinationId
          ? parseInt(orderInfo.combinationId)
          : 0;
      status = {
        type: type,
        class_status: 0
      };
      if (type == 1 && combination_id > 0) {
        status.type = 6;
        status.class_status = 1;
      } //查看拼团
      if (type == 2 && delivery_type == "express") status.class_status = 2; //查看物流
      if (type == 2) status.class_status = 3; //确认收货
      if (type == 4 || type === 0) status.class_status = 4; //删除订单
      if (
        !seckill_id &&
        !bargain_id &&
        !combination_id &&
        (type == 3 || type == 4)
      )
        status.class_status = 5; //再次购买
      if (type == 9) {
        //线下付款
        status.class_status = 0;
        this.offlineStatus = false;
      }
      this.status = status;
    },
    getDetail() {
      const id = this.id;
      if (!id) return this.$dialog.error("订单不存在");
      orderDetail(id)
        .then(res => {
          this.orderInfo = res.data;
          this.getOrderStatus();
          if (this.orderInfo.combinationId > 0) {
            this.orderTypeName = "拼团订单";
            this.orderTypeNameStatus = false;
          } else if (this.orderInfo.bargainId > 0) {
            this.orderTypeName = "砍价订单";
            this.orderTypeNameStatus = false;
          } else if (this.orderInfo.seckillId > 0) {
            this.orderTypeName = "秒杀订单";
            this.orderTypeNameStatus = false;
          }
          this.system_store = res.data.system_store || {};
          this.mapKey = res.data.mapKay;
          this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
        })
        .catch(err => {
          uni.showToast({
            title: err.response.data.msg,
            icon: "none",
            duration: 2000
          });
        });
    },
    async toPay(type) {
      var that = this;
      await payOrderHandle(this.orderInfo.orderId, type, that.from);
      that.getDetail();
    }
  }
};
</script>