Commit 6a160487 authored by Junling Bu's avatar Junling Bu
Browse files

chore[litemall-vue]: 调整

parent f4213410
......@@ -3124,4 +3124,8 @@ API应该存在版本控制,以保证兼容性。
## 3 管理后台API服务
\ No newline at end of file
## 4 更新日志
......@@ -8,7 +8,7 @@ export default [
keepAlive: true
},
components: {
default: () => import('@/views/items/tabbar-class'),
default: () => import('@/views/items/tabbar-catalog'),
tabbar: Tabbar
}
},
......
......@@ -12,7 +12,7 @@ const UserInfo_SetNickname = () => import('@/views/user/user-information-set/set
const UserInfo_SetPassword = () => import('@/views/user/user-information-set/set-password');
const UserOrderEntityList = () => import('@/views/user/order-entity-list');
const UserOrderEleList = () => import('@/views/user/order-ele-list');
const UserCouponList = () => import('@/views/user/coupon-list');
const UserRefundList = () => import('@/views/user/refund-list');
const Tabbar = () => import('@/components/Tabbar/');
......@@ -96,10 +96,10 @@ export default [
component: UserOrderEntityList
},
{
path: '/user/orderEle/list/:active',
name: 'user-order-ele-list',
path: '/user/coupon/list/:active',
name: 'user-coupon-list',
props: true,
component: UserOrderEleList
component: UserCouponList
},
{
path: '/user/refund/list',
......
......@@ -46,21 +46,34 @@
</div>
</van-panel>
<van-panel title="团购专区">
<van-panel>
<van-card
:thumb-link="goDetail(groupGood.goods.id)"
v-for="(groupGood ,index) in shopInfos.grouponList"
:thumb-link="goDetail(grouponGood.id)"
v-for="(grouponGood ,index) in shopInfos.grouponList"
:key="index"
:title="groupGood.goods.name"
:desc="groupGood.goods.brief"
:num="groupGood.groupon_member"
:origin-price="groupGood.goods.counterPrice"
:price="groupGood.goods.retailPrice +'.00'"
:thumb="groupGood.goods.picUrl"
@native-click="goDetail(groupGood.goods.id)"
:title="grouponGood.name"
:desc="grouponGood.brief"
:origin-price="grouponGood.retailPrice"
:price="grouponGood.grouponPrice +'.00'"
:thumb="grouponGood.picUrl"
@native-click="goDetail(grouponGood.id)"
>
<!-- <div slot="footer">添加日期 {{item.addTime}}</div> -->
<div slot="tags" class="card__tags">
<van-tag plain type="primary">
{{grouponGood.grouponMember}}人成团
</van-tag>
<van-tag plain type="danger">
{{grouponGood.grouponDiscount}}元再减
</van-tag>
</div>
</van-card>
<div slot='header'>
<van-cell-group>
<van-cell title="团购专区" isLink>
<router-link to="/user/coupon/list/0" class="text-desc">更多团购商品</router-link>
</van-cell>
</van-cell-group>
</div>
</van-panel>
<van-panel title="新品首发">
......@@ -117,7 +130,8 @@ import {
Toast,
Card,
Row,
Col
Col,
Tag
} from 'vant';
export default {
......@@ -161,36 +175,8 @@ export default {
this.brandList.push(v.picUrl);
});
});
},
toGoods(item) {
// 如果是秒杀商品, 并且已经抢光
if (this.lootAll(item)) {
this.$dialog.alert({ message: '该秒杀商品已抢光,看看别的吧!' });
return;
}
this.$router.push({ path: `/items/detail/${item.id}` });
},
groupIcon(key) {
const iconGroup = {
activity_seckill: 'naozhong',
goods: 'list',
mx_goods: 'n4',
shop_recommend: 'good'
};
return iconGroup[key] || '';
},
getStyle(style) {
return style ? 'item-card-vert' : 'item-card-hori';
},
lootAll(item) {
return (
typeof item.as_status !== 'undefined' && item.sold_num == item.total
);
}
},
components: {
......@@ -207,7 +193,8 @@ export default {
[Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem,
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem
[TabbarItem.name]: TabbarItem,
[Tag.name]: Tag
}
};
</script>
......
......@@ -46,6 +46,7 @@ export default {
data() {
return {
categoryId: this.itemClass,
listApi: GoodsList,
goodsList: [],
currentCategory: {},
......@@ -60,25 +61,25 @@ export default {
methods: {
handleTabClick(index) {
this.itemClass= this.navList[index].id;
this.categoryId= this.navList[index].id;
this.$router.replace({
name: 'list',
query: { itemClass: this.itemClass }
query: { itemClass: this.categoryId }
});
this.init();
},
init() {
goodsCategory({id: this.itemClass}).then(res => {
goodsCategory({id: this.categoryId}).then(res => {
this.navList = res.data.data.brotherCategory;
this.currentCategory= res.data.data.currentCategory;
// 当id是L1分类id时,这里需要重新设置成L1分类的一个子分类的id
if (res.data.data.parentCategory.id == this.itemClass) {
this.itemClass = res.data.data.currentCategory.id;
if (res.data.data.parentCategory.id == this.categoryId) {
this.categoryId = res.data.data.currentCategory.id;
}
for (let i = 0; i < this.navList.length; i++) {
if (this.navList[i].id == this.itemClass) {
if (this.navList[i].id == this.categoryId) {
this.navActive = i
break;
}
......@@ -87,8 +88,8 @@ export default {
});
},
getGoodsList() {
goodsList({categoryId: this.itemClass}).then(res => {
this.goodsList= res.data.data.goodsList
goodsList({categoryId: this.categoryId}).then(res => {
this.goodsList= res.data.data.list
});
},
},
......
......@@ -30,6 +30,7 @@
</template>
<script>
import { goodsList } from '@/api/api';
import ItemGroup from '@/components/item-group/';
import IsEmpty from '@/components/is-empty/';
import ItemCardHori from '@/components/item-card-hori/';
......@@ -78,7 +79,6 @@ export default {
methods: {
initData() {
// debugger;
this.items = [];
return this.$reqGet(
......@@ -86,7 +86,7 @@ export default {
{
keyword: this.searchVal,
page: 1,
size: 100,
limit: 100,
sort: 'name',
order: 'desc',
categoryId: 0
......
<template>
<div class="item_search">
<form action="/search" @submit="disabledSubmit">
<van-search placeholder="请输入商品名称" v-model="keyword" @search="enterSearch" autofocus/>
</form>
<div class="item_search_content">
<div class="item_search_text clearfix">
<div class="float-l">历史搜索</div>
<div class="float-r" @click="clearHistory">
<van-icon name="lajitong" style="font-size: 12px;margin-right: 3px" />
清空历史记录
</div>
</div>
<div class="item_search_history">
<word-tag
v-for="(his, i) in wordHistory"
:key="i"
@click="toSearchResult(his)"
>{{his}}</word-tag>
</div>
</div>
</div>
</template>
<script>
import { Search } from 'vant';
import SrarchTag from './search-tag';
export default {
data() {
return {
keyword: '',
focusStatus: true,
wordHistory: []
};
},
methods: {
enterSearch() {
const keyword = this.keyword;
this.pushHistoryTolocal(keyword);
this.toSearchResult(keyword);
},
toSearchResult(word) {
this.keyword = word.trim();
this.$router.push({
name: 'search-result',
query: { keyword: word.trim() }
});
},
pushHistoryTolocal(keyword) {
const wordHistory = this.wordHistory;
const historyKeyWord = this.getKeyWordHistory();
if (!!keyword.trim() && historyKeyWord.indexOf(keyword) < 0) {
wordHistory.push(keyword);
window.localStorage.setItem('keyword', wordHistory.join('|'));
}
},
getKeyWordHistory() {
const listWord = window.localStorage.getItem('keyword');
return listWord ? listWord.split('|') : [];
},
clearHistory() {
this.$dialog
.confirm({
message: '是否清空历史记录'
})
.then(() => {
window.localStorage.setItem('keyword', '');
this.wordHistory = [];
});
},
disabledSubmit() {
return false;
}
},
activated() {
this.wordHistory = this.getKeyWordHistory();
},
components: {
[Search.name]: Search,
[SrarchTag.name]: SrarchTag
}
};
</script>
<style lang="scss" scoped>
.item_search {
background-color: #fff;
}
.item_search_content {
padding: 15px 10px 0;
}
.item_search_text {
font-size: $font-size-normal;
color: $font-color-gray;
margin-bottom: 20px;
}
.item_search_history > span {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
<template>
<div class="item_search">
<form action="/search" @submit="disabledSubmit">
<van-search placeholder="请输入商品名称" v-model="keyword" @search="enterSearch" autofocus/>
</form>
<div class="item_search_content">
<div class="item_search_text clearfix">
<div class="float-l">历史搜索</div>
<div class="float-r" @click="clearHistory">
<van-icon name="lajitong" style="font-size: 12px;margin-right: 3px" />
清空历史记录
</div>
</div>
<div class="item_search_history">
<van-tag
plain
v-for="(his, i) in wordHistory"
:key="i"
@click="toSearchResult(his)"
>{{his}}</van-tag>
</div>
</div>
</div>
</template>
<script>
import { Search, Tag } from 'vant';
export default {
data() {
return {
keyword: '',
focusStatus: true,
wordHistory: []
};
},
methods: {
enterSearch() {
const keyword = this.keyword;
this.pushHistoryTolocal(keyword);
this.toSearchResult(keyword);
},
toSearchResult(word) {
this.keyword = word.trim();
this.$router.push({
name: 'search-result',
query: { keyword: word.trim() }
});
},
pushHistoryTolocal(keyword) {
const wordHistory = this.wordHistory;
const historyKeyWord = this.getKeyWordHistory();
if (!!keyword.trim() && historyKeyWord.indexOf(keyword) < 0) {
wordHistory.push(keyword);
window.localStorage.setItem('keyword', wordHistory.join('|'));
}
},
getKeyWordHistory() {
const listWord = window.localStorage.getItem('keyword');
return listWord ? listWord.split('|') : [];
},
clearHistory() {
this.$dialog
.confirm({
message: '是否清空历史记录'
})
.then(() => {
window.localStorage.setItem('keyword', '');
this.wordHistory = [];
});
},
disabledSubmit() {
return false;
}
},
activated() {
this.wordHistory = this.getKeyWordHistory();
},
components: {
[Search.name]: Search,
[Tag.name]: Tag
}
};
</script>
<style lang="scss" scoped>
.item_search {
background-color: #fff;
}
.item_search_content {
padding: 15px 10px 0;
}
.item_search_text {
font-size: $font-size-normal;
color: $font-color-gray;
margin-bottom: 20px;
}
.item_search_history > span {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
<template>
<span class="search_tag" @click="OnClick">
<slot></slot>
</span>
</template>
<script>
export default {
name: 'word-tag',
methods: {
OnClick() {
this.$emit('click');
}
}
};
</script>
<style lang="scss" scoped>
.search_tag {
display: inline-block;
font-size: 12px;
background-color: #f4f4f4;
padding: 3px 10px;
border-radius: 11px;
min-width: 20px;
text-align: center;
}
</style>
<template>
<div class="class_tree clearfix">
<ul class="class_tree_nav">
<li
v-for="(item ,index) in list"
:key="item.id"
:class="{active_nav: navActive == index}"
@click="navclick(index)"
>{{item.name}}</li>
</ul>
<div class="class_tree_content">
<div class="class_tree_all">
<img style="width:250px" v-lazy="currentCategory.picUrl">
</div>
<div class="box">
<span>{{currentCategory.desc}}</span>
</div>
<div class="class_tree_items_wrap clearfix">
<div @click="classClick(item.id)" :key="i" v-for="(item, i) in goods">
<div class="class_tree_item_img">
<img :src="item.picUrl" :alt="item.name">
</div>
<div class="class_tree_item_name">{{item.name}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'class-tree',
model: {
prop: 'activeIndex'
},
props: {
activeIndex: {
type: Number,
default: 0
},
list: {
type: Array,
default: () => []
}
},
data() {
const navActive =
this.activeIndex >= this.list.length ? 0 : this.activeIndex;
return {
navActive,
goods: [],
currentCategory: {}
};
},
computed: {},
methods: {
changeList(data) {
this.goods = data.currentSubCategory;
this.currentCategory = data.currentCategory;
console.log(this.goods);
},
allClick() {
this.$emit('all-click');
},
navclick(i) {
this.navActive = i;
this.$emit('nav-click', this.list[i].id);
},
classClick(id) {
this.$emit('class-click', id);
}
}
};
</script>
<style lang="scss" scoped>
@import '../../assets/scss/mixin';
.box {
width: 250px;
height: 20px;
text-align: center;
font-family: PingFangSC-Light, helvetica, 'Heiti SC';
font-size: 13px;
position: absolute;
top: 95px;
}
.box span {
line-height: 20px;
}
.class_tree {
position: relative;
background-color: #fff;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 100%;
box-sizing: border-box;
}
.class_tree_nav {
float: left;
width: 100px;
height: 100%;
background-color: #f8f8f8;
overflow: scroll;
> li {
@include one-border;
height: 40px;
line-height: 40px;
text-align: center;
border-left: 2px solid $bg-color;
}
> li.active_nav {
background-color: #fff;
border-left: 2px solid $red;
color: $red;
}
}
.class_tree_content {
margin-left: 100px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
.class_tree_all {
text-align: right;
padding-right: 10px;
height: 40px;
line-height: 40px;
color: $font-color-gray;
font-size: $font-size-small;
}
.van-icon-arrow {
font-size: $font-size-small;
}
.class_tree_items_wrap {
padding: 10px 20px;
margin-right: -3%;
margin-top: 70px;
text-align: center;
> div {
float: left;
padding-right: 3%;
box-sizing: border-box;
width: 33.333%;
margin-bottom: 20px;
}
img {
max-width: 100%;
}
.class_tree_item_img {
display: inline-block;
max-width: 100%;
width: 70px;
height: 70px;
}
.class_tree_item_name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
<template>
<div class="tab_class">
<div class="tal_class_searchBox">
<van-search placeholder="点击前往搜索"/>
<div class="tal_class_searchMask" @click="$router.push({ name: 'search' })"></div>
</div>
<div class="class_tree clearfix">
<ul class="class_tree_nav">
<li
v-for="(item, index) in categoryList"
:key="index"
:class="{active_nav: currentCategory.id == item.id}"
@click="changeCatalog(item.id)"
>{{item.name}}</li>
</ul>
<div class="class_tree_content">
<div class="class_tree_all">
<img style="width:250px" v-lazy="currentCategory.picUrl">
</div>
<div class="box">
<span>{{currentCategory.desc}}</span>
</div>
<div class="class_tree_items_wrap clearfix">
<div @click="toItemList(item.id)" :key="i" v-for="(item, i) in currentSubCategoryList">
<div class="class_tree_item_img">
<img :src="item.picUrl" :alt="item.name">
</div>
<div class="class_tree_item_name">{{item.name}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { catalogList, catalogCurrent } from '@/api/api';
import { Search } from 'vant';
export default {
data() {
return {
categoryList: [],
currentCategory: {},
currentSubCategoryList: []
};
},
created() {
this.initData();
},
methods: {
initData() {
catalogList().then(res => {
let data = res.data.data;
this.categoryList = data.categoryList;
this.currentCategory = res.data.data.currentCategory;
this.currentSubCategoryList = data.currentSubCategory;
});
},
changeCatalog(id) {
catalogCurrent({ id: id}).then(res => {
let data = res.data.data;
this.currentCategory = data.currentCategory;
this.currentSubCategoryList = data.currentSubCategory;
});
},
toItemList(id) {
this.$router.push({
name: 'list',
query: { keyword: '', itemClass: id }
});
}
},
components: {
[Search.name]: Search
}
};
</script>
<style lang="scss" scoped>
@import '../../assets/scss/mixin';
.tab_class {
overflow: hidden;
background-color: #fff;
}
.height-fix {
padding-bottom: 42px;
}
.tal_class_searchBox {
position: relative;
}
.tal_class_searchMask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.box {
width: 250px;
height: 20px;
text-align: center;
font-family: PingFangSC-Light, helvetica, 'Heiti SC';
font-size: 13px;
position: absolute;
top: 95px;
}
.box span {
line-height: 20px;
}
.class_tree {
position: relative;
background-color: #fff;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 100%;
box-sizing: border-box;
}
.class_tree_nav {
float: left;
width: 100px;
height: 100%;
background-color: #fff;
overflow: scroll;
> li {
@include one-border;
height: 40px;
line-height: 40px;
text-align: center;
border-left: 2px solid $bg-color;
}
> li.active_nav {
background-color: #fff;
border-left: 2px solid $red;
color: $red;
}
}
.class_tree_content {
margin-left: 100px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
.class_tree_all {
text-align: right;
padding-right: 10px;
height: 40px;
line-height: 40px;
color: $font-color-gray;
font-size: $font-size-small;
}
.van-icon-arrow {
font-size: $font-size-small;
}
.class_tree_items_wrap {
padding: 10px 20px;
margin-right: -3%;
margin-top: 70px;
text-align: center;
> div {
float: left;
padding-right: 3%;
box-sizing: border-box;
width: 33.333%;
margin-bottom: 20px;
}
img {
max-width: 100%;
}
.class_tree_item_img {
display: inline-block;
max-width: 100%;
width: 70px;
height: 70px;
}
.class_tree_item_name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
<template>
<div class="tab_class">
<div class="tal_class_searchBox">
<van-search placeholder="点击前往搜索"/>
<div class="tal_class_searchMask" @click="$router.push({ name: 'search' })"></div>
</div>
<class-tree
ref="classTree"
class="height-fix42"
@nav-click="changeCatalog"
@class-click="toItemList"
@all-click="toItemList"
:list="list"
></class-tree>
<is-empty v-if="isEmpty">抱歉,店主还未上架商品</is-empty>
</div>
</template>
<script>
import { catalogList } from '@/api/api';
import getLocationParam from '@/utils/location-param';
import { Search } from 'vant';
import classTree from './tabbar-class-tree';
import IsEmpty from '@/components/is-empty';
import _ from 'lodash';
import { async } from 'q';
function getIndex(arr, keyWord) {
let index = 0;
_.each(arr, (v, k) => {
if (v.id === keyWord) {
index = k;
return false;
}
});
return index;
}
export default {
data() {
return {
list: [],
subCategory: [],
isEmpty: false
};
},
created() {
this.initData();
},
methods: {
initData() {
catalogList().then(res => {
this.list = res.data.data.categoryList;
this.$refs.classTree.changeList(res.data.data);
this.subCategory = res.data.data.currentSubCategory;
if (this.subCategory.length === 0) this.isEmpty = true;
});
},
removeNoChild(data) {
return data.filter(item => item.children && item.children.length);
},
changeCatalog(id) {
catalogList({ id: id}).then(res => {
let index = getIndex(this.list, res.data.data.currentCategory.id);
this.$refs.classTree.changeList(res.data.data);
this.subCategory = res.data.data.currentSubCategory;
if (this.subCategory.length === 0) this.isEmpty = true;
});
},
toItemList(id) {
this.$router.push({
name: 'list',
query: { keyword: '', itemClass: id }
});
}
},
components: {
[Search.name]: Search,
[classTree.name]: classTree,
[IsEmpty.name]: IsEmpty
}
};
</script>
<style scoped>
.tab_class {
overflow: hidden;
background-color: #fff;
}
.height-fix {
padding-bottom: 42px;
}
.tal_class_searchBox {
position: relative;
}
.tal_class_searchMask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
</style>
......@@ -73,7 +73,7 @@ export default {
init(i) {
let status = i || this.activeIndex;
couponMyList({status: status}).then(res => {
this.couponList = res.data.data.data;
this.couponList = res.data.data.list;
});
},
handleTabClick(index) {
......
......@@ -25,7 +25,7 @@ export default {
methods: {
getIssueList() {
issueList().then(res => {
this.issueList = res.data.data.data
this.issueList = res.data.data.list
})
}
},
......
......@@ -92,7 +92,7 @@ export default {
init(i) {
let showType = i || this.activeIndex;
orderList({showType: showType}).then(res => {
this.orderList = res.data.data.data;
this.orderList = res.data.data.list;
});
},
delOrder(i) {
......
<template>
<div>
<van-cell-group>
<van-cell title="我的电子券" isLink>
<router-link to="/user/orderEle/list/0" class="text-desc">全部电子</router-link>
<van-cell title="我的优惠券" isLink>
<router-link to="/user/coupon/list/0" class="text-desc">全部优惠</router-link>
</van-cell>
</van-cell-group>
<van-row class="ecoupon_status">
<van-row class="coupon_status">
<van-col span="8">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/0'})">
<div class="coupon_status_icon" @click="$router.push({path: '/user/coupon/list/0'})">
<van-icon name="coupon" />
</div>
<div>待使用</div>
</van-col>
<van-col span="8">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/1'})">
<div class="coupon_status_icon" @click="$router.push({path: '/user/coupon/list/1'})">
<van-icon name="coupon-used" />
</div>
<div>已使用</div>
</van-col>
<van-col span="8">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/2'})">
<div class="coupon_status_icon" @click="$router.push({path: '/user/coupon/list/2'})">
<van-icon name="coupon-due" />
</div>
<div>过期关闭</div>
......@@ -34,7 +34,7 @@
import { Row, Col } from 'vant';
export default {
name: 'ecoupon-group',
name: 'coupon-group',
components: {
[Row.name]: Row,
[Col.name]: Col
......@@ -45,7 +45,7 @@ export default {
<style scoped lang="scss">
@import '../../assets/scss/mixin';
.ecoupon_status {
.coupon_status {
background-color: #fff;
text-align: center;
padding: 10px 0;
......@@ -67,7 +67,7 @@ export default {
}
}
.ecoupon_status_icon {
.coupon_status_icon {
position: relative;
width: 36px;
height: 36px;
......
......@@ -2,7 +2,7 @@
<div class="tabbar-user">
<user-header :isLogin="isLogin"/>
<order-group/>
<ecoupon-group/>
<coupon-group/>
<user-module/>
<van-button size="large" class="tabbar-user__quit" v-if="isLogin" @click="quit">退出当前账户</van-button>
</div>
......@@ -11,7 +11,7 @@
<script>
import userHeader from './tabbar-user-header';
import orderGroup from './tabbar-user-order';
import ecouponGroup from './tabbar-user-ecoupon';
import couponGroup from './tabbar-user-coupon';
import userModule from './tabbar-user-module';
import { removeLocalStorage } from '@/utils/local-storage';
......@@ -42,7 +42,7 @@ export default {
components: {
[userHeader.name]: userHeader,
[orderGroup.name]: orderGroup,
[ecouponGroup.name]: ecouponGroup,
[couponGroup.name]: couponGroup,
[userModule.name]: userModule
}
};
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment