@alu008/test_yuanqikaixiang 1.0.0

package/subpackages/myOrderDetail/myOrderDetail.vue

@@ -0,0 +1,659 @@
+<template>
+  <view v-if="detail">
+        <u-sticky bgColor="#f6f6f6">
+           <Header title="发货详情"></Header>
+        </u-sticky>
+    
+    <!-- <scroll-view scroll-y :style="{
+      width: '100%',
+      height: `calc(100vh - ${statusBarHeight + 44}px)`,
+    }" v-if="detail"> -->
+    <view class="myOrderDetail">
+      <view  class="address">
+        <image src="https://img.shinemang.com/static/img/addressIcon.png" mode="scaleToFill" />
+        <view>
+          <view class="location"
+            >{{ detail.deliveryInfo.province }}{{ detail.deliveryInfo.city
+            }}{{ detail.deliveryInfo.area
+            }}{{ detail.deliveryInfo.address }}</view
+          >
+          <view class="name"
+            >{{ detail.deliveryInfo.name }}
+            {{ detail.deliveryInfo.phoneNum }}</view
+          >
+        </view>
+      </view>
+      <!-- <view class="sendFee">
+        <view>运费</view>
+        <view>¥{{ detail.amount }}</view>
+      </view> -->
+
+      <view class="info" v-if="detail.logisticsInfo.length > 0">
+        <view :key="value.id" v-for="value in detail.logisticsInfo">
+          <view style="margin-bottom: 24rpx" class="title">
+            <text>物流信息</text>
+            <text style="color: #EB6E2A">{{
+              value.state == "LogisticsState_UnDeliver" ? "待发货" : "已发货"
+            }}</text>
+          </view>
+
+          <view hover-class="hoverActive" class="shopItem">
+            <view>
+              <view
+                v-if="value.logisticsItem.length > 0"
+                v-for="(item, index) in value.logisticsItem"
+                :key="item.id"
+                class="info"
+                @click="toDetail(item)"
+              >
+                <view
+                  class="bgcCenter image"
+                  :style="{
+                    backgroundImage:
+                      'url(' + formateUrl(item.itemCoverThumb) + ')',
+                  }"
+                >
+                </view>
+
+                <view class="centerInfo">
+                  <view class="title">
+                    <view>{{ item.name }}</view>
+                    <view
+                      style="color: #505050; font-size: 24rpx; font-weight: 400"
+                      >x{{ item.num }}</view
+                    >
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view style="border-top: 2rpx solid #f6f6f6" class="item">
+            <view>快递公司</view>
+            <view>{{ value.logisticsCompany }}</view>
+          </view>
+          <view class="item">
+            <view>快递单号</view>
+            <view @click="copy(value.id)" class="copyId">
+              <text style="color: #505050">{{ value.id }}</text>
+            
+              <text style="margin-left:16rpx;padding-left: 16rpx; border-left: 2rpx solid #E9E9E9;">复制</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view v-else class="info">
+        <view class="title">
+          <text>物流信息</text>
+          <text style="color: #EB6E2A"> 待发货 </text>
+        </view>
+
+        <view hover-class="hoverActive" class="shopItem">
+          <view>
+            <view
+              v-if="detail.orderItem.length > 0"
+              v-for="(item, index) in detail.orderItem"
+              :key="item.id"
+              class="info"
+              @click="toDetail(item)"
+            >
+              <view
+                class="bgcCenter image"
+                :style="{
+                  backgroundImage:
+                    'url(' + formateUrl(item.itemCoverThumb) + ')',
+                }"
+              >
+              </view>
+              <view class="centerInfo">
+
+                <view class="title">
+                  <view >{{ item.name }}</view>
+                  <view
+                    style="color: #505050; font-size: 24rpx; font-weight: 400"
+                    >x{{ item.num }}</view
+                  >
+                </view>
+
+                <view
+                  v-if="detail.state == 'OrderState_UnDeliver'"
+                  style="margin-top: 16rpx; color: #13B77F"
+                >
+                  预计发货时间:{{ detail.preDeliveredAt }}前
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+
+      <!-- <view class="bottomAction">
+        <view class="actions">
+  
+
+          <view class="pay">
+            <view class="payCount">
+              <text>实付金额:</text
+              ><text style="font-weight: bold; color: #fd0609"
+                >¥{{
+                  detail.type == "OrderType_Shop"
+                    ? detail.summaryAmount
+                    : detail.amount
+                }}</text
+              >
+            </view>
+            <view
+              @click="confirmRecieveOrder"
+              v-if="detail.state == 'OrderState_UnReceive'"
+              class="payBtn"
+              >确认收货</view
+            >
+            <view
+              @click="cancelOrder"
+              v-if="
+                detail.state == 'OrderState_UnDeliver' &&
+                detail.type == 'OrderType_Shop'
+              "
+              class="cancelBtn"
+              >取消订单</view
+            >
+          </view>
+        </view>
+      </view> -->
+
+      <cardDetails
+        :show="show"
+        @close="show = false"
+        :cardDetail="cardDetail"
+        :showBack="false"
+      >
+      </cardDetails>
+    </view>
+  <!-- </scroll-view> -->
+  </view>
+
+  
+</template>
+
+<script>
+import { formateServerUrl } from "@/utils";
+import cardDetails from "@/components/cardDetails/cardDetails.vue";
+import Header from "@/components/header/header.vue";
+import {
+  fetchOrderDetail,
+  fetchCancelOrder,
+  fetchConfirmOrder,
+  fetchOrderGoodsDetail,
+  fetchCardDetail,
+  fetchSopRefund,
+} from "@/utils/fetch";
+export default {
+  data() {
+    return {
+      detail: "",
+      id: "",
+      show: false,
+      cardDetail: "",
+      statusBarHeight:0
+    };
+  },
+  components: {
+    // cardDetails,
+    Header
+    // login,
+  },
+  onLoad(options) {
+    this.id = options.id;
+    this.getOrderDetail();
+      const safeTop = uni.getStorageSync('safeTop')
+       this.statusBarHeight = safeTop
+  },
+  methods: {
+    toDetail(item) {
+      // if (this.detail.type == "OrderType_Shop") {
+      //   fetchOrderGoodsDetail({
+      //     id: this.detail.shopOrderId,
+      //   }).then((res) => {
+      //     uni.navigateTo({
+      //       url:
+      //         "/subpackages/goodsDetail/goodsDetail?id=" +
+      //         res.data.merchandiseId,
+      //     });
+      //   });
+      // } else {
+      //   fetchCardDetail({
+      //     id: item.itemId,
+      //   }).then((res) => {
+      //     this.cardDetail = res.data;
+      //     this.show = true;
+      //   });
+      // }
+    },
+    cancelOrder() {
+      if (this.detail.type == "OrderType_Shop") {
+        fetchSopRefund({
+          id: this.detail.shopOrderId,
+        }).then((res) => {
+          uni.showToast({
+            title: "取消成功",
+            icon: "none",
+          });
+          uni.setStorageSync("refreshOrder", 1);
+          this.getOrderDetail();
+        });
+      } else {
+        fetchCancelOrder({
+          id: this.detail.id,
+        }).then((res) => {
+          uni.showToast({
+            title: "取消成功",
+            icon: "none",
+          });
+          uni.setStorageSync("refreshOrder", 1);
+          this.getOrderDetail();
+        });
+      }
+    },
+    confirmRecieveOrder(value) {
+      fetchConfirmOrder({
+        id: this.detail.id,
+      }).then((res) => {
+        uni.setStorageSync("refreshOrder", 1);
+        this.getOrderDetail();
+      });
+    },
+    copy(id){
+        uni.setClipboardData({
+	data: id,
+	success: function () {
+  uni.showToast({
+    title: '复制成功',
+    icon: 'none'
+  })
+	}
+});
+    },
+
+    getOrderDetail() {
+      fetchOrderDetail({ id: this.id }).then((res) => {
+        console.log(res);
+        this.detail = res.data;
+        // this.detail.logisticsInfo = [
+        //   {
+        //     logisticsCompany: "顺丰快递",
+        //     id: "123456789",
+        //     logisticsTime: "2020-10-10 10:10:10",
+        //     logisticsItem: this.detail.orderItem,
+        //   },
+        // ];
+      });
+    },
+
+    formateUrl(url) {
+      return formateServerUrl(url);
+    },
+  },
+  onShow() {},
+  onShareAppMessage() {},
+  onShareTimeline() {},
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+  background-color: #f6f6f6 !important;
+  min-height: 100vh;
+}
+.myOrderDetail {
+  padding: 0 32rpx;
+  /* height: calc(100vh - 190rpx); */
+  width: 100%;
+  padding-top: 16rpx;
+  // padding-bottom: 140rpx;
+  padding-bottom: 0;
+  /* height: 100vh; */
+
+  .address {
+    width: 100%;
+    background: #ffffff;
+    border-radius:24rpx;
+    padding: 28rpx 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    image {
+      width: 48rpx;
+      height: 48rpx;
+    }
+    > view {
+      width: 580rpx;
+      .location {
+        font-size: 28rpx;
+        line-height: 44rpx;
+        font-weight: 600;
+      }
+      .name {
+        color: #505050;
+        margin-top: 5rpx;
+        font-size: 24rpx;
+      }
+    }
+  }
+  .sendFee {
+    width: 100%;
+    height: 104rpx;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24rpx;
+    align-items: center;
+    font-size: 28rpx;
+    font-weight: bold;
+    line-height: 104rpx;
+    border-radius: 24rpx;
+    background-color: #fff;
+    margin-top: 16rpx;
+  }
+  > .info {
+    width: 100%;
+    margin-top: 16rpx;
+
+    background: #ffffff;
+    border-radius: 24rpx;
+    padding: 32rpx 24rpx;
+    margin-bottom: 20rpx;
+
+    > view {
+      margin-bottom: 30rpx;
+      &:last-child {
+        margin-bottom: 0rpx;
+      }
+      > .title {
+        font-size: 28rpx;
+        font-weight: 600;
+        // margin-bottom: 28rpx;
+
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+    > .title {
+      font-size: 28rpx;
+      font-weight: 600;
+      margin-bottom: 24rpx;
+
+      display: flex;
+      justify-content: space-between;
+    }
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      font-size: 24rpx;
+      font-weight: bold;
+      // margin-bottom: 28rpx;
+      height: 80rpx;
+      // line-height: 80rpx;
+
+      .copyId {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: normal;
+
+      }
+    }
+
+    .shops {
+      display: flex;
+      .list {
+        width: 660rpx;
+        overflow-x: auto;
+        > view {
+          display: inline-flex;
+          /* gap: 16rpx; */
+          image {
+            width: 160rpx;
+            height: 160rpx;
+            border-radius: 16rpx;
+          }
+        }
+      }
+      .count {
+        font-size: 28rpx;
+        width: 90rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .logistics {
+      padding-left: 32rpx;
+      .logisticsItem {
+        padding-bottom: 18rpx;
+        position: relative;
+        .titleStatus {
+          height: 50rpx;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          /* gap: 12rpx; */
+          position: relative;
+          line-height: 50rpx;
+          text {
+            margin-right: 12rpx;
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+          .circle {
+            position: absolute;
+            width: 14rpx;
+            height: 14rpx;
+            background: #ffffff;
+            border: 1px solid #fd0609;
+            border-radius: 50%;
+            top: 50%;
+            transform: translateY(-50%);
+            left: -32rpx;
+          }
+        }
+        > .line {
+          position: absolute;
+          top: 25rpx;
+          width: 1px;
+          height: 100%;
+          background: #fd0609;
+          left: -25rpx;
+        }
+        .msg {
+          font-size: 24rpx;
+        }
+      }
+    }
+  }
+  .shopItem {
+    width: 100%;
+    /* padding: 0rpx 24rpx 36rpx 24rpx; */
+    margin-bottom: 24rpx;
+
+    &:last-child {
+      margin-bottom: 0rpx;
+    }
+
+    background: #ffffff;
+    border-radius: 24rpx;
+    .top {
+      height: 52rpx;
+      color: #999999;
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 2rpx solid #f7f7f7;
+    }
+    .info {
+      padding-top: 24rpx;
+      &:first-child{
+        padding-top: 0rpx;
+      }
+      display: flex;
+      align-items: center;
+      /* gap: 28rpx; */
+
+      &:last-child {
+        margin-bottom: 0rpx !important;
+      }
+
+      > .image {
+        width: 128rpx;
+        height: 128rpx;
+        border-radius: 16rpx;
+        margin-right: 24rpx;
+      }
+      .centerInfo {
+        width: 486rpx;
+        .title {
+          font-weight: bold;
+
+          font-size: 28rpx;
+          /* color: #333333; */
+          line-height: 36rpx;
+
+          // margin-top: 20rpx;
+          // margin-bottom: 16rpx;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          > view {
+            &:first-child {
+              width: 443rpx;
+                overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            }
+          }
+        }
+        .type {
+          height: 40rpx;
+          background: #f6f6f6;
+          border-radius: 24;
+          color: #6d6d6d;
+          font-size: 20rpx;
+          padding: 0 8rpx;
+          width: fit-content;
+          display: flex;
+          align-items: center;
+          max-width: 414rpx;
+        }
+        .money {
+          font-weight: bold;
+          color: #555555;
+          font-size: 24rpx;
+          margin-top: 15rpx;
+          display: flex;
+          justify-content: space-between;
+        }
+        .coupon {
+          color: #555555;
+          font-size: 20rpx;
+          margin-top: 5rpx;
+        }
+      }
+    }
+
+    .actionBtn {
+      margin-top: 15rpx;
+      .realPay {
+        text-align: right;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .btn {
+        margin-top: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        /* gap: 10rpx; */
+
+        .see {
+          border-radius: 864rpx 864rpx 864rpx 864rpx;
+          width: 168rpx;
+          height: 62rpx;
+          border: 2rpx solid #d6d6d6;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 28rpx;
+        }
+      }
+    }
+  }
+
+  .tips {
+    margin-top: 20rpx;
+
+    border-radius: 20rpx 20rpx 20rpx 20rpx;
+    padding: 28rpx 24rpx;
+    background: #ffffff;
+  }
+  .des {
+    color: #888888;
+  }
+  .bottomAction {
+    height: 140rpx;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+    background: #fff;
+    padding: 16rpx 32rpx 62rpx 32rpx;
+    > .actions {
+      height: 100%;
+      .pay {
+        display: flex;
+        /* gap: 20rpx; */
+        align-items: center;
+        justify-content: space-between;
+        height: 80rpx;
+        .payCount {
+          color: #333333;
+          font-size: 30rpx;
+        }
+        .payBtn {
+          width: 250rpx;
+          height: 80rpx;
+          background: #7c66ff;
+          border-radius: 864rpx 864rpx 864rpx 864rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+          font-size: 28rpx;
+        }
+
+        .cancelBtn {
+          width: 250rpx;
+          height: 80rpx;
+
+          border-radius: 864rpx 864rpx 864rpx 864rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 28rpx;
+          border: 2rpx solid #d6d6d6;
+          background-color: #fff;
+          border-radius: 864rpx 864rpx 864rpx 864rpx;
+          color: #000;
+        }
+      }
+    }
+  }
+}
+</style>