Skip to content

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

4

parent 426b6eac
Hide whitespace changes
Inline Side-by-side
Showing with 261 additions and 156 deletions
src/common/stylus/index.styl
View file @ e649823e
......@@ -37,8 +37,6 @@
font-size: $fontsize-large-xx
}
.bg-white{
background: #fff;
}
......
src/components/cube-cart-control.vue
View file @ e649823e
......@@ -94,7 +94,7 @@ export default {
}
.icon {
scw($fontsize-large-xx, #3190e8);
scw($fontsize-large-xxx, #3190e8);
}
.cart_num {
......
src/components/scroll/scroll-nav.vue
View file @ e649823e
......@@ -294,7 +294,7 @@ export default {
}
.cube-scroll-nav-panels {
padding-bottom: 100px;
padding-bottom: 150px;
}
> .cube-sticky {
......
src/components/shopCart/shop-cart-sticky.vue
View file @ e649823e
......@@ -4,6 +4,7 @@
ref="shopCart"
:shopId="shopId"
:selectFoods="selectFoods"
:fullReduction="fullReduction"
:deliveryPrice="deliveryPrice"
:minPrice="minPrice"
:fold="fold"
......@@ -28,6 +29,11 @@ export default {
created() {
},
props: {
fullReduction: {
default() {
return [];
}
},
selectFoods: {
type: Array,
default() {
......
src/components/shopCart/shop-cart.vue
View file @ e649823e
<template>
<div>
<section class="buy_cart_container">
<section @click="toggleList" class="cart_icon_num">
<div
class="cart_icon_container"
:class="{cart_icon_activity: totalPrice > 0}"
ref="cartContainer"
>
<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>
<section class="van-submit-bar">
<div v-show="totalCount>0&&tip!==''" class="van-submit-bar__tip">{{tip}}</div>
<section class="van-submit-bar__bar" @click="toggleList">
<div style="flex:1">
<div
class="cart_icon_container"
:class="{cart_icon_activity: totalPrice > 0}"
ref="cartContainer"
>
<div class="icon-box">
<i class="van-icon van-icon-shopping-cart cart_icon"></i>
</div>
<div class="num">
<van-tag v-show="totalCount>0" round type="danger">{{totalCount}}</van-tag>
</div>
</div>
<div class="cart_num" style="flex:1;">
<div class="price">
<span v-show="totalCount==0" class="text-base text-light-grey">未选购商品</span>
<span v-show="totalCount>0" class="final_price text-medium">¥{{finalPrice}}</span>
<span
v-show="totalCount>0&&reducedAmount"
class="text-medium text-light-grey"
>¥{{totalPrice}}</span>
</div>
<p>另需配送费¥{{deliveryPrice}}元</p>
</div>
</div>
<div class="cart_num">
<div class="price">¥ {{totalPrice}}</div>
<div>另需配送费¥{{deliveryPrice}}元</div>
</div>
<van-button class="van-submit-bar__button" :class="payClass" @click="pay">{{payDesc}}</van-button>
</section>
<div class="gotopay" :class="payClass" @click="pay">
<div>{{payDesc}}</div>
</div>
</section>
<div class="ball-container">
......@@ -51,6 +62,11 @@ function createBalls() {
export default {
name: "shop-cart",
props: {
fullReduction: {
default() {
return [];
}
},
selectFoods: {
type: Array,
default() {
......@@ -84,11 +100,13 @@ export default {
data() {
return {
balls: createBalls(),
listFold: this.fold
listFold: this.fold,
reducedAmount: 0 // 满减金额
};
},
created() {
this.dropBalls = [];
console.log(this.fullReduction);
},
mounted() {
setTimeout(() => {
......@@ -100,13 +118,22 @@ export default {
}, 400);
},
computed: {
// 原始总价格
totalPrice() {
let total = 0;
this.selectFoods.forEach(food => {
total += food.price * food.num;
});
return total;
return total.toFixed(2);
},
// 最终价格
finalPrice() {
let total = this.totalPrice;
total -= this.reducedAmount; // 满减优惠
return total.toFixed(2);
},
totalCount() {
let count = 0;
this.selectFoods.forEach(food => {
......@@ -115,6 +142,40 @@ export default {
return count;
},
// 满减提示
tip() {
let desc = "";
let total = 0, // 原始总价格
reduced = 0; // 已减价格
this.selectFoods.forEach(food => {
total += food.price * food.num;
});
if (total == 0) return;
let r = this.fullReduction[0],
c = parseInt(r.condition), // 满减条件
a = parseInt(r.amount); // 满减金额
if (total < r.condition) {
desc = `满${c}减${a}，还差${c - total}元`;
return desc;
}
this.fullReduction.forEach((item, index) => {
let c = parseInt(item.condition), // 满减条件
a = parseInt(item.amount); // 满减金额
if (item.condition > total) {
reduced = parseInt(this.fullReduction[index - 1].amount);
desc = `已减${reduced}元，再买${c - total}减${a}元`;
} else {
reduced = parseInt(
this.fullReduction[this.fullReduction.length - 1].amount
);
desc = `已减${reduced}元`;
}
});
this.reducedAmount = reduced;
return desc;
},
payDesc() {
if (this.totalPrice === 0) {
return `￥${this.minPrice}元起送`;
......@@ -151,12 +212,6 @@ export default {
if (this.totalPrice < this.minPrice) {
return;
}
/* this.$createDialog({
title: "支付",
content: `您需要支付${this.totalPrice}元`
}).show();
e.stopPropagation();
*/
let geohash = this.$route.query.geohash;
this.$router.push({
name: "confirmOrder",
......@@ -259,28 +314,47 @@ export default {
@import '~common/stylus/mixin';
@import '~common/stylus/variable';
.buy_cart_container {
.van-submit-bar {
// position();
// top: 68%;
height: 50px;
// height: 50px;
background-color: #3d3d3f;
z-index: 99;
wh(100%, 50px);
flex();
.cart_icon_num {
width: 74%;
// z-index: 99;
// wh(100%, 50px);
// flex();
.van-submit-bar__tip {
text-align: center;
// padding: 8px 12px;
// color: #f56723;
// font-size: 12px;
// line-height: 1.5;
// background-color: #fff7cc;
}
.van-submit-bar__bar {
position: relative;
flex();
.cart_icon_container {
position: absolute;
top: -20px;
left:2%;
wh(60px, 60px);
font-size: 60px;
top: -16px;
left: 2%;
wh(56px, 56px);
.van-icon {
font-size: 40px;
.icon-box {
height: 100%;
border-radius: 50%;
border: 4px solid #454545;
box-sizing: border-box;
background: #363636;
flex();
.van-icon {
scw(34px, #5e5e60);
}
}
.num {
position: absolute;
top: 0;
......@@ -288,7 +362,9 @@ export default {
text-align: right;
span {
font-size: $fontsize-small-s;
vertical-align: top;
line-height: 1.1;
}
}
}
......@@ -298,22 +374,33 @@ export default {
}
.cart_num {
padding-left: 60px;
padding-left: 80px;
.price {
scw(18px, #fff);
.final_price {
margin-right: 6px;
}
.final_price+span {
text-decoration: line-through;
}
scw($fontsize-small, #fff);
}
scw(12px, #7d7e80, 600);
p {
line-height: 1.6;
scw($fontsize-small-s, #7d7e80, 600);
}
}
}
.gotopay {
text-align: center;
.van-submit-bar__button {
height: 100%;
scw(14px, #aaa, 600);
border: none;
border-radius: 0;
background-color: #535356;
scw(14px, #fff, 600);
wh(100px, 100%);
flex();
&.no-enough {
scw(12px, #fff);
......@@ -321,6 +408,7 @@ export default {
&.enough {
background-color: #4cd964;
color: #fff;
}
}
}
......
src/views/confirmOrder/index.vue
View file @ e649823e
......@@ -32,11 +32,14 @@
<van-tag color="#1f9af8">配送费</van-tag>
</div>
</van-cell>
<van-cell title="门店优惠">
<span class="text-danger">¥{{checkoutData.delivery_fee || 0}}</span>
</van-cell>
<van-cell class="total">
<div slot="title">订单</div>
<span>
小计 ¥
<strong class="text-medium">{{checkoutData.price_final}}</strong>
<strong class="text-large">{{checkoutData.price_final}}</strong>
</span>
</van-cell>
</van-row>
......@@ -249,30 +252,6 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
/*
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
.slid_up-enter-active, .slid_up-leave-active {
transition: all 0.3s;
}
.slid_up-enter, .slid_up-leave-active {
transform: translate3d(0, 10rem, 0);
}
.router-slid-enter-active, .router-slid-leave-active {
transition: all 0.4s;
}
.router-slid-enter, .router-slid-leave-active {
transform: translate3d(2rem, 0, 0);
opacity: 0;
} */
.text-danger{
color:#f44;}
</style>
src/views/home/index.vue
View file @ e649823e
......@@ -199,11 +199,11 @@ export default {
Promise.all([p1, p2, p3])
.then(result => {
// if (result[0].code == 1003) {
// this.loading = false;
// if (!this.rejectLogin) this.noLoginDialog();
// return;
// }
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"] = [
......
src/views/order/index.vue
View file @ e649823e
<template>
<div class="container scroll-list-wrap">
<cube-loading v-if="pageLoading" :size="40"></cube-loading>
<cube-scroll
v-if="orderList.length&&!pageLoading"
......@@ -19,12 +20,12 @@
></order-card>
</cube-scroll>
<van-row v-else-if="!pageLoading" type="flex" justify="center" class="empty_tips">
<van-row v-else 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">
<div v-else-if="login&&!pageLoading">
<p class="text-default">暂无订单</p>
</div>
</van-row>
......@@ -78,6 +79,8 @@ export default {
created() {
if (this.login) {
this.initData();
}else{
this.pageLoading= false
}
},
methods: {
......
src/views/shopItem/children/rating/rating-select.vue
View file @ e649823e
......@@ -89,12 +89,14 @@ export default {
</script>
<style lang="stylus" rel="stylesheet/stylus">
.rating-type{
padding: 0 18px;
}
.van-button.btn {
color: #999;
background: #b3ddfd66;
margin: 0 18px;
margin-right: 18px;
border-color:transparent;
&.negatives {
background: #eee;
}
......
src/views/shopItem/children/shop.vue
View file @ e649823e
......@@ -15,7 +15,7 @@
:key="item.category_name"
:label="item.category_name"
:title="item.category_name"
>
>
<div class="content">
<section class="card" v-for="food in item.goods_list" :key="food.id">
<van-card desc="月售360 好评率88%" :title="food.name">
......@@ -94,7 +94,7 @@ export default {
};
},
computed: {
...mapState(["cartList"]),
...mapState(["cartList","shopInfo"]),
seller() {
return {
deliveryPrice: 0,
......@@ -216,6 +216,7 @@ export default {
this.shopCartStickyComp ||
this.$createShopCartSticky({
$props: {
fullReduction:this.shopInfo.discount,
selectFoods: "cartFoodList",
shopId: this.shopId.toString(),
deliveryPrice: this.seller.deliveryPrice,
......@@ -278,7 +279,6 @@ export default {
}
},
watch: {
shopCart: function(value) {
this.initCategoryNum();
},
......@@ -305,15 +305,22 @@ export default {
.cube-scroll-wrapper {
width: 100%;
.cube-scroll-nav-main{
padding-bottom:100px;
}
.cube-scroll-nav-main {
padding-bottom: 100px;
}
.cube-scroll-nav-bar-item {
position: relative;
padding: 20px 4px;
&_active {
color: #323232;
background-color: #fff;
span {
font-weight: 700;
}
}
}
}
......@@ -324,6 +331,8 @@ export default {
.van-tag {
right: 0;
top: 10%;
line-height: 1.2;
font-size: $fontsize-small-s;
}
}
}
......@@ -351,7 +360,7 @@ export default {
&__title {
font-weight: 600;
font-size: $fontsize-small;
font-size: $fontsize-medium;
}
&__desc {
......@@ -364,7 +373,7 @@ export default {
.card__price {
display: inline-block;
font-size: $fontsize-medium;
font-size: $fontsize-small-s;
color: #878588;
text-decoration: line-through;
}
......
src/views/shopItem/children/shopInfo.vue
View file @ e649823e
......@@ -3,7 +3,7 @@
<cube-scroll class="seller" :scroll-events="['scroll']" @scroll="onScrollHandle" :options="sellerScrollOptions">
<div class="seller-content">
<div class="overview bg-white">
<h1 class="title">{{seller.name}}</h1>
<h1 class="title"><strong class="text-large">{{seller.name}}</strong> </h1>
<div class="desc border-bottom-1px">
<van-rate
v-model="seller.score"
......@@ -54,7 +54,7 @@
</cube-scroll>
</div>
<div class="section">
<div class="section fontw">
<van-cell title="商家名称" :value="seller.name"></van-cell>
<van-cell title="商家类型" :value="seller.shop_category"></van-cell>
<van-cell title="商家地址" :value="seller.area.replace(/,/g,'') +seller.address"></van-cell>
......
src/views/shopItem/index.vue
View file @ e649823e
<template>
<div class="scroll-list-wrap " :class="{'view-wrapper':!pageLoading}">
<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" @diff-change="diffChangeHandler" fixed-show-ani="sticky-fixed-show">
<!-- <header class="sticky-header cube-sticky-fixed">
<cube-sticky
:pos="scrollY"
:check-top="checkTop"
@diff-change="diffChangeHandler"
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>
</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><strong>{{shopInfo.name}}</strong> </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>
</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>
</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"><span>{{item.name}}</span> </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>
</div>
</template>
......@@ -148,7 +153,7 @@ export default {
},
diffChangeHandler(diff) {
if (diff && diff >= 1) {
console.log(diff);
console.log(diff);
this.disable = false;
} else {
// this.disable = false;
......@@ -234,7 +239,7 @@ export default {
.van-image {
position: absolute;
top: 10%;
bottom: 44%;
left: 50%;
transform: translateX(-50%);
}
......@@ -251,9 +256,9 @@ export default {
position: relative;
text-align: left;
padding: 0 40px;
.van-tag {
margin-right: 6px;
vertical-align: middle;
}
.more {
......@@ -261,6 +266,7 @@ export default {
right: 40px;
top: 0;
height: 100%;
line-height: 20px;
background: #fff;
box-shadow: -8px 0px 10px rgba(255, 255, 255, 0.8);
}
......@@ -274,9 +280,23 @@ export default {
.cube-tab-bar {
background-color: #fff;
border-bottom: 1px solid #f1f1f1;
&-slider {
width: 0px !important;
// transform: translateX(0px) translateZ(0px);
}
.cube-tab {
padding: 10px;
padding: 0;
span{
padding: 8px 0;
}
&_active span{
color: #323232;
font-weight: 700;
border-bottom: 3px solid $color-primary;
}
}
}
......
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