<template> <view class="index"> <view class="navbarContent"> <u-navbar :is-back="false" title="" :background="background" :border-bottom="false"> <image :src="$picUrl+'/static/index/logo.png'" mode="heightFix" class="logo"></image> <view class="slot-wrap"> <u-subsection active-color="#FB213D" inactive-color="#000000" height="60" @change="changeHome" :bold="false" button-color="#fff" :list="list" :current="current"></u-subsection> </view> </u-navbar> </view> <view class="searchContentContainer"> <view class="searchContent" @click="search"> <view class="btn"> 搜索 </view> <u-search shape="round" :disabled="true" placeholder="iPhone 15" bg-color="#ffffff" :show-action="false"></u-search> </view> <template v-if="current == 0"> <view class="chat" v-if="isLogin == false" @click="toChat()"> <u-icon name="chat" color="#000000" size="70"></u-icon> <!-- <view class="badge"></view> --> </view> <view class="chat" v-else> <u-icon name="chat" color="#000000" size="70"></u-icon> <button open-type="contact"></button> </view> </template> </view> <view v-show="current==0"> <view class="tabs"> <view :class="tabCurrent==index?'tabItem active':'tabItem'" @click="changeGoodsType(index)" v-for="(item,index) in tabList" :key="index"> {{item.name}} <view class="flag" v-if="tabCurrent==index" > <image :src="$picUrl+'/static/index/line.png'"></image> </view> </view> <!-- <u-tabs :list="tabList" name="name" font-size="28" active-color="#F6393D" :show-bar="true" @change="changeGoodsType" inactive-color="#282828" bg-color="transparent" :is-scroll="true" :current="tabCurrent"></u-tabs> --> </view> <view class="main"> <view class="picContainer"> <u-swiper :list="bannerList" height="196" img-mode="heightFix" @click="gotoDetail"></u-swiper> </view> <view class="grid"> <view class="gridRows"> <view class="gridItem" v-for="(item,index) in gridList" @click="goPage(item.path,item.type)" :key="index"> <view class="imageC"> <image :src="item.image"></image> </view> <text>{{item.text}}</text> </view> </view> <view class="gridRows secondRows" :style="{'height': isToggle == false?'160rpx':'auto'}"> <view class="gridItem" v-for="(item,index) in catagoryList" :key="index" @click="goJump('/pages/goods/list?categoryId=' + item.category_id)"> <view class="imageC"> <image :src="item.image?item.image.external_url:''"></image> </view> <text>{{item.name}}</text> </view> </view> <!-- / v-if="" --> <view class="more" @click="toggleItem()" v-if="gridList.length + catagoryList.length >= 11"> {{isToggle == false?'查看更多':'点击收起'}} <u-icon v-if="isToggle == false" style="margin-left: 10rpx;" name="arrow-down"></u-icon> <u-icon v-else style="margin-left: 10rpx;" name="arrow-up"></u-icon> </view> </view> <view class="firstContent" @click="goNewUser"> <image :src="$picUrl+'/static/index/new.png'" class="firstBg"></image> <view class="firstInfo"> <view class="fTitle"> <image :src="$picUrl+'/static/index/xinren.png'" class="firstTitle"></image> <!-- <text></text> --> </view> <view class="couponInfo"> <view class="left"> <text class="flag">¥</text> <text class="num">{{couList.reduce_price}}</text> <view class="couponName"> <view>{{couList.name}}</view> <view style="font-size: 20rpx;">领取后{{couList.expire_day}}天内有效</view> </view> </view> <!-- <view class="line"> </view> --> <view class="lingqu"> <!-- <view class="lqBtn">去领取</view> --> </view> </view> </view> </view> <view class="dapai"> <!-- <image src="/static/index/dapaibg.png" mode="widthFix" class="dapaibg"></image> --> <view class="dapaiBox"> <view class="dapaiTitle"> <image :src="$picUrl+'/static/index/dapai.png'" mode="widthFix"></image> <view class="goods"> <image :src="$picUrl+'/static/index/diannei.png'" mode="widthFix"></image> <view>店内现货</view> </view> </view> <view class="more" @click="goJump('/pages/user/vip/goods')">查看更多<u-icon style="margin-left:10rpx;" name="arrow-right"></u-icon></view> <view class="dapaiContent" @click="goBigGoods" v-if="dapaiList.length>0"> <view class="dapaiItem" v-for="(item,index) in dapaiList" :key="index" @click="goJump('/pages/goods/detail?goodsId=' + item.goods_id)"> <view class="picContent"> <image :src="item.goods_image"></image> </view> <view class="priceBox"> <image :src="$picUrl+'/static/index/price.png'"></image> <view><text>¥</text>{{item.goods_price_min}}</view> </view> <view class="name"> {{item.goods_name}} </view> </view> </view> </view> </view> <view class="qianggou" v-if="seckillList.length>0"> <view class="title" @click="seckill"> <image :src="$picUrl+'/static/index/limitBuy.png'" mode="widthFix"></image> <view class="more">查看更多<u-icon style="margin-left:10rpx;" name="arrow-right"></u-icon></view> <view class="rest"> <text>本场剩余</text> <u-count-down :timestamp="seckillCutDownTime" format="HH:mm:ss" autoStart @change="onChangeSeckillCutDownTime"> <view class="date-time"> <text class="time">{{timeData.hours>=10?timeData.hours:"0"+Number(timeData.hours)}}</text> <text class="da">:</text> <text class="time">{{timeData.minutes>=10?timeData.minutes:"0"+Number(timeData.minutes)}}</text> <text class="da">:</text> <text class="time">{{timeData.seconds>=10?timeData.seconds:"0"+Number(timeData.seconds)}}</text> </view> </u-count-down> </view> </view> <view class="goods-list"> <view class="list" v-for="(item, index) in seckillList" :key="index" @click="goJump('/pages/goods/detail?goodsId=' + item.goods_id)"> <view class="pictrue"> <image :src="item.goods_image"></image> </view> <view class="price"> <view class="tip"> <image :src="$picUrl+'/static/index/tip.png'"></image> <view class="tipPrice"> <text style="font-size: 20rpx;">¥</text> <text>{{item.seckill_price_min}}</text> </view> </view> <view class="linePrice"> <text>¥</text>{{item.seckill_price_max}} </view> </view> </view> </view> </view> <view class="activity"> <view class="left" @click="goNews"> <image :src="$picUrl+'/static/index/activity.png'" mode="widthFix"></image> </view> <view class="right"> <!-- <view class="rightContent"> --> <view class="rightItem1"> <view style="margin-bottom: 10rpx;"> <image :src="$picUrl+'/static/index/xinpin.png'" mode="widthFix" @click="goNewGoods" class="title"></image> <view class="more" @click="goNewGoods">查看更多<u-icon name="arrow-right"></u-icon></view> <scroll-view scroll-x="true"> <view class="right1Good"> <view class="right1Item" v-for="(item,index) in xinpinList" :key="index" @click="goJump('/pages/goods/detail?goodsId=' + item.goods_id)"> <image :src="item.goods_image"></image> <view class="priceBox"> <image :src="$picUrl+'/static/index/price.png'" mode="heightFix"></image> <view><text>¥</text>{{item.goods_price_min}}</view> </view> </view> </view> </scroll-view> </view> </view> <view class="rightItem2"> <view style="margin-bottom: 10rpx;"> <image :src="$picUrl+'/static/index/paihangbang.png'" mode="widthFix" @click="rankIng" class="title"></image> <view class="more" @click="rankIng">查看更多<u-icon name="arrow-right"></u-icon></view> <view class="right1Good"> <view class="right1Item" v-for="(item,index) in paihangList" :key="index" @click="goJump('/pages/goods/detail?goodsId=' + item.goods_id)"> <image :src="item.goods_image"></image> <view class="priceBox"> <image :src="$picUrl+'/static/index/price.png'" mode="heightFix"></image> <view><text>¥</text>{{item.goods_price_min}}</view> </view> </view> </view> </view> </view> <!-- </view> --> </view> </view> <view class="goodsRecommend"> <view class="goodsItem" v-for="(item,index) in goodsRecommend" @click="goDetails(item)" :key="index"> <view class="pic"> <image :src="item.goods_image" mode=""></image> </view> <view class="goodsInfo"> <view class="title"> <text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text> <text class="name">{{item.goods_name}}</text> </view> <view class="isExpress"> <text>包邮</text> </view> <view class="price"> <text style="font-size: 20rpx;">¥</text> <text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_max}}</text> <text style="font-size: 20rpx;margin-left:10rpx;">到手价</text> <text style="color: #949494;font-size: 22rpx;text-decoration: line-through;">¥{{item.line_price_max}}</text> </view> <view class="comment"> <text>{{item.goods_sales}}条评论</text> <text style="margin-left:20rpx;">{{item.remaizhishu}}%好评率</text> </view> </view> </view> </view> </view> </view> <view v-show="current==1"> <view class="secondSection"> <image class="shopImage" :src="cityInfo.imageList?cityInfo.imageList[0]:''"></image> <view class="content"> <view class="topcontent"> <view class="shopTitle"> <text class="title">{{cityInfo.shop_name}}</text> <text class="shopStatus">营业中</text> </view> <view class="rate"> <u-rate :count="5" inactive-color="#818181" active-color="#FA8C3D" v-model="cityInfo.star"></u-rate> <text>{{cityInfo.star}}</text> </view> <view class="time"> 营业时间:{{cityInfo.shop_hours}} </view> <view class="tags"> <view class="tagsItem" v-for="(item,index) in cityInfo.remark" :key="index"> {{item}} </view> </view> <view class="zixun"> <view class="zixunItem" @click="openWx()"> <image src="/static/user/weChat.png" mode="widthFix" class="weChat"></image> <view class="askText"> 咨询 </view> </view> <view class="zixunItem" style="margin-left:42rpx;" @click="callPhone"> <image :src="$picUrl+'/static/home/ph.png'" mode="widthFix" class="weChat"></image> <view class="askText"> 电话 </view> </view> </view> </view> <view class="shopAddress"> <view class="address"> <view class="ad" @click="openMap()"> <view class="addrTextFirst"> {{cityInfo.address}} </view> <u-icon name="arrow-right"></u-icon> </view> <view class="adInfo" @click="openMap()"> <u-icon name="map-fill" style="font-size: 30rpx;"></u-icon> <view class="addrText"> {{cityInfo.full_address}} </view> </view> </view> <view class="pCar" @click="goJump('/pages/news/park/index')"> <image :src="$picUrl+'/static/home/p.png'" mode="widthFix" class="p"></image> <view class="car"> 附近停车场 </view> </view> </view> </view> <view class="diannei"> <view class="dianneiTitle"> <text>店内现货</text> <view class="lookMore" @click="goJump('/pages/user/vip/goods')"> 查看更多 <u-icon name="arrow-right" color="#909090"></u-icon> </view> </view> <scroll-view class="dianneiContent" scroll-x="true" style="height: 164rpx;"> <view class="dianneiItem" v-for="(item,index) in dapaiList" :key="index" @click="goJump('/pages/goods/detail?goodsId=' + item.goods_id)" > <image :src="item.goods_image"></image> <view class="itemTitle"> {{item.goods_name}} </view> </view> <!-- <view class="dianneiContent"> </view> --> </scroll-view> </view> <view class="diannei"> <view class="dianneiTitle" @click="goJump('/pages/activity/intimate')"> <text>同城服务</text> <view class="lookMore"> 查看更多 <u-icon name="arrow-right" color="#909090"></u-icon> </view> </view> <scroll-view class="serviceConent" scroll-x="true" style="height: 260rpx;"> <!-- <view class="serviceConent"> --> <view class="serviceItem" v-for="(item,index) in serveList" :key="index" @click="openServe(index)"> <image :src="item.image_url" mode=""></image> <view class="itemTitle"> {{item.name}} </view> </view> <!-- </view> --> </scroll-view> </view> <view class="comment"> <view class="commentTitle"> <text>门店评价({{cityInfo.evaluate?cityInfo.evaluate.length:''}})</text> <view class="lookMore" @click="openPinlun()"> 查看更多 <u-icon name="arrow-right" color="#909090"></u-icon> </view> </view> <view class="commentItem" v-for="(a,i) in cityInfo.evaluate" :key="i"> <view class="left"> <view class="commentAvatar"> <image :src="a.image" mode=""></image> <text>{{a.nickname}}</text> </view> <view class="commentText"> {{a.content}} </view> </view> <!-- <view class="right"> <image :src="$picUrl+'/static/index/goods.png'" mode=""></image> </view> --> </view> <view class="commentTitle" style="padding:26rpx 0 16rpx 0;" @click="goJump('/pages/news/consult/store')"> <text>门店相册</text> <view class="lookMore"> <u-icon name="arrow-right" color="#909090"></u-icon> </view> </view> <scroll-view scroll-x="true" style="height: 130rpx;"> <view class="commentContent"> <view class="serviceItem" v-for="(item,index) in cityInfo.imageList" :key="index" @click="previewImage(index)"> <image :src="item"></image> </view> </view> </scroll-view> </view> <view class="history"> <view class="title"> 门店历史 </view> <u-time-line> <u-time-line-item nodeTop="6" v-for="(a,i) in cityInfo.history" :key="i" style="display: flex;"> <!-- 此处自定义了左边内容,用一个图标替代 --> <template v-slot:node> <view class="u-node"> <view class="point"> </view> </view> </template> <template v-slot:content> <view style="margin-bottom:26rpx"> <view class="u-order-title" style="margin-top:10rpx">{{a.time}}</view> <view class="u-order-desc"> {{a.contenmt}} </view> </view> </template> </u-time-line-item> <!-- <u-time-line-item nodeTop="6" style="display: flex;"> <template v-slot:node> <view class="u-node"> <view class="point"> </view> </view> </template> <template v-slot:content> <view style="margin-bottom:26rpx;"> <view class="u-order-title">2023年07月01日</view> <view class="u-order-desc"> YNk 121于盘江西路瀑布公园旁盛大开业,致力于 带来更多优质商品和服务,为附近的客户朋友提供 便捷的购物。 </view> </view> </template> </u-time-line-item> --> </u-time-line> </view> </view> </view> <view class="toTop" v-if="isTop" @click="openScrollTo()"> <image :src="$picUrl+'/static/toTop.png'"></image> </view> </view> </template> <script> import * as GoodsApi from '@/api/home/index.js'; import * as limit from '@/api/sharp/home.js'; import * as Api from '@/api/goods' import * as activity from '@/api/activity' import * as newFunApi from '@/api/newFun' export default{ data(){ return{ isLogin: false, isTop: false, // background: { // backgroundColor: 'transparent', // }, background: { background: 'url(https://www.royaum.com.cn/static/index/index-bg.png) center top no-repeat', backgroundSize: '100% auto', }, list: [ {name: '首页'}, {name: '同城送'} ], current: 0, tabList:[], tabCurrent:0, swiperList:[`${this.$picUrl}/static/index/guanggao.png`], gridList:[ {image:`${this.$picUrl}/static/index/g1.png`,text:"预售专区",path:'/pages/activity/presale',type:2}, {image:`${this.$picUrl}/static/index/g2.png`,text:"邀请有礼",path:'/pages/invite/index',type:1}, {image:`${this.$picUrl}/static/index/g3.png`,text:"领券中心",path:'/pages/news/coupon/index',type:2}, {image:`${this.$picUrl}/static/index/g4.png`,text:"安装报修",path:'/pages/serve/index',type: 3}, {image:`${this.$picUrl}/static/index/g5.png`,text:"上门回收",path:'/pages/news/recycling/index',type:2}, ], catagoryList:[], paihangList:[], dapaiList:[], seckillList:[], xinpinList:[], goodsRecommend:[], isToggle: false, //第二 count: 4, value: 2, tagsList:[ '手机选购','电脑选购','配件选购','旧机回收' ], dianneiList:[ {image:`${this.$picUrl}/static/index/goods.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GBiphone13 绿色 128GBiphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:1}, {image:`${this.$picUrl}/static/index/goods1.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:0}, {image:`${this.$picUrl}/static/index/goods.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:0}, {image:`${this.$picUrl}/static/index/goods1.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:1}, {image:`${this.$picUrl}/static/index/goods.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:0}, {image:`${this.$picUrl}/static/index/goods1.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:1}, {image:`${this.$picUrl}/static/index/goods.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:1}, {image:`${this.$picUrl}/static/index/goods1.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:1}, {image:`${this.$picUrl}/static/index/goods.png`,price:"7599",linePrice:'7089',name:'iphone13 绿色 128GB',comment:'200+',rate:'99',isOwn:true,isExperss:1}, ], weixiuList:[ ], commentList:[ ], bannerList: [], cityInfo:{}, serveList: [], couList: [], timeData: {}, } }, methods:{ onChangeSeckillCutDownTime(e){ this.timeData = e }, //跳转会话列表 toChat() { if(!uni.getStorageSync("AccessToken")){ uni.navigateTo({ url: "/pages/login/index" }) return ; } uni.navigateTo({ url: "/pages/news/user/message" }) }, //查看全部评论 openPinlun(){ uni.navigateTo({ url: "/pages/news/consult/comment" }) }, //咨询 openWx(){ uni.navigateTo({ url: "/pages/news/consult/index" }) }, //门店图片预览 previewImage(i){ uni.previewImage({ current: this.cityInfo.imageList[i], urls: this.cityInfo.imageList }) }, //跳转服务 openServe(i){ uni.navigateTo({ url: "/pages/activity/intimate?index="+ i }) }, /** * 获取nanner列表 */ async queryBannerList() { let {status, data} = await GoodsApi.getBannerList({}); if(status == 200){ this.bannerList = data } }, /** * 获取服务列表 */ async getServeList() { const {status, message, data} = await newFunApi.serverCategoryList({}); if(status == 200){ this.serveList = data.list } }, // 获取新人礼包劵 async getCoupons() { const { status, message, data } = await activity.couponList(); if (status == 200) { let arr = {} if(data.list && data.list.length > 0){ arr = data.list.filter(a=>a.coupon_type == 10)[0] } this.couList = arr } }, search() { // 跳转商品搜索 uni.navigateTo({ url: '/pages/search/index' }) }, getTypeList() { GoodsApi.typeList().then(res => { if (res.status == 200) { this.tabList = res.data.list; this.catagoryList = res.data.list[0].children this.getRankingList(this.tabList[0].category_id) this.getNewGoods(this.tabList[0].category_id) this.getBigList(this.tabList[0].category_id) } }) }, goPage(url,type) { if(type == 1){ if(!uni.getStorageSync("AccessToken")){ uni.navigateTo({ url: "/pages/login/index" }) return ; } }else if(type == 2){ uni.navigateTo({ url }) }else{ uni.switchTab({ url }) return ; } uni.navigateTo({ url }) }, changeGoodsType(index) { this.tabCurrent = index; this.catagoryList = this.tabList[index].children; this.getRankingList(this.tabList[index].category_id) this.getNewGoods(this.tabList[index].category_id) this.getBigList(this.tabList[index].category_id) }, getRankingList(val) { // 获取首页排行榜 GoodsApi.chartsGoodsJing().then(result => { let arr = result.data; let finalArr = arr.filter(item=>{ return item.category_id == val }) if(finalArr.length>0){ let arr = finalArr[0].goods_list if(arr && arr.length > 0){ arr.map(a=>{ a.goods_price_min = Number(a.goods_price_min) a.goods_price_max = Number(a.goods_price_max) a.line_price_min = Number(a.line_price_min) a.line_price_max = Number(a.line_price_max) }) } this.paihangList = arr } }) }, getSeckill() { // 限时抢购 this.seckillList = [] limit.data().then(result => { let seckillList = []; if(result.data.tabbar && result.data.tabbar.length > 0){ let count_down_time = result.data.tabbar[0].count_down_time.replace(/-/g, '/'); this.seckillCutDownTime = Math.ceil((new Date(count_down_time).getTime() - new Date().getTime())); }else{ this.seckillCutDownTime = 0 } if(result.data.goodsList && result.data.goodsList.data.length > 0){ seckillList = result.data.goodsList.data; for (var i = 0; i < seckillList.length; i++) { seckillList[i].original_price = Number(seckillList[i].original_price) seckillList[i].seckill_price_max = Number(seckillList[i].seckill_price_max) seckillList[i].seckill_price_min = Number(seckillList[i].seckill_price_min) if (seckillList[i].spec_type == 10) { this.seckillList.push(seckillList[i]) } } } }) }, getSuggest() { // 获取推荐商品 Api.recommended().then(res => { let arr = res.data.goodsList if(arr && arr.length > 0){ arr.map(a=>{ a.goods_price_min = Number(a.goods_price_min) a.goods_price_max = Number(a.goods_price_max) a.line_price_min = Number(a.line_price_min) a.line_price_max = Number(a.line_price_max) }) } this.goodsRecommend = arr }) }, getNewGoods(val) { const that = this let param = { page: 1, per_page:100, categoryId: val, is_brand: 0, is_new: 1, order: 1 } GoodsApi.brandList(param).then(res => { let arr = res.data.data if(arr && arr.length > 0){ arr.map(a=>{ a.goods_price_min = Number(a.goods_price_min) a.goods_price_max = Number(a.goods_price_max) a.line_price_min = Number(a.line_price_min) a.line_price_max = Number(a.line_price_max) }) } that.xinpinList = arr; // if (that.newGoodsList.length == 4) { // that.newGoodsList.pop() // } }) }, toggleItem() { this.isToggle = !this.isToggle; }, getBigList(val) { const that = this let param = { page: 1, per_page:100, categoryId: val, is_brand: 1, is_new: 0, order: 1 } GoodsApi.brandList(param).then(res => { let arr = res.data.data; if(arr && arr.length > 0){ arr.map(a=>{ a.goods_price_min = Number(a.goods_price_min) a.goods_price_max = Number(a.goods_price_max) a.line_price_min = Number(a.line_price_min) a.line_price_max = Number(a.line_price_max) }) } that.dapaiList = arr }) .finally(() => {}) }, goBigGoods() { uni.navigateTo({ url: '/pages/user/vip/goods' }) }, gotoDetail(index) { if(this.bannerList[index].redirect_url){ uni.navigateTo({ url: '/pages/goods/detail?goodsId=' + this.bannerList[index].redirect_url }) } }, goDetails(item) { uni.navigateTo({ url: '/pages/goods/detail?goodsId=' + item.goods_id }) }, goNews() { // 新年换新 uni.navigateTo({ url: '/pages/activity/newsshop' }) }, goNewUser() { // 新人首单礼 uni.navigateTo({ url: '/pages/activity/newPeople' }) }, goNewGoods() { uni.navigateTo({ url: '/pages/activity/newGoods' }) }, seckill() { uni.navigateTo({ url: '/pages/activity/seckill' }) }, rankIng() { uni.navigateTo({ url: '/pages/activity/ranking' }) }, changeHome(val){ this.current = val; }, getCityInfo(){ const that =this GoodsApi.cityInfo().then(res => { if (res.status == 200) { that.cityInfo = res.data; uni.setStorageSync("cityInfo",res.data) } }) .finally(() => {}) }, goJump(path){ uni.navigateTo({ url: path }) }, callPhone() { uni.makePhoneCall({ phoneNumber: this.cityInfo.phone }) }, openMap() { uni.openLocation({ latitude: Number(this.cityInfo.latitude), longitude: Number(this.cityInfo.longitude) }) }, openScrollTo(){ uni.pageScrollTo({ scrollTop: 0 }) }, }, onLoad() { this.getTypeList() this.getSeckill() this.getSuggest() this.getCityInfo() this.getCoupons(); this.getServeList(); this.queryBannerList(); }, onShow() { this.isLogin = uni.getStorageSync("AccessToken")?true:false }, onPageScroll(e) { if (e.scrollTop <= 200 ) { // 当滚动到顶部且向下滑动时为true this.isTop = false } else { this.isTop = true } }, } </script> <style lang="scss" scoped> .index{ min-height: calc(100vh - 100rpx); background: url('https://www.royaum.com.cn/static/index/index-bg.png'); background-repeat: no-repeat; // background-size: contain; background-size: 100% auto; .navbarContent{ display: flex; justify-content: flex-start; align-items: center; // padding-left:36rpx; &::v-deep .u-navbar-inner{ justify-content: center; position: relative; margin-right:0 !important; .logo{ height:50rpx; width: auto; position: absolute; left:36rpx; top:25rpx; } .u-slot-content{ flex:none; } .u-subsection{ border-radius: 17px !important; background: rgba(255,255,255,0.5) !important; padding:0 !important; .u-item{ width:130rpx; } .u-item-bg{ width:130rpx !important; bottom: 0 !important; height: 100% !important; border-radius: 17px !important; // left:100rpx !important; } } } } .searchContentContainer{ display: flex; align-items: center; justify-content: space-between; margin:0 36rpx; margin-top:14rpx; .searchContent{ margin-right:20rpx; flex:1; position: relative; .btn{ width: 120rpx; height: 56rpx; line-height: 56rpx; background: #F3202A; border-radius: 24px 24px 24px 24px; opacity: 1; position: absolute; z-index:9; text-align: center; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #FFFFFF; top:4rpx; right:4rpx; } } .chat{ position: relative; button{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; opacity: 0; } .badge{ position: absolute; width:40rpx; height:40rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #F3202A; font-size: 24rpx; color:#fff; top:-10rpx; right:-10rpx; } } } .tabs{ margin:0 12rpx; display: flex; height: 80rpx; align-items: center; justify-content: space-around; .tabItem{ position: relative; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #282828; .flag{ position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); image{ width: 12px; height:12px; } } } .active{ color:#F6393D; font-size: 32rpx; font-weight: 600; } // ::v-deep .u-tab-item{ // height:76rpx !important; // } } .main{ padding: 0 25rpx; overflow: hidden; .picContainer{ height:196rpx; image{ height:196rpx; width: 695rpx; } } .grid{ background: #FFFFFF; border-radius: 4px 4px 4px 4px; opacity: 1; padding:20rpx; margin-top:20rpx; .gridRows{ display: flex; // justify-content: space-between; overflow: hidden; align-items: center; flex-wrap: wrap; } .more{ display: flex; align-items: center; justify-content: center; margin-top: 30rpx; font-size: 22rpx; font-weight: 400; color: #7D7D7D; } .gridItem{ // flex:1; width:20%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 30rpx; .imageC{ width: 88rpx; height:88rpx; image{ width: 100%; height:100%; } } text{ font-size: 24rpx; font-weight: 400; color: #5A5A5A; margin-top: 10rpx; } } .secondRows{ .imageC{ background-color: #F3F3F3; border-radius: 50%; overflow:hidden; display: flex; align-items: center; justify-content: center; image{ width: 80%; height:80%; } } } } .firstContent{ position: relative; .firstBg{ width: 698rpx; height: 230rpx; margin-bottom: 20rpx; } .firstInfo{ position: absolute; width: 97%; top: 17%; left: 3%; .fTitle{ display: flex; align-items: center; justify-content: space-between; padding-right: 27%; .firstTitle{ width:180rpx; height:auto; } text{ font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #FFFFFF; } } .couponInfo{ display: flex; // justify-content: space-between; align-items: center; margin-top: 15rpx; .left{ width:67%; display: flex; justify-content:center; align-items: center; margin-top: 50rpx; .flag{ font-size: 46rpx; font-family: PingFang SC, PingFang SC; font-weight: 600; color: #FF0777; } .num{ font-size: 52rpx; font-family: PingFang SC, PingFang SC; font-weight: 600; margin-left:14rpx; margin-right:24rpx; color: #FF0777; } .couponName{ font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: 600; color: #FF0777; } } .line{ border:1px dashed #B9B9B9; width:2rpx; height:76rpx; margin-top:24rpx; position: relative; left:-4rpx; } .lingqu{ width: 25%; // margin:0 auto; margin-top:24rpx; .lqBtn{ text-align: center; padding:10rpx 20rpx; margin:0 16rpx; background: linear-gradient(180deg, #FF1C75 0%, #FF470D 100%); border-radius: 28px 28px 28px 28px; opacity: 1; font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #FFFFFF; } } } } } .dapai{ position: relative; background: url("https://www.royaum.com.cn/static/index/dapaibg.png"); background-size: cover; background-repeat: no-repeat; padding:20rpx 24rpx; border-radius: 8rpx; .dapaiBox{ position: relative; .more{ font-size: 20rpx; font-weight: 400; color: #8C4D00; position: absolute; top: 0; right: 0rpx; } .dapaiTitle{ margin-bottom: 10rpx; display: flex; align-items: center; position: relative; &>image{ width:158rpx; height:auto; } .goods{ margin-left:20rpx; position: relative; &>image{ width: 148rpx; } &>view{ position: absolute; // width:100%; text-align: center; font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #8C4D00; z-index:9; top:6rpx; left:16rpx; // margin-left:20rpx; } } } .dapaiContent{ display: flex; flex-wrap: wrap; .dapaiItem{ width:20%; float: left; overflow: hidden; position: relative; margin-top: 20rpx; .picContent{ width: 134rpx; text-align: center; &>image{ width: 90rpx; height: 90rpx; } } .priceBox{ position: absolute; height: 34rpx; width: 134rpx; left: 0; top: 80rpx; z-index: 2; image{ height: 34rpx; width: 134rpx; } &>view{ position: absolute; left: 0; top: 0; height: 34rpx; line-height: 34rpx; width: 90%; font-size: 20rpx; font-weight: 400; color: #FFFFFF; text-align: center; text{ font-size: 16rpx; } } } .name{ font-size: 20rpx; font-weight: 400; line-height: 50rpx; color: #505050; width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 10rpx; } } } } } .qianggou{ width: 694rpx; padding: 10rpx 20rpx; background: linear-gradient(180deg, #FFF8F8 0%, #FFFFFF 100%); border-radius: 8rpx; margin-top: 18rpx; box-sizing: border-box; position: relative; .more{ font-size: 20rpx; font-weight: 400; color: #8C4D00; position: absolute; top: 25rpx; right: 20rpx; } .title{ display: flex; align-items: center; &>image{ width:160rpx; height:auto; } .rest{ display: flex; align-items: center; margin-left: 60rpx; } .date-time{ display: flex; align-items: center; margin-left: 14rpx; .time{ display: flex; align-items: center; justify-content: center; width: 40rpx; height: 40rpx; background-color: #FF4D4D; font-size: 24rpx; color: #FFFFFF; border-radius: 6rpx; } .da{ font-size: 34rpx; color: #212121; margin: 0 6rpx; color: #FF4D4D; } } } .goods-list{ display: flex; width: 100%; margin-top:20rpx; // height: 180rpx; overflow: auto; .list{ width:20%; margin:0 6rpx; .pictrue{ width: 100rpx; height: 100rpx; text-align: center; image{ width:90%; height:90%; } } .price{ position: relative; .tip{ margin-top:-40rpx; &>image{ width: 100rpx; height: 39rpx; } } .tipPrice{ text-align: center; position: absolute; top:0; width: 100rpx; left:0; line-height: 42rpx; font-size: 20rpx; color: #FFFFFF; } .linePrice{ width: 100rpx; text-decoration: line-through; text-align: center; font-size: 20rpx; font-weight: 400; color: #8E8E8E; } } } } } .activity{ margin-top:18rpx; display: flex; .left{ width:40%; flex-shrink: 0; image{ width:100%; height:auto; } } .right{ // flex:1; width:60%; padding-left:14rpx; // margin-left:14rpx; display: flex; flex-direction: column; // align-items: ; // justify-content: space-around; // align-items: s; .rightItem1,.rightItem2{ background: url('https://www.royaum.com.cn/static/index/newFirst.png'); background-size:cover ; padding: 14rpx; position: relative; box-sizing: border-box; .more{ font-size: 20rpx; font-weight: 400; color: #8C4D00; position: absolute; top: 15rpx; right: 10rpx; } .title{ width: 165rpx; height: auto; } .right1Good{ .right1Item{ width:33%; text-align: center; position: relative; margin-top: 15rpx; display: inline-block; &>image{ width: 90rpx; height: 90rpx; } .priceBox{ position: absolute; height: 34rpx; width: 134rpx; left: 0; top: 70rpx; z-index: 2; image{ height: 34rpx; width: 134rpx; } &>view{ position: absolute; left: 0; top: 0; height: 34rpx; line-height: 34rpx; width: 90%; font-size: 20rpx; font-weight: 400; color: #FFFFFF; text-align: center; text{ font-size: 16rpx; } } } } } } .rightItem2{ background: url('https://www.royaum.com.cn/static/index/ranking.png'); background-size:cover ; margin-top:14rpx; // padding:14rpx; // height:50%; .title{ width:120rpx; height:auto; } } } } .goodsRecommend{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top:20rpx; .goodsItem{ width: 340rpx; border-radius: 8rpx; overflow: hidden; background-color: #ffffff; margin-bottom:24rpx; padding: 20rpx; box-sizing: border-box; .pic{ width: 100%; text-align: center; image{ // width:100%; width:256rpx; height:256rpx; } } .goodsInfo{ .title{ display: flex; align-items: center; margin-top:14rpx; .ziying{ padding:4rpx 10rpx; background: #FF4438; border-radius: 2px 2px 2px 2px; opacity: 1; font-size: 24rpx; font-weight: 400; color: #FFFFFF; } .name{ margin-left:6rpx; font-size: 24rpx; font-weight: 400; color: #1E1E1E; flex:1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .isExpress{ height: 30rpx; display: flex; align-items: center; margin:10rpx 0; text{ display:inline-block; width: 44rpx; height:30rpx; line-height: 28rpx; border: 1px solid #F21A1C; border-radius: 2px 2px 2px 2px; background: #FFFFFF; text-align: center; font-size: 16rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #F21A1C; } } .price{ color: #F21A1C; display: flex; align-items: baseline; } .comment{ margin-top: 6rpx; font-size: 22rpx; font-weight: 400; color: #949494; } } } } } } .secondSection{ padding-bottom: 40rpx; margin-top: 20rpx; .shopImage{ height:484rpx; width:100%; } .content{ margin:0 26rpx; margin-top:-250rpx; // width: 349px; // height: 186px; background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, #FFFFFF 100%); border-radius: 4px 4px 4px 4px; opacity: 1; padding:30rpx; position: relative; z-index:9; .topcontent{ position: relative; .shopTitle{ display:flex; align-items: center; justify-content: space-between; .title{ font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #000000; } .shopStatus{ font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #F3202A; } } .rate{ margin-top:20rpx; text{ font-size: 30rpx; font-weight: 500; color: #FA8C3D; margin-left: 10rpx; } } .time{ margin:24upx 0; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #818181; } .tags{ padding-bottom:36rpx; border-bottom: 1px solid #F2F2F2; display: flex; align-items: center; // justify-content: ; .tagsItem{ width: 120rpx; height: 42rpx; line-height: 42rpx; text-align: center; background: #F5F5F5; border-radius: 2px 2px 2px 2px; opacity: 1; font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #818181; margin-right:10upx; } } .zixun{ position: absolute; z-index: 10; right: 0rpx; bottom: 32rpx; display: flex; .zixunItem{ display: flex; align-items: center; justify-content: center; flex-direction: column; &>image{ width:32rpx; height:auto; } .askText{ font-size: 20rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #989898; } } } } .shopAddress{ padding:24rpx 0; display: flex; align-items: center; justify-content: space-between; .address{ .ad{ display: flex; align-items: center; .addrTextFirst{ margin-right: 24rpx; font-size: 28rpx; font-weight: 400; color: #2B2B2B; } } .adInfo{ display: flex; align-items: flex-start; margin-top: 20rpx; // justify-content: center; .addrText{ margin-left:20rpx; margin-right:20rpx; font-size: 28rpx; font-weight: 400; color: #818181; } } } .pCar{ text-align: center; flex-shrink: 0; margin-left: 10rpx; image{ width:54rpx; height:auto; } .car{ font-size: 20upx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #989898; } } } } .diannei{ padding:10rpx 26rpx; margin: 20rpx 26rpx 0 26rpx; background: #fff; border-radius: 4px 4px 4px 4px; .dianneiTitle{ display:flex; align-items: center; justify-content: space-between; padding-top: 10rpx; text{ font-size: 28rpx; font-weight: 500; color: #000000; } .lookMore{ font-size: 24rpx; font-weight: 400; color: #909090; } } .dianneiContent{ white-space: nowrap; margin-top:14rpx; .lookMore{ font-size: 24rpx; font-weight: 400; color: #909090; } .dianneiItem{ width: 20%; text-align: center; display: inline-block; image{ width:104rpx; height:104rpx; } .itemTitle{ font-size: 20rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #1E1E1E; margin-top:5rpx; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } } } .serviceConent{ white-space: nowrap; margin-top:26rpx; .serviceItem{ width: 202rpx; height: 246rpx; display: inline-block; position: relative; margin-right: 26rpx; // justify-content: space-between; image{ width:100%; height:100%; } .itemTitle{ position: absolute; bottom:0; z-index:9; width:100%; height: 72rpx; background: linear-gradient(180deg, rgba(254,82,69,0) 0%, #FE5039 100%); border-radius: 0px 0px 0px 0px; opacity: 1; font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #FFFFFF; text-align: center; line-height: 72rpx; } } } } .comment{ padding:44rpx 40rpx; margin: 20rpx 26rpx 0 26rpx; background: #fff; border-radius: 4px 4px 4px 4px; .lookMore{ font-size: 24rpx; font-weight: 400; color: #909090; } .commentTitle{ display:flex; align-items: center; justify-content: space-between; text{ font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #000000; } } .commentItem{ display: flex; align-items: center; justify-content: space-between; margin-top: 28rpx; padding-bottom: 30rpx; border-bottom: 1px solid #EFEFEF; .left{ flex:1; .commentAvatar{ display: flex; align-items: center; // justify-content: ; image{ width:74rpx; height:74rpx; border-radius: 50%; } text{ font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #515151; margin-left:20rpx; } } .commentText{ margin-top:12rpx; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #515151; } } .right{ flex-shrink: 0; image{ width:160rpx; height:160rpx; } } } .commentContent{ display: flex; flex-wrap: nowrap; .serviceItem{ width: 196rpx; height: 140rpx; border-radius:4px; opacity: 1; margin-right:16rpx; overflow: hidden; flex-shrink: 0; image{ width:100%; height:100%; } } } } .history{ background: #FFFFFF; border-radius: 4px 4px 4px 4px; margin: 20rpx 26rpx; padding:20rpx 34rpx; .title{ font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #000000; margin-bottom: 20rpx; } .point{ width: 9px; height: 9px; background: #FFFFFF; border-radius: 100rpx; opacity: 1; border: 2px solid #F21C1C; margin-top:10rpx; margin-right:0; } .u-order-title{ font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #959595; } .u-node { // display: flex; // justify-content: center; // align-items: center; // background: #d0d0d0; flex-shrink: 0; } .u-order-desc{ font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #000000; margin-top:12rpx; } } } .toTop{ position: fixed; bottom:30rpx; right:16rpx; width: 47px; height: 47px; background: #FFFFFF; border-radius: 50%; opacity: 1; z-index:999; display: flex; align-items: center; justify-content: center; image{ width: 25px; height: 25px; } } //隐藏滚动条 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } // .u-tab-bar ::after{ // border:1px solid red; // height:10px; // width:10px; // } </style>