|
@@ -1,6 +1,7 @@
|
|
|
<template>
|
|
|
<view class="center">
|
|
|
<view class="top">
|
|
|
+ <view class="vheigh"></view>
|
|
|
<image class="top-bg" src="../../static/img/top-bg.png" mode=""></image>
|
|
|
<view class="top-main flex">
|
|
|
<view class="search-box flex" @click="clickSearch()">
|
|
@@ -31,38 +32,9 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="navbar flex">
|
|
|
- <view class="navbar-item" @click="nav('/pages/product/classify?type=4')">
|
|
|
- <image class="nitem-image" src="../../static/img/index-inco1.png" mode=""></image>
|
|
|
- <view class="nitem-font">随意嗨购</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="navbar-item" @click="nav('/pages/product/classify?type=5')">
|
|
|
- <image class="nitem-image" src="../../static/img/index-inco3.png" mode=""></image>
|
|
|
- <view class="nitem-font">置换</view>
|
|
|
- </view>
|
|
|
- <view class="navbar-item" @click="nav('/pages/product/seckill')">
|
|
|
- <image class="nitem-image" src="../../static/img/index-inco5.png" mode=""></image>
|
|
|
- <view class="nitem-font">秒杀</view>
|
|
|
- </view>
|
|
|
- <view class="navbar-item" @click="nav('/pages/store/store')">
|
|
|
- <image class="nitem-image" src="../../static/img/index-inco7.png" mode=""></image>
|
|
|
- <view class="nitem-font">合作专区</view>
|
|
|
- </view>
|
|
|
- <view class="navbar-item" @click="nav('/pages/category/category')">
|
|
|
- <image class="nitem-image" src="../../static/img/index-inco8.png" mode=""></image>
|
|
|
- <view class="nitem-font">大品牌区</view>
|
|
|
- </view>
|
|
|
- <!-- <view class="navbar-item" @click="nav('/pages/index/message?type=2')">
|
|
|
- <image class="nitem-image" src="../../static/img/index-inco6.png" mode=""></image>
|
|
|
- <view class="nitem-font">拍卖品</view>
|
|
|
- </view> -->
|
|
|
- <view class="navbar-item" @click="nav('/pages/product/classify?type=1')">
|
|
|
- <image class="nitem-image" src="../../static/img/index-inco2.png" mode=""></image>
|
|
|
- <view class="nitem-font">医斯佳专区</view>
|
|
|
- </view>
|
|
|
- <view class="navbar-item" @click="nav('/pages/product/classify?type=3')">
|
|
|
- <image class="nitem-image" src="../../static/img/index-inco4.png" mode=""></image>
|
|
|
- <view class="nitem-font">CBB专区</view>
|
|
|
+ <view class="navbar-item" v-for="(item, index) in navbarList[0].children" @click="nav('/pages/product/list?tid=' + item.id)">
|
|
|
+ <image class="nitem-image" :src="item.pic" mode=""></image>
|
|
|
+ <view class="nitem-font">{{ item.cate_name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="shingle" v-if="list">
|
|
@@ -106,9 +78,9 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 秒杀楼层 -->
|
|
|
- <seckill></seckill>
|
|
|
+ <!-- <seckill></seckill> -->
|
|
|
<view class="ge" v-if="stop.length != 0"></view>
|
|
|
- <view class="serve" v-if="stop.length != 0">
|
|
|
+ <!-- <view class="serve" v-if="stop.length != 0">
|
|
|
<view class="seckill-title flex">
|
|
|
<view class="seckill-left flex">
|
|
|
<image class="seckill-inco" src="../../static/img/serve.png" mode=""></image>
|
|
@@ -129,6 +101,27 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view> -->
|
|
|
+ <view class="product" v-for="(item, index) in navbarList[0].children">
|
|
|
+ <view class="seckill-title flex">
|
|
|
+ <view class="seckill-left flex">
|
|
|
+ <view class="seckill-font">{{ item.cate_name }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="seckill-right" @click="nav('/pages/product/list?tid=' + item.id)">
|
|
|
+ <view class="seckill-rfont">更多</view>
|
|
|
+ <image class="seckill-back" src="../../static/img/back.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="priduct-main">
|
|
|
+ <view class="priduct-item" v-for="itm in item.product" :key="itm.id" @click="navToDetailPage(itm)">
|
|
|
+ <view class="priduct-main-image"><image :src="itm.image" mode="scaleToFill"></image></view>
|
|
|
+ <view class="priduct-main-name clamp margin-c-20">{{ itm.store_name }}</view>
|
|
|
+ <view class="priduct-main-price">
|
|
|
+ <view class="price" v-if="item.integral != 0">¥{{ itm.price * 1 }} + {{ itm.integral }}趣豆</view>
|
|
|
+ <view class="price" v-else>¥{{ itm.price }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<u-tabbar activeColor="#f42b4e" v-model="current" :list="tabbar"></u-tabbar>
|
|
|
</view>
|
|
@@ -138,9 +131,12 @@
|
|
|
import { tabbar1 } from '@/utils/tabbar.js';
|
|
|
import seckill from '../../components/seckill/seckill.vue';
|
|
|
import { article } from '@/api/user.js';
|
|
|
+import { getCategoryList, getProducts } from '@/api/product.js';
|
|
|
import { loadIndexs, store_list } from '@/api/index.js';
|
|
|
import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
|
|
|
-import { openMap } from '@/utils/rocessor.js';
|
|
|
+// #ifdef H5
|
|
|
+// import { openMap } from '@/utils/rocessor.js';
|
|
|
+// #endif
|
|
|
import { auction_gu } from '@/api/hall.js';
|
|
|
export default {
|
|
|
components: {
|
|
@@ -161,7 +157,8 @@ export default {
|
|
|
text: [],
|
|
|
article: [],
|
|
|
list: {},
|
|
|
- stop: []
|
|
|
+ stop: [],
|
|
|
+ navbarList: [{ child: [] }]
|
|
|
};
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
@@ -174,9 +171,26 @@ export default {
|
|
|
},
|
|
|
onShow() {
|
|
|
this.loadData();
|
|
|
+ this.getnavbar();
|
|
|
this.getaddress();
|
|
|
},
|
|
|
methods: {
|
|
|
+ getnavbar() {
|
|
|
+ let obj = this;
|
|
|
+ getCategoryList({})
|
|
|
+ .then(({ data }) => {
|
|
|
+ data[0].children.forEach(e => {
|
|
|
+ getProducts({ page: 1, limit: 2, sid: e.id }).then(info => {
|
|
|
+ obj.$set(e, 'product', info.data);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.navbarList = data;
|
|
|
+ console.log(data, '123456');
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
loadData() {
|
|
|
article({}, 1).then(({ data }) => {
|
|
|
data.forEach(e => {
|
|
@@ -234,10 +248,11 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
fail: err => {
|
|
|
- console.log(err, '123456789');
|
|
|
+ // #ifdef H5
|
|
|
openMap().then(e => {
|
|
|
this.getaddress();
|
|
|
});
|
|
|
+ // #endif
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -291,6 +306,10 @@ page,
|
|
|
height: auto;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
+.vheigh {
|
|
|
+ height: var(--status-bar-height);
|
|
|
+ background-color: $base-color;
|
|
|
+}
|
|
|
.top {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
@@ -331,8 +350,15 @@ page,
|
|
|
.carousel {
|
|
|
width: 700rpx;
|
|
|
height: 276rpx;
|
|
|
+ /* #ifndef APP-PLUS */
|
|
|
margin: -240rpx auto 0;
|
|
|
+ /* #endif */
|
|
|
+ /* #ifdef APP-PLUS */
|
|
|
+ margin: -180rpx auto 0;
|
|
|
+ /* #endif */
|
|
|
+ border-radius: 40rpx;
|
|
|
image {
|
|
|
+ border-radius: 40rpx;
|
|
|
width: 700rpx;
|
|
|
height: 276rpx;
|
|
|
}
|
|
@@ -395,6 +421,7 @@ page,
|
|
|
height: 90rpx;
|
|
|
}
|
|
|
.nitem-font {
|
|
|
+ margin-top: 10rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
@@ -402,15 +429,6 @@ page,
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.product {
|
|
|
- width: 662rpx;
|
|
|
- height: 180rpx;
|
|
|
- margin: 44rpx auto;
|
|
|
- .product-image {
|
|
|
- width: 662rpx;
|
|
|
- height: 180rpx;
|
|
|
- }
|
|
|
-}
|
|
|
.shingle {
|
|
|
width: 750rpx;
|
|
|
background: #f8f8f8;
|
|
@@ -539,6 +557,9 @@ page,
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.seckill-title {
|
|
|
+ padding: 32rpx 30rpx 0;
|
|
|
+}
|
|
|
.seckill-left {
|
|
|
justify-content: flex-start;
|
|
|
.seckill-inco {
|
|
@@ -548,7 +569,7 @@ page,
|
|
|
}
|
|
|
.seckill-font {
|
|
|
margin-left: 8rpx;
|
|
|
- font-size: 32rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #333333;
|
|
@@ -583,6 +604,7 @@ page,
|
|
|
background: #f8f8f8;
|
|
|
}
|
|
|
.serve {
|
|
|
+ padding: 32rpx 30rpx;
|
|
|
padding: 32rpx 30rpx;
|
|
|
background: #ffffff;
|
|
|
.serve-main {
|
|
@@ -631,4 +653,66 @@ page,
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.product {
|
|
|
+ background: #f0f0f0;
|
|
|
+}
|
|
|
+.priduct-main {
|
|
|
+ margin-top: 38rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 32rpx;
|
|
|
+
|
|
|
+ .priduct-item {
|
|
|
+ width: 48%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ &:nth-child(2n + 1) {
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .priduct-main-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 330rpx;
|
|
|
+ // background: red;
|
|
|
+ border-radius: 3px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 12rpx 12rpx 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .priduct-main-name {
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-dark;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .priduct-main-price {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 16rpx 12rpx;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fd3b39;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart-icon {
|
|
|
+ image {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|