Skip to content

S
sell
Commit efab2145 authored by liumiss's avatar liumiss
Browse files
Options

店铺首页

parent 3247f81c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 668 additions and 369 deletions
src/common/utils/mUtils.js
View file @ efab2145
...@@ -11,6 +11,14 @@ export function MAP(key = 'c066bb79c8747e4d84aa9e86276f8174') { ...@@ -11,6 +11,14 @@ export function MAP(key = 'c066bb79c8747e4d84aa9e86276f8174') {
}) })
} }
export const sessionstorage = {
save(key, value) {
sessionStorage.setItem(key, JSON.stringify(value));
},
fetch(key) {
return JSON.parse(sessionStorage.getItem(key)) || [];
},
};
export const localstorage = { export const localstorage = {
save(key, value) { save(key, value) {
......
src/components/cube-buy-cart.vue
View file @ efab2145
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
<section class="cart_module"> <section class="cart_module">
<transition name="showReduce"> <transition name="showReduce">
<span <span
@click="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)" @click="removeOutCart"
v-if="foodNum" v-if="foodNum"
> >
<i class="cubeic-remove add_icon"></i> <i class="cubeic-remove icon"></i>
</span> </span>
</transition> </transition>
<transition name="fade"> <transition name="fade">
<span class="cart_num" v-if="foodNum">{{foodNum}}</span> <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
</transition> </transition>
<i class="cubeic-add add_icon" @click="addToCart()"></i> <i class="cubeic-add icon" @click="addToCart"></i>
<!-- <svg <!-- <svg
class="add_icon" class="add_icon"
@click="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)" @click="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)"
...@@ -41,19 +41,19 @@ export default { ...@@ -41,19 +41,19 @@ export default {
//shopCart变化的时候重新计算当前商品的数量 //shopCart变化的时候重新计算当前商品的数量
foodNum: function() { foodNum: function() {
let category_id = this.categoryId; let category_id = this.categoryId;
let item_id = this.foods.item_id; let item_id = this.food.id;
if ( if (
this.shopCart && this.shopCart &&
this.shopCart[category_id] && this.shopCart[category_id] &&
this.shopCart[category_id][item_id] this.shopCart[category_id][item_id]
) { ) {
let num = 0; // let num = 0;
Object.values(this.shopCart[category_id][item_id]).forEach( // Object.values(this.shopCart[category_id][item_id]).forEach(
(item, index) => { // (item, index) => {
num += item.num; // num += item.num;
} // }
); // );
return num; return this.shopCart[category_id][item_id].num;
} else { } else {
return 0; return 0;
} }
...@@ -63,43 +63,33 @@ export default { ...@@ -63,43 +63,33 @@ export default {
methods: { methods: {
...mapMutations(["ADD_CART", "REDUCE_CART"]), ...mapMutations(["ADD_CART", "REDUCE_CART"]),
//移出购物车 //移出购物车
removeOutCart( removeOutCart() {
category_id,
item_id,
food_id,
name,
price,
specs,
packing_fee,
sku_id,
stock
) {
if (this.foodNum > 0) { if (this.foodNum > 0) {
this.REDUCE_CART({ const food = this.food;
const addInfo = {
shopid: this.shopId, shopid: this.shopId,
category_id, category_id: this.categoryId,
item_id, food_id: food.id,
food_id, name: food.name,
name, favorable_price: food.favorable_price,
price, price: food.price
specs, };
packing_fee, this.$store.commit("REDUCE_CART", addInfo);
sku_id,
stock
});
} }
}, },
//加入购物车，计算按钮位置。 //加入购物车，计算按钮位置。
addToCart() { addToCart() {
const food = this.food;
const addInfo = { const addInfo = {
shopid: this.shopId, shopid: this.shopId,
category_id: this.categoryId, category_id: this.categoryId,
food_id: food.id, food_id: food.id,
name: food.name, name: food.name,
favorable_price:food.favorable_price, favorable_price: food.favorable_price,
price:food.price price: food.price
}; };
this.$store.commit('ADD_CART',addInfo); this.$store.commit("ADD_CART", addInfo);
let elLeft = event.target.getBoundingClientRect().left; let elLeft = event.target.getBoundingClientRect().left;
let elBottom = event.target.getBoundingClientRect().bottom; let elBottom = event.target.getBoundingClientRect().bottom;
this.showMoveDot.push(true); this.showMoveDot.push(true);
...@@ -121,45 +111,21 @@ export default { ...@@ -121,45 +111,21 @@ export default {
@import '~common/stylus/mixin.styl'; @import '~common/stylus/mixin.styl';
.cart_module { .cart_module {
.add_icon {
position: relative;
z-index: 999;
}
.cart_button { .cart_button {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.cubeic-add { .icon {
scw(20px, #3190e8); scw($fontsize-large-xx, #3190e8);
}
.specs_reduce_icon {
fill: #999;
} }
.cart_num { .cart_num {
// @include sc(.65rem, #666); display: inline-block;
min-width: 1rem; min-width: 20px;
text-align: center; text-align: center;
font-family: Helvetica Neue, Tahoma; font-family: Helvetica Neue, Tahoma;
} scw($fontsize-medium, #323233);
.choose_specification {
.choose_icon_container {
display: flex;
align-items: center;
.show_chooselist {
display: block;
// @include sc(.55rem, #fff);
padding: 0.1rem 0.2rem;
background-color: $blue;
border-radius: 0.2rem;
border: 1px solid $blue;
}
}
} }
} }
......
src/components/footer.vue
View file @ efab2145
<template> <template>
<div class="container"> <div class="cube-tab-bar">
<cube-tab-bar v-model="selectedLabelDefault" @click="clickHandler"> <cube-tab-bar v-model="selectedLabelDefault" @click="clickHandler">
<cube-tab v-for="(item, index) in tabs" :label="item.label" :key="index"> <cube-tab v-for="(item, index) in tabs" :label="item.label" :key="index">
<i slot="icon" :class="item.icon"></i> <i slot="icon" :class="item.icon"></i>
......
src/store/mutations.js
View file @ efab2145
import {sessionstorage} from '../common/utils/mUtils'
export default { export default {
// 记录当前地理位置 // 记录当前地理位置
RECORD_ADDRESS(state, info) { RECORD_ADDRESS(state, info) {
...@@ -47,28 +49,51 @@ export default { ...@@ -47,28 +49,51 @@ export default {
let cart = state.cartList; let cart = state.cartList;
let shop = cart[shopid] = (cart[shopid] || {}); let shop = cart[shopid] = (cart[shopid] || {});
let category = shop[category_id] = (shop[category_id] || {}); let category = shop[category_id] = (shop[category_id] || {});
let item = category[item_id] = (category[item_id] || {}); // let item = category[item_id] = (category[item_id] || {});
if (item[food_id]) {
item[food_id]['num']++; if (category[food_id]) {
category[food_id]['num']++;
} else { } else {
item[food_id] = { category[food_id] = {
"num": 1, "num": 1,
"id": food_id, "id": food_id,
"name": name, "name": name,
"price": price, "price": price,
"specs": specs, /* "specs": specs,
"packing_fee": packing_fee, "packing_fee": packing_fee,
"sku_id": sku_id, "sku_id": sku_id,
"stock": stock "stock": stock */
}; };
} }
state.cartList = { ...cart }; state.cartList = { ...cart };
//存入localStorage //存入localStorage
setStore('buyCart', state.cartList); sessionstorage.save('buyCart', state.cartList);
}, },
// 移出购物车 // 移出购物车
REDUCE_CART() { REDUCE_CART(state, {
shopid,
} category_id,
item_id,
food_id,
name,
price,
specs,
}) {
let cart = state.cartList;
let shop = (cart[shopid] || {});
let category = (shop[category_id] || {});
// let item = (category[item_id] || {});
if (category && category[food_id]) {
if (category[food_id]['num'] > 0) {
category[food_id]['num']--;
state.cartList = {...cart};
//存入localStorage
sessionstorage.save('buyCart', state.cartList);
} else {
//商品数量为0，则清空当前商品的信息
category[food_id] = null;
}
}
},
} }
\ No newline at end of file
src/views/home/index.vue
View file @ efab2145
<template> <template>
<cube-page type="recycle-list" title="RecycleList"> <div class="scroll-list-wrap">
<div slot="content" class="scroll-list-wrap"> <cube-loading v-if="loading" :size="40"></cube-loading>
<cube-loading v-if="loading" :size="40"></cube-loading> <cube-sticky v-else :pos="scrollY">
<cube-sticky v-else :pos="scrollY"> <cube-scroll
<cube-scroll ref="scroll"
ref="scroll" :scroll-events="scrollEvents"
:scroll-events="scrollEvents" @scroll="scrollHandler"
@scroll="scrollHandler" :data="msg"
:data="msg" :options="options"
:options="options" @pulling-down="onPullingDown"
@pulling-down="onPullingDown" @pulling-up="onPullingUp"
@pulling-up="onPullingUp" >
> <cube-loading v-if="loading" :size="40"></cube-loading>
<cube-loading v-if="loading" :size="40"></cube-loading>
<!-- 收货地址定位 --> <!-- 收货地址定位 -->
<div class="location" @click="onRouterLink('sellAddress')"> <div class="location" @click="onRouterLink('sellAddress')">
<i class="cubeic-location text-primary text-extra-large"></i> <i class="cubeic-location text-primary text-extra-large"></i>
<span <span
class="text-medium" class="text-medium"
>{{currentAddress.address_detail?currentAddress.address_detail:'定位中...'}}</span> >{{currentAddress.address_detail?currentAddress.address_detail:'定位中...'}}</span>
<div class="location-action"> <div class="location-action">
<i class="cubeic-select text-extra-small"></i> <i class="cubeic-select text-extra-small"></i>
</div>
<div id="amap"></div>
</div> </div>
<div id="amap"></div>
</div>
<!-- 搜索框 --> <!-- 搜索框 -->
<cube-sticky-ele ele-key="11"> <cube-sticky-ele ele-key="11">
<ul class="sticky-header"> <ul class="sticky-header">
<van-search placeholder="请输入搜索关键词" shape="round"></van-search> <van-search placeholder="请输入搜索关键词" shape="round"></van-search>
</ul> </ul>
</cube-sticky-ele> </cube-sticky-ele>
<!-- 轮播图 --> <!-- 轮播图 -->
<section class="slide-container"> <section class="slide-container">
<cube-slide ref="slide" :data="slideData" :interval="3000"> <cube-slide ref="slide" :data="slideData" :interval="3000">
<cube-slide-item <cube-slide-item
v-for="(item, index) in slideData" v-for="(item, index) in slideData"
:key="index" :key="index"
@click.native="onSlideEvent(item, index)" @click.native="onSlideEvent(item, index)"
> >
<a :href="item.url"> <a :href="item.url">
<van-image width="100%" :src="item.image"></van-image> <van-image width="100%" :src="item.image"></van-image>
</a> </a>
</cube-slide-item> </cube-slide-item>
</cube-slide> </cube-slide>
</section> </section>
<section> <section>
<van-grid :border="false"> <van-grid :border="false">
<van-grid-item v-for="(grid,index) in gridsData" :key="index" :text="grid.name"> <van-grid-item v-for="(grid,index) in gridsData" :key="index" :text="grid.name">
<div slot="icon"> <div slot="icon">
<van-image width="36" height="36" :src="grid.img"></van-image> <van-image width="36" height="36" :src="grid.img"></van-image>
</div> </div>
</van-grid-item> </van-grid-item>
</van-grid> </van-grid>
</section> </section>
<!-- 附近商家 --> <!-- 附近商家 -->
<section class="section"> <section class="section">
<div class="section-hd">附件商家</div> <div class="section-hd">附件商家</div>
<ul class="cards"> <ul class="cards">
<shop-list :options="shopsData"></shop-list> <shop-list :options="shopsData"></shop-list>
</ul> </ul>
</section> </section>
</cube-scroll> </cube-scroll>
</cube-sticky> </cube-sticky>
</div>
<footGuide default="home"></footGuide> <footGuide default="home"></footGuide>
</cube-page> </div>
</template> </template>
<script> <script>
...@@ -81,7 +79,7 @@ import { mapGeolocation, MAP } from "../../common/utils/mUtils"; ...@@ -81,7 +79,7 @@ import { mapGeolocation, MAP } from "../../common/utils/mUtils";
import { mapState } from "vuex"; import { mapState } from "vuex";
var map = {}; var map = {};
var b = { var b = {
shop_id: '8e3a39b19ec215d4c9c424ac1608751c', shop_id: "8e3a39b19ec215d4c9c424ac1608751c",
name: "清吧", name: "清吧",
address: "重庆市,市辖区,涪陵区", address: "重庆市,市辖区,涪陵区",
icon: "files/shop/77/image/a4558aa3-ccb2-4f2c-b5db-1461a25c12a9.jpg", icon: "files/shop/77/image/a4558aa3-ccb2-4f2c-b5db-1461a25c12a9.jpg",
...@@ -289,16 +287,8 @@ export default { ...@@ -289,16 +287,8 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.cube-page {
background-color: #fff;
}
.scroll-list-wrap { .scroll-list-wrap {
position: fixed; background-color: #fff;
top: 0;
bottom: 0;
left: 0;
right: 0;
} }
.location { .location {
......
src/views/shopItem/children/evaluate.vue 0 → 100644
View file @ efab2145
<template>
<div style="height:600px;background:pink">
</div>
</template>
\ No newline at end of file
src/views/shopItem/children/food-detail.vue 0 → 100644
View file @ efab2145
<template>
<div class="scroll-list-wrap">
<div @click="onClosePopup">132</div>
</div>
</template>
<script>
export default {
methods: {
onClosePopup() {
this.$emit("close");
}
}
};
</script>
<style lang="stylus" scoped>
.scroll-list-wrap {
z-index: 10;
}
</style>
\ No newline at end of file
src/views/shopItem/children/shop.vue
View file @ efab2145
This diff is collapsed.
src/views/shopItem/children/shopInfo.vue 0 → 100644
View file @ efab2145
<template>
<div>
111111111111
</div>
</template>
\ No newline at end of file
src/views/shopItem/index.vue
View file @ efab2145
<template> <template>
<cube-page type="scroll-nav-side container" title="ScrollNav"> <div class="scroll-list-wrap">
<div slot="content" class="scroll-list-wrap"> <cube-sticky :pos="scrollY">
<cube-sticky :pos="scrollY"> <cube-scroll ref="scroll" :scroll-events="scrollEvents" @scroll="scrollHandler">
<cube-scroll :scroll-events="scrollEvents" @scroll="scrollHandler"> <section class="page-header">
<section class="page-header"> <van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image>
<van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image> <div class="prepend-content">
<div class="prepend-content"> <h1>{{shopInfo.name}}</h1>
<h1>{{shopInfo.name}}</h1> <p class="text-light-grey text-extra-small">评价4.2 月售 等描述</p>
<p class="text-light-grey text-extra-small">评价4.2 月售 等描述</p> <van-tag plain type="danger">满减</van-tag>
<van-tag plain type="danger">满减</van-tag> </div>
</div> </section>
</section>
<van-tabs animated> <cube-sticky-ele>
<van-tab v-for="(tab,index) in tabs" :key="index" :title="tab.name"> <cube-tab-bar
<keep-alive> v-model="currentTab"
<component :is="tab.component"></component> show-slider
</keep-alive> inline
</van-tab> @change="changeHandler"
</van-tabs> class="text-medium"
</cube-scroll> >
</cube-sticky> <cube-tab v-for="item in tabs" :label="item.name" :key="item.name">{{item.name}}</cube-tab>
</div> </cube-tab-bar>
</cube-page> </cube-sticky-ele>
<cube-tab-panels v-model="currentTab">
<cube-tab-panel v-for="item in tabs" :label="item.name" :key="item.name">
<component :is="item.is"></component>
</cube-tab-panel>
</cube-tab-panels>
</cube-scroll>
</cube-sticky>
</div>
</template> </template>
<script type="text/ecmascript-6">
<script>
import { allCategoryAndGoods, getShopInfo } from "../../common/serve"; import { allCategoryAndGoods, getShopInfo } from "../../common/serve";
import shopTab from "./children/shop"; import shopTab from "./children/shop";
import evaluate from "./children/evaluate";
import shopInfo from "./children/shopInfo";
import goodsData from "../../data"; import goodsData from "../../data";
const goods = goodsData.goods; const goods = goodsData.goods;
export default { export default {
components: { components: {
shopTab shopTab,
evaluate,
shopInfo
}, },
data() { data() {
return { return {
scrollY: 0, scrollY: 0,
scrollEvents: ["scroll"], scrollEvents: ["scroll"],
checkTop: false,
data: goods, data: goods,
current: 0, //当前导航 active 项的 key 值
shopId: 0, shopId: 0,
shopInfo: {}, shopInfo: {},
currentTab: "点餐", //当前导航 active 项的 key 值
currentTabIndex: 1,
tabs: [ tabs: [
{ name: "点餐", component: 'shopTab' }, { name: "点餐", is: "shopTab" },
{ name: "评价", component: 'shopTab' }, { name: "评价", is: "evaluate" },
{ name: "商家", component: 'shopTab' } { name: "商家", is: "shopInfo" }
] ],
labels: ["点餐", "评价", "商家"]
// components: ["shopTab", "evaluate", "shopInfo"]
}; };
}, },
created() { created() {
this.shopId = this.$route.params.id; this.shopId = this.$route.params.id;
this.initData(); this.initData();
}, },
computed: {
component() {
return "shopTab";
}
},
methods: { methods: {
scrollHandler() {}, scrollHandler({ y }) {
this.scrollY = -y;
},
changeHandler(label) {
this.currentTab = label;
console.log("changed to:", label);
},
async initData() { async initData() {
let res = await allCategoryAndGoods(this.shopId); let res = await allCategoryAndGoods(this.shopId);
if (res.code == 0) { if (res.code == 0) {
...@@ -68,9 +98,7 @@ export default { ...@@ -68,9 +98,7 @@ export default {
this.shopInfo = msg.data; this.shopInfo = msg.data;
} }
}, },
changeHandler(label) {
console.log("changed to:", label);
},
stickyChangeHandler(current) { stickyChangeHandler(current) {
console.log("sticky-change", current); console.log("sticky-change", current);
}, },
...@@ -89,57 +117,23 @@ export default { ...@@ -89,57 +117,23 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@import '~common/stylus/variable.styl'; .page-header {
@import '~common/stylus/mixin.styl'; text-align: center;
font-size: 20px;
.view-wrapper { .prepend-content {
background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg') no-repeat; // ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg) no-repeat; background-color: #fff;
background-size: cover; padding: 20px 0 10px;
}
.container.scroll-nav-side {
.cube-scroll-nav-bar {
width: 80px;
background-color: transparent;
.cube-scroll-wrapper {
width: 100%;
}
span { p {
font-size: $fontsize-small; padding: 10px;
} }
} }
.cube-scroll-nav-panel-title {
scw($fontsize-small, #6e6e6e, 600);
}
} }
.van-tabs__content{
height:600px;}
.scroll-nav-side {
background-color: #fff;
.view-wrapper { .cube-tab-bar {
position: fixed; background-color: #fff;
top: 0; .cube-tab-bar-slider{
left: 0;
bottom: 0;
width: 100%;
}
.page-header {
text-align: center;
font-size: 20px;
.prepend-content {
background-color: #fff;
padding: 20px 0 10px;
p {
padding: 10px;
}
}
} }
} }
</style> </style>
\ No newline at end of file
Markdown is supported
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