Skip to content

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

待完善

parent f2eeee5e
Hide whitespace changes
Inline Side-by-side
Showing with 997 additions and 286 deletions
src/common/serve.js
View file @ fbc3b41c
...@@ -51,6 +51,11 @@ export const getShopInfo = (shop_id) => request('shop', { shop_id }, 'get'); ...@@ -51,6 +51,11 @@ export const getShopInfo = (shop_id) => request('shop', { shop_id }, 'get');
export const allCategoryAndGoods = (shop_id) => request('/shop/goods/shop', { shop_id}, 'get'); export const allCategoryAndGoods = (shop_id) => request('/shop/goods/shop', { shop_id}, 'get');
// 商品相关-获取商品列表（查询）
export const search = param => request('shop/goods/index', param, 'get');
/******* 订单相关 ******/ /******* 订单相关 ******/
// 店铺订单-下单- 预下单 // 店铺订单-下单- 预下单
......
src/common/stylus/index.styl
View file @ fbc3b41c
...@@ -109,5 +109,9 @@ ...@@ -109,5 +109,9 @@
font-size: 16px; font-size: 16px;
} }
.van-tag{ .van-tag{
line-height: 1; // padding:1px 4px;
} }
\ No newline at end of file
.fontw .van-cell .van-cell__title span{
font-weight: 600;
}
\ No newline at end of file
src/components/confirm-foods-list.vue
View file @ fbc3b41c
...@@ -36,7 +36,10 @@ export default { ...@@ -36,7 +36,10 @@ export default {
header { header {
position: relative; position: relative;
padding: 15px; padding: 15px;
scw($fontsize-large, #3e3e3e, 600); span{
scw($fontsize-large, #3e3e3e, 600);
}
} }
.van-cell { .van-cell {
......
src/components/food-card.vue 0 → 100644
View file @ fbc3b41c
<template>
<!-- <div> -->
<van-card desc="月售360 好评率88%" :title="food.name">
<div slot="thumb" @click="selectFood(food,item.category_id)">
<van-image width="100%" height="90" fit="contain" :src="$globalUrlFile+food.icon">
<template v-slot:error>
<img width="100%" src="../../../assets/images/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-cart-control
ref="buyCart"
:shopId="shopId"
:food="food"
@showMoveDots="showMoveDotFun"
></cube-cart-control>
</div>
</van-card>
<!-- </div> -->
</template>
<script>
export default {
props:{
food:{
default:{}
}
},
methods:{
}
}
</script>
\ No newline at end of file
src/components/order-card.vue
View file @ fbc3b41c
...@@ -7,12 +7,13 @@ ...@@ -7,12 +7,13 @@
<span>订单编号:</span> <span>订单编号:</span>
<div class="van-cell__label">{{order.order_no}}</div> <div class="van-cell__label">{{order.order_no}}</div>
</div> </div>
<div class="van-cell__value van-panel__header-value"> <div class="van-cell__value van-panel__header-value">
<span>已送达</span> <span>{{order.order_status=='preparing'?'配送中':'已送达'}}</span>
</div> </div>
</div> </div>
<van-cell @click="onSelect(order.order_no)"> <van-cell @click="onSelect(order.order_type,order.order_no)">
<div slot="title"> <div slot="title">
<p class="word-one">{{order.goods_name}}</p> <p class="word-one">{{order.goods_name}}</p>
</div> </div>
...@@ -25,6 +26,27 @@ ...@@ -25,6 +26,27 @@
<van-button size="small" color="#1f81be" @click="onMore(77,order.order_no)" plain>再来一单</van-button> <van-button size="small" color="#1f81be" @click="onMore(77,order.order_no)" plain>再来一单</van-button>
</div> </div>
</van-panel> </van-panel>
<van-panel v-else-if="order.order_type=='recharge'" class="margin-bt-space">
<div slot="header" class="van-cell van-panel__header" @click="onShow(77)">
<div class="van-cell__title">
<span>充值订单</span>
</div>
<div class="van-cell__value van-panel__header-value">
<span>充值成功</span>
</div>
</div>
<van-cell @click="onSelect(order.order_type,order.order_no)">
<div slot="title">
<p class="word-one">{{order.goods_name}}</p>
</div>
<span>
<span class="text-extra-small">￥</span>
<span class="text-base">{{order.price_final}}</span>
</span>
</van-cell>
</van-panel>
</div> </div>
</div> </div>
</template> </template>
...@@ -41,10 +63,17 @@ export default { ...@@ -41,10 +63,17 @@ export default {
onCallBack(order_no) { onCallBack(order_no) {
this.$emit("select", order_no); this.$emit("select", order_no);
}, },
onMore(shopId,order_no) { onMore(shopId, order_no) {
this.$emit("more",shopId,order_no); this.$emit("more", shopId, order_no);
}, },
onSelect(order_no) { onSelect(order_type, order_no) {
if (order_type == "recharge") {
this.$createToast({
txt: "充值订单",
type: "txt"
}).show();
return;
}
this.$emit("select", order_no); this.$emit("select", order_no);
}, },
onShow(shopId) { onShow(shopId) {
...@@ -63,7 +92,9 @@ export default { ...@@ -63,7 +92,9 @@ export default {
.van-panel { .van-panel {
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 10px; padding-bottom: 10px;
&__header .van-cell__title span{
font-weight:600;
}
&__content { &__content {
padding-left: 12%; padding-left: 12%;
} }
......
src/components/shop-list.vue
View file @ fbc3b41c
...@@ -7,7 +7,23 @@ ...@@ -7,7 +7,23 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<h2 class="card-title" v-html="item.name"></h2> <h2 class="card-title" v-html="item.name"></h2>
<p class="item-desc" v-html="item.category_name"></p> <p class="star">
<span>
<i class="cubeic-star"></i>4
</span> 月售42
</p>
<p>起送￥20</p>
<div class="tags">
<van-tag
v-for="tag in item.discount"
:key="tag.id"
color="#f44"
plain
size="10"
>{{parseInt(tag.condition) }}减{{parseInt(tag.amount)}}</van-tag>
</div>
<!-- <p class="item-desc" v-html="item.category_name"></p> -->
</div> </div>
</div> </div>
</li> </li>
...@@ -15,44 +31,35 @@ ...@@ -15,44 +31,35 @@
</template> </template>
<script> <script>
var b = {
shop_id: 1,
name: "清吧",
address: "重庆市,市辖区,涪陵区",
icon: "files/shop/77/image/a4558aa3-ccb2-4f2c-b5db-1461a25c12a9.jpg",
phone: "15389926297",
shop_type: "restaurant",
category_name: "其他",
address_detail: "聚贤大道116号"
};
export default { export default {
data() { data() {
return {}; return {};
}, },
props: ["options","location"], props: ["options", "location"],
computed: {}, computed: {},
methods: { methods: {
onSelect(item){ onSelect(item) {
this.$router.push({name:'shop',params:{id:item.shop_id},query:{geohash:this.location.lat+','+this.location.lng}}) this.$router.push({
name: "shop",
params: { id: item.shop_id },
query: { geohash: this.location.lat + "," + this.location.lng }
});
} }
} }
}; };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.card { .card {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 16px; padding: 8px 10px;
color: #323233; color: #323233;
font-size: 12px; font-size: 12px;
// border-bottom: 1px solid #eee;
// background-color: #fafafa;
.card-inner { .card-inner {
display: flex; display: flex;
} }
...@@ -71,17 +78,33 @@ export default { ...@@ -71,17 +78,33 @@ export default {
min-width: 0; min-width: 0;
min-height: 90px; min-height: 90px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
color: #7d7e80;
} }
.card-title { .card-title {
min-height: 34px; min-height: 30px;
font-weight: 600;
line-height: 24px; line-height: 24px;
display: -webkit-box; font-size: $fontsize-large-x;
overflow: hidden; color: #232323;
text-overflow: ellipsis; font-weight: 600;
-webkit-line-clamp: 2; }
-webkit-box-orient: vertical;
.star {
span {
color: #e8864c;
}
}
p {
line-height: 1.5;
}
.tags {
padding: 4px 0;
.van-tag {
margin-right: 6px;
}
} }
} }
</style> </style>
src/router.js
View file @ fbc3b41c
...@@ -11,11 +11,17 @@ const editAddress = r => require.ensure([], () => r(require('./views/address/edi ...@@ -11,11 +11,17 @@ const editAddress = r => require.ensure([], () => r(require('./views/address/edi
const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue'))) const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
const shop = r => require.ensure([], () => r(require('./views/shopItem/index.vue'))) const shop = r => require.ensure([], () => r(require('./views/shopItem/index.vue')))
const searchLocation = r => require.ensure([], () => r(require('./views/search/location-search.vue'))) const searchLocation = r => require.ensure([], () => r(require('./views/search/location-search.vue'))) // 定位搜索页
const homeSearch = r => require.ensure([], () => r(require('./views/search/home-search.vue'))) // 店铺搜索页
const shopsResult = r => require.ensure([], () => r(require('./views/search/result/shops.vue'))) // 店铺搜索结果页
const foodSearch = r => require.ensure([], () => r(require('./views/search/food-search.vue'))) // 店铺搜索页
const orderDetails = r => require.ensure([], () => r(require('./views/order/order-detail.vue'))) const orderDetails = r => require.ensure([], () => r(require('./views/order/order-detail.vue')))
const confirmOrder = r => require.ensure([], () => r(require('./views/confirmOrder/index.vue'))) const confirmOrder = r => require.ensure([], () => r(require('./views/confirmOrder/index.vue')))
const remark = r => require.ensure([], () => r(require('./views/confirmOrder/children/remark.vue')))
const coupon = r => require.ensure([], () => r(require('./views/coupon/coupon.vue'))) const coupon = r => require.ensure([], () => r(require('./views/coupon/coupon.vue')))
...@@ -54,7 +60,7 @@ export default new Router({ ...@@ -54,7 +60,7 @@ export default new Router({
path: "/address/select", path: "/address/select",
name: "sellAddress", name: "sellAddress",
component: sellAddress component: sellAddress
}, },
{ {
path: '/address/add', path: '/address/add',
name: 'addAddress', name: 'addAddress',
...@@ -85,18 +91,45 @@ export default new Router({ ...@@ -85,18 +91,45 @@ export default new Router({
component: searchLocation, component: searchLocation,
meta: { title: '确认收货地址', keepAlive: false } meta: { title: '确认收货地址', keepAlive: false }
}, },
{
path: '/home/search',
name: 'homeSearch',
component: homeSearch,
meta: { title: '', keepAlive: false }
},
/* {
path: '/home/search/shops',
name: 'shopsResult',
component: shopsResult,
meta: { title: '', keepAlive: false }
}, */
{ {
path: '/shop/:id', path: '/shop/:id',
name: 'shop', name: 'shop',
component: shop, component: shop,
meta: { title: '', keepAlive: false } meta: { title: '', keepAlive: false }
}, },
{
path: '/shop/:id/search',
name: 'foodSearch',
component: foodSearch,
meta: { title: '', keepAlive: false }
},
{ {
path: '/confirmOrder/:shopId', path: '/confirmOrder/:shopId',
name: 'confirmOrder', name: 'confirmOrder',
component: confirmOrder, component: confirmOrder,
meta: { title: '外卖配送', requireAuth: true } meta: { title: '外卖配送', requireAuth: true }
}, },
{
path: '/confirmOrder/:shopId/remark',
name: 'remark',
component: remark,
meta: { title: '外卖备注', requireAuth: true }
},
{ {
path: '/order/:order_no', path: '/order/:order_no',
name: 'orderDetails', name: 'orderDetails',
......
src/store/index.js
View file @ fbc3b41c
...@@ -22,7 +22,9 @@ const state = { ...@@ -22,7 +22,9 @@ const state = {
shopInfo:{},// 当前店铺信息 shopInfo:{},// 当前店铺信息
edit_address: {}, // 待编辑的地址信息 edit_address: {}, // 待编辑的地址信息
cartList: {}, // 加入购物车的商品列表 cartList: {}, // 加入购物车的商品列表
coupon:{} coupon:{},
remarkText: '',//输入备注内容
} }
export default new Vuex.Store({ export default new Vuex.Store({
state, state,
......
src/store/mutations.js
View file @ fbc3b41c
...@@ -123,9 +123,23 @@ export default { ...@@ -123,9 +123,23 @@ export default {
state.cartList[shopId]={} state.cartList[shopId]={}
}, },
UPDATE_SHOP_CART(state,cart){
state.cartList = {...cart}
//存入localStorage
sessionstorage.save('buyCart', state.cartList);
},
// 确认订单页面中使用优惠券情况 // 确认订单页面中使用优惠券情况
SAVE_COUPON(state, coupon) { SAVE_COUPON(state, coupon) {
state.coupon = coupon state.coupon = coupon
},
//记录订单页面用户选择的备注, 传递给订单确认页面
CONFIRM_REMARK(state, {
remarkText,
inputText
}) {
state.remarkText = remarkText;
}, },
//退出登录 //退出登录
......
src/vant.js
View file @ fbc3b41c
...@@ -19,7 +19,8 @@ import { ...@@ -19,7 +19,8 @@ import {
ActionSheet, ActionSheet,
Panel, Panel,
List, List,
CouponCell, CouponList CouponCell, CouponList ,
Collapse, CollapseItem
} from 'vant' } from 'vant'
Vue.use(Search) Vue.use(Search)
Vue.use(Image) Vue.use(Image)
...@@ -38,4 +39,5 @@ Vue.use(SubmitBar) ...@@ -38,4 +39,5 @@ Vue.use(SubmitBar)
Vue.use(ActionSheet) Vue.use(ActionSheet)
Vue.use(Panel) Vue.use(Panel)
Vue.use(List) Vue.use(List)
Vue.use(CouponCell).use(CouponList); Vue.use(CouponCell).use(CouponList);
\ No newline at end of file Vue.use(Collapse).use(CollapseItem);
\ No newline at end of file
src/views/confirmOrder/children/remark.vue 0 → 100644
View file @ fbc3b41c
<template>
<div class="rating_page">
<section>
<section class="quick_remark">
<header class="header_style">快速输入</header>
<div class="tags">
<van-button
v-for="item in remarkList"
:key="item"
plain
size="small"
@click="onSelectRemark(item)"
>{{item}}</van-button>
</div>
<cube-textarea
ref="textarea"
v-model="remarkText"
:placeholder="placeholder"
:maxlength="maxlength"
:indicator="indicator"
:autoExpand="autoExpand"
autofocus
></cube-textarea>
</section>
<div class="action">
<van-button size="large" type="danger" @click="confirmRemark">确定</van-button>
</div>
</section>
</div>
</template>
<script>
var remarks = [
"不要辣",
"少点辣",
"多点辣",
"不要香菜",
"不要洋葱",
"多点醋",
"多点葱"
];
export default {
data() {
return {
remarkList: remarks,
maxlength: 50,
placeholder: "填写额外对商家和骑手小哥的备注信息",
autoExpand: true,
indicator: {
negative: false,
remain: true
},
remarkText: ""
};
},
methods: {
onSelectRemark(item) {
let value = this.remarkText == "" ? item : "，" + item;
if (this.remarkText.length > this.maxlength) {
this.toast = this.$createToast({
txt: `已超过${this.maxlength}个字`,
type: "txt"
}).show();
return;
}
this.remarkText += value;
this.$refs.textarea.focus();
},
//确认选择
confirmRemark() {
this.$store.commit("CONFIRM_REMARK", {
remarkText: this.remarkText
});
this.$router.go(-1);
},
}
};
</script>
<style lang="stylus">
@import '~common/stylus/mixin.styl';
.quick_remark {
background-color: #fff;
padding: 0 16px 20px;
.cube-textarea-wrapper {
margin: 20px 0;
&::after {
border-color: #fff;
}
.cube-textarea {
background: #f5f5f5;
}
}
.header_style {
scw($fontsize-medium, $color-light-grey);
padding: 10px 0;
}
.van-button {
margin-right: 10px;
margin-bottom: 4px;
color: #666;
}
}
.action {
padding: 20px 16px;
}
</style>
src/views/confirmOrder/index.vue
View file @ fbc3b41c
...@@ -41,10 +41,15 @@ ...@@ -41,10 +41,15 @@
</van-cell> </van-cell>
</van-row> </van-row>
<van-row> <van-row class="section fontw">
<van-cell title="订单备注" value="口味、偏好" is-link></van-cell> <van-cell
<van-cell title="餐具份数" value="必选" is-link></van-cell> title="订单备注"
<van-cell title="发票信息" value="未选择" is-link></van-cell> :value="remarkText?remarkText:'口味、偏好'"
is-link
@click="onRemark"
class="word-one"
></van-cell>
<van-cell title="发票信息" value="暂不支持" is-link></van-cell>
</van-row> </van-row>
</section> </section>
...@@ -118,8 +123,8 @@ export default { ...@@ -118,8 +123,8 @@ export default {
"cartList", "cartList",
"shopInfo", "shopInfo",
"choosed_address", "choosed_address",
"remarkText",
"inputText",
"invoice", "invoice",
"userInfo" "userInfo"
]), ]),
...@@ -128,22 +133,6 @@ export default { ...@@ -128,22 +133,6 @@ export default {
this.choosed_address.address_detail + this.choosed_address.address_detail +
this.choosed_address.address_suffix.split(",")[1] this.choosed_address.address_suffix.split(",")[1]
); );
},
//备注页返回的信息进行处理
remarklist: function() {
let str = new String();
if (this.remarkText) {
Object.values(this.remarkText).forEach(item => {
str += item[1] + "，";
});
}
//是否有自定义备注，分开处理
if (this.inputText) {
return str + this.inputText;
} else {
return str.substr(0, str.lastIndexOf("，"));
}
} }
}, },
methods: { methods: {
...@@ -205,16 +194,16 @@ export default { ...@@ -205,16 +194,16 @@ export default {
// 预下单商品检测成功后执行支付操作 // 预下单商品检测成功后执行支付操作
this.showActionSheet = true; this.showActionSheet = true;
} else { } else {
if (res.code == 2054) { this.submitBarTip = res.message
this.submitBarTip = res.message;
return;
}
this.$toast(res.message);
} }
this.btnLoading = false; this.btnLoading = false;
}, },
payAction() { payAction() {
this.showActionSheet = false; this.showActionSheet = false;
},
// 备注
onRemark() {
this.$router.push({ name: "remark" });
} }
} }
}; };
...@@ -225,6 +214,8 @@ export default { ...@@ -225,6 +214,8 @@ export default {
@import '~common/stylus/mixin.styl'; @import '~common/stylus/mixin.styl';
.van-contact-card { .van-contact-card {
padding: 10px 0;
.van-cell__title { .van-cell__title {
strong { strong {
font-size: $fontsize-large; font-size: $fontsize-large;
...@@ -239,12 +230,16 @@ export default { ...@@ -239,12 +230,16 @@ export default {
} }
} }
.order-box .van-cell__value { .order-box .van-cell__value {
scw($fontsize-medium, #3e3e3e, 600); scw($fontsize-medium, #3e3e3e, 600);
} }
.word-one .van-cell__value {
text-overflow: ellipsis;
white-space: nowrap;
}
/*
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: opacity 0.3s; transition: opacity 0.3s;
} }
...@@ -268,5 +263,5 @@ export default { ...@@ -268,5 +263,5 @@ export default {
.router-slid-enter, .router-slid-leave-active { .router-slid-enter, .router-slid-leave-active {
transform: translate3d(2rem, 0, 0); transform: translate3d(2rem, 0, 0);
opacity: 0; opacity: 0;
} } */
</style> </style>
src/views/home/index.vue
View file @ fbc3b41c
...@@ -16,9 +16,7 @@ ...@@ -16,9 +16,7 @@
<!-- 收货地址定位 --> <!-- 收货地址定位 -->
<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">{{curLocation.formattedAddress}}</span>
class="text-medium"
>{{curLocation.formattedAddress}}</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>
...@@ -28,7 +26,7 @@ ...@@ -28,7 +26,7 @@
<!-- 搜索框 --> <!-- 搜索框 -->
<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" @click="onRouterLink('homeSearch',{geohash:curLocation.lat+','+curLocation.lng})"></van-search>
</ul> </ul>
</cube-sticky-ele> </cube-sticky-ele>
...@@ -74,20 +72,15 @@ ...@@ -74,20 +72,15 @@
import CubePage from "../../components/cube-page.vue"; import CubePage from "../../components/cube-page.vue";
import footGuide from "../../components/footer"; import footGuide from "../../components/footer";
import shopList from "../../components/shop-list"; import shopList from "../../components/shop-list";
import { getNearbyShop, getReceivingAddress,getUser } from "../../common/serve"; import {
getNearbyShop,
getReceivingAddress,
getUser
} from "../../common/serve";
import { mapGeolocation, MAP } from "../../common/utils/mUtils"; import { mapGeolocation, MAP } from "../../common/utils/mUtils";
import { mapState } from "vuex"; import { mapState } from "vuex";
var map = {}; var map = {};
var b = {
shop_id: "8e3a39b19ec215d4c9c424ac1608751c",
name: "清吧",
address: "重庆市,市辖区,涪陵区",
icon: "files/shop/77/image/a4558aa3-ccb2-4f2c-b5db-1461a25c12a9.jpg",
phone: "15389926297",
shop_type: "restaurant",
category_name: "其他",
address_detail: "聚贤大道116号"
};
var c = [ var c = [
{ {
url: "http://www.didichuxing.com/", url: "http://www.didichuxing.com/",
...@@ -138,7 +131,7 @@ export default { ...@@ -138,7 +131,7 @@ export default {
loading: true, loading: true,
gridsData: d, gridsData: d,
shopsData: [b, b, b], shopsData: [],
scrollEvents: ["scroll"], scrollEvents: ["scroll"],
scrollY: 0, scrollY: 0,
...@@ -162,24 +155,28 @@ export default { ...@@ -162,24 +155,28 @@ export default {
}; };
}, },
created() { created() {
setTimeout(() => { setTimeout(() => {
map = new AMap.Map("amap", { map = new AMap.Map("amap", {
resizeEnable: true, resizeEnable: true,
zoom: 16 zoom: 16
}); });
this.$store.dispatch("GET_LOCATION", map); this.$store.dispatch("GET_LOCATION", map);
}, 20); }, 200);
}, },
mounted() { mounted() {
this.initData(); this.initData();
}, },
computed: { computed: {
...mapState(["location","choosed_address"]), ...mapState(["location", "choosed_address"]),
// 当前使用的定位 // 当前使用的定位
curLocation(){ curLocation() {
console.log(this.location) console.log(this.location);
return this.choosed_address.lat?this.choosed_address:(this.location.lat?this.location:'定位中') return this.choosed_address.lat
}, ? this.choosed_address
: this.location.lat
? this.location
: "定位中";
}
}, },
components: { components: {
footGuide, footGuide,
...@@ -188,19 +185,31 @@ export default { ...@@ -188,19 +185,31 @@ export default {
}, },
methods: { methods: {
async initData() { async initData() {
let p1 = getNearbyShop( // 获取附近的商家
this.curLocation.lat, let p1 = getNearbyShop(this.curLocation.lat, this.curLocation.lng);
this.curLocation.lng
); // 获取附近的商家
let p2 = getReceivingAddress(); // 获取默认的收货地址 let p2 = getReceivingAddress(); // 获取默认的收货地址
let p3 = getUser(); let p3 = getUser();
Promise.all([p1,p2,p3]) Promise.all([p1, p2, p3])
.then(result => { .then(result => {
let shopsData = result[0].data;
shopsData["discount"] = [
{
rule_id: 4,
condition: "20.00",
amount: "1.00"
},
{
rule_id: 4,
condition: "30.00",
amount: "5.00"
}
];
this.shopsData = [shopsData];
let addressData = result[1].data; let addressData = result[1].data;
let userInfoData = result[2].data; let userInfoData = result[2].data;
this.$store.commit("RECORD_USERINFO",userInfoData.user_info); this.$store.commit("RECORD_USERINFO", userInfoData.user_info);
this.loading = false; this.loading = false;
}) })
......
src/views/location/choise.vue
View file @ fbc3b41c
...@@ -34,8 +34,7 @@ ...@@ -34,8 +34,7 @@
<div v-if="poisData==null" class="no-data text-base"> <div v-if="poisData==null" class="no-data text-base">
<cube-loading :size="24"></cube-loading>正在定位 <cube-loading :size="24"></cube-loading>正在定位
</div> </div>
<div v-else-if="poisData.length==0" class="empty_tips"><p>找不到地址？</p> <p>尝试输入小区、写字楼或学校名</p> <p>详细地址（如门牌号等）可稍后输入哦</p></div>
<div v-else-if="poisData.length==0" class="no-data text-base">地址查询失败</div>
</cube-scroll> </cube-scroll>
</div> </div>
</div> </div>
...@@ -114,11 +113,11 @@ export default { ...@@ -114,11 +113,11 @@ export default {
if (self.hasPosition) { if (self.hasPosition) {
let position = self.$route.query.geohash.split(","); let position = self.$route.query.geohash.split(",");
positionPicker.start([31.19, 121.7]); positionPicker.start(position);
} else { } else {
positionPicker.start(); positionPicker.start();
} }
positionPicker.start([31.19, 121.7]);
//TODO:事件绑定、结果处理等 //TODO:事件绑定、结果处理等
}); });
AMapUI.loadUI(["control/BasicControl"], function(BasicControl) { AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
......
src/views/order/index.vue
View file @ fbc3b41c
<template> <template>
<div class="container scroll-list-wrap"> <div class="container scroll-list-wrap">
<cube-loading v-if="pageLoading" :size="40"></cube-loading> <cube-loading v-if="pageLoading" :size="40"></cube-loading>
<!--
<van-list
v-if="orderList.length&&!pageLoading"
v-model="loading"
:finished="finished"
@load="onLoad"
:offset="10"
>-->
<cube-scroll <cube-scroll
v-if="orderList.length&&!pageLoading" v-if="orderList.length&&!pageLoading"
ref="scroll" ref="scroll"
...@@ -17,7 +9,13 @@ ...@@ -17,7 +9,13 @@
@pulling-down="onPullingDown" @pulling-down="onPullingDown"
@pulling-up="onPullingUp" @pulling-up="onPullingUp"
> >
<order-card :data="orderList" @select="orderDetail" @show="linkShop" @more="anotherOrder " class="content"></order-card> <order-card
:data="orderList"
@select="orderDetail"
@show="linkShop"
@more="anotherOrder "
class="content"
></order-card>
</cube-scroll> </cube-scroll>
<van-row <van-row
...@@ -38,49 +36,39 @@ ...@@ -38,49 +36,39 @@
import orderCard from "@/components/order-card.vue"; import orderCard from "@/components/order-card.vue";
import footGuide from "../../components/footer"; import footGuide from "../../components/footer";
import { getOrder } from "../../common/serve"; import { getOrder } from "../../common/serve";
import {mapState } from 'vuex'; import { mapState } from "vuex";
export default { export default {
data() { data() {
return { return {
pageLoading: true, pageLoading: true,
orderList: [], orderList: [],
pageNumber: 1, pageNumber: 1,
loading: false, //控制上拉加载的加载动画 last_page: 1
/* loading: false, //控制上拉加载的加载动画
finished: false, //控制在页面往下移动到底部时是否调用接口获取数据 finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
isLoading: false //控制下拉刷新的加载动画 isLoading: false //控制下拉刷新的加载动画 */
}; };
}, },
computed: { computed: {
...mapState(["location","choosed_address","cartList"]), ...mapState(["location", "choosed_address", "cartList"]),
// 当前使用的定位 // 当前使用的定位
curLocation(){ curLocation() {
return this.choosed_address.lat?this.choosed_address:(this.location.lat?this.location:'定位中') return this.choosed_address.lat
? this.choosed_address
: this.location.lat
? this.location
: "定位中";
}, },
options() { options() {
return { return {
pullDownRefresh: this.pullDownRefreshObj, pullDownRefresh: {
pullUpLoad: this.pullUpLoadObj, threshold: 40,
scrollbar: true stop: 40,
},
pullUpLoad: {
threshold: 20,
}
}; };
},
pullDownRefreshObj: function() {
return this.pullDownRefresh
? {
threshold: 10,
txt: '13'
}
: false;
},
pullUpLoadObj: function() {
return this.pullUpLoad
? {
threshold: 10,
txt: {
more: '加载更多...',
noMore: ''
}
}
: false;
} }
}, },
components: { components: {
...@@ -92,13 +80,33 @@ export default { ...@@ -92,13 +80,33 @@ export default {
}, },
methods: { methods: {
initData() { initData() {
this.getOrder(); this._getOrder();
}, },
async getOrder() { async _getOrder() {
//获取不同类型的订单 //获取不同类型的订单
const orderType = "all"; const orderType = "all";
let res = await getOrder(orderType, this.pageNumber); let res = await getOrder(orderType, this.pageNumber);
if (res.code == 0) { if (res.code == 0) {
this.orderList = this.orderList.concat(res.data.data);
if (this.pageNumber > res.data.last_page) {
// 结束加载
this.$refs.scroll.forceUpdate();
this.options.pullUpLoad = false;
}
this.pageNumber++;
// 页面初始化是加载动画
if (this.pageNumber <= 2) {
this.pageLoading = false;
}
} else {
// 如果没有新数据
this.$refs.scroll.forceUpdate();
}
/* if (res.code == 0) {
this.orderList = this.orderList.concat(res.data.data); this.orderList = this.orderList.concat(res.data.data);
this.loading = false; //停止加载状态 this.loading = false; //停止加载状态
if (this.pageNumber > res.data.page.count) { if (this.pageNumber > res.data.page.count) {
...@@ -109,48 +117,46 @@ export default { ...@@ -109,48 +117,46 @@ export default {
} else { } else {
this.finished = true; this.finished = true;
} }
// 页面初始化是加载动画 // 页面初始化是加载动画
if (this.pageNumber <= 2) { if (this.pageNumber <= 2) {
this.pageLoading = false; this.pageLoading = false;
} }
this.loading = false; this.loading = false; */
}, },
onPullingDown() { onPullingDown() {
// 模拟更新数据 this.pageNumber=1;
setTimeout(() => { this.orderList = [];
if (Math.random() > 0.5) { this._getOrder();
// 如果有新数据
this.items.unshift(_foods[1]);
} else {
// 如果没有新数据
this.$refs.scroll.forceUpdate();
}
}, 1000);
}, },
onPullingUp() { onPullingUp() {
// 模拟更新数据 this._getOrder();
setTimeout(() => {
if (Math.random() > 0.5) {
// 如果有新数据
let newPage = _foods.slice(0, 5);
this.items = this.items.concat(newPage);
} else {
// 如果没有新数据
this.$refs.scroll.forceUpdate();
}
}, 1000);
}, },
orderDetail(order_no) { orderDetail(order_no) {
this.$router.push({ name: "orderDetails", params: { order_no: order_no } }); this.$router.push({
name: "orderDetails",
params: { order_no: order_no }
});
}, },
linkShop(shopId) { linkShop(shopId) {
this.$router.push({ name: "shop", params: { id: shopId },query:{geohash:this.curLocation.lat+','+this.curLocation.lng }}); this.$router.push({
name: "shop",
params: { id: shopId },
query: { geohash: this.curLocation.lat + "," + this.curLocation.lng }
});
}, },
// 再来一单 // 再来一单
anotherOrder(shopId,order_no){ anotherOrder(shopId, order_no) {
this.$router.push({ name: "shop", params: { id: shopId },query:{geohash:this.curLocation.lat+','+this.curLocation.lng,order_no: order_no} }); this.$router.push({
}, name: "shop",
params: { id: shopId },
query: {
geohash: this.curLocation.lat + "," + this.curLocation.lng,
order_no: order_no
}
});
}
}, },
watch: { watch: {
"$route.query": function(newVal, oldVal) { "$route.query": function(newVal, oldVal) {
...@@ -167,9 +173,11 @@ export default { ...@@ -167,9 +173,11 @@ export default {
.scroll-list-wrap { .scroll-list-wrap {
bottom: 50px; bottom: 50px;
} }
.cube-scroll-list-wrapper{
background :transparent; .cube-scroll-list-wrapper {
} background: transparent;
}
.content { .content {
padding: 10px; padding: 10px;
} }
......
src/views/search/food-search.vue 0 → 100644
View file @ fbc3b41c
<template>
<div>
<form action="/">
<van-search
v-model="keyword"
placeholder="请输入搜索关键词"
show-action
shape="round"
@cancel="onCancel"
@input="onChange"
/>
</form>
<!-- 输入提示的容器对象 -->
<div v-if="result.length" class="scroll-list-wrap">
<cube-scroll ref="scroll">
<div class="amap-ui-poi-picker-sugg">
<ul class="amap-ui-poi-picker-sugg-list">
<van-cell v-for="item in result" :key="item.shop_id" @click="onRouterLink(item)">
<van-image slot="icon" width="60" height="60" :src="$globalUrlFile +item.icon"></van-image>
<span slot="title" class="text-medium">{{item.name}}</span>
<span slot="label" class="text-base">月售40</span>
</van-cell>
</ul>
</div>
</cube-scroll>
</div>
<!-- 搜索历史记录 -->
<div class="container">
<cube-scroll ref="scroll">
<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.shop_id"
size="large"
color="#f1f1f1"
class="text-default-gray"
@click="onRouterLink(tag)"
>{{tag.name}}</van-tag>
</div>
</van-row>
<div v-else-if="keyword==''&& searchHistory.length==0" class="empty_tips">
<p>暂无搜索数据</p>
</div>
</cube-scroll>
</div>
</div>
</template>
<script>
import { localstorage } from "../../common/utils/mUtils";
import { search } from "../../common/serve";
let vm = {};
export default {
data() {
vm = this;
return {
geohash: "", // 当前经纬度
keyword: "",
result: [
{
code: null,
created_at: "2019-07-05 14:51:59",
has_inventory: "off",
icon: "files/shop/77/image/1815146a-6402-43df-9752-c1b4023f5d70.jpg",
id: 1078,
name: "农家辣子鸡",
name2: null,
name3: null,
price: "50.00",
status: "normal",
store: 0,
unit: "默认单位"
}
], // 展示搜索结果
searchHistory: [] // 搜索历史记录
};
},
mounted() {
const storage = localstorage.fetch("search-shop");
if (storage.length) {
this.searchHistory = storage;
}
this.geohash = this.$route.query.geohash;
},
methods: {
/**
* 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
* 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
*/
recordHistory(target) {
let repeatItem = this.searchHistory.find(
item => item.shop_id == target.shop_id
);
if (typeof repeatItem == "undefined") {
this.searchHistory.push({ shop_id: target.shop_id, name: target.name });
}
localstorage.save("search-shop", this.searchHistory);
},
onClearHistory() {
this.$createDialog({
type: "confirm",
icon: "cubeic-alert",
title: "",
content: "确认删除全部历史记录？",
confirmBtn: {
text: "删除",
active: true
},
cancelBtn: {
text: "取消"
},
onConfirm: () => {
localstorage.remove("search-shop");
this.searchHistory = [];
}
}).show();
},
onCancel() {
this.$router.replace({
name: "home"
});
},
// 进入对应店铺
onRouterLink(shop) {
this.recordHistory(shop);
this.$router.push({
name: "shop",
params: { id: shop.shop_id },
query: { geohash: this.geohash }
});
},
async onChange(e) {
if (this.keyword == "") {
this.result = [];
}
let res = await search({ keyword: this.keyword, shop_id: 77 });
if (res.code == 0) {
this.result = res.data.data;
}
}
}
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl';
.scroll-list-wrap {
top: 50px;
z-index: 999;
background: #fff;
.van-image {
margin-right: 10px;
}
}
.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/search/home-search.vue 0 → 100644
View file @ fbc3b41c
<template>
<div>
<form action="/">
<van-search
v-model="keyword"
placeholder="请输入搜索关键词"
show-action
shape="round"
@cancel="onCancel"
@input="onChange"
/>
</form>
<!-- 输入提示的容器对象 -->
<div v-if="result.length" class="scroll-list-wrap">
<cube-scroll ref="scroll">
<div class="amap-ui-poi-picker-sugg">
<ul class="amap-ui-poi-picker-sugg-list">
<van-cell :title="keyword" icon="location-o" />
<van-cell v-for="item in result" :key="item.shop_id" @click="onRouterLink(item)">
<van-image slot="icon" width="30" height="30" :src="$globalUrlFile +item.icon"></van-image>
<span slot="title" class="text-medium">{{item.name}}</span>
<span slot="label" class="text-base">评分4.6</span>
</van-cell>
</ul>
</div>
</cube-scroll>
</div>
<!-- 搜索历史记录 -->
<div class="container">
<cube-scroll ref="scroll">
<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.shop_id"
size="large"
color="#f1f1f1"
class="text-default-gray"
@click="onRouterLink(tag)"
>{{tag.name}}</van-tag>
</div>
</van-row>
<div v-else-if="keyword==''&& searchHistory.length==0" class="empty_tips">
<p>暂无搜索数据</p>
</div>
</cube-scroll>
</div>
</div>
</template>
<script>
import { localstorage } from "../../common/utils/mUtils";
import { search } from "../../common/serve";
let vm = {};
export default {
data() {
vm = this;
return {
geohash: "", // 当前经纬度
keyword: "",
result: [
/* {
shop_id: 77,
code: null,
created_at: "2019-07-05 14:51:59",
has_inventory: "off",
icon: "files/shop/77/image/1815146a-6402-43df-9752-c1b4023f5d70.jpg",
id: 1078,
name: "农家辣子鸡",
name2: null,
name3: null,
price: "50.00",
status: "normal",
store: 0,
unit: "默认单位"
} */
], // 展示搜索结果
searchHistory: [] // 搜索历史记录
};
},
mounted() {
const storage = localstorage.fetch("search-shop");
if (storage.length) {
this.searchHistory = storage;
}
this.geohash = this.$route.query.geohash;
},
methods: {
/**
* 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
* 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
*/
recordHistory(target) {
let repeatItem = this.searchHistory.find(
item => item.shop_id == target.shop_id
);
if (typeof repeatItem == "undefined") {
this.searchHistory.push({ shop_id: target.shop_id, name: target.name });
}
localstorage.save("search-shop", this.searchHistory);
},
onClearHistory() {
this.$createDialog({
type: "confirm",
icon: "cubeic-alert",
title: "",
content: "确认删除全部历史记录？",
confirmBtn: {
text: "删除",
active: true
},
cancelBtn: {
text: "取消"
},
onConfirm: () => {
localstorage.remove("search-shop");
this.searchHistory = [];
}
}).show();
},
onCancel() {
this.$router.replace({
name: "home"
});
},
// 进入对应店铺
onRouterLink(shop) {
this.recordHistory(shop);
this.$router.push({
name: "shop",
params: { id: shop.shop_id },
query: { geohash: this.geohash }
});
},
async onChange(e) {
if (this.keyword == "") {
this.result = [];
}
let res = await search({ keyword: this.keyword, shop_id: 77 });
if (res.code == 0) {
this.result = res.data.data;
}
}
}
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl';
.scroll-list-wrap {
top: 50px;
z-index: 999;
background: #fff;
.van-image {
margin-right: 10px;
}
}
.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/search/location-search.vue
View file @ fbc3b41c
...@@ -57,8 +57,11 @@ ...@@ -57,8 +57,11 @@
</div> </div>
</van-row> </van-row>
<div v-else-if="keyword==''&& searchHistory.length==0" class="empty_tips"><p>找不到地址？</p> <p>尝试输入小区、写字楼或学校名</p> <p>详细地址（如门牌号等）可稍后输入哦</p></div> <div v-else-if="keyword==''&& searchHistory.length==0" class="empty_tips">
<p>找不到地址？</p>
<p>尝试输入小区、写字楼或学校名</p>
<p>详细地址（如门牌号等）可稍后输入哦</p>
</div>
</cube-scroll> </cube-scroll>
</div> </div>
</div> </div>
...@@ -117,11 +120,16 @@ export default { ...@@ -117,11 +120,16 @@ export default {
}, },
//监听poi选中信息: 用户选中的poi点信息 存入Vuex //监听poi选中信息: 用户选中的poi点信息 存入Vuex
poiPickedFn(poi) { poiPickedFn(poi) {
this.$store.commit("RECORD_ADDRESS", {lat: poi.location.lat, lng: poi.location.lng, formattedAddress: poi.name}); this.$store.commit("RECORD_ADDRESS", {
this.$router.push({name:'home'}); lat: poi.location.lat,
lng: poi.location.lng,
formattedAddress: poi.name
});
this.$store.commit("CHOISE_POSITION", poi);
this.$router.go(-1);
}, },
setCurrentGeohash(tag){ setCurrentGeohash(tag) {
this.poiPickedFn(tag) this.poiPickedFn(tag);
}, },
onRouterLink(keyword) { onRouterLink(keyword) {
this.$router.replace({ this.$router.replace({
......
src/views/search/result/shops.vue 0 → 100644
View file @ fbc3b41c
<template>
<div>
123
</div>
</template>
src/views/setting/account.vue
View file @ fbc3b41c
<template> <template>
<div> <div>
<van-cell-group title="账号绑定" class="margin-bt-space"> <van-cell-group title="账号绑定" class="margin-bt-space">
<van-cell icon="phone-circle" is-link title="手机号" value="18871334707" to="bindPhone" /> <van-cell icon="phone-circle" is-link title="手机号" value="" to="bindPhone" />
</van-cell-group> </van-cell-group>
<section class="section"> <section class="section">
......
src/views/shopItem/children/shop.vue
View file @ fbc3b41c
...@@ -158,12 +158,12 @@ export default { ...@@ -158,12 +158,12 @@ export default {
if (msg.code == 0) { if (msg.code == 0) {
let cart = this.cartList, let cart = this.cartList,
data = msg.data.goods; data = msg.data.goods;
if (cart && cart[this.shopId]) { let shop = (cart[this.shopId] = {});
// if (cart && cart[this.shopId]) {
this.menuList.forEach((item, index) => { this.menuList.forEach((item, index) => {
item.goods_list.forEach(good => { item.goods_list.forEach(good => {
data.forEach(food => { data.forEach(food => {
if (food.goods_id == good.id) { if (food.goods_id == good.id) {
let shop = (cart[this.shopId] = {});
let category = (shop[item.category_id] = let category = (shop[item.category_id] =
shop[item.category_id] || {}); shop[item.category_id] || {});
category[food.goods_id] = { category[food.goods_id] = {
...@@ -177,7 +177,8 @@ export default { ...@@ -177,7 +177,8 @@ export default {
}); });
}); });
}); });
} // }else{}
this.$store.commit('UPDATE_SHOP_CART',cart)
console.log(cart); console.log(cart);
} }
} }
...@@ -321,7 +322,7 @@ export default { ...@@ -321,7 +322,7 @@ export default {
font-size: $fontsize-small; font-size: $fontsize-small;
.van-tag { .van-tag {
padding: 2px 4px; // padding: 2px 4px;
right: 0; right: 0;
top: 10%; top: 10%;
} }
......
src/views/shopItem/children/shopInfo.vue
View file @ fbc3b41c
...@@ -41,23 +41,8 @@ ...@@ -41,23 +41,8 @@
<span class="text">{{favoriteText}}</span> <span class="text">{{favoriteText}}</span>
</div> </div>
</div> </div>
<div class="bulletin section"> <!-- <div style="height:500px;"></div> -->
<h1 class="title">公告与活动</h1> <div v-if="seller.pics" class="pics section">
<div class="content-wrapper border-bottom-1px">
<p class="content">{{seller.bulletin}}</p>
</div>
<ul v-if="seller.supports" class="supports">
<li
class="support-item border-bottom-1px"
v-for="(item,index) in seller.supports"
:key="index"
>
<support-ico :size="4" :type="seller.supports[index].type"></support-ico>
<span class="text">{{seller.supports[index].description}}</span>
</li>
</ul>
</div>
<div class="pics section">
<h1 class="title">商家实景</h1> <h1 class="title">商家实景</h1>
<cube-scroll class="pic-wrapper" :options="picScrollOptions"> <cube-scroll class="pic-wrapper" :options="picScrollOptions">
<ul class="pic-list"> <ul class="pic-list">
...@@ -67,15 +52,12 @@ ...@@ -67,15 +52,12 @@
</ul> </ul>
</cube-scroll> </cube-scroll>
</div> </div>
<div class="info section">
<h1 class="title border-bottom-1px">商家信息</h1> <div class="section">
<ul> <van-cell title="商家名称" :value="seller.name"></van-cell>
<li <van-cell title="商家类型" :value="seller.shop_category"></van-cell>
class="info-item border-bottom-1px" <van-cell title="商家地址" :value="seller.area.replace(/,/g,'') +seller.address"></van-cell>
v-for="(info,index) in seller.infos" <van-cell title="商家电话" :value="seller.phone"></van-cell>
:key="index"
>{{info}}</li>
</ul>
</div> </div>
</div> </div>
</cube-scroll> </cube-scroll>
...@@ -237,50 +219,6 @@ export default { ...@@ -237,50 +219,6 @@ export default {
} }
} }
.bulletin {
padding: 18px 18px 0 18px;
white-space: normal;
.title {
margin-bottom: 8px;
line-height: 14px;
color: $color-dark-grey;
font-size: $fontsize-medium;
}
.content-wrapper {
padding: 0 12px 16px 12px;
.content {
line-height: 24px;
font-size: $fontsize-small;
color: $color-red;
}
}
.supports {
.support-item {
display: flex;
align-items: center;
padding: 16px 12px;
&:last-child {
border-none();
}
}
.support-ico {
margin-right: 6px;
}
.text {
line-height: 16px;
font-size: $fontsize-small;
color: $color-dark-grey;
}
}
}
.pics { .pics {
padding: 18px; padding: 18px;
...@@ -309,26 +247,5 @@ export default { ...@@ -309,26 +247,5 @@ export default {
} }
} }
} }
.info {
padding: 18px 18px 0 18px;
color: $color-dark-grey;
.title {
padding-bottom: 12px;
line-height: 14px;
font-size: $fontsize-medium;
}
.info-item {
padding: 16px 12px;
line-height: 16px;
font-size: $fontsize-small;
&:last-child {
border-none();
}
}
}
} }
</style> </style>
src/views/shopItem/index.vue
View file @ fbc3b41c
<template> <template>
<div class="scroll-list-wrap view-wrapper"> <div class="scroll-list-wrap view-wrapper">
<cube-sticky :pos="scrollY"> <cube-sticky
:pos="scrollY"
:check-top="checkTop"
fixed-show-ani="sticky-fixed-show"
@diff-change="diffChange"
>
<cube-scroll <cube-scroll
ref="scroll" ref="scroll"
:scroll-events="scrollEvents" :scroll-events="scrollEvents"
:options="options" :options="options"
@scroll="scrollHandler" @scroll="scrollHandler"
> >
<header class="sticky-header" slot="fixed" ref="stickyHeader">
<van-search placeholder="请输入搜索关键词" />
</header>
<section ref="header" class="page-hd"> <section ref="header" class="page-hd">
<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> <!-- 优惠内容 -->
<div class="tags">
<van-tag
v-for="tag in shopInfo.discount"
:key="tag.id"
color="#f44"
plain
size="10"
>{{parseInt(tag.condition) }}减{{parseInt(tag.amount)}}</van-tag>
<div class="more text-extra-small text-light-grey">
{{ shopInfo.discount.length}}个优惠
<i class="cubeic-select"></i>
</div>
</div>
</div> </div>
</section> </section>
<div class="page-bd"> <div class="page-bd">
...@@ -69,21 +91,19 @@ export default { ...@@ -69,21 +91,19 @@ export default {
disableInner: false, disableInner: false,
scrollY: 0, scrollY: 0,
scrollEvents: ["scroll"], scrollEvents: ["scroll"],
checkTop: true,
headerH: 0, // 头部高度 headerH: 0, // 头部高度
tabBarH: 0, //tabbar高度 tabBarH: 0, //tabbar高度
checkTop: false,
data: goods, data: goods,
shopId: 0, shopId: 0,
shopInfo: {}, shopInfo: {},
currentTab: "点餐", //当前导航 active 项的 key 值 currentTab: "点餐", //当前导航 active 项的 key 值
currentTabIndex: 1,
tabs: [ tabs: [
{ name: "点餐", is: "shopTab" }, { name: "点餐", is: "shopTab" },
{ name: "评价", is: "evaluate" }, { name: "评价", is: "evaluate" },
{ name: "商家", is: "shopInfo" } { name: "商家", is: "shopInfo" }
], ]
labels: ["点餐", "评价", "商家"]
}; };
}, },
created() { created() {
...@@ -101,12 +121,17 @@ export default { ...@@ -101,12 +121,17 @@ export default {
return document.body.clientHeight - this.tabBarH + "px"; return document.body.clientHeight - this.tabBarH + "px";
} }
}, },
mounted() { mounted() {
this.headerH = this.$refs.header.offsetHeight; // 包含tabbar 在内的头部高度 this.$nextTick(() => {
this.tabBarH = this.$refs.tabBar.offsetHeight; // tabbar 高度
this.headerH = this.$refs.header.offsetHeight; // 包含tabbar 在内的头部高度
this.tabBarH = this.$refs.tabBar.offsetHeight; // tabbar 高度
});
}, },
watch: { watch: {
disable(newVal) { //控制外层的滚动 disable(newVal) {
//控制外层的滚动
if (newVal) { if (newVal) {
this.enableFn(); this.enableFn();
} else { } else {
...@@ -123,12 +148,19 @@ export default { ...@@ -123,12 +148,19 @@ export default {
this.disable = true; this.disable = true;
} }
}, },
diffChange(diff, height) {
console.log(diff, height);
let opacity = 0;
if (height) {
opacity = diff / height;
}
this.$refs.stickyHeader.style.opacity = opacity;
},
changeHandler(label) { changeHandler(label) {
this.currentTab = label; this.currentTab = label;
console.log("changed to:", label); console.log("changed to:", label);
}, },
scrollTop() { scrollTop() {
console.log(132)
this.disable = true; this.disable = true;
}, },
async initData() { async initData() {
...@@ -145,6 +177,18 @@ export default { ...@@ -145,6 +177,18 @@ export default {
let shopMsg = result[1]; let shopMsg = result[1];
if (shopMsg.code == 0) { if (shopMsg.code == 0) {
this.shopInfo = shopMsg.data; this.shopInfo = shopMsg.data;
this.shopInfo["discount"] = [
{
rule_id: 4,
condition: "20.00",
amount: "1.00"
},
{
rule_id: 4,
condition: "30.00",
amount: "5.00"
}
];
this.$store.commit("CURRENT_SHOPINFO", shopMsg.data); this.$store.commit("CURRENT_SHOPINFO", shopMsg.data);
} }
}) })
...@@ -186,6 +230,25 @@ export default { ...@@ -186,6 +230,25 @@ export default {
p { p {
padding: 10px; padding: 10px;
} }
.tags {
position: relative;
text-align: left;
padding: 0 40px;
.van-tag {
margin-right: 6px;
}
.more {
position: absolute;
right: 40px;
top: 0;
height: 100%;
background: #fff;
box-shadow: -8px 0px 10px rgba(255, 255, 255, 0.8);
}
}
} }
} }
......
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