Skip to content

V
vue-ssr-mobile
Commit a0b1923b authored by lixy's avatar lixy
Browse files
Options

车型、旅游、营地、底部样式优化

parent 96d13733
Expand all Show whitespace changes
Inline Side-by-side
Showing with 605 additions and 6000 deletions
assets/styles/base.scss
View file @ a0b1923b
...@@ -106,7 +106,7 @@ input[disabled] { ...@@ -106,7 +106,7 @@ input[disabled] {
} }
.main-padding{ .main-padding{
padding: 0.7rem 0.4rem; padding: 0.7rem 0.4rem 0 0.4rem;
} }
.ft-15{ .ft-15{
font-size: 15px; font-size: 15px;
......
components/footer.vue
View file @ a0b1923b
<template> <template>
<div> <div style="background: #F8F8F8;">
<div class="flex-aic-jcb"> <div class="more-way-title">
<div style="width: 30%;"> 关注·了解更多资讯
</div>
<div class="flex-aic-jcb more-way">
<div
class="erweima-item">
<img <img
style="padding: 10px"
src="../assets/images/xxgzh.jpg"> src="../assets/images/xxgzh.jpg">
<div class="tc">欣新房车</div> <div class="tc">欣新房车</div>
<div class="tc">微信公众号</div> <div class="tc">微信公众号</div>
</div> </div>
<div style="width: 30%;"> <div class="erweima-item">
<img <img
style="padding: 10px"
src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png"> src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png">
<div class="tc">滴房车APP</div> <div class="tc">滴房车APP</div>
<div class="tc">(安卓)</div> <div class="tc">(安卓)</div>
</div> </div>
<div style="width: 30%;"> <div class="erweima-item">
<img <img
style="padding: 10px"
src="../assets/images/xxfczs.jpg"> src="../assets/images/xxfczs.jpg">
<div class="tc">欣新房车</div> <div class="tc">欣新房车</div>
<div class="tc">助手小程序</div> <div class="tc">助手小程序</div>
...@@ -73,6 +80,26 @@ ...@@ -73,6 +80,26 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../assets/styles/mixin"; @import "../assets/styles/mixin";
.more-way {
padding: 10px;
}
.more-way-title{
padding-top: 20px;
font-size: 16px;
text-align: center;
font-weight: bold;
}
.erweima-item{
width: 110px;
margin-bottom: 10px;
border-radius: 3px;
padding-bottom: 30px;
box-shadow: 2px 3px 13px rgba(153,153,153,0.2);
div{
color: #999;
font-size: 14px;
}
}
.footer-container{ .footer-container{
padding: 17px 0 13px 0; padding: 17px 0 13px 0;
background: #16192C; background: #16192C;
......
components/ratingStar.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="rating_container">
<section class="star_container">
<svg
v-for="num in 5"
:key="num"
class="grey_fill">
<svg
id="star"
viewBox="0 0 32 32"
width="100%"
height="100%">
<path
d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z"
class="path1"/>
</svg>
</svg>
</section>
<div
:style="'width:' + rating*2/5 + 'rem'"
class="star_overflow">
<section class="star_container">
<svg
v-for="num in 5"
:key="num"
class="orange_fill">
<svg
id="star"
viewBox="0 0 32 32"
width="100%"
height="100%">
<path
d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z"
class="path1"/>
</svg>
</svg>
</section>
</div>
</div>
</template>
<script>
export default {
props: ["rating"]
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin";
.rating_container {
position: relative;
top: 0.1rem;
@include wh(2rem, 0.4rem);
.star_overflow {
overflow: hidden;
position: relative;
height: 100%;
}
.star_container {
position: absolute;
display: flex;
width: 2rem;
height: 0.4rem;
top: -0.02rem;
left: -0.02rem;
.grey_fill {
fill: #d1d1d1;
}
.orange_fill {
fill: #f8ce46;
}
}
}
</style>
components/shopList.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shoplist_container">
<ul
v-if="shopListArr.length"
type="1">
<router-link
v-for="item in shopListArr"
:to="{ path: 'shop', query:{geohash, id: item.id }}"
:key="item.id"
class="shop_li">
<section>
<img
:src="item.image_path"
class="shop_img">
</section>
<hgroup class="shop_right">
<header class="shop_detail_header">
<h4
:class="item.is_premium? 'premium': ''"
class="shop_title ellipsis">{{ item.name }}</h4>
</header>
</hgroup>
</router-link>
</ul>
<p
v-if="touchend"
class="empty_data">没有更多了</p>
<aside
v-if="showBackStatus"
class="return_top"
@click="backTop">
<svg class="back_top_svg">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#backtop"/>
</svg>
</aside>
<div
ref="abc"
style="background-color: red;"/>
</div>
</template>
<script>
import ratingStar from "./ratingStar";
import config from "~/config";
import {
restaurants
} from "~/assets/services/shopping";
export default {
components: {
ratingStar
},
props: [
"restaurantCategoryId",
"restaurantCategoryIds",
"sortByType",
"deliveryMode",
"supportIds",
"confirmSelect",
"geohash"
],
data() {
return {
offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
shopListArr: [], // 店铺列表数据
preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
showBackStatus: false, //显示返回顶部按钮
touchend: false //没有更多数据
};
},
watch: {
//监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
restaurantCategoryIds: function (value) {
this.listenPropChange();
},
//监听父级传来的排序方式
sortByType: function (value) {
this.listenPropChange();
},
//监听父级的确认按钮是否被点击，并且返回一个自定义事件通知父级，已经接收到数据，此时父级才可以清除已选状态
confirmSelect: function (value) {
this.listenPropChange();
}
},
mounted() {
this.initData();
},
methods: {
async initData() {
//获取数据
let res = await restaurants();
res.data.map(item => {
item.image_path = config.IMG_URL + item.image_path;
});
this.shopListArr = [...res.data];
if (res.data.length < 20) {
this.touchend = true;
}
},
//到达底部加载更多数据
async loaderMore() {
if (this.touchend) {
return;
}
//防止重复请求
if (this.preventRepeatReuqest) {
return;
}
this.preventRepeatReuqest = true;
//数据的定位加20位
this.offset += 20;
let res = await shopList(
this.latitude,
this.longitude,
this.offset,
this.restaurantCategoryId
);
this.shopListArr = [...this.shopListArr, ...res];
//当获取数据小于20，说明没有更多数据，不需要再次请求数据
if (res.length < 20) {
this.touchend = true;
return;
}
this.preventRepeatReuqest = false;
},
//返回顶部
backTop() {
animate(document.body, {
scrollTop: "0"
}, 400, "ease-out");
},
//监听父级传来的数据发生变化时，触发此函数重新根据属性值获取数据
async listenPropChange() {
this.offset = 0;
let res = await shopList(
this.latitude,
this.longitude,
this.offset,
"",
this.restaurantCategoryIds,
this.sortByType,
this.deliveryMode,
this.supportIds
);
this.hideLoading();
//考虑到本地模拟数据是引用类型，所以返回一个新的数组
this.shopListArr = [...res];
},
zhunshi(supports) {
let zhunStatus;
if (supports instanceof Array && supports.length) {
supports.forEach(item => {
if (item.icon_name === "准") {
zhunStatus = true;
}
});
} else {
zhunStatus = false;
}
return zhunStatus;
}
},
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin";
.shoplist_container {
background-color: #fff;
}
.shop_li {
display: flex;
border-bottom: 0.025rem solid #f1f1f1;
padding: 0.7rem 0.4rem;
}
.shop_img {
@include wh(2.7rem, 2.7rem);
display: block;
margin-right: 0.4rem;
}
.list_back_li {
height: 4.85rem;
.list_back_svg {
@include wh(100%, 100%);
}
}
.shop_right {
flex: auto;
.shop_detail_header {
@include fj;
align-items: center;
.shop_title {
width: 8.5rem;
color: #333;
padding-top: 0.01rem;
@include font(0.65rem, 0.65rem, "PingFangSC-Regular");
font-weight: 700;
}
.premium::before {
content: "品牌";
display: inline-block;
font-size: 0.5rem;
line-height: 0.6rem;
color: #333;
background-color: #ffd930;
padding: 0 0.1rem;
border-radius: 0.1rem;
margin-right: 0.2rem;
}
.shop_detail_ul {
display: flex;
transform: scale(0.8);
margin-right: -0.3rem;
.supports {
@include sc(0.5rem, #999);
border: 0.025rem solid #f1f1f1;
padding: 0 0.04rem;
border-radius: 0.08rem;
margin-left: 0.05rem;
}
}
}
.rating_order_num {
@include fj(space-between);
height: 0.6rem;
margin-top: 0.52rem;
.rating_order_num_left {
@include fj(flex-start);
.rating_section {
display: flex;
.rating_num {
@include sc(0.4rem, #ff6000);
margin: 0 0.2rem;
}
}
.order_section {
transform: scale(0.8);
margin-left: -0.2rem;
@include sc(0.4rem, #666);
}
}
.rating_order_num_right {
display: flex;
align-items: center;
transform: scale(0.7);
min-width: 5rem;
justify-content: flex-end;
margin-right: -0.8rem;
.delivery_style {
font-size: 0.4rem;
padding: 0.04rem 0.08rem 0;
border-radius: 0.08rem;
margin-left: 0.08rem;
border: 1px;
}
.delivery_left {
color: #fff;
background-color: $blue;
border: 0.025rem solid $blue;
}
.delivery_right {
color: $blue;
border: 0.025rem solid $blue;
}
}
}
.fee_distance {
margin-top: 0.52rem;
@include fj;
@include sc(0.5rem, #333);
.fee {
transform: scale(0.9);
@include sc(0.5rem, #666);
}
.distance_time {
transform: scale(0.9);
span {
color: #999;
}
.order_time {
color: $blue;
}
.segmentation {
color: #ccc;
}
}
}
}
.loader_more {
@include font(0.6rem, 3);
text-align: center;
color: #999;
}
.empty_data {
@include sc(0.5rem, #666);
text-align: center;
line-height: 2rem;
}
.return_top {
position: fixed;
bottom: 3rem;
right: 1rem;
.back_top_svg {
@include wh(2rem, 2rem);
}
}
.loading-enter-active,
.loading-leave-active {
transition: opacity 1s;
}
.loading-enter,
.loading-leave-active {
opacity: 0;
}
</style>
components/svg.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
components/tabbar.vue deleted 100644 → 0
View file @ 96d13733
<template>
<mt-tabbar v-model="selected">
<mt-tab-item id="0">
<div @click="goPage('/')">
<div class="mint-tab-item-icon">
<svg
v-if="selected==0"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#4aa5f0"
fill-rule="evenodd"
d="M16.822 17.089l.456.707c.212.33.14.778-.174 1.033a9.91 9.91 0 0 1-.767.555 9.817 9.817 0 0 1-7.473 1.395 9.867 9.867 0 0 1-6.265-4.334C-.383 11.822.927 5.618 5.52 2.616a9.81 9.81 0 0 1 7.475-1.394 9.866 9.866 0 0 1 6.264 4.334c.166.258.323.528.466.803.19.385.072.82-.262 1.039l-9.05 5.916a.783.783 0 0 1-1.086-.232l-.47-.73a1.668 1.668 0 0 1 .484-2.295l5.766-3.769a.286.286 0 0 0 .03-.455 6.576 6.576 0 0 0-7.821-.434 6.636 6.636 0 0 0-2.877 4.213 6.671 6.671 0 0 0 .926 5.026c1.99 3.085 6.104 3.968 9.17 1.969a1.65 1.65 0 0 1 2.288.482zm3.878-5.445c.56.863.314 2.02-.549 2.58l-.906.59a.786.786 0 0 1-1.086-.232l-1.177-1.812a.787.787 0 0 1 .23-1.086l1.813-1.176a.783.783 0 0 1 1.086.23l.589.906z"/>
</svg>
<svg
v-if="selected!=0"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#818181"
fill-rule="nonzero"
d="M7.924 6.273A5.597 5.597 0 0 0 5.48 9.828a5.596 5.596 0 0 0 .787 4.242 5.646 5.646 0 0 0 7.793 1.66 2.188 2.188 0 0 1 3.02.638l.43.663c.377.58.247 1.358-.3 1.798a10 10 0 0 1-.771.555 9.93 9.93 0 0 1-7.523 1.395 9.937 9.937 0 0 1-6.306-4.334C-.393 11.82.926 5.618 5.55 2.615a9.935 9.935 0 0 1 7.523-1.393 9.937 9.937 0 0 1 6.781 5.148c.318.64.12 1.396-.467 1.777l-8.54 5.546c-.632.41-1.478.23-1.89-.401l-.443-.684a2.182 2.182 0 0 1 .641-3.016l5.011-3.255a5.612 5.612 0 0 0-6.242-.064zm6.813 10.507c-3.184 2.062-7.453 1.152-9.519-2.03a6.846 6.846 0 0 1-.96-5.182 6.847 6.847 0 0 1 2.986-4.344 6.869 6.869 0 0 1 8.13.46.892.892 0 0 1-.098 1.422l-5.44 3.534a.932.932 0 0 0-.274 1.287l.444.684a.117.117 0 0 0 .16.034l8.54-5.547c.05-.032.067-.095.035-.16a8.687 8.687 0 0 0-5.928-4.494 8.685 8.685 0 0 0-6.583 1.22c-4.044 2.627-5.198 8.056-2.572 12.1a8.686 8.686 0 0 0 5.517 3.792 8.68 8.68 0 0 0 6.583-1.22c.231-.15.458-.314.672-.483.047-.038.057-.102.032-.142l-.43-.662a.938.938 0 0 0-1.295-.269zm5.88-5.517c.714 1.099.4 2.571-.697 3.284l-.851.553a1.362 1.362 0 0 1-1.882-.401l-1.103-1.7a1.362 1.362 0 0 1 .4-1.882l1.699-1.102a1.357 1.357 0 0 1 1.883.399l.552.85zm-1.6-.168a.107.107 0 0 0-.07-.048.107.107 0 0 0-.083.016l-1.699 1.102a.112.112 0 0 0-.032.154l1.102 1.698c.021.032.056.05.095.05a.108.108 0 0 0 .06-.016l.849-.552c.519-.337.667-1.035.33-1.555l-.551-.849z"/>
</svg>
</div>
首页
</div>
</mt-tab-item>
<mt-tab-item id="1">
<div @click="goPage('/discover')">
<div class="mint-tab-item-icon">
<svg
v-if="selected==1"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#4aa5f0"
fill-rule="evenodd"
d="M3.929 3.929c3.899-3.9 10.243-3.9 14.142 0 3.899 3.899 3.899 10.243 0 14.142-3.899 3.9-10.243 3.9-14.142 0-3.9-3.899-3.9-10.243 0-14.142zM14.639 7a.363.363 0 0 0-.146.03l-4.39 1.901c-.254.11-.493.264-.701.471a2.23 2.23 0 0 0-.476.712l-1.896 4.38a.363.363 0 0 0 .476.476l4.38-1.896a2.203 2.203 0 0 0 1.183-1.178l1.9-4.39A.363.363 0 0 0 14.64 7zM11 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</svg>
<svg
v-if="selected!=1"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#818181"
fill-rule="nonzero"
d="M16.62 2.727a.75.75 0 0 1-.844 1.24 8.455 8.455 0 0 0-4.095-1.44 8.5 8.5 0 0 0-9.153 7.792 8.499 8.499 0 0 0 7.79 9.153 8.5 8.5 0 0 0 9.154-7.791 8.46 8.46 0 0 0-1.435-5.449.75.75 0 1 1 1.24-.842 9.96 9.96 0 0 1 1.69 6.411c-.442 5.505-5.264 9.609-10.768 9.166-5.505-.442-9.61-5.263-9.166-10.768C1.475 4.694 6.296.59 11.8 1.033c1.75.14 3.398.727 4.819 1.694zM14.638 7c.244 0 .44.254.331.506l-1.9 4.39c-.11.255-.264.494-.471.702-.21.21-.454.367-.712.476l-4.38 1.895a.363.363 0 0 1-.476-.476l1.895-4.38c.11-.258.266-.5.477-.711.207-.208.447-.362.7-.471l4.391-1.9A.367.367 0 0 1 14.638 7zM12.45 9.55l-1.751.757a.737.737 0 0 0-.237.156.753.753 0 0 0-.156.236l-.758 1.752 1.742-.753a.766.766 0 0 0 .247-.161.733.733 0 0 0 .154-.234l.76-1.754z"/>
</svg>
</div>
发现
</div>
</mt-tab-item>
<mt-tab-item id="2">
<div @click="goPage('/order')">
<div class="mint-tab-item-icon">
<svg
v-if="selected==2"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#4aa5f0"
fill-rule="evenodd"
d="M2.75 1.5h16.5a.75.75 0 0 1 .75.75v11.5a6.758 6.758 0 0 1-6.75 6.75H2.75a.75.75 0 0 1-.75-.75V2.25a.75.75 0 0 1 .75-.75zm12 6.5a.75.75 0 0 0 0-1.5h-7.5a.75.75 0 0 0 0 1.5h7.5zm-3.002 5.003a.75.75 0 0 0 0-1.5H7.25a.75.75 0 0 0 0 1.5h4.498z"/>
</svg>
<svg
v-if="selected!=2"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#818181"
fill-rule="nonzero"
d="M7.25 8a.75.75 0 0 1 0-1.5h7.5a.75.75 0 1 1 0 1.5h-7.5zm0 5.004a.75.75 0 1 1 0-1.5h4.498a.75.75 0 1 1 0 1.5H7.25zM3.5 3v16h9.75c2.9 0 5.25-2.35 5.25-5.25V5.748a.75.75 0 1 1 1.5 0v8.002a6.75 6.75 0 0 1-6.75 6.75H2.75a.75.75 0 0 1-.75-.75V2.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 1 1 0 1.5H3.5z"/>
</svg>
</div>
订单
</div>
</mt-tab-item>
<mt-tab-item id="3">
<div @click="goPage('/user')">
<div class="mint-tab-item-icon">
<svg
v-if="selected==3"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#4aa5f0"
fill-rule="evenodd"
d="M11 1c2.757 0 5 2.243 5 5v1c0 2.757-2.243 5-5 5S6 9.757 6 7V6c0-2.757 2.243-5 5-5zm5.967 10.071A6.76 6.76 0 0 1 21 17.251v3a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75v-3a6.76 6.76 0 0 1 4.033-6.18.992.992 0 0 1 1.135.263A6.476 6.476 0 0 0 11 13.5c1.919 0 3.642-.84 4.832-2.166a.993.993 0 0 1 1.135-.263z"/>
</svg>
<svg
v-if="selected!=3"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#818181"
fill-rule="nonzero"
d="M10.955 12H7.75a5.25 5.25 0 0 0-5.25 5.25v2.25h17v-2.25a5.244 5.244 0 0 0-2.626-4.548.75.75 0 0 1 .75-1.3l.183.11A6.745 6.745 0 0 1 21 17.25v3a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75v-3a6.75 6.75 0 0 1 6.436-6.743A4.984 4.984 0 0 1 6 7V6a5 5 0 0 1 10 0v1a5 5 0 0 1-5.045 5zM11 10.5A3.5 3.5 0 0 0 14.5 7V6a3.5 3.5 0 0 0-7 0v1a3.5 3.5 0 0 0 3.5 3.5z"/>
</svg>
</div>
我的
</div>
</mt-tab-item>
</mt-tabbar>
</template>
<script>
export default {
props: {
page: {
default: 0
}
},
data() {
return {
selected: 0
};
},
created() {
this.selected = this.page;
},
methods: {
goPage(url) {
this.$router.replace(url);
}
}
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin";
.mint-tabbar>.mint-tab-item.is-selected {
background: #fafafa;
}
.mint-tab-item-icon {
@include wh(22px, 22px);
}
.mint-tabbar {
color: #818181;
position: fixed;
}
.mint-tabbar>.mint-tab-item.is-selected {
color: $primary;
}
</style>
layouts/default.vue
View file @ a0b1923b
<template> <template>
<div> <div>
<nuxt/> <nuxt/>
<svg-icon />
</div> </div>
</template> </template>
<script> <script>
import svgIcon from "../components/svg";
export default { export default {
components: { components: {
svgIcon
} }
}; };
</script> </script>
......
pages/campsiteDetail/components/goods/cartcontrol.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="cartcontrol">
<svg
v-show="food.count>0"
class="inner"
fill="rgb(35, 149, 255)"
@click.stop.prevent="decreaseCart"><use xlink:href="#cart-minus"/></svg>
<div
v-show="food.count>0"
class="cart-count">{{ food.count }}</div>
<svg
width="24"
height="24"
fill="rgb(35, 149, 255)"
@click="addCart"><use xlink:href="#cart-add"/></svg>
</div>
</template>
<script>
import Vue from "vue";
export default {
props: ['food'],
methods: {
addCart(event) {
if (!this.food.count) {
Vue.set(this.food, "count", 1);
} else {
this.food.count++;
}
this.$emit("add", event.target);
},
decreaseCart(event) {
if (this.food.count) {
this.food.count--;
}
}
}
};
</script>
<style lang="scss">
.cartcontrol {
display: flex;
align-items: center;
.inner {
width: 24px;
height: 24px;
}
.cart-count {
display: inline-block;
vertical-align: top;
width: 25px;
text-align: center;
font-size: 15px;
color: #333;
}
.cart-add {
display: inline-block;
padding: 6px;
line-height: 24px;
font-size: 24px;
color: rgb(0, 160, 220);
}
}
</style>
pages/campsiteDetail/components/goods/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="goods-page">
<div class="menu-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
:class="{'current':currentIndex === index}"
class="menu-item"
@click="selectMenu(index,$event)">
<span class="text">
<!-- <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span> -->
{{ item.name }}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
class="food-list food-list-hook">
<h1
:id="'a'+index"
class="title">{{ item.name }}</h1>
<ul>
<li
v-for="(food, index) in item.foods"
:key="index"
class="food-item border-1px">
<div class="icon">
<img :src="food.icon" >
</div>
<div class="content">
<h2 class="name">{{ food.name }}</h2>
<p class="desc">{{ food.description }}</p>
<div class="extra">
<span class="count">月售{{ food.sellCount }}份</span><span>好评率{{ food.rating }}%</span>
</div>
<div class="price">
<span class="now">￥<b>{{ food.price }}</b></span>
<cartcontrol :food="food" />
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<shopcart
ref="shopcart"
:select-foods="selectFoods"
:delivery-price="seller.deliveryPrice"
:min-price="seller.minPrice"/>
</div>
</template>
<script>
import shopcart from "./shopcart";
import cartcontrol from "./cartcontrol";
import * as shoppingApi from "~/assets/services/shopping";
export default {
components: {
shopcart,
cartcontrol
},
props: {
seller: {
default: {}
}
},
data() {
return {
goods: [],
listHeight: [],
scrollY: 0,
classMap: ["decrease", "discount", "special", "invoice", "guarantee"],
currentIndex: 0,
isScroll: false
};
},
computed: {
selectFoods() {
let foods = [];
this.goods.forEach(good => {
good.foods.forEach(food => {
if (food.count) {
foods.push(food);
}
});
});
return foods;
}
},
created() {},
mounted() {
shoppingApi.goods().then(res => {
if (res.code === 0) {
this.goods = res.data;
}
});
//菜品滚动选择类目
document.querySelector(".foods-wrapper").addEventListener(
"scroll",
this.throttle(() => {
// 防止手动选择的时候误操作
if (this.isScroll) {
return;
}
this.goods.map((item, index) => {
const rect_top = document
.querySelector("#a" + index)
.getBoundingClientRect().top;
const container_top = document
.querySelector(".foods-wrapper")
.getBoundingClientRect().top;
if (
rect_top - container_top < 100 &&
rect_top - container_top > -100
) {
this.currentIndex = index;
}
});
}, 50)
);
},
methods: {
selectMenu(index) {
if (index === this.currentIndex) {
return;
}
this.currentIndex = index;
this.animateScroll("#a" + index, ".foods-wrapper", 50);
},
// 平滑滚动方法
animateScroll(element, container, speed) {
this.isScroll = true;
let rect =
document.querySelector(element).getBoundingClientRect().top -
document.querySelector(container).getBoundingClientRect().top;
//获取元素相对窗口的top值，此处应加上窗口本身的偏移
let top = rect + document.querySelector(container).scrollTop;
let currentTop = 0;
let requestId;
//采用requestAnimationFrame，平滑动画
const step = timestamp => {
if (currentTop <= top) {
document.querySelector(container).scrollTo(0, currentTop);
requestId = window.requestAnimationFrame(step);
} else {
window.cancelAnimationFrame(requestId);
this.isScroll = false;
}
currentTop += speed;
};
window.requestAnimationFrame(step);
},
// 函数防抖
throttle(method, delay) {
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
method.apply(this, arguments);
}, delay);
};
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.goods-page {
display: flex;
background: #fff;
width: 100%;
.menu-wrapper {
flex: 0 0 80px;
width: 80px;
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #f8f8f8;
.menu-item {
display: table;
height: 54px;
padding: 0 12px;
line-height: 14px;
&.current {
position: relative;
margin-top: -1px;
z-index: 10;
background: #ffffff;
.text {
color: #333;
}
}
.icon {
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-right: 2px;
background-size: 12px 12px;
background-repeat: no-repeat;
// &.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');
// }
}
.text {
display: table-cell;
width: 56px;
vertical-align: middle;
font-size: 12px;
position: relative;
color: #666;
}
}
}
.foods-wrapper {
width: calc(100vw - 80px);
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 60px;
.title {
padding-left: 14px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666;
}
.food-item {
display: flex;
margin: 10px;
padding-bottom: 18px;
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
content: " ";
}
&:last-child {
margin-bottom: 0;
&:after {
display: none;
}
}
.icon {
flex: 0 0 80px;
margin-right: 10px;
}
.content {
flex: 1;
position: relative;
.name {
margin: 2px 0 8px 0px;
height: 14px;
line-height: 14px;
font-size: 14px;
color: rgb(7, 17, 27);
}
.desc,
.extra {
line-height: 10px;
font-size: 12px;
color: rgb(147, 153, 159);
transform: scale(0.9) translateX(-6%);
}
.desc {
margin-bottom: 8px;
line-height: 12px;
max-width: px2rem(350px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.extra {
.count {
margin-right: 12px;
}
}
.price {
width: 100%;
font-weight: 700;
position: absolute;
bottom: 0;
@include fj(space-between);
.now {
margin-right: 8px;
font-size: 14px;
color: rgb(255, 83, 57);
}
.old {
text-decoration: line-through;
font-size: 10px;
color: rgb(147, 153, 159);
}
b {
font-weight: normal;
font-size: 18px;
}
}
}
}
}
}
</style>
pages/campsiteDetail/components/goods/shopcart.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/campsiteDetail/components/header.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shop-header">
<div class="head">
<nav :style="`background-image: url('${banner}');`">
<i
class="mintui mintui-back"
@click="$router.go(-1);"/>
<img
:src="seller.avatar"
class="shop-logo">
</nav>
</div>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.shop-header {
background: #fff;
.head {
height: px2rem(200px);
nav {
height: px2rem(200px);
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
padding: px2rem(10px);
position: relative;
.mintui-back {
font-size: px2rem(46px);
color: #fff;
}
.shop-logo {
width: px2rem(150px);
height: px2rem(150px);
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
}
}
.content {
font-size: px2rem(24px);
margin-top: px2rem(50px);
text-align: center;
h2 {
font-size: px2rem(40px);
}
.info {
color: #666;
span {
margin: 0 px2rem(10px);
}
}
}
.foot {
padding: 0 px2rem(70px);
margin-top: 10px;
font-size: px2rem(24px);
.mint-badge {
transform: scale(0.8) translateX(-10%);
border-radius: 1px;
}
.announcement {
display: inline-block;
width: 100%;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
pages/campsiteDetail/components/ratings/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratings-page">
<div class="ratings-content">
<div class="overview">
<div class="overview-left">
<h1 class="score">{{ seller.score }}</h1>
<div class="title">
商家评分
<rating-star :rating="seller.score" />
</div>
</div>
<div class="overview-right">
<div class="score-wrapper">
<span class="title">味道</span>
<p class="score">{{ seller.serviceScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">包装</span>
<p class="score">{{ seller.foodScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">配送</span>
<p class="score">{{ seller.deliveryTime }}</p>
</div>
</div>
</div>
<div class="placeholder"/>
<ratingselect
:select-type="selectType"
:only-content="onlyContent"
:ratings="ratings"
@select="selectRating"
@toggle="toggleContent" />
<div class="rating-wrapper">
<ul>
<li
v-for="(rating, index) in ratings"
v-show="needShow(rating.rateType, rating.text)"
:key="index"
class="rating-item">
<div class="avatar">
<span :style="'background-position: 0 '+rating.avatar"/>
</div>
<div class="content">
<h1 class="name">{{ rating.username }}</h1>
<div class="star-wrapper">
<rating-star
:size="24"
:rating="rating.score" />
</div>
<p class="text">{{ rating.text }}</p>
<div
v-show="rating.recommend && rating.recommend.length"
class="recommend">
<span
v-for="(item, index) in rating.recommend"
:key="index"
class="item">{{ item }}</span>
</div>
<div class="time">
{{ rating.rateTime }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import ratingStar from "~/components/ratingStar";
import ratingselect from "./ratingselect";
import * as shoppingApi from "~/assets/services/shopping";
import moment from "moment";
export default {
components: {
ratingStar,
ratingselect
},
props: {
seller: {
default: {}
}
},
data() {
return {
ratings: [],
selectType: 2,
onlyContent: true
};
},
mounted() {
shoppingApi.ratings().then(res => {
if (res.code === 0) {
this.ratings = res.data;
this.ratings.map(item => {
item.rateTime = moment(item.rateTime).format("YYYY/M/D");
});
}
});
},
methods: {
needShow(type, text) {
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === 2) {
return true;
} else {
return type === this.selectType;
}
},
selectRating(type) {
this.selectType = type;
},
toggleContent() {
this.onlyContent = !this.onlyContent;
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.ratings-page {
background: #fff;
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
.overview {
display: flex;
padding: 18px 0;
.overview-left {
width: px2rem(340px);
@include fj(center);
align-items: center;
text-align: center;
.score {
font-size: px2rem(80px);
margin-right: px2rem(20px);
color: #ff6000;
font-weight: 400;
}
.title {
font-size: 12px;
}
}
.overview-right {
flex: 1;
@include fj(space-around);
align-items: center;
text-align: center;
color: #666;
.score-wrapper {
.title {
display: inline-block;
}
.score {
font-size: px2rem(40px);
}
}
}
}
.rating-wrapper {
padding: 0 18px;
.rating-item {
display: flex;
padding: 18px 0;
.avatar {
flex: 0 0 28px;
width: 28px;
margin-right: 12px;
span {
border-radius: 50%;
display: inline-block;
width: 30px;
height: 30px;
background: url("../../../../assets/images/sprite-avatar.png");
background-position: 0 0;
background-size: 30px;
}
}
.content {
position: relative;
flex: 1;
font-size: px2rem(28px);
.name {
margin-bottom: 4px;
line-height: 12px;
color: rgb(7, 17, 27);
}
.star-wrapper {
margin-bottom: 6px;
.star {
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
}
.text {
margin: 8px 0;
line-height: 18px;
color: rgb(7, 17, 27);
}
.recommend {
line-height: 16px;
font-size: 0;
.icon-thumb_up,
.item {
display: inline-block;
margin: 0 8px 4px 0;
font-size: 9px;
}
.icon-thumb_up {
color: rgb(0, 160, 220);
}
.item {
padding: 0 6px;
border: 1px solid rgba(7, 17, 27, 0.1);
border-radius: 1px;
color: rgb(147, 153, 159);
background: #fff;
}
}
.time {
position: absolute;
top: 0;
right: 0;
line-height: 12px;
font-size: 10px;
color: rgb(147, 153, 159);
}
}
}
}
}
</style>
pages/campsiteDetail/components/ratings/ratingselect.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratingselect">
<div class="rating-type border-1px">
<span
:class="{'active':selectType===2}"
class="block positive"
@click="select(2,$event)">{{ desc.all }}
<span class="count">{{ ratings.length }}</span>
</span>
<span
:class="{'active':selectType===0}"
class="block positive"
@click="select(0,$event)">{{ desc.positive }}<span
class="count">{{ positives.length }}</span></span>
<span
:class="{'active':selectType===1}"
class="block negative"
@click="select(1,$event)">{{ desc.negative }}<span
class="count">{{ negatives.length }}</span></span>
</div>
<div
:class="{'on':onlyContent}"
class="switch"
@click="toggleContent">
<!-- <span class="icon-check_circle"></span> -->
<svg
width="12"
height="12"
class="check">
<use xlink:href="#select"/>
</svg>
<span class="text">只看有内容的评价</span>
</div>
</div>
</template>
<script>
export default {
props: {
ratings: {
type: Array,
default () {
return [];
}
},
selectType: {
type: Number,
default: 2
},
onlyContent: {
type: Boolean,
default: false
},
desc: {
type: Object,
default () {
return {
all: "全部",
positive: "满意",
negative: "不满意"
};
}
}
},
computed: {
positives() {
return this.ratings.filter(rating => {
return rating.rateType === 0;
});
},
negatives() {
return this.ratings.filter(rating => {
return rating.rateType === 1;
});
}
},
methods: {
select(type, event) {
this.$emit("select", type);
},
toggleContent(event) {
this.$emit("toggle");
}
}
};
</script>
<style lang="scss">
.ratingselect {
.rating-type {
padding: 18px 0;
margin: 0 18px;
font-size: 0;
.block {
display: inline-block;
padding: 8px 12px;
margin-right: 8px;
line-height: 16px;
border-radius: 1px;
font-size: 12px;
color: rgb(77, 85, 93);
&.active {
color: #fff;
}
.count {
margin-left: 2px;
font-size: 12px;
}
&.positive {
background: rgba(0, 160, 220, 0.2);
&.active {
background: rgb(0, 160, 220);
}
}
&.negative {
background: rgba(77, 85, 93, 0.2);
&.active {
background: rgb(77, 85, 93);
}
}
}
}
.switch {
display: flex;
align-items: center;
padding: 12px 18px;
line-height: 24px;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
color: rgb(147, 153, 159);
font-size: 0;
svg {
margin-right: 5px;
fill: #e8e8e8;
}
&.on {
.check {
fill: #76d572;
}
}
.icon-check_circle {
display: inline-block;
vertical-align: top;
margin-right: 4px;
font-size: 24px;
}
.text {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
}
}
</style>
pages/campsiteDetail/components/seller.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="seller-page">
<div class="logo">
<img
:src="banner"
alt="">
</div>
<h2>{{ seller.name }}</h2>
<p>{{ seller.bulletin }}</p>
<a
:href="seller.brandstory"
class="brandstory">查看品牌故事</a>
<div class="placeholder"/>
<h2>配送信息</h2>
<p>由蜂鸟快送提供配送，约{{ seller.deliveryTime }}分钟送达，距离2.1km</p>
<p>配送费￥{{ seller.deliveryPrice }}</p>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.seller-page {
background: #fff;
padding-bottom: px2rem(30px);
.logo {
padding: px2rem(30px) px2rem(30px) 0 px2rem(30px);
}
h2 {
font-size: px2rem(32px);
margin-top: px2rem(40px);
padding: 0 px2rem(30px) px2rem(20px) px2rem(30px);
}
p {
padding: 0 px2rem(30px);
color: #666;
font-size: px2rem(26px);
line-height: 1.5;
}
.brandstory {
display: block;
line-height: px2rem(100px);
margin-top: px2rem(50px);
color: #666;
font-size: px2rem(28px);
text-align: center;
}
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
}
</style>
pages/campsiteDetail/index.vue
View file @ a0b1923b
This diff is collapsed.
pages/index.vue
View file @ a0b1923b
...@@ -153,7 +153,6 @@ ...@@ -153,7 +153,6 @@
<script> <script>
import Footer from "~/components/footer"; import Footer from "~/components/footer";
import Head from "~/components/head"; import Head from "~/components/head";
import ShopList from "~/components/shopList";
import config from "~/config"; import config from "~/config";
import axios from '../plugins/axios' import axios from '../plugins/axios'
import { import {
...@@ -164,7 +163,6 @@ ...@@ -164,7 +163,6 @@
components: { components: {
Head, Head,
Footer, Footer,
ShopList,
GoTop GoTop
}, },
data() { data() {
......
pages/newsDetail/components/goods/cartcontrol.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="cartcontrol">
<svg
v-show="food.count>0"
class="inner"
fill="rgb(35, 149, 255)"
@click.stop.prevent="decreaseCart"><use xlink:href="#cart-minus"/></svg>
<div
v-show="food.count>0"
class="cart-count">{{ food.count }}</div>
<svg
width="24"
height="24"
fill="rgb(35, 149, 255)"
@click="addCart"><use xlink:href="#cart-add"/></svg>
</div>
</template>
<script>
import Vue from "vue";
export default {
props: ['food'],
methods: {
addCart(event) {
if (!this.food.count) {
Vue.set(this.food, "count", 1);
} else {
this.food.count++;
}
this.$emit("add", event.target);
},
decreaseCart(event) {
if (this.food.count) {
this.food.count--;
}
}
}
};
</script>
<style lang="scss">
.cartcontrol {
display: flex;
align-items: center;
.inner {
width: 24px;
height: 24px;
}
.cart-count {
display: inline-block;
vertical-align: top;
width: 25px;
text-align: center;
font-size: 15px;
color: #333;
}
.cart-add {
display: inline-block;
padding: 6px;
line-height: 24px;
font-size: 24px;
color: rgb(0, 160, 220);
}
}
</style>
pages/newsDetail/components/goods/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="goods-page">
<div class="menu-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
:class="{'current':currentIndex === index}"
class="menu-item"
@click="selectMenu(index,$event)">
<span class="text">
<!-- <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span> -->
{{ item.name }}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
class="food-list food-list-hook">
<h1
:id="'a'+index"
class="title">{{ item.name }}</h1>
<ul>
<li
v-for="(food, index) in item.foods"
:key="index"
class="food-item border-1px">
<div class="icon">
<img :src="food.icon" >
</div>
<div class="content">
<h2 class="name">{{ food.name }}</h2>
<p class="desc">{{ food.description }}</p>
<div class="extra">
<span class="count">月售{{ food.sellCount }}份</span><span>好评率{{ food.rating }}%</span>
</div>
<div class="price">
<span class="now">￥<b>{{ food.price }}</b></span>
<cartcontrol :food="food" />
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<shopcart
ref="shopcart"
:select-foods="selectFoods"
:delivery-price="seller.deliveryPrice"
:min-price="seller.minPrice"/>
</div>
</template>
<script>
import shopcart from "./shopcart";
import cartcontrol from "./cartcontrol";
import * as shoppingApi from "~/assets/services/shopping";
export default {
components: {
shopcart,
cartcontrol
},
props: {
seller: {
default: {}
}
},
data() {
return {
goods: [],
listHeight: [],
scrollY: 0,
classMap: ["decrease", "discount", "special", "invoice", "guarantee"],
currentIndex: 0,
isScroll: false
};
},
computed: {
selectFoods() {
let foods = [];
this.goods.forEach(good => {
good.foods.forEach(food => {
if (food.count) {
foods.push(food);
}
});
});
return foods;
}
},
created() {},
mounted() {
shoppingApi.goods().then(res => {
if (res.code === 0) {
this.goods = res.data;
}
});
//菜品滚动选择类目
document.querySelector(".foods-wrapper").addEventListener(
"scroll",
this.throttle(() => {
// 防止手动选择的时候误操作
if (this.isScroll) {
return;
}
this.goods.map((item, index) => {
const rect_top = document
.querySelector("#a" + index)
.getBoundingClientRect().top;
const container_top = document
.querySelector(".foods-wrapper")
.getBoundingClientRect().top;
if (
rect_top - container_top < 100 &&
rect_top - container_top > -100
) {
this.currentIndex = index;
}
});
}, 50)
);
},
methods: {
selectMenu(index) {
if (index === this.currentIndex) {
return;
}
this.currentIndex = index;
this.animateScroll("#a" + index, ".foods-wrapper", 50);
},
// 平滑滚动方法
animateScroll(element, container, speed) {
this.isScroll = true;
let rect =
document.querySelector(element).getBoundingClientRect().top -
document.querySelector(container).getBoundingClientRect().top;
//获取元素相对窗口的top值，此处应加上窗口本身的偏移
let top = rect + document.querySelector(container).scrollTop;
let currentTop = 0;
let requestId;
//采用requestAnimationFrame，平滑动画
const step = timestamp => {
if (currentTop <= top) {
document.querySelector(container).scrollTo(0, currentTop);
requestId = window.requestAnimationFrame(step);
} else {
window.cancelAnimationFrame(requestId);
this.isScroll = false;
}
currentTop += speed;
};
window.requestAnimationFrame(step);
},
// 函数防抖
throttle(method, delay) {
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
method.apply(this, arguments);
}, delay);
};
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.goods-page {
display: flex;
background: #fff;
width: 100%;
.menu-wrapper {
flex: 0 0 80px;
width: 80px;
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #f8f8f8;
.menu-item {
display: table;
height: 54px;
padding: 0 12px;
line-height: 14px;
&.current {
position: relative;
margin-top: -1px;
z-index: 10;
background: #ffffff;
.text {
color: #333;
}
}
.icon {
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-right: 2px;
background-size: 12px 12px;
background-repeat: no-repeat;
// &.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');
// }
}
.text {
display: table-cell;
width: 56px;
vertical-align: middle;
font-size: 12px;
position: relative;
color: #666;
}
}
}
.foods-wrapper {
width: calc(100vw - 80px);
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 60px;
.title {
padding-left: 14px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666;
}
.food-item {
display: flex;
margin: 10px;
padding-bottom: 18px;
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
content: " ";
}
&:last-child {
margin-bottom: 0;
&:after {
display: none;
}
}
.icon {
flex: 0 0 80px;
margin-right: 10px;
}
.content {
flex: 1;
position: relative;
.name {
margin: 2px 0 8px 0px;
height: 14px;
line-height: 14px;
font-size: 14px;
color: rgb(7, 17, 27);
}
.desc,
.extra {
line-height: 10px;
font-size: 12px;
color: rgb(147, 153, 159);
transform: scale(0.9) translateX(-6%);
}
.desc {
margin-bottom: 8px;
line-height: 12px;
max-width: px2rem(350px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.extra {
.count {
margin-right: 12px;
}
}
.price {
width: 100%;
font-weight: 700;
position: absolute;
bottom: 0;
@include fj(space-between);
.now {
margin-right: 8px;
font-size: 14px;
color: rgb(255, 83, 57);
}
.old {
text-decoration: line-through;
font-size: 10px;
color: rgb(147, 153, 159);
}
b {
font-weight: normal;
font-size: 18px;
}
}
}
}
}
}
</style>
pages/newsDetail/components/goods/shopcart.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/newsDetail/components/header.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shop-header">
<div class="head">
<nav :style="`background-image: url('${banner}');`">
<i
class="mintui mintui-back"
@click="$router.go(-1);"/>
<img
:src="seller.avatar"
class="shop-logo">
</nav>
</div>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.shop-header {
background: #fff;
.head {
height: px2rem(200px);
nav {
height: px2rem(200px);
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
padding: px2rem(10px);
position: relative;
.mintui-back {
font-size: px2rem(46px);
color: #fff;
}
.shop-logo {
width: px2rem(150px);
height: px2rem(150px);
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
}
}
.content {
font-size: px2rem(24px);
margin-top: px2rem(50px);
text-align: center;
h2 {
font-size: px2rem(40px);
}
.info {
color: #666;
span {
margin: 0 px2rem(10px);
}
}
}
.foot {
padding: 0 px2rem(70px);
margin-top: 10px;
font-size: px2rem(24px);
.mint-badge {
transform: scale(0.8) translateX(-10%);
border-radius: 1px;
}
.announcement {
display: inline-block;
width: 100%;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
pages/newsDetail/components/ratings/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratings-page">
<div class="ratings-content">
<div class="overview">
<div class="overview-left">
<h1 class="score">{{ seller.score }}</h1>
<div class="title">
商家评分
<rating-star :rating="seller.score" />
</div>
</div>
<div class="overview-right">
<div class="score-wrapper">
<span class="title">味道</span>
<p class="score">{{ seller.serviceScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">包装</span>
<p class="score">{{ seller.foodScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">配送</span>
<p class="score">{{ seller.deliveryTime }}</p>
</div>
</div>
</div>
<div class="placeholder"/>
<ratingselect
:select-type="selectType"
:only-content="onlyContent"
:ratings="ratings"
@select="selectRating"
@toggle="toggleContent" />
<div class="rating-wrapper">
<ul>
<li
v-for="(rating, index) in ratings"
v-show="needShow(rating.rateType, rating.text)"
:key="index"
class="rating-item">
<div class="avatar">
<span :style="'background-position: 0 '+rating.avatar"/>
</div>
<div class="content">
<h1 class="name">{{ rating.username }}</h1>
<div class="star-wrapper">
<rating-star
:size="24"
:rating="rating.score" />
</div>
<p class="text">{{ rating.text }}</p>
<div
v-show="rating.recommend && rating.recommend.length"
class="recommend">
<span
v-for="(item, index) in rating.recommend"
:key="index"
class="item">{{ item }}</span>
</div>
<div class="time">
{{ rating.rateTime }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import ratingStar from "~/components/ratingStar";
import ratingselect from "./ratingselect";
import * as shoppingApi from "~/assets/services/shopping";
import moment from "moment";
export default {
components: {
ratingStar,
ratingselect
},
props: {
seller: {
default: {}
}
},
data() {
return {
ratings: [],
selectType: 2,
onlyContent: true
};
},
mounted() {
shoppingApi.ratings().then(res => {
if (res.code === 0) {
this.ratings = res.data;
this.ratings.map(item => {
item.rateTime = moment(item.rateTime).format("YYYY/M/D");
});
}
});
},
methods: {
needShow(type, text) {
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === 2) {
return true;
} else {
return type === this.selectType;
}
},
selectRating(type) {
this.selectType = type;
},
toggleContent() {
this.onlyContent = !this.onlyContent;
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.ratings-page {
background: #fff;
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
.overview {
display: flex;
padding: 18px 0;
.overview-left {
width: px2rem(340px);
@include fj(center);
align-items: center;
text-align: center;
.score {
font-size: px2rem(80px);
margin-right: px2rem(20px);
color: #ff6000;
font-weight: 400;
}
.title {
font-size: 12px;
}
}
.overview-right {
flex: 1;
@include fj(space-around);
align-items: center;
text-align: center;
color: #666;
.score-wrapper {
.title {
display: inline-block;
}
.score {
font-size: px2rem(40px);
}
}
}
}
.rating-wrapper {
padding: 0 18px;
.rating-item {
display: flex;
padding: 18px 0;
.avatar {
flex: 0 0 28px;
width: 28px;
margin-right: 12px;
span {
border-radius: 50%;
display: inline-block;
width: 30px;
height: 30px;
background: url("../../../../assets/images/sprite-avatar.png");
background-position: 0 0;
background-size: 30px;
}
}
.content {
position: relative;
flex: 1;
font-size: px2rem(28px);
.name {
margin-bottom: 4px;
line-height: 12px;
color: rgb(7, 17, 27);
}
.star-wrapper {
margin-bottom: 6px;
.star {
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
}
.text {
margin: 8px 0;
line-height: 18px;
color: rgb(7, 17, 27);
}
.recommend {
line-height: 16px;
font-size: 0;
.icon-thumb_up,
.item {
display: inline-block;
margin: 0 8px 4px 0;
font-size: 9px;
}
.icon-thumb_up {
color: rgb(0, 160, 220);
}
.item {
padding: 0 6px;
border: 1px solid rgba(7, 17, 27, 0.1);
border-radius: 1px;
color: rgb(147, 153, 159);
background: #fff;
}
}
.time {
position: absolute;
top: 0;
right: 0;
line-height: 12px;
font-size: 10px;
color: rgb(147, 153, 159);
}
}
}
}
}
</style>
pages/newsDetail/components/ratings/ratingselect.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratingselect">
<div class="rating-type border-1px">
<span
:class="{'active':selectType===2}"
class="block positive"
@click="select(2,$event)">{{ desc.all }}
<span class="count">{{ ratings.length }}</span>
</span>
<span
:class="{'active':selectType===0}"
class="block positive"
@click="select(0,$event)">{{ desc.positive }}<span
class="count">{{ positives.length }}</span></span>
<span
:class="{'active':selectType===1}"
class="block negative"
@click="select(1,$event)">{{ desc.negative }}<span
class="count">{{ negatives.length }}</span></span>
</div>
<div
:class="{'on':onlyContent}"
class="switch"
@click="toggleContent">
<!-- <span class="icon-check_circle"></span> -->
<svg
width="12"
height="12"
class="check">
<use xlink:href="#select"/>
</svg>
<span class="text">只看有内容的评价</span>
</div>
</div>
</template>
<script>
export default {
props: {
ratings: {
type: Array,
default () {
return [];
}
},
selectType: {
type: Number,
default: 2
},
onlyContent: {
type: Boolean,
default: false
},
desc: {
type: Object,
default () {
return {
all: "全部",
positive: "满意",
negative: "不满意"
};
}
}
},
computed: {
positives() {
return this.ratings.filter(rating => {
return rating.rateType === 0;
});
},
negatives() {
return this.ratings.filter(rating => {
return rating.rateType === 1;
});
}
},
methods: {
select(type, event) {
this.$emit("select", type);
},
toggleContent(event) {
this.$emit("toggle");
}
}
};
</script>
<style lang="scss">
.ratingselect {
.rating-type {
padding: 18px 0;
margin: 0 18px;
font-size: 0;
.block {
display: inline-block;
padding: 8px 12px;
margin-right: 8px;
line-height: 16px;
border-radius: 1px;
font-size: 12px;
color: rgb(77, 85, 93);
&.active {
color: #fff;
}
.count {
margin-left: 2px;
font-size: 12px;
}
&.positive {
background: rgba(0, 160, 220, 0.2);
&.active {
background: rgb(0, 160, 220);
}
}
&.negative {
background: rgba(77, 85, 93, 0.2);
&.active {
background: rgb(77, 85, 93);
}
}
}
}
.switch {
display: flex;
align-items: center;
padding: 12px 18px;
line-height: 24px;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
color: rgb(147, 153, 159);
font-size: 0;
svg {
margin-right: 5px;
fill: #e8e8e8;
}
&.on {
.check {
fill: #76d572;
}
}
.icon-check_circle {
display: inline-block;
vertical-align: top;
margin-right: 4px;
font-size: 24px;
}
.text {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
}
}
</style>
pages/newsDetail/components/seller.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="seller-page">
<div class="logo">
<img
:src="banner"
alt="">
</div>
<h2>{{ seller.name }}</h2>
<p>{{ seller.bulletin }}</p>
<a
:href="seller.brandstory"
class="brandstory">查看品牌故事</a>
<div class="placeholder"/>
<h2>配送信息</h2>
<p>由蜂鸟快送提供配送，约{{ seller.deliveryTime }}分钟送达，距离2.1km</p>
<p>配送费￥{{ seller.deliveryPrice }}</p>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.seller-page {
background: #fff;
padding-bottom: px2rem(30px);
.logo {
padding: px2rem(30px) px2rem(30px) 0 px2rem(30px);
}
h2 {
font-size: px2rem(32px);
margin-top: px2rem(40px);
padding: 0 px2rem(30px) px2rem(20px) px2rem(30px);
}
p {
padding: 0 px2rem(30px);
color: #666;
font-size: px2rem(26px);
line-height: 1.5;
}
.brandstory {
display: block;
line-height: px2rem(100px);
margin-top: px2rem(50px);
color: #666;
font-size: px2rem(28px);
text-align: center;
}
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
}
</style>
pages/newsDetail/index.vue
View file @ a0b1923b
<template> <template>
<div class="shop-page"> <div
<Header :seller="seller" /> class="news-detail-page"
<mt-navbar v-model="selected"> style="margin-top:1.87733rem;">
<mt-tab-item id="goods">点餐</mt-tab-item> <Head/>
<mt-tab-item id="ratings">评价</mt-tab-item> <div class="main-padding">
<mt-tab-item id="seller">商家</mt-tab-item> <div>
</mt-navbar> <h1 class="news-detail-name">{{ detail.title }}</h1>
<mt-tab-container v-model="selected"> <div class="news-detail-time flex-aic">
<mt-tab-container-item id="goods"> <img
<Goods :seller="seller" /> src="https://mgmt.dfangche.com/xxfccn/image/1/article/1559698961339.jpeg"
</mt-tab-container-item> style="width: 17px;height: 17px;margin-right: 7px;">
<mt-tab-container-item id="ratings"> {{ detail.addTime.substring(0, 10) }}</div>
<Ratings :seller="seller" /> <div
</mt-tab-container-item> class="content-detail"
<mt-tab-container-item id="seller"> v-html="detail.text"/>
<Seller :seller="seller" /> <div class="more-news flex-aic-jcb">
</mt-tab-container-item> <div class="more-news-l">
</mt-tab-container> 推荐咨讯
</div>
<router-link
:to="{ path: 'news'}"
class="more-news-r">更多</router-link>
</div>
<ul>
<router-link
v-for="item in hotList"
:to="{ path: 'newsDetailHot', query:{id: item.id }}"
:key="item.id"
class="flex-jcb"
style="margin-bottom: 20px;">
<img
:src="item.coverImage"
class="news-img-list">
<div class="news-list">
<div class="ellipsis2 news-list-title">{{ item.title }}</div>
<div class="epitome news-list-time flex-aic">
<img
:src="item.coverImage"
style="width: 17px;height: 17px;margin-right: 7px;">
{{ item.addTime.substring(0, 10) }}</div>
</div>
</router-link>
</ul>
</div>
</div>
<go-top/>
<Footer/>
</div> </div>
</template> </template>
<script> <script>
import Header from "./components/header"; import axios from '../../plugins/axios'
import Goods from "./components/goods"; import Head from "~/components/head";
import Ratings from "./components/ratings"; import DetailBanner from '~/components/detailBanner'
import Seller from "./components/seller"; import GoTop from "~/components/goTop";
import * as shoppingApi from "~/assets/services/shopping"; import Footer from "~/components/footer";
export default { export default {
components: { components: {
Header, Head,
Goods, DetailBanner,
Ratings, GoTop,
Seller Footer
}, },
data() { data() {
return { return {};
selected: "goods",
seller: {}
};
},
async asyncData() {
const {
data
} = await shoppingApi.seller();
return {
seller: data
};
}, },
created() { async asyncData({ route }) {
// vue resource const { data } = await axios.get('/api/uccn/article/app/unauth/one?id='+route.query.id+"&urlType=1");
// this.$http.get('api/seller').then((res) => { let detail = data.data;
// res = res.body; let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+route.query.id);
// if(res.errno === ERR_OK){ let hot = tempBannerData.data.data;
// this.seller = res.data; return {detail: detail, hotList: hot}
// console.log(this.seller);
// }
// })
}, },
created() {},
methods: {},
}; };
</script> </script>
...@@ -65,37 +82,49 @@ ...@@ -65,37 +82,49 @@
<style lang="scss"> <style lang="scss">
@import "../../assets/styles/mixin"; @import "../../assets/styles/mixin";
.shop-page { .news-detail-page {
font-size: px2rem(24px); font-size: px2rem(26px);
.news-detail-name{
.mint-navbar { font-size: 17px;
position: sticky; font-weight: bold;
top: 0;
z-index: 20;
.mint-tab-item-label {
font-size: px2rem(30px);
} }
.news-detail-time{
.mint-tab-item { padding: 15px 0 20px 0;
padding: 10px 0; border-bottom: 1px solid #dfdfdf;
color: #999;
&.is-selected { font-size: 13px;
color: inherit; }
border: none; .news-img-list{
position: relative; width: 92px;
height: 75px;
&::after { border-radius: 3px;
content: " "; }
display: inline-block; .news-list {
@include wh(20%, 2px); border-bottom: 1px solid #dfdfdf;
background: #2395ff; width: 100%;
position: absolute; display: flex;
bottom: 0; flex-direction: column;
left: 50%; justify-content: space-between;
transform: translateX(-50%); margin-left: 13px;
padding-bottom: 13px;
}
.news-list-title{
margin-bottom: 15px;
font-size: 15px;
}
.news-list-time{
font-size: 13px;
color: #999;
} }
.more-news{
margin: 17px 0;
.more-news-l{
font-size: 17px;
font-weight: bold;
} }
.more-news-r{
font-size: 14px;
color: #999;
} }
} }
} }
......
pages/newsDetailHot/index.vue 0 → 100644
View file @ a0b1923b
This diff is collapsed.
pages/shop/components/goods/cartcontrol.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="cartcontrol">
<svg
v-show="food.count>0"
class="inner"
fill="rgb(35, 149, 255)"
@click.stop.prevent="decreaseCart"><use xlink:href="#cart-minus"/></svg>
<div
v-show="food.count>0"
class="cart-count">{{ food.count }}</div>
<svg
width="24"
height="24"
fill="rgb(35, 149, 255)"
@click="addCart"><use xlink:href="#cart-add"/></svg>
</div>
</template>
<script>
import Vue from "vue";
export default {
props: ['food'],
methods: {
addCart(event) {
if (!this.food.count) {
Vue.set(this.food, "count", 1);
} else {
this.food.count++;
}
this.$emit("add", event.target);
},
decreaseCart(event) {
if (this.food.count) {
this.food.count--;
}
}
}
};
</script>
<style lang="scss">
.cartcontrol {
display: flex;
align-items: center;
.inner {
width: 24px;
height: 24px;
}
.cart-count {
display: inline-block;
vertical-align: top;
width: 25px;
text-align: center;
font-size: 15px;
color: #333;
}
.cart-add {
display: inline-block;
padding: 6px;
line-height: 24px;
font-size: 24px;
color: rgb(0, 160, 220);
}
}
</style>
pages/shop/components/goods/index.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/shop/components/goods/shopcart.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/shop/components/header.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/shop/components/ratings/index.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/shop/components/ratings/ratingselect.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/shop/components/seller.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/shop/index.vue deleted 100644 → 0
View file @ 96d13733
This diff is collapsed.
pages/tourDetail/index.vue
View file @ a0b1923b
...@@ -22,7 +22,10 @@ ...@@ -22,7 +22,10 @@
<div <div
class="flex-aic"> class="flex-aic">
<span style="color: #666;font-size: 14px;">出发地</span> <span style="color: #666;font-size: 14px;">出发地</span>
<div>{{ detail.addressTo.provinceName }} {{ detail.addressTo.cityName }} {{ detail.addressTo.address }}</div> <div>
<div style="font-size: 14px;">{{ detail.addressTo.name }}</div>
<div style="font-size: 12px;color: #999;">({{ detail.addressTo.provinceName }} {{ detail.addressTo.cityName }} {{ detail.addressTo.address }})</div>
</div>
</div> </div>
<div <div
class="flex-aic" class="flex-aic"
...@@ -31,8 +34,8 @@ ...@@ -31,8 +34,8 @@
<div> {{ detail.addressGo.provinceName }} {{ detail.addressGo.cityName }} {{ detail.addressGo.address }}</div> <div> {{ detail.addressGo.provinceName }} {{ detail.addressGo.cityName }} {{ detail.addressGo.address }}</div>
</div> </div>
<div class="flex-aic"> <div class="flex-aic">
<span style="color: #666;font-size: 14px;">最近出发日期</span> <span style="color: #666;font-size: 14px;">出发日期</span>
<div>{{ detail.time.startTime| formatDate('yyyy/MM/dd') }} {{ detail.time.weekStart }} {{ detail.addressTo.departTime | formatDate('hh:mm') }} ~ {{ detail.time.endTime| formatDate('yyyy/MM/dd') }} {{ detail.time.weekEnd }}</div> <div>{{ detail.time.startTime| formatDate('MM/dd') }} {{ detail.time.weekStart }} {{ detail.addressTo.departTime | formatDate('hh:mm') }} ~ {{ detail.time.endTime| formatDate('MM/dd') }} {{ detail.time.weekEnd }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -91,7 +94,6 @@ ...@@ -91,7 +94,6 @@
报名须知 报名须知
</div> </div>
<div <div
class="bt-line"
v-html="notice[0].value"/> v-html="notice[0].value"/>
</div> </div>
</div> </div>
...@@ -141,18 +143,15 @@ ...@@ -141,18 +143,15 @@
let startAddress = data.data.tourDepartVo; let startAddress = data.data.tourDepartVo;
for(var i = 0;i<startAddress.length;i++){ for(var i = 0;i<startAddress.length;i++){
if(startAddress[i].type == 0){ if(startAddress[i].type == 0){
console.log(startAddress[i]);
user.addressTo = startAddress[i]; user.addressTo = startAddress[i];
} }
if(startAddress[i].type == 2){ if(startAddress[i].type == 2){
console.log(startAddress[i]);
user.addressGo = startAddress[i]; user.addressGo = startAddress[i];
} }
} }
let tourTimeVo = data.data.tourDepartTimeVo let tourTimeVo = data.data.tourDepartTimeVo
for(var i = 0;i<tourTimeVo.length;i++){ for(var i = 0;i<tourTimeVo.length;i++){
if(tourTimeVo[i].overdue == 0){ if(tourTimeVo[i].overdue == 0){
console.log(tourTimeVo[i]);
user.time = tourTimeVo[i]; user.time = tourTimeVo[i];
break break
}else{ }else{
...@@ -195,7 +194,6 @@ ...@@ -195,7 +194,6 @@
var top1 = document.querySelector('#activityIntro').offsetTop; var top1 = document.querySelector('#activityIntro').offsetTop;
var top2 = document.querySelector('#lastestDubbing').offsetTop; var top2 = document.querySelector('#lastestDubbing').offsetTop;
var top3 = document.querySelector('#rankLlistDetail').offsetTop; var top3 = document.querySelector('#rankLlistDetail').offsetTop;
console.log(top1+"-"+top2+"--"+top3+"--"+menuTop);
if (scrollTop < top1 + 180) { if (scrollTop < top1 + 180) {
this.active = 'activity'; this.active = 'activity';
this.searchBarFixed = false; this.searchBarFixed = false;
......
pages/vehicle.vue
View file @ a0b1923b
This diff is collapsed.
pages/vehicleDetail/index.vue
View file @ a0b1923b
This diff is collapsed.
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