123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <template>
- <view class="page">
- <navbar-line :bgColor="bgColor" :hasPlacer="false">
- <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>
- <!-- /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 :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" @tap="navTo('/pages/mang/list',{id:item.id,name:item.cate_name})"
- >
- <image
- :src="item.cate_logo"
- class="image"
- mode="aspectFill"
- />
- <text class="text">{{item.cate_name}}</text>
- </view>
- </view>
-
- <view class="p-tabs align-center justify-between">
- <view class="flex-col text-wrapper" :class="{active: i === tabCurrentIndex}"
- v-for="(item,i) in tabs" :key="i" @tap="tapTab(i)"
- >
- <image
- src="/static/mang-tabbg.png"
- class="image_8"
- />
- <text class="text_9">{{item.name}}</text>
- </view>
- </view>
-
- <view class="p-list">
- <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:[],
- tabCurrentIndex: 0,
- tabs:[
- {name:'智能排序',type:1,loadingType: 'more', list: [], page: 1,loaded:false},
- {name:'距离最近',type:2,loadingType: 'more', list: [], page: 1,loaded:false},
- {name:'评分最高',type:3,loadingType: 'more', list: [], page: 1,loaded:false},
- ],
- pageSize: 20,
- };
- },
- onPageScroll(e) {
- let scrollTop = e.scrollTop;
- if(scrollTop > this.CustomBar - 10){
- this.bgColor = "#ffffff";
- }else{
- 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();
- // this.getBanner();
- // this.getDefaultAddr();
- // },
- onReachBottom() {
- this.getList()
- },
- methods:{
- // 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:'全部',id:0})
- },
- async getList(source){
- //这里是将订单挂载到tab列表下
- let index = this.tabCurrentIndex;
- let navItem = this.tabs[index];
- if (source === 'refresh') {
- if(navItem.loadingType == 'loading'){
- return;
- }
- navItem.loadingType = 'more';
- navItem.page=1;
- navItem.list=[];
- navItem.loaded=false;
- }
- if (navItem.loadingType === 'loading' || navItem.loadingType == 'noMore') {
- //防止重复加载
- return;
- }
- navItem.loadingType = 'loading';
- let res = await this.$request('goods.list',{
- sort_type:navItem.type,
- page: navItem.page,
- 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 || [];
- if ( this.pageSize > result.length) {
- navItem.loadingType = 'noMore';
- } else {
- navItem.loadingType = 'more';
- }
- // 页数加一
- navItem.page++;
- navItem.loaded = true;
- if(source === 'refresh'){
- navItem.page=2;
- navItem.list = result;
- return;
- }
- result.forEach(item => {
- navItem.list.push(item);
- });
- },
- 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>
- <style lang="scss">
- page {
- background-color: #F7FEFA;
- }
- .header-loc {
- position: absolute;
- width: 100%;
- padding: 0 30rpx;
- top: 50%;
- transform: translateY(-50%);
- .image_19 {
- width: 26rpx;
- height: 28rpx;
- }
- .text_43 {
- margin-left: 12rpx;
- color: #333333;
- font-size: 28rpx;
- font-family: PingFang;
- letter-spacing: 1.12rpx;
- max-width: 400rpx;
- }
- }
- .p-header {
- .img {
- width: 750rpx;
- height: 532rpx;
- }
- }
- .p-ads {
- margin: -32rpx auto 0;
- width: 690rpx;
- height: 72rpx;
- padding: 0 22rpx;
- background-image: url('/static/mang-ads.png');
- background-size: 100% 100%;
- background-repeat: no-repeat;
- position: relative;
- z-index: 2;
- .image_20 {
- width: 35rpx;
- height: 35rpx;
- }
- .group_20 {
- width: 100%;
- }
- }
- .p-entry {
- width: 690rpx;
- background: #FFFFFF;
- box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(42,42,42,0.08);
-
- margin: 30rpx auto 0;
- padding: 9.5rpx 12rpx 20.5rpx;
- background-color: #ffffff;
- box-shadow: 0px 6rpx 10rpx #2a2a2a14;
- border-radius: 20rpx;
- height: 350rpx;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- .grid-item {
- padding: 17rpx 4rpx;
- }
- .image {
- width: 96rpx;
- height: 96rpx;
- }
- .text {
- margin-top: 7rpx;
- color: #333333;
- font-size: 24rpx;
- font-family: PingFang;
- line-height: 23rpx;
- letter-spacing: 1.44rpx;
- }
- }
- .p-tabs{
- margin-left: 30rpx;
- width: 530rpx;
- .text-wrapper {
- height: 85rpx;
- position: relative;
- &.active{
- .image_8{
- display: block;
- }
- .text_9{
- color: #333333;
- }
- }
- .image_8{
- width: 36rpx;
- height: 36rpx;
- display: none;
- position: absolute;
- z-index: 2;
- right: -14rpx;
- top:40%;
- transform: translateY(-50%);
- }
- .text_9 {
- color: #999999;
- font-size: 30rpx;
- font-family: PingFang;
- letter-spacing: 1.2rpx;
- line-height: 85rpx;
- }
- }
- }
- .p-list{
- }
- </style>
|