zhishifufei_uniapp/pages/special/order.vue

<template>
  <BaseContainer class="order-detail">
    <NavBar title="订单详情" :class="{ 'showNavBg': scrollTop > 20 }"/>
    <view v-if="orderInfo.id" class="detail-box" @click="showOperateBox = false;">
      <!-- 退款 -->
      <view class="section return" v-if="orderInfo.refund_reason && orderInfo.refund_status === 0">
        <view>卖家拒绝退款</view>
        <view class="time">拒绝退款原因：{{ orderInfo.refund_reason }}</view>
        <view class="time">处理时间：{{ orderInfo.refund_reason_time }}</view>
      </view>
      <!-- 退货 -->
      <view class="section return" v-if="orderInfo.refund_status === 1">
        <view>退款中</view>
        <view class="time">申请时间：{{ orderInfo.refund_application_time }}</view>
      </view>
      <view class="section return" v-else-if="orderInfo.refund_status === 2">
        <view>已退款</view>
        <view class="time">{{ orderInfo._status._msg }}</view>
      </view>
      <view class="section status" v-if="orderInfo.refund_status === 0 && !orderInfo.refund_reason">
        <!-- <view class="image">
          <image :src="orderInfo.status_pic" />
        </view> -->
        <view class="text">
          <view>{{ orderInfo._status._title }}</view>
          <view class="time">{{ orderInfo._status._msg }}</view>
        </view>
      </view>
      <view class="section contact">
				<view v-if="orderInfo._status._type > 1" class="express-delivery-info flex">
					<image src="@/static/images/special/car.png" mode="aspectFill"></image>
					<view class="info-box" @click="express">
						<view class="info-title flex">您的快递已发车 <text class="more"></text> </view>
						<view class="info-time"></view>
					</view>
				</view>
				<view class="address-info flex">
					<image src="@/static/images/special/location.png" mode="aspectFill"></image>
					<view class="info-box">
						<view class="info-title flex">{{ orderInfo.real_name }} <text>{{ orderInfo.user_phone }}</text> </view>
						<view class="info-time">{{ orderInfo.user_address }}</view>
					</view>
				</view>
      </view>
      <view class="section goods">
        <view class="goods-bd" v-for="cart of orderInfo.cartInfo" :key="cart.unique">
          <view class="image">
            <image :src="cart.productInfo.image" />
          </view>
          <view class="text">
            <view class="name">{{ cart.productInfo.store_name }}</view>
            <view class="money flex flex-center-x">
            	<view class="price">￥<text>{{ cart.truePrice }}</text></view>
            	<view class="num">x{{ cart.cart_num }}</view>
						</view>
          </view>
          <!-- <view v-if="orderInfo._status._type === 3">
            <view class="num">x{{ cart.cart_num }}</view>
            <navigator :url="`/pages/my/order_reply?unique=${cart.unique}`">
              评价
            </navigator>
          </view> -->
        </view>
        <view class="goods-ft flex flex-center-x">
         	<view class="li">共 <text> {{ orderInfo.total_num }} </text> 件商品</view>
         	<view class="sum-money">合计：<text>￥<text style="color: #F8473E;font-size: 32rpx;">{{ orderInfo.pay_price }}</text></text></view>
        </view>
      </view>
      <!-- 待收货 -->
      <view class="section express" v-if="orderInfo.status >= 1">
        <view class="image">
          <image :src="getImgPath('/wap/first/zsff/images/express.png')" />
        </view>
        <view class="text">
          <view>
            物流公司：<text>{{ orderInfo.delivery_name }}</text>
          </view>
          <view>
            快递单号：<text id="account">{{ orderInfo.delivery_id }}</text>
          </view>
        </view>
        <button type="button" @click="copyNo(orderInfo.delivery_id)" id="copy">复制单号</button>
      </view>
      <view class="section list">
        <view class="li-item flex">
          <view>订单编号：</view>
          <view class="flex flex-center-x">{{ orderInfo.order_id }} <text @click="copyNo(orderInfo.order_id)">复制</text> </view>
        </view>
        <view class="li-item flex">
          <view>创建时间：</view>
          <view>{{ orderInfo.add_time }}</view>
        </view>
        <view v-if="orderInfo._status._type > 0" class="li-item flex">
          <view>付款时间：</view>
          <view>{{ orderInfo.add_time }}</view>
        </view>
        <view v-if="orderInfo._status._type > 0" class="li-item flex">
          <view>发货时间：</view>
          <view>{{ orderInfo.add_time }}</view>
        </view>
			</view>
			<view class="section list">
				<view v-if="orderInfo._status._type > 0" class="li-item flex">
				  <view>支付方式：</view>
				  <view>{{ orderInfo._status._payType }}</view>
				</view>
        <view class="li-item flex">
          <view>商品金额：</view>
          <view>￥{{ orderInfo.total_price }}</view>
        </view>
				<view class="li-item flex">
				  <view>优惠金额：</view>
				  <view style="color: #FF3A37;">￥{{ orderInfo.total_price - money }}</view>
				</view>
        <!-- <view v-if="orderInfo.use_gold > 0" class="li-item flex">
          <view>使用{{ gold_name }}：</view>
          <view>{{ orderInfo.use_gold }}</view>
        </view>
        <view v-if="orderInfo.back_gold > 0" class="li-item flex">
          <view>退还{{ gold_name }}：</view>
          <view>￥{{ orderInfo.back_gold }}</view>
        </view> -->
				<view class="li-item flex">
				  <view>配送费：</view>
				  <view>￥{{ orderInfo.total_postage }}</view>
				</view>
        <view class="li-item flex">
          <view>实际支付：</view>
          <view>￥{{ money }}</view>
        </view>
        <!-- <view class="li-item flex">
          <view>买家留言：</view>
          <view class="msg">{{ orderInfo.mark }}</view>
        </view> -->
      </view>
			<view v-if="showOperateBox" class="operate-box">
				<view class="apply-invoicing" @click.stop="applyInvoicing">申请开票</view>
				<view class="delete-order" @click.stop="removeOrder('删除')">删除订单</view>
			</view>
      <view class="footer flex flex-center-x">
				<view class="more-operate" @click.stop="showOperateBox = !showOperateBox;">更多</view>
        <template v-if="orderInfo._status._type === 0">
          <view class="footer-btn" @click="removeOrder('取消')">取消订单</view>
          <view class="red footer-btn" @click="submit">付款</view>
        </template>
       <!-- <template v-else-if="
          orderInfo._status._type === 1 &&
          !orderInfo.refund_reason &&
          orderInfo.refund_status === 0 &&
          orderInfo.pay_price > 0
        ">
          <view class="footer-btn" @click="applyRefundOrder">申请退款</view>
        </template> -->
        <!-- <template v-else-if="
          orderInfo._status._type === 3 &&
          !orderInfo.refund_reason &&
          orderInfo.refund_status === 0 &&
          orderInfo.pay_price > 0
        ">
          <view class="footer-btn" @click="removeOrder('删除')">删除订单</view>
          <view class="footer-btn" @click="applyRefundOrder">申请退款</view>
        </template> -->
        <!-- <template v-else-if="
          orderInfo._status._type === 4 &&
          !orderInfo.refund_reason &&
          orderInfo.refund_status === 0 &&
          orderInfo.pay_price > 0
        ">
          <view class="footer-btn" @click="removeOrder('删除')">删除订单</view>
          <view class="footer-btn" @click="applyRefundOrder">申请退款</view>
        </template> -->
        <!-- <template v-else-if="
          !orderInfo.refund_reason &&
          orderInfo.refund_status === 0 &&
          orderInfo._status._type === 3 &&
          orderInfo.pay_price > 0
        ">
          <view class="footer-btn" @click="removeOrder('删除')">删除订单</view>
          <view class="red footer-btn" @click="applyRefundOrder()"> 再次申请 </view>
        </template> -->
        <view @click="removeOrder('删除')" class="footer-btn" v-else-if="
          orderInfo.refund_status === 2 ||
          (orderInfo._status._type === 3 && orderInfo.pay_price === 0)
        ">删除订单</view>
        <!-- <view class="footer-btn" @click="services">联系客服</view> -->
        <!-- <view class="footer-btn" v-if="orderInfo.status >= 1" @click="express">查看物流</view> -->
				<template v-else-if="orderInfo._status._type === 2">
				  <view class="red footer-btn" @click="userTake">确认收货</view>
				</template>
      </view>

      <!-- 支付弹窗 -->
      <PayDialog :open.sync="payDialogOpen" :money="money" :now_money="now_money" :special_id="id"
        :pay_type_num="pay_type_num" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue"
        :template-id="templateId" :wxpay-h5="wxpayH5" @change="changeVal" />
    </view>
  </BaseContainer>
</template>

<script>
  import PayDialog from "@/components/PayDialog/index.vue";
  import { getOrderDetail, getSpecialTemplateIds, aliPayApp, aliPayWap } from "@/api/special";
  import { userRemoveOrder, userTakeOrder } from "@/api/auth";
  import { CUSTOMER_DETAIL_TYPE, CUSTOMER_SUPPORT_TYPE } from "@/constants/customer-type";

  export default {
    components: {
      PayDialog,
    },
    data() {
      return {
        isWechat: false,
        id: 0,
        orderInfo: {},
        orderId: 0,
        payDialogOpen: false, // 是否显示支付弹窗
        money: 0,
        pay_type_num: 50,
        is_alipay: false, //支付宝是否开启
        now_money: 0, //余额
        is_yue: 0, //余额是否开启
        templateId: "",
        wxpayH5: 0,
        site_name: "",
        gold_name: "",
        isOpenWeixing: false,
				showOperateBox: false,
				scrollTop: 0,
      };
    },
    computed: {
      url() {
        return this.isWechat ? "/pages/index/login" : "/pages/login/phone_check";
      },
    },
    onLoad({ uni }) {
      this.orderId = uni;
      this.getOrderDetail().then(() => {
        this.subscribeTemplate();
      });
    },
    onShow() {
      if (this.isOpenWeixing && this.orderId) {
        this.$util.wxh5PayIsSuccess(this.orderId, 1, this)
        this.isOpenWeixing = false
      }
    },
		onPageScroll(e) {
			console.log(e.scrollTop);
			this.scrollTop = e.scrollTop;
		},
    methods: {
      getOrderDetail() {
        return getOrderDetail(this.orderId).then(({ data }) => {
          const {
            gold_name,
            order,
            site_name,
            is_alipay,
            is_yue,
            wxpayH5,
            now_money,
          } = data;

          Object.assign(this, {
            gold_name,
            now_money: Number(now_money),
            orderInfo: order,
            id: order.id,
            money: Number(order.pay_price),
            site_name,
            is_alipay: !!is_alipay,
            is_yue: !!is_yue,
            wxpayH5: !!wxpayH5,
          });
					console.log('money', this);
        });
      },
      subscribeTemplate() {
        getSpecialTemplateIds(this.pay_type_num, this.id).then(({ msg }) => {
          this.templateId = msg;
        });
      },
      submit() {
        this.payDialogOpen = true;
      },
      copyNo(num) {
        uni.setClipboardData({
          data: num,
          success: () => {
            this.$util.showMsg("复制成功");
          },
          fail: (err) => {
            this.$util.showMsg("复制失败");
          },
        });
      },
      async userTake() {
        const { confirm } = await this.$util.wrapFn(uni.showModal, {
          title: "提示",
          content: "确定立即收货?",
        });

        if (!confirm) return;

        uni.showLoading({ mask: true });

        try {
          await userTakeOrder(this.orderId);
          uni.hideLoading();
          this.$util.showMsg("收货成功！");
          this.getOrderDetail();
        } catch (err) {
          this.$util.showMsg(err.msg);
          uni.hideLoading();
        }
      },
      async removeOrder(title) {
        const { confirm } = await this.$util.wrapFn(uni.showModal, {
          title: "提示",
          content: "确认" + title + "该订单？",
        });

        if (!confirm) return;
        uni.showLoading({ mask: true });
        try {
          await userRemoveOrder(this.orderId);
          uni.hideLoading();
          this.$util.showMsg(title + "成功！");
					uni.navigateBack();
        } catch (err) {
          uni.hideLoading();
          this.$util.showMsg(err.msg);
        }
      },
      // 联系客服
      services() {
        this.$util.goSupport(CUSTOMER_DETAIL_TYPE.ORDER, CUSTOMER_SUPPORT_TYPE.STORE_GOOD_ORDER, this.orderInfo.id);
      },
      applyRefundOrder() {
        uni.navigateTo({
          url: "/pages/my/refund_apply?order_id=" + this.orderId,
        });
      },
      pay_order(data) {
        this.orderId = data.data.result.orderId || "";
        switch (data.data.status) {
          case "PAY_ERROR":
          case "ORDER_EXIST":
          case "ORDER_ERROR":
            this.extendOrder(data.msg);
            break;
          case "WECHAT_PAY":
            this.wechatPay(data.data.result.jsConfig);
            break;
          case "WECHAT_ROUTINE_PAY":
            this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
            break;
          case "WECHAT_H5_PAY":
            this.payDialogOpen = false;
            this.$util.wechatH5Pay(data.data.result.jsConfig, this);
            break;
          case "SUCCESS":
            this.successOrder(data.msg);
            break;
          case "ZHIFUBAO_PAY":
            this.aliPay(data.data.result, "goods")
            break;
          case 'TOUTIAO_PAY':
            this.$util.toutiaoPay(data.data.result.jsConfig, this);
            break;
          case 'KUAISHOU_PAY':
            this.$util.kuaishouPay(data.data.result.jsConfig, this);
            break
        }
      },
      aliPay(msn, type) {
        this.$util.aliPay(msn, type, this)
      },
      wechatPay(config) {
        this.$util.weixinpay(config, this)
      },
      successOrder(msg) {
        this.$util.showMsg(msg || "支付成功");
        this.getOrderDetail();
      },
      extendOrder: function (msg) {
        if (typeof msg === "object") {
          if (msg.errMsg === "chooseWXPay:cancel") {
            msg = "微信支付取消";
          } else {
            msg = "支付失败";
          }
        } else {
          msg = "支付失败";
        }
        this.$util.showMsg(msg);

        this.getOrderDetail();
      },
      //所有插件回调处理事件
      changeVal(opt) {
        if (typeof opt != "object") opt = {};
        var action = opt.action || "";
        var value = opt.value || "";
        this[action] && this[action](value);
      },
      express() {
        uni.navigateTo({
          url: "/pages/my/express?uni=" + this.orderId,
        });
      },
			applyInvoicing() {
				uni.navigateTo({
					url: `/pages/store/applyInvoicing?orderNum=${this.orderInfo.order_id}&money=${this.money}`,
				});
				this.showOperateBox = false;
			},
    },
  };
</script>

<style scoped lang="scss">
	.order-detail {
		background: linear-gradient(to top, #f6f6f6 0%, #f6f6f6 60%, #F6F8FA 70%, #A1BFFD 100%);
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding-bottom: 130rpx;
		::v-deep {
			.nav-box {
				background: transparent!important;
			}
			.showNavBg {
				background: #fff!important;
			}
			// #ifdef MP-WEIXIN 
			.base-container {
				background: transparent!important;
				padding-bottom: calc(0rpx + var(--safe-top))!important;
			}
			.showNavBg {
				.nav-box {
					background: #fff!important;
				}
			}
			// #endif
		}
		.detail-box {
			flex: 1;
			overflow-y: auto;
		}
	}
  .order-detail .section {
    background-color: #ffffff;
  }

  .order-detail .section~.section {
    margin-top: 12rpx;
  }

  .order-detail .section.return {
    padding: 40rpx 30rpx;
    background-color: #666;
    font-size: 30rpx;
    color: #ffffff;
  }

  .order-detail .section.return .time {
    margin-top: 15rpx;
    font-size: 24rpx;
  }

  .order-detail .section.reason {
    padding: 40rpx 30rpx;
    font-size: 30rpx;
    color: #333;
  }

  .order-detail .section.reason .info {
    margin-top: 15rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .order-detail .section.status {
    display: flex;

    align-items: center;
    padding: 32rpx 30rpx;
    background-color: transparent;
    font-size: 30rpx;
    color: #333;
  }

  .order-detail .section.status .image {
    width: 110rpx;
    height: 110rpx;
    margin-right: 30rpx;
  }

  .order-detail .section.status image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    pointer-events: none;
  }

  .order-detail .section.status .text {
    flex: 1;
  }

  .order-detail .section.status view:first-child {
    font-weight: bold;
		font-size: 42rpx;
  }

  .order-detail .section.status .time {
    margin-top: 22rpx;
    font-size: 24rpx;
		line-height: 24rpx;
    opacity: 0.8;
  }

  .order-detail .section.contact {
    padding: 40rpx 16rpx;
    font-size: 32rpx;
		line-height: 32rpx;
    color: #333;
		width: 690rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 10rpx;
		.express-delivery-info {
			margin-bottom: 60rpx;
		}
		.express-delivery-info, .address-info {
			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 16rpx;
			}
			.info-box {
				flex: 1;
				.info-title {
					align-items: center;
					padding-right: 20rpx;
					text {
						margin-left: auto;
					}
				}
				.info-time {
					margin-top: 24rpx;
					color: #999;
					font-size: 24rpx;
				}
			}
		}
		.address-info .info-box .info-title text {
			margin-left: 40rpx!important;
		}
  }

  .order-detail .section.contact text text {
    margin-left: 30rpx;
  }

  .order-detail .section.contact .address {
    margin-top: 15rpx;
    font-size: 26rpx;
    color: #868686;
  }
	
	.order-detail .section.goods {
		width: 690rpx;
		margin: 20rpx auto 0;
		padding: 40rpx 30rpx 0;
	}

  .order-detail .section.goods .goods-bd {
    display: flex;
		border-bottom: 1rpx solid rgba(187, 187, 187, 0.32);
		padding-bottom: 33rpx;
		.image {
			width: 156rpx;
			height: 184rpx;
			margin-right: 52rpx;
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.text {
			flex: 1;
			.name {
				color: #333;
				line-height: 35rpx;
				height: 70rpx;
			}
			.money {
				margin-top: auto;
				.price {
					font-size: 22rpx;
					color: #F8473E;
					text {
						font-size: 32rpx;
					}
				}
				.num {
					margin-left: auto;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
  }

  .order-detail .section.goods .goods-bd>view:last-child {
    display: flex;

    flex-direction: column;

    justify-content: space-between;
  }

  .order-detail .section.goods .num {
    margin-left: 20rpx;
    font-size: 26rpx;
    line-height: 30rpx;
    color: #9a9a9a;
  }

  .order-detail .section.goods .goods-bd>view:last-child navigator {
    padding: 0.15em 0.4em;
    border: 1px solid #2c8eff;
    border-radius: 4px;
    font-size: 20rpx;
    line-height: 1.2;
    color: #2c8eff;
  }

  .order-detail .section.goods .goods-ft {
    justify-content: space-between;
		height: 92rpx;
		.li {
			font-size: 25rpx;
			color: #999;
			text {
				color: #333;
				margin: 0 5rpx;
			}
		}
		.sum-money {
			font-size: 25rpx;
			color: #999;
			>text {
				color: #F8473E;
				font-size: 22rpx;
			}
		}
  }

  .order-detail .section.express {
    display: flex;

    align-items: center;
    padding: 30rpx;
		width: 690rpx;
		margin: 20rpx auto 0;
  }

  .order-detail .section.express .image {
    width: 50rpx;
    height: 50rpx;
    margin-right: 20rpx;
  }

  .order-detail .section.express image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10rpx;

    box-sizing: border-box;
    background-color: #ff9600;

    object-fit: cover;
    pointer-events: none;
  }

  .order-detail .section.express .text {
    flex: 1;
    font-size: 26rpx;
    color: #999999;
  }

  .order-detail .section.express .text view view {
    margin-top: 10rpx;
  }

  .order-detail .section.express .text text {
    color: #333;
  }

  .order-detail .section.express button {
    padding: 0.15em 0.4em;
    border: 1px solid #999999;
    border-radius: 4px;
    font-family: inherit;
    font-weight: normal;
    font-size: 20rpx;
    line-height: 1.2;
    color: #666;
  }

  .order-detail .section.list {
    padding: 30rpx;
    font-size: 28rpx;
    color: #282828;
		width: 690rpx;
		margin: 20rpx auto 0;
  }

  .order-detail .section.list .li-item {
    &+.li-item {
      margin-top: 30rpx;
    }
		text {
			width: 90rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 21rpx;
			border: 2rpx solid #BBBBBB;
			text-align: center;
			line-height: 42rpx;
			margin-left: auto;
			font-size: 24rpx;
			color: #bbb;
		}
		view:nth-child(1) {
			width: 180rpx;
		}
    view:nth-child(2) {
      flex: 1;
      color: #868686;
    }
  }

  // .order-detail .section.list view:nth-child(2) {
  //   flex: 1;
  //   text-align: right;
  //   color: #868686;
  // }

  .order-detail .section.list view.msg {
    text-align: left;
    word-break: break-all;
  }
	.order-detail .operate-box {
		position: fixed;
		left: 60rpx;
		bottom: 110rpx;
		background: #fff;
		box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(49,49,49,0.16);
		padding: 0 16rpx;
		z-index: 100;
		&:after {
			content: '';
			position: absolute;
			left: 10rpx;
			bottom: -35rpx;
			width: 0;
			height: 0;
			border: 20rpx solid;
			border-color: #fff transparent transparent transparent;
		}
		>view {
			font-size: 28rpx;
			color: #333;
			height: 84rpx;
			line-height: 84rpx;
			&.apply-invoicing {
				border-bottom: 1rpx solid #e5e5e5;
			}
		}
	}
  .order-detail .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    padding: 0 30rpx 0 60rpx;
		height: 130rpx;
    background-color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
		.more-operate {
			margin-right: auto;
			font-size: 28rpx;
			color: #666;
		}
  }

  .order-detail .footer {
    .footer-btn {
      width: 160rpx;
      height: 60rpx;
      border: 1px solid #CCCCCC;
      border-radius: 30rpx;
      vertical-align: middle;
      font-size: 28rpx;
      line-height: 60rpx;
      text-align: center;
      color: #666;

      &.red {
        border-color: #FF4B33;
        background-color: #FF4B33;
        color: #ffffff;
      }
    }
  }

  .footer-btn+.footer-btn {
    margin-left: 8rpx;
  }
</style>