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