zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
mabo 2021-07-13 18:15:32 +08:00
parent 4c0aec2f42
commit 0e277a8e6d
8 changed files with 153 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
buyer/src/components/Search.vue
View File

@ -53,6 +53,10 @@ export default {
store: { // 是否为店铺页面 store: { // 是否为店铺页面
type: Boolean, type: Boolean,
default: false default: false
},
hover: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -89,10 +93,14 @@ export default {
} else { } else {
this.logoImg = this.Cookies.getItem('logo') this.logoImg = this.Cookies.getItem('logo')
} }
this.searchData = this.$route.query.keyword 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> </script>

177
buyer/src/components/header/Header.vue
View File

@ -2,37 +2,33 @@
<div class="box"> <div class="box">
<div class="nav"> <div class="nav">
<ul class="location"> <ul class="location">
<li>
<router-link to="/" v-if="$route.path !== '/'" class="home-page">
<Icon type="md-home" />首页
</router-link>
</li>
</ul> </ul>
<ul class="detail"> <ul class="detail">
<li class="first" v-show="!userInfo.username"> <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)}`"> <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> </router-link>
</li> </li>
<li v-show="!!userInfo.username"> <li v-show="!!userInfo.username">
<Dropdown> <div class="username-p">
<p class="username-p"> <p>
<Avatar class="person-icon" :src="userInfo.face" icon="person" size="small" /> <Avatar class="person-icon" :src="userInfo.face" icon="person" size="small" />
<span class="username">{{ userInfo.nickName? userInfo.nickName : userInfo.username | secrecyMobile }}</span> <span class="username">{{ userInfo.nickName? userInfo.nickName : userInfo.username | secrecyMobile }}</span>
</p> </p>
<DropdownMenu slot="list"> <transition name='fade'>
<div class="my-page"> <ul class="drop-items">
<div class="my-info" @click="myInfo"> <li @click="goUserCenter('/home')">我的主页</li>
<Icon type="md-home"></Icon> <li @click="goUserCenter('/home/Coupons')">优惠券</li>
<p>我的主页</p> <li @click="goUserCenter('/home/Favorites')">我的收藏</li>
</div> <li @click="signOutFun">退出登录</li>
<div class="sign-out" @click="signOutFun"> </ul>
<Icon type="md-exit"></Icon> </transition>
<p>退出登录</p> </div>
</div>
</div>
</DropdownMenu>
</Dropdown>
</li> </li>
<li @click="goUserCenter('/home/MyOrder')"><span class="nav-item hover-color">我的订单</span></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> <li @click="goUserCenter('/home/MyTracks')"><span class="nav-item hover-color">我的足迹</span></li>
@ -95,28 +91,28 @@
</template> </template>
<script> <script>
import storage from "@/plugins/storage.js"; import storage from '@/plugins/storage.js';
import { cartGoodsAll } from "@/api/cart.js"; import { cartGoodsAll } from '@/api/cart.js';
export default { export default {
name: "M-Header", name: 'M-Header',
created() { created () {
if (storage.getItem("userInfo")) { if (storage.getItem('userInfo')) {
this.userInfo = JSON.parse(storage.getItem("userInfo")); this.userInfo = JSON.parse(storage.getItem('userInfo'));
} }
}, },
data() { data () {
return { return {
// 主题颜色切换 // 主题颜色切换
themeType: "light", themeType: 'light',
userInfo: {}, // 用户信息 userInfo: {}, // 用户信息
shoppingCart: [], // 购物车 shoppingCart: [] // 购物车
}; };
}, },
computed: { computed: {
cartNum() { cartNum () {
return this.$store.state.cartNum; return this.$store.state.cartNum;
}, }
}, },
methods: { methods: {
changeCity (city) { // 选择所在城市 changeCity (city) { // 选择所在城市
@ -124,15 +120,15 @@ export default {
}, },
goToPay () { // 跳转购物车 goToPay () { // 跳转购物车
let url = this.$router.resolve({ let url = this.$router.resolve({
path: "/cart", path: '/cart'
}); });
window.open(url.href, "_blank"); window.open(url.href, '_blank');
}, },
myInfo () { // 跳转会员中心 myInfo () { // 跳转会员中心
let url = this.$router.resolve({ let url = this.$router.resolve({
path: "/home", path: '/home'
}); });
window.open(url.href, "_blank"); window.open(url.href, '_blank');
}, },
signOutFun () { // 退出登录 signOutFun () { // 退出登录
storage.removeItem('accessToken'); storage.removeItem('accessToken');
@ -142,51 +138,51 @@ export default {
this.$store.commit('SET_CARTNUM', 0) this.$store.commit('SET_CARTNUM', 0)
this.$router.push('/login'); this.$router.push('/login');
}, },
goUserCenter(path) { goUserCenter (path) {
// 跳转我的订单，我的足迹 // 跳转我的订单，我的足迹
if (this.userInfo.username) { if (this.userInfo.username) {
this.$router.push({ path: path }); this.$router.push({ path: path });
} else { } else {
this.$Modal.confirm({ this.$Modal.confirm({
title: "请登录", title: '请登录',
content: "<p>请登录后执行此操作</p>", content: '<p>请登录后执行此操作</p>',
okText: "立即登录", okText: '立即登录',
cancelText: "继续浏览", cancelText: '继续浏览',
onOk: () => { onOk: () => {
this.$router.push({ this.$router.push({
path: "/login", path: '/login',
query: { query: {
rePath: this.$router.history.current.path, 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({ let routeUrl = this.$router.resolve({
path: "/shopEntry", path: '/shopEntry',
query: { id: 1 }, query: { id: 1 }
}); });
window.open(routeUrl.href, "_blank"); window.open(routeUrl.href, '_blank');
} else { } else {
this.$router.push("login"); this.$router.push('login');
} }
}, },
getCartList() { getCartList () {
// 获取购物车列表 // 获取购物车列表
if (this.userInfo.username) { if (this.userInfo.username) {
cartGoodsAll().then((res) => { cartGoodsAll().then((res) => {
this.shoppingCart = res.result.skuList; this.shoppingCart = res.result.skuList;
this.$store.commit("SET_CARTNUM", this.shoppingCart.length); this.$store.commit('SET_CARTNUM', this.shoppingCart.length);
this.Cookies.setItem("cartNum", this.shoppingCart.length); this.Cookies.setItem('cartNum', this.shoppingCart.length);
}); });
} }
}, }
}, }
}; };
</script> </script>
@ -201,12 +197,10 @@ export default {
.shopping-cart-null span { .shopping-cart-null span {
@include sub_color($light_sub_color); @include sub_color($light_sub_color);
} }
.tipsLogin {
color: $theme_color;
}
.box { .box {
width: 100%; width: 100%;
font-size: 12px!important;
// height: 35px; // height: 35px;
@include background_color($light_white_background_color); @include background_color($light_white_background_color);
} }
@ -222,7 +216,7 @@ export default {
} }
.nav li { .nav li {
float: left; float: left;
font-size: 14px; font-size: 12px;
line-height: 35px; line-height: 35px;
margin-right: 10px; margin-right: 10px;
font-weight: bold; font-weight: bold;
@ -230,7 +224,7 @@ export default {
.nav a, .nav a,
.nav-item { .nav-item {
text-decoration: none; text-decoration: none;
padding-left: 10px; padding-left: 14px;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
color: #999; color: #999;
cursor: pointer; cursor: pointer;
@ -324,8 +318,67 @@ export default {
line-height: 16px; line-height: 16px;
} }
.username-p { .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 { .my-page {
padding: 3px 5px; padding: 3px 5px;
width: 180px; width: 180px;

4
buyer/src/components/header/hoverSearch.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="scroll-show"> <div class="scroll-show">
<div class="content clearfix"> <div class="content clearfix">
<cateNav class="cate" :showNavBar="false"></cateNav> <cateNav class="cate" :hover="true" :showNavBar="false"></cateNav>
<Search class="search-con" :showLogo="false" :showTag="false"></Search> <Search class="search-con" :hover="true" :showLogo="false" :showTag="false"></Search>
<Icon type="ios-cart-outline" @click="goCartList" class="cart-icon" @mouseenter.native="getCartList" /> <Icon type="ios-cart-outline" @click="goCartList" class="cart-icon" @mouseenter.native="getCartList" />
<i class="cart-badge">{{cartNum < 100 ? cartNum : '99'}}</i> <i class="cart-badge">{{cartNum < 100 ? cartNum : '99'}}</i>
</div> </div>

5
buyer/src/components/nav/cateNav.vue
View File

@ -73,6 +73,10 @@ export default {
showNavBar: { // 显示全部商品分类右侧导航条 showNavBar: { // 显示全部商品分类右侧导航条
default: true, default: true,
type: Boolean type: Boolean
},
hover: {
default: false,
type: Boolean
} }
}, },
data () { data () {
@ -90,6 +94,7 @@ export default {
}, },
methods: { methods: {
getCate () { // 获取分类数据 getCate () { // 获取分类数据
if (this.hover) return false;
getCategory(0).then(res => { getCategory(0).then(res => {
if (res.success) { if (res.success) {
this.cateList = res.result; this.cateList = res.result;

7
buyer/src/pages/SignUp.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="login" @click='$refs.verify.show = false'> <div class="sign-up" @click='$refs.verify.show = false'>
<div style="height:50px;"></div> <div style="height:50px;"></div>
<div class="logo-box"> <div class="logo-box">
<img <img
@ -209,13 +209,12 @@ export default {
mounted () { mounted () {
this.$refs.formRegist.resetFields(); this.$refs.formRegist.resetFields();
this.logoImg = this.Cookies.getItem('logo') this.logoImg = this.Cookies.getItem('logo')
}, console.log(window.innerHeight);
watch: { document.querySelector('.sign-up').style.height = window.innerHeight + 'px'
} }
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.logo-box { .logo-box {
width: 600px; width: 600px;
height: 80px; height: 80px;

4
buyer/src/pages/home/orderCenter/MyOrder.vue
View File

@ -55,8 +55,8 @@
>{{ goods.goodsPrice | unitPrice("￥") }} </span >{{ goods.goodsPrice | unitPrice("￥") }} </span
>x {{ goods.num }} >x {{ goods.num }}
</div> </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.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)" size="small" style="position:relative;top:-22px;left:110px">投诉</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> </div>
</div> </div>

16
seller/src/config/index.js
View File

@ -18,14 +18,14 @@ export default {
* @description api请求基础路径 * @description api请求基础路径
*/ */
api_dev: { api_dev: {
// common: 'https://common-api.pickmall.cn', common: 'https://common-api.pickmall.cn',
// buyer: 'https://buyer-api.pickmall.cn', buyer: 'https://buyer-api.pickmall.cn',
// seller: 'https://store-api.pickmall.cn', seller: 'https://store-api.pickmall.cn',
// manager: 'https://admin-api.pickmall.cn', manager: 'https://admin-api.pickmall.cn',
common: 'http://192.168.0.103:8890', // common: 'http://192.168.0.103:8890',
buyer: 'http://192.168.0.103:8888', // buyer: 'http://192.168.0.103:8888',
seller: 'http://192.168.0.103:8889', // seller: 'http://192.168.0.103:8889',
manager: 'http://192.168.0.103:8887' // manager: 'http://192.168.0.103:8887'
}, },
api_prod: { api_prod: {

11
seller/src/views/goods/goods-seller/goodsOperationSec.vue
View File

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