feat: 添加个人中心首页，element-ui更改主题色

assets/scss/element-variables.scss

@@ -0,0 +1,7 @@
+/* 改变主题色变量 */
+$--color-primary: #FF512B;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

components/UiConfirm.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    width="16%"
+    center
+    :visible.sync="dialogVisible"
+    :show-close="false"
+    class="bs-order-ensure"
+  >
+    <div class="dialog-content flex flex-middle">
+      <img src="~/assets/img/common/icon-warning.png" />
+      <span>{{ title }}</span>
+    </div>
+    <div class="dialog-footer flex flex-between">
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button class="dialog-footer__btn--ensure" @click="onEnsure"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+import UiButton from "./UiButton.vue";
+export default {
+  components: { UiButton },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      },
+    },
+  },
+  methods: {
+    onEnsure() {
+      this.$emit("ensure");
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/.el-dialog {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 41px 60px;
+    .dialog-content {
+      color: rgba(0, 0, 0, 0.8);
+      font-size: 16px;
+      padding: 0 2px 42px 2px;
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 17px;
+      }
+    }
+    .dialog-footer {
+      .el-button {
+        width: 90px;
+        height: 30px;
+        font-size: 14px;
+      }
+      .dialog-footer__btn--ensure {
+        background: #ff875b;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>

pages/account/index/home/index.vue

@@ -30,15 +30,21 @@
         </div>
       </div>
     </div>
-    <div class="account-home-content"></div>
+    <div class="account-home-content flex">
+      <LogisitcsInfo />
+      <Message />
+    </div>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
 import { ORDER_STATUS } from "@/constants";
+import LogisitcsInfo from "./module/LogisitcsInfo.vue";
+import Message from "./module/Message.vue";
 
 export default {
   name: "AccountHome",
+  components: { LogisitcsInfo, Message },
   data() {
     function getOrderTypeIcon(path) {
       return require(`~/assets/img/account/home/${path}.png`);
@@ -88,6 +94,7 @@ export default {
       height: 164px;
       background-size: 100% 100%;
       padding: 49px 26px;
+      margin-right: 30px;
       .home-head-info__avatar {
         width: 65px;
         height: 65px;

pages/account/index/home/module/LogisitcsInfo.vue

@@ -7,17 +7,172 @@
 -->
 
 <template>
-	<div>我是物流信息模块</div>
+  <div class="home-logisitcs">
+    <div class="home-logisitcs-label">我的物流</div>
+    <!-- 无物流信息 -->
+    <div v-if="false" class="home-logisitcs-empty flex flex-center flex-middle">
+      <img src="~/assets/img/account/home/logisitcs-empty.png" />
+    </div>
+    <!-- 有物流信息 -->
+    <div v-loading="loading">
+      <div v-infinite-scroll="handleListload" class="home-logisitcs-content">
+        <div
+          v-for="item in list"
+          :key="item.orderNo"
+          class="home-logisitcs-content__item flex flex-middle flex-between"
+        >
+          <div class="logisitcs-content-item__info flex flex-start">
+            <img :src="item.img" />
+            <div class="content-item-info__wrap flex-1">
+              <p class="item-info-wrap__title">
+                {{ item.title }}
+              </p>
+              <div class="item-info-wrap__orderNo">
+                <span>{{ `${item.companyName}: ${item.orderNo}` }}</span>
+                <span class="item-info-wrap__orderNo--light">查看详情</span>
+              </div>
+            </div>
+          </div>
+          <UiButton
+            type="yellow_line"
+            :radius="true"
+            @click="onOrderEnsure(item)"
+            >确认收货</UiButton
+          >
+        </div>
+      </div>
+    </div>
+    <UiConfirm
+      title="确认收到货了吗？"
+      :visible.sync="ensureOrderVisible"
+      @ensure="handleOrderEnsure"
+    />
+  </div>
 </template>
 <script>
+import UiButton from "@/components/UiButton.vue";
+import UiConfirm from "@/components/UiConfirm.vue";
+import { ApiGetOrderLogisticsList } from "@/plugins/api/order";
+
 export default {
-	data(){
-		return {
-			
-		}
-	}
-}
+  components: { UiButton, UiConfirm },
+  data() {
+    return {
+      total: 0,
+      query: {
+        pageIndex: 1,
+        length: 10,
+      },
+      selectOrderId: 0,
+      ensureOrderVisible: false,
+      list: [],
+      loading: false,
+    };
+  },
+  mounted() {
+    this.getLogisticsList();
+  },
+  methods: {
+    // 获取待收货物流信息
+    async getLogisticsList() {
+      this.loading = true;
+      const { result } = await ApiGetOrderLogisticsList({ ...this.query });
+      this.loading = false;
+      if (result) {
+        const { total, list } = result;
+        this.total = total;
+        if (list && list.length > 0) {
+          this.list = this.list.concat(list);
+        }
+      }
+    },
+    onOrderEnsure({ orderNo }) {
+      this.selectOrderId = orderNo;
+      this.ensureOrderVisible = true;
+    },
+
+    // 确认收货
+    handleOrderEnsure() {},
+
+    // 上拉加载
+    handleListload() {
+      console.log("enter");
+      if (this.total > 0 && this.list.length < this.total) {
+        // 执行接口请求
+        this.query.pageIndex += 1;
+        this.getLogisticsList();
+      }
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-
-</style>
+.home-logisitcs {
+  width: 620px;
+  border: 1px solid #dddddd;
+  .home-logisitcs-label {
+    height: 42px;
+    line-height: 42px;
+    padding: 0 22px;
+    border-bottom: 1px solid #dddddd;
+    background: #f8f8f8;
+    font-size: 14px;
+    color: #333333;
+  }
+  .home-logisitcs-empty {
+    height: 310px;
+    img {
+      width: 228px;
+      height: 144px;
+    }
+  }
+  .home-logisitcs-content {
+    max-height: 620px;
+    overflow: auto;
+    padding: 30px;
+    &::-webkit-scrollbar {
+      width: 4px;
+      background-color: none;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: none;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #dddddd;
+      border-radius: 10px;
+    }
+    .home-logisitcs-content__item {
+      margin-bottom: 30px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .logisitcs-content-item__info {
+        img {
+          width: 60px;
+          height: 60px;
+          margin-right: 18px;
+          border-radius: 2px;
+        }
+        .content-item-info__wrap {
+          .item-info-wrap__title {
+            width: 309px;
+            font-size: 14px;
+            color: #666666;
+            margin-bottom: 8px;
+          }
+          .item-info-wrap__orderNo {
+            display: inline-block;
+            color: #999999;
+            font-size: 12px;
+          }
+          .item-info-wrap__orderNo--light {
+            color: #ff875b;
+            margin-left: 30px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

plugins/api/order.js

@@ -56,13 +56,21 @@ export const  ApiGetOrderProductDetail = ({orderProductId}) =>
 export const ApiGetOrderPaySatus = ({orderId}) => 
 	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/payResult/${orderId}`));
    
-
+	
 /**
  * 获取物流信息
  * @param {*} orderId 
  */
 export const  ApiGetOrderLogistics = ({orderId}) =>
 	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/logistics/${orderId}`));	
+
+	/**
+ * 获取物流列表
+ * @param {*} params
+ */
+export const  ApiGetOrderLogisticsList = (params) =>
+	ToAsyncAwait(axiosTk.get('http://yapi.smart-xwork.cn/mock/148902/logisitcs/list'), { params });	
+
 /**
  * 确认收货
  * @param {*} orderId 

plugins/element-ui.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Element from 'element-ui'
 import locale from 'element-ui/lib/locale/lang/zh-CN'
+import '@/assets/scss/element-variables.scss'
 
 Vue.use(Element, { locale })