Client-Teapay/src/pages/szw-order-details/index.vue

<template>
  <view class="container">
    <view class="no_data" v-if="dataError">
      <image src="/static/no_data.png" class="image" mode="widthFix" />
      <view>没有找到该订单呢……</view>
    </view>
    <view class="orderDetail_box">
      <view class="sec-wrap" v-if="!dataError">
        <view class="order-status">
          <view class="icon-box">
            <block v-if="orderInfo.orderDetail">
              <image
                v-if="orderInfo.orderDetail.status == 2"
                class="icon"
                src="/static/order-details/icon-ddfk.png"
              ></image>
              <image
                v-else-if="orderInfo.orderDetail.status == 3"
                class="icon"
                src="/static/order-details/icon-ddfh.png"
              ></image>
              <image
                v-else-if="orderInfo.orderDetail.status == 4"
                class="icon"
                src="/static/order-details/icon-ddsh.png"
              ></image>
              <image
                v-else-if="orderInfo.orderDetail.status == 5"
                class="icon"
                src="/static/order-details/icon-jycg.png"
              ></image>
              <image
                v-else-if="
                  orderInfo.orderDetail.status == 6 ||
                  orderInfo.orderDetail.status == 7
                "
                class="icon"
                src="/static/order-details/icon-ddgb.png"
              ></image>
            </block>
          </view>
          <view class="right-text">
            <view class="status">{{
              orderInfo.orderDetail ? orderInfo.orderDetail.statusMsg : ""
            }}</view>
            <!-- <view class="des">{{changeTimeText}}</view> -->
          </view>
        </view>
      </view>
      <!-- 配送 -->
      <view class="address-box">
        <view class="show-address">
          <view class="name-tel"
            >{{ orderInfo.address.name }} {{ orderInfo.address.mobile }}</view
          >
          <view class="addr-text"
            >{{ orderInfo.address.province }} {{ orderInfo.address.city }}
            {{ orderInfo.address.county }} {{ orderInfo.address.address }}</view
          >
        </view>
      </view>

      <view
        class="logistics_btn"
        v-if="
          orderInfo.logistics &&
          orderInfo.logistics.logistics_no &&
          orderInfo.logistics.logistics_business
        "
        @tap="goLogistics"
      >
        <view
          class="l_box"
          v-if="
            orderInfo.logistics.statusMsg && orderInfo.logistics.statusMsg != ''
          "
          >{{ orderInfo.logistics.statusMsg }}</view
        >
        <view class="l_box" v-else
          >已发货：{{ orderInfo.logistics.logistics_business }}，快递单号：{{
            orderInfo.logistics.logistics_no
          }}</view
        >
      </view>

      <view class="goods-list">
        <view
          class="goods-info_box"
          v-for="(item, index) in orderInfo.mallGood"
          :key="index"
        >
          <scroll-view
            class="goods-img-container"
            :data-id="item.goodsId"
            @tap="toGoodsDetails"
          >
            <view class="img-box">
              <image :src="item.image" mode="" class="goods-img"></image>
            </view>
            <view class="goodsDetail_info">
              <view class="goods_name"
                >{{ item.goodsName }}
                <view class="goods_num">×{{ item.buyCount }}</view>
              </view>
              <view class="goods_price r_color">￥{{ item.costPrice }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
      <!-- <view class="remark"><text>备注:</text>{{item}}</view> -->
      <!-- <view class="goods-info">
	            <view class="row-box" v-if="orderInfo.coupon && orderInfo.coupon.id">
	                <view class="row-label">商品合计</view>
	                <view class="right-text r_color">¥ {{goodsTotalPrice}}</view>
	            </view>
	            <view class="row-box" v-if="orderInfo.coupon && orderInfo.coupon.id">
	                <view class="row-label">店铺优惠</view>
	                <view class="right-text r_color">
	                    {{orderInfo.coupon.type == 1?'- ￥':''}} {{orderInfo.coupon.actualCoupon}} {{orderInfo.coupon.type == 1?'':'折'}}
	                </view>
	            </view>
	        </view> -->
      <view class="order_info">
        <view class="li_box" v-if="orderInfo.orderDetail.statusMsg"
          >订单状态：
          <view class="info_data">{{ orderInfo.orderDetail.statusMsg }}</view>
        </view>
        <view class="li_box" v-if="orderInfo.orderDetail.orderNo"
          >订单编号：
          <view class="info_data">{{ orderInfo.orderDetail.orderNo }}</view>
        </view>
        <view class="li_box" v-if="orderInfo.orderDetail.createTime"
          >订单创建：
          <view class="info_data">{{ orderInfo.orderDetail.createTime }}</view>
        </view>
        <view class="li_box"
          >支付方式：
          <view class="info_data">{{ orderInfo.orderDetail.patTypeDesc }}</view>
        </view>
        <view class="li_box" v-if="orderInfo.orderDetail.integral"
          >商品合计：
          <view class="info_data">{{ orderInfo.orderDetail.integral }}</view>
        </view>
        <view class="li_box" v-if="orderInfo.orderDetail.orderTypes == 2"
          >批发积分：
          <view class="info_data">{{ orderInfo.orderDetail.totalPfInt }}</view>
        </view>
        <view class="li_box" v-if="orderInfo.orderDetail.orderTypes == 2"
          >茶宝：
          <view class="info_data">{{ orderInfo.orderDetail.totalTeaInt }}</view>
        </view>
        <view class="li_box" v-if="orderInfo.orderDetail.orderTypes == 7"
          >拼团金：
          <view class="info_data">{{
            orderInfo.orderDetail.totalAccountSpell
          }}</view>
        </view>
      </view>
      <view class="detail_btn-row-box">
        <view class="detail_btn-row">
          <block>
            <view
              class="btn cancel-btn"
              @tap="toCancel"
              v-if="orderInfo.orderDetail.status == 2"
              >取消订单</view
            >
            <view
              class="btn topay-btn"
              @tap="toPay"
              v-if="orderInfo.orderDetail.status == 2"
              >立即支付</view
            >
            <view
              class="btn topay-btn"
              @tap="toTake"
              v-if="
                orderInfo.orderDetail.status == 4 ||
                orderInfo.orderDetail.status == 3
              "
              >确认收货</view
            >
            <view
              class="btn topay-btn"
              @tap="toCommen"
              v-if="
                orderInfo.orderDetail.comType &&
                orderInfo.orderDetail.comType == 1
              "
              >去评价</view
            >
            <block
              v-if="
                (orderInfo.orderDetail.status == 3 ||
                  orderInfo.orderDetail.status == 4 ||
                  orderInfo.orderDetail.status == 5) &&
                orderInfo.returnType == 1 &&
                orderInfo.orderDetail.orderTypes != 2
              "
            >
              <view
                v-if="orderInfo.refundId"
                class="btn"
                :class="
                  orderInfo && orderInfo.refundId ? 'topay-btn' : 'cancel-btn'
                "
                :data-type="orderInfo.type"
                :data-id="orderInfo.orderDetail.orderDetailId"
                :data-reid="orderInfo.refundId"
                @tap="toRefundDetails(orderInfo)"
              >
                退款中
              </view>
              <view
                v-else
                class="btn"
                :class="
                  orderInfo && orderInfo.refundId ? 'topay-btn' : 'cancel-btn'
                "
                :data-type="orderInfo.type"
                :data-id="orderInfo.orderDetail.orderDetailId"
                :data-reid="orderInfo.refundId"
                @tap="toRefund(orderInfo)"
              >
                退货/退款
              </view>
            </block>
          </block>
          <view class="btn cancel-btn" @tap="goBack">返回</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var utils = require("../../utils/utils.js");
// import { ReqApi, ToPayOpre } from "../../utils/reqTools.js";
// var reqApi = new ReqApi();
// var toPayOpre = new ToPayOpre();
import { get, post, u_post } from "@/request/api.js";
var app = getApp();
var appEv = app.$vm.$options;
export default {
  data() {
    return {
      currentTpye: false,
      dataError: false,
      orderInfo: {},
      isTuanIng: false, // 是否为拼团中订单
      isweixin: "",
      goodsNum: "",
      goodsTotalPrice: "",
      pt: "",

    };
  },
  onLoad: function (e) {
    if (!e.id) {
      uni.navigateBack({
        delta: 1,
      });
      uni.showToast({
        title: "参数错误",
        image: "/static/static/images/toast_nothing.png",
        duration: 1200,
      });
      return;
    }
    this.orderId = e.id;
    this.type = e.type;
    uni.showLoading({
      title: "加载中…",
      mask: true,
    });
    this.loadData();
  },
  methods: {
    loadData: function () {
      var orderDetailId = this.orderId,
        type = this.type;
      let data = {
        orderDetailId,
        type: this.type,
      };
      u_post("ShuZiTeaYW/shop/goodsOrderDetails", data).then(res => {
        uni.hideLoading();
		console.log(res)
        if (res.status == 200) {
          if (res) {
            this.orderInfo = res;
          } else {
            uni.showModal({
              title: "提示",
              content: "网络较慢，请稍后重试",
              success: function (res) {
                if (res) {
                  uni.navigateBack({
                    delta: 1,
                  });
                }
              },
            });
          }
        }
      });
    },
    toRefund() {
      var id = this.orderId,
        type = this.type;
      uni.navigateTo({
        url: "/pages/order-refund/index?id=" + id + "&type=" + type,
      });
    },
    toRefundDetails(e) {
      var refundId = this.orderInfo.refundId;
      uni.navigateTo({
        url: "/pages/order-refund-details/index?id=" + refundId,
      });
    },
    // 取消订单
    toCancel() {
      var orderDetailId = this.orderId,
        type = this.type;
      const info = reqApi.cancelOrder({ orderDetailId, type });
      var that = this;
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            appEv.errTips(res.data.msg || "订单已取消");
            setTimeout(function () {
              that.loadData();
            }, 1200);
          } else {
            appEv.errTips(res.data.msg || "取消失败");
          }
        });
      }
    },
    // 立即支付
    toPay(e) {
      let data = {
        orderDetailIds: this.orderId,
        types: 1,
        price: this.orderInfo.orderDetail.totalWxPrice,
        account: this.orderInfo.orderDetail.totalAccount,
        teaIntegral: this.orderInfo.orderDetail.totalTeaInt,
        pfIntegral: this.orderInfo.orderDetail.totalPfInt,
        xfIntegral: this.orderInfo.orderDetail.totalXfInt,
        zfType: this.orderInfo.orderDetail.patType,
        ojsType: this.orderInfo.orderDetail.ojsType,
      };
      var info;
      info = reqApi.payOrder(data);
      var that = this;
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            toPayOpre.toPay(res.data.payParam);
          } else {
            appEv.errTips(res.data.msg || "支付失败");
          }
        });
      }
    },
    // 确认收货
    toTake() {
      var orderDetailId = this.orderId;
      var that = this;
      uni.showModal({
        content:
          "亲，“确定收货”代表着本订单的交付流程已经完成，不再支持任何形式的退换货。？",
        confirmText: "确认收货",
        confirmColor: "#fa2f2e",
        cancelText: "取消",
        cancelColor: "#bbb",
        success(res) {
          if (res.confirm) {
            const info = reqApi.takeOrder({
              orderDetailId: orderDetailId,
              type: 1,
            });
            if (info) {
              info.then((res) => {
                if (res.data.status == 200) {
                  appEv.errTips(res.data.msg);
                  setTimeout(function () {
                    that.loadData();
                  }, 1200);
                } else {
                  appEv.errTips(res.data.msg || "收货失败");
                }
              });
            }
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    //计时
    timeChange: function (statusType, finsTime) {
      var nowTime = utils.unxiNum();
      finsTime = utils.unxiNum(finsTime);
      var timeDiffNum = finsTime - nowTime;
      var that = this,
        text = "";
      if (timeDiffNum > 0) {
        var timer = setInterval(function () {
          --timeDiffNum;
          var back_text = utils.changeTimeStamp(timeDiffNum);
          if (timeDiffNum <= 0 || !back_text) {
            clearInterval(timer);
            if (statusType == 0) {
              text = "订单未在规定时间内付款已自动关闭";
              that.currentTpye = 7;
              that.onShow();
            }
          } else {
            if (statusType == 0) {
              text = "请于" + back_text + "内付款，超时订单将自动关闭";
            }
          }
          that.timeOver = false; //时间是否已结束
          that.changeTimeTexttext;
        }, 1000);
      } else {
        if (statusType == 0) {
          text = "订单未在规定时间内付款已自动关闭";
        }
        that.timeOver = true; //时间是否已结束
        that.changeTimeText = text;
      }
    },
    goBack: function () {
      uni.navigateBack({});
    },
    // 跳转商品详情
    toGoodsDetails(e) {
      var url =
        "/pages/chengbei-goods-details/index?goods_id=" +
        e.currentTarget.dataset.id;
      if (
        this.orderInfo.orderDetail.assembleType &&
        this.orderInfo.orderDetail.assembleType != 1
      ) {
        // 判断是否为拼团订单
        url += "&type=TUAN";
      }
      uni.navigateTo({
        url: url,
      });
    },
    // 跳转拼团分享页面
    toTuanShare() {
      uni.navigateTo({
        url:
          "/pages/tuan-share-info/index?orderNo=" +
          this.orderInfo.orderDetail.orderNo,
      });
    },
    // 跳转物流详情
    goLogistics() {
      uni.navigateTo({
        url:
          "/pages/logistics/index?id=" +
          this.orderInfo.orderDetail.orderDetaillId,
      });
    },
    // 去评价
    toCommen(e) {
      var id = this.orderId,
        no = this.orderInfo.orderDetail.orderNo,
        orderType = this.type;
      uni.navigateTo({
        url:
          "/pages/add-goods-commen/index?orderId=" +
          id +
          "&orderNo=" +
          no +
          "&orderType=" +
          orderType,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f3f5f7;
}

.r_color {
  color: #fa2f2e;
}

.sec-wrap {
  background-color: #21c792;
  margin: 2rpx 0 20rpx;
}

.bottom-fiexd {
  position: fixed;
  bottom: 0;
  left: 0;
}
.flex_hvcc {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}
.address-box {
  width: 100%;
  margin: -20rpx 0 20rpx;
  background: #fff url(http://xcx.soowin.com/images/addr-line.png) no-repeat
    center top;
  background-size: 100% 4rpx;
  overflow: hidden;
}

.show-address {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx 0 80rpx;
  background: url(http://xcx.soowin.com/images/ico-addr.png) no-repeat 25rpx
    30rpx;
  background-size: 40rpx auto;
}

.show-address .name-tel {
  font-size: 28rpx;
  color: #000;
  padding: 30rpx 0 20rpx 0;
}
.show-address .name-tel-phone {
  padding: 30rpx 0;
}

.show-address .addr-text {
  font-size: 24rpx;
  color: #888;
  padding-bottom: 34rpx;
  line-height: 36rpx;
}
.show-address .addr-text_lit {
  padding-bottom: 10rpx;
}

.sec-wrap .order-status {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
  height: 160rpx;
  display: flex;
  align-items: center;
}

.order-status .icon-box {
  width: 80rpx;
  height: 80rpx;
  overflow: hidden;
  margin-right: 26rpx;
}

.order-status .icon-box .icon {
  width: 100%;
  height: 100%;
}

.order-status .right-text {
  width: calc(100% - 116rpx);
  overflow: hidden;
}

.order-status .right-text .status {
  font-size: 36rpx;
  color: #fff;
  padding: 2rpx 0 4rpx;
  font-weight: 500;
}

.order-status .right-text .red {
  color: #fa2f2e;
}

.order-status .right-text .des {
  font-size: 24rpx;
  color: #fff;
  padding: 4rpx 0;
}

.address-sec {
  width: 720rpx;
  margin-left: 30rpx;
  display: flex;
  align-items: center;
  padding: 30rpx 0;
}

.address-sec .icon-box {
  width: 30rpx;
  align-self: flex-start;
  overflow: hidden;
  margin-right: 35rpx;
}

.address-sec .icon-box .icon {
  width: 30rpx;
  height: 30rpx;
}

.address-sec .right-box {
  width: 620rpx;
}

.address-sec .right-box .name-tel {
  font-size: 28rpx;
  color: #000;
  margin-bottom: 20rpx;
}

.address-sec .right-box .text {
  font-size: 24rpx;
  color: #888;
  line-height: 36rpx;
  height: 72rpx;
  overflow: hidden;
}

.wuliu-box {
  width: 720rpx;
  margin-left: 30rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
  padding: 30rpx 0;
}

.wuliu-box .icon-box {
  width: 40rpx;
  height: 40rpx;
  overflow: hidden;
  margin-right: 31rpx;
  align-self: flex-start;
}

.wuliu-box .icon-box .icon {
  width: 40rpx;
  height: 40rpx;
}

.wuliu-box .arrow-right {
  width: 15rpx;
  height: 24rpx;
}

.wuliu-box .arrow-right .arrow {
  width: 15rpx;
  height: 24rpx;
}

.wuliu-box .right-text {
  width: 575rpx;
  margin-right: 30rpx;
}

.wuliu-box .right-text .order-number {
  font-size: 28rpx;
  color: #000;
  margin-bottom: 14rpx;
}

.wuliu-box .right-text .wuliu-text,
.wuliu-box .right-text .wuliu-date {
  font-size: 24rpx;
  color: #888;
  line-height: 36rpx;
}

.goods-list {
  width: 100%;
  background-color: #fff;
  margin-bottom: 24rpx;
}

.goods-list .list-title {
  font-size: 28rpx;
  color: #000;
  padding: 16rpx 24rpx;
}
.avaImgs {
  width: 50rpx;
  height: 50rpx;
  overflow: hidden;
  border-radius: 50%;
  background-color: #f3f5f7;
  margin-right: 20rpx;
}

.goods-info_box {
  width: 100%;
  overflow: hidden;
  border-top: 2rpx solid #eee;
}
.goods-img-container {
  overflow: hidden;
  padding: 30rpx;
  margin-bottom: 2rpx;
  box-sizing: border-box;
}

.goods-info .goods-des {
  width: 540rpx;
  height: 78rpx;
  line-height: 39rpx;
  font-size: 26rpx;
  color: #000;
  overflow: hidden;
}

.goods-img-container .img-box {
  width: 170rpx;
  height: 118.56rpx;
  background-color: #f7f7f7;
  overflow: hidden;
  float: left;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}
.goodsDetail_info {
  overflow: hidden;
  float: right;
  width: calc(100% - 194rpx);
  line-height: 1.5;
  position: relative;
  height: 118rpx;
}
.goodsDetail_info .goods_name {
  padding-right: 66rpx;
  position: relative;
  font-size: 26rpx;
  margin-bottom: 6rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goodsDetail_info .goods_name .goods_num {
  font-size: 24rpx;
  color: #666;
  position: absolute;
  top: 0;
  right: 0;
}
.goodsDetail_info .unimport {
  font-size: 24rpx;
  color: #999;
}
.goodsDetail_info .goods_price {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 28rpx;
  line-height: 1.2;
  font-weight: 600;
}
.goods-img-container .img-box .goods-img {
  width: 100%;
  display: block;
  height: 100%;
}

.peisong-way {
  width: 100%;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.peisong-way .row-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 24rpx 30rpx;
  font-size: 26rpx;
  line-height: 1.6;
}

.goods-info {
  width: 100%;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.goods-info .row-box {
  width: calc(100% - 30rpx);
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  box-sizing: border-box;
  padding: 30rpx 30rpx 30rpx 0;
  margin-left: 30rpx;
  border-bottom: 1px solid #f5f5f5;
  font-size: 26rpx;
  color: #000;
}
.goods-info .row-box .row-label {
  width: calc(100% - 140rpx);
}

.goods-info .row-box .right-text {
  text-align: right;
}

.goods-info .row-box .right-text.r_color {
  font-weight: 600;
}

.order_info {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 16rpx 30rpx;
  margin-bottom: 20rpx;
}

.order_info .li_box {
  line-height: 1.6;
  padding: 10rpx 0;
  font-size: 26rpx;
  color: #999;
}

.order_info .li_box .info_data {
  display: inline-block;
  color: #000;
}

.jiesuan-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #eee;
  background-color: #fff;
}

.jiesuan-box .to-pay-btn {
  width: 250rpx;
  text-align: center;
  height: 100%;
  line-height: 100rpx;
  background-color: #fa2f2e;
  font-size: 32rpx;
  color: #fff;
  border-radius: 0;
}

.jiesuan-box .left-price {
  display: flex;
  width: 500rpx;
  justify-content: flex-start;
  line-height: 100rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.jiesuan-box .total {
  text-align: right;
}

.jiesuan-box .total .total_price {
  color: #fa2f2e;
  font-weight: 600;
  display: inline-flex;
}

.logistics_btn {
  padding: 24rpx 24rpx 24rpx 30rpx;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 26rpx;
  line-height: 1.6;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.l_box {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 28rpx 0 64rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* background: url(http://xcx.soowin.com/images/logis_icon.png) no-repeat left top, url(http://xcx.soowin.com/images/arrow-right.png) no-repeat right center;
	background-size: 46rpx auto, 16rpx auto; */
  background: url(http://xcx.soowin.com/images/logis_icon.png) no-repeat left
    top;
  background-size: 46rpx auto;
}
.detail_btn-row-box {
  height: 104rpx;
}
.detail_btn-row {
  width: 100%;
  height: 104rpx;
  padding: 18rpx 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  font-size: 26rpx;
  align-items: center;
  box-shadow: 0rpx -2rpx 16rpx rgba(0, 0, 0, 0.04);
}
.detail_btn-row .btn {
  box-sizing: border-box;
  text-align: center;
  border-radius: 6rpx;
  margin-left: 20rpx;
  border: 1rpx solid #ccc;
  padding: 16rpx 24rpx;
}
.detail_btn-row .topay-btn {
  border-color: #e05f0b;
  background-color: #e05f0b;
  color: #fff;
}
.footerMargin {
  margin-bottom: 104rpx;
}

// 备注
.remark {
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 3rpx;
}
// 备注-end
</style>