Skip to content

V
vue2-elm

momo的小宝贝 / vue2-elm
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vue2-elm

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 d61956ab 编写于 作者: M maguohua
浏览文件
操作

updata shop

上级 939944b9
隐藏空白更改
内联 并排
Showing with 300 addition and 88 deletion
src/components/common/loading.vue 0 → 100644
浏览文件 @ d61956ab
<template>
<div class="loading_container">
<div class="load_img" :style="{backgroundPositionY: -(positionY%7)*2.5 + 'rem'}">
</div>
<svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;"></ellipse>
</svg>
</div>
</template>
<script>
export default {
data(){
return{
positionY: 0,
timer: null,
}
},
mounted(){
this.timer = setInterval(() => {
this.positionY ++;
}, 600)
},
beforeDestroy(){
clearInterval(this.timer);
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@keyframes load{
0% {transform: translateY(0px);}
50% {transform: translateY(-50px);}
100% {transform: translateY(0px);}
}
@keyframes ellipse{
0% {transform: scale(1);}
50% {transform: scale(0.3);}
100% {transform: scale(1);}
}
.loading_container{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@include wh(2.5rem, 2.5rem);
}
.load_img{
@include wh(100%, 100%);
background: url(../../images/icon_loading.png) no-repeat 0 0;
background-size: 2.5rem auto;
transform: translateY(0px);
animation: load .6s infinite ease-in-out;
position: relative;
z-index: 11;
}
.load_ellipse{
position: absolute;
@include wh(2rem, 2rem);
top: 2.2rem;
left: 0.25rem;
z-index: 10;
animation: ellipse .6s infinite ease-in-out;
}
</style>
src/components/common/mixin.js
浏览文件 @ d61956ab
import {getStyle} from '../../config/mUtils'
import {imgBaseUrl} from '../../config/env'
export const loadMore = {
directives:{
......@@ -49,4 +50,21 @@ export const loadMore = {
}
}
}
};
export const getImgPath = {
methods: {
//传递过来的图片地址需要处理后才能正常使用
getImgPath(path){
let suffix;
if (path.indexOf('jpeg') !== -1) {
suffix = '.jpeg'
}else{
suffix = '.png'
}
let url = '/' + path.substr(0,1) + '/' + path.substr(1,2) + '/' + path.substr(3) + suffix;
return imgBaseUrl + url
},
}
}
\ No newline at end of file
src/components/common/shoplist.vue
浏览文件 @ d61956ab
<template>
<div class="shoplist_container">
<ul v-load-more="loaderMore" v-if="shopListArr.length">
<router-link :to="{path: 'food', query:{}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
<router-link :to="{path: 'shop', query:{geohash, id: item.id}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
<section>
<img :src="imgBaseUrl + subImgUrl(item.image_path)" class="shop_img">
<img :src="getImgPath(item.image_path)" class="shop_img">
</section>
<hgroup class="shop_right">
<header class="shop_detail_header">
......@@ -64,54 +64,50 @@
</aside>
<footer class="loader_more" v-show="preventRepeatReuqest">正在加载更多商家...</footer>
<div ref="abc" style="background-color: red;"></div>
<transition name="loading">
<loading v-show="showLoading"></loading>
</transition>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {imgBaseUrl} from '../../config/env'
import {shopList} from '../../service/getData'
import {showBack, animate} from '../../config/mUtils'
import {loadMore} from '../../components/common/mixin'
import {loadMore, getImgPath} from './mixin'
import loading from './loading'
export default {
data(){
return {
offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
shopListArr:[], // 店铺列表数据
imgBaseUrl, //图片域名地址
preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
showBackStatus: false, //显示返回顶部按钮
showLoading: true, //显示加载动画
}
},
async mounted(){
//获取数据
this.shopListArr = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
this.showLoading = false;
//开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
showBack(status => {
this.showBackStatus = status;
});
},
props: ['restaurantCategoryId', 'restaurantCategoryIds', 'sortByType', 'deliveryMode', 'supportIds', 'confirmSelect'],
mixins: [loadMore],
components: {
loading,
},
props: ['restaurantCategoryId', 'restaurantCategoryIds', 'sortByType', 'deliveryMode', 'supportIds', 'confirmSelect', 'geohash'],
mixins: [loadMore, getImgPath],
computed: {
...mapState([
'latitude','longitude'
])
},
methods: {
//传递过来的图片地址需要处理后才能正常使用
subImgUrl(path){
let suffix;
if (path.indexOf('jpeg') !== -1) {
suffix = '.jpeg'
}else{
suffix = '.png'
}
let url = '/' + path.substr(0,1) + '/' + path.substr(1,2) + '/' + path.substr(3) + suffix;
return url
},
//到达底部加载更多数据
async loaderMore(){
//防止重复请求
......@@ -122,8 +118,10 @@ export default {
this.preventRepeatReuqest = true;
//数据的定位加20位
this.offset += 20;
this.showLoading = true;
let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
this.shopListArr = this.shopListArr.concat(res);
this.showLoading = false;
//当获取数据小于20，说明没有更多数据，不需要再次请求数据
if (res.length < 20) {
return
......@@ -137,7 +135,9 @@ export default {
//监听父级传来的数据发生变化时，触发此函数重新根据属性值获取数据
async listenPropChange(){
this.offset = 0;
this.showLoading = true;
this.shopListArr = await shopList(this.latitude, this.longitude, this.offset, '', this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds);
this.showLoading = false;
}
},
watch:{
......@@ -298,5 +298,10 @@ export default {
@include wh(2rem, 2rem);
}
}
.loading-enter-active, .loading-leave-active {
transition: opacity 1s
}
.loading-enter, .loading-leave-active {
opacity: 0
}
</style>
\ No newline at end of file
src/page/food/food.vue
浏览文件 @ d61956ab
......@@ -17,7 +17,7 @@
<ul>
<li v-for="(item, index) in category" :key="index" class="category_left_li" :class="{category_active:restaurant_category_id == item.id}" @click="selectCategoryName(item.id, index)">
<section>
<img :src="imgBaseUrl + subImgUrl(item.image_url)" v-if="index" class="category_icon">
<img :src="getImgPath(item.image_url)" v-if="index" class="category_icon">
<span>{{item.name}}</span>
</section>
<section>
......@@ -166,7 +166,7 @@
<div class="back_cover" v-show="sortBy"></div>
</transition>
<section class="shop_list_container">
<shop-list :restaurantCategoryId="restaurant_category_id" :restaurantCategoryIds="restaurant_category_ids" :sortByType='sortByType' :deliveryMode="delivery_mode" :confirmSelect="confirmStatus" :supportIds="support_ids" v-if="latitude" @DidConfrim="clearAll"></shop-list>
<shop-list :geohash="geohash" :restaurantCategoryId="restaurant_category_id" :restaurantCategoryIds="restaurant_category_ids" :sortByType='sortByType' :deliveryMode="delivery_mode" :confirmSelect="confirmStatus" :supportIds="support_ids" v-if="latitude" @DidConfrim="clearAll"></shop-list>
</section>
</div>
</template>
......@@ -175,7 +175,7 @@
import {mapState, mapMutations} from 'vuex'
import headTop from '../../components/header/head'
import shopList from '../../components/common/shoplist'
import {imgBaseUrl} from '../../config/env'
import {getImgPath} from '../../components/common/mixin'
import {msiteAdress, foodCategory, foodDelivery, foodActivity} from '../../service/getData'
export default {
......@@ -184,7 +184,6 @@ export default {
geohash: '', // city页面传递过来的地址geohash
headTitle: '', // msiet页面头部标题
foodTitle: '', // 排序左侧头部标题
imgBaseUrl, //图片域名地址
restaurant_category_id: '', // 食品类型id值
restaurant_category_ids: '', //筛选类型的id
sortBy: '', // 筛选的条件
......@@ -211,24 +210,25 @@ export default {
let res = await msiteAdress(this.geohash);
// 记录当前经度纬度进入vuex
this.RECORD_ADDRESS(res);
//获取category分类左侧数据
this.category = await foodCategory(this.latitude, this.longitude);
//初始化时定位当前category分类左侧默认选择项，在右侧展示出其sub_categories列表
this.category.forEach(item => {
if (this.restaurant_category_id == item.id) {
this.categoryDetail = item.sub_categories;
}
});
//获取筛选列表的配送方式
this.Delivery = await foodDelivery(this.latitude, this.longitude);
//获取筛选列表的商铺活动
this.Activity = await foodActivity(this.latitude, this.longitude);
//记录support_ids的状态，默认不选中，点击状态取反，status为true时为选中状态
this.Activity.forEach((item, index) => {
this.support_ids[index] = {status: false, id: item.id};
})
}
//获取category分类左侧数据
this.category = await foodCategory(this.latitude, this.longitude);
//初始化时定位当前category分类左侧默认选择项，在右侧展示出其sub_categories列表
this.category.forEach(item => {
if (this.restaurant_category_id == item.id) {
this.categoryDetail = item.sub_categories;
}
});
//获取筛选列表的配送方式
this.Delivery = await foodDelivery(this.latitude, this.longitude);
//获取筛选列表的商铺活动
this.Activity = await foodActivity(this.latitude, this.longitude);
//记录support_ids的状态，默认不选中，点击状态取反，status为true时为选中状态
this.Activity.forEach((item, index) => {
this.support_ids[index] = {status: false, id: item.id};
})
},
mixins: [getImgPath],
components: {
headTop,
shopList
......@@ -262,17 +262,6 @@ export default {
}
}
},
//传递过来的图片地址需要处理后才能正常使用
subImgUrl(path){
let suffix;
if (path.indexOf('jpeg') !== -1) {
suffix = '.jpeg'
}else{
suffix = '.png'
}
let url = '/' + path.substr(0,1) + '/' + path.substr(1,2) + '/' + path.substr(3) + suffix;
return url
},
//选中Category左侧列表的某个选项时，右侧渲染相应的sub_categories列表
selectCategoryName(id, index){
//第一个选项 -- 全部商家 因为没有自己的列表，所以点击则默认获取选所有数据
......
src/page/msite/msite.vue
浏览文件 @ d61956ab
......@@ -33,7 +33,7 @@
</svg>
<span class="shop_header_title">附近商家</span>
</header>
<shop-list v-if="hasGetData"></shop-list>
<shop-list v-if="hasGetData" :geohash="geohash"></shop-list>
</div>
</div>
</template>
......
src/page/shop/shop.vue
浏览文件 @ d61956ab
<template>
<ul>
<router-link tag='li' to='home'>首页</router-link>
<router-link tag='li' to='city'>城市页面</router-link>
<router-link tag='li' to='msite'>商店列表</router-link>
<router-link tag='li' to='shop'>商铺详情</router-link>
<router-link tag='li' to='search'>搜索</router-link>
<router-link tag='li' to='login'>登陆</router-link>
<router-link tag='li' to='checkout'>确认订单</router-link>
<router-link tag='li' to='forget'>忘记密码</router-link>
<router-link tag='li' to='profile'>个人信息</router-link>
<router-link tag='li' to='order'>订单列表</router-link>
<router-link tag='li' to='vipcard'>会员卡</router-link>
</ul>
<template>
<div>
<header class="shop_detail_header" v-if="!showLoading">
<img :src="getImgPath(shopDetailData.image_path)" class="header_cover_img">
<section class="description_header">
<section class="description_top">
<section class="description_left">
<img :src="getImgPath(shopDetailData.image_path)">
</section>
<section class="description_right">
<h4 class="description_title ellipsis">{{shopDetailData.name}}</h4>
<p class="description_text">商家配送／{{shopDetailData.order_lead_time}}分钟送达／配送费¥{{shopDetailData.float_delivery_fee}}</p>
<p class="description_promotion ellipsis">公告：{{shopDetailData.promotion_info}}</p>
</section>
</section>
<footer class="description_footer" v-if="shopDetailData.activities.length">
<p class="ellipsis">
<span class="tip_icon" :style="{backgroundColor: '#' + shopDetailData.activities[0].icon_color, borderColor: '#' + shopDetailData.activities[0].icon_color}">{{shopDetailData.activities[0].icon_name}}</span>
<span>{{shopDetailData.activities[0].description}}（APP专享）</span>
</p>
<p>{{shopDetailData.activities.length}}个活动</p>
</footer>
</section>
<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow" >
<path d="M0 0 L8 7 L0 14" stroke="#fff" stroke-width="1" fill="none"/>
</svg>
</header>
<loading v-if="showLoading"></loading>
</div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import {imgBaseUrl} from '../../config/env'
import {msiteAdress, shopDetails} from '../../service/getData'
import loading from '../../components/common/loading'
import {getImgPath} from '../../components/common/mixin'
export default {
}
export default {
data(){
return{
geohash: '', //geohash位置信息
shopId: null, //商店id值
showLoading: true, //显示加载动画
shopDetailData: null, //商铺详情
}
},
created(){
this.geohash = this.$route.query.geohash;
this.shopId = this.$route.query.id;
},
async mounted(){
if (!this.latitude) {
//获取位置信息
let res = await msiteAdress(this.geohash);
// 记录当前经度纬度进入vuex
this.RECORD_ADDRESS(res);
}
this.shopDetailData = await shopDetails(this.shopId, this.latitude, this.longitude);
this.showLoading = false;
},
mixins: [getImgPath],
components: {
loading
},
computed: {
...mapState([
'latitude','longitude'
])
},
methods: {
...mapMutations([
'RECORD_ADDRESS'
]),
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.shop_detail_header{
overflow: hidden;
position: relative;
.header_cover_img{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9;
filter: blur(10px);
}
.description_header{
position: relative;
z-index: 10;
background-color: rgba(119,103,137,.43);
padding: 0.43rem;
.description_top{
display: flex;
.description_left{
margin-right: 0.3rem;
img{
@include wh(2.9rem, 2.9rem);
display: block;
border-radius: 0.15rem;
}
}
.description_right{
flex: 1;
.description_title{
@include sc(.8rem, #fff);
font-weight: bold;
width: 100%;
margin-bottom: 0.3rem;
}
.description_text{
@include sc(.5rem, #fff);
margin-bottom: 0.3rem;
}
.description_promotion{
@include sc(.5rem, #fff);
width: 12.5rem;
}
}
}
.description_footer{
@include fj;
margin-top: 0.5rem;
p{
@include sc(.5rem, #fff);
span{
color: #fff;
}
.tip_icon{
padding: .01rem;
border: 0.025rem solid #fff;
border-radius: 0.1rem;
}
}
.ellipsis{
width: 87%;
}
}
}
.description_arrow{
@include ct;
right: 0.3rem;
z-index: 11;
}
}
</style>
src/service/getData.js
浏览文件 @ d61956ab
......@@ -4,34 +4,35 @@ import * as city from './tempdata/city'
import * as msite from './tempdata/msite'
import * as search from './tempdata/search'
import * as food from './tempdata/food'
import * as shop from './tempdata/shop'
/**
* 获取首页默认地址
*/
//export const cityGuess = () => fetch('GET', '/v1/cities', {type: 'guess'});
export const cityGuess = () => fetch('GET', '/v1/cities', {type: 'guess'});
/**
* 获取首页热门城市
*/
//export const hotcity = () => fetch('GET', '/v1/cities', {type: 'hot'});
export const hotcity = () => fetch('GET', '/v1/cities', {type: 'hot'});
/**
* 获取首页所有城市
*/
//export const groupcity = () => fetch('GET', '/v1/cities', {type: 'group'});
export const groupcity = () => fetch('GET', '/v1/cities', {type: 'group'});
/**
* 获取当前所在城市
*/
//export const currentcity = number => fetch('GET', '/v1/cities/' + number, {});
export const currentcity = number => fetch('GET', '/v1/cities/' + number, {});
/**
* 获取搜索地址
*/
//export const searchplace = (cityid, value) => fetch('GET', '/v1/pois', {type: 'search', city_id: cityid, keyword: value});
export const searchplace = (cityid, value) => fetch('GET', '/v1/pois', {type: 'search', city_id: cityid, keyword: value});
/**
* 获取msite页面地址信息
*/
//export const msiteAdress = geohash => fetch('GET', '/v2/pois/' + geohash, {});
export const msiteAdress = geohash => fetch('GET', '/v2/pois/' + geohash, {});
/**
* 获取msite页面食品分类列表
*/
//export const msiteFoodTypes = geohash => fetch('GET', '/v2/index_entry', {geohash, group_type:'1', 'flags[]':'F'});
export const msiteFoodTypes = geohash => fetch('GET', '/v2/index_entry', {geohash, group_type:'1', 'flags[]':'F'});
/**
* 获取msite商铺列表
*/
......@@ -61,6 +62,11 @@ export const foodDelivery = (latitude, longitude) => fetch('GET', '/shopping/v1/
* 获取food页面的商家属性活动列表
*/
export const foodActivity = (latitude, longitude) => fetch('GET', '/shopping/v1/restaurants/activity_attributes', {latitude, longitude, kw: ''});
/**
* 获取shop页面商铺详情
*/
//export const shopDetails = (shopid, latitude, longitude) => fetch('GET', '/shopping/restaurant/' + shopid, {latitude, longitude:longitude + '&extras[]=activities&extras[]=album&extras[]=license&extras[]=identification&extras[]=statistics'});
/**
......@@ -72,15 +78,16 @@ const setpromise = data => {
})
}
export const cityGuess = () => setpromise(home.guesscity);
export const hotcity = () => setpromise(home.hotcity);
export const groupcity = () => setpromise(home.groupcity);
export const currentcity = number => setpromise(city.currentcity);
export const searchplace = (cityid, value) => setpromise(city.searchdata);
export const msiteAdress = geohash => setpromise(msite.msiteAdress);
export const msiteFoodTypes = geohash => setpromise(msite.foodTypes);
//export const shopList = (latitude, longitude, offset) => setpromise(msite.shopList);
//export const searchRestaurant = (geohash, keyword) => setpromise(search.searchData);
//export const foodCategory = (latitude, longitude) => setpromise(food.category);
//export const foodDelivery = (latitude, longitude) => setpromise(food.delivery);
//export const foodActivity = (latitude, longitude) => setpromise(food.activity);
// export const cityGuess = () => setpromise(home.guesscity);
// export const hotcity = () => setpromise(home.hotcity);
// export const groupcity = () => setpromise(home.groupcity);
// export const currentcity = number => setpromise(city.currentcity);
// export const searchplace = (cityid, value) => setpromise(city.searchdata);
// export const msiteAdress = geohash => setpromise(msite.msiteAdress);
// export const msiteFoodTypes = geohash => setpromise(msite.foodTypes);
// export const shopList = (latitude, longitude, offset) => setpromise(msite.shopList);
// export const searchRestaurant = (geohash, keyword) => setpromise(search.searchData);
// export const foodCategory = (latitude, longitude) => setpromise(food.category);
// export const foodDelivery = (latitude, longitude) => setpromise(food.delivery);
// export const foodActivity = (latitude, longitude) => setpromise(food.activity);
export const shopDetails = (shopid, latitude, longitude) => setpromise(shop.shopDetails);
src/service/tempdata/shop.js 0 → 100644
浏览文件 @ d61956ab
export const shopDetails = {"activities":[{"description":"新用户下单立减20.0元(不与其它活动同享)","icon_color":"70bc46","icon_name":"新","id":19917502,"name":"新用户立减(不与其他活动共享)","tips":"新用户下单立减20.0元(不与其它活动同享)"},{"attribute":"{\"100\": {\"1\": 30, \"0\": 0}, \"60\": {\"1\": 24, \"0\": 0}, \"30\": {\"1\": 11, \"0\": 0}}","description":"满30减11，满60减24，满100减30(不与美食活动同享)（限在线支付）","icon_color":"f07373","icon_name":"减","id":19981893,"is_exclusive_with_food_activity":true,"name":"满减优惠","tips":"满30减11，满60减24，满100减30(不与美食活动同享)（限在线支付）","type":102},{"description":"满25.0元赠送可乐1份","icon_color":"3cc791","icon_name":"赠","id":19936455,"name":"满赠优惠","tips":"满25.0元赠送可乐1份"}],"address":"上海市黄浦区光启南路344号","description":"","distance":1785,"float_delivery_fee":5,"float_minimum_order_amount":25,"id":1846633,"image_path":"76061d3d20a618f0be1177d2eda56721jpeg","is_new":false,"is_premium":false,"latitude":31.2180916740799,"license":{"business_license_image":"0f82ae53d81dd755f3725b2034892b0bjpeg","catering_service_license_image":"0fa4e1930fa98a9bc21a6fb1d1b54fb3jpeg","service_license_business_scope":"","service_license_register_authority":"","service_license_register_date":"1970-01-01"},"longitude":121.489205397121,"max_applied_quantity_per_order":1,"name":"超超奶茶（文庙店）","next_business_time":"","only_use_poi":false,"opening_hours":["10:00/01:00"],"order_lead_time":38,"phone":"13764324293","piecewise_agent_fee":{"description":"配送费¥5","extra_fee":0,"is_extra":false,"rules":[{"fee":5,"price":25}],"tips":"配送费¥5"},"promotion_info":"年前配送压力巨大，午市晚市高峰可能会影响您的用餐时间，多给小哥一点时间，让他们安全的把餐送到您手中～预祝各位新年快乐❤️","rating":4,"rating_count":138,"recent_order_num":995,"regular_customer_count":0,"status":1,"supports":[]};
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或