Commit 35d4fcdb authored by liumiss's avatar liumiss

店铺首页bug

parent fbc3b41c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sell</title> <title>sell</title>
......
<template> <template>
<div id="app"> <div id="app">
<router-view /> <keep-alive>
<!--这里是会被缓存的组件-->
<router-view v-if="this.$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!this.$route.meta.keepAlive"></router-view>
<!-- <router-view /> -->
</div> </div>
</template> </template>
......
...@@ -68,11 +68,12 @@ export const preorder = (shop_id,price, address_id, goods_list) => request('shop ...@@ -68,11 +68,12 @@ export const preorder = (shop_id,price, address_id, goods_list) => request('shop
// delivery_fee: 0 // delivery_fee: 0
}); });
// 店铺订单-下单 // 店铺订单-下单
export const placeOrder = ( shop_id,price, address_id, goods_list, order_type = "take_out") => request('shop/order', { export const placeOrder = ( shop_id,price, address_id, goods_list,message, order_type = "take_out") => request('shop/order', {
shop_id, shop_id,
price, price,
address_id, address_id,
goods_list, goods_list,
message,
order_type,// take_out下单 recharge充值 order_type,// take_out下单 recharge充值
}); });
......
...@@ -4,3 +4,6 @@ html, body ...@@ -4,3 +4,6 @@ html, body
font-size:16px font-size:16px
background: #f7f8fa background: #f7f8fa
strong{
font-weight: 600;
}
\ No newline at end of file
...@@ -9,14 +9,18 @@ ...@@ -9,14 +9,18 @@
.cube-form-item_required .cube-form-label::before .cube-form-item_required .cube-form-label::before
display:none display:none
// 颜色
.text-primary{ .text-primary{
color:$color-blue
}
.text-light-primary{
color:$color-light-blue color:$color-light-blue
} }
.text-light-grey{ .text-light-grey{
color:$color-light-grey color:$color-light-grey
} }
// 大小
.text-extra-small{ .text-extra-small{
font-size: $fontsize-small font-size: $fontsize-small
} }
...@@ -33,6 +37,8 @@ ...@@ -33,6 +37,8 @@
font-size: $fontsize-large-xx font-size: $fontsize-large-xx
} }
.bg-white{ .bg-white{
background: #fff; background: #fff;
} }
...@@ -108,10 +114,16 @@ ...@@ -108,10 +114,16 @@
.van-search .van-icon{ .van-search .van-icon{
font-size: 16px; font-size: 16px;
} }
.van-tag{ .tags .van-tag {
// padding:1px 4px; padding: 2px 4px;
margin-right: 6px;
line-height: 1;
} }
.fontw .van-cell .van-cell__title span{ .fontw .van-cell .van-cell__title span{
font-weight: 600; font-weight: 600;
} }
.cell-hg .van-cell{
padding: 14px 15px;
}
\ No newline at end of file
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
$color-background = rgba(7, 17, 27, 1) $color-background = rgba(7, 17, 27, 1)
$color-primary = #1296fa;
$color-green = #07c160 $color-green = #07c160
$color-dark-green = #06ae57 $color-dark-green = #06ae57
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
<div class="num_price"> <div class="num_price">
<span>x {{item.goods_quantity}}</span> <span>x {{item.goods_quantity}}</span>
<span>¥{{item.goods_price}}</span> <strong>¥{{item.goods_price}}</strong>
</div> </div>
</li> </li>
</ul> </ul>
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<script> <script>
export default { export default {
props: ['default'], props: ["default"],
data() { data() {
return { return {
selectedLabelDefault: this.default, selectedLabelDefault: this.default,
...@@ -41,6 +41,12 @@ export default { ...@@ -41,6 +41,12 @@ export default {
changeHandler(label) { changeHandler(label) {
this.$router.push({ name: label }); this.$router.push({ name: label });
} }
},
// keep-alive搭配activated 页面需要重新刷新请求数据
activated() {
if (this.default !== this.selectedLabelDefault) {
this.selectedLabelDefault = this.default;
}
} }
}; };
</script> </script>
...@@ -51,7 +57,11 @@ export default { ...@@ -51,7 +57,11 @@ export default {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
border-top: 1px solid #eee; border-top: 1px solid #eee;
background-color:#fff; background-color: #fff;
z-index:99; z-index: 99;
.cube-tab_active {
color: $color-primary;
}
} }
</style> </style>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
<div class="van-cell__value van-panel__header-value"> <div class="van-cell__value van-panel__header-value">
<span>{{order.order_status=='preparing'?'配送中':'已送达'}}</span> <span>{{order|orderStatus}}</span>
</div> </div>
</div> </div>
...@@ -23,21 +23,39 @@ ...@@ -23,21 +23,39 @@
</span> </span>
</van-cell> </van-cell>
<div slot="footer"> <div slot="footer">
<van-button size="small" color="#1f81be" @click="onMore(77,order.order_no)" plain>再来一单</van-button> <van-button
v-if="order.order_status=='unpaid'"
size="small"
color="#1296fa"
@click="onPay(77,order.order_no)"
plain
>去支付</van-button>
<van-button
v-if="order.order_status=='received'"
size="small"
color="#1296fa"
@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"> <van-panel
<div slot="header" class="van-cell van-panel__header" @click="onShow(77)"> v-else-if="order.order_type=='recharge'"
class="margin-bt-space"
@click="onSelect(order.order_type)"
>
<div slot="header" class="van-cell van-panel__header">
<div class="van-cell__title"> <div class="van-cell__title">
<span>充值订单</span> <span>充值订单</span>
</div> </div>
<div class="van-cell__value van-panel__header-value"> <div class="van-cell__value van-panel__header-value">
<span>充值成功</span> <span>{{order | orderStatus}}</span>
</div> </div>
</div> </div>
<van-cell @click="onSelect(order.order_type,order.order_no)"> <van-cell>
<div slot="title"> <div slot="title">
<p class="word-one">{{order.goods_name}}</p> <p class="word-one">{{order.goods_name}}</p>
</div> </div>
...@@ -59,6 +77,29 @@ export default { ...@@ -59,6 +77,29 @@ export default {
default: null default: null
} }
}, },
filters: {
orderStatus(value) {
let status = "";
if (value.order_type == "take_out") {
if (value.order_status == "unpaid") {
status = "等待支付";
} else if (value.order_status == "preparing") {
status = "配送中";
} else if (value.order_status == "received") {
status = "已送达";
} else {
status = "配送中";
}
} else if (value.order_type == "recharge") {
if (value.order_status == "unpaid") {
status = "充值失败";
} else {
status = "充值成功";
}
}
return status;
}
},
methods: { methods: {
onCallBack(order_no) { onCallBack(order_no) {
this.$emit("select", order_no); this.$emit("select", order_no);
...@@ -66,6 +107,9 @@ export default { ...@@ -66,6 +107,9 @@ export default {
onMore(shopId, order_no) { onMore(shopId, order_no) {
this.$emit("more", shopId, order_no); this.$emit("more", shopId, order_no);
}, },
onPay(shopId,order_no) {
this.$emit("pay", shopId,order_no);
},
onSelect(order_type, order_no) { onSelect(order_type, order_no) {
if (order_type == "recharge") { if (order_type == "recharge") {
this.$createToast({ this.$createToast({
...@@ -78,7 +122,8 @@ export default { ...@@ -78,7 +122,8 @@ export default {
}, },
onShow(shopId) { onShow(shopId) {
this.$emit("show", shopId); this.$emit("show", shopId);
} },
} }
}; };
</script> </script>
...@@ -92,9 +137,11 @@ export default { ...@@ -92,9 +137,11 @@ 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; &__header .van-cell__title span {
font-weight: 600;
} }
&__content { &__content {
padding-left: 12%; padding-left: 12%;
} }
......
...@@ -22,10 +22,10 @@ export default { ...@@ -22,10 +22,10 @@ export default {
type: "wexin", type: "wexin",
name: "微信支付" name: "微信支付"
}, },
{ // {
type: "banlence", // type: "banlence",
name: "余额支付" // name: "余额支付"
}, // },
{ {
type: "apliay", type: "apliay",
name: "支付宝" name: "支付宝"
......
...@@ -101,10 +101,6 @@ export default { ...@@ -101,10 +101,6 @@ export default {
.tags { .tags {
padding: 4px 0; padding: 4px 0;
.van-tag {
margin-right: 6px;
}
} }
} }
</style> </style>
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
:minPrice="minPrice" :minPrice="minPrice"
:fold="fold" :fold="fold"
:sticky="true" :sticky="true"
:toggle='toggle'
></shop-cart> ></shop-cart>
</div> </div>
</template> </template>
...@@ -45,6 +46,10 @@ export default { ...@@ -45,6 +46,10 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
toggle: {// 是否主动展示列表
type: Boolean,
// default: false
},
list: { list: {
type: Object, type: Object,
default() { default() {
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
:class="{cart_icon_activity: totalPrice > 0}" :class="{cart_icon_activity: totalPrice > 0}"
ref="cartContainer" ref="cartContainer"
> >
<i class="cubeic-alert cart_icon"></i> <i class="van-icon van-icon-shopping-cart cart_icon"></i>
<div class="num"> <div class="num">
<van-tag v-show="totalCount>0" round type="danger">{{totalCount}}</van-tag> <van-tag v-show="totalCount>0" round type="danger">{{totalCount}}</van-tag>
</div> </div>
...@@ -42,11 +42,12 @@ ...@@ -42,11 +42,12 @@
</transition> </transition>
</div> </div>
</div> </div>
</div> --> </div>-->
</div> </div>
</template> </template>
<script> <script>
import { setTimeout } from "timers";
// import Bubble from 'components/bubble/bubble' // import Bubble from 'components/bubble/bubble'
const BALL_LEN = 10; const BALL_LEN = 10;
...@@ -85,9 +86,13 @@ export default { ...@@ -85,9 +86,13 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
toggle: {
type: Boolean,
default: false
},
shopId: { shopId: {
type: String type: String
}, }
}, },
data() { data() {
return { return {
...@@ -98,6 +103,15 @@ export default { ...@@ -98,6 +103,15 @@ export default {
created() { created() {
this.dropBalls = []; this.dropBalls = [];
}, },
mounted() {
setTimeout(() => {
this.$nextTick(() => {
if (this.toggle && this.totalCount != 0) {
this.toggleList();
}
});
}, 400);
},
computed: { computed: {
totalPrice() { totalPrice() {
let total = 0; let total = 0;
...@@ -157,7 +171,11 @@ export default { ...@@ -157,7 +171,11 @@ export default {
e.stopPropagation(); e.stopPropagation();
*/ */
let geohash = this.$route.query.geohash; let geohash = this.$route.query.geohash;
this.$router.push({name:'confirmOrder',params:{shopId:this.shopId},query:{geohash:geohash}}); this.$router.push({
name: "confirmOrder",
params: { shopId: this.shopId },
query: { geohash: geohash }
});
}, },
drop(el) { drop(el) {
for (let i = 0; i < this.balls.length; i++) { for (let i = 0; i < this.balls.length; i++) {
...@@ -269,9 +287,13 @@ export default { ...@@ -269,9 +287,13 @@ export default {
.cart_icon_container { .cart_icon_container {
position: absolute; position: absolute;
top: -20px; top: -20px;
left:2%;
wh(60px, 60px); wh(60px, 60px);
font-size: 60px; font-size: 60px;
.van-icon {
font-size: 40px;
}
.num { .num {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -309,6 +331,7 @@ export default { ...@@ -309,6 +331,7 @@ export default {
&.no-enough { &.no-enough {
scw(12px, #fff); scw(12px, #fff);
} }
&.enough { &.enough {
background-color: #4cd964; background-color: #4cd964;
} }
...@@ -319,7 +342,7 @@ export default { ...@@ -319,7 +342,7 @@ export default {
.ball { .ball {
left: 32px; left: 32px;
bottom: 22px; bottom: 22px;
wh(14px,14px); wh(14px, 14px);
z-index: 200; z-index: 200;
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41); transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
......
...@@ -5,8 +5,10 @@ import ShopCartList from 'components/shopCart/shop-cart-list' ...@@ -5,8 +5,10 @@ import ShopCartList from 'components/shopCart/shop-cart-list'
import ShopCartStikcy from 'components/shopCart/shop-cart-sticky' import ShopCartStikcy from 'components/shopCart/shop-cart-sticky'
import Food from "./views/shopItem/children/food-detail" import Food from "./views/shopItem/children/food-detail"
import HeaderDetail from "./views/shopItem/children/headerDetail/header-detail"
createAPI(Vue, ShopCartList) createAPI(Vue, ShopCartList)
createAPI(Vue, ShopCartStikcy) createAPI(Vue, ShopCartStikcy)
createAPI(Vue, Food) createAPI(Vue, Food)
createAPI(Vue,HeaderDetail)
\ No newline at end of file
...@@ -45,16 +45,19 @@ export default new Router({ ...@@ -45,16 +45,19 @@ export default new Router({
path: "/", path: "/",
name: "home", name: "home",
component: home, component: home,
meta: { title: '', keepAlive: false }
}, },
{ {
path: "/order", path: "/order",
name: "orderIndex", name: "orderIndex",
component: orderIndex component: orderIndex,
meta: { title: '', keepAlive: false }
}, },
{ {
path: "/mine", path: "/mine",
name: "mineIndex", name: "mineIndex",
component: mineIndex component: mineIndex,
meta: { title: '', keepAlive: false }
}, },
{ {
path: "/address/select", path: "/address/select",
......
...@@ -7,6 +7,7 @@ Vue.use(Vuex) ...@@ -7,6 +7,7 @@ Vue.use(Vuex)
const state = { const state = {
login:false, login:false,
rejectLogin:false, // 提示登录弹框是否显示
userInfo:{}, userInfo:{},
location: { lat: '', lng: '', formattedAddress: '' }, // 当前地图定位 location: { lat: '', lng: '', formattedAddress: '' }, // 当前地图定位
choosed_address:{lat: '', lng: '', formattedAddress: ''}, // 当前定位使用的地址信息 choosed_address:{lat: '', lng: '', formattedAddress: ''}, // 当前定位使用的地址信息
......
...@@ -147,4 +147,8 @@ export default { ...@@ -147,4 +147,8 @@ export default {
state.userInfo = {}; state.userInfo = {};
state.login = false; state.login = false;
}, },
// 首页已拒绝登录,则不再显示提示登录弹框
REJECT_LOGIN(state){
state.rejectLogin = true;
}
} }
\ No newline at end of file
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</van-cell> </van-cell>
</section> </section>
<section class="section"> <section v-if="addressList.length" class="section">
<van-cell> <van-cell>
<span slot="title" class="text-extra-small text-light-grey">收货地址</span> <span slot="title" class="text-extra-small text-light-grey">收货地址</span>
<span slot="right-icon" class="text-primary" @click="onLink('address')">管理地址</span> <span slot="right-icon" class="text-primary" @click="onLink('address')">管理地址</span>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<van-cell <van-cell
title="新增地址" title="新增地址"
is-link is-link
class="text-primary" class="text-light-primary"
@click="onLink('addAddress')" @click="onLink('addAddress')"
/> />
</van-col> </van-col>
......
...@@ -71,7 +71,9 @@ import pay from "@/components/pay.vue"; ...@@ -71,7 +71,9 @@ import pay from "@/components/pay.vue";
import confirmFoodsList from "@/components/confirm-foods-list.vue"; import confirmFoodsList from "@/components/confirm-foods-list.vue";
import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from "vuex";
import { preorder, placeOrder } from "../../common/serve"; import { preorder, placeOrder, weChatConfig } from "../../common/serve";
import payUtils from "../../common/utils/pay";
export default { export default {
data() { data() {
...@@ -122,8 +124,8 @@ export default { ...@@ -122,8 +124,8 @@ export default {
...mapState([ ...mapState([
"cartList", "cartList",
"shopInfo", "shopInfo",
"choosed_address", "choosed_address", // 收货地址
"remarkText", "remarkText", // 备注
"invoice", "invoice",
"userInfo" "userInfo"
...@@ -160,6 +162,14 @@ export default { ...@@ -160,6 +162,14 @@ export default {
this.checkoutData = msg.data; this.checkoutData = msg.data;
} }
this.showLoading = false; this.showLoading = false;
// 2、微信初始化
if (/MicroMessenger/.test(window.navigator.userAgent)) {
let msg = await weChatConfig(window.location.href, ["chooseWXPay"]);
if (msg.code == 0) {
payUtils.WxConfig(msg.data);
}
}
}, },
//获取地址信息,第一个地址为默认选择地址 //获取地址信息,第一个地址为默认选择地址
/* async initAddress() { /* async initAddress() {
...@@ -187,14 +197,15 @@ export default { ...@@ -187,14 +197,15 @@ export default {
this.shopId, this.shopId,
this.checkoutData.price_final, this.checkoutData.price_final,
this.choosed_address.id, this.choosed_address.id,
this.needbuy this.needbuy,
this.remarkText
); );
if (res.code == 0) { if (res.code == 0) {
this.order_no = res.data.order_no; this.order_no = res.data.order_no;
// 预下单商品检测成功后执行支付操作 // 预下单商品检测成功后执行支付操作
this.showActionSheet = true; this.showActionSheet = true;
} else { } else {
this.submitBarTip = res.message this.submitBarTip = res.message;
} }
this.btnLoading = false; this.btnLoading = false;
}, },
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<i class="cubeic-location text-primary text-extra-large"></i> <i class="cubeic-location text-primary text-extra-large"></i>
<span class="text-medium">{{curLocation.formattedAddress}}</span> <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-medium"></i>
</div> </div>
<div id="amap"></div> <div id="amap"></div>
</div> </div>
...@@ -26,7 +26,11 @@ ...@@ -26,7 +26,11 @@
<!-- 搜索框 --> <!-- 搜索框 -->
<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" @click="onRouterLink('homeSearch',{geohash:curLocation.lat+','+curLocation.lng})"></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>
...@@ -57,10 +61,13 @@ ...@@ -57,10 +61,13 @@
<!-- 附近商家 --> <!-- 附近商家 -->
<section class="section"> <section class="section">
<div class="section-hd">附件商家</div> <div class="section-hd">附近商家</div>
<ul class="cards"> <ul v-if="shopsData.length" class="cards">
<shop-list :options="shopsData" :location="curLocation"></shop-list> <shop-list :options="shopsData" :location="curLocation"></shop-list>
</ul> </ul>
<div v-else class="empty_tips">
<p>附近暂无商家</p>
</div>
</section> </section>
</cube-scroll> </cube-scroll>
</cube-sticky> </cube-sticky>
...@@ -167,7 +174,7 @@ export default { ...@@ -167,7 +174,7 @@ export default {
this.initData(); this.initData();
}, },
computed: { computed: {
...mapState(["location", "choosed_address"]), ...mapState(["location", "choosed_address", "rejectLogin"]),
// 当前使用的定位 // 当前使用的定位
curLocation() { curLocation() {
console.log(this.location); console.log(this.location);
...@@ -191,6 +198,13 @@ export default { ...@@ -191,6 +198,13 @@ export default {
let p3 = getUser(); let p3 = getUser();
Promise.all([p1, p2, p3]) Promise.all([p1, p2, p3])
.then(result => { .then(result => {
// if (result[0].code == 1003) {
// this.loading = false;
// if (!this.rejectLogin) this.noLoginDialog();
// return;
// }
if (result[0].code == 0) {
let shopsData = result[0].data; let shopsData = result[0].data;
shopsData["discount"] = [ shopsData["discount"] = [
{ {
...@@ -205,6 +219,9 @@ export default { ...@@ -205,6 +219,9 @@ export default {
} }
]; ];
this.shopsData = [shopsData]; this.shopsData = [shopsData];
}else{
this.options.pullUpLoad = false
}
let addressData = result[1].data; let addressData = result[1].data;
...@@ -221,7 +238,6 @@ export default { ...@@ -221,7 +238,6 @@ export default {
scrollHandler({ y }) { scrollHandler({ y }) {
this.scrollY = -y; this.scrollY = -y;
}, },
onBtnClick() {},
onSlideEvent(item, index) { onSlideEvent(item, index) {
console.log(item, index); console.log(item, index);
...@@ -233,20 +249,6 @@ export default { ...@@ -233,20 +249,6 @@ export default {
} }
this.$router.push({ name: route }); this.$router.push({ name: route });
}, },
// 获取数据
loadData() {
return;
api
.allMsg({})
.then(res => {
if (res.Code == 200) {
this.msg = res.Response;
}
})
.catch(err => {
console.log(err);
});
},
// 触发下拉刷新 // 触发下拉刷新
onPullingDown() { onPullingDown() {
console.log("下拉刷新"); console.log("下拉刷新");
...@@ -277,6 +279,26 @@ export default { ...@@ -277,6 +279,26 @@ export default {
this.$refs.scroll.forceUpdate(); this.$refs.scroll.forceUpdate();
} }
}, 1000); }, 1000);
},
noLoginDialog() {
this.$createDialog({
type: "confirm",
title: "温馨提示",
content: "登录后可获取更多优质服务",
confirmBtn: {
text: "去登录"
},
cancelBtn: {
text: "取消"
},
onConfirm: () => {
this.$router.push({ name: "login" });
this.$store.commit("REJECT_LOGIN");
},
onCancel: () => {
this.$store.commit("REJECT_LOGIN");
}
}).show();
} }
} }
}; };
...@@ -298,6 +320,10 @@ export default { ...@@ -298,6 +320,10 @@ export default {
top: 0; top: 0;
left: 60%; left: 60%;
background-color: #fff; background-color: #fff;
.cubeic-select {
padding: 6px;
}
} }
} }
...@@ -313,4 +339,5 @@ export default { ...@@ -313,4 +339,5 @@ export default {
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div> <div>
<cube-form :model="model" @validate="validateHandler" skipValidate> <cube-form :model="model" @validate="validateHandler">
<cube-form-group> <cube-form-group>
<cube-form-item :field="fields[0]"></cube-form-item> <cube-form-item :field="fields[0]"></cube-form-item>
<div class="form-group"> <div class="form-group">
<cube-form-item :field="fields[1]"></cube-form-item> <cube-form-item :field="fields[1]"></cube-form-item>
<van-button <van-button
type="primary" size="mini" type="primary"
size="small"
:disabled="disabled" :disabled="disabled"
inline inline
class="field__button" class="field__button"
...@@ -15,15 +16,15 @@ ...@@ -15,15 +16,15 @@
</div> </div>
</cube-form-group> </cube-form-group>
<cube-form-group class> <cube-form-group class>
<van-button type="primary" size="large" @click="submitHandler">登录</van-button> <van-button type="primary" size="large" @click.prevent="submitHandler">登录</van-button>
</cube-form-group> </cube-form-group>
</cube-form> </cube-form>
</div> </div>
</template> </template>
<script> <script>
import { getCode,loginByCode } from "../../common/serve.js"; import { getCode, loginByCode, getUser } from "../../common/serve.js";
import { sessionstorage } from "../../common/utils/mUtils";
export default { export default {
data() { data() {
return { return {
...@@ -67,6 +68,13 @@ export default { ...@@ -67,6 +68,13 @@ export default {
}, },
methods: { methods: {
async onGetCode() { async onGetCode() {
if (this.inputValue == "") {
this.$createToast({
txt: "请输入正确的手机号",
type: "txt"
}).show();
return;
}
this.disabled = true; this.disabled = true;
let res = await getCode(this.model.inputValue); let res = await getCode(this.model.inputValue);
if (res.code == 0) { if (res.code == 0) {
...@@ -86,7 +94,8 @@ export default { ...@@ -86,7 +94,8 @@ export default {
async toLogin() { async toLogin() {
let res = await loginByCode(this.model.inputValue, this.model.codeValue); let res = await loginByCode(this.model.inputValue, this.model.codeValue);
if (res.code == 0) { if (res.code == 0) {
localStorage.setItem("isLogin", true); // sessionstorage.save("isLogin", true);
this._getUserInfo();
this.$createToast({ this.$createToast({
txt: "登录成功", txt: "登录成功",
time: 1000, time: 1000,
...@@ -102,10 +111,18 @@ export default { ...@@ -102,10 +111,18 @@ export default {
} }
this.actBtnLoading = false; this.actBtnLoading = false;
}, },
// 获取用户信息,存入vuex
async _getUserInfo() {
let res = await getUser();
if (res.code == 0) {
this.$store.commit("RECORD_USERINFO", res.data.user_info);
}
},
// 满足验证结果,则去登录
submitHandler(e) { submitHandler(e) {
e.stopPropagation() if (this.valid) this.toLogin();
this.toLogin();
}, },
// 表单验证的结果
validateHandler(result) { validateHandler(result) {
this.validity = result.validity; this.validity = result.validity;
this.valid = result.valid; this.valid = result.valid;
...@@ -134,7 +151,6 @@ export default { ...@@ -134,7 +151,6 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.form-group { .form-group {
position: relative; position: relative;
......
...@@ -26,20 +26,25 @@ ...@@ -26,20 +26,25 @@
</van-col> </van-col>
</van-row> </van-row>
<van-row class="section"> <van-row class="section cell-hg">
<van-cell-group> <van-cell-group>
<van-cell icon="points" title="我的积分" is-link @click="onRouterLink(cellRoute[0].routeName)"/> <van-cell
icon="points"
title="我的积分"
is-link
@click="onRouterLink(cellRoute[0].routeName)"
/>
<van-cell <van-cell
icon="gold-coin-o" icon="gold-coin-o"
title="我的优惠券" title="我的优惠券"
is-link is-link
@click="onRouterLink(cellRoute[1].routeName)" @click="onRouterLink(cellRoute[1].routeName)"
/> />
<van-cell icon="question-o" title="帮助" @click="onRouterLink(cellRoute[2].routeName)"/> <van-cell icon="question-o" title="帮助" @click="onRouterLink(cellRoute[2].routeName)" />
</van-cell-group> </van-cell-group>
</van-row> </van-row>
<van-row class="section"> <van-row class="section cell-hg">
<van-cell-group> <van-cell-group>
<van-cell <van-cell
icon="location-o" icon="location-o"
...@@ -50,7 +55,7 @@ ...@@ -50,7 +55,7 @@
</van-cell-group> </van-cell-group>
</van-row> </van-row>
<van-row class="section"> <van-row class="section cell-hg">
<van-cell-group> <van-cell-group>
<van-cell icon="setting-o" title="账号设置" @click="onRouterLink(cellRoute[4].routeName)" /> <van-cell icon="setting-o" title="账号设置" @click="onRouterLink(cellRoute[4].routeName)" />
</van-cell-group> </van-cell-group>
...@@ -75,7 +80,7 @@ export default { ...@@ -75,7 +80,7 @@ export default {
data() { data() {
return { return {
nologin: { nologin: {
action: "登录/注册", action: "立即登录",
avatar: avatar:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561635028219&di=4da64de39130854765f4e0a33fca589d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F27%2F20170427155254_Kctx8.jpeg" "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561635028219&di=4da64de39130854765f4e0a33fca589d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F27%2F20170427155254_Kctx8.jpeg"
}, },
...@@ -186,7 +191,10 @@ export default { ...@@ -186,7 +191,10 @@ export default {
} }
.van-cell { .van-cell {
font-weight: bolder;
font-size: $fontsize-large; font-size: $fontsize-large;
.van-cell__left-icon {
scw($fontsize-large-xx, $color-primary, 600);
}
} }
</style> </style>
...@@ -13,20 +13,20 @@ ...@@ -13,20 +13,20 @@
:data="orderList" :data="orderList"
@select="orderDetail" @select="orderDetail"
@show="linkShop" @show="linkShop"
@more="anotherOrder " @more="anotherOrder"
@pay="payEvent"
class="content" class="content"
></order-card> ></order-card>
</cube-scroll> </cube-scroll>
<van-row <van-row v-else-if="!pageLoading" type="flex" justify="center" class="empty_tips">
v-else-if="!pageLoading" <div v-if="!login">
type="flex" <p>登录后查看外卖订单</p>
justify="center" <van-button size="small" type="primary" @click="toLogin">立即登录</van-button>
class="bg-transparent nodata-tip" </div>
> <div v-else-if="login">
<van-icon name="bag-o" size="60" color="#7d7e80">
<p class="text-default">暂无订单</p> <p class="text-default">暂无订单</p>
</van-icon> </div>
</van-row> </van-row>
<footGuide default="orderIndex"></footGuide> <footGuide default="orderIndex"></footGuide>
...@@ -40,17 +40,28 @@ import { mapState } from "vuex"; ...@@ -40,17 +40,28 @@ import { mapState } from "vuex";
export default { export default {
data() { data() {
return { return {
empty: false,
pageLoading: true, pageLoading: true,
orderList: [], orderList: [],
pageNumber: 1, pageNumber: 1,
last_page: 1 last_page: 1,
/* loading: false, //控制上拉加载的加载动画 options: {
finished: false, //控制在页面往下移动到底部时是否调用接口获取数据 pullDownRefresh: {
isLoading: false //控制下拉刷新的加载动画 */ threshold: 90,
stop: 40
},
pullUpLoad: {
threshold: 0,
txt: {
// more: "上拉加载更多",
// noMore: "没有更多数据"
}
}
}
}; };
}, },
computed: { computed: {
...mapState(["location", "choosed_address", "cartList"]), ...mapState(["login", "location", "choosed_address", "cartList"]),
// 当前使用的定位 // 当前使用的定位
curLocation() { curLocation() {
return this.choosed_address.lat return this.choosed_address.lat
...@@ -58,17 +69,6 @@ export default { ...@@ -58,17 +69,6 @@ export default {
: this.location.lat : this.location.lat
? this.location ? this.location
: "定位中"; : "定位中";
},
options() {
return {
pullDownRefresh: {
threshold: 40,
stop: 40,
},
pullUpLoad: {
threshold: 20,
}
};
} }
}, },
components: { components: {
...@@ -76,14 +76,15 @@ export default { ...@@ -76,14 +76,15 @@ export default {
footGuide footGuide
}, },
created() { created() {
if (this.login) {
this.initData(); this.initData();
}
}, },
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);
...@@ -99,46 +100,34 @@ export default { ...@@ -99,46 +100,34 @@ export default {
// 页面初始化是加载动画 // 页面初始化是加载动画
if (this.pageNumber <= 2) { if (this.pageNumber <= 2) {
this.pageLoading = false; this.pageLoading = false;
} }
} else { } else {
if (res.code == 1003) {
this.pageLoading = false;
return;
}
// 如果没有新数据 // 如果没有新数据
this.$refs.scroll.forceUpdate(); this.$refs.scroll.forceUpdate();
} }
/* if (res.code == 0) {
this.orderList = this.orderList.concat(res.data.data);
this.loading = false; //停止加载状态
if (this.pageNumber > res.data.page.count) {
// 结束加载
this.finished = true;
}
this.pageNumber++;
} else {
this.finished = true;
}
// 页面初始化是加载动画
if (this.pageNumber <= 2) {
this.pageLoading = false;
}
this.loading = false; */
}, },
// 下拉加载
onPullingDown() { onPullingDown() {
this.pageNumber=1; this.pageNumber = 1;
this.orderList = []; this.orderList = [];
this._getOrder(); this._getOrder();
}, },
// 上拉刷新
onPullingUp() { onPullingUp() {
this._getOrder(); this._getOrder();
}, },
// 点击订单卡片商品列表,进入对应的订单详情
orderDetail(order_no) { orderDetail(order_no) {
this.$router.push({ this.$router.push({
name: "orderDetails", name: "orderDetails",
params: { order_no: order_no } params: { order_no: order_no }
}); });
}, },
// 点击订单卡片头部,进入对应的店铺
linkShop(shopId) { linkShop(shopId) {
this.$router.push({ this.$router.push({
name: "shop", name: "shop",
...@@ -146,6 +135,12 @@ export default { ...@@ -146,6 +135,12 @@ export default {
query: { geohash: this.curLocation.lat + "," + this.curLocation.lng } query: { geohash: this.curLocation.lat + "," + this.curLocation.lng }
}); });
}, },
// 未登录的情况
toLogin() {
this.$router.push({
name: "login"
});
},
// 再来一单 // 再来一单
anotherOrder(shopId, order_no) { anotherOrder(shopId, order_no) {
this.$router.push({ this.$router.push({
...@@ -156,16 +151,19 @@ export default { ...@@ -156,16 +151,19 @@ export default {
order_no: order_no order_no: order_no
} }
}); });
}
}, },
watch: { payEvent(shop_id,order_no) {
this.$router.push({ name: "orderDetails", params: { id: order_no,shopId:shop_id } });
}
}
/* watch: {
"$route.query": function(newVal, oldVal) { "$route.query": function(newVal, oldVal) {
if (newVal.type == "all") { if (newVal.type == "all") {
this.orderList = []; this.orderList = [];
this.initData(); this.initData();
} }
} }
} } */
}; };
</script> </script>
...@@ -190,4 +188,18 @@ export default { ...@@ -190,4 +188,18 @@ export default {
.van-panel__content .van-cell__value, .van-panel__footer { .van-panel__content .van-cell__value, .van-panel__footer {
text-align: right; text-align: right;
} }
.empty_tips {
> div {
text-align: center;
}
p {
font-size: $fontsize-large;
}
.van-button {
margin-top: 10px;
}
}
</style> </style>
<template> <template>
<div class="scroll-list-wrap"> <div class="scroll-list-wrap">
<cube-scroll ref="scroll"> <cube-scroll ref="scroll">
<h1 class="page-title">订单已送达</h1> <h1 class="page-title">{{order.order_status |orderStatus}}</h1>
<section class="section"> <section class="section">
<confirm-foods-list :shopInfo="shopInfo" :goods_list="order.goods"></confirm-foods-list> <confirm-foods-list :shopInfo="shopInfo" :goods_list="order.goods"></confirm-foods-list>
<van-cell title="联系商家" class="total"> <van-cell class="total">
<span slot="title" class="text-primary" @click="callEvent">联系商家</span>
<span> <span>
实付 ¥ 实付
<strong>
¥
<strong class="text-medium">{{order.price_final}}</strong> <strong class="text-medium">{{order.price_final}}</strong>
</strong>
</span> </span>
</van-cell> </van-cell>
</section> </section>
...@@ -38,14 +42,18 @@ ...@@ -38,14 +42,18 @@
</div> </div>
</van-panel> </van-panel>
</cube-scroll> </cube-scroll>
<pay :order_no="order.order_no" :showActionSheet="showActionSheet" @click="payAction"></pay>
</div> </div>
</template> </template>
<script> <script>
import pay from "@/components/pay.vue";
import confirmFoodsList from "@/components/confirm-foods-list.vue"; import confirmFoodsList from "@/components/confirm-foods-list.vue";
import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from "vuex";
import { setTimeout } from "timers"; import { setTimeout } from "timers";
import { getOrderDetail } from "../../common/serve"; import { getOrderDetail } from "../../common/serve";
import payUtils from "../../common/utils/pay";
export default { export default {
data() { data() {
return { return {
...@@ -53,19 +61,45 @@ export default { ...@@ -53,19 +61,45 @@ export default {
order_status: "", order_status: "",
goods: [] goods: []
}, },
orderAddress: {} orderAddress: {},
shop_id: 0,
showActionSheet: false
}; };
}, },
components: { components: {
pay,
confirmFoodsList confirmFoodsList
}, },
computed: { computed: {
...mapState(["shopInfo"]) ...mapState(["shopInfo"])
}, },
created() { created() {
this.shop_id = this.$route.params.shopId;
this.getOrderInfo(); this.getOrderInfo();
// 微信初始化
if (/MicroMessenger/.test(window.navigator.userAgent)) {
weChatConfig(window.location.href, ["chooseWXPay"]).then(res => {
if (res.code == 0) {
payUtils.WxConfig(res.data);
}
});
}
},
filters: {
orderStatus(value) {
let status = "";
if (value == "unpaid") {
status = "等待支付";
} else if (value == "preparing") {
status = "订单配送中";
} else if (value == "received") {
status = "订单已送达";
} else {
status = "配送中";
}
return status;
}
}, },
methods: { methods: {
async getOrderInfo() { async getOrderInfo() {
//根据路由参数 获取不同类型的订单 //根据路由参数 获取不同类型的订单
...@@ -74,12 +108,24 @@ export default { ...@@ -74,12 +108,24 @@ export default {
if (res.code == 0) { if (res.code == 0) {
let data = res.data; let data = res.data;
this.order = res.data; this.order = res.data;
this.orderAddress = res.data.user_address this.orderAddress = res.data.user_address;
} else { } else {
// 显示错误页面 // 显示错误页面
} }
},
callEvent() {
this.toast = this.$createToast({
txt: "无商家信息",
type: "txt"
}).show();
},
this.$toast.clear(); // 支付
async onSubmit() {
this.showActionSheet = true;
},
payAction() {
this.showActionSheet = false;
} }
} }
}; };
...@@ -88,19 +134,29 @@ export default { ...@@ -88,19 +134,29 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~common/stylus/variable.styl'; @import '~common/stylus/variable.styl';
.cube-scroll-list-wrapper{
background :transparent;} .cube-scroll-list-wrapper {
background: transparent;
}
.page-title { .page-title {
padding: 20px 10px; padding: 20px 10px;
} }
.van-panel__header span{
font-weight:600; .van-panel__header span {
font-weight: 600;
font-size: $fontsize-large; font-size: $fontsize-large;
} }
.van-cell__value {
.section {
.total .van-cell__value {
color: #323232;
}
.van-cell__value {
font-size: $fontsize-medium; font-size: $fontsize-medium;
color: #6a6a6a; color: #6a6a6a;
}
} }
</style> </style>
<template>
<transition name="fade">
<div v-show="visible" class="header-detail" @touchmove.stop.prevent>
<div class="detail-wrapper clear-fix">
<div class="detail-main">
<h1 class="name">{{seller.name}}</h1>
<!-- <div class="star-wrapper">
<star :size="48" :score="seller.score"></star>
</div> -->
<div class="title">
<div class="text">优惠信息</div>
</div>
<ul v-if="seller.supports" class="supports">
<li class="support-item" v-for="(item,index) in seller.supports" :key="item.id">
<!-- <support-ico :size=2 :type="seller.supports[index].type"></support-ico> -->
<span class="text">{{seller.supports[index].description}}</span>
</li>
</ul>
<div class="title">
<div class="text">商家公告</div>
</div>
<div class="bulletin">
<p class="content">{{seller.bulletin}}</p>
</div>
</div>
</div>
<div class="detail-close" @click="hide">
<i class="icon-close"></i>
</div>
</div>
</transition>
</template>
<script>
import popupMixin from '../../../../common/mixins/popup'
// import SupportIco from '../../../../components/support-ico/support-ico'
export default {
name: 'header-detail',
mixins: [popupMixin],
props: {
seller: {
type: Object,
default() {
return {}
}
}
},
components: {
// SupportIco
}
}
</script>
<style lang="stylus" scoped>
// @import "~common/stylus/mixin"
// @import "~common/stylus/variable"
.header-detail
position: fixed
z-index: 999
top: 0
left: 0
width: 100%
height: 100%
overflow: auto
backdrop-filter: blur(2px)
opacity: 1
// color: $color-white
background: $color-white
&.fade-enter-active, &.fade-leave-active
transition: all 0.5s
&.fade-enter, &.fade-leave-active
opacity: 0
background: $color-background
.detail-wrapper
display: inline-block
width: 100%
min-height: 100%
.detail-main
margin-top: 64px
padding-bottom: 64px
.name
line-height: 16px
text-align: center
font-size: $fontsize-large
font-weight: 700
.star-wrapper
margin-top: 18px
padding: 2px 0
text-align: center
.title
display: flex
width: 80%
margin: 28px auto 24px auto
.text
padding: 0 12px
font-weight: 700
font-size: $fontsize-medium
.supports
width: 80%
margin: 0 auto
.support-item
display: flex
align-items: center
padding: 0 12px
margin-bottom: 12px
&:last-child
margin-bottom: 0
.support-ico
margin-right: 6px
.text
line-height: 16px
font-size: $fontsize-small
.bulletin
width: 80%
margin: 0 auto
.content
padding: 0 12px
line-height: 24px
font-size: $fontsize-small
.detail-close
position: relative
width: 30px
height: 30px
margin: -64px auto 0 auto
clear: both
font-size: $fontsize-large-xxxx
</style>
...@@ -96,7 +96,11 @@ export default { ...@@ -96,7 +96,11 @@ export default {
computed: { computed: {
...mapState(["cartList"]), ...mapState(["cartList"]),
seller() { seller() {
return { deliveryPrice: 5, minPrice: 20 }; return {
deliveryPrice: 0,
minPrice: 0,
toggle: this.$route.query.order_no ? true : false
};
}, },
//购物车中总共商品的数量 //购物车中总共商品的数量
totalNum: function() { totalNum: function() {
...@@ -178,7 +182,7 @@ export default { ...@@ -178,7 +182,7 @@ export default {
}); });
}); });
// }else{} // }else{}
this.$store.commit('UPDATE_SHOP_CART',cart) this.$store.commit("UPDATE_SHOP_CART", cart);
console.log(cart); console.log(cart);
} }
} }
...@@ -216,7 +220,8 @@ export default { ...@@ -216,7 +220,8 @@ export default {
shopId: this.shopId.toString(), shopId: this.shopId.toString(),
deliveryPrice: this.seller.deliveryPrice, deliveryPrice: this.seller.deliveryPrice,
minPrice: this.seller.minPrice, minPrice: this.seller.minPrice,
fold: true fold: true,
toggle: this.seller.toggle // 是否主动展示购物列表
} }
}); });
this.shopCartStickyComp.show(); this.shopCartStickyComp.show();
...@@ -273,15 +278,7 @@ export default { ...@@ -273,15 +278,7 @@ export default {
} }
}, },
watch: { watch: {
//showLoading变化时说明组件已经获取初始化数据,在下一帧nextTick进行后续操作
/* showLoading: function(value) {
if (!value) {
this.$nextTick(() => {
this.getFoodListHeight();
this.initCategoryNum();
});
}
},*/
shopCart: function(value) { shopCart: function(value) {
this.initCategoryNum(); this.initCategoryNum();
}, },
...@@ -308,9 +305,12 @@ export default { ...@@ -308,9 +305,12 @@ export default {
.cube-scroll-wrapper { .cube-scroll-wrapper {
width: 100%; width: 100%;
.cube-scroll-nav-main{
padding-bottom:100px;
}
.cube-scroll-nav-bar-item { .cube-scroll-nav-bar-item {
position: relative; position: relative;
padding: 20px 4px;
&_active { &_active {
background-color: #fff; background-color: #fff;
...@@ -322,7 +322,6 @@ export default { ...@@ -322,7 +322,6 @@ export default {
font-size: $fontsize-small; font-size: $fontsize-small;
.van-tag { .van-tag {
// padding: 2px 4px;
right: 0; right: 0;
top: 10%; top: 10%;
} }
...@@ -335,10 +334,6 @@ export default { ...@@ -335,10 +334,6 @@ export default {
background-color: #fff; background-color: #fff;
scw($fontsize-small, #6e6e6e, 600); scw($fontsize-small, #6e6e6e, 600);
} }
.cube-scroll-nav-bar-item {
padding: 20px 4px;
}
} }
.van-card { .van-card {
......
<template> <template>
<div class="scroll-list-wrap view-wrapper"> <div class="scroll-list-wrap " :class="{'view-wrapper':!pageLoading}">
<cube-sticky <cube-loading v-if="pageLoading" :size="40"></cube-loading>
:pos="scrollY" <cube-sticky :pos="scrollY" :check-top="checkTop" fixed-show-ani="sticky-fixed-show">
:check-top="checkTop" <!-- <header class="sticky-header cube-sticky-fixed">
fixed-show-ani="sticky-fixed-show" <div class="icons-box" :style="{opacity:1-opacity}">
@diff-change="diffChange" <i class="van-icon van-icon-search"></i>
> </div>
<van-search :style="{opacity:opacity}" shape="round" placeholder="请输入搜索关键词" />
</header>-->
<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>
<!-- 优惠内容 --> <!-- 优惠内容 -->
<div class="tags"> <div class="tags" @click="showHeaderDetail">
<van-tag <van-tag
v-for="tag in shopInfo.discount" v-for="tag in shopInfo.discount"
:key="tag.id" :key="tag.id"
...@@ -96,6 +94,7 @@ export default { ...@@ -96,6 +94,7 @@ export default {
tabBarH: 0, //tabbar高度 tabBarH: 0, //tabbar高度
data: goods, data: goods,
pageLoading: true,
shopId: 0, shopId: 0,
shopInfo: {}, shopInfo: {},
currentTab: "点餐", //当前导航 active 项的 key 值 currentTab: "点餐", //当前导航 active 项的 key 值
...@@ -119,15 +118,11 @@ export default { ...@@ -119,15 +118,11 @@ export default {
}, },
contentH() { contentH() {
return document.body.clientHeight - this.tabBarH + "px"; return document.body.clientHeight - this.tabBarH + "px";
}
}, },
mounted() { opacity() {
this.$nextTick(() => { let opacity = 0;
return (opacity = this.scrollY / 30 > 1 ? 1 : this.scrollY / 30);
this.headerH = this.$refs.header.offsetHeight; // 包含tabbar 在内的头部高度 }
this.tabBarH = this.$refs.tabBar.offsetHeight; // tabbar 高度
});
}, },
watch: { watch: {
disable(newVal) { disable(newVal) {
...@@ -148,14 +143,6 @@ export default { ...@@ -148,14 +143,6 @@ 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);
...@@ -191,6 +178,8 @@ export default { ...@@ -191,6 +178,8 @@ export default {
]; ];
this.$store.commit("CURRENT_SHOPINFO", shopMsg.data); this.$store.commit("CURRENT_SHOPINFO", shopMsg.data);
} }
this.pageLoading = false;
}) })
.catch(error => {}); .catch(error => {});
}, },
...@@ -199,6 +188,26 @@ export default { ...@@ -199,6 +188,26 @@ export default {
}, },
disableFn() { disableFn() {
this.$refs.scroll.disable(); this.$refs.scroll.disable();
},
showHeaderDetail() {
/* this.headerDetailComp =
this.headerDetailComp ||
this.$createHeaderDetail({
$props: {
seller: "shopInfo"
}
});
this.headerDetailComp.show(); */
}
},
//pageLoading变化时说明组件已经获取初始化数据,在下一帧nextTick进行后续操作
pageLoading: function(value) {
if (!value) {
this.$nextTick(() => {
this.headerH = this.$refs.header.offsetHeight; // 包含tabbar 在内的头部高度
this.tabBarH = this.$refs.tabBar.offsetHeight; // tabbar 高度
});
} }
} }
}; };
...@@ -207,7 +216,7 @@ export default { ...@@ -207,7 +216,7 @@ export default {
<style lang="stylus"> <style lang="stylus">
.view-wrapper { .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: 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; background-size: 100%;
} }
.page-hd { .page-hd {
...@@ -267,4 +276,30 @@ export default { ...@@ -267,4 +276,30 @@ export default {
.cube-tab-panel { .cube-tab-panel {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.sticky-header {
z-index: 999;
.icons-box {
position: fixed;
left: 0;
text-align: right;
padding: 10px 10px 0;
right: 0;
z-index: -1;
.van-icon {
color: $color-white;
}
}
.van-search {
// opacity: 0;
z-index: 99;
&__content {
flex: auto;
}
}
}
</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