Merge branch 'feature/task1.0.0' into feature/task1.0.0-0507-zz

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="onConfirm"
+        >确认</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: {
+    onConfirm() {
+      this.$emit("confirm");
+      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>

constants/index.js

@@ -1,8 +1,22 @@
 /**
  * 全局常量，请避免使用魔法数字
  */
-const TOKEN_KEY = 'msbPcToken';
 
-export {
-  TOKEN_KEY
-}
+// 用户凭证名
+const TOKEN_KEY = "msbPcToken";
+
+// 订单状态
+const ORDER_STATUS = {
+  WAIT_PAY: 1, // 待付款
+  WAIT_SEND: 3, //待发货
+  WAIT_RECEIVE: 4, // 待收货
+};
+
+// 性别
+const SEX_TYPE = {
+  MALE: 1, // 男
+  FEMALE: 2, // 女
+  UNKNOW: 3, // 未知
+};
+
+export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE };

layouts/default.vue

@@ -9,8 +9,9 @@
   <div class="layout">
     <BsLogin :visible.sync="loginVisible" />
     <Header
-      :is-categroy-open="categroyOption.open"
-      :show-categroy-tab="categroyOption.show"
+      :is-categroy-open="isHomePage"
+      :hide-bar-line="isHomePage"
+      :show-categroy-tab="showCategroyTab"
       :is-sticky="isSticky"
     />
     <Nuxt />
@@ -21,8 +22,7 @@
 import BsLogin from "@/components/BsLogin.vue";
 import Header from "./module/header/index.vue";
 import Footer from "./module/footer/index.vue";
-const CATEGROY_OPEN_PAGES = ["/"]; // 默认展开热门分类tab的页面
-const CATEGROY_HIDE_PAGES = ["/account"]; // 不展示热门分类tab的页面
+const CATEGROY_HIDE_PAGES = [/\/account/]; // 隐藏热门分类tab的页面
 
 export default {
   name: "Layout",
@@ -42,13 +42,13 @@ export default {
         this.$store.commit("setLoginVisible", val);
       },
     },
-    categroyOption() {
-      // 当前页面路径
-      const currentPath = this.$route.path;
-      return {
-        open: CATEGROY_OPEN_PAGES.includes(currentPath),
-        show: !CATEGROY_HIDE_PAGES.includes(currentPath),
-      };
+    isHomePage() {
+      return this.$route.path === "/";
+    },
+    showCategroyTab() {
+      return !CATEGROY_HIDE_PAGES.some((reg) => {
+        return reg.test(this.$route.path);
+      });
     },
   },
   mounted() {

layouts/module/header/HeaderInfoBar.vue

@@ -116,7 +116,7 @@ export default {
     handleCommandClick(event) {
       switch (event) {
         case MENU_VALUE.PERSONAL:
-          this.$router.push("/account/userInfo");
+          this.$router.push("/account/home");
           break;
         case MENU_VALUE.ADDRESS:
           this.$router.push("/account/address");
@@ -136,7 +136,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .dropdown-menu-self {
   width: 200px;
   margin-top: 0 !important;

layouts/module/header/index.vue

@@ -135,6 +135,7 @@
           </div>
         </div>
       </div>
+      <div v-if="!hideBarLine" class="layout-header-line"></div>
     </template>
   </div>
 </template>
@@ -167,6 +168,12 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    // 是否隐藏底部黄色边框
+    hideBarLine: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -268,7 +275,7 @@ export default {
   height: 50px;
   z-index: 10;
   background: #ffffff;
-  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
   .sticky-bar-header__wrap {
     @include layout-box;
     height: 100%;
@@ -446,7 +453,7 @@ export default {
           .tab-category-menu__right {
             width: 510px;
             padding: 30px 26px;
-            box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+            box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
             border: 1px solid #eeeeee;
             background: #ffffff;
             .menu-right__item:hover {
@@ -475,4 +482,9 @@ export default {
     }
   }
 }
+.layout-header-line {
+  width: 100%;
+  height: 2px;
+  background: #ff875b;
+}
 </style>

pages/account/index/home/index.vue

@@ -7,14 +7,177 @@
 -->
 
 <template>
-  <div class="account-home"></div>
+  <div class="account-home">
+    <div class="account-home-head flex">
+      <div
+        class="account-home-head__info flex"
+        :style="{ backgroundImage: `url(${userInfoBkg})` }"
+      >
+        <img class="home-head-info__avatar" :src="userInfo.avatar" />
+        <div class="home-head-info__wrap">
+          <span class="head-info-wrap__title">{{ userInfo.nickname }}</span>
+          <span>第一个青春是上帝给的...</span>
+        </div>
+      </div>
+      <div class="account-home-head__order flex flex-middle flex-between">
+        <div
+          v-for="(item, index) in orderTypes"
+          :key="index"
+          class="account-home-content__item flex flex-column flex-middle"
+        >
+          <img :src="item.icon" />
+          <span>{{ item.label }}</span>
+          <div v-if="item.count > 0" class="account-home-content__item--count">
+            {{ item.count }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="account-home-content flex">
+      <LogisitcsInfo />
+      <Message />
+    </div>
+  </div>
 </template>
 <script>
+import { mapState } from "vuex";
+import { ORDER_STATUS } from "@/constants";
+import {
+  ApiGetOrderStatistics,
+  ApiGetRefundStatistisc,
+} from "@/plugins/api/order";
+import LogisitcsInfo from "./module/LogisitcsInfo.vue";
+import Message from "./module/Message.vue";
+
 export default {
   name: "AccountHome",
+  components: { LogisitcsInfo, Message },
   data() {
-    return {};
+    function getOrderTypeIcon(path) {
+      return require(`~/assets/img/account/home/${path}.png`);
+    }
+    return {
+      userInfoBkg: require("~/assets/img/account/home/bkg-user-info.png"),
+      orderTypes: [
+        {
+          key: "unpaidCount",
+          label: "待付款",
+          icon: getOrderTypeIcon("icon-order1"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_PAY}`,
+          count: 0,
+        },
+        {
+          key: "waitDeliveryCount",
+          label: "待发货",
+          icon: getOrderTypeIcon("icon-order2"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_SEND}`,
+          count: 0,
+        },
+        {
+          key: "deliveredCount",
+          label: "待收货",
+          icon: getOrderTypeIcon("icon-order3"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_RECEIVE}`,
+          count: 0,
+        },
+        {
+          key: "progressCount",
+          label: "退款/售后",
+          icon: getOrderTypeIcon("icon-order4"),
+          path: "/account/order/saleAfter",
+          count: 0,
+        },
+        {
+          key: "",
+          label: "全部订单",
+          icon: getOrderTypeIcon("icon-order5"),
+          path: "/account/order/list",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  created() {
+    this.getOrderStatisticsData();
+  },
+  methods: {
+    // 获取订单统计数据
+    async getOrderStatisticsData() {
+      const [{ result }, { result: resultRefund }] = await Promise.all([
+        ApiGetOrderStatistics(),
+        ApiGetRefundStatistisc(),
+      ]);
+      const resultData = Object.assign({}, result, resultRefund);
+      this.orderTypes.forEach((item) => {
+        if (resultData[item.key] > 0) {
+          Object.assign(item, { count: resultData[item.key] });
+        }
+      });
+    },
   },
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.account-home {
+  .account-home-head {
+    margin-bottom: 30px;
+    .account-home-head__info {
+      width: 338px;
+      height: 164px;
+      background-size: 100% 100%;
+      padding: 49px 26px;
+      margin-right: 30px;
+      .home-head-info__avatar {
+        width: 65px;
+        height: 65px;
+        border-radius: 50%;
+        margin-right: 16px;
+      }
+      .home-head-info__wrap {
+        color: #666666;
+        font-size: 14px;
+        .head-info-wrap__title {
+          font-size: 20px;
+          color: #333333;
+          margin-bottom: 14px;
+        }
+        span {
+          display: block;
+        }
+      }
+    }
+    .account-home-head__order {
+      width: 630px;
+      height: 164px;
+      padding: 0 58px;
+      background: #ffffff;
+      border-radius: 4px;
+      box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
+      .account-home-content__item {
+        position: relative;
+        font-size: 14px;
+        color: #333333;
+        text-align: center;
+        .account-home-content__item--count {
+          position: absolute;
+          top: -3px;
+          right: -3px;
+          width: 24px;
+          height: 24px;
+          font-size: 14px;
+          background: #ff512b;
+          color: #ffffff;
+          border-radius: 14px 14px 14px 14px;
+          border: 2px solid #ffffff;
+        }
+        img {
+          width: 54px;
+          height: 54px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -7,17 +7,177 @@
 -->
 
 <template>
-	<div>我是物流信息模块</div>
+  <div class="home-logisitcs">
+    <div class="home-logisitcs-label">我的物流</div>
+    <!-- 无物流信息 -->
+    <div
+      v-if="loadFinish && total === 0"
+      class="home-logisitcs-empty flex flex-center flex-middle"
+    >
+      <img src="~/assets/img/account/home/logisitcs-empty.png" />
+    </div>
+    <!-- 有物流信息 -->
+    <div v-else 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,
+      loadFinish: false,
+    };
+  },
+  mounted() {
+    this.getLogisticsList();
+  },
+  methods: {
+    // 获取待收货物流信息
+    async getLogisticsList() {
+      this.loading = true;
+      const { result } = await ApiGetOrderLogisticsList({ ...this.query });
+      this.loading = false;
+      this.loadFinish = true;
+      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>

pages/account/index/userInfo.vue

@@ -7,17 +7,193 @@
 -->
 
 <template>
-	<div>我是个人资料页面</div>
+  <div class="account-user-info">
+    <div class="account-user-info__label">个人资料</div>
+    <div class="account-user-info__content">
+      <el-form
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        @submit.native.prevent
+      >
+        <el-form-item label="头像">
+          <div class="user-info-content__avatar flex flex-middle">
+            <el-image
+              fit="cover"
+              :src="form.avatar"
+              :preview-src-list="[form.avatar]"
+            >
+            </el-image>
+            <el-upload
+              :action="ossUploadUrl"
+              :data="uploadData"
+              :show-file-list="false"
+              :on-success="handleUploadSuccess"
+              :before-upload="handleBeforeUpload"
+            >
+              <el-button>修改头像</el-button>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item label="昵称" prop="nickname">
+          <el-input
+            class="user-info-content__nickname"
+            placeholder="请输入昵称"
+            v-model="form.nickname"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-radio v-model="form.gender" :label="SEX_TYPE.MALE">男</el-radio>
+          <el-radio v-model="form.gender" :label="SEX_TYPE.FEMALE">女</el-radio>
+        </el-form-item>
+        <el-form-item>
+          <UiButton type="yellow_gradual" :radius="true" @click="onSubmit"
+            >确认保存</UiButton
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
 </template>
 <script>
+import { mapState } from "vuex";
+import { Message } from "element-ui";
+import UiButton from "@/components/UiButton";
+import { SEX_TYPE } from "@/constants";
+import { ApiPutUser } from "@/plugins/api/account";
+import { ApiPostGetOssConfig } from "@/plugins/api/oss";
+
 export default {
-	data(){
-		return {
-			
-		}
-	}
-}
+  name: "AccountUserInfo",
+  components: { UiButton },
+  data() {
+    return {
+      SEX_TYPE,
+      form: {
+        nickname: "",
+        gender: SEX_TYPE.MALE,
+        avatar: "",
+      },
+      rules: {
+        nickname: [
+          { min: 1, max: 5, message: "请输入1-10个字符", trigger: "blur" },
+        ],
+      },
+      ossUploadUrl: "",
+      ossDirName: "", // oss路径名
+      fileName: "", // 图片文件名
+      uploadData: {}, // oss上传图片参数
+    };
+  },
+  computed: {
+    ...mapState(["userInfo", "token"]),
+  },
+  created() {
+    this.initData();
+    this.getOssConfig();
+  },
+  methods: {
+    initData() {
+      if (this.token) {
+        const { nickname, gender, avatar } = this.userInfo;
+        Object.assign(this.form, {
+          nickname,
+          gender: gender === SEX_TYPE.UNKNOW ? SEX_TYPE.MALE : gender, // 默认性别显示男
+          avatar,
+        });
+      }
+    },
+    async getOssConfig() {
+      const { result } = await ApiPostGetOssConfig({
+        configId: "account-avatar/",
+        serviceName: "uc",
+      });
+      if (result) {
+        const { dir, host, policy, accessId, signature } = result;
+        this.ossUploadUrl = host;
+        this.ossDirName = dir;
+        Object.assign(this.uploadData, {
+          policy,
+          OSSAccessKeyId: accessId,
+          success_action_status: 200,
+          signature,
+        });
+      }
+    },
+
+    // 获取文件名
+    handleBeforeUpload(file) {
+      this.fileName = file.name;
+      Object.assign(this.uploadData, {
+        key: `${this.ossDirName}${"${filename}"}`,
+        name: file.name,
+      });
+    },
+    handleUploadSuccess() {
+      this.form.avatar = `${this.ossUploadUrl}/${this.ossDirName}${this.fileName}`;
+    },
+    onSubmit() {
+      this.$refs.ruleForm.validate(async (valid) => {
+        if (valid) {
+          const { result } = await ApiPutUser({ ...this.form });
+          if (result) {
+            Message.success("修改成功");
+            this.$store.dispatch("getUserInfo");
+          }
+        }
+      });
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-
-</style>
+.account-user-info {
+  width: 1000px;
+  border: 1px solid #dddddd;
+  font-size: 14px;
+  color: #333333;
+  .account-user-info__label {
+    height: 42px;
+    line-height: 42px;
+    padding-left: 24px;
+    border-bottom: 1px solid #dddddd;
+    background: #f8f8f8;
+  }
+  .account-user-info__content {
+    padding: 44px 69px;
+    background: #ffffff;
+    /deep/.el-form {
+      .el-form-item__label {
+        margin-right: 40px;
+        color: #333333;
+      }
+      .user-info-content__avatar {
+        margin-top: -13px;
+        .el-image {
+          width: 70px;
+          height: 70px;
+          margin-right: 30px;
+          border-radius: 50%;
+        }
+        .el-button {
+          width: 89px;
+          height: 30px;
+          border-radius: 15px 15px 15px 15px;
+          border: 1px solid #eeeeee;
+        }
+      }
+      .user-info-content__nickname {
+        height: 35px;
+        width: 210px;
+        .el-input__inner {
+          border: 1px solid #eeeeee;
+        }
+      }
+      .ui-button {
+        width: 136px;
+        height: 36px;
+      }
+    }
+  }
+}
+</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 
@@ -142,6 +150,11 @@ export const ApiGetLogisticsCompanylist = (params) =>
  */
 export const ApiPutLogisticsInfo = (data) => 
 	ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/refundOrder/completeRefund`, data));
+/**
+ * 退款订单统计
+ */
+ export const ApiGetRefundStatistisc= (data) => 
+ ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/refundOrder/statistics`, data));
 
 
 

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 })