<template> <view class="center"> <view class="topcontent padding-b-30"> <view class="top"> <view class="vheigh"></view> <view class="top-main flex"> <view class="search-box flex" @click="clickSearch()"> <image class="search" src="../../static/img/search.png" mode=""></image> <view class="search-font">输入关键词搜索</view> </view> </view> </view> <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 class="stre flex"> <view class="ic-text flex"> <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image> <view class="ic-wen">自用购物优惠</view> </view> <view class="ic-text flex"> <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image> <view class="ic-wen">分享好友赚钱</view> </view> <view class="ic-text flex"> <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image> <view class="ic-wen">超值正品优惠</view> </view> </view> <view class="zhishi flex"> <navigator url="/pages/index/artDetail?id=5"> <view class="zhishi-item"> <image class="zhishi-ic" src="../../static/icon/shou-tro.png" mode=""></image> <view class="zhishi-te">行业介绍</view> </view> </navigator> <navigator url="/pages/index/artDetail?id=6"> <view class="zhishi-item"> <image class="zhishi-ic" src="../../static/icon/shou-we.png" mode=""></image> <view class="zhishi-te">关于我们</view> </view> </navigator> <view class="zhishi-item" @click="openKf"> <image class="zhishi-ic" src="../../static/icon/shou-kefu.png" mode=""></image> <view class="zhishi-te">联系客服</view> </view> <navigator url="/pages/user/shareQrCode"> <view class="zhishi-item"> <image class="zhishi-ic" src="../../static/icon/firend.png" mode=""></image> <view class="zhishi-te">邀请好友</view> </view> </navigator> </view> <view class="tongz"> <view class="tongz-left flex padding-l-30"> <image class="image-left" src="../../static/icon/shou-gonggao.png" mode=""></image> <u-notice-bar class="notice" mode="vertical" type="none" :volume-icon="false" :more-icon="true" :list="text" @click="goDetails" @getMore="nav('/pages/index/message?type=1')"></u-notice-bar> </view> </view> <view class="product-list flex"> <template v-for="(item,ind) in dataList"> <view class="list-left" v-if="ind==0"> <navigator :url="`/pages/index/artDetail?id=${item.id}`"> <image class="imgleft" :src="item.image_input[0]" mode="scaleToFill"></image> </navigator> </view> </template> <view class="list-right flex" v-if="dataList.length>1"> <view class="item" v-for="(item,ind) in dataList" v-if="ind>0"> <navigator :url="`/pages/index/artDetail?id=${item.id}`"> <image class="imgleft" :src="item.image_input[0]" mode="scaleToFill"></image> </navigator> </view> </view> </view> </view> <view class="bottom-box margin-t-30"> <view class="bottom-title padding-b-30"> <image class="image" src="../../static/img/image-title.png" mode="scaleToFill"></image> </view> <swiper previous-margin='150rpx' next-margin='150rpx' class="product-art-list" circular autoplay duration="400" interval="5000" @change='changeBottom'> <swiper-item v-for="(item, index) in article" :key="index" class="product-art-item"> <navigator :url="`/pages/index/artDetail?id=${item.id}`"> <view class="image-box"> <image class="image" :src="item.image_input[0]" /> </view> </navigator> </swiper-item> </swiper> <view class="product-detail"> <text v-if="article.length>0"> {{article[actionArtInd].synopsis}} </text> </view> </view> <uni-popup ref="popupkf" type="center"> <view class="popup-box"> <view class="img"> <image src="../../static/img/img009.png" mode=""></image> </view> <view class="mian"> <view class="delivery"> <view class="title">已经为您定制专属客服</view> <image src="../../static/img/img010.png" mode=""></image> </view> <view class="nocancel">客服VX:{{ kefu }}</view> <view class="comfirm-box"> <view class="cancel" @click="cancel">取消</view> <view class="comfirm" @click="comfirm(kefu)">复制微信</view> </view> </view> </view> </uni-popup> <u-tabbar activeColor="#333333" inactive-color='#999999' v-model="current" :list="tabbar"></u-tabbar> </view> </template> <script> 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'; // #ifdef H5 // import { openMap } from '@/utils/rocessor.js'; // #endif import { auction_gu } from '@/api/hall.js'; import { mapState, mapMutations } from 'vuex'; export default { components: { seckill, uniCountdowns }, data() { return { current: 0, tabbar: tabbar1, longitude: '', //经度 latitude: '', //纬度 carouselList: [], //轮播图列表 text: [], //公告 article: [], //精品展示 dataList: [], //产品介绍 kefu: '', actionArtInd: 0, //默认选中的精品展示对象 }; }, onPullDownRefresh() { console.log('111'); this.loadData(); setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); }, onShow() { this.loadData(); }, methods: { ...mapMutations(['setLat', 'setLon', 'setChoose']), // 底部轮播图切换 changeBottom(res) { this.actionArtInd = res.detail.current; console.log(res); }, // 打开客服 openKf() { this.$refs.popupkf.open(); }, // 关闭客服 cancel() { this.$refs.popupkf.close(); }, loadData() { article({}, 1).then(({ data }) => { this.text = data.map((e) => { return e.synopsis }) }); // 精品展示 article({}, 2).then(({ data }) => { this.article = data.map((e) => { e.imageurl = e.image_input[0]; return e }) }); // 产品介绍 article({}, 3).then(({ data }) => { this.dataList = data.map((e) => { return e }) }); loadIndexs({}) .then(({ data }) => { let goods = data.info; // this.dataList = goods.bastList; //精品推荐 this.carouselList = data.banner; }) .catch(e => {}); }, out_of_china(lng, lat) { return lng < 72.004 || lng > 137.8347 || (lat < 0.8293 || lat > 55.8271 || false); }, toBack() { uni.navigateTo({ url: '/pages/navigation/index' }) }, goDetails(e) { uni.navigateTo({ url: '/pages/index/messageInfo?id=' + this.article[e].id }); }, nav(url) { console.log(url, '123456'); uni.navigateTo({ url, fail() { uni.switchTab({ url }); } }); }, // 點擊搜索框 clickSearch() { uni.navigateTo({ url: '/pages/product/search' }); }, navTo(item) { uni.navigateTo({ url: '/pages/hall/halllist?id=' + item.id + '&name=' + item.name + '&peoplename=' + item .nickname }); }, //详情页 navToDetailPage(item) { let id = item.id; uni.navigateTo({ url: '/pages/product/product?id=' + id }); } } }; </script> <style lang="scss"> .center { padding-bottom: 30rpx; } .topcontent { background-color: #FFFFFF; } .vheigh { height: var(--status-bar-height); background-color: $base-color; } .top { position: relative; width: 100%; height: 120rpx; .top-main { position: relative; z-index: 2; padding: 30rpx; .search-box { justify-content: center; width: 698rpx; height: 60rpx; background: rgba(255, 240, 245, 0.4); border-radius: 30rpx; background-color: #EEEEEE; .search { width: 34rpx; height: 34rpx; } .search-font { margin-left: 14rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #CBCBCB; } } } } .carousel { width: 750rpx; height: 360rpx; /* #ifndef APP-PLUS */ // margin: -230rpx auto 0; // margin: -160rpx auto 0; /* #endif */ /* #ifdef APP-PLUS */ // margin: -100rpx auto 0; /* #endif */ image { width: 100%; height: 100%; } } .stre { padding: 0 30rpx; margin-top:20rpx ; .ic-text { .ic-tubiao { width: 27rpx; height: 27rpx; } .ic-wen { font-size: 21rpx; color: #333333; } } } .zhishi { padding: 30rpx; .zhishi-item { .zhishi-ic { width: 90rpx; height: 90rpx; } .zhishi-te { font-size: 24rpx; color: #666666; } } } .tongz { height: 70rpx; margin: 0 30rpx 30rpx 30rpx; border-radius: 20rpx; overflow: hidden; align-items: center; position: relative; background-color: #F8F8FA; .tongz-left { .notice { flex-grow: 1; } .image-left { width: 28rpx; height: 28rpx; } .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%; } } } .popup-box { width: 522rpx; height: 605rpx; background-color: #ffffff; border-radius: 20rpx; position: relative; .img { position: relative; top: -56rpx; left: 0; width: 522rpx; height: 132rpx; display: flex; justify-content: center; image { border-radius: 20rpx 20rpx 0 0; width: 450rpx; height: 132rpx; } } .mian { margin-top: -44rpx; display: flex; flex-direction: column; align-items: center; // padding: 32rpx 32rpx; background-color: #ffffff; border-radius: 0 0 20rpx 20rpx; text-align: center; .delivery { font-size: 40rpx; color: #333333; display: flex; align-items: center; flex-direction: column; .title {} image { margin-top: 48rpx; width: 172rpx; height: 160rpx; } } .nocancel { font-size: 32rpx; color: #333333; margin-top: 14rpx; } .comfirm-box { margin-top: 52rpx; display: flex; // margin-bottom: 32rpx; // justify-content: space-around; .cancel { display: flex; align-items: center; justify-content: center; width: 197rpx; height: 74rpx; border: 1px solid #dcc786; border-radius: 38rpx; font-size: 32rpx; color: #605128; } .comfirm { margin-left: 32rpx; display: flex; align-items: center; justify-content: center; width: 197rpx; height: 74rpx; background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%); border-radius: 38px; font-size: 32rpx; color: #605128; } } } } .product-list { padding: 0 30rpx; line-height: 0; align-items: stretch; .list-left { .imgleft { width: 306rpx; height: 319rpx; } } .list-right { flex-direction: column; .imgleft { width: 366rpx; height: 152rpx; } } } .bottom-box { padding: 30rpx 0; background-color: #FFFFFF; .bottom-title { text-align: center; .image { width: 609rpx; height: 31rpx; } } .product-art-list { height: 432rpx; .product-art-item { .image-box { text-align: center; .image { width: 432rpx; height: 432rpx; } } } } .product-detail { margin: 30rpx; height: 4em; overflow: hidden; text-indent: 2em; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } } </style>