Skip to content

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

店铺页面功能完成

parent efab2145
Show whitespace changes
Inline Side-by-side
Showing with 1911 additions and 413 deletions
src/assets/support-ico/support-ico.vue 0 → 100644
View file @ fdd31016
<template>
<span class="support-ico" :class="iconCls"></span>
</template>
<script>
export default {
name: 'support-ico',
props: {
size: {
type: Number
},
type: {
type: Number
}
},
computed: {
iconCls() {
const classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
return `icon-${this.size} ${classMap[this.type]}`
}
}
}
</script>
<style lang="stylus" scoped>
@import "~common/stylus/mixin"
.support-ico
display: inline-block
background-repeat: no-repeat
.icon-1
width: 12px
height: 12px
background-size: 12px 12px
&.decrease
bg-image('decrease_1')
&.discount
bg-image('discount_1')
&.guarantee
bg-image('guarantee_1')
&.invoice
bg-image('invoice_1')
&.special
bg-image('special_1')
.icon-2
width: 16px
height: 16px
background-size: 16px 16px
&.decrease
bg-image('decrease_2')
&.discount
bg-image('discount_2')
&.guarantee
bg-image('guarantee_2')
&.invoice
bg-image('invoice_2')
&.special
bg-image('special_2')
.icon-3
width: 12px
height: 12px
background-size: 12px 12px
&.decrease
bg-image('decrease_3')
&.discount
bg-image('discount_3')
&.guarantee
bg-image('guarantee_3')
&.invoice
bg-image('invoice_3')
&.special
bg-image('special_3')
.icon-4
width: 16px
height: 16px
background-size: 16px 16px
&.decrease
bg-image('decrease_4')
&.discount
bg-image('discount_4')
&.guarantee
bg-image('guarantee_4')
&.invoice
bg-image('invoice_4')
&.special
bg-image('special_4')
</style>
src/common/mixins/popup.js 0 → 100644
View file @ fdd31016
const EVENT_SHOW = 'show'
const EVENT_HIDE = 'hide'
export default {
data() {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
this.$emit(EVENT_SHOW)
},
hide() {
this.visible = false
this.$emit(EVENT_HIDE)
}
}
}
src/common/mixins/rating.js 0 → 100644
View file @ fdd31016
const ALL = 2
export default {
data() {
return {
selectType: ALL,
onlyContent: true
}
},
computed: {
computedRatings() {
let ret = [];
if (this.ratings && this.ratings.length > 0) {
this.ratings.forEach((rating) => {
if (this.onlyContent && !rating.text) {
return
}
if (this.selectType === ALL || rating.rateType === this.selectType) {
ret.push(rating)
}
})
}
return ret
}
},
methods: {
onSelect(type) {
this.selectType = type
},
onToggle() {
this.onlyContent = !this.onlyContent
}
}
}
src/common/stylus/index.styl
View file @ fdd31016
......@@ -33,6 +33,9 @@
font-size: $fontsize-large-xx
}
.bg-white{
background: #fff;
}
.line::after {
position: absolute;
......
src/common/stylus/variable.styl
View file @ fdd31016
......@@ -8,6 +8,13 @@ $color-dark-green = #06ae57
$color-light-blue = #3ca0e6
$color-blue = #1296fa
$color-red = rgb(240, 20, 20)
// $color-blue = rgb(0, 160, 220)
// $color-light-blue = rgba(0, 160, 220, 0.2)
$color-green = #00b43c
$color-col-line = #d9dde1
$color-row-line = rgba(7, 17, 27, 0.1)
$margin-top-10 = 10px
$margin-top-20 = 20px
......
src/common/utils/components.js
View file @ fdd31016
import CubePage from "../../components/cube-page.vue";
import addressList from "../../components/address-list.vue";
import CubeBuyCart from "../../components/cube-buy-cart.vue";
import CubeBuyCart from "../../components/cube-cart-control.vue";
function plugin (Vue){
if(plugin.installed)return;
Vue.component('cube-page',CubePage)
Vue.component('cube-address-list',addressList)
Vue.component('cube-buy-cart',CubeBuyCart)
Vue.component('cube-cart-control',CubeBuyCart)
}
export default plugin;
\ No newline at end of file
src/components/cube-buy-cart.vue → src/components/cube-cart-control.vue
View file @ fdd31016
......@@ -12,12 +12,6 @@
<span class="cart_num" v-if="foodNum">{{foodNum}}</span>
</transition>
<i class="cubeic-add icon" @click="addToCart"></i>
<!-- <svg
class="add_icon"
@click="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)"
>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add" />
</svg>-->
</section>
</template>
......@@ -29,7 +23,9 @@ export default {
showMoveDot: [] //控制下落的小圆点显示隐藏
};
},
mounted() {},
mounted() {
},
computed: {
...mapState(["cartList"]),
/**
......@@ -40,26 +36,23 @@ export default {
},
//shopCart变化的时候重新计算当前商品的数量
foodNum: function() {
let category_id = this.categoryId;
let item_id = this.food.id;
let category_id = this.food.goods_category_id;
let food_id = this.food.id;
if (
this.shopCart &&
this.shopCart[category_id] &&
this.shopCart[category_id][item_id]
this.shopCart[category_id][food_id]
) {
// let num = 0;
// Object.values(this.shopCart[category_id][item_id]).forEach(
// (item, index) => {
// num += item.num;
// }
// );
return this.shopCart[category_id][item_id].num;
console.log(this.shopCart[category_id][food_id].num)
return this.shopCart[category_id][food_id].num;
} else {
return 0;
}
}
},
props: ["food", "shopId", "categoryId"],
props: ["food", "shopId"],
methods: {
...mapMutations(["ADD_CART", "REDUCE_CART"]),
//移出购物车
......@@ -68,7 +61,7 @@ export default {
const food = this.food;
const addInfo = {
shopid: this.shopId,
category_id: this.categoryId,
category_id: food.goods_category_id,
food_id: food.id,
name: food.name,
favorable_price: food.favorable_price,
......@@ -78,31 +71,19 @@ export default {
}
},
//加入购物车，计算按钮位置。
addToCart() {
addToCart(event) {
const food = this.food;
const addInfo = {
shopid: this.shopId,
category_id: this.categoryId,
category_id: food.goods_category_id,
food_id: food.id,
name: food.name,
favorable_price: food.favorable_price,
price: food.price
};
this.$store.commit("ADD_CART", addInfo);
let elLeft = event.target.getBoundingClientRect().left;
let elBottom = event.target.getBoundingClientRect().bottom;
this.showMoveDot.push(true);
this.$emit("showMoveDot", this.showMoveDot, elLeft, elBottom);
this.$emit("showMoveDots", event.target);
},
//显示规格列表
showChooseList(foodScroll) {
this.$emit("showChooseList", foodScroll);
},
//点击多规格商品的减按钮，弹出提示
showReduceTip() {
this.$emit("showReduceTip");
}
}
};
</script>
......
src/components/shop-cart-list.vue 0 → 100644
View file @ fdd31016
<template>
<transition name="fade" appear>
<cube-popup
:mask-closable="true"
v-show="visible"
@mask-click="maskClick"
position="bottom"
type="shop-cart-list"
:z-index="90"
>
<transition name="move" appear @after-leave="afterLeave">
<div v-if="visible">
<div class="list-header">
<h1 class="title">购物车</h1>
<span class="empty" @click="empty">清空</span>
</div>
<cube-scroll class="list-content" ref="listContent">
<ul>
<li class="food" v-for="(food,index) in selectFoods" :key="index">
<span class="name word-one">{{food.name}}</span>
<div class="price">
<span>￥{{food.price*food.num}}</span>
</div>
<div class="cart-control-wrapper">
<cube-cart-control
ref="buyCart"
:shopId="shopId"
:food="food"
@showMoveDots="showMoveDotFun"
></cube-cart-control>
</div>
</li>
</ul>
</cube-scroll>
</div>
</transition>
</cube-popup>
</transition>
</template>
<script>
import CartControl from "components/cube-cart-control";
import popupMixin from "common/mixins/popup";
const EVENT_SHOW = "show";
const EVENT_ADD = "add";
const EVENT_LEAVE = "leave";
export default {
name: "shop-cart-list",
mixins: [popupMixin],
props: {
selectFoods: {
type: Array,
default() {
return [];
}
},
},
data(){
return{
shopId:this.$route.params.id
}
},
created() {
this.$on(EVENT_SHOW, () => {
this.$nextTick(() => {
this.$refs.listContent.refresh();
});
});
},
methods: {
showMoveDotFun(target) {
this.$emit(EVENT_ADD, target);
},
afterLeave() {
this.$emit(EVENT_LEAVE);
},
maskClick() {
this.hide();
},
empty() {
this.$createDialog({
type: "confirm",
content: "清空购物车？",
confirmBtn: {
text: "确定",
active: true
},
cancelBtn: {
text: "取消"
},
onConfirm: () => {
this.selectFoods.forEach(food => {
food.num = 0;
});
this.hide();
}
}).show();
}
},
components: {
CartControl
},
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
.cube-shop-cart-list {
bottom: 48px;
&.fade-enter, &.fade-leave-active {
opacity: 0;
}
&.fade-enter-active, &.fade-leave-active {
transition: all 0.3s ease-in-out;
}
.move-enter, .move-leave-active {
transform: translate3d(0, 100%, 0);
}
.move-enter-active, .move-leave-active {
transition: all 0.3s ease-in-out;
}
.list-header {
height: 40px;
line-height: 40px;
padding: 0 14px;
background: #f3f5f7;
.title {
float: left;
font-size: $fontsize-medium;
color: $color-dark-grey;
}
.empty {
float: right;
font-size: $fontsize-small;
color: $color-blue;
}
}
.list-content {
padding: 0 14px;
max-height: 217px;
overflow: hidden;
background: $color-white;
.food {
position: relative;
padding: 12px 0;
box-sizing: border-box;
.name {
display: inline-block;
width: 63%;
// line-height: 24px;
font-size: $fontsize-medium;
color: $color-dark-grey;
}
.price {
position: absolute;
right: 80px;
bottom: 12px;
line-height: 24px;
font-weight: 700;
font-size: $fontsize-medium;
color: $color-red;
}
.cart-control-wrapper {
position: absolute;
right: 0;
bottom: 14px;
}
}
}
}
</style>
src/components/shopCart/shop-cart-sticky.vue 0 → 100644
View file @ fdd31016
<template>
<div class="shop-cart-sticky" v-show="visible">
<shop-cart
ref="shopCart"
:shopId="shopId"
:selectFoods="selectFoods"
:deliveryPrice="deliveryPrice"
:minPrice="minPrice"
:fold="fold"
:sticky="true"
></shop-cart>
</div>
</template>
<script>
import ShopCart from "components/shopCart/shop-cart";
import popupMixin from "common/mixins/popup";
export default {
name: "shop-cart-sticky",
mixins: [popupMixin],
data() {
return {
visible: true
};
},
created() {
},
props: {
selectFoods: {
type: Array,
default() {
return [];
}
},
deliveryPrice: {
type: Number,
default: 0
},
minPrice: {
type: Number,
default: 0
},
fold: {
type: Boolean,
default: true
},
list: {
type: Object,
default() {
return {};
}
},
shopId: {
type: String
},
},
methods: {
drop(el) {
this.$refs.shopCart.drop(el);
}
},
components: {
ShopCart
}
};
</script>
<style lang="stylus" scoped>
.shop-cart-sticky {
position: absolute;
left: 0;
bottom: 0;
z-index: 999;
width: 100%;
height: 48px;
}
</style>
src/components/shopCart/shop-cart.vue 0 → 100644
View file @ fdd31016
<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="cubeic-alert cart_icon"></i>
<div class="num">
<van-tag v-show="totalCount>0" round type="danger">{{totalCount}}</van-tag>
</div>
</div>
<div class="cart_num">
<div class="price">¥ {{totalPrice}}</div>
<div>另需配送费¥{{deliveryPrice}}元</div>
</div>
</section>
<div class="gotopay" :class="payClass" @click="pay">
<div>{{payDesc}}</div>
</div>
</section>
<div class="ball-container">
<div v-for="(ball,index) in balls" :key="index">
<transition @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
<div class="ball" v-show="ball.show" style="position: fixed;">
<div class="inner inner-hook"></div>
</div>
</transition>
</div>
</div>
<!-- <div class="shopcart">
<div class="ball-container">
<div v-for="(ball,index) in balls" :key="index">
<transition @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
<div class="ball" v-show="ball.show">
<div class="inner inner-hook"></div>
</div>
</transition>
</div>
</div>
</div> -->
</div>
</template>
<script>
// import Bubble from 'components/bubble/bubble'
const BALL_LEN = 10;
const innerClsHook = "inner-hook";
function createBalls() {
let balls = [];
for (let i = 0; i < BALL_LEN; i++) {
balls.push({ show: false });
}
return balls;
}
export default {
name: "shop-cart",
props: {
selectFoods: {
type: Array,
default() {
return [];
}
},
deliveryPrice: {
type: Number,
default: 0
},
minPrice: {
type: Number,
default: 0
},
sticky: {
type: Boolean,
default: false
},
fold: {
type: Boolean,
default: true
},
shopId: {
type: String
},
},
data() {
return {
balls: createBalls(),
listFold: this.fold
};
},
created() {
this.dropBalls = [];
},
computed: {
totalPrice() {
let total = 0;
this.selectFoods.forEach(food => {
total += food.price * food.num;
});
return total;
},
totalCount() {
let count = 0;
this.selectFoods.forEach(food => {
count += food.num;
});
return count;
},
payDesc() {
if (this.totalPrice === 0) {
return `￥${this.minPrice}元起送`;
} else if (this.totalPrice < this.minPrice) {
let diff = this.minPrice - this.totalPrice;
return `还差￥${diff}元起送`;
} else {
return "去结算";
}
},
payClass() {
if (!this.totalCount || this.totalPrice < this.minPrice) {
return "not-enough";
} else {
return "enough";
}
}
},
methods: {
toggleList() {
if (this.listFold) {
if (!this.totalCount) {
return;
}
this.listFold = false;
this._showShopCartList();
this._showShopCartSticky();
} else {
this.listFold = true;
this._hideShopCartList();
}
},
pay(e) {
if (this.totalPrice < this.minPrice) {
return;
}
this.$createDialog({
title: "支付",
content: `您需要支付${this.totalPrice}元`
}).show();
e.stopPropagation();
},
drop(el) {
for (let i = 0; i < this.balls.length; i++) {
const ball = this.balls[i];
if (!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
beforeDrop(el) {
const ball = this.dropBalls[this.dropBalls.length - 1];
const rect = ball.el.getBoundingClientRect();
const x = rect.left - 32;
const y = -(window.innerHeight - rect.top - 22);
el.style.display = "";
el.style.transform = el.style.webkitTransform = `translate3d(0,${y}px,0)`;
const inner = el.getElementsByClassName(innerClsHook)[0];
inner.style.transform = inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
},
dropping(el, done) {
this._reflow = document.body.offsetHeight;
el.style.transform = el.style.webkitTransform = `translate3d(0,0,0)`;
const inner = el.getElementsByClassName(innerClsHook)[0];
inner.style.transform = inner.style.webkitTransform = `translate3d(0,0,0)`;
el.addEventListener("transitionend", done);
},
afterDrop(el) {
const ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = "none";
}
},
_showShopCartList() {
this.shopCartListComp =
this.shopCartListComp ||
this.$createShopCartList({
$props: {
selectFoods: "selectFoods"
},
$events: {
leave: () => {
this._hideShopCartSticky();
},
hide: () => {
this.listFold = true;
},
add: el => {
this.shopCartStickyComp.drop(el);
}
}
});
this.shopCartListComp.show();
},
_showShopCartSticky() {
this.shopCartStickyComp =
this.shopCartStickyComp ||
this.$createShopCartSticky({
$props: {
selectFoods: "selectFoods",
deliveryPrice: "deliveryPrice",
minPrice: "minPrice",
fold: "listFold",
list: this.shopCartListComp
}
});
this.shopCartStickyComp.show();
},
_hideShopCartList() {
const list = this.sticky ? this.$parent.list : this.shopCartListComp;
list.hide && list.hide();
},
_hideShopCartSticky() {
this.shopCartStickyComp.hide();
}
},
watch: {
fold(newVal) {
this.listFold = newVal;
},
totalCount(count) {
if (!this.fold && count === 0) {
this._hideShopCartList();
}
}
}
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/mixin';
@import '~common/stylus/variable';
.buy_cart_container {
// position();
// top: 68%;
height: 50px;
background-color: #3d3d3f;
z-index: 99;
wh(100%, 50px);
flex();
.cart_icon_num {
width: 74%;
.cart_icon_container {
position: absolute;
top: -20px;
wh(60px, 60px);
font-size: 60px;
.num {
position: absolute;
top: 0;
right: 0;
text-align: right;
span {
vertical-align: top;
}
}
}
.cart_icon_activity {
color: #1296fa;
}
.cart_num {
padding-left: 60px;
.price {
scw(18px, #fff);
}
scw(12px, #7d7e80, 600);
}
}
.gotopay {
text-align: center;
background-color: #535356;
scw(14px, #fff, 600);
wh(100px, 100%);
flex();
&.no-enough {
scw(12px, #fff);
}
&.enough {
background-color: #4cd964;
}
}
}
.ball-container {
.ball {
left: 32px;
bottom: 22px;
wh(14px,14px);
z-index: 200;
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
.inner {
width: 16px;
height: 16px;
border-radius: 50%;
background: $color-blue;
transition: all 0.4s linear;
}
}
}
</style>
src/main.js
View file @ fdd31016
......@@ -6,6 +6,7 @@ import 'amfe-flexible'
import store from './store'
import './cube-ui'
import './vant';
import './register'
import VueAMap from 'vue-amap';
......
src/register.js 0 → 100644
View file @ fdd31016
import { createAPI } from 'cube-ui'
import Vue from 'vue'
import ShopCartList from 'components/shop-cart-list'
import ShopCartStikcy from 'components/shopCart/shop-cart-sticky'
import Food from "./views/shopItem/children/food-detail"
createAPI(Vue, ShopCartList)
createAPI(Vue, ShopCartStikcy)
createAPI(Vue, Food)
\ No newline at end of file
src/store/index.js
View file @ fdd31016
......@@ -16,6 +16,7 @@ const state = {
Q: 0
}
},
shopInfo:{},
edit_address: {}, // 待编辑的地址信息
cartList: {}, // 加入购物车的商品列表
}
......
src/store/mutations.js
View file @ fdd31016
import {sessionstorage} from '../common/utils/mUtils'
import { sessionstorage } from '../common/utils/mUtils'
export default {
// 记录当前地理位置
......@@ -27,6 +27,12 @@ export default {
}
}
},
// 记录当前地理位置
CURRENT_SHOPINFO(state, info) {
state.shopInfo = info;
},
// 记录待 编辑地址信息
RECORD_ADDRESSINFO(state, info) {
state.edit_address = info
......@@ -55,6 +61,7 @@ export default {
category[food_id]['num']++;
} else {
category[food_id] = {
"goods_category_id":category_id,
"num": 1,
"id": food_id,
"name": name,
......@@ -83,11 +90,10 @@ export default {
let cart = state.cartList;
let shop = (cart[shopid] || {});
let category = (shop[category_id] || {});
// let item = (category[item_id] || {});
if (category && category[food_id]) {
if (category[food_id]['num'] > 0) {
category[food_id]['num']--;
state.cartList = {...cart};
state.cartList = { ...cart };
//存入localStorage
sessionstorage.save('buyCart', state.cartList);
} else {
......
src/vant.js
View file @ fdd31016
......@@ -6,14 +6,14 @@ import {
Image,
Grid,
GridItem,
// AddressList,
Row, Col,
Cell, CellGroup ,
Field,
Button,
Tag,
Card,
Tab, Tabs
Tab, Tabs ,
Rate
} from 'vant'
Vue.use(Search)
Vue.use(Image)
......@@ -26,3 +26,5 @@ Vue.use(Field)
Vue.use(Tag)
Vue.use(Button)
Vue.use(Tab).use(Tabs);
Vue.use(Rate)
src/views/location/choise.vue
View file @ fdd31016
......@@ -35,9 +35,7 @@
<cube-loading :size="24"></cube-loading>正在定位
</div>
<div v-else-if="poisData.length==0" class="no-data text-base">
地址查询失败
</div>
<div v-else-if="poisData.length==0" class="no-data text-base">地址查询失败</div>
</cube-scroll>
</div>
</div>
......@@ -88,6 +86,7 @@ export default {
],
events: {
init(map) {
setTimeout(function() {
AMapUI.loadUI(["misc/PositionPicker"], function(PositionPicker) {
var positionPicker = new PositionPicker({
mode: "dragMap", //设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
......@@ -111,16 +110,15 @@ export default {
positionPicker.on("fail", function(positionResult) {
console.log(positionResult);
self.poisData = [];
});
if (self.hasPosition) {
let position = self.$route.query.geohash.split(",");
positionPicker.start(position);
positionPicker.start([31.19, 121.7]);
} else {
positionPicker.start();
}
positionPicker.start([31.19, 121.7]);
//TODO:事件绑定、结果处理等
});
AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
......@@ -132,6 +130,7 @@ export default {
})
);
});
}, 200);
}
}
};
......@@ -143,8 +142,11 @@ export default {
this.$store.commit("CHOISE_POSITION", curChoise);
this.$router.go(-1);
},
onSearch(){
this.$router.replace({name:'searchLocation',query:{geohash:this.$route.query.geohash}})
onSearch() {
this.$router.replace({
name: "searchLocation",
query: { geohash: this.$route.query.geohash }
});
}
}
};
......
src/views/shopItem/children/evaluate.vue deleted 100644 → 0
View file @ efab2145
<template>
<div style="height:600px;background:pink">
</div>
</template>
\ No newline at end of file
src/views/shopItem/children/food-detail.vue
View file @ fdd31016
<template>
<div class="scroll-list-wrap">
<div @click="onClosePopup">132</div>
<transition name="move" @after-leave="afterLeave">
{{food}}
<div class="food" v-show="visible">
<cube-scroll ref="scroll">
<div class="food-content">
<div class="image-header">
<img :src="$globalUrlFile+food.icon" />
<div class="back" @click="hide">
<i class="cubeic-back"></i>
</div>
</div>
<div class="content">
<h1 class="title">{{food.name}}</h1>
<div class="detail">
<span class="sell-count">月售366份</span>
<span class="rating">好评率50%</span>
</div>
<div class="price">
<span class="now">￥{{food.price}}</span>
<span class="old" v-show="food.favorable_price">￥{{food.favorable_price}}</span>
</div>
<div class="cart-control-wrapper" style="position: absolute;">
<cube-cart-control
v-show="foodNum"
ref="buyCart"
:shopId="shopId"
:food="food"
@showMoveDots="showMoveDotFun"
></cube-cart-control>
</div>
<transition name="fade">
<div @click="addFirst" class="buy" v-show="!foodNum" style="position: absolute;">加入购物车</div>
</transition>
</div>
<!-- <split v-show="food.info"></split> -->
<div class="info" v-show="food.info">
<h1 class="title">商品信息</h1>
<p class="text">{{food.info}}</p>
</div>
<!-- <split></split> -->
<div class="rating">
<h1 class="title">商品评价</h1>
<rating-select
@select="onSelect"
@toggle="onToggle"
:selectType="selectType"
:onlyContent="onlyContent"
:desc="desc"
:ratings="ratings"
></rating-select>
<div class="rating-wrapper">
<!-- <ul v-show="computedRatings && computedRatings.length">
<li
v-for="(rating,index) in computedRatings"
class="rating-item border-bottom-1px"
:key="index"
>
<div class="user">
<span class="name">{{rating.username}}</span>
<img class="avatar" width="12" height="12" :src="rating.avatar" />
</div>
<div class="time">{{format(rating.rateTime)}}</div>
<p class="text">
<span
:class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"
></span>
{{rating.text}}
</p>
</li>
</ul>-->
<div class="no-rating" v-show="!computedRatings || !computedRatings.length">暂无评价</div>
</div>
</div>
</div>
</cube-scroll>
</div>
</transition>
</template>
<script>
<script type="text/ecmascript-6">
// import moment from "moment";
// import CartControl from "components/cube-cart-control";
import RatingSelect from "./rating/rating-select";
// import Split from "components/split/split";
import ratingMixin from "common/mixins/rating";
import popupMixin from "common/mixins/popup";
import { mapState } from "vuex";
const EVENT_SHOW = "show";
const EVENT_ADD = "add";
const EVENT_LEAVE = "leave";
export default {
name: "food",
mixins: [ratingMixin, popupMixin],
props: ["food", "shopId"],
data() {
return {
desc: {
all: "全部",
positive: "推荐",
negative: "吐槽"
}
};
},
computed: {
...mapState(["cartList"]),
ratings() {
return this.food.ratings;
},
/**
* 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
*/
shopCart: function() {
return Object.assign({}, this.cartList[this.shopId]);
},
//shopCart变化的时候重新计算当前商品的数量
foodNum: function() {
let category_id = this.food.goods_category_id;
let food_id = this.food.id;
if (
this.shopCart &&
this.shopCart[category_id] &&
this.shopCart[category_id][food_id]
) {
return this.shopCart[category_id][food_id].num;
} else {
return 0;
}
}
},
created() {
this.$on(EVENT_SHOW, () => {
this.$nextTick(() => {
this.$refs.scroll.refresh();
});
});
},
methods: {
onClosePopup() {
this.$emit("close");
afterLeave() {
this.$emit(EVENT_LEAVE);
},
addFirst(event) {
//加入购物车
const food = this.food;
const addInfo = {
shopid: this.shopId,
category_id: this.categoryId,
food_id: food.id,
name: food.name,
favorable_price: food.favorable_price,
price: food.price
};
this.$store.commit("ADD_CART", addInfo);
this.$emit(EVENT_ADD, event.target);
},
showMoveDotFun(target) {
this.$emit(EVENT_ADD, target);
},
format(time) {
// return moment(time).format("YYYY-MM-DD hh:mm");
return time;
}
},
components: {
// CartControl,
RatingSelect
// Split
}
};
</script>
<style lang="stylus" scoped>
.scroll-list-wrap {
@import '~common/stylus/variable';
@import '~common/stylus/mixin.styl';
.food {
position: fixed;
left: 0;
top: 0;
bottom: 48px;
z-index: 30;
width: 100%;
background: $color-white;
&.move-enter-active, &.move-leave-active {
transition: all 0.3s linear;
}
&.move-enter, &.move-leave-active {
transform: translate3d(100%, 0, 0);
}
.image-header {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.back {
position: absolute;
top: 10px;
left: 0;
.cubeic-back {
display: block;
padding: 10px;
font-size: $fontsize-large-xxx;
color: $color-white;
}
}
}
.content {
position: relative;
padding: 18px;
.title {
line-height: 14px;
margin-bottom: 8px;
font-size: $fontsize-medium;
font-weight: 700;
color: $color-dark-grey;
}
.detail {
margin-bottom: 18px;
line-height: 10px;
height: 10px;
.sell-count, .rating {
font-size: $fontsize-small-s;
color: $color-light-grey;
}
.sell-count {
margin-right: 12px;
}
}
.price {
line-height: 24px;
font-weight: 700;
.now {
margin-right: 8px;
font-size: 14px;
color: $color-red;
}
.old {
text-decoration: line-through;
font-size: $fontsize-small-s;
color: $color-light-grey;
}
}
.cart-control-wrapper {
// position: absolute;
right: 18px;
bottom: 18px;
}
.buy {
// position: absolute;
right: 18px;
bottom: 18px;
z-index: 10;
height: 24px;
line-height: 24px;
padding: 0 12px;
box-sizing: border-box;
border-radius: 12px;
font-size: $fontsize-small-s;
color: $color-white;
background: $color-blue;
opacity: 1;
&.fade-enter-active, &.fade-leave-active {
transition: all 0.3s;
}
&.fade-enter, &.fade-leave-active {
opacity: 0;
z-index: -1;
}
}
}
.info {
padding: 18px;
.title {
line-height: 14px;
margin-bottom: 6px;
font-size: $fontsize-medium;
color: $color-dark-grey;
}
.text {
line-height: 24px;
padding: 0 8px;
font-size: $fontsize-small;
color: $color-grey;
}
}
.rating {
padding-top: 18px;
.title {
line-height: 14px;
margin-left: 18px;
font-size: $fontsize-medium;
color: $color-dark-grey;
}
.rating-wrapper {
padding: 0 18px;
.rating-item {
position: relative;
padding: 16px 0;
&:last-child {
border-none();
}
.user {
position: absolute;
right: 0;
top: 16px;
display: flex;
align-items: center;
line-height: 12px;
.name {
margin-right: 6px;
font-size: $fontsize-small-s;
color: $color-light-grey;
}
.avatar {
border-radius: 50%;
}
}
.time {
margin-bottom: 6px;
line-height: 12px;
font-size: $fontsize-small-s;
color: $color-light-grey;
}
.text {
line-height: 16px;
font-size: $fontsize-small;
color: $color-dark-grey;
.icon-thumb_up, .icon-thumb_down {
margin-right: 4px;
line-height: 16px;
font-size: $fontsize-small;
}
.icon-thumb_up {
color: $color-blue;
}
.icon-thumb_down {
color: $color-light-grey;
}
}
}
.no-rating {
padding: 16px 0;
font-size: $fontsize-small;
color: $color-light-grey;
}
}
}
}
</style>
src/views/shopItem/children/rating/rating-select.vue 0 → 100644
View file @ fdd31016
<template>
<div class="rating-select">
<div class="rating-type border-bottom-1px">
<span @click="select(2)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span
class="count">{{ratings.length}}</span></span>
<span @click="select(0)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}<span
class="count">{{positives.length}}</span></span>
<span @click="select(1)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}<span
class="count">{{negatives.length}}</span></span>
</div>
<div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
<span class="icon-check_circle"></span>
<span class="text">只看有内容的评价</span>
</div>
</div>
</template>
<script>
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2
const EVENT_TOGGLE = 'toggle'
const EVENT_SELECT = 'select'
export default {
props: {
ratings: {
type: Array,
default() {
return []
}
},
selectType: {
type: Number,
default: ALL
},
onlyContent: {
type: Boolean,
default: false
},
desc: {
type: Object,
default() {
return {
all: '全部',
positive: '满意',
negative: '不满意'
}
}
}
},
computed: {
positives() {
return this.ratings.filter((rating) => {
return rating.rateType === POSITIVE
})
},
negatives() {
return this.ratings.filter((rating) => {
return rating.rateType === NEGATIVE
})
}
},
methods: {
select(type) {
this.$emit(EVENT_SELECT, type)
},
toggleContent() {
this.$emit(EVENT_TOGGLE)
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
.rating-select
.rating-type
padding: 18px 0
margin: 0 18px
.block
display: inline-block
padding: 8px 12px
margin-right: 8px
line-height: 16px
border-radius: 1px
font-size: $fontsize-small
color: $color-grey
&.active
color: $color-white
.count
margin-left: 2px
&.positive
background: $color-light-blue
&.active
background: $color-blue
&.negative
background: $color-light-grey-s
&.active
background: $color-grey
.switch
display: flex
align-items: center
padding: 12px 18px
line-height: 24px
border-bottom: 1px solid $color-row-line
color: $color-light-grey
&.on
.icon-check_circle
color: $color-green
.icon-check_circle
margin-right: 4px
font-size: $fontsize-large-xxx
.text
font-size: $fontsize-small
</style>
src/views/shopItem/children/shop.vue
View file @ fdd31016
<template>
<div class="container" style="height:600px;">
<div class="container" style="height:620px;">
<cube-scroll-nav
:side="true"
:data="data"
:data="menuList"
:current="current"
@change="changeHandler"
@sticky-change="stickyChangeHandler"
>
<cube-scroll-nav-panel
v-for="item in data"
v-for="item in menuList"
:key="item.category_name"
:label="item.category_name"
:title="item.category_name"
......@@ -16,7 +16,7 @@
<div class="content">
<section class="card" v-for="food in item.goods_list" :key="food.id">
<van-card desc="月售360 好评率88%" :title="food.name">
<div slot="thumb" @click="onShowDetail('detailPopup')">
<div slot="thumb" @click="selectFood(food,item.category_id)">
<van-image width="100%" height="90" fit="contain" :src="$globalUrlFile+food.icon">
<template v-slot:error>
<!-- <img width="100%" src="../../assets/images/icons/list/null.png" alt /> -->
......@@ -36,16 +36,12 @@
</section>
<!-- 购物车添加、移出按钮 -->
<cube-buy-cart
<cube-cart-control
ref="buyCart"
:shopId="shopId"
:categoryId="item.category_id"
:food="food"
@moveInCart="listenInCart"
@showChooseList="showChooseList"
@showReduceTip="showReduceTip"
@showMoveDot="showMoveDotFun"
></cube-buy-cart>
@showMoveDots="showMoveDotFun"
></cube-cart-control>
</div>
</van-card>
</section>
......@@ -54,88 +50,42 @@
</cube-scroll-nav>
<!-- 底部功能条 -->
<section class="buy_cart_container">
<section @click="toggleCartList" class="cart_icon_num">
<div
class="cart_icon_container"
:class="{cart_icon_activity: totalPrice > 0, move_in_cart:receiveInCart}"
ref="cartContainer"
>
<i class="cubeic-alert cart_icon"></i>
</div>
<div class="cart_num">
<div class="price">¥ {{totalPrice}}</div>
<div>另需配送费¥{{deliveryFee}}元</div>
</div>
</section>
<section class="gotopay" :class="{gotopay_acitvity: minimumOrderAmount <= 0}">
<span class="gotopay_button_style" v-if="minimumOrderAmount > 0">还差¥{{minimumOrderAmount}}起送</span>
<router-link :to="{path:'/', query:{shopId}}" class="gotopay_button_style" v-else>去结算</router-link>
</section>
</section>
<!-- 切换已选购商品 -->
<transition name="toggle-cart">
<section class="cart_food_list" v-show="showCartList&&cartFoodList.length">
<header>
<h4>购物车</h4>
<div @click="clearCart">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove" />
</svg>
<span class="clear_cart">清空</span>
</div>
</header>
<section class="cart_food_details" id="cartFood">
<ul>
<li v-for="(item, index) in cartFoodList" :key="index" class="cart_food_li">
<div class="cart_list_num">
<p class="ellipsis">{{item.name}}</p>
<p class="ellipsis">{{item.specs}}</p>
</div>
<div class="cart_list_price">
<span>¥</span>
<span>{{item.price}}</span>
</div>
<section class="cart_list_control">
<span
@click="removeOutCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)"
>
<i class="cubeic-alert"></i>
</span>
<span class="cart_num">{{item.num}}</span>
<i class="cubeic-cart"></i>
</section>
</li>
</ul>
</section>
</section>
</transition>
<cube-popup type="my-popup" :position="position" :mask-closable="true" ref="toggleCart"></cube-popup>
<cube-popup type="my-popup" :position="position" :mask-closable="true" ref="toggleCart">My Popup Content 4</cube-popup>
<!-- <section class="shop-cart-wrapper">
<cube-shop-cart
ref="shopCart"
:select-foods="cartFoodList"
:delivery-price="seller.deliveryPrice"
:min-price="seller.minPrice"
></cube-shop-cart>
</section>-->
<!-- 商品详情 -->
<cube-popup type="my-popup" :mask="true" ref="detailPopup">
<!-- <cube-popup type="my-popup" :mask="true" ref="detailPopup">
<food-detail @close="closeDetailPopup"></food-detail>
</cube-popup>
</cube-popup>-->
</div>
</template>
<script type="text/ecmascript-6">
import { allCategoryAndGoods } from "../../../common/serve";
import goodsData from "../../../data";
// import goodsData from "../../../data";
import foodDetail from "../children/food-detail";
import cubeShopCart from "../../../components/shopCart/shop-cart";
import { mapState } from "vuex";
const goods = goodsData.goods;
// const goods = goodsData.goods;
export default {
data() {
return {
data: goods,
// data: goods,
current: 0, //当前导航 active 项的 key 值
shopId: this.$route.params.id,
position:'bottom',
position: "bottom",
showMoveDot: [], //控制下落的小圆点显示隐藏
showCartList: false, //显示购物车列表
......@@ -143,10 +93,15 @@ export default {
receiveInCart: false, //购物车组件下落的圆点是否到达目标位置
menuList: [], //食品列表
cartFoodList: [], //购物车商品列表
selectedFood: {} // 待查看详情的商品
};
},
computed: {
...mapState(["cartList"]),
seller() {
return { deliveryPrice: 5, minPrice: 20 };
},
//购物车中总共商品的数量
totalNum: function() {
let num = 0;
......@@ -177,27 +132,62 @@ export default {
return { ...this.cartList[this.shopId] };
}
},
components: { foodDetail },
components: { foodDetail, cubeShopCart },
created() {
this.initData();
},
mounted() {
this.initCategoryNum();
this.$refs.toggleCart.show()
this._showShopCartSticky();
},
methods: {
async initData() {
let res = await allCategoryAndGoods(this.shopId);
if (res.code == 0) {
this.data = res.data;
this.menuList = res.data;
this.current = res.data[0].category_name;
}
this.initCategoryNum();
},
selectFood(food, categoryId) {
this.selectedFood = food;
this._showFood(categoryId);
this._showShopCartSticky();
},
onShowDetail(ref) {
this.$refs[ref].show();
_showFood(categoryId) {
this.foodComp =
this.foodComp ||
this.$createFood({
$props: {
food: "selectedFood",
shopId: "shopId"
},
closeDetailPopup() {
this.$refs.detailPopup.hide();
$events: {
add: target => {
this.shopCartStickyComp.drop(target);
},
leave: () => {
this._hideShopCartSticky();
}
}
});
this.foodComp.show();
},
_showShopCartSticky() {
this.shopCartStickyComp =
this.shopCartStickyComp ||
this.$createShopCartSticky({
$props: {
selectFoods: "cartFoodList",
shopId: this.shopId.toString(),
deliveryPrice: this.seller.deliveryPrice,
minPrice: this.seller.minPrice,
fold: true
}
});
this.shopCartStickyComp.show();
},
_hideShopCartSticky() {
this.shopCartStickyComp.hide();
},
changeHandler(label) {
console.log("changed to:", label);
......@@ -206,31 +196,8 @@ export default {
console.log("sticky-change", current);
},
//显示下落圆球
showMoveDotFun(showMoveDot, elLeft, elBottom) {
alert(2);
this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
this.elLeft = elLeft;
this.elBottom = elBottom;
},
//控制购物列表是否显示
toggleCartList() {
this.cartFoodList.length
? (this.showCartList = !this.showCartList)
: true;
this.showCartList?this.$refs.toggleCart.show():this.$refs.toggleCart.hide();
},
//清除购物车
clearCart() {
this.toggleCartList();
this.CLEAR_CART(this.shopId);
},
//加入购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
addToCart(category_id, item_id, food_id, name, price, specs){
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs});
},
//移出购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
removeOutCart(category_id, item_id, food_id, name, price, specs){
this.REDUCE_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs});
showMoveDotFun(target) {
this.shopCartStickyComp.drop(target);
},
/**
* 初始化和shopCart变化时，重新获取购物车改变过的数据，赋值 categoryNum，totalPrice，cartFoodList，整个数据流是自上而下的形式，所有的购物车数据都交给vuex统一管理，包括购物车组件中自身的商品数量，使整个数据流更加清晰
......@@ -240,36 +207,21 @@ export default {
let cartFoodNum = 0;
this.totalPrice = 0;
this.cartFoodList = [];
this.menuList.forEach((item, index) => {
if (this.shopCart && this.shopCart[item.foods[0].category_id]) {
if (this.shopCart && this.shopCart[item.category_id]) {
let num = 0;
Object.keys(this.shopCart[item.foods[0].category_id]).forEach(
itemid => {
Object.keys(
this.shopCart[item.foods[0].category_id][itemid]
).forEach(foodid => {
let foodItem = this.shopCart[item.foods[0].category_id][itemid][
foodid
];
Object.keys(this.shopCart[item.category_id]).forEach(foodid => {
let foodItem = this.shopCart[item.category_id][foodid];
num += foodItem.num;
if (item.type == 1) {
this.totalPrice += foodItem.num * foodItem.price;
this.totalPrice += foodItem.num * Number(foodItem.price);
if (foodItem.num > 0) {
this.cartFoodList[cartFoodNum] = {};
this.cartFoodList[cartFoodNum].category_id =
item.foods[0].category_id;
this.cartFoodList[cartFoodNum].item_id = itemid;
this.cartFoodList[cartFoodNum].food_id = foodid;
this.cartFoodList[cartFoodNum].num = foodItem.num;
this.cartFoodList[cartFoodNum].price = foodItem.price;
this.cartFoodList[cartFoodNum].name = foodItem.name;
this.cartFoodList[cartFoodNum].specs = foodItem.specs;
cartFoodNum++;
}
this.cartFoodList[cartFoodNum] = { ...foodItem };
}
});
}
);
newArr[index] = num;
} else {
newArr[index] = 0;
......@@ -277,11 +229,8 @@ export default {
});
this.totalPrice = this.totalPrice.toFixed(2);
this.categoryNum = [...newArr];
},
listenInCart() {},
showChooseList() {},
showReduceTip() {},
showMoveDotFun() {}
console.log(this.cartFoodList);
}
},
watch: {
//showLoading变化时说明组件已经获取初始化数据，在下一帧nextTick进行后续操作
......@@ -292,10 +241,10 @@ export default {
this.initCategoryNum();
});
}
},
},*/
shopCart: function(value) {
this.initCategoryNum();
}, */
},
//购物车列表发生变化，没有商铺时，隐藏
cartFoodList: function(value) {
if (!value.length) {
......@@ -338,6 +287,10 @@ export default {
background-size: cover;
}
.cube-scroll-list-wrapper {
background: #fff;
}
.container {
.cube-scroll-nav-bar {
width: 80px;
......@@ -357,7 +310,7 @@ export default {
}
.cube-scroll-nav-panel-title {
padding: 15px 0;
padding: 15px;
line-height: 24px;
background-color: #fff;
scw($fontsize-small, #6e6e6e, 600);
......@@ -412,53 +365,14 @@ export default {
}
}
.buy_cart_container {
.shop-cart-wrapper {
position();
top: 68%;
height: 50px;
background-color: #3d3d3f;
z-index: 99;
wh(100%, 50px);
flex();
.cart_icon_num {
width: 74%;
.cart_icon_container {
position: absolute;
top: -20px;
wh(60px, 60px);
font-size: 60px;
}
.cart_num {
padding-left: 60px;
.price {
scw(18px, #fff);
}
scw(12px, #7d7e80, 600);
}
}
.gotopay {
text-align: center;
background-color: #535356;
wh(100px, 100%);
flex();
&_button_style {
scw(14px, #fff, 600);
}
&_acitvity {
background-color: #4cd964;
}
}
z-index: 50;
width: 100%;
height: 48px;
}
.cart_food_list{
.cart_food_list {
position: fixed;
width: 100%;
padding-bottom: 2rem;
......@@ -466,75 +380,91 @@ export default {
bottom: 0;
left: 0;
background-color: #fff;
header{
header {
// @include fj;
align-items: center;
padding: .3rem .6rem;
padding: 0.3rem 0.6rem;
background-color: #eceff1;
svg{
svg {
// @include wh(.6rem,.6rem);
vertical-align: middle;
}
h4{
h4 {
scw(12px, #666);
}
.clear_cart{
.clear_cart {
scw(12px, #666);
}
}
.cart_food_details{
.cart_food_details {
background-color: #fff;
max-height: 20rem;
overflow-y: auto;
.cart_food_li{
.cart_food_li {
// @include fj;
padding: .6rem .5rem;
.cart_list_num{
padding: 0.6rem 0.5rem;
.cart_list_num {
width: 55%;
p:nth-of-type(1){
p:nth-of-type(1) {
sc(10px, #666);
font-weight: bold;
}
p:nth-of-type(2){
p:nth-of-type(2) {
sc(10px, #666);
}
}
.cart_list_price{
.cart_list_price {
font-size: 0;
span:nth-of-type(1){
sc(10px, #f60);
font-family: Helvetica Neue,Tahoma;
span:nth-of-type(1) {
sc(10px, #f60);
font-family: Helvetica Neue, Tahoma;
}
span:nth-of-type(2){
span:nth-of-type(2) {
sc(10px, #f60);
font-family: Helvetica Neue,Tahoma;
font-family: Helvetica Neue, Tahoma;
font-weight: bold;
}
}
.cart_list_control{
.cart_list_control {
display: flex;
align-items: center;
span{
span {
display: flex;
align-items: center;
justify-content: center;
}
svg{
svg {
wh(20px, 20px);
fill: #3190e8;
}
.specs_reduce_icon{
.specs_reduce_icon {
fill: #999;
}
.cart_num{
.cart_num {
scw(12px, #666);
min-width: 1rem;
text-align: center;
font-family: Helvetica Neue,Tahoma;
}
font-family: Helvetica Neue, Tahoma;
}
}
}
}
}
</style>
src/views/shopItem/children/shopInfo.vue
View file @ fdd31016
<template>
<div>
111111111111
<cube-scroll class="seller" :options="sellerScrollOptions">
<div class="seller-content">
<div class="overview bg-white">
<h1 class="title">{{seller.name}}</h1>
<div class="desc border-bottom-1px">
<van-rate
v-model="seller.score"
allow-half
:size="16"
color="#ff9900"
void-icon="star"
void-color="#eee"
/>
<span class="text">({{seller.ratingCount}})</span>
<span class="text">月售{{seller.sellCount}}单</span>
</div>
<ul class="remark">
<li class="block">
<h2>起送价</h2>
<div class="content">
<span class="stress">{{seller.minPrice}}</span>元
</div>
</li>
<li class="block">
<h2>商家配送</h2>
<div class="content">
<span class="stress">{{seller.deliveryPrice}}</span>元
</div>
</li>
<li class="block">
<h2>平均配送时间</h2>
<div class="content">
<span class="stress">{{seller.deliveryTime}}</span>分钟
</div>
</li>
</ul>
<div class="favorite" @click="toggleFavorite" style="position: absolute;">
<span class="cubeic-like" :class="{'active':favorite}"></span>
<span class="text">{{favoriteText}}</span>
</div>
</div>
<div class="bulletin section">
<h1 class="title">公告与活动</h1>
<div class="content-wrapper border-bottom-1px">
<p class="content">{{seller.bulletin}}</p>
</div>
<ul v-if="seller.supports" class="supports">
<li
class="support-item border-bottom-1px"
v-for="(item,index) in seller.supports"
:key="index"
>
<support-ico :size="4" :type="seller.supports[index].type"></support-ico>
<span class="text">{{seller.supports[index].description}}</span>
</li>
</ul>
</div>
<div class="pics section">
<h1 class="title">商家实景</h1>
<cube-scroll class="pic-wrapper" :options="picScrollOptions">
<ul class="pic-list">
<li class="pic-item" v-for="(pic,index) in seller.pics" :key="index">
<img :src="pic" width="120" height="90" />
</li>
</ul>
</cube-scroll>
</div>
<div class="info section">
<h1 class="title border-bottom-1px">商家信息</h1>
<ul>
<li
class="info-item border-bottom-1px"
v-for="(info,index) in seller.infos"
:key="index"
>{{info}}</li>
</ul>
</div>
</div>
</cube-scroll>
</template>
<script>
// import { saveToLocal, loadFromLocal } from "common/js/storage";
import { mapState } from "vuex";
import SupportIco from "../../../assets/support-ico/support-ico";
export default {
// props: {
// data: {
// type: Object,
// default() {
// return {};
// }
// }
// },
data() {
return {
favorite: false,
sellerScrollOptions: {
directionLockThreshold: 0,
click: false
},
picScrollOptions: {
scrollX: true,
stopPropagation: true,
directionLockThreshold: 0
}
};
},
computed: {
...mapState(["shopInfo"]),
seller() {
Object.assign(this.shopInfo, {
score: 3.5,
ratingCount: 0,
sellCount: 30,
minPrice: 20,
deliveryPrice: 5,
deliveryTime: 38
});
return this.shopInfo || {};
},
favoriteText() {
return this.favorite ? "已收藏" : "收藏";
}
},
created() {
// this.favorite = loadFromLocal(this.seller.id, "favorite", false);
},
methods: {
toggleFavorite() {
this.favorite = !this.favorite;
// saveToLocal(this.seller.id, "favorite", this.favorite);
}
},
components: {
SupportIco
}
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
@import '~common/stylus/mixin';
.seller {
height: 100%;
text-align: left;
.overview {
position: relative;
padding: 18px;
.title {
margin-bottom: 8px;
line-height: 14px;
font-size: $fontsize-medium;
color: $color-dark-grey;
}
.desc {
display: flex;
align-items: center;
padding-bottom: 18px;
.star {
margin-right: 8px;
}
.text {
margin-left: 12px;
line-height: 18px;
font-size: $fontsize-small-s;
color: $color-grey;
}
}
.remark {
display: flex;
padding-top: 18px;
.block {
flex: 1;
width: 33.33%;
flex-direction: column;
text-align: center;
border-right: 1px solid $color-col-line;
&:last-child {
border: none;
}
h2 {
margin-bottom: 4px;
line-height: 10px;
font-size: $fontsize-small-s;
color: $color-light-grey;
}
.content {
line-height: 24px;
font-size: $fontsize-small-s;
color: $color-dark-grey;
.stress {
font-size: $fontsize-large-xxx;
}
}
}
}
.favorite {
width: 50px;
right: 11px;
top: 18px;
text-align: center;
.cubeic-like {
display: block;
margin-bottom: 4px;
line-height: 24px;
font-size: $fontsize-large-xxx;
color: $color-light-grey-s;
&.active {
color: $color-red;
}
}
.text {
line-height: 10px;
font-size: $fontsize-small-s;
color: $color-grey;
}
}
}
.bulletin {
padding: 18px 18px 0 18px;
white-space: normal;
.title {
margin-bottom: 8px;
line-height: 14px;
color: $color-dark-grey;
font-size: $fontsize-medium;
}
.content-wrapper {
padding: 0 12px 16px 12px;
.content {
line-height: 24px;
font-size: $fontsize-small;
color: $color-red;
}
}
.supports {
.support-item {
display: flex;
align-items: center;
padding: 16px 12px;
&:last-child {
border-none();
}
}
.support-ico {
margin-right: 6px;
}
.text {
line-height: 16px;
font-size: $fontsize-small;
color: $color-dark-grey;
}
}
}
.pics {
padding: 18px;
.title {
margin-bottom: 12px;
line-height: 14px;
color: $color-dark-grey;
font-size: $fontsize-medium;
}
.pic-wrapper {
display: flex;
align-items: center;
.pic-list {
.pic-item {
display: inline-block;
margin-right: 6px;
width: 120px;
height: 90px;
&:last-child {
margin: 0;
}
}
}
}
}
.info {
padding: 18px 18px 0 18px;
color: $color-dark-grey;
.title {
padding-bottom: 12px;
line-height: 14px;
font-size: $fontsize-medium;
}
.info-item {
padding: 16px 12px;
line-height: 16px;
font-size: $fontsize-small;
&:last-child {
border-none();
}
}
}
}
</style>
src/views/shopItem/index.vue
View file @ fdd31016
......@@ -37,7 +37,7 @@
<script>
import { allCategoryAndGoods, getShopInfo } from "../../common/serve";
import shopTab from "./children/shop";
import evaluate from "./children/evaluate";
import evaluate from "./children/rating/rating-select";
import shopInfo from "./children/shopInfo";
import goodsData from "../../data";
......@@ -88,30 +88,27 @@ export default {
console.log("changed to:", label);
},
async initData() {
let res = await allCategoryAndGoods(this.shopId);
if (res.code == 0) {
this.data = res.data;
this.current = res.data[0].category_name;
let p1 = allCategoryAndGoods(this.shopId); // 获取分类和商品数据
let p2 = getShopInfo(this.shopId); // 获取店铺信息
Promise.all([p1, p2])
.then(result => {
let goodsMsg = result[0];
if (goodsMsg.code == 0) {
this.data = goodsMsg.data;
this.current = goodsMsg.data[0].category_name;
}
let msg = await getShopInfo(this.shopId);
if (msg.code == 0) {
this.shopInfo = msg.data;
let shopMsg = result[1];
if (shopMsg.code == 0) {
this.shopInfo = shopMsg.data;
this.$store.commit('CURRENT_SHOPINFO',shopMsg.data)
}
},
})
.catch(error => {
stickyChangeHandler(current) {
console.log("sticky-change", current);
},
//显示下落圆球
showMoveDotFun(showMoveDot, elLeft, elBottom) {
this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
this.elLeft = elLeft;
this.elBottom = elBottom;
},
listenInCart() {},
showChooseList() {},
showReduceTip() {},
showMoveDotFun() {}
});
}
}
};
</script>
......@@ -133,7 +130,8 @@ export default {
.cube-tab-bar {
background-color: #fff;
.cube-tab-bar-slider{
.cube-tab-bar-slider {
}
}
</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