Commit 35d4fcdb authored by liumiss's avatar liumiss

店铺首页bug

parent fbc3b41c
......@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<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">
<title>sell</title>
......
<template>
<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>
</template>
......
......@@ -68,11 +68,12 @@ export const preorder = (shop_id,price, address_id, goods_list) => request('shop
// 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,
price,
address_id,
goods_list,
message,
order_type,// take_out下单 recharge充值
});
......
......@@ -4,3 +4,6 @@ html, body
font-size:16px
background: #f7f8fa
strong{
font-weight: 600;
}
\ No newline at end of file
......@@ -9,14 +9,18 @@
.cube-form-item_required .cube-form-label::before
display:none
// 颜色
.text-primary{
color:$color-blue
}
.text-light-primary{
color:$color-light-blue
}
.text-light-grey{
color:$color-light-grey
}
// 大小
.text-extra-small{
font-size: $fontsize-small
}
......@@ -33,6 +37,8 @@
font-size: $fontsize-large-xx
}
.bg-white{
background: #fff;
}
......@@ -108,10 +114,16 @@
.van-search .van-icon{
font-size: 16px;
}
.van-tag{
// padding:1px 4px;
.tags .van-tag {
padding: 2px 4px;
margin-right: 6px;
line-height: 1;
}
.fontw .van-cell .van-cell__title span{
font-weight: 600;
}
\ No newline at end of file
}
.cell-hg .van-cell{
padding: 14px 15px;
}
\ No newline at end of file
......@@ -2,6 +2,7 @@
$color-background = rgba(7, 17, 27, 1)
$color-primary = #1296fa;
$color-green = #07c160
$color-dark-green = #06ae57
......
......@@ -13,7 +13,7 @@
</div>
<div class="num_price">
<span>x {{item.goods_quantity}}</span>
<span>¥{{item.goods_price}}</span>
<strong>¥{{item.goods_price}}</strong>
</div>
</li>
</ul>
......
......@@ -11,7 +11,7 @@
<script>
export default {
props: ['default'],
props: ["default"],
data() {
return {
selectedLabelDefault: this.default,
......@@ -41,6 +41,12 @@ export default {
changeHandler(label) {
this.$router.push({ name: label });
}
},
// keep-alive搭配activated 页面需要重新刷新请求数据
activated() {
if (this.default !== this.selectedLabelDefault) {
this.selectedLabelDefault = this.default;
}
}
};
</script>
......@@ -51,7 +57,11 @@ export default {
width: 100%;
bottom: 0;
border-top: 1px solid #eee;
background-color:#fff;
z-index:99;
background-color: #fff;
z-index: 99;
.cube-tab_active {
color: $color-primary;
}
}
</style>
......@@ -9,7 +9,7 @@
</div>
<div class="van-cell__value van-panel__header-value">
<span>{{order.order_status=='preparing'?'配送中':'已送达'}}</span>
<span>{{order|orderStatus}}</span>
</div>
</div>
......@@ -23,21 +23,39 @@
</span>
</van-cell>
<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>
</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)">
<van-panel
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">
<span>充值订单</span>
</div>
<div class="van-cell__value van-panel__header-value">
<span>充值成功</span>
<span>{{order | orderStatus}}</span>
</div>
</div>
<van-cell @click="onSelect(order.order_type,order.order_no)">
<van-cell>
<div slot="title">
<p class="word-one">{{order.goods_name}}</p>
</div>
......@@ -59,6 +77,29 @@ export default {
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: {
onCallBack(order_no) {
this.$emit("select", order_no);
......@@ -66,6 +107,9 @@ export default {
onMore(shopId, order_no) {
this.$emit("more", shopId, order_no);
},
onPay(shopId,order_no) {
this.$emit("pay", shopId,order_no);
},
onSelect(order_type, order_no) {
if (order_type == "recharge") {
this.$createToast({
......@@ -78,7 +122,8 @@ export default {
},
onShow(shopId) {
this.$emit("show", shopId);
}
},
}
};
</script>
......@@ -92,9 +137,11 @@ export default {
.van-panel {
margin-bottom: 10px;
padding-bottom: 10px;
&__header .van-cell__title span{
font-weight:600;
&__header .van-cell__title span {
font-weight: 600;
}
&__content {
padding-left: 12%;
}
......
......@@ -22,10 +22,10 @@ export default {
type: "wexin",
name: "微信支付"
},
{
type: "banlence",
name: "余额支付"
},
// {
// type: "banlence",
// name: "余额支付"
// },
{
type: "apliay",
name: "支付宝"
......
......@@ -101,10 +101,6 @@ export default {
.tags {
padding: 4px 0;
.van-tag {
margin-right: 6px;
}
}
}
</style>
......@@ -8,6 +8,7 @@
:minPrice="minPrice"
:fold="fold"
:sticky="true"
:toggle='toggle'
></shop-cart>
</div>
</template>
......@@ -45,6 +46,10 @@ export default {
type: Boolean,
default: true
},
toggle: {// 是否主动展示列表
type: Boolean,
// default: false
},
list: {
type: Object,
default() {
......
......@@ -7,7 +7,7 @@
:class="{cart_icon_activity: totalPrice > 0}"
ref="cartContainer"
>
<i class="cubeic-alert cart_icon"></i>
<i class="van-icon van-icon-shopping-cart cart_icon"></i>
<div class="num">
<van-tag v-show="totalCount>0" round type="danger">{{totalCount}}</van-tag>
</div>
......@@ -42,11 +42,12 @@
</transition>
</div>
</div>
</div> -->
</div>-->
</div>
</template>
<script>
import { setTimeout } from "timers";
// import Bubble from 'components/bubble/bubble'
const BALL_LEN = 10;
......@@ -85,9 +86,13 @@ export default {
type: Boolean,
default: true
},
toggle: {
type: Boolean,
default: false
},
shopId: {
type: String
},
}
},
data() {
return {
......@@ -98,6 +103,15 @@ export default {
created() {
this.dropBalls = [];
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
if (this.toggle && this.totalCount != 0) {
this.toggleList();
}
});
}, 400);
},
computed: {
totalPrice() {
let total = 0;
......@@ -150,14 +164,18 @@ export default {
if (this.totalPrice < this.minPrice) {
return;
}
/* this.$createDialog({
/* this.$createDialog({
title: "支付",
content: `您需要支付${this.totalPrice}元`
}).show();
e.stopPropagation();
*/
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) {
for (let i = 0; i < this.balls.length; i++) {
......@@ -269,9 +287,13 @@ export default {
.cart_icon_container {
position: absolute;
top: -20px;
left:2%;
wh(60px, 60px);
font-size: 60px;
.van-icon {
font-size: 40px;
}
.num {
position: absolute;
top: 0;
......@@ -309,6 +331,7 @@ export default {
&.no-enough {
scw(12px, #fff);
}
&.enough {
background-color: #4cd964;
}
......@@ -319,7 +342,7 @@ export default {
.ball {
left: 32px;
bottom: 22px;
wh(14px,14px);
wh(14px, 14px);
z-index: 200;
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'
import ShopCartStikcy from 'components/shopCart/shop-cart-sticky'
import Food from "./views/shopItem/children/food-detail"
import HeaderDetail from "./views/shopItem/children/headerDetail/header-detail"
createAPI(Vue, ShopCartList)
createAPI(Vue, ShopCartStikcy)
createAPI(Vue, Food)
\ No newline at end of file
createAPI(Vue, Food)
createAPI(Vue,HeaderDetail)
\ No newline at end of file
......@@ -45,16 +45,19 @@ export default new Router({
path: "/",
name: "home",
component: home,
meta: { title: '', keepAlive: false }
},
{
path: "/order",
name: "orderIndex",
component: orderIndex
component: orderIndex,
meta: { title: '', keepAlive: false }
},
{
path: "/mine",
name: "mineIndex",
component: mineIndex
component: mineIndex,
meta: { title: '', keepAlive: false }
},
{
path: "/address/select",
......
......@@ -7,6 +7,7 @@ Vue.use(Vuex)
const state = {
login:false,
rejectLogin:false, // 提示登录弹框是否显示
userInfo:{},
location: { lat: '', lng: '', formattedAddress: '' }, // 当前地图定位
choosed_address:{lat: '', lng: '', formattedAddress: ''}, // 当前定位使用的地址信息
......
......@@ -146,5 +146,9 @@ export default {
OUT_LOGIN(state) {
state.userInfo = {};
state.login = false;
},
},
// 首页已拒绝登录,则不再显示提示登录弹框
REJECT_LOGIN(state){
state.rejectLogin = true;
}
}
\ No newline at end of file
......@@ -15,7 +15,7 @@
</van-cell>
</section>
<section class="section">
<section v-if="addressList.length" class="section">
<van-cell>
<span slot="title" class="text-extra-small text-light-grey">收货地址</span>
<span slot="right-icon" class="text-primary" @click="onLink('address')">管理地址</span>
......@@ -32,7 +32,7 @@
<van-cell
title="新增地址"
is-link
class="text-primary"
class="text-light-primary"
@click="onLink('addAddress')"
/>
</van-col>
......
......@@ -71,7 +71,9 @@ import pay from "@/components/pay.vue";
import confirmFoodsList from "@/components/confirm-foods-list.vue";
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 {
data() {
......@@ -122,8 +124,8 @@ export default {
...mapState([
"cartList",
"shopInfo",
"choosed_address",
"remarkText",
"choosed_address", // 收货地址
"remarkText", // 备注
"invoice",
"userInfo"
......@@ -160,6 +162,14 @@ export default {
this.checkoutData = msg.data;
}
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() {
......@@ -187,14 +197,15 @@ export default {
this.shopId,
this.checkoutData.price_final,
this.choosed_address.id,
this.needbuy
this.needbuy,
this.remarkText
);
if (res.code == 0) {
this.order_no = res.data.order_no;
// 预下单商品检测成功后执行支付操作
this.showActionSheet = true;
} else {
this.submitBarTip = res.message
this.submitBarTip = res.message;
}
this.btnLoading = false;
},
......
......@@ -18,7 +18,7 @@
<i class="cubeic-location text-primary text-extra-large"></i>
<span class="text-medium">{{curLocation.formattedAddress}}</span>
<div class="location-action">
<i class="cubeic-select text-extra-small"></i>
<i class="cubeic-select text-medium"></i>
</div>
<div id="amap"></div>
</div>
......@@ -26,7 +26,11 @@
<!-- 搜索框 -->
<cube-sticky-ele ele-key="11">
<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>
</cube-sticky-ele>
......@@ -57,10 +61,13 @@
<!-- 附近商家 -->
<section class="section">
<div class="section-hd">附件商家</div>
<ul class="cards">
<div class="section-hd">附近商家</div>
<ul v-if="shopsData.length" class="cards">
<shop-list :options="shopsData" :location="curLocation"></shop-list>
</ul>
<div v-else class="empty_tips">
<p>附近暂无商家</p>
</div>
</section>
</cube-scroll>
</cube-sticky>
......@@ -167,7 +174,7 @@ export default {
this.initData();
},
computed: {
...mapState(["location", "choosed_address"]),
...mapState(["location", "choosed_address", "rejectLogin"]),
// 当前使用的定位
curLocation() {
console.log(this.location);
......@@ -191,20 +198,30 @@ export default {
let p3 = getUser();
Promise.all([p1, p2, p3])
.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];
// if (result[0].code == 1003) {
// this.loading = false;
// if (!this.rejectLogin) this.noLoginDialog();
// return;
// }
if (result[0].code == 0) {
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];
}else{
this.options.pullUpLoad = false
}
let addressData = result[1].data;
......@@ -221,7 +238,6 @@ export default {
scrollHandler({ y }) {
this.scrollY = -y;
},
onBtnClick() {},
onSlideEvent(item, index) {
console.log(item, index);
......@@ -233,20 +249,6 @@ export default {
}
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() {
console.log("下拉刷新");
......@@ -277,6 +279,26 @@ export default {
this.$refs.scroll.forceUpdate();
}
}, 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 {
top: 0;
left: 60%;
background-color: #fff;
.cubeic-select {
padding: 6px;
}
}
}
......@@ -313,4 +339,5 @@ export default {
overflow: hidden;
background-color: #fff;
}
</style>
\ No newline at end of file
<template>
<div>
<cube-form :model="model" @validate="validateHandler" skipValidate>
<cube-form :model="model" @validate="validateHandler">
<cube-form-group>
<cube-form-item :field="fields[0]"></cube-form-item>
<div class="form-group">
<cube-form-item :field="fields[1]"></cube-form-item>
<van-button
type="primary" size="mini"
type="primary"
size="small"
:disabled="disabled"
inline
class="field__button"
......@@ -15,15 +16,15 @@
</div>
</cube-form-group>
<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>
</div>
</template>
<script>
import { getCode,loginByCode } from "../../common/serve.js";
import { getCode, loginByCode, getUser } from "../../common/serve.js";
import { sessionstorage } from "../../common/utils/mUtils";
export default {
data() {
return {
......@@ -67,6 +68,13 @@ export default {
},
methods: {
async onGetCode() {
if (this.inputValue == "") {
this.$createToast({
txt: "请输入正确的手机号",
type: "txt"
}).show();
return;
}
this.disabled = true;
let res = await getCode(this.model.inputValue);
if (res.code == 0) {
......@@ -86,7 +94,8 @@ export default {
async toLogin() {
let res = await loginByCode(this.model.inputValue, this.model.codeValue);
if (res.code == 0) {
localStorage.setItem("isLogin", true);
// sessionstorage.save("isLogin", true);
this._getUserInfo();
this.$createToast({
txt: "登录成功",
time: 1000,
......@@ -102,10 +111,18 @@ export default {
}
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) {
e.stopPropagation()
this.toLogin();
if (this.valid) this.toLogin();
},
// 表单验证的结果
validateHandler(result) {
this.validity = result.validity;
this.valid = result.valid;
......@@ -134,7 +151,6 @@ export default {
</script>
<style lang="stylus" scoped>
.form-group {
position: relative;
......
......@@ -26,20 +26,25 @@
</van-col>
</van-row>
<van-row class="section">
<van-row class="section cell-hg">
<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
icon="gold-coin-o"
title="我的优惠券"
is-link
@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-row>
<van-row class="section">
<van-row class="section cell-hg">
<van-cell-group>
<van-cell
icon="location-o"
......@@ -50,7 +55,7 @@
</van-cell-group>
</van-row>
<van-row class="section">
<van-row class="section cell-hg">
<van-cell-group>
<van-cell icon="setting-o" title="账号设置" @click="onRouterLink(cellRoute[4].routeName)" />
</van-cell-group>
......@@ -75,7 +80,7 @@ export default {
data() {
return {
nologin: {
action: "登录/注册",
action: "立即登录",
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"
},
......@@ -186,7 +191,10 @@ export default {
}
.van-cell {
font-weight: bolder;
font-size: $fontsize-large;
.van-cell__left-icon {
scw($fontsize-large-xx, $color-primary, 600);
}
}
</style>
......@@ -13,20 +13,20 @@
:data="orderList"
@select="orderDetail"
@show="linkShop"
@more="anotherOrder "
@more="anotherOrder"
@pay="payEvent"
class="content"
></order-card>
</cube-scroll>
<van-row
v-else-if="!pageLoading"
type="flex"
justify="center"
class="bg-transparent nodata-tip"
>
<van-icon name="bag-o" size="60" color="#7d7e80">
<van-row v-else-if="!pageLoading" type="flex" justify="center" class="empty_tips">
<div v-if="!login">
<p>登录后查看外卖订单</p>
<van-button size="small" type="primary" @click="toLogin">立即登录</van-button>
</div>
<div v-else-if="login">
<p class="text-default">暂无订单</p>
</van-icon>
</div>
</van-row>
<footGuide default="orderIndex"></footGuide>
......@@ -40,17 +40,28 @@ import { mapState } from "vuex";
export default {
data() {
return {
empty: false,
pageLoading: true,
orderList: [],
pageNumber: 1,
last_page: 1
/* loading: false, //控制上拉加载的加载动画
finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
isLoading: false //控制下拉刷新的加载动画 */
last_page: 1,
options: {
pullDownRefresh: {
threshold: 90,
stop: 40
},
pullUpLoad: {
threshold: 0,
txt: {
// more: "上拉加载更多",
// noMore: "没有更多数据"
}
}
}
};
},
computed: {
...mapState(["location", "choosed_address", "cartList"]),
...mapState(["login", "location", "choosed_address", "cartList"]),
// 当前使用的定位
curLocation() {
return this.choosed_address.lat
......@@ -58,17 +69,6 @@ export default {
: this.location.lat
? this.location
: "定位中";
},
options() {
return {
pullDownRefresh: {
threshold: 40,
stop: 40,
},
pullUpLoad: {
threshold: 20,
}
};
}
},
components: {
......@@ -76,14 +76,15 @@ export default {
footGuide
},
created() {
this.initData();
if (this.login) {
this.initData();
}
},
methods: {
initData() {
this._getOrder();
},
async _getOrder() {
//获取不同类型的订单
const orderType = "all";
let res = await getOrder(orderType, this.pageNumber);
......@@ -99,46 +100,34 @@ export default {
// 页面初始化是加载动画
if (this.pageNumber <= 2) {
this.pageLoading = false;
}
} else {
if (res.code == 1003) {
this.pageLoading = false;
return;
}
// 如果没有新数据
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() {
this.pageNumber=1;
this.pageNumber = 1;
this.orderList = [];
this._getOrder();
},
// 上拉刷新
onPullingUp() {
this._getOrder();
},
// 点击订单卡片商品列表,进入对应的订单详情
orderDetail(order_no) {
this.$router.push({
name: "orderDetails",
params: { order_no: order_no }
});
},
// 点击订单卡片头部,进入对应的店铺
linkShop(shopId) {
this.$router.push({
name: "shop",
......@@ -146,6 +135,12 @@ export default {
query: { geohash: this.curLocation.lat + "," + this.curLocation.lng }
});
},
// 未登录的情况
toLogin() {
this.$router.push({
name: "login"
});
},
// 再来一单
anotherOrder(shopId, order_no) {
this.$router.push({
......@@ -156,16 +151,19 @@ export default {
order_no: order_no
}
});
},
payEvent(shop_id,order_no) {
this.$router.push({ name: "orderDetails", params: { id: order_no,shopId:shop_id } });
}
},
watch: {
}
/* watch: {
"$route.query": function(newVal, oldVal) {
if (newVal.type == "all") {
this.orderList = [];
this.initData();
}
}
}
} */
};
</script>
......@@ -190,4 +188,18 @@ export default {
.van-panel__content .van-cell__value, .van-panel__footer {
text-align: right;
}
.empty_tips {
> div {
text-align: center;
}
p {
font-size: $fontsize-large;
}
.van-button {
margin-top: 10px;
}
}
</style>
<template>
<div class="scroll-list-wrap">
<cube-scroll ref="scroll">
<h1 class="page-title">订单已送达</h1>
<h1 class="page-title">{{order.order_status |orderStatus}}</h1>
<section class="section">
<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>
实付 ¥
<strong class="text-medium">{{order.price_final}}</strong>
实付
<strong>
¥
<strong class="text-medium">{{order.price_final}}</strong>
</strong>
</span>
</van-cell>
</section>
......@@ -38,14 +42,18 @@
</div>
</van-panel>
</cube-scroll>
<pay :order_no="order.order_no" :showActionSheet="showActionSheet" @click="payAction"></pay>
</div>
</template>
<script>
import pay from "@/components/pay.vue";
import confirmFoodsList from "@/components/confirm-foods-list.vue";
import { mapState, mapMutations } from "vuex";
import { setTimeout } from "timers";
import { getOrderDetail } from "../../common/serve";
import payUtils from "../../common/utils/pay";
export default {
data() {
return {
......@@ -53,19 +61,45 @@ export default {
order_status: "",
goods: []
},
orderAddress: {}
orderAddress: {},
shop_id: 0,
showActionSheet: false
};
},
components: {
pay,
confirmFoodsList
},
computed: {
...mapState(["shopInfo"])
},
created() {
this.shop_id = this.$route.params.shopId;
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: {
async getOrderInfo() {
//根据路由参数 获取不同类型的订单
......@@ -74,12 +108,24 @@ export default {
if (res.code == 0) {
let data = res.data;
this.order = res.data;
this.orderAddress = res.data.user_address
this.orderAddress = res.data.user_address;
} 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 {
<style lang="stylus" scoped>
@import '~common/stylus/variable.styl';
.cube-scroll-list-wrapper{
background :transparent;}
.cube-scroll-list-wrapper {
background: transparent;
}
.page-title {
padding: 20px 10px;
}
.van-panel__header span{
font-weight:600;
.van-panel__header span {
font-weight: 600;
font-size: $fontsize-large;
}
.van-cell__value {
font-size: $fontsize-medium;
color: #6a6a6a;
.section {
.total .van-cell__value {
color: #323232;
}
.van-cell__value {
font-size: $fontsize-medium;
color: #6a6a6a;
}
}
</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 {
computed: {
...mapState(["cartList"]),
seller() {
return { deliveryPrice: 5, minPrice: 20 };
return {
deliveryPrice: 0,
minPrice: 0,
toggle: this.$route.query.order_no ? true : false
};
},
//购物车中总共商品的数量
totalNum: function() {
......@@ -160,25 +164,25 @@ export default {
data = msg.data.goods;
let shop = (cart[this.shopId] = {});
// if (cart && cart[this.shopId]) {
this.menuList.forEach((item, index) => {
item.goods_list.forEach(good => {
data.forEach(food => {
if (food.goods_id == good.id) {
let category = (shop[item.category_id] =
shop[item.category_id] || {});
category[food.goods_id] = {
goods_category_id: item.category_id,
id: food.goods_id,
name: food.goods_name,
num: food.goods_quantity,
price: food.goods_price
};
}
});
this.menuList.forEach((item, index) => {
item.goods_list.forEach(good => {
data.forEach(food => {
if (food.goods_id == good.id) {
let category = (shop[item.category_id] =
shop[item.category_id] || {});
category[food.goods_id] = {
goods_category_id: item.category_id,
id: food.goods_id,
name: food.goods_name,
num: food.goods_quantity,
price: food.goods_price
};
}
});
});
});
// }else{}
this.$store.commit('UPDATE_SHOP_CART',cart)
this.$store.commit("UPDATE_SHOP_CART", cart);
console.log(cart);
}
}
......@@ -216,7 +220,8 @@ export default {
shopId: this.shopId.toString(),
deliveryPrice: this.seller.deliveryPrice,
minPrice: this.seller.minPrice,
fold: true
fold: true,
toggle: this.seller.toggle // 是否主动展示购物列表
}
});
this.shopCartStickyComp.show();
......@@ -273,15 +278,7 @@ export default {
}
},
watch: {
//showLoading变化时说明组件已经获取初始化数据,在下一帧nextTick进行后续操作
/* showLoading: function(value) {
if (!value) {
this.$nextTick(() => {
this.getFoodListHeight();
this.initCategoryNum();
});
}
},*/
shopCart: function(value) {
this.initCategoryNum();
},
......@@ -308,9 +305,12 @@ export default {
.cube-scroll-wrapper {
width: 100%;
.cube-scroll-nav-main{
padding-bottom:100px;
}
.cube-scroll-nav-bar-item {
position: relative;
padding: 20px 4px;
&_active {
background-color: #fff;
......@@ -322,7 +322,6 @@ export default {
font-size: $fontsize-small;
.van-tag {
// padding: 2px 4px;
right: 0;
top: 10%;
}
......@@ -335,10 +334,6 @@ export default {
background-color: #fff;
scw($fontsize-small, #6e6e6e, 600);
}
.cube-scroll-nav-bar-item {
padding: 20px 4px;
}
}
.van-card {
......
<template>
<div class="scroll-list-wrap view-wrapper">
<cube-sticky
:pos="scrollY"
:check-top="checkTop"
fixed-show-ani="sticky-fixed-show"
@diff-change="diffChange"
>
<cube-scroll
ref="scroll"
:scroll-events="scrollEvents"
:options="options"
@scroll="scrollHandler"
>
<header class="sticky-header" slot="fixed" ref="stickyHeader">
<van-search placeholder="请输入搜索关键词" />
</header>
<section ref="header" class="page-hd">
<van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image>
<div class="prepend-content">
<h1>{{shopInfo.name}}</h1>
<p class="text-light-grey text-extra-small">评价4.2 月售 等描述</p>
<!-- 优惠内容 -->
<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 class="scroll-list-wrap " :class="{'view-wrapper':!pageLoading}">
<cube-loading v-if="pageLoading" :size="40"></cube-loading>
<cube-sticky :pos="scrollY" :check-top="checkTop" fixed-show-ani="sticky-fixed-show">
<!-- <header class="sticky-header cube-sticky-fixed">
<div class="icons-box" :style="{opacity:1-opacity}">
<i class="van-icon van-icon-search"></i>
</div>
<van-search :style="{opacity:opacity}" shape="round" placeholder="请输入搜索关键词" />
</header>-->
<cube-scroll
ref="scroll"
:scroll-events="scrollEvents"
:options="options"
@scroll="scrollHandler"
>
<section ref="header" class="page-hd">
<van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image>
<div class="prepend-content">
<h1>{{shopInfo.name}}</h1>
<p class="text-light-grey text-extra-small">评价4.2 月售 等描述</p>
<!-- 优惠内容 -->
<div class="tags" @click="showHeaderDetail">
<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>
<div class="page-bd">
<cube-sticky-ele>
<cube-tab-bar
ref="tabBar"
v-model="currentTab"
show-slider
inline
@change="changeHandler"
class="text-medium"
>
<cube-tab v-for="item in tabs" :label="item.name" :key="item.name">{{item.name}}</cube-tab>
</cube-tab-bar>
</cube-sticky-ele>
</section>
<div class="page-bd">
<cube-sticky-ele>
<cube-tab-bar
ref="tabBar"
v-model="currentTab"
show-slider
inline
@change="changeHandler"
class="text-medium"
>
<cube-tab v-for="item in tabs" :label="item.name" :key="item.name">{{item.name}}</cube-tab>
</cube-tab-bar>
</cube-sticky-ele>
<cube-tab-panels v-model="currentTab" ref="panel">
<cube-tab-panel v-for="item in tabs" :label="item.name" :key="item.name">
<component
:is="item.is"
:disable="disable"
@scroll0="scrollTop"
:style="{height:contentH}"
></component>
</cube-tab-panel>
</cube-tab-panels>
</div>
</cube-scroll>
</cube-sticky>
<cube-tab-panels v-model="currentTab" ref="panel">
<cube-tab-panel v-for="item in tabs" :label="item.name" :key="item.name">
<component
:is="item.is"
:disable="disable"
@scroll0="scrollTop"
:style="{height:contentH}"
></component>
</cube-tab-panel>
</cube-tab-panels>
</div>
</cube-scroll>
</cube-sticky>
</div>
</template>
......@@ -96,6 +94,7 @@ export default {
tabBarH: 0, //tabbar高度
data: goods,
pageLoading: true,
shopId: 0,
shopInfo: {},
currentTab: "点餐", //当前导航 active 项的 key 值
......@@ -119,16 +118,12 @@ export default {
},
contentH() {
return document.body.clientHeight - this.tabBarH + "px";
},
opacity() {
let opacity = 0;
return (opacity = this.scrollY / 30 > 1 ? 1 : this.scrollY / 30);
}
},
mounted() {
this.$nextTick(() => {
this.headerH = this.$refs.header.offsetHeight; // 包含tabbar 在内的头部高度
this.tabBarH = this.$refs.tabBar.offsetHeight; // tabbar 高度
});
},
watch: {
disable(newVal) {
//控制外层的滚动
......@@ -148,14 +143,6 @@ export default {
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) {
this.currentTab = label;
console.log("changed to:", label);
......@@ -191,6 +178,8 @@ export default {
];
this.$store.commit("CURRENT_SHOPINFO", shopMsg.data);
}
this.pageLoading = false;
})
.catch(error => {});
},
......@@ -199,6 +188,26 @@ export default {
},
disableFn() {
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 {
<style lang="stylus">
.view-wrapper {
background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg') no-repeat; // ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg) no-repeat;
background-size: cover;
background-size: 100%;
}
.page-hd {
......@@ -267,4 +276,30 @@ export default {
.cube-tab-panel {
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>
\ 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