feat: 添加个人资料页面，支持个人资料编辑

constants/index.js

@@ -12,4 +12,11 @@ const ORDER_STATUS = {
   WAIT_RECEIVE: 4, // 待收货
 };
 
-export { TOKEN_KEY, ORDER_STATUS };
+// 性别
+const SEX_TYPE = {
+  MALE: 1, // 男
+  FEMALE: 2, // 女
+  UNKNOW: 3, // 未知
+};
+
+export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE };

pages/account/index/home/index.vue

@@ -27,6 +27,9 @@
         >
           <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>
@@ -39,6 +42,10 @@
 <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";
 
@@ -53,26 +60,35 @@ export default {
       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",
@@ -83,6 +99,24 @@ export default {
   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>
@@ -122,9 +156,22 @@ export default {
       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;

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

@@ -10,11 +10,14 @@
   <div class="home-logisitcs">
     <div class="home-logisitcs-label">我的物流</div>
     <!-- 无物流信息 -->
-    <div v-if="false" class="home-logisitcs-empty flex flex-center flex-middle">
+    <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-loading="loading">
+    <div v-else v-loading="loading">
       <div v-infinite-scroll="handleListload" class="home-logisitcs-content">
         <div
           v-for="item in list"
@@ -67,6 +70,7 @@ export default {
       ensureOrderVisible: false,
       list: [],
       loading: false,
+      loadFinish: false,
     };
   },
   mounted() {
@@ -78,6 +82,7 @@ export default {
       this.loading = true;
       const { result } = await ApiGetOrderLogisticsList({ ...this.query });
       this.loading = false;
+      this.loadFinish = true;
       if (result) {
         const { total, list } = result;
         this.total = total;

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="handleAvatarSuccess"
+              :before-upload="handleBeforeLoad"
+            >
+              <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(){
+  name: "AccountUserInfo",
-		return {
+  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.getOssUrl();
+  },
+  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 getOssUrl() {
+      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,
+        });
+      }
+    },
 
-		}
+    // 获取文件名
-	}
+    handleBeforeLoad(file) {
-}
+      this.fileName = file.name;
+      Object.assign(this.uploadData, {
+        key: `${this.ossDirName}${"${filename}"}`,
+        name: file.name,
+      });
+    },
+    handleAvatarSuccess() {
+      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>
-
+.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

@@ -150,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));