前端首页下拉样式，头部样式，seller端批量上传

2021-07-13 18:15:32 +08:00 · 2021-07-13 18:15:32 +08:00 · 0e277a8e6d
parent 4c0aec2f42
commit 0e277a8e6d
8 changed files with 153 additions and 85 deletions
--- a/buyer/src/components/Search.vue
+++ b/buyer/src/components/Search.vue
@ -53,6 +53,10 @@ export default {
    store: { // 是否为店铺页面
      type: Boolean,
      default: false
+    },
+    hover: {
+      type: Boolean,
+      default: false
    }
  },
  data () {
@ -89,10 +93,14 @@ export default {
    } else {
      this.logoImg = this.Cookies.getItem('logo')
    }
+
    this.searchData = this.$route.query.keyword
-    hotWords({start: 1, end: 5}).then(res => {
-      if (res.success) this.promotionTags = res.result
-    })
+
+    if (!this.hover) { // 首页顶部固定搜索栏不调用热词接口
+      hotWords({start: 1, end: 5}).then(res => {
+        if (res.success) this.promotionTags = res.result
+      })
+    }
  }
 };
 </script>
--- a/buyer/src/components/header/Header.vue
+++ b/buyer/src/components/header/Header.vue
@ -2,37 +2,33 @@
  <div class="box">
    <div class="nav">
      <ul class="location">
-        <li>
-          <router-link to="/" v-if="$route.path !== '/'" class="home-page">
-            <Icon type="md-home" />首页
-          </router-link>
-        </li>
      </ul>
      <ul class="detail">
        <li class="first" v-show="!userInfo.username">
+          <router-link :to="`/signUp`">
+            <span style="border:none">立即注册</span>
+          </router-link>
+        </li>
+        <li v-show="!userInfo.username">
          <router-link :to="`/login?rePath=${$route.path}&query=${JSON.stringify($route.query)}`">
-            <span style="border:none" class="tipsLogin">请登录</span>
+            <span style="border:none">请登录</span>
          </router-link>
        </li>
        <li v-show="!!userInfo.username">
-          <Dropdown>
-            <p class="username-p">
+          <div class="username-p">
+            <p>
              <Avatar class="person-icon" :src="userInfo.face" icon="person" size="small" />
              <span class="username">{{ userInfo.nickName? userInfo.nickName : userInfo.username | secrecyMobile }}</span>
            </p>
-            <DropdownMenu slot="list">
-              <div class="my-page">
-                <div class="my-info" @click="myInfo">
-                  <Icon type="md-home"></Icon>
-                  <p>我的主页</p>
-                </div>
-                <div class="sign-out" @click="signOutFun">
-                  <Icon type="md-exit"></Icon>
-                  <p>退出登录</p>
-                </div>
-              </div>
-            </DropdownMenu>
-          </Dropdown>
+            <transition name='fade'>
+              <ul class="drop-items">
+                <li @click="goUserCenter('/home')">我的主页</li>
+                <li @click="goUserCenter('/home/Coupons')">优惠券</li>
+                <li @click="goUserCenter('/home/Favorites')">我的收藏</li>
+                <li @click="signOutFun">退出登录</li>
+              </ul>
+            </transition>
+          </div>
        </li>
        <li @click="goUserCenter('/home/MyOrder')"><span class="nav-item hover-color">我的订单</span></li>
        <li @click="goUserCenter('/home/MyTracks')"><span class="nav-item hover-color">我的足迹</span></li>
@ -95,28 +91,28 @@
 </template>

 <script>
-import storage from "@/plugins/storage.js";
-import { cartGoodsAll } from "@/api/cart.js";
+import storage from '@/plugins/storage.js';
+import { cartGoodsAll } from '@/api/cart.js';
 export default {
-  name: "M-Header",
-  created() {
-    if (storage.getItem("userInfo")) {
-      this.userInfo = JSON.parse(storage.getItem("userInfo"));
+  name: 'M-Header',
+  created () {
+    if (storage.getItem('userInfo')) {
+      this.userInfo = JSON.parse(storage.getItem('userInfo'));
    }
  },

-  data() {
+  data () {
    return {
      // 主题颜色切换
-      themeType: "light",
+      themeType: 'light',
      userInfo: {}, // 用户信息
-      shoppingCart: [], // 购物车
+      shoppingCart: [] // 购物车
    };
  },
  computed: {
-    cartNum() {
+    cartNum () {
      return this.$store.state.cartNum;
-    },
+    }
  },
  methods: {
    changeCity (city) { // 选择所在城市
@ -124,15 +120,15 @@ export default {
    },
    goToPay () { // 跳转购物车
      let url = this.$router.resolve({
-        path: "/cart",
+        path: '/cart'
      });
-      window.open(url.href, "_blank");
+      window.open(url.href, '_blank');
    },
    myInfo () { // 跳转会员中心
      let url = this.$router.resolve({
-        path: "/home",
+        path: '/home'
      });
-      window.open(url.href, "_blank");
+      window.open(url.href, '_blank');
    },
    signOutFun () { // 退出登录
      storage.removeItem('accessToken');
@ -142,51 +138,51 @@ export default {
      this.$store.commit('SET_CARTNUM', 0)
      this.$router.push('/login');
    },
-    goUserCenter(path) {
+    goUserCenter (path) {
      // 跳转我的订单，我的足迹
      if (this.userInfo.username) {
        this.$router.push({ path: path });
      } else {
        this.$Modal.confirm({
-          title: "请登录",
-          content: "<p>请登录后执行此操作</p>",
-          okText: "立即登录",
-          cancelText: "继续浏览",
+          title: '请登录',
+          content: '<p>请登录后执行此操作</p>',
+          okText: '立即登录',
+          cancelText: '继续浏览',
          onOk: () => {
            this.$router.push({
-              path: "/login",
+              path: '/login',
              query: {
                rePath: this.$router.history.current.path,
-                query: JSON.stringify(this.$router.history.current.query),
-              },
+                query: JSON.stringify(this.$router.history.current.query)
+              }
            });
-          },
+          }
        });
      }
    },
-    shopEntry() {
+    shopEntry () {
      // 店铺入驻
-      if (storage.getItem("accessToken")) {
+      if (storage.getItem('accessToken')) {
        let routeUrl = this.$router.resolve({
-          path: "/shopEntry",
-          query: { id: 1 },
+          path: '/shopEntry',
+          query: { id: 1 }
        });
-        window.open(routeUrl.href, "_blank");
+        window.open(routeUrl.href, '_blank');
      } else {
-        this.$router.push("login");
+        this.$router.push('login');
      }
    },
-    getCartList() {
+    getCartList () {
      // 获取购物车列表
      if (this.userInfo.username) {
        cartGoodsAll().then((res) => {
          this.shoppingCart = res.result.skuList;
-          this.$store.commit("SET_CARTNUM", this.shoppingCart.length);
-          this.Cookies.setItem("cartNum", this.shoppingCart.length);
+          this.$store.commit('SET_CARTNUM', this.shoppingCart.length);
+          this.Cookies.setItem('cartNum', this.shoppingCart.length);
        });
      }
-    },
-  },
+    }
+  }
 };
 </script>

@ -201,12 +197,10 @@ export default {
 .shopping-cart-null span {
  @include sub_color($light_sub_color);
 }
-.tipsLogin {
-  color: $theme_color;
-}

 .box {
  width: 100%;
+  font-size: 12px!important;
  // height: 35px;
  @include background_color($light_white_background_color);
 }
@ -222,7 +216,7 @@ export default {
 }
 .nav li {
  float: left;
-  font-size: 14px;
+  font-size: 12px;
  line-height: 35px;
  margin-right: 10px;
  font-weight: bold;
@ -230,7 +224,7 @@ export default {
 .nav a,
 .nav-item {
  text-decoration: none;
-  padding-left: 10px;
+  padding-left: 14px;
  border-left: 1px solid #ccc;
  color: #999;
  cursor: pointer;
@ -324,8 +318,67 @@ export default {
  line-height: 16px;
 }
 .username-p {
-  cursor: pointer;
+  position: relative;
+  p{
+    cursor: pointer;
+  }
+  .drop-items {
+    position: absolute;
+    display: none;
+    top: 45px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: 5px 10px;
+    z-index: 20;
+    height: 150px;
+    background-color: #fff;
+    width: 80px;
+    border: 1px solid #eee;
+    box-shadow: 2px 2px 7px #999;
+
+    li {
+      color: rgb(107, 106, 106);
+      width: 100%;
+      border-bottom:1px solid rgb(207, 206, 206);
+      font-weight: normal;
+      text-align: center;
+      &:last-child{
+        border: none;
+      }
+      &:hover{
+        cursor: pointer;
+        color: $theme_color;
+      }
+    }
+
+    &::before{
+      position: absolute;
+      top: -20px;
+      left: 30px;
+      content: '';
+      width: 0;
+      height: 0;
+      border: 10px solid #999;
+      border-color:  transparent transparent #fff transparent ;
+    }
+
+    &::after{
+      content: '';
+      position: absolute;
+      width: 80px;
+      height: 20px;
+      top: -20px;
+      left: 0;
+    }
+  }
+  &:hover{
+    .drop-items{
+      display: block;
+    }
+  }
 }
+
 .my-page {
  padding: 3px 5px;
  width: 180px;
--- a/buyer/src/components/header/hoverSearch.vue
+++ b/buyer/src/components/header/hoverSearch.vue
@ -1,8 +1,8 @@
 <template>
  <div class="scroll-show">
    <div class="content clearfix">
-      <cateNav class="cate" :showNavBar="false"></cateNav>
-      <Search class="search-con" :showLogo="false" :showTag="false"></Search>
+      <cateNav class="cate" :hover="true" :showNavBar="false"></cateNav>
+      <Search class="search-con" :hover="true" :showLogo="false" :showTag="false"></Search>
      <Icon type="ios-cart-outline" @click="goCartList" class="cart-icon"  @mouseenter.native="getCartList" />
      <i class="cart-badge">{{cartNum < 100 ? cartNum : '99'}}</i>
    </div>
--- a/buyer/src/components/nav/cateNav.vue
+++ b/buyer/src/components/nav/cateNav.vue
@ -73,6 +73,10 @@ export default {
    showNavBar: { // 显示全部商品分类右侧导航条
      default: true,
      type: Boolean
+    },
+    hover: {
+      default: false,
+      type: Boolean
    }
  },
  data () {
@ -90,6 +94,7 @@ export default {
  },
  methods: {
    getCate () { // 获取分类数据
+      if (this.hover) return false;
      getCategory(0).then(res => {
        if (res.success) {
          this.cateList = res.result;
--- a/buyer/src/pages/SignUp.vue
+++ b/buyer/src/pages/SignUp.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="login" @click='$refs.verify.show = false'>
+  <div class="sign-up" @click='$refs.verify.show = false'>
    <div style="height:50px;"></div>
    <div class="logo-box">
      <img
@ -209,13 +209,12 @@ export default {
  mounted () {
    this.$refs.formRegist.resetFields();
    this.logoImg = this.Cookies.getItem('logo')
-  },
-  watch: {
+    console.log(window.innerHeight);
+    document.querySelector('.sign-up').style.height = window.innerHeight + 'px'
  }
 };
 </script>
 <style scoped lang="scss">
-
 .logo-box {
  width: 600px;
  height: 80px;
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@ -55,8 +55,8 @@
                    >{{ goods.goodsPrice | unitPrice("￥") }} </span
                  >x {{ goods.num }}
                </div>
-                <Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" style="position:relative;top:-22px;left:100px">评价</Button>
-                <Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" size="small" style="position:relative;top:-22px;left:110px">投诉</Button>
+                <Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:100px">评价</Button>
+                <Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small" style="position:relative;top:-22px;left:100px">投诉</Button>
              </div>
            </div>
          </div>
--- a/seller/src/config/index.js
+++ b/seller/src/config/index.js
@ -18,14 +18,14 @@ export default {
   * @description api请求基础路径
   */
  api_dev: {
-    // common: 'https://common-api.pickmall.cn',
-    // buyer: 'https://buyer-api.pickmall.cn',
-    // seller: 'https://store-api.pickmall.cn',
-    // manager: 'https://admin-api.pickmall.cn',
-    common: 'http://192.168.0.103:8890',
-    buyer: 'http://192.168.0.103:8888',
-    seller: 'http://192.168.0.103:8889',
-    manager: 'http://192.168.0.103:8887'
+    common: 'https://common-api.pickmall.cn',
+    buyer: 'https://buyer-api.pickmall.cn',
+    seller: 'https://store-api.pickmall.cn',
+    manager: 'https://admin-api.pickmall.cn',
+    // common: 'http://192.168.0.103:8890',
+    // buyer: 'http://192.168.0.103:8888',
+    // seller: 'http://192.168.0.103:8889',
+    // manager: 'http://192.168.0.103:8887'

  },
  api_prod: {
--- a/seller/src/views/goods/goods-seller/goodsOperationSec.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperationSec.vue
@ -619,25 +619,28 @@ export default {
        desc: "图片 " + file.name + " 不能超过2mb"
      });
    },
+    // 商品图片上传
    handleBeforeUploadGoodsPicture() {
      const check = this.baseInfoForm.goodsGalleryFiles.length < 5;
      if (!check) {
        this.$Notice.warning({
-          title: "Up to five pictures can be uploaded.",
+          title: "图片数量不能大于五张",
        });
+        return false
      }
-      return check;
    },
-    handleBeforeUpload() {
+    handleBeforeUpload(file) {
      const check =
        this.selectedSku.images !== undefined &&
        this.selectedSku.images.length > 5;
      if (check) {
        this.$Notice.warning({
-          title: "Up to five pictures can be uploaded.",
+          title: "图片数量不能大于五张",
        });
      }
+      console.log(file);
      return !check;
+      
    },
   
    /** 查询商品品牌列表 */