|
@@ -1,19 +1,29 @@
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
<navbar-line :bgColor="bgColor" :hasPlacer="false">
|
|
|
- <view class="header-loc align-center" @tap="navTo('/pages/address/address')">
|
|
|
- <image src="/static/mang-loc.png" class="image_19" mode="aspectFill" />
|
|
|
- <text class="text_43">沂蒙云谷·创意孵化中心</text>
|
|
|
+ <view class="header-loc align-center" >
|
|
|
+ <image src="/static/mang-loc.png" class="image_19" mode="aspectFill" />
|
|
|
+ <text class="text_43 clamp" v-if="addrInfo.address" @tap="golocAddr">
|
|
|
+ {{addrInfo.address}}
|
|
|
+ </text>
|
|
|
+ <text class="text_43 clamp" v-else @tap="golocAddr">
|
|
|
+ 请选择您的位置
|
|
|
+ </text>
|
|
|
</view>
|
|
|
</navbar-line>
|
|
|
- <view class="p-header"><image src="/static/mang-bg.png" mode="aspectFill" class="img"></image></view>
|
|
|
- <view class="align-center p-ads">
|
|
|
- <image src="/static/mang-sear.png" class="image_20" mode="aspectFill" />
|
|
|
+ <!-- /static/mang-bg.png -->
|
|
|
+ <view class="p-header"><image :src="banner" mode="aspectFill" class="img"></image></view>
|
|
|
+ <view class="align-center p-ads" v-if="ads.length>0">
|
|
|
+ <image src="/static/mang-sear.png" class="image_20" mode="aspectFill" @tap="navTo('/pages/mang/search')" />
|
|
|
|
|
|
- <view class="group_20"><zetank-notice colors="#55aaff" :noticeList="ads" :interval="3000"></zetank-notice></view>
|
|
|
+ <view class="group_20">
|
|
|
+ <zetank-notice :noticeList="ads" :interval="3000"/>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="p-entry">
|
|
|
- <view class="flex-col items-center grid-item" v-for="(item,i) in cats" :key="i">
|
|
|
+ <view class="flex-col items-center grid-item"
|
|
|
+ v-for="(item,i) in cats" :key="i" @tap="navTo('/pages/mang/list',{id:item.id,name:item.cate_name})"
|
|
|
+ >
|
|
|
<image
|
|
|
:src="item.cate_logo"
|
|
|
class="image"
|
|
@@ -36,55 +46,29 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="p-list">
|
|
|
- <view class="flex-row section_2 view_6" v-for="(item,idx) in tabs[tabCurrentIndex].list" :key="idx" @tap="navTo('/pages/mang/detail')">
|
|
|
- <image
|
|
|
- :src="item.goods_img"
|
|
|
- class="group_11"
|
|
|
- mode="aspectFill"
|
|
|
- />
|
|
|
- <view class="flex-col text_21 view_7">
|
|
|
- <text class="text_25 clamp">{{item.goods_name}}</text>
|
|
|
- <view class="stars align-center">
|
|
|
- <image
|
|
|
- src="/static/mang_star.png"
|
|
|
- class="image_14"
|
|
|
- v-for="(item,idx) in item.rank"
|
|
|
- :key="idx"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <text class="text_26">随机搭配</text>
|
|
|
- <view class="flex-row group_16">
|
|
|
- <view class="group_17">
|
|
|
- <text class="text_27">¥</text>
|
|
|
- <text class="text_28">{{item.shop_price}}</text>
|
|
|
- </view>
|
|
|
- <text class="text_29">¥{{item.market_price}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <text class="text_30" v-if="item.distance">{{item.distance}}</text>
|
|
|
- <view class="flex-col text-wrapper_2"><text class="text_23 text_31 clamp">仅剩{{item.num}}份</text></view>
|
|
|
- </view>
|
|
|
+ <proItem :info="item" v-for="(item,i) in tabs[tabCurrentIndex].list" :key="i" />
|
|
|
+ <empty v-if="tabs[tabCurrentIndex].list.length == 0 && tabs[tabCurrentIndex].loaded "/>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import navbarLine from '@/components/navbar-line.vue';
|
|
|
import zetankNotice from './components/zetank-notice.vue';
|
|
|
+import proItem from './components/pro-item.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
+ proItem,
|
|
|
navbarLine,
|
|
|
zetankNotice
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ // defaultAddr:{},
|
|
|
+ banner:'', // 首页图片
|
|
|
ads: [],
|
|
|
bgColor:'transparent',
|
|
|
- cats:[
|
|
|
- {img:'/static/mang-all.png',name:'全部'},
|
|
|
- ],
|
|
|
+ cats:[],
|
|
|
tabCurrentIndex: 0,
|
|
|
tabs:[
|
|
|
{name:'智能排序',type:1,loadingType: 'more', list: [], page: 1,loaded:false},
|
|
@@ -95,7 +79,6 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
|
- // console.log('---',e);
|
|
|
let scrollTop = e.scrollTop;
|
|
|
if(scrollTop > this.CustomBar - 10){
|
|
|
this.bgColor = "#ffffff";
|
|
@@ -103,28 +86,44 @@ export default {
|
|
|
this.bgColor = "transparent";
|
|
|
}
|
|
|
},
|
|
|
+ // onLoad() {
|
|
|
+ //app.vue已调用
|
|
|
+ // this.getDefaultAddr();
|
|
|
+ // },
|
|
|
onShow() {
|
|
|
this.getList('refresh')
|
|
|
this.getCats();
|
|
|
this.getAds();
|
|
|
+ this.getBanner();
|
|
|
},
|
|
|
- onPullDownRefresh() {
|
|
|
- this.getList('refresh')
|
|
|
- this.getCats();
|
|
|
- this.getAds();
|
|
|
- },
|
|
|
+ // onPullDownRefresh() {
|
|
|
+ // this.getList('refresh')
|
|
|
+ // this.getCats();
|
|
|
+ // this.getAds();
|
|
|
+ // this.getBanner();
|
|
|
+ // this.getDefaultAddr();
|
|
|
+ // },
|
|
|
onReachBottom() {
|
|
|
this.getList()
|
|
|
},
|
|
|
methods:{
|
|
|
- getAds(){
|
|
|
- this.ads=[{ title: '1已帮助减少2486g数量的食品浪费' }, { title: '2已帮助减少2486g数量的食品浪费' }]
|
|
|
+ // async getDefaultAddr(){
|
|
|
+ // this.$store.dispatch('userInfo/getDefaultAddr');
|
|
|
+ // },
|
|
|
+ async getBanner(){
|
|
|
+ let res = await this.$request('goods.banner');
|
|
|
+ this.banner = res.data.image;
|
|
|
+ },
|
|
|
+ async getAds(){
|
|
|
+ let res = await this.$request('goods.energy');
|
|
|
+ let data = res.data
|
|
|
+ this.ads= data ? [data] : [];
|
|
|
},
|
|
|
async getCats(){
|
|
|
let res = await this.$request('goods.catelist')
|
|
|
let cats =res.data || [];
|
|
|
this.cats = cats.slice(0,7);
|
|
|
- this.cats.push({cate_logo:'/static/mang-all.png',cate_name:'全部'})
|
|
|
+ this.cats.push({cate_logo:'/static/mang-all.png',cate_name:'全部',id:0})
|
|
|
},
|
|
|
async getList(source){
|
|
|
//这里是将订单挂载到tab列表下
|
|
@@ -147,7 +146,9 @@ export default {
|
|
|
let res = await this.$request('goods.list',{
|
|
|
sort_type:navItem.type,
|
|
|
page: navItem.page,
|
|
|
- limit: this.pageSize
|
|
|
+ limit: this.pageSize,
|
|
|
+ lng: this.addrInfo.address ? this.addrInfo.address_lng : '',
|
|
|
+ lat: this.addrInfo.address ? this.addrInfo.address_lat : '',
|
|
|
});
|
|
|
uni.stopPullDownRefresh();
|
|
|
let result = res.data.row || [];
|
|
@@ -168,15 +169,35 @@ export default {
|
|
|
navItem.list.push(item);
|
|
|
});
|
|
|
},
|
|
|
- tapTab(idx){
|
|
|
+ async golocAddr(){
|
|
|
+ //有地址进入地址列表选择,无新增
|
|
|
+ // let res = await this.$request('addr.list')
|
|
|
+ // let list = res.data || [];
|
|
|
+ // if(list.length > 0){
|
|
|
+
|
|
|
+ // }
|
|
|
+ this.navTo('/pages/address/address',{sourcePage:'mang'},{isCheckLogin:true})
|
|
|
+ },
|
|
|
+
|
|
|
+ async tapTab(idx){
|
|
|
if(idx === this.tabCurrentIndex){
|
|
|
return;
|
|
|
}
|
|
|
+
|
|
|
+ if(idx === 1 && !this.addrInfo.address){
|
|
|
+ let [mErr,mRes] = await uni.showModal({title:'请选择您的地址'})
|
|
|
+ if(mRes.cancel){
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ this.golocAddr();
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.tabCurrentIndex = idx;
|
|
|
this.getList('refresh');
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+ // tapCat(item){
|
|
|
+ // this.navTo('/pages/mang/list',{goods_cate:item.name})
|
|
|
+ // }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -201,6 +222,7 @@ page {
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang;
|
|
|
letter-spacing: 1.12rpx;
|
|
|
+ max-width: 400rpx;
|
|
|
}
|
|
|
}
|
|
|
.p-header {
|
|
@@ -291,123 +313,5 @@ page {
|
|
|
|
|
|
}
|
|
|
.p-list{
|
|
|
- .section_2 {
|
|
|
- width: 690rpx;
|
|
|
- margin:0 auto 24rpx;
|
|
|
- padding: 24rpx 14rpx 24rpx 24rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- box-shadow: 0px 6rpx 10rpx #2a2a2a14;
|
|
|
- border-radius: 20rpx;
|
|
|
- position: relative;
|
|
|
- .text-wrapper_2 {
|
|
|
- padding: 8rpx 0 16rpx;
|
|
|
- background-image: url('/static/mang-listbg.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- position: absolute;
|
|
|
- right: -10rpx;
|
|
|
- top: 26rpx;
|
|
|
- width: 120rpx;
|
|
|
- }
|
|
|
- .text_23 {
|
|
|
- margin-left: 12rpx;
|
|
|
- margin-right: 6rpx;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang;
|
|
|
- max-width: 120rpx;
|
|
|
- }
|
|
|
- // .text_31 {
|
|
|
- // margin-left: 12rpx;
|
|
|
- // margin-right: 6rpx;
|
|
|
- // }
|
|
|
- }
|
|
|
- .view_6 {
|
|
|
- padding: 24rpx 18rpx 24rpx 24rpx;
|
|
|
- }
|
|
|
- .group_11 {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
- .text_21 {
|
|
|
- margin-top: 100rpx;
|
|
|
- color: #999999;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang;
|
|
|
- line-height: 18rpx;
|
|
|
- }
|
|
|
- .view_7 {
|
|
|
- margin-top: initial;
|
|
|
- color: initial;
|
|
|
- font-size: initial;
|
|
|
- font-family: initial;
|
|
|
- line-height: initial;
|
|
|
- margin-left: 19rpx;
|
|
|
- flex: 1 1 auto;
|
|
|
- align-self: center;
|
|
|
- }
|
|
|
- .text_25 {
|
|
|
- color: #333333;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang;
|
|
|
- max-width: 360rpx;
|
|
|
- }
|
|
|
- .stars{
|
|
|
- margin-top: 12rpx;
|
|
|
- .image_14 {
|
|
|
- width: 28rpx;
|
|
|
- height: 28rpx;
|
|
|
- margin-right: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text_26 {
|
|
|
- margin-top: 20rpx;
|
|
|
- align-self: flex-start;
|
|
|
- color: #999999;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang;
|
|
|
- line-height: 23rpx;
|
|
|
- }
|
|
|
- .group_16 {
|
|
|
- margin-top: 37rpx;
|
|
|
- padding: 0 2rpx;
|
|
|
- }
|
|
|
- .group_17 {
|
|
|
- line-height: 28rpx;
|
|
|
- height: 29rpx;
|
|
|
- }
|
|
|
- .text_27 {
|
|
|
- color: #ff3e3e;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang;
|
|
|
- line-height: 19rpx;
|
|
|
- }
|
|
|
- .text_28 {
|
|
|
- color: #ff3e3e;
|
|
|
- font-size: 36rpx;
|
|
|
- font-family: PingFang;
|
|
|
- line-height: 28rpx;
|
|
|
- }
|
|
|
- .text_29 {
|
|
|
- margin-left: 10rpx;
|
|
|
- margin-top: 9rpx;
|
|
|
- color: #999999;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang;
|
|
|
- line-height: 20rpx;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- .text_30 {
|
|
|
- z-index: 2;
|
|
|
- position: absolute;
|
|
|
- top: 130rpx;
|
|
|
- right: 20rpx;
|
|
|
- color: #999999;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|