You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
457 lines
14 KiB
457 lines
14 KiB
<template>
|
|
<view class="foodList">
|
|
<loadlogo v-if="!loadlogo" />
|
|
<view v-if="loadlogo">
|
|
<far-bottom></far-bottom>
|
|
<!-- 飞行的头部盒子 -->
|
|
<view class="flxedBox">
|
|
<!-- 相对定位父级 -->
|
|
<view class="relativeBox">
|
|
<view class="titleImgBox" v-if="storeFoodList.storeinfo.album">
|
|
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="interval" :duration="duration" :style="{width: (storeFoodList.imgstyle.width * ratio) + 'px',height: (storeFoodList.imgstyle.height * ratio) + 'px'}">
|
|
<swiper-item v-for="(item, index) in storeFoodList.storeinfo.album" :key="index">
|
|
<image :src="item" mode="aspectFill" style="width: 100%; height: 100%;"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="bankindex" @click="goindex">
|
|
<text class="iconfont icon-pullleft" style="font-size: 28upx;padding-right: 10upx;"></text>返回
|
|
</view>
|
|
</view>
|
|
<!-- 绝对定位的子级 -->
|
|
<view class="introduce" :style="{marginTop: !storeFoodList.storeinfo.album?'50rpx':'0rpx'}">
|
|
<view class="dis-flex" @click="gogoodsins">
|
|
<view class="storeImgBox" style="flex: 3;position: relative;">
|
|
<view v-if="storeFoodList.storeinfo.is_business == 0" class="dis-il-block t-c f-30" style="position: relative;bottom: 0;left: 0;width: 170upx;color: #FFFFFF;z-index: 99;background-color: rgba(0,0,0,0.4);">
|
|
休息中
|
|
</view>
|
|
<image :src="storeFoodList.storeinfo.logo" mode="aspectFill" style="width: 170upx; height: 170upx;border-radius: 15upx;"></image>
|
|
</view>
|
|
<view style="flex: 7;">
|
|
<view class="storeName f-32 f-w">
|
|
{{storeFoodList.storeinfo.storename}}
|
|
</view>
|
|
<view >
|
|
<tui-rate :current="storeFoodList.storeinfo.score" :disabled="true" :score="1" active="#F5D145"></tui-rate>
|
|
<view class="f-26 dis-il-block" style="color: #363636;height: 46upx;line-height: 44upx;vertical-align: top;">
|
|
{{ storeFoodList.storeinfo.score }}分
|
|
</view>
|
|
</view>
|
|
<view class="f-26" style="color: #363636;padding-top: 10upx; ">
|
|
<text>{{storeFoodList.storeinfo.catename}}</text>
|
|
</view>
|
|
<view class="f-26" style="color: #363636;padding-top: 10upx;">
|
|
<text>{{languageStatus!=1?'营业时间':'영업시간'}}：</text>
|
|
<text>{{storeFoodList.storeinfo.storehours}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 标签模块 -->
|
|
<view class="tagbox" v-if="!!storeFoodList.storeinfo.tag[0]">
|
|
<view class="label" >
|
|
<view class="dis-flex tagitembox" >
|
|
<!-- 标签模块 -->
|
|
<view class="labelBox" :style="{height:(!labelHeight?'auto':'auto')}" @click="labelClick">
|
|
<view class="dis-il-block labelItem" v-for="(item,index) in storeFoodList.storeinfo.tag" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
<view
|
|
:class="!labelHeight? 'iconfont icon-unfold':'iconfont icon-fold'"
|
|
style="flex: 1;color: #999999;font-size: 40upx;line-height: 60upx;"
|
|
@click="labelClick">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品列表组件 -->
|
|
<view :class="flag?'abfoodlist':'Androidfoodlist'">
|
|
<foodCategory :storeFoodList="storeFoodList" :topshow="topshow" :height="storeFoodList.imgstyle.height * ratio + 'px'" :width="storeFoodList.imgstyle.width * ratio + 'px'"></foodCategory>
|
|
</view>
|
|
<!-- 尾部组件，购物车和结算按钮 -->
|
|
<shoppingFixation :num="num" :sid="sid" :is_business="storeFoodList.storeinfo.is_business" @onShows="onShowis"></shoppingFixation>
|
|
<!-- 购物车弹窗 -->
|
|
<popup-view :show="show" type="bottom" @clickmask="onShows" :bottom="'7%'" style="margin-bottom: 100upx;">
|
|
<view style="width: 93vw;border-radius: 15upx 15upx 0 0;background-color: #f7f7f7;padding: 30upx;height: 50vh;overflow: auto;" v-if="shopingList">
|
|
<view class="dis-flex f-24" style="padding: 0 30upx 30upx;">
|
|
<view class="flex-box ">
|
|
已选商品
|
|
</view>
|
|
<view class="dis-il-block" v-if="shopingList.cartinfo.deliveryprice > 0" style="padding-left: 30upx;">
|
|
{{languageStatus!=1?'包装费':'포장비용'}}:<text style="padding-left: 10upx;" class="c-ff4444">¥{{shopingList.cartinfo.deliveryprice}}</text>
|
|
</view>
|
|
<view class="flex-box t-r" @click="empty">
|
|
<text class="iconfont icon-delete" style="font-size: 24upx;"></text>
|
|
<text>清空</text>
|
|
</view>
|
|
</view>
|
|
<view class="b-f" style="padding: 30upx;" v-for="(item,index) in shopingList.cartinfo.goodslist" :key="index" v-if="shopingList.cartinfo.goodslist[index].num > 0">
|
|
<view class="dis-flex" style="justify-content: space-between;">
|
|
<view class="name dis-il-block f-28 f-w" style="flex: 0.35;line-height: 40upx;">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="dis-flex" style="flex: 0.8;">
|
|
<view class="flex-box f-20 t-r" style="padding-right: 20upx;color: #999999;line-height: 40upx;">
|
|
<!-- ¥{{item.oldprice}} -->
|
|
</view>
|
|
<view class="flex-box f-32 f-w" style="padding-right: 20upx;color: #FF4444;line-height: 40upx;">
|
|
¥{{item.price}}
|
|
</view>
|
|
<view class="flex-box" style="">
|
|
<tui-numberbox
|
|
style="float: right;"
|
|
:value="shopingList.cartinfo.goodslist[index].num"
|
|
@change="change($event,item)"
|
|
:width="60"
|
|
:min="0"
|
|
></tui-numberbox>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="f-20" style="color: #999999;">
|
|
<text>{{item.specname}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="dis-flex b-f" style="padding: 30upx;margin-top: 20upx;" v-if="shopingList.cartinfo.goodslist.length > 0">
|
|
<view class="f-32 f-w" style="flex: 0.65;">
|
|
配送费
|
|
</view>
|
|
<view style="flex: 0.55;color: #FF4444;" class="f-32 f-w">
|
|
¥{{storeFoodList.cartinfo.deliveryprice}}
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view style="width: 93vw;border-radius: 15upx 15upx 0 0;background-color: #f7f7f7;padding: 30upx;text-align: center;" v-if="!shopingList">
|
|
购物车空空如也~
|
|
</view>
|
|
</popup-view>
|
|
<!-- 查看tag详情 -->
|
|
<popup-view :show="labelHeight" :type="'bottom'" @clickmask="labelHeight = false">
|
|
<view class="b-f" style="width: 92vw;border-radius: 30upx 30upx 0upx 0upx;padding: 30upx 30upx 100upx;">
|
|
<view class="f-30 f-w">
|
|
商户标签
|
|
</view>
|
|
<view style="padding: 30upx 0;height: 650upx;overflow: auto;">
|
|
<view style="padding-bottom: 20upx;" v-for="(tag,index) in storeFoodList.storeinfo.tagslist" :key="index">
|
|
<view style="flex: 0.2;">
|
|
<view class="t-c f-26 dis-il-block" style="padding: 5upx 20upx;color: #FF4444;border: 1upx solid pink;border-radius: 8upx;">
|
|
{{tag.title}}
|
|
</view>
|
|
</view>
|
|
<view style="flex: 0.8;">
|
|
<view class="t-c f-26 dis-il-block" style="padding: 0upx 0upx;color: #6f6f6f;border: 1upx solid #FFFFFF;line-height: 38upx;height: 38upx;border-radius: 5upx;">
|
|
{{tag.content}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</popup-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
import Loadlogo from '@/components/template/loadlogo.vue';
|
|
import tuiRate from '@/components/template/rate.vue';
|
|
import foodCategory from '@/pages/subPages2/tamplate/foodCategory.vue';
|
|
import shoppingFixation from '@/pages/subPages2/tamplate/shoppingFixation.vue';
|
|
import PopupView from '@/components/template/PopManager.vue';
|
|
import tuiNumberbox from '@/components/template/numberbox.vue';
|
|
export default{
|
|
components:{
|
|
tuiRate,
|
|
foodCategory,
|
|
shoppingFixation,
|
|
PopupView,
|
|
tuiNumberbox,
|
|
Loadlogo
|
|
},
|
|
onLoad(options) {
|
|
let _this = this;
|
|
if(uni.getSystemInfoSync().system.indexOf('Android') === -1){
|
|
_this.flag = true;
|
|
}else{
|
|
_this.flag = false;
|
|
}
|
|
_this.storeData.id = options.id;
|
|
_this.storeData.storeid = options.storeid;
|
|
|
|
|
|
this.sid = this.storeData.id;
|
|
uni.$on('onShows',function(data){
|
|
this.onShowss();
|
|
})
|
|
},
|
|
onShow() {
|
|
this.getCommodityList();
|
|
// this.storeFoodList = {};
|
|
if(this.oneShow){
|
|
this.oneShow = false;
|
|
return
|
|
}
|
|
|
|
this.getlist(false,true);
|
|
this.topshow = !this.topshow;
|
|
this.num++;
|
|
|
|
|
|
|
|
},
|
|
onHide() {
|
|
// this.loadlogo = false;
|
|
},
|
|
data(){
|
|
return{
|
|
oneShow:true,
|
|
loadlogo: false,
|
|
duration: 500, //滑动时间
|
|
interval: 2000, //间隔时间
|
|
labelHeight:false,
|
|
ratio:0,
|
|
storeData:{},
|
|
storeFoodList:{
|
|
storeinfo:{
|
|
tag:[]
|
|
}
|
|
},
|
|
num:0,
|
|
sid:null,
|
|
show:false,
|
|
shopingList:null,//弹出框购物车数据
|
|
flag:false,
|
|
topshow:false
|
|
}
|
|
},
|
|
methods:{
|
|
gogoodsins(){
|
|
App.navigationTo({
|
|
url:'pages/mainPages/store/index?sid='+ this.storeData.storeid
|
|
})
|
|
},
|
|
goindex(){
|
|
let pages = getCurrentPages();
|
|
console.log(pages);
|
|
if(pages.length == 1){
|
|
App.navigationTo({
|
|
url: "pages/subPages2/businessCenter/businessCenter"
|
|
})
|
|
}else{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
}
|
|
// App.navigationTo({
|
|
// url: "pages/mainPages/index/index"
|
|
// })
|
|
},
|
|
withdraw(){
|
|
App._post_form(
|
|
`&p=citydelivery&do=deteShopCart&sid=${this.sid}`,
|
|
{},
|
|
res => {
|
|
if(res.errno == 0){
|
|
uni.showToast({
|
|
title: '移除成功',
|
|
duration: 2000
|
|
});
|
|
this.num++;
|
|
this.shopingList = null;
|
|
this.show = false;
|
|
this.getlist(true,true);
|
|
|
|
}
|
|
},
|
|
false,
|
|
() => {
|
|
// _this.loadlogo = true
|
|
})
|
|
|
|
},
|
|
// 清空购物车
|
|
empty(){
|
|
App.showError(
|
|
`确定移除该商店及所属商品？`, (data) => {
|
|
if (data.confirm) {
|
|
!!data && this.withdraw()
|
|
}
|
|
}, true)
|
|
},
|
|
// 监听购物车弹窗的加减
|
|
change(e,item){
|
|
let _this = this;
|
|
console.log(item)
|
|
this.shopingList.cartinfo.goodslist.map((items,indexs)=>{
|
|
if(items.id == item.id){
|
|
items.num = e.value;
|
|
App._post_form(`&p=citydelivery&do=addShopCart&goodid=${item.goodid}&specid=${item.specid}&addtype=${(e.type == "plus")?1:0}`, {}, res => {
|
|
let storePrice = res.data;
|
|
storePrice.changenum = e.value;
|
|
storePrice.changemoney = storePrice.changemoney * e.value;
|
|
storePrice.id = item.id;
|
|
if(item.num == 0){
|
|
_this.shopingList.cartinfo.goodslist.splice(indexs,1);
|
|
if(_this.shopingList.cartinfo.goodslist.length == 0){
|
|
// _this.show = !_this.show;
|
|
this.getlist(true,true);
|
|
}
|
|
}
|
|
// this.$emit('getshopPrice',storePrice);
|
|
// this.$store.commit('STOREPRICES',storePrice);
|
|
this.num++;
|
|
|
|
}, false, () => {
|
|
// _this.loadlogo = true
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 纯控制显示隐藏
|
|
onShows(){
|
|
this.getlist(true,true);
|
|
},
|
|
// 获取数据并显示
|
|
onShowis(data){
|
|
|
|
console.log(data);
|
|
this.shopingList = data;
|
|
this.getlist(true,true);
|
|
},
|
|
getCommodityList(flag = false,bor = false){
|
|
let _this = this;
|
|
App._post_form(`&p=citydelivery&do=cateList`, {storeid:this.storeData.storeid}, res => {
|
|
this.setData({
|
|
storeFoodList: res.data
|
|
});
|
|
this.storeFoodList.num = this.num;
|
|
this.storeFoodList.flag = bor;
|
|
if(flag) this.show = !this.show;
|
|
this.getlist();
|
|
uni.showLoading({
|
|
title:'加载中'
|
|
})
|
|
setTimeout(()=>{
|
|
uni.getSystemInfo({
|
|
success: function (wh) {
|
|
_this.ratio = wh.windowWidth / _this.storeFoodList.imgstyle.width;
|
|
}
|
|
});
|
|
})
|
|
}, false, () => {
|
|
this.loadlogo = true;
|
|
})
|
|
},
|
|
getlist(flag = false,bor = false){
|
|
let _this = this;
|
|
App._post_form(`&p=citydelivery&do=goodsInfo`, {storeid:this.storeData.storeid}, res => {
|
|
console.log(res);
|
|
this.storeFoodList.cartinfo.catelist = res.data.catelist;
|
|
this.storeFoodList.cartinfo.goodslist = res.data.goodslist;
|
|
_this.$nextTick(() => {
|
|
uni.hideLoading()
|
|
});
|
|
if(flag) this.show = !this.show;
|
|
// debugger
|
|
}, false, () => {
|
|
this.loadlogo = true;
|
|
})
|
|
},
|
|
labelClick(){
|
|
this.labelHeight = !this.labelHeight;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.titleImgBox /deep/ .uni-swiper-dots-horizontal{
|
|
bottom: 50upx;
|
|
}
|
|
.bankindex{
|
|
position: absolute;
|
|
left: 30upx;
|
|
top: 30upx;
|
|
background-color: rgba(254, 213, 95,1);
|
|
box-shadow: 0 5px 15px rgba(255,255,255,0.5);
|
|
padding: 10upx 20upx;
|
|
color: #FFFFFF;
|
|
font-size: 24upx;
|
|
border-radius: 60upx;
|
|
}
|
|
.tagitembox{
|
|
border-radius: 15upx;
|
|
background-color: #FFFFFF;
|
|
z-index: 99;
|
|
padding: 0 10upx;
|
|
// transition: box-shadow 0.3s ease-in-out;
|
|
}
|
|
.tagitembox:hover {
|
|
// box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
|
}
|
|
.tagbox{
|
|
// position: absolute;
|
|
// left: 20upx;
|
|
width: 92%;
|
|
}
|
|
.labelBox{
|
|
flex: 10;
|
|
overflow: hidden;
|
|
background-color: #FFFFFF;
|
|
box-sizing: border-box;
|
|
// padding: 0 30upx 30upx 30upx;
|
|
// border: 2upx solid #FF4444;
|
|
// border-radius: 15upx;
|
|
// border-top: none;
|
|
// width: 100vw;
|
|
}
|
|
.labelItem{
|
|
border: 1upx solid #ECECEC;
|
|
color: #666666;
|
|
border-radius: 20upx;
|
|
padding: 5upx 10upx;
|
|
margin-right: 20upx;
|
|
font-size: 22upx;
|
|
margin-bottom: 10upx;
|
|
}
|
|
.foodList{
|
|
width: 100%;
|
|
}
|
|
.introduce{
|
|
width: 92%;
|
|
position: relative;
|
|
top: -30upx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 40upx 40upx 0 0;
|
|
padding: 30upx 30upx 0;
|
|
}
|
|
.flxedBox{
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 99;
|
|
top: 0;
|
|
}
|
|
.storeName{
|
|
width:100%;
|
|
overflow: hidden; /*超出部分隐藏*/
|
|
white-space: nowrap; /*不换行*/
|
|
text-overflow: ellipsis;
|
|
}
|
|
.abfoodlist{
|
|
position: relative;
|
|
// top: 850upx;
|
|
width: 100%;
|
|
height: 75vh;
|
|
overflow: hidden;
|
|
}
|
|
.Androidfoodlist{
|
|
position: relative;
|
|
// top: 840upx;
|
|
width: 100%;
|
|
height: 80vh;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|