Skip to content

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

店铺首页

parent 3247f81c
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
<template>
<cube-page type="scroll-nav-side container" title="ScrollNav">
<div slot="content">
<div class="view-wrapper">
<cube-scroll-nav
:side="true"
:data="data"
:current="current"
@change="changeHandler"
@sticky-change="stickyChangeHandler"
<div class="container" style="height:600px;">
<cube-scroll-nav
:side="true"
:data="data"
:current="current"
@change="changeHandler"
@sticky-change="stickyChangeHandler"
>
<cube-scroll-nav-panel
v-for="item in data"
:key="item.category_name"
:label="item.category_name"
:title="item.category_name"
>
<div class="content">
<section class="card" v-for="food in item.goods_list" :key="food.id">
<van-card desc="月售360 好评率88%" :title="food.name">
<div slot="thumb" @click="onShowDetail('detailPopup')">
<van-image width="100%" height="90" fit="contain" :src="$globalUrlFile+food.icon">
<template v-slot:error>
<!-- <img width="100%" src="../../assets/images/icons/list/null.png" alt /> -->
</template>
</van-image>
</div>
<div slot="price" class="card__bottom">
<section>
<div class="card__origin-price">
<span>¥</span>
<span>{{food.price}}</span>
</div>
<div v-if="food.favorable_price" class="card__price">
<span>¥</span>
<span>{{food.favorable_price}}</span>
</div>
</section>
<!-- 购物车添加、移出按钮 -->
<cube-buy-cart
ref="buyCart"
:shopId="shopId"
:categoryId="item.category_id"
:food="food"
@moveInCart="listenInCart"
@showChooseList="showChooseList"
@showReduceTip="showReduceTip"
@showMoveDot="showMoveDotFun"
></cube-buy-cart>
</div>
</van-card>
</section>
</div>
</cube-scroll-nav-panel>
</cube-scroll-nav>
<!-- 底部功能条 -->
<section class="buy_cart_container">
<section @click="toggleCartList" class="cart_icon_num">
<div
class="cart_icon_container"
:class="{cart_icon_activity: totalPrice > 0, move_in_cart:receiveInCart}"
ref="cartContainer"
>
<div class="prepend-header" slot="prepend">
<van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image>
<section 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>
</section>
<i class="cubeic-alert cart_icon"></i>
</div>
<div class="cart_num">
<div class="price">¥ {{totalPrice}}</div>
<div>另需配送费¥{{deliveryFee}}元</div>
</div>
</section>
<section class="gotopay" :class="{gotopay_acitvity: minimumOrderAmount <= 0}">
<span class="gotopay_button_style" v-if="minimumOrderAmount > 0">还差¥{{minimumOrderAmount}}起送</span>
<router-link :to="{path:'/', query:{shopId}}" class="gotopay_button_style" v-else>去结算</router-link>
</section>
</section>
<!-- 切换已选购商品 -->
<transition name="toggle-cart">
<section class="cart_food_list" v-show="showCartList&&cartFoodList.length">
<header>
<h4>购物车</h4>
<div @click="clearCart">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove" />
</svg>
<span class="clear_cart">清空</span>
</div>
<van-tabs v-model="active" animated>
<van-tab v-for="(tab,index) in tabs" :key="index" :title="tab">内容 {{ tab }}</van-tab>
</van-tabs>
<cube-scroll-nav-panel
v-for="item in data"
:key="item.category_name"
:label="item.category_name"
:title="item.category_name"
>
<div class="content">
<section class="card" v-for="food in item.goods_list" :key="food.id">
<van-card desc="月售360 好评率88%" :title="food.name" :thumb="$globalUrlFile+food.icon">
<!-- <div slot="tags">
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
</div>-->
<div slot="price" class="card__bottom">
<section>
<div class="card__origin-price">
<span>¥</span>
<span>{{food.price}}</span>
</div>
<div v-if="food.favorable_price" class="card__price">
<span>¥</span>
<span>{{food.favorable_price}}</span>
</div>
</section>
<cube-buy-cart
:shopId="shopId"
:categoryId="item.category_id"
:foods="food"
@moveInCart="listenInCart"
@showChooseList="showChooseList"
@showReduceTip="showReduceTip"
@showMoveDot="showMoveDotFun"
></cube-buy-cart>
</div>
</van-card>
</header>
<section class="cart_food_details" id="cartFood">
<ul>
<li v-for="(item, index) in cartFoodList" :key="index" class="cart_food_li">
<div class="cart_list_num">
<p class="ellipsis">{{item.name}}</p>
<p class="ellipsis">{{item.specs}}</p>
</div>
<div class="cart_list_price">
<span>¥</span>
<span>{{item.price}}</span>
</div>
<section class="cart_list_control">
<span
@click="removeOutCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)"
>
<i class="cubeic-alert"></i>
</span>
<span class="cart_num">{{item.num}}</span>
<i class="cubeic-cart"></i>
</section>
</div>
</cube-scroll-nav-panel>
</cube-scroll-nav>
</div>
</div>
</cube-page>
</li>
</ul>
</section>
</section>
</transition>
<cube-popup type="my-popup" :position="position" :mask-closable="true" ref="toggleCart">My Popup Content 4</cube-popup>
<!-- 商品详情 -->
<cube-popup type="my-popup" :mask="true" ref="detailPopup">
<food-detail @close="closeDetailPopup"></food-detail>
</cube-popup>
</div>
</template>
<script type="text/ecmascript-6">
import { allCategoryAndGoods, getShopInfo } from "../../../common/serve";
import CubePage from "../../../components/cube-page.vue";
import { allCategoryAndGoods } from "../../../common/serve";
import goodsData from "../../../data";
import foodDetail from "../children/food-detail";
import { mapState } from "vuex";
const goods = goodsData.goods;
export default {
components: {
CubePage
},
data() {
return {
data: goods,
current: 0, //当前导航 active 项的 key 值
shopId: this.$route.params.id,
shopInfo: {},
tabs: ["点餐", "评价", "商家"]
position:'bottom',
showMoveDot: [], //控制下落的小圆点显示隐藏
showCartList: false, //显示购物车列表
totalPrice: 0, //总共价格
receiveInCart: false, //购物车组件下落的圆点是否到达目标位置
menuList: [], //食品列表
cartFoodList: [], //购物车商品列表
};
},
computed: {
...mapState(["cartList"]),
//购物车中总共商品的数量
totalNum: function() {
let num = 0;
this.cartFoodList.forEach(item => {
num += item.num;
});
return num;
},
//配送费
deliveryFee: function() {
// if (this.shopDetailData) {
// return this.shopDetailData.float_delivery_fee;
// } else {
// return null;
// }
return 5;
},
//还差多少元起送，为负数时显示去结算按钮
minimumOrderAmount: function() {
if (this.shopDetailData) {
return this.shopDetailData.float_minimum_order_amount - this.totalPrice;
} else {
return null;
}
},
//当前商店购物信息
shopCart: function() {
return { ...this.cartList[this.shopId] };
}
},
components: { foodDetail },
created() {
this.initData();
},
mounted() {
this.initCategoryNum();
this.$refs.toggleCart.show()
},
methods: {
async initData() {
let res = await allCategoryAndGoods(this.shopId);
......@@ -96,10 +192,12 @@ export default {
this.data = res.data;
this.current = res.data[0].category_name;
}
let msg = await getShopInfo(this.shopId);
if (msg.code == 0) {
this.shopInfo = msg.data;
}
},
onShowDetail(ref) {
this.$refs[ref].show();
},
closeDetailPopup() {
this.$refs.detailPopup.hide();
},
changeHandler(label) {
console.log("changed to:", label);
......@@ -109,14 +207,124 @@ export default {
},
//显示下落圆球
showMoveDotFun(showMoveDot, elLeft, elBottom) {
alert(2);
this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
this.elLeft = elLeft;
this.elBottom = elBottom;
},
//控制购物列表是否显示
toggleCartList() {
this.cartFoodList.length
? (this.showCartList = !this.showCartList)
: true;
this.showCartList?this.$refs.toggleCart.show():this.$refs.toggleCart.hide();
},
//清除购物车
clearCart() {
this.toggleCartList();
this.CLEAR_CART(this.shopId);
},
//加入购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
addToCart(category_id, item_id, food_id, name, price, specs){
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs});
},
//移出购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
removeOutCart(category_id, item_id, food_id, name, price, specs){
this.REDUCE_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs});
},
/**
* 初始化和shopCart变化时，重新获取购物车改变过的数据，赋值 categoryNum，totalPrice，cartFoodList，整个数据流是自上而下的形式，所有的购物车数据都交给vuex统一管理，包括购物车组件中自身的商品数量，使整个数据流更加清晰
*/
initCategoryNum() {
let newArr = [];
let cartFoodNum = 0;
this.totalPrice = 0;
this.cartFoodList = [];
this.menuList.forEach((item, index) => {
if (this.shopCart && this.shopCart[item.foods[0].category_id]) {
let num = 0;
Object.keys(this.shopCart[item.foods[0].category_id]).forEach(
itemid => {
Object.keys(
this.shopCart[item.foods[0].category_id][itemid]
).forEach(foodid => {
let foodItem = this.shopCart[item.foods[0].category_id][itemid][
foodid
];
num += foodItem.num;
if (item.type == 1) {
this.totalPrice += foodItem.num * foodItem.price;
if (foodItem.num > 0) {
this.cartFoodList[cartFoodNum] = {};
this.cartFoodList[cartFoodNum].category_id =
item.foods[0].category_id;
this.cartFoodList[cartFoodNum].item_id = itemid;
this.cartFoodList[cartFoodNum].food_id = foodid;
this.cartFoodList[cartFoodNum].num = foodItem.num;
this.cartFoodList[cartFoodNum].price = foodItem.price;
this.cartFoodList[cartFoodNum].name = foodItem.name;
this.cartFoodList[cartFoodNum].specs = foodItem.specs;
cartFoodNum++;
}
}
});
}
);
newArr[index] = num;
} else {
newArr[index] = 0;
}
});
this.totalPrice = this.totalPrice.toFixed(2);
this.categoryNum = [...newArr];
},
listenInCart() {},
showChooseList() {},
showReduceTip() {},
showMoveDotFun() {}
},
watch: {
//showLoading变化时说明组件已经获取初始化数据，在下一帧nextTick进行后续操作
/* showLoading: function(value) {
if (!value) {
this.$nextTick(() => {
this.getFoodListHeight();
this.initCategoryNum();
});
}
},
shopCart: function(value) {
this.initCategoryNum();
}, */
//购物车列表发生变化，没有商铺时，隐藏
cartFoodList: function(value) {
if (!value.length) {
this.showCartList = false;
}
}
//商品、评论切换状态
/* changeShowType: function(value) {
if (value === "rating") {
this.$nextTick(() => {
this.ratingScroll = new BScroll("#ratingContainer", {
probeType: 3,
deceleration: 0.003,
bounce: false,
swipeTime: 2000,
click: true
});
this.ratingScroll.on("scroll", pos => {
if (
Math.abs(Math.round(pos.y)) >=
Math.abs(Math.round(this.ratingScroll.maxScrollY))
) {
this.loaderMoreRating();
this.ratingScroll.refresh();
}
});
});
}
} */
}
};
</script>
......@@ -130,13 +338,17 @@ export default {
background-size: cover;
}
.container.scroll-nav-side {
.container {
.cube-scroll-nav-bar {
width: 80px;
background-color: transparent;
.cube-scroll-wrapper {
width: 100%;
.cube-scroll-nav-bar-item_active {
background-color: #fff;
}
}
span {
......@@ -145,35 +357,13 @@ export default {
}
.cube-scroll-nav-panel-title {
padding: 15px 0;
line-height: 24px;
background-color: #fff;
scw($fontsize-small, #6e6e6e, 600);
}
}
.card__bottom {
width: 100%;
flex(space-between);
.card__price {
display: inline-block;
font-size: $fontsize-medium;
color: #878588;
text-decoration: line-through;
}
.card__origin-price {
display: inline-block;
margin-right: 8px;
&>span:nth-of-type(1) {
scw($fontsize-medium, #ff5f4b, 600);
}
&>span:nth-of-type(2) {
scw($fontsize-large, #ff5f4b, 600);
}
}
}
.van-card {
background-color: #fff;
......@@ -189,67 +379,162 @@ export default {
&__title {
font-weight: 600;
line-height: 24px;
font-size: $fontsize-small;
}
&__desc {
font-size: $fontsize-small-s;
}
}
.scroll-nav-side {
background-color: #fff;
.view-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
.card__bottom {
width: 100%;
}
flex(space-between);
.prepend-header {
text-align: center;
font-size: 20px;
.card__price {
display: inline-block;
font-size: $fontsize-medium;
color: #878588;
text-decoration: line-through;
}
.card__origin-price {
display: inline-block;
margin-right: 8px;
.prepend-content {
background-color: #fff;
padding: 20px 0 10px;
&>span:nth-of-type(1) {
scw($fontsize-medium, #ff5f4b, 600);
}
p {
padding: 10px;
&>span:nth-of-type(2) {
scw($fontsize-large, #ff5f4b, 600);
}
}
}
}
.cube-scroll-nav-main {
background-color: #efeff4;
}
.buy_cart_container {
position();
top: 68%;
height: 50px;
background-color: #3d3d3f;
z-index: 99;
wh(100%, 50px);
flex();
.cart_icon_num {
width: 74%;
.cart_icon_container {
position: absolute;
top: -20px;
wh(60px, 60px);
font-size: 60px;
}
.cube-sticky-fixed {
background-color: #efeff4;
}
.cart_num {
padding-left: 60px;
.cube-scroll-nav-bar-item {
padding: 15px;
}
.price {
scw(18px, #fff);
}
.cube-scroll-nav-bar-item_active {
background-color: #fff;
scw(12px, #7d7e80, 600);
}
}
.cube-scroll-nav-panels {
background-color: #fff;
}
.gotopay {
text-align: center;
background-color: #535356;
wh(100px, 100%);
flex();
.cube-scroll-nav-panel {
}
&_button_style {
scw(14px, #fff, 600);
}
.cube-scroll-nav-panel-title {
padding: 15px;
font-size: 16px;
background-color: #fff;
&_acitvity {
background-color: #4cd964;
}
}
}
.cart_food_list{
position: fixed;
width: 100%;
padding-bottom: 2rem;
z-index: 12;
bottom: 0;
left: 0;
background-color: #fff;
header{
// @include fj;
align-items: center;
padding: .3rem .6rem;
background-color: #eceff1;
svg{
// @include wh(.6rem,.6rem);
vertical-align: middle;
}
h4{
scw(12px, #666);
}
.clear_cart{
scw(12px, #666);
}
}
.cart_food_details{
background-color: #fff;
max-height: 20rem;
overflow-y: auto;
.cart_food_li{
// @include fj;
padding: .6rem .5rem;
.cart_list_num{
width: 55%;
p:nth-of-type(1){
sc(10px, #666);
font-weight: bold;
}
p:nth-of-type(2){
sc(10px, #666);
}
}
.cart_list_price{
font-size: 0;
span:nth-of-type(1){
sc(10px, #f60);
font-family: Helvetica Neue,Tahoma;
}
span:nth-of-type(2){
sc(10px, #f60);
font-family: Helvetica Neue,Tahoma;
font-weight: bold;
}
}
.cart_list_control{
display: flex;
align-items: center;
span{
display: flex;
align-items: center;
justify-content: center;
}
svg{
wh(20px, 20px);
fill: #3190e8;
}
.specs_reduce_icon{
fill: #999;
}
.cart_num{
scw(12px, #666);
min-width: 1rem;
text-align: center;
font-family: Helvetica Neue,Tahoma;
}
}
}
}
}
</style>
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