Skip to content

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

店铺首页

parent 3f3d17fe
Show whitespace changes
Inline Side-by-side
Showing with 1016 additions and 160 deletions
src/common/serve.js
View file @ 3247f81c
......@@ -30,6 +30,12 @@ export const getReceivingAddress = () => request('/user/address', {}, 'GET');
// 删除收货地址
export const deleteReceivingAddress = (address_id) => request('/user/address/delete', { address_id });
// 附近商家
export const getNearbyShop = (lat,lng) => request('/scope/search', { lat,lng }, 'get');
// 获取店铺信息
export const getShopInfo = (shop_id) => request('shop', { shop_id }, 'get');
// 获取一个商家的菜品
export const allCategoryAndGoods = (shop_id) => request('/shop/goods/shop', { shop_id}, 'get');
src/common/stylus/index.styl
View file @ 3247f81c
......@@ -18,19 +18,19 @@
}
.text-extra-small{
font-size: $font-size-12
font-size: $fontsize-small
}
.text-base{
font-size: $font-size-14
font-size: $fontsize-medium
}
.text-medium{
font-size: $font-size-16
font-size: $fontsize-large
}
.text-large{
font-size: $font-size-18
font-size: $fontsize-large-x
}
.text-extra-large{
font-size: $font-size-20
font-size: $fontsize-large-xx
}
......@@ -47,7 +47,17 @@
// transform: scaleY(0.5);
}
.no-data{
text-align: center;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color:#999;
}
.word-one{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.scroll-list-wrap{
......
src/common/stylus/mixin.styl
View file @ 3247f81c
......@@ -7,3 +7,29 @@ position($pos=fixed){
left:0;
right:0;
}
word-line($clamp = 2){
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $clamp;
overflow: hidden;
}
flex($h=center,$v= center){
display: flex;
justify-content: $h;
align-items: $v
}
wh($width, $height){
width: $width;
height: $height;
}
scw($size,$c,$w=500){
font-size: $size;
color: $c;
font-weight: $w !important;
}
\ No newline at end of file
src/common/stylus/variable.styl
View file @ 3247f81c
......@@ -13,8 +13,18 @@ $margin-top-10 = 10px
$margin-top-20 = 20px
$font-size-12 = 12px
$font-size-14 = 14px
$font-size-16 = 16px
$font-size-18 = 18px
$font-size-20 = 20px
// $font-size-12 = 12px
// $font-size-14 = 14px
// $font-size-16 = 16px
// $font-size-18 = 18px
// $font-size-20 = 20px
// $fontsize-large-xxxx = 30px
// $fontsize-large-xxx = 24px
// $fontsize-large-xx = 20px
// $fontsize-large-x = 18px
// $fontsize-large = 16px
// $fontsize-medium = 14px
// $fontsize-small = 12px
// $fontsize-small-s = 10px
\ No newline at end of file
src/common/utils/components.js
View file @ 3247f81c
import CubePage from "../../components/cube-page.vue";
import addressList from "../../components/address-list.vue";
import CubeBuyCart from "../../components/cube-buy-cart.vue";
function plugin (Vue){
if(plugin.installed)return;
Vue.component('cube-page',CubePage)
Vue.component('cube-address-list',addressList)
Vue.component('cube-buy-cart',CubeBuyCart)
}
export default plugin;
\ No newline at end of file
src/common/utils/mUtils.js
View file @ 3247f81c
......@@ -11,6 +11,22 @@ export function MAP(key = 'c066bb79c8747e4d84aa9e86276f8174') {
})
}
export const localstorage = {
save(key, value) {
localStorage.setItem(key, JSON.stringify(value));
},
fetch(key) {
return JSON.parse(localStorage.getItem(key)) || [];
},
remove(key) {
localStorage.removeItem(key);
},
clear() {
localStorage.clear();
}
};
export default {
onRouterLink(vm,route, query) {
if (query) {
......
src/components/cube-buy-cart.vue 0 → 100644
View file @ 3247f81c
<template>
<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)"
v-if="foodNum"
>
<i class="cubeic-remove add_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>
<!-- <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)"
>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add" />
</svg>-->
</section>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {
showMoveDot: [] //控制下落的小圆点显示隐藏
};
},
mounted() {},
computed: {
...mapState(["cartList"]),
/**
* 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
*/
shopCart: function() {
return Object.assign({}, this.cartList[this.shopId]);
},
//shopCart变化的时候重新计算当前商品的数量
foodNum: function() {
let category_id = this.categoryId;
let item_id = this.foods.item_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;
} else {
return 0;
}
}
},
props: ["food", "shopId", "categoryId"],
methods: {
...mapMutations(["ADD_CART", "REDUCE_CART"]),
//移出购物车
removeOutCart(
category_id,
item_id,
food_id,
name,
price,
specs,
packing_fee,
sku_id,
stock
) {
if (this.foodNum > 0) {
this.REDUCE_CART({
shopid: this.shopId,
category_id,
item_id,
food_id,
name,
price,
specs,
packing_fee,
sku_id,
stock
});
}
},
//加入购物车，计算按钮位置。
addToCart() {
const addInfo = {
shopid: this.shopId,
category_id: this.categoryId,
food_id: food.id,
name: food.name,
favorable_price:food.favorable_price,
price:food.price
};
this.$store.commit('ADD_CART',addInfo);
let elLeft = event.target.getBoundingClientRect().left;
let elBottom = event.target.getBoundingClientRect().bottom;
this.showMoveDot.push(true);
this.$emit("showMoveDot", this.showMoveDot, elLeft, elBottom);
},
//显示规格列表
showChooseList(foodScroll) {
this.$emit("showChooseList", foodScroll);
},
//点击多规格商品的减按钮，弹出提示
showReduceTip() {
this.$emit("showReduceTip");
}
}
};
</script>
<style lang="stylus" scoped>
@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;
}
.cart_num {
// @include sc(.65rem, #666);
min-width: 1rem;
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;
}
}
}
}
.showReduce-enter-active, .showReduce-leave-active {
transition: all 0.3s ease-out;
}
.showReduce-enter, .showReduce-leave-active {
opacity: 0;
transform: translateX(1rem);
}
.fade-enter-active, .fade-leave-active {
transition: all 0.3s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
.fadeBounce-enter-active, .fadeBounce-leave-active {
transition: all 0.3s;
}
.fadeBounce-enter, .fadeBounce-leave-active {
opacity: 0;
transform: scale(0.7);
}
</style>
src/router.js
View file @ 3247f81c
......@@ -11,9 +11,9 @@ const editAddress = r => require.ensure([], () => r(require('./views/address/edi
const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
const shop = r => require.ensure([], () => r(require('./views/shopItem/index.vue')))
/* const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
*/
const searchLocation = r => require.ensure([], () => r(require('./views/search/location-search.vue')))
// const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
Vue.use(Router);
......@@ -68,7 +68,13 @@ export default new Router({
path: '/location/choise',
name: 'choiseLocation',
component: choiseLocation,
meta: { title: '收货地址', keepAlive: false }
meta: { title: '确认收货地址', keepAlive: false }
},
{
path: '/location/search',
name: 'searchLocation',
component: searchLocation,
meta: { title: '确认收货地址', keepAlive: false }
},
{
path: '/shop/:id',
......
src/store/index.js
View file @ 3247f81c
......@@ -6,9 +6,18 @@ import actions from './actions'
Vue.use(Vuex)
const state = {
location:{lat:'',lng:'',formattedAddress:''},
choise_position:{},
edit_address:{} // 待编辑的地址信息
location: { lat: '', lng: '', formattedAddress: '' },
choise_position: {
id: 0,
location: {
lat: 0,
lng: 0,
P: 0,
Q: 0
}
},
edit_address: {}, // 待编辑的地址信息
cartList: {}, // 加入购物车的商品列表
}
export default new Vuex.Store({
state,
......
src/store/mutations.js
View file @ 3247f81c
......@@ -2,22 +2,73 @@ export default {
// 记录当前地理位置
RECORD_ADDRESS(state, info) {
state.location = info;
console.log( info)
console.log(info)
},
// 重新定位
REFRESH_LOCATION(state, info) {
state.location = info;
console.log( info)
console.log(info)
},
// 地图定位：确认收货地址
CHOISE_POSITION(state, info){
CHOISE_POSITION(state, info) {
state.choise_position = info
},
// 清空 地图选点信息
CLEAR_POSITION(state){
state.choise_position = {}
CLEAR_POSITION(state) {
state.choise_position = {
id: 0,
location: {
lat: 0,
lng: 0,
P: 0,
Q: 0
}
}
},
RECORD_ADDRESSINFO(state, info){
// 记录待 编辑地址信息
RECORD_ADDRESSINFO(state, info) {
state.edit_address = info
},
// 加入购物车
ADD_CART(state, {
shopid,
category_id,
item_id,
food_id,
name,
price,
specs,
packing_fee,
sku_id,
stock
}) {
// cartList 中记录各个店铺下->各个分类下->多个商品
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']++;
} else {
item[food_id] = {
"num": 1,
"id": food_id,
"name": name,
"price": price,
"specs": specs,
"packing_fee": packing_fee,
"sku_id": sku_id,
"stock": stock
};
}
state.cartList = { ...cart };
//存入localStorage
setStore('buyCart', state.cartList);
},
// 移出购物车
REDUCE_CART() {
}
}
\ No newline at end of file
src/vant.js
View file @ 3247f81c
......@@ -11,15 +11,18 @@ import {
Cell, CellGroup ,
Field,
Button,
Tag
Tag,
Card,
Tab, Tabs
} from 'vant'
Vue.use(Search)
Vue.use(Image)
Vue.use(Grid)
Vue.use(GridItem)
// Vue.use(AddressList);
Vue.use(Card);
Vue.use(Row).use(Col);
Vue.use(Cell).use(CellGroup);
Vue.use(Field)
Vue.use(Tag)
Vue.use(Button)
Vue.use(Tab).use(Tabs);
src/views/address/add-address.vue
View file @ 3247f81c
......@@ -142,6 +142,11 @@ export default {
type: "txt"
}).show();
}
},
// 清除 允许切换地址的标记
beforeRouteLeave(to, from, next) {
this.$store.commit("CLEAR_POSITION");
next();
}
};
</script>
......
src/views/address/address.vue
View file @ 3247f81c
......@@ -59,7 +59,7 @@ export default {
address_suffix: el.address_suffix,//门牌号
is_default: el.is_default,
location_id:el.location_id,
position: '121.69821,31.186741'
position: `${el.location.lat},${el.location.lng}`
};
this.list.push(_obj);
});
......
src/views/address/edit-address.vue
View file @ 3247f81c
......@@ -35,7 +35,6 @@
<div class="van-address-edit__buttons">
<van-button class="save" type="danger" size="large" @click="onSave">确定</van-button>
</div>
{{edit_address}}
</div>
</template>
......@@ -83,9 +82,10 @@ export default {
},
created() {
const choiseP = this.choise_position;
this.nameValue = this.edit_address.name;
this.telValue = this.edit_address.tel;
this.locationValue = choiseP.name
this.locationValue = choiseP.id
? choiseP.name
: this.edit_address.address_detail;
this.detailValue = this.edit_address.address_suffix;
......@@ -113,37 +113,40 @@ export default {
address_suffix: this.detailValue,
is_default: 1,
address_id: 1 // 没有省市区id，默认为1
address_id: 0 // 没有省市区id，默认为1
};
if (this.receiverName == "") {
if (this.nameValue == "") {
this.toast("请填写姓名");
return;
} else if (this.receiverTel == "") {
} else if (this.telValue == "") {
this.toast("请填写手机号");
return;
} else if (this.receiverArea == "") {
} else if (this.locationValue == "") {
this.toast("请填写地址");
return;
} else if (this.detailedAddress == "") {
} else if (this.detailValue == "") {
this.toast("请填写门牌号");
return;
}
// 若重新选择定位，则添加地图选点记录的定位信息
const position = this.choise_position;
if (position.name) {
console.log(position);
let mapInfo = {
name: position.name,
address: position.address,
map_id: position.id,
lat: position.location.lat,
lng: position.location.lng,
p: position.location.P,
r: position.location.Q,
map_id: format(position, position.id),
lat: format(position, position.location.lat),
lng: format(position, position.location.lng),
p: format(position, position.location.P),
r: format(position, position.location.Q),
address_detail: position.name
};
Object.assign(Data, mapInfo);
function format(data, value) {
return Object.keys(data).length ? value : 0;
}
console.log(Data);
return;
let res = await editReceivingAddress(Data);
if (res.code === 0) {
this.toast("修改地址成功");
......@@ -157,7 +160,10 @@ export default {
}
},
onChoiseLocation(route) {
this.$router.push({ name: route, query: { position: this.$route.query.position } });
this.$router.push({
name: route,
query: { geohash: this.$route.query.position }
});
},
toast(content) {
this.$createToast({
......@@ -165,6 +171,11 @@ export default {
type: "txt"
}).show();
}
},
// 清除 允许切换地址的标记
beforeRouteLeave(to, from, next) {
this.$store.commit("CLEAR_POSITION");
next();
}
};
</script>
......
src/views/address/select-address.vue
View file @ 3247f81c
<template>
<cube-page type="recycle-list" title="RecycleList">
<div slot="content">
<van-search placeholder="请输入搜索关键词" shape="round"></van-search>
<van-search placeholder="请输入搜索关键词" shape="round" @click="onLink('searchLocation')"></van-search>
<div class="scroll-list-wrap">
<cube-scroll ref="scroll">
......@@ -81,7 +81,7 @@ export default {
let _data = res.data;
_data.forEach(el => {
let _obj = {
id: el.id.toString(),
// id: el.id.toString(),
name: el.name,
tel: el.phone,
label: el.label, // 地址类型：例：家
......@@ -95,8 +95,8 @@ export default {
},
// 选择收货地址
async setDefaultAddress(item) {
this.$router.push({ name: "home" });
return;
// this.$router.push({ name: "home" });
// return;
Object.assign(item, { is_default: 1 });
let res = await editReceivingAddress(item);
if (res.code == 0) {
......@@ -123,7 +123,7 @@ export default {
<style scoped>
.scroll-list-wrap {
top: 30px;
top: 40px;
}
.cube-page > .wrapper .content {
margin: 0;
......
src/views/home/index.vue
View file @ 3247f81c
......@@ -81,7 +81,7 @@ import { mapGeolocation, MAP } from "../../common/utils/mUtils";
import { mapState } from "vuex";
var map = {};
var b = {
shop_id: 1,
shop_id: '8e3a39b19ec215d4c9c424ac1608751c',
name: "清吧",
address: "重庆市,市辖区,涪陵区",
icon: "files/shop/77/image/a4558aa3-ccb2-4f2c-b5db-1461a25c12a9.jpg",
......
src/views/location/choise.vue
View file @ 3247f81c
<template>
<div>
<!-- 搜索框 -->
<van-search placeholder="小区/写字楼/学校等" shape="round"></van-search>
<van-search placeholder="小区/写字楼/学校等" shape="round" @click="onSearch"></van-search>
<!-- map -->
<div class="amap-page-container">
......@@ -34,6 +34,10 @@
<div v-if="poisData==null" class="no-data text-base">
<cube-loading :size="24"></cube-loading>正在定位
</div>
<div v-else-if="poisData.length==0" class="no-data text-base">
地址查询失败
</div>
</cube-scroll>
</div>
</div>
......@@ -47,7 +51,7 @@ export default {
computed: {
// 是否根据已有经纬度进行定位
hasPosition() {
return this.$route.query.position ? true : false;
return this.$route.query.geohash ? true : false;
}
},
......@@ -104,9 +108,14 @@ export default {
self.poisData = positionResult.regeocode.pois;
console.log(positionResult);
});
positionPicker.on("fail", function(positionResult) {
console.log(positionResult);
self.poisData = [];
});
if (self.hasPosition) {
let position = self.$route.query.position.split(",");
let position = self.$route.query.geohash.split(",");
positionPicker.start(position);
} else {
positionPicker.start();
......@@ -133,6 +142,9 @@ export default {
const curChoise = this.poisData.find(item => item.id == id);
this.$store.commit("CHOISE_POSITION", curChoise);
this.$router.go(-1);
},
onSearch(){
this.$router.replace({name:'searchLocation',query:{geohash:this.$route.query.geohash}})
}
}
};
......
src/views/search/location-search.vue 0 → 100644
View file @ 3247f81c
<template>
<div>
<!-- <van-row>
<form action="/">
<van-search
ref="search"
v-model="searchValue"
placeholder="请输入搜索关键词"
show-action
shape="round"
@search="onSearch"
@cancel="onCancel"
/>
</form>
</van-row>-->
<div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);">
<div class="van-search__content van-search__content--round">
<div class="van-cell van-cell--borderless van-field">
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body">
<input
id="search"
v-model="keyword"
type="search"
placeholder="请输入搜索关键词"
class="van-field__control"
/>
</div>
</div>
</div>
</div>
<div class="van-search__action" @click="onCancel">取消</div>
</div>
<!-- <input id="search" type="text" /> -->
<div class="container">
<cube-scroll ref="scroll">
<!-- 输入提示的容器对象 -->
<div id="suggestContainer" class="text-medium"></div>
<van-row v-if="keyword==''&&searchHistory.length" class="history-box margin-bt-space">
<p class="text-medium text-color-gray"></p>
<van-cell title="历史搜索">
<i slot="right-icon" class="cubeic-delete text-medium" @click="onClearHistory"></i>
</van-cell>
<div class="history-list">
<van-tag
v-for="tag in searchHistory"
:key="tag.id"
size="large"
color="#f1f1f1"
class="text-default-gray"
@click="setCurrentGeohash(tag)"
>{{tag.name}}</van-tag>
</div>
</van-row>
<div v-else-if="keyword==''&& searchHistory.length==0" class="no-data">暂无历史搜索</div>
</cube-scroll>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import { localstorage } from "../../common/utils/mUtils";
let vm = {};
export default {
data() {
vm = this;
return {
fromPath: "", //路由
keyword: "",
searchHistory: [] // 搜索历史记录
};
},
created() {
// document.title = this.shopInfo.name;
},
mounted() {
const storage = localstorage.fetch("search-location");
this.searchHistory = storage.length ? storage : [];
this.events();
},
computed: {
...mapState(["shopInfo"])
},
methods: {
events() {
AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {
var poiPicker = new PoiPicker({
input: "search", //输入框id
suggestContainer: "suggestContainer"
});
poiPicker.on("poiPicked", function(poiResult) {
vm.poiPickedFn(poiResult.item);
console.log(poiResult);
});
// poiPicker.suggest("川沙");
});
},
/**
* 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
* 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
*/
recordHistory(poi) {
let repeatPoi = this.searchHistory.find(item => item.id == poi.id);
if (typeof repeatPoi == "undefined") {
this.searchHistory.push(poi);
}
localstorage.save("search-location", this.searchHistory);
// this.searchHistory = [];
},
//监听poi选中信息
poiPickedFn(poi) {
this.recordHistory(poi);
// 用户选中的poi点信息 存入Vuex
this.$store.commit("CHOISE_POSITION", poi);
this.$router.go(-1);
},
setCurrentGeohash(){
},
onRouterLink(keyword) {
this.$router.replace({
name: "searchList",
query: { keyword: keyword }
});
},
onClearHistory() {
this.$createDialog({
type: "confirm",
icon: "cubeic-alert",
title: "",
content: "确认删除全部历史记录？",
confirmBtn: {
text: "删除",
active: true
},
cancelBtn: {
text: "取消"
},
onConfirm: () => {
localstorage.remove("search-location");
this.searchHistory = [];
}
}).show();
},
onCancel() {
this.$router.replace({
name: this.fromPath,
query: { geohash: this.$route.query.geohash }
});
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.fromPath = from.name;
});
}
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl';
.history-box {
padding: 0 10px;
.history-list {
width: 110%;
}
.van-cell {
padding-left: 0;
padding-right: 0;
&__title span {
font-size: 16px;
}
&:not(:last-child)::after {
border: none;
}
}
.van-tag {
min-width: 34px;
margin: 0 10px 10px 0;
text-align: center;
line-height: 22px;
color: #999;
}
}
.container {
position();
top: 40px;
padding: 10px 0 10px 10px;
background-color: #fff;
}
.action-btn {
background-color: transparent;
line-height: 26px;
&.van-tag--round:after {
border-radius: 999px !important;
}
}
</style>
\ No newline at end of file
src/views/shopItem/children/shop.vue 0 → 100644
View file @ 3247f81c
<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="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>
</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>
</section>
</div>
</cube-scroll-nav-panel>
</cube-scroll-nav>
</div>
</div>
</cube-page>
</template>
<script type="text/ecmascript-6">
import { allCategoryAndGoods, getShopInfo } from "../../../common/serve";
import CubePage from "../../../components/cube-page.vue";
import goodsData from "../../../data";
const goods = goodsData.goods;
export default {
components: {
CubePage
},
data() {
return {
data: goods,
current: 0, //当前导航 active 项的 key 值
shopId: this.$route.params.id,
shopInfo: {},
tabs: ["点餐", "评价", "商家"]
};
},
created() {
this.initData();
},
methods: {
async initData() {
let res = await allCategoryAndGoods(this.shopId);
if (res.code == 0) {
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;
}
},
changeHandler(label) {
console.log("changed to:", label);
},
stickyChangeHandler(current) {
console.log("sticky-change", current);
},
//显示下落圆球
showMoveDotFun(showMoveDot, elLeft, elBottom) {
this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
this.elLeft = elLeft;
this.elBottom = elBottom;
},
listenInCart() {},
showChooseList() {},
showReduceTip() {},
showMoveDotFun() {}
}
};
</script>
<style lang="stylus">
@import '~common/stylus/variable.styl';
@import '~common/stylus/mixin.styl';
.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%;
}
span {
font-size: $fontsize-small;
}
}
.cube-scroll-nav-panel-title {
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;
&__bottom {
position: absolute;
bottom: 0;
top: 72%;
}
&__price {
width: 100%;
}
&__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;
width: 100%;
}
.prepend-header {
text-align: center;
font-size: 20px;
.prepend-content {
background-color: #fff;
padding: 20px 0 10px;
p {
padding: 10px;
}
}
}
.cube-scroll-nav-main {
background-color: #efeff4;
}
.cube-sticky-fixed {
background-color: #efeff4;
}
.cube-scroll-nav-bar-item {
padding: 15px;
}
.cube-scroll-nav-bar-item_active {
background-color: #fff;
}
.cube-scroll-nav-panels {
background-color: #fff;
}
.cube-scroll-nav-panel {
}
.cube-scroll-nav-panel-title {
padding: 15px;
font-size: 16px;
background-color: #fff;
}
}
</style>
src/views/shopItem/index.vue
View file @ 3247f81c
<template>
<cube-page type="scroll-nav-side" title="ScrollNav">
<div slot="content">
<div class="view-wrapper">
<cube-scroll-nav
:side="true"
:data="data"
:current="current"
@change="changeHandler"
@sticky-change="stickyChangeHandler">
<ul class="prepend-header" slot="prepend">
<li>11</li>
<li>22</li>
<li>333</li>
</ul>
<cube-scroll-nav-panel
v-for="item in data"
:key="item.name"
:label="item.name"
:title="item.name">
<ul>
<li v-for="food in item.foods">
<div>
<img :src="food.icon">
<p>{{food.name}}</p>
</div>
</li>
</ul>
</cube-scroll-nav-panel>
</cube-scroll-nav>
<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>
<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>
</template>
<script type="text/ecmascript-6">
import CubePage from '../../components/cube-page.vue'
import goodsData from '../../data'
import { allCategoryAndGoods, getShopInfo } from "../../common/serve";
import shopTab from "./children/shop";
import goodsData from "../../data";
const goods = goodsData.goods
const goods = goodsData.goods;
export default {
export default {
components: {
CubePage
shopTab
},
data() {
return {
scrollY: 0,
scrollEvents: ["scroll"],
data: goods,
current: goods[3].name
}
current: 0, //当前导航 active 项的 key 值
shopId: 0,
shopInfo: {},
tabs: [
{ name: "点餐", component: 'shopTab' },
{ name: "评价", component: 'shopTab' },
{ name: "商家", component: 'shopTab' }
]
};
},
created() {
this.shopId = this.$route.params.id;
this.initData();
},
methods: {
scrollHandler() {},
async initData() {
let res = await allCategoryAndGoods(this.shopId);
if (res.code == 0) {
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;
}
},
changeHandler(label) {
console.log('changed to:', label)
console.log("changed to:", label);
},
stickyChangeHandler(current) {
console.log('sticky-change', current)
console.log("sticky-change", current);
},
//显示下落圆球
showMoveDotFun(showMoveDot, elLeft, elBottom) {
this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
this.elLeft = elLeft;
this.elBottom = elBottom;
},
listenInCart() {},
showChooseList() {},
showReduceTip() {},
showMoveDotFun() {}
}
};
</script>
<style lang="stylus">
@import '~common/stylus/variable.styl';
@import '~common/stylus/mixin.styl';
.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%;
}
span {
font-size: $fontsize-small;
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.scroll-nav-side
background-color: #fff
.view-wrapper
position: fixed
top: 0
left: 0
bottom: 0
width: 100%
.prepend-header
width: 90%
margin: 20px auto
text-align: center
font-size: 20px
line-height: 1.6
border-radius: 2px
box-shadow: 0 0 4px rgba(0, 0, 0, .2)
.cube-scroll-nav-main
background-color: #efeff4
.cube-sticky-fixed
background-color: #efeff4
.cube-scroll-nav-bar
width: 120px
background-color: transparent
.cube-scroll-nav-bar-item
padding: 15px
.cube-scroll-nav-bar-item_active
background-color: #fff
.cube-scroll-nav-panels
background-color: #fff
.cube-scroll-nav-panel
img
width: 114px
height: 114px
ul
overflow: hidden
font-size: 14px
line-height: 1.4
color: #666
li
float: left
width: 50%
div
width: 114px
margin: auto
p
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
.cube-scroll-nav-panel-title
padding: 15px
font-size: 16px
background-color: #fff
.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;
}
}
}
}
</style>
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