merge:合并主干分时

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npm.taobao.org/
+sass_binary_site="https://npm.taobao.org/mirrors/node-sass"

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:12.13.1
+WORKDIR /workload
+
+COPY nuxt.config.js /workload/nuxt.config.js
+COPY package.json /workload/package.json
+COPY .nuxt /workload/.nuxt
+
+RUN npm config set registry https://registry.npm.taobao.org \
+    && npm install
+
+EXPOSE 3000
+CMD npm run start

assets/scss/global.scss

@@ -1,5 +1,6 @@
 
 @import './flex.scss';
+@import './util.scss';
 
 * {
   -webkit-box-sizing: border-box; box-sizing: border-box;

components/BsLogin.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="bs-login">
+    <el-dialog
+      :visible.sync="dialogTableVisible"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="20%"
+    >
+      <div class="bs-login-wrap">
+        <img
+          class="bs-login-wrap__logo"
+          src="@/static/images/login/icon-logo.png"
+        />
+        <div class="bs-login-wrap__content">
+          <el-form :model="form" :rules="rules" ref="ruleForm">
+            <el-form-item prop="phone">
+              <el-input
+                v-model="form.phone"
+                placeholder="请输入手机号"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="verificationCode">
+              <el-input
+                class="input-code"
+                v-model="form.verificationCode"
+                placeholder="请输入密码"
+              >
+                <el-button slot="suffix" type="text" @click="onSendCode">
+                  {{ codeValue }}
+                </el-button>
+              </el-input>
+            </el-form-item>
+            <el-button class="login-wrap-content__login-btn" @click="onLogin"
+              >登录</el-button
+            >
+          </el-form>
+          <div class="login-wrap-content__agreement flex felx-start">
+            <div
+              class="wrap-content-agreement-icons"
+              @click="onAgreementSelect"
+            >
+              <img
+                v-if="isAcceptAgreement"
+                class="icon-choose"
+                src="@/static/images/login/icon-accept.png"
+              />
+              <span v-else class="icon-unchoose"></span>
+            </div>
+            <span class="wrap-content-agreement__text flex-1">
+              同意《用户协议》和《隐私协议》，首次 登陆将自动注册
+            </span>
+          </div>
+        </div>
+        <div class="bs-login-wrap__btn--close" @click="onClose">
+          <img src="@/static/images/login/icon-close.png" />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import { Message } from "element-ui";
+import { ApiGetCode, ApiPostLogin } from "@/plugins/api/account";
+import { IsPhone } from "/plugins/utils";
+const COUNT_DOWN_TIME = 60; // 验证码倒计时
+
+export default {
+  name: "BsLogin",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    const validatorPhone = (_, value, callback) => {
+      if (!value) {
+        return callback(new Error("手机号不能为空"));
+      }
+      if (!IsPhone(value)) {
+        return callback(new Error("请输入正确的手机号"));
+      }
+      return callback();
+    };
+    return {
+      form: {
+        phone: "",
+        verificationCode: "",
+      },
+      isAcceptAgreement: false, // 是否勾选协议
+      countDown: 0, // 验证码倒计时
+      rules: {
+        phone: [{ validator: validatorPhone, trigger: "blur" }],
+        verificationCode: [
+          { required: true, message: "请输入验证码", trigger: "change" },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState(["token"]),
+    dialogTableVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      },
+    },
+    codeValue() {
+      return this.countDown ? `${this.countDown}s重新获取` : "获取验证码";
+    },
+  },
+  methods: {
+    onAgreementSelect() {
+      this.isAcceptAgreement = !this.isAcceptAgreement;
+    },
+    async onSendCode() {
+      if (this.countDown > 0 || !IsPhone(this.form.phone)) {
+        return;
+      }
+      this.countDown = COUNT_DOWN_TIME;
+      let time;
+      const { result, error } = await ApiGetCode({
+        phone: this.form.phone,
+      });
+      if (result) {
+        time = setInterval(() => {
+          if (this.countDown === 0) {
+            clearInterval(time);
+            return;
+          }
+          this.countDown -= 1;
+        }, 1e3);
+        return;
+      }
+      this.countDown = 0;
+      clearInterval(time);
+      Message.error(error.message || "验证码发送失败，请检查手机号是否正确");
+    },
+    onLogin() {
+      this.$refs.ruleForm.validate(async (valid) => {
+        if (valid) {
+          if (!this.isAcceptAgreement) {
+            Message.error("请勾选同意《用户协议》和《隐私协议》");
+            return;
+          }
+          const { result } = await ApiPostLogin({ ...this.form });
+          if (result) {
+            this.dialogTableVisible = false;
+            this.$store.commit("setToken", result.token);
+            this.$store.dispatch("getUserInfo");
+          }
+        }
+      });
+    },
+    onClose() {
+      this.dialogTableVisible = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bs-login {
+  /deep/.el-dialog {
+    border-radius: 4px;
+    .el-dialog__header {
+      display: none;
+    }
+    .el-dialog__body {
+      padding: 38px 30px;
+    }
+    .bs-login-wrap {
+      .bs-login-wrap__logo {
+        width: 198px;
+        height: 32px;
+        margin-bottom: 44px;
+      }
+      .bs-login-wrap__content {
+        .el-form {
+          .el-form-item {
+            margin-bottom: 24px;
+            .input-code {
+              .el-input__inner {
+                padding-right: 100px;
+              }
+            }
+            .el-input {
+              .el-input__suffix {
+                padding-right: 16px;
+                .el-button {
+                  color: #ff512b;
+                }
+              }
+              .el-input__inner {
+                border-style: none;
+                background: #f8f8f8;
+                border-radius: 4px 4px 4px 4px;
+              }
+            }
+          }
+          .login-wrap-content__login-btn {
+            width: 100%;
+            height: 42px;
+            border-style: none;
+            color: #ffffff;
+            font-size: 16px;
+            margin-top: 14px;
+            background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
+            border-radius: 4px 4px 4px 4px;
+          }
+        }
+        .login-wrap-content__agreement {
+          padding: 0 33px;
+          color: #999999;
+          font-size: 12px;
+          margin-top: 25px;
+          .wrap-content-agreement-icons {
+            cursor: pointer;
+            .icon-unchoose {
+              display: block;
+              width: 16px;
+              height: 16px;
+              border: 1px solid #cccccc;
+              border-radius: 50%;
+            }
+            .icon-choose {
+              width: 16px;
+              height: 16px;
+            }
+          }
+          .wrap-content-agreement__text {
+            display: block;
+            text-align: center;
+            margin-left: 8px;
+          }
+        }
+      }
+      .bs-login-wrap__btn--close {
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, 0);
+        bottom: -60px;
+        cursor: pointer;
+        img {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

components/UiButton.vue

@@ -0,0 +1,103 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-09 11:31:29
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-09 14:22:43
+ * @Description: 按钮，每个类型有设置默认高， 宽度默认随内容变化，有特殊大小需要自定义class控制
+ props
+ type 固定按钮类型 红色面板 red_panel 红色描边red_line 黄色面板yellow_panel 黄色线条yellow_line 黄色渐变yellow_gradual 灰色grey
+ radius 是否圆角  true  false
+ disabled 是否禁用 true false
+-->
+<template>
+	<button :class="`ui-button ${myClass}`" @click="click">
+		<slot></slot>
+	</button>
+</template>
+<script>
+export default {
+	props : {
+		type : {
+			type : String,
+			default : 'red_panel'
+		},
+		radius: {
+			type : String | Boolean,
+			default : false
+		},
+		disabled : {
+			type : Boolean,
+			default : false
+		}
+	},
+	computed : {
+		myClass(){
+			let classStr = this.type ? `ui-button__${this.type}` : '';
+			if(this.radius && typeof this.radius === 'boolean'){
+				classStr += ' ui-button__radius'
+			}
+			classStr += this.disabled ? ' ui-button__disabled' : '';
+			return classStr;
+		}
+	},
+	methods : {
+		click(...args){
+			if(this.disabled){
+				return false;
+			}
+			this.$emit('click', args);
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.ui-button{
+	cursor: pointer;
+	&__red_panel{
+		background: #FF512B;
+		color: #fff;
+		height: 46px;
+		font-size: 18px;
+		padding: 0 30px;
+		border: none;
+		font-weight: bold;
+	}
+	&__red_line{
+		border:1px solid #FF512B;
+		height: 44px;
+		font-size: 18px;
+		padding: 0 30px;
+		color: #FF512B;
+	}
+	&__yellow_line{
+		border:1px solid #FF512B;
+		height: 28px;
+		padding: 0 10px;
+		color: #FF512B;
+	}
+	&__yellow_panel{
+		background:#FF512B;
+		height: 30px;
+		padding: 0 10px;
+		color: #fff;
+	}
+	&__yellow_gradual{
+		background: linear-gradient(270deg, #FFA25A 0%, #FF7F39 100%);
+		height: 42px;
+		color: #fff;
+	}
+	&__grey{
+		background:#f5f5f5;
+		border: 1px solid #ccc;
+		height: 28px;
+		padding: 0 10px;
+	}
+	&__radius{
+		border-radius: 4px;
+	}
+	&__disabled{
+		opacity: .8;
+		cursor: not-allowed;
+	}
+}
+</style>

constants/index.js

@@ -0,0 +1,8 @@
+/**
+ * 全局常量，请避免使用魔法数字
+ */
+const TOKEN_KEY = 'msbPcToken';
+
+export {
+  TOKEN_KEY
+}

deploy.yaml

@@ -0,0 +1,54 @@
+kind: Deployment
+apiVersion: apps/v1
+metadata:
+  labels:
+    app: $IMAGES
+  name: $IMAGES
+  namespace: yanxuan
+spec:
+  progressDeadlineSeconds: 600
+  replicas: 1
+  selector:
+    matchLabels:
+      app: $IMAGES
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxUnavailable: 25%
+      maxSurge: 25%
+  template:
+    metadata:
+      labels:
+        app: $IMAGES
+    spec:
+      imagePullSecrets:
+        - name: aliyun-docker-hub
+      containers:
+        - image: '$REGISTRY/$DOCKERHUB_NAMESPACE/$IMAGES:$BUILD_NUMBER'
+          name: app
+          ports:
+            - containerPort: $JAR_PORD
+              protocol: TCP
+          resources:
+            limits:
+              cpu: '0.5'
+              memory: 500Mi
+          terminationMessagePath: /dev/termination-log
+          terminationMessagePolicy: File
+      dnsPolicy: ClusterFirst
+      restartPolicy: Always
+      terminationGracePeriodSeconds: 30
+---
+kind: Service
+apiVersion: v1
+metadata:
+  name: $IMAGES
+  namespace: yanxuan
+spec:
+  ports:
+  - port: 3000
+    protocol: TCP
+    targetPort: 3000  
+  selector:
+    app: $IMAGES
+  type: ClusterIP

layouts/default.vue

@@ -7,21 +7,30 @@
 -->
 <template>
   <div class="layout">
-    <!-- <Header /> -->
+    <BsLogin :visible.sync="loginVisible" />
+    <Header />
     <Nuxt />
-    <div class="layout-footer"></div>
+    <Footer />
   </div>
 </template>
 <script>
+import BsLogin from "@/components/BsLogin.vue";
+import { TOKEN_KEY } from "@/constants";
 import Header from "./module/header/index.vue";
+import Footer from "./module/footer/index.vue";
 
 export default {
   name: "Layout",
-  components: { Header },
+  components: { Header, Footer, BsLogin },
+  data() {
+    return {
+      loginVisible: true,
+    };
+  },
 };
 </script>
 <style lang="scss" scoped>
-.layout-footer{
+.layout-footer {
   height: 189px;
   background: #ddd;
 }

layouts/module/footer/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="layout-footer">
+    <div class="layout-footer-wrap">
+      <div class="layout-footer-wrap__promise flex flex-middle flex-between">
+        <div
+          v-for="(item, index) in promiseList"
+          :key="index"
+          class="wrap-promise-item"
+        >
+          <img :src="item.icon" />
+          <span>{{ item.label }}</span>
+        </div>
+      </div>
+      <div class="layout-footer-wrap__line"></div>
+      <div class="layout-footer-wrap__address">
+        © 2020 马士兵（北京）教育科技有限公司
+        地址：北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "LayoutFooter",
+  data() {
+    return {
+      promiseList: [
+        {
+          label: "马士兵严选",
+          icon: require("@/static/images/layout/footer-1.png"),
+        },
+        {
+          label: "马士兵严选",
+          icon: require("@/static/images/layout/footer-2.png"),
+        },
+        {
+          label: "马士兵严选",
+          icon: require("@/static/images/layout/footer-3.png"),
+        },
+        {
+          label: "马士兵严选",
+          icon: require("@/static/images/layout/footer-4.png"),
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.layout-footer {
+  height: 189px;
+  background: #dddddd;
+  .layout-footer-wrap {
+    .layout-footer-wrap__promise {
+      width: 1060px;
+      margin: 0 auto;
+      padding: 25px 0;
+      .wrap-promise-item {
+        font-weight: bold;
+        color: #999999;
+        font-size: 18px;
+        margin-left: 20px;
+        img {
+          width: 52px;
+          height: 52px;
+        }
+      }
+    }
+    .layout-footer-wrap__line {
+      width: 100%;
+      height: 1px;
+      background: #cccccc;
+    }
+    .layout-footer-wrap__address {
+      width: 500px;
+      margin: 0 auto;
+      padding: 20px 0;
+      font-size: 12px;
+      color: #797979;
+      text-align: center;
+    }
+  }
+}
+</style>

layouts/module/header/HeaderInfoBar.vue

@@ -6,12 +6,11 @@
       <div class="header-wrap__logo">马士兵严选欢迎你！</div>
       <div class="header-wrap__content flex flex-middle">
         <div class="header-wrap-content__login">
-          <div v-if="isLogin" class="wrap-content-login__text flex">
-            <span>请先</span>
-            <span class="content-login-text--light">登录/注册</span>
-          </div>
-          <el-dropdown @visible-change="menuVisible = $event">
-            <div class="wrap-content-login__info flex flex-middle flex-center">
+          <el-dropdown v-if="isLogin" @visible-change="menuVisible = $event">
+            <div
+              class="wrap-content-login__info flex flex-middle flex-center"
+              :class="{ 'wrap-content-login__info--hover': menuVisible }"
+            >
               <span>你好，{{ userInfo.name }}</span>
               <img class="content-login-info__logo" :src="menuIcon" />
             </div>
@@ -31,6 +30,10 @@
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
+          <div v-else class="wrap-content-login__text flex">
+            <span>请先</span>
+            <span class="content-login-text--light">登录/注册</span>
+          </div>
         </div>
         <template>
           <div v-if="!menuVisible" class="header-wrap-content--line"></div>
@@ -64,7 +67,7 @@ const MENU_VALUE = {
 export default {
   data() {
     return {
-      isLogin: false,
+      isLogin: true,
       userInfo: {
         name: "仙女广",
       },
@@ -148,13 +151,14 @@ export default {
     .header-wrap__content {
       .header-wrap-content__login {
         .wrap-content-login__text {
+          padding: 0 18px;
           .content-login-text--light {
             margin-left: 6px;
             color: #ff875b;
             cursor: pointer;
           }
         }
-        .wrap-content-login__info:hover {
+        .wrap-content-login__info--hover {
           background: #ffffff !important;
           color: #ff875b;
         }

layouts/module/header/index.vue

@@ -1,55 +1,89 @@
 <template>
-  <div>
-    <HeaderInfoBar />
-    <div class="default-header">
-      <div class="default-header-box">
-        <div class="default-header-box__wrap flex flex-between flex-middle">
-          <img
-            class="header-box-wrap__logo"
-            src="@/static/images/layout/logo.png"
-          />
-          <div class="header-box-wrap__right flex flex-middle">
-            <div class="box-wrap-right__search flex">
-              <div class="search-input">
-                <el-input
-                  v-model="searchContent"
-                  placeholder="请输入商品名称"
-                ></el-input>
-              </div>
-              <div class="search-icon flex flex-center flex-middle">
-                <img src="@/static/images/layout/icon-search.png" />
-              </div>
-            </div>
-            <div class="box-wrap-right__cart flex flex-middle">
-              <img src="@/static/images/layout/icon-shop.png" />
-              <span>购物车</span>
-              <div class="wrap-right-cart__tip">3</div>
+  <div class="layout-header" :class="{ 'layout-sticky-bar-header': isSticky }">
+    <template v-if="isSticky">
+      <div class="sticky-bar-header">
+        <div class="sticky-bar-header__wrap flex flex-middle flex-between">
+          <div class="flex flex-middle">
+            <img
+              class="bar-header-wrap__logo"
+              src="@/static/images/layout/logo-sticky.png"
+            />
+            <el-menu
+              :default-active="tabIndex"
+              mode="horizontal"
+              @select="handleTabSelect"
+            >
+              <el-menu-item
+                v-for="item in tabList"
+                :key="item.value"
+                :index="item.value"
+                >{{ item.label }}</el-menu-item
+              >
+            </el-menu>
+          </div>
+          <div class="bar-header-wrap__icons flex flex-middle">
+            <img src="@/static/images/layout/icon-search-sticky.png" />
+            <div class="header-wrap-icons__shop">
+              <img src="@/static/images/layout/icon-shop-sticky.png" />
+              <span class="">3</span>
             </div>
+            <div class="header-wrap-icons__login">登录</div>
           </div>
         </div>
-        <div class="default-header-box__tab flex flex-middle">
-          <div class="header-box-tab__category">
-            <div class="tab-category__label flex flex-center flex-middle">
-              <img src="@/static/images/layout/icon-category.png" />
-              <span>热门分类</span>
-            </div>
-            <div class="tab-category__menu flex flex-left">
-              <div class="tab-category-menu__left">
-                <div
-                  v-for="item in categrayData"
-                  :key="item.id"
-                  @mouseenter="handleMouEnter(item.id)"
-                  @mouseleave="categrayHoverVisible = false"
-                  class="menu-left__item flex felx-middle"
-                >
-                  <img />
-                  <span>{{ item.name }}</span>
+      </div>
+    </template>
+    <template v-else>
+      <HeaderInfoBar />
+      <div class="default-bar-header">
+        <div class="bar-header-box">
+          <div class="bar-header-box__wrap flex flex-between flex-middle">
+            <img
+              class="header-box-wrap__logo"
+              src="@/static/images/layout/logo.png"
+            />
+            <div class="header-box-wrap__right flex flex-middle">
+              <div class="box-wrap-right__search flex">
+                <div class="search-input">
+                  <el-input
+                    v-model="searchContent"
+                    placeholder="请输入商品名称"
+                  ></el-input>
                 </div>
+                <div class="search-icon flex flex-center flex-middle">
+                  <img src="@/static/images/layout/icon-search.png" />
+                </div>
+              </div>
+              <div class="box-wrap-right__cart flex flex-middle">
+                <img src="@/static/images/layout/icon-shop.png" />
+                <span>购物车</span>
+                <div class="wrap-right-cart__tip">3</div>
               </div>
-              <div v-show="categrayHoverVisible">
+            </div>
+          </div>
+          <div class="bar-header-box__tab flex flex-middle">
+            <div class="header-box-tab__category">
+              <div class="tab-category__label flex flex-center flex-middle">
+                <img src="@/static/images/layout/icon-category.png" />
+                <span>热门分类</span>
+              </div>
+              <div class="tab-category__menu flex flex-left">
+                <div class="tab-category-menu__left">
+                  <div
+                    v-for="item in categrayData"
+                    :key="item.id"
+                    @mouseenter="handleMouEnter(item.id)"
+                    @mouseleave="categrayHoverVisible = false"
+                    class="menu-left__item flex flex-middle"
+                  >
+                    <img />
+                    <span>{{ item.name }}</span>
+                  </div>
+                </div>
                 <div
+                  v-show="categrayHoverVisible"
                   class="tab-category-menu__right flex flex-wrap"
                   @mouseenter="categrayHoverVisible = true"
+                  @mouseleave="categrayHoverVisible = false"
                 >
                   <div
                     v-for="item in currentCategrayList"
@@ -61,21 +95,22 @@
                 </div>
               </div>
             </div>
+            <nuxt-link
+              v-for="item in tabList"
+              :key="item.value"
+              class="header-box-tab__common flex flex-center flex-middle"
+              :class="{
+                'header-box-tab__common--light':
+                  item.path === $nuxt.$route.path,
+              }"
+              :to="item.path"
+            >
+              {{ item.label }}
+            </nuxt-link>
           </div>
-          <nuxt-link
-            v-for="item in tabList"
-            :key="item.value"
-            class="header-box-tab__common flex flex-center flex-middle"
-            :class="{
-              'header-box-tab__common--light': item.path === $nuxt.$route.path,
-            }"
-            :to="item.path"
-          >
-            {{ item.label }}
-          </nuxt-link>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 <script>
@@ -94,19 +129,25 @@ const TAB_TYPE = {
 export default {
   name: "DefaultHeader",
   components: { HeaderInfoBar },
+  props: {
+    isSticky: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       searchContent: "",
-      activityTab: TAB_TYPE.HOME,
+      tabIndex: TAB_TYPE.HOME,
       tabList: [
         { label: "首页", value: TAB_TYPE.HOME, path: "/" },
         { label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
         { label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
         { label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
       ],
-      categrayData: [],
       categrayHoverVisible: false,
       currentCategrayId: 0,
+      categrayData: [],
     };
   },
   computed: {
@@ -128,16 +169,16 @@ export default {
     // 获取热门分类信息
     async getCategroyData() {
       const { result } = await ApiGetCategoryOneList();
-      if (result.data.length > 0) {
+      if (result && result.length > 0) {
         this.categrayData = await Promise.all(
-          result.data.map(async (item) => {
-            const { result } = await ApiGetCategoryTwoAndGoods({
+          result.map(async (item) => {
+            const { result: resultGoods } = await ApiGetCategoryTwoAndGoods({
               categoryId: item.id,
             });
-            if (result.data.length > 0) {
+            if (resultGoods && resultGoods.length > 0) {
               return {
                 ...item,
-                list: result.data,
+                list: resultGoods.data,
               };
             }
           })
@@ -148,15 +189,84 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.default-header {
+.layout-sticky-bar-header {
+  height: 50px;
+}
+.sticky-bar-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  .sticky-bar-header__wrap {
+    width: 1200px;
+    height: 100%;
+    margin: 0 auto;
+    .bar-header-wrap__logo {
+      width: 164px;
+      height: 28px;
+      margin-right: 50px;
+    }
+    .bar-header-wrap__icons {
+      cursor: pointer;
+      img {
+        width: 23px;
+        height: 23px;
+      }
+      .header-wrap-icons__shop {
+        position: relative;
+        margin: 0 30px 0 14px;
+        img {
+          width: 30px;
+        }
+        span {
+          position: absolute;
+          right: -6px;
+          top: -4px;
+          display: block;
+          height: 14px;
+          padding: 0 2px;
+          line-height: 14px;
+          text-align: center;
+          background: #ff512b;
+          font-size: 10px;
+          color: #ffffff;
+          border-radius: 50%;
+        }
+      }
+      .header-wrap-icons__login {
+        font-size: 16px;
+        color: #909399;
+      }
+    }
+    /deep/ .el-menu {
+      height: 50px;
+      color: #666666;
+      .is-active {
+        color: #ff7f39;
+        border-bottom: 2px solid #ff823c;
+      }
+      .el-menu-item:hover {
+        color: #ff7f39;
+      }
+      .el-menu-item {
+        height: 100%;
+        line-height: 50px;
+        font-size: 16px;
+        margin: 0 20px;
+      }
+    }
+  }
+}
+.default-bar-header {
   padding-top: 32px;
   position: relative;
   z-index: 3;
-  .default-header-box {
+  .bar-header-box {
     width: 1200px;
     margin: 0 auto;
     background: #ffffff;
-    .default-header-box__wrap {
+    .bar-header-box__wrap {
       height: 42px;
       font-size: 14px;
       margin-bottom: 38px;
@@ -214,7 +324,7 @@ export default {
         }
       }
     }
-    .default-header-box__tab {
+    .bar-header-box__tab {
       height: 38px;
       .header-box-tab__category {
         position: relative;
@@ -241,7 +351,7 @@ export default {
           color: #333333;
           .tab-category-menu__left {
             width: 190px;
-            padding: 34px 0;
+            padding: 15px 0;
             background: #ffffff;
             .menu-left__item:hover {
               color: #ff875b;

nuxt.config.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-03 22:14:16
  * @LastEditors: ch
- * @LastEditTime: 2022-05-04 22:58:00
+ * @LastEditTime: 2022-05-09 09:56:10
  * @Description: file content
  */
 export default {
@@ -42,8 +42,7 @@ export default {
   plugins: [
     '@/plugins/element-ui',
     '@/plugins/axios',
-    { src: '@plugins/axiosTk.js', ssr: false },
-    { src: '@plugins/storeStorage.js', ssr: false },
+    '@plugins/axiosTk.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -56,8 +55,7 @@ export default {
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     '@nuxtjs/axios',
-    'cookie-universal-nuxt',
-    ['cookie-universal-nuxt', { alias: 'cookiz' }],
+    'cookie-universal-nuxt'
   ],
 
   // Build Configuration: https://go.nuxtjs.dev/config-build

package.json

@@ -19,18 +19,18 @@
     "core-js": "^3.19.3",
     "element-ui": "^2.15.8",
     "js-util-all": "^1.0.6",
-    "node-sass": "^4.14.1",
     "nuxt": "^2.15.8",
-    "sass": "^1.32.13",
-    "sass-loader": "^7.3.1",
     "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^4.46.0"
+    "vue-template-compiler": "^2.6.14"
   },
   "devDependencies": {
     "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
+    "webpack": "^4.46.0",
+    "node-sass": "^4.14.1",
+    "sass": "^1.32.13",
+    "sass-loader": "^7.3.1",
     "babel-jest": "^27.4.4",
     "eslint": "^8.15.0",
     "eslint-plugin-prettier": "^4.0.0",

pages/goods/detail/_id.vue

@@ -122,7 +122,7 @@ export default {
         height: 1px;
         background: #dddddd;
       }
-      &--service{
+      &--service {
         padding-top: 16px;
       }
     }

pages/index/module/Banner.vue

@@ -9,8 +9,12 @@
 <template>
   <div class="home-banner">
     <el-carousel height="360px" indicator-position="outside">
-      <el-carousel-item v-for="item in bannerList" :key="item.id">
-        <el-image :src="item.picture"></el-image>
+      <el-carousel-item
+        v-for="item in bannerList"
+        :key="item.id"
+        @click="onBannerClick(item.id)"
+      >
+        <el-image :src="item.url" fit="fill"></el-image>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -22,16 +26,29 @@ export default {
     return {
       bannerList: [
         {
-          picture:
-            "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/banner4.jpg",
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/banner4.jpg",
+          id: 13,
         },
         {
-          picture:
-            "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/2banner.png",
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/1.png",
+          id: 30,
+        },
+        {
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/2banner.png",
+          id: 15,
+        },
+        {
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/3banner.png",
+          id: 40,
         },
       ],
     };
   },
+  methods: {
+    onBannerClick(goodsId) {
+      window.open(`${location.href}/detail/${goodsId}`);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -46,6 +63,9 @@ export default {
       width: 45px;
       height: 45px;
     }
+    .el-carousel__indicators {
+      display: none;
+    }
     .el-carousel__arrow--left {
       left: calc(50% - 380px) !important;
     }
@@ -54,6 +74,7 @@ export default {
     }
     .el-image {
       width: 100%;
+      height: 100%;
     }
   }
 }

pages/order/submit/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:30:58
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 16:25:39
+ * @LastEditTime: 2022-05-09 14:13:53
  * @Description: file content
 -->
 
@@ -18,7 +18,7 @@
 		<Message :orderInfo="orderInfo" :message.sync="userMessage"/>
 		<Amount :amount="orderInfo.payAmount"/>
 		<div class="pay">
-			<button class="btn" @click="submit">立即支付</button>
+			<UiButton radius type="red_panel" @click="submit">立即支付</UiButton>
 		</div>
 		<BsPay :visible.sync="payVisible" :orderId="orderId" @cancel="cancelPay"/>
 	</div>
@@ -30,18 +30,20 @@ import UIGoodsInfo from '../../../components/UIGoodsInfo.vue';
 import OrderInfo from './module/OrderInfo.vue';
 import Message from './module/Message.vue';
 import Amount from './module/Amount.vue';
+import UiButton from '../../../components/UiButton.vue';
 export default {
-	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount },
+	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount, UiButton },
 	data(){
 		return {
 			address : {id:3},
 			orderInfo : {},
 			orderId : '',
 			userMessage : '',
-			payVisible : true
+			payVisible : false
 		}
 	},
-	created(){
+	mounted(){
+
 		this.getBeforeOrder();
 	},
 	methods : {
@@ -127,15 +129,7 @@ export default {
 .pay{
 	text-align: right;
 	padding-bottom: 50px;
-	.btn{
-		background: #FF512B;
-		color: #fff;
-		font-size: 18px;
-		border: none;
-		height: 50px;
-		width: 163px;
-		margin-top: 10px;
-	}
+	margin-top: 10px;
 }
 
 </style>

plugins/api/account.js

@@ -35,5 +35,5 @@ export const ApiPostLogin = (data) => ToAsyncAwait(axios.post(`${BASE_URL}/user/
  * 获取手机验证码
  * @param {*} params 
  */
-export const ApiGetCode = (params) => ToAsyncAwait(axios.get(`${BASE_URL}/user/login/verificationCode`, params));
+export const ApiGetCode = (params) => ToAsyncAwait(axios.get(`${BASE_URL}/user/login/verificationCode`, { params }));
 

plugins/api/order.js

@@ -4,7 +4,7 @@
  * @Author: ch
  * @Date: 2022-05-04 18:17:25
  * @LastEditors: ch
- * @LastEditTime: 2022-05-07 23:27:49
+ * @LastEditTime: 2022-05-09 11:07:28
  * @Description: file content
  */
 import {axiosTk} from "../axiosTk";

plugins/axios.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-03 23:04:45
  * @LastEditors: ch
- * @LastEditTime: 2022-05-04 18:32:54
+ * @LastEditTime: 2022-05-09 09:49:53
  * @Description: file content
  */
 let axios = null
@@ -16,15 +16,20 @@ export default function({app, $axios, req}) {
 	// }
 	
 // export default function ({app, $axios})  {
-    $axios.onRequest(()=>{
+    // $axios.onRequest(()=>{
+		
+	// })
+	
+	$axios.onResponse(response => {
+		const result = response.data;
+		if(response.status === 200){
+			if(result.code === 'SUCCESS'){
+				return result.data;
+			}
+			return Promise.reject(result);
+		}
+		return Promise.reject({message:'请求出错'});
 		
-	})
-	$axios.onResponse(res => {
-	  if (res.status === 200) {
-		return res.data;
-	  } else {
-		return Promise.reject(res.data.error);
-	  }
 	});
 	axios = $axios;
 }

plugins/axiosTk.js

@@ -23,7 +23,7 @@ export default function ({$axios, store}, inject) {
 			}
 			if(result.code === 'TOKEN_FAIL'){
 				alert('这里要弹登录')
-				store.commit('SET_TOKEN', '');
+				store.commit('setLoginOut');
 				return result;
 			}
 			return Promise.reject(result);

plugins/storeStorage.js

@@ -1,14 +0,0 @@
-
-
-/*
- * @Author: ch
- * @Date: 2022-05-04 21:15:17
- * @LastEditors: ch
- * @LastEditTime: 2022-05-07 22:33:57
- * @Description: 服务端没有localStorage对象，在Sotre中不能直接取值，在plugins中统一为state做一次初始取值处理
- */
-import { TOKEN } from "./config/sotrageKey";
-export default ({store})=>{
-	// 获取storage中的token
-	store.commit('SET_TOKEN',localStorage.getItem(TOKEN));
-}

store/index.js

@@ -5,16 +5,49 @@
  * @LastEditTime: 2022-05-07 22:33:28
  * @Description: file content
  */
+import { TOKEN_KEY } from "@/constants";
+import { ApiGetCurrentUser } from "@/plugins/api/account";
+const ONE_DAY = 86400000; // 一天的毫秒数 24 * 60 * 60 * 1000;
 
-import { TOKEN } from "@/plugins/config/sotrageKey";
+const state = () => ({
+  token: "",
+  userInfo: {},
+});
+const mutations = {
+  setUserInfo(state, info) {
+    state.userInfo = info;
+  },
+  setToken(state, token) {
+    state.token = token;
+    this.$cookies.set(TOKEN_KEY, token, {
+      path: "/",
+      maxAge: ONE_DAY,
+    });
+  },
+  setLoginOut(state) {
+    state.token = "";
+    state.userInfo = {};
+    this.$cookies.remove(TOKEN_KEY);
+  },
+};
+const actions = {
+  async nuxtServerInit({ state, commit, dispatch }) {
+    const token = this.$cookies.get(TOKEN_KEY);
+    if (!state.token && token) {
+      commit("setToken", token);
+      await dispatch("getUserInfo");
+    }
+  },
+  async getUserInfo({ commit }) {
+    const { result } = await ApiGetCurrentUser();
+    if (result) {
+      commit("setUserInfo", result);
+    }
+  },
+  loginOut({ commit }) {
+    commit("setLoginOut");
+    // 此处请求接口
+  },
+};
 
-
-export const state = () => ({
-	token: ''
-  })
-export const mutations = {
-	SET_TOKEN (state, token = ''){
-		state.token = token;
-		token ? localStorage.setItem(TOKEN, token) : localStorage.removeItem(TOKEN);
-	}
-}
+export { state, mutations, actions };