|
|
@@ -4,14 +4,32 @@
|
|
|
<view class="carousel-section">
|
|
|
<!-- 标题栏和状态栏占位符 -->
|
|
|
<view class="titleNview-placing"></view>
|
|
|
- <swiper class="carousel" autoplay="true" duration="400" interval="5000" >
|
|
|
+ <swiper class="carousel" autoplay="true" duration="400" interval="5000">
|
|
|
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
|
|
|
</swiper>
|
|
|
</view>
|
|
|
- <u-tabs :list="typeList" active-color="#4E6CFF" name='name' bg-color='transparent' :current="typeIndex" @change="changeType"></u-tabs>
|
|
|
- <swiper class="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="typeIndex" >
|
|
|
+ <view class="tongz flex">
|
|
|
+ <view>
|
|
|
+ <view class="tongz-bg"><image src="../../static/img/xtxx.png" mode=""></image></view>
|
|
|
+ <view class="tongz-left flex">
|
|
|
+ <image class="image-left" src="../../static/icon/ld.png" mode=""></image>
|
|
|
+ <u-notice-bar
|
|
|
+ style="width: 100%;"
|
|
|
+ mode="vertical"
|
|
|
+ type="none"
|
|
|
+ :volume-icon="false"
|
|
|
+ :more-icon="true"
|
|
|
+ :list="showTitle"
|
|
|
+ @click="goDetails"
|
|
|
+ @getMore="nav('/pages/user/addmen?id=2')"
|
|
|
+ ></u-notice-bar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-tabs :list="typeList" active-color="#4E6CFF" name="name" bg-color="transparent" :current="typeIndex" @change="changeType"></u-tabs>
|
|
|
+ <swiper class="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="typeIndex">
|
|
|
<swiper-item v-for="ls in typeList">
|
|
|
- <view class="guess-section">
|
|
|
+ <!-- <view class="guess-section">
|
|
|
<view v-for="(item, index) in ls.list" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
<text class="title clamp2 margin-c-20">{{ item.store_name }}</text>
|
|
|
@@ -26,6 +44,19 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view> -->
|
|
|
+ <view class="good-wrapper">
|
|
|
+ <view class="good" v-for="(item, index) in ls.list" :key="index" @click="navToDetailPage(item)">
|
|
|
+ <view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
+ <view class="good-info">
|
|
|
+ <view class="info-title clamp2">
|
|
|
+ {{item.store_name}}
|
|
|
+ </view>
|
|
|
+ <view class="info-price">
|
|
|
+ <image class="jff" src="../../static/icon/iconU1.png" mode="widthFix"></image>{{item.price}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<u-loadmore :status="ls.load" />
|
|
|
</swiper-item>
|
|
|
@@ -34,11 +65,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { loadIndexs } from '@/api/index.js';
|
|
|
+import { loadIndexs, article } from '@/api/index.js';
|
|
|
import { getUserInfo } from '@/api/user.js';
|
|
|
import { interceptor } from '@/utils/loginUtils';
|
|
|
import { mapState } from 'vuex';
|
|
|
-import { getCategoryList, getProducts} from '@/api/product.js';
|
|
|
+import { getCategoryList, getProducts } from '@/api/product.js';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
@@ -46,20 +77,20 @@ export default {
|
|
|
shareShow: false, //分享海报
|
|
|
pageProportion: 0, //保存页面基于750宽度的比例
|
|
|
swiperHeight: 0,
|
|
|
- swiperLength:0,
|
|
|
+ swiperLength: 0,
|
|
|
carouselList: [], //轮播列表
|
|
|
page: 1,
|
|
|
limit: 5,
|
|
|
// 商品分类数据
|
|
|
- typeList:[{
|
|
|
-
|
|
|
- }],
|
|
|
+ typeList: [{}],
|
|
|
//保存当前选中的分类
|
|
|
- typeIndex:0
|
|
|
+ typeIndex: 0,
|
|
|
+ showList: [],
|
|
|
+ showTitle: []
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapState('user', ['hasLogin','userInfo'])
|
|
|
+ ...mapState('user', ['hasLogin', 'userInfo'])
|
|
|
},
|
|
|
onLoad: function(option) {
|
|
|
// #ifndef MP
|
|
|
@@ -69,6 +100,7 @@ export default {
|
|
|
}
|
|
|
// #endif
|
|
|
this.init();
|
|
|
+ this.getShowList()
|
|
|
},
|
|
|
//下拉刷新
|
|
|
onPullDownRefresh() {
|
|
|
@@ -81,12 +113,12 @@ export default {
|
|
|
this.clickSearch();
|
|
|
},
|
|
|
// #endif
|
|
|
- onReachBottom(){
|
|
|
- this.getProducts(this.typeList[this.typeIndex])
|
|
|
+ onReachBottom() {
|
|
|
+ this.getProducts(this.typeList[this.typeIndex]);
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化页面数据
|
|
|
- init(){
|
|
|
+ init() {
|
|
|
this.loadData();
|
|
|
// 获取分类
|
|
|
this.getType();
|
|
|
@@ -94,7 +126,7 @@ export default {
|
|
|
this.getBl();
|
|
|
},
|
|
|
// 获取初始化页面比例
|
|
|
- getBl(){
|
|
|
+ getBl() {
|
|
|
let obj = this;
|
|
|
obj.$nextTick(function() {
|
|
|
uni.createSelectorQuery()
|
|
|
@@ -111,29 +143,30 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 设置切换高度
|
|
|
- getlistHeight(item){
|
|
|
+ getlistHeight(item) {
|
|
|
let obj = this;
|
|
|
let bHeight = Math.ceil(item.length / 2);
|
|
|
- obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight+30);
|
|
|
+ obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight + 30);
|
|
|
},
|
|
|
// tabs切换
|
|
|
- changeType(e){
|
|
|
- console.log(e,'dianji');
|
|
|
+ changeType(e) {
|
|
|
+ console.log(e, 'dianji');
|
|
|
+ console.log(this.typeList[e])
|
|
|
this.typeIndex = e;
|
|
|
// 判断是否已经加载过数据
|
|
|
- const item = this.typeList[this.typeIndex]
|
|
|
- if(!item.loding){
|
|
|
- this.getProducts(item)
|
|
|
+ const item = this.typeList[this.typeIndex];
|
|
|
+ if (!item.loding) {
|
|
|
+ this.getProducts(item);
|
|
|
}
|
|
|
},
|
|
|
// sw切换
|
|
|
- listChange(e){
|
|
|
- if(e.detail.current!=this.typeIndex){
|
|
|
- this.typeIndex=e.detail.current;
|
|
|
+ listChange(e) {
|
|
|
+ if (e.detail.current != this.typeIndex) {
|
|
|
+ this.typeIndex = e.detail.current;
|
|
|
// 判断是否已经加载过数据
|
|
|
- const item = this.typeList[this.typeIndex]
|
|
|
- if(!item.loding){
|
|
|
- this.getProducts(item)
|
|
|
+ const item = this.typeList[this.typeIndex];
|
|
|
+ if (!item.loding) {
|
|
|
+ this.getProducts(item);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -146,61 +179,63 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 获取商品分类
|
|
|
- getType(){
|
|
|
+ getType() {
|
|
|
const obj = this;
|
|
|
getCategoryList({})
|
|
|
.then(({ data }) => {
|
|
|
obj.typeList = data.map(function(s) {
|
|
|
return {
|
|
|
- name:s.cate_name,
|
|
|
- id:s.id,
|
|
|
- page:1,
|
|
|
- limit:10,
|
|
|
- list:[],
|
|
|
- load:'loadmore',//loadmore/loading / nomore
|
|
|
- isLoding:false//用于判断是否已经载入过分类
|
|
|
+ name: s.cate_name,
|
|
|
+ id: s.id,
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ list: [],
|
|
|
+ load: 'loadmore', //loadmore/loading / nomore
|
|
|
+ isLoding: false //用于判断是否已经载入过分类
|
|
|
};
|
|
|
});
|
|
|
// 加载商品
|
|
|
- obj.getProducts(this.typeList[this.typeIndex])
|
|
|
+ obj.getProducts(this.typeList[this.typeIndex]);
|
|
|
})
|
|
|
.catch(err => {
|
|
|
console.log(err);
|
|
|
});
|
|
|
},
|
|
|
// 获取商品信息
|
|
|
- getProducts(item){
|
|
|
+ getProducts(item) {
|
|
|
// 判断是否已经没有数据
|
|
|
- if(item.load=='nomore'){
|
|
|
- return ;
|
|
|
+ if (item.load == 'nomore') {
|
|
|
+ return;
|
|
|
}
|
|
|
// 判断是否加载中
|
|
|
- if(item.load=='loading'){
|
|
|
- return ;
|
|
|
+ if (item.load == 'loading') {
|
|
|
+ return;
|
|
|
}
|
|
|
// 判断是否为初次加载
|
|
|
- if(!item.isLoding){
|
|
|
+ if (!item.isLoding) {
|
|
|
item.isLoding = true;
|
|
|
}
|
|
|
// 设置开始加载
|
|
|
item.load = 'loading';
|
|
|
getProducts({
|
|
|
- cid:item.id,
|
|
|
- page:item.page,
|
|
|
- limit:item.limit
|
|
|
- }).then((e) => {
|
|
|
- item.list =item.list.concat( e.data);
|
|
|
- if(item.list.length==item.limit){
|
|
|
- item.page++
|
|
|
- item.load = 'loadmore';
|
|
|
- }else{
|
|
|
- item.load = 'nomore';
|
|
|
- }
|
|
|
- // 初始化高度
|
|
|
- this.getlistHeight(item.list)
|
|
|
- }).catch((e) => {
|
|
|
- console.log(e);
|
|
|
+ cid: item.id,
|
|
|
+ page: item.page,
|
|
|
+ limit: item.limit
|
|
|
})
|
|
|
+ .then(e => {
|
|
|
+ item.list = item.list.concat(e.data);
|
|
|
+ if (item.list.length == item.limit) {
|
|
|
+ item.page++;
|
|
|
+ item.load = 'loadmore';
|
|
|
+ } else {
|
|
|
+ item.load = 'nomore';
|
|
|
+ }
|
|
|
+ // 初始化高度
|
|
|
+ this.getlistHeight(item.list);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
},
|
|
|
// 點擊搜索框
|
|
|
clickSearch() {
|
|
|
@@ -240,6 +275,31 @@ export default {
|
|
|
uni.navigateTo({
|
|
|
url: item.wap_url
|
|
|
});
|
|
|
+ },
|
|
|
+ //获取系统消息
|
|
|
+ getShowList() {
|
|
|
+ article({
|
|
|
+ page: 1,
|
|
|
+ limit: 3
|
|
|
+ },2).then( ({data}) => {
|
|
|
+ this.showList = data
|
|
|
+ this.showTitle = data.map( item => {
|
|
|
+ return item.title
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //系统消息跳转详情
|
|
|
+ goDetails(e) {
|
|
|
+ console.log(e)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/user/addmenDetail?id=' + this.showList[e].id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ nav(url) {
|
|
|
+ // console.log('dddddddddddddddddd')
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -252,7 +312,7 @@ page {
|
|
|
.m-t {
|
|
|
margin-top: 16rpx;
|
|
|
}
|
|
|
-.list-box{
|
|
|
+.list-box {
|
|
|
margin-top: 30rpx;
|
|
|
}
|
|
|
/* 头部 轮播图 */
|
|
|
@@ -374,7 +434,7 @@ page {
|
|
|
font-weight: bold;
|
|
|
line-height: 1;
|
|
|
line-height: 80rpx;
|
|
|
- .iconJf{
|
|
|
+ .iconJf {
|
|
|
width: 23rpx;
|
|
|
margin-right: 5rpx;
|
|
|
}
|
|
|
@@ -498,4 +558,120 @@ page {
|
|
|
color: $font-color-light;
|
|
|
}
|
|
|
}
|
|
|
+.xtxx {
|
|
|
+ width: 100%;
|
|
|
+ height: 70rpx;
|
|
|
+ position: relative;
|
|
|
+ margin: 22rpx 0 20rpx;
|
|
|
+ .bg {
|
|
|
+ display: inline-block;
|
|
|
+ width: 690rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .ld {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 18rpx;
|
|
|
+ left: 55rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tongz {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ margin: 48rpx auto 0;
|
|
|
+ padding: 18rpx 30rpx 18rpx 24rpx;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .tongz-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tongz-left {
|
|
|
+ width: 640rpx;
|
|
|
+ .image-left {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+ .tongz-font {
|
|
|
+ margin-left: 22rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0f253a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tongz-right {
|
|
|
+ position: relative;
|
|
|
+ z-index: 11;
|
|
|
+ width: 12rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.good-wrapper {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ .good {
|
|
|
+ width: 681rpx;
|
|
|
+ height: 257rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 15rpx 0px rgba(10, 13, 47, 0.14);
|
|
|
+ border-radius: 14rpx;
|
|
|
+ margin: 0 auto 20rpx;
|
|
|
+ padding: 18rpx 19rpx 17rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .image-wrapper {
|
|
|
+ width: 222rpx;
|
|
|
+ height: 222rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ // background-color: red;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .good-info {
|
|
|
+ padding-left: 22rpx;
|
|
|
+ position: relative;
|
|
|
+ .info-title {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .info-price {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFC000;
|
|
|
+ line-height: 35px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|