<template> <view class="container"> <view class="carousel-section"> <!-- 背景色区域 --> <view class="bg"></view> <!-- 标题栏和状态栏占位符 --> <view class="titleNview-placing"></view> <!-- 搜素栏 --> <view class="search flex"> <view class="input-box flex" @click.stop="clickSearch"> <view class=" input-content flex"> <view class="iconfont iconsearch"></view> <view class="input"><input type="text" disabled value="好物从搜索开始" /></view> </view> </view> </view> <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange" :indicator-dots="true" indicator-active-color="#FFFFFF"> <!-- <swiper class="carousel" autoplay="true" duration="400" interval="5000"> --> <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"> <image :src="item.pic" mode="aspectFill" @click="bannerNavToUrl(item)"></image> </swiper-item> </swiper> </view> <view class="navbar"> <view class="navbar-box flex"> <view class="navbar-item" @click="navTo('/pages/product/list')"> <image class="nitem-image" src="../../static/sy/sy12.png" mode=""></image> <view class="nitem-font">全部分类</view> </view> <view class="navbar-item" @click="navTo('/pages/index/vipShop')"> <image class="nitem-image" src="../../static/sy/sy14.png" mode=""></image> <view class="nitem-font">超值拼团</view> </view> <view class="navbar-item" @click="navTo('')"> <image class="nitem-image" src="../../static/sy/sy15.png" mode=""></image> <view class="nitem-font">公司介绍</view> </view> <view class="navbar-item" @click="navTo('/pages/user/shareQrCode')"> <image class="nitem-image" src="../../static/sy/sy13.png" mode=""></image> <view class="nitem-font">邀请有礼</view> </view> </view> </view> <seckill></seckill> <view class=" jx"> <view class="jx-box"> <view class="jx-box-title"> <image src="../../static/sy/sy03.png" mode=""></image> </view> <view class="jx-box-img"> <image src="../../static/sy/sy09.png" mode=""></image> </view> </view> <view class="jx-box-content" v-for="item in vipList" @click="navToDetailPage(item)"> <view class="content-left"> <image :src=item.image mode=""></image> </view> <view class="content-right"> <view class="shop-name"> {{item.store_name}} </view> <view class="shop-content"> <view class="shop-content-left"> <view class="price-box"> <view class="yuan-price"> 原价{{item.ot_price}} </view> <image src="../../static/sy/sy06.png" mode=""></image> <view class="j-price"> 直降{{item.ot_price*1-item.price*1}}元 </view> </view> <view class="price-x"> ¥{{item.price}} </view> </view> <view class="shop-content-right"> 立即购买 </view> </view> </view> </view> <view class="cai" @click="navTo('/pages/index/vipShop')"> 查看更多<span style="margin-left: 5rpx;">></span> </view> </view> <view class="product-box"> <view class="product-title"> <view class="bb"> </view> <view class="pt-title">猜你喜欢</view> <view class="bb"> </view> </view> <view class="hotgoods"> <view class="hotgoods-item" v-for="item in firstList" :key="item.id" @click="navToDetailPage(item)"> <view class="image-wrapper"> <image class="image" :src="item.image" mode="scaleToFill"></image> </view> <view class="hotgoods-box"> <view class="title clamp2">{{ item.store_name }}</view> <view class="titlee">{{ item.store_name }}</view> </view> <view class="hot-price"> <!-- <view class="hotPrice-box">会员价</view> --> <view class="price"> <text class="font-size-sm">¥</text> {{ item.price * 1 }} </view> <view class="yuanPrice">原价{{ item.price }}</view> </view> </view> </view> </view> <!-- <u-tabbar activeColor="#434A54" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar> --> </view> </template> <script> import { shareFun } from '@/utils/wxAuthorized.js' import { lookSubpoints, lookOneself } from '../../api/user.js'; import seckill from '../../components/seckill/seckill.vue'; import { loadIndexs, getVip, db } from '@/api/index.js'; import { getUserInfo, spread } from '@/api/user.js'; import { setCoupons } from '@/api/functionalUnit.js'; import { getBargainList } from '@/api/product.js'; import { interceptor } from '@/utils/loginUtils'; import { mapState, mapMutations } from 'vuex'; import { tabbar } from '@/utils/tabbar.js'; // #ifdef H5 import { weixindata, shareLoad } from '@/utils/wxAuthorized'; // #endif export default { components: { seckill }, data() { return { // isDa:true, tabbar: tabbar, current: 0, shareShow: false, //分享海报 pageProportion: 0, //保存页面基于750宽度的比例 swiperHeight: 0, checkid: 0, titleNViewBackground: '', longitude: 0, //经度 latitude: 0, //纬度 swiperCurrent: 0, swiperLength: 0, carouselList: [], //轮播列表 bastList: [], //会员礼包 shoplist: [], //商店列表 page: 1, limit: 5, vipList: [], //vip商品 firstList: [], }; }, computed: { ...mapState(['loginInterceptor', 'baseURL']), ...mapState('user', ['hasLogin', 'userInfo']) }, onLoad: function(option) { if (option.spread) { console.log(option.spread, "邀请人2") uni.setStorageSync('puid', option.spread) } // #ifdef H5 this.IndexShare(); //#endif }, onShow: function() { let uid = uni.getStorageSync('sid'); if (uid) { spread({ puid: uid }).then(res => { console.log(res); }) } getVip({ page: 1, limit: 3, is_vip: 3 }).then(res => { this.vipList = res.data res.data.forEach(e => { e.isVip = e.store_type ? "3" : "0" }) console.log(res.data, 'vip商品'); }) // 判断是否强制登录 if (!this.hasLogin) { // 登录拦截 interceptor(); } this.loadData(); this.getBargainList(); }, //下拉刷新 onPullDownRefresh() { this.loadData(); }, // #ifndef MP // 监听导航栏输入框点击事件 onNavigationBarSearchInputClicked(e) { //跳转到搜索页面 this.clickSearch(); }, //点击导航栏 buttons 时触发 onNavigationBarButtonTap(e) { const index = e.index; if (index === 0) { this.$api.msg('点击了扫描'); } else if (index === 1) { // #ifdef APP-PLUS const pages = getCurrentPages(); const page = pages[pages.length - 1]; const currentWebview = page.$getAppWebview(); currentWebview.hideTitleNViewButtonRedDot({ index }); // #endif uni.navigateTo({ url: '/pages/user/notice' }); } }, // #endif methods: { ...mapMutations(['setLat', 'setLon']), // #ifdef H5 IndexShare() { let obj = this; let pages = getCurrentPages(); // 获取当前页面 let page = pages[pages.length - 1]; let path = '#/' + page.route + '?'; // 保存传值 for (let i in page.options) { path += i + '=' + page.options[i] + '&'; } console.log(obj.Path); // 保存邀请人 path += 'spread=' + this.userInfo.uid; let data = { link: this.baseURL + '/index/' + path, title: this.userInfo.nickname + '邀请您进入玲卿+', desc: '欢迎加入玲卿+', imgUrl: 'https://hy.liuniu946.com/index/static/img/logo.jpg' }; console.log(data, '分享数据'); shareLoad(data); }, // #endif getaddress() { console.log('dizhi+++++++++++'); let obj = this; weixindata().then(wxOjb => { console.log(wxOjb, '获取微信'); wxOjb.getLocation({ type: 'gcj02', success: res => { console.log(res, 123456); obj.setLat(res.latitude); obj.setLon(res.longitude); }, fail: err => { console.log(err, 'shi+++++++++++++++'); openMap().then(e => { this.getaddress(); }); } }); }); }, //砍价商品推荐详情页 navToDetailPages(item) { let id = item.product_id; //let type = 2; uni.navigateTo({ url: '/pages/product/product?id=' + id }); }, navTo(url) { if (url == '') { this.$api.msg('暂未开通,敬请期待'); } else { uni.navigateTo({ url }); } }, openSubscribe: function(e) { let page = e; // #ifndef MP uni.navigateTo({ url: page }); // #endif // #ifdef MP uni.showLoading({ title: '正在加载' }); openBargainSubscribe() .then(res => { uni.hideLoading(); uni.navigateTo({ url: page }); }) .catch(err => { uni.hideLoading(); }); // #endif }, getBargainList() { let that = this; getBargainList({ page: that.page, limit: that.limit }) .then(function(res) { // that.$set(that, 'bargainlist', res.data.slice(0, 2)); }) .catch(res => { console.log(res, 'getBargainList'); }); }, Mask() { this.MaskShow = false; this.shareShow = true; uni.setStorage({ key: 'FirstEntry', data: true, success: function() { console.log(uni.getStorageSync('FirstEntry'), 'Mask'); } }); }, Toshare() { if (this.userInfo == '') { getUserInfo({}) .then(({ data }) => { this.setUserInfo(data); this.userInfo = data; }) .catch(e => {}); } else { this.shareShow = false; uni.navigateTo({ url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid }); } }, Tocancel() { this.shareShow = false; }, // 监听切换事件 listChange(e) { this.checkid = e.detail.current; }, // 點擊搜索框 clickSearch() { uni.navigateTo({ url: '/pages/product/search' }); }, // 点击触发领取优惠券 setCoupons(item) { // 判断是否已经领取了优惠券 let obj = this; uni.showModal({ title: '领取提示', content: '是否领取优惠券', success(e) { if (e.confirm) { setCoupons({ couponId: item.id }).then(e => { item.is_use = true; uni.showToast({ title: '领取成功', type: 'top', duration: 2000 }); }); } } }); }, //商品种类切换 change(item) { let id = item; this.checkid = id; if (this.checkid == 1) { // console.log(1); this.detail = this.selected_detail; } else if (this.checkid == 2) { // console.log(2); this.detail = this.new_product; } else { this.detail = this.cheap_good; } }, // 监听图片加载完成 onImageError(key, index) { this[key][index].image = '/static/error/errorImage.jpg'; }, // 请求载入数据 async loadData() { loadIndexs({}) .then(({ data }) => { let goods = data.info; console.log(goods, '商品信息'); this.carouselList = data.banner; this.swiperLength = this.carouselList.length; this.bastList = data.giftInfo; //会员礼包 data.info.firstList.forEach(e => { e.isVip = e.store_type ? "3" : "0" }) this.firstList = data.info.firstList //首页商品 uni.stopPullDownRefresh(); }) .catch(e => { uni.stopPullDownRefresh(); }); }, //轮播图切换修改背景色 swiperChange(e) { const index = e.detail.current; this.swiperCurrent = index; this.titleNViewBackground = this.carouselList[index].background; }, //详情页 navToDetailPage(item) { let id = item.id; uni.navigateTo({ url: '/pages/product/product?id=' + id + '&isVip=' + item.isVip }); }, // 轮播图跳转 bannerNavToUrl(item) { // #ifdef H5 console.log(item.wap_url.indexOf('http'), 'banner'); if (item.wap_url.indexOf('http') >= 0) { window.location.href = item.wap_url; } // #endif //测试数据没有写id,用title代替 uni.navigateTo({ url: item.wap_url }); } } }; </script> <style lang="scss"> page { background: #EEEFEE; } .carousel-section { position: relative; padding-top: 10px; .bg { position: absolute; top: 0; left: 0; width: 750rpx; height: 378rpx; image { width: 100%; height: 100%; } } .titleNview-placing { height: var(--status-bar-height); box-sizing: content-box; } .search { margin-bottom: 12rpx; background-color: #eec185; justify-content: flex-start; padding: 10rpx 32rpx 20rpx; align-items: center; .address { width: 32rpx; height: 38rpx; } .shop-name { height: 38rpx; position: relative; top: -4rpx; z-index: 100; font-size: 30rpx; font-family: PingFang SC; font-weight: 500; padding-left: 10rpx; } .shop-jt { margin-left: 8rpx; width: 16rpx; height: 10rpx; } .input-box { margin-left: 10rpx; position: relative; z-index: 99; width: 710rpx; height: 60rpx; background: #EEEEEE; border-radius: 30rpx; .input-content { position: relative; z-index: 11; border-radius: 99rpx; flex-grow: 1; padding: 5rpx 30rpx; background: #EEEEEE; .iconsearch { font-size: 50rpx; color: #CBCBCB; } .input { margin-left: 19rpx; flex-grow: 1; color: #CBCBCB; input { font-size: 28rpx; color: #CBCBCB; } } } .input-button { padding-left: 20rpx; font-size: $font-base; height: 100%; } } } } .carousel { position: relative; z-index: 3; width: 100%; height: 360rpx; .carousel-item { width: 100%; height: 100%; padding: 0 28rpx; overflow: hidden; } image { width: 100%; height: 100%; border-radius: $border-radius-sm; } } .navbar { position: relative; z-index: 2; padding: 0 50rpx; margin-top: -200rpx; width: 750rpx; height: 420rpx; background: #ffffff; border-radius: 40rpx; .navbar-box { padding-top: 250rpx; .navbar-item { display: flex; flex-direction: column; align-items: center; width: 20%; .nitem-image { width: 90rpx; height: 90rpx; } .nitem-font { margin-top: 22rpx; font-size: 26rpx; font-family: PingFang SC; font-weight: 500; color: #000000; } } } } .jx { background: #fff; width: 750rpx; } .jx-box { background: #fff; display: flex; flex-direction: column; align-items: center; width: 750rpx; .jx-box-title { margin: 50rpx 0; width: 610rpx; height: 30rpx; image { width: 100%; height: 100%; } } .jx-box-img { width: 750rpx; height: 220rpx; image { width: 100%; height: 100%; } } } .cai { display: flex; justify-content: center; align-items: center; padding-bottom: 20rpx; font-size: 28rpx; font-weight: 500; color: #999999; } .jx-box-content { display: flex; .content-left { margin: 20rpx 15rpx; width: 236rpx; height: 236rpx; background: #E2E2E2; border-radius: 10rpx; image { width: 100%; height: 100%; } } .content-right { display: flex; flex-direction: column; justify-content: space-around; .shop-name { width: 382rpx; font-size: 32rpx; font-weight: bold; color: #333333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .shop-content { width: 455rpx; display: flex; justify-content: space-between; .shop-content-left { display: flex; flex-direction: column; .price-box { display: flex; align-items: center; .yuan-price { font-size: 26rpx; font-weight: 500; text-decoration: line-through; color: #999999; } image { margin: 0 10rpx; width: 16rpx; height: 18rpx; } .j-price { font-size: 24rpx; font-weight: bold; color: #B59467; } } .price-x { font-size: 36rpx; font-weight: bold; color: #FF4C4C; } } .shop-content-right { margin-top: 20rpx; align-items: center; text-align: center; width: 137rpx; height: 52rpx; font-size: 26rpx; font-weight: 500; color: #F8DABA; background: #303030; border-radius: 26rpx; line-height: 52rpx; } } } } .product-box { margin-top: 20rpx; background: #ffffff; padding: 26rpx 30rpx 20rpx; .product-title { display: flex; align-items: center; justify-content: center; .pt-image { width: 36rpx; height: 36rpx; } .bb { width: 120rpx; height: 1rpx; background: #989898; } .pt-title { margin: 0 28rpx; font-size: 30rpx; font-weight: 500; color: #363636; } .pt-tip { margin-left: 16rpx; font-size: 20rpx; font-family: PingFang SC; font-weight: bold; color: #95a0b1; } } .hotgoods { margin-top: 38rpx; width: 100%; display: flex; flex-wrap: wrap; padding: 0 0 30rpx; .hotgoods-item { width: 44%; background: #FFFFFF; margin: 20rpx; box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06); border-radius: 10px; .image-wrapper { width: 100%; height: 330rpx; border-radius: 3px; overflow: hidden; position: relative; .image-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 1; border-radius: 12rpx 12rpx 0 0; z-index: 2; } .image { width: 100%; height: 100%; opacity: 1; border-radius: 12rpx 12rpx 0 0; } } .title { margin-top: 20rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #333333; } .hotgoods-box { height: 100rpx; } .titlee { margin-left: 15rpx; font-size: 26rpx; font-weight: 500; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hot-price { display: flex; justify-content: flex-start; align-items: center; padding: 14rpx 0 30rpx; .hotPrice-box { width: 70rpx; height: 28rpx; background: linear-gradient(90deg, #c79a4c, #f9df7f); border-radius: 5rpx; text-align: center; line-height: 28rpx; font-size: 20rpx; font-weight: 400; color: #ffffff; } .price { margin-left: 10rpx; font-size: 36rpx; color: #ff0000; font-weight: 500; } .yuanPrice { margin-left: 10rpx; font-size: 20rpx; font-family: PingFang SC; font-weight: 500; text-decoration: line-through; color: #999999; } .cart-icon { image { width: 44rpx; height: 44rpx; } } } } } } .shop { margin-top: 20rpx; background: #ffffff; padding: 0 12rpx; .shop-title { padding: 30rpx 0 20rpx; display: flex; align-items: center; border-bottom: 1px solid #e3e6e7; .shop-item { width: 25%; display: flex; align-items: center; justify-content: center; .sitem-font { font-size: 26rpx; font-family: PingFang SC; font-weight: bold; color: #333333; } .jt-down { width: 10rpx; height: 8rpx; margin-left: 12rpx; } } } } .shop-main { padding: 32rpx 18rpx 0 12rpx; align-items: flex-start; justify-content: flex-start; .main-left { width: 180rpx; height: 180rpx; border-radius: 10rpx; } .main-right { width: 500rpx; justify-content: space-between; align-items: flex-start; margin-left: 20rpx; padding: 13rpx 0 35rpx; border-bottom: 1px solid #eaeced; .shopm-info { max-width: 60%; line-height: 1; .shopm-title { display: flex; justify-content: flex-start; .shopmt-font { font-size: 34rpx; font-family: PingFang SC; font-weight: bold; color: #333333; } .shopmt-good { margin-left: 6rpx; width: 30rpx; height: 30rpx; border: 1px solid #ff4c4c; border-radius: 5rpx; font-size: 20rpx; font-family: PingFang SC; font-weight: 500; color: #ff4c4c; text-align: center; line-height: 30rpx; } } .address { margin-top: 16rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #666666; } .shopmt-tip { position: relative; display: inline-block; flex-grow: 0; margin-top: 52rpx; padding: 8rpx; background: #fcf3f0; border-radius: 16rpx 16rpx 16rpx 0px; font-size: 20rpx; font-family: PingFang SC; font-weight: 500; color: #ff440d; } } .right { height: 100%; margin-top: 5rpx; display: flex; flex-direction: column; .mright-top { display: flex; justify-content: flex-end; align-items: center; .mrt-image { width: 20rpx; height: 28rpx; } .mrt-font { margin-left: 8rpx; font-size: 22rpx; font-family: PingFang SC; font-weight: 500; color: #666666; } } .mright-bottom { margin-top: 80rpx; display: flex; justify-content: flex-end; .mrb-item { width: 46rpx; height: 46rpx; margin-left: 14rpx; } } } } } </style>