1128 lines
30 KiB
Vue
1128 lines
30 KiB
Vue
<template>
|
|
<view class="index">
|
|
|
|
<view class="header acea-row row-column row-left" style="position: absolute;left: 0;right: 0;"
|
|
:style="{top:statusBarHeight+'px'}">
|
|
|
|
<view class="acea-row row-middle row-right" style="position: relative;z-index: 1;">
|
|
<view style="position: relative;color: #FFF;margin-left: 20rpx;margin-right: 20rpx;"
|
|
class="acea-row row-middle">
|
|
<image style="width: 36rpx;height: 36rpx;" :src="webUrl+'/20210616184302174394.png'" mode="">
|
|
</image>
|
|
<view style="margin-left: 10rpx;font-size: 28rpx;color: #fff;">客服</view>
|
|
<button class="cus-btn" open-type="contact"></button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="slider-banner" style="position: relative;">
|
|
<swiper style="height: 510rpx;" indicatorDots="true" indicator-color="rgba(255, 255, 255, .3)"
|
|
indicator-active-color="#ffffff" v-if="banner.length > 0" autoplay circular>
|
|
<block v-for="(item, bannerIndex) in banner" :key="bannerIndex">
|
|
<swiper-item>
|
|
<view @click="goRoll(item)" class="swiper-item">
|
|
<image :src="item.pic"/>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
|
|
<view class="acea-row row-between row-middle"
|
|
style="flex-wrap: nowrap;position: absolute;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.6);padding: 10rpx 32rpx;">
|
|
<view class="news acea-row row-between-wrapper"
|
|
style="box-shadow: none !important;flex-grow: 1;flex-wrap: nowrap;background:transparent !important;border: none !important;margin: 0 30rpx 0 0 !important;padding: 0 !important;height: auto !important;">
|
|
<view class="swiper-no-swiping new-banner" style="height: 34rpx !important;text-align: right;">
|
|
<swiper class="swiper-wrapper" style="height: 34rpx !important;" v-if="userList.length > 0" :interval="3000"
|
|
:indicator-dots="false" autoplay circular vertical>
|
|
<block v-for="(item, userIndex) in userList" :key="userIndex">
|
|
<swiper-item class="swiper-slide" style="height: 34rpx !important;">
|
|
<view class="swiper-item acea-row row-middle" style="height: 34rpx !important;">
|
|
<view class="newsTitle line1"
|
|
style="color: #fff !important;font-size: 24rpx;text-align: left !important;">
|
|
恭喜{{ item.nickname }} 抽中奖品{{ item.prizeName }}
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="acea-row row-middle row-between" style="padding-top: 20rpx;background: #fff;">
|
|
<view @click="goGoodSearch()" class="search acea-row row-middle" style="flex-grow: 1;">
|
|
<text class="iconfont icon-xiazai5" style="color: #acacac;"></text>
|
|
搜索商品
|
|
</view>
|
|
</view>
|
|
<!-- 导航v9 -->
|
|
<view style="padding:24rpx 30rpx;background-color: #FFFFFF">
|
|
<u-scroll-list indicatorActiveColor="#FF6666">
|
|
<view v-for="n in menuArr[0].length" :key="n">
|
|
<view class="flex flex-col ai-center" style="width: 138rpx;margin-bottom: 32rpx;"
|
|
@click="$global.commonJump(menuArr[0][n]['uniapp_url'])">
|
|
<image style="width: 86rpx;height: 86rpx" :src="menuArr[0][n]['pic']" mode="scaleToFill"/>
|
|
<view class="one-t tc" style="width: 100%;margin-top: 16rpx;color:#666666;font-size: 26rpx">
|
|
{{ menuArr[0][n]['name'] }}
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-col ai-center" style="width: 138rpx" v-if="menuArr[1][n]"
|
|
@click="$global.commonJump(menuArr[1][n]['uniapp_url'])">
|
|
<image style="width: 86rpx;height: 86rpx" :src="menuArr[1][n]['pic']" mode="scaleToFill"/>
|
|
<view class="one-t tc" style="width: 100%;margin-top: 16rpx;color:#666666;font-size: 26rpx">
|
|
{{ menuArr[1][n]['name'] }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-scroll-list>
|
|
</view>
|
|
<!-- 导航v9end -->
|
|
|
|
<!-- v4 预售专区开始 -->
|
|
<view class="pre-sale" v-if="preSaleList.length">
|
|
<image class="bg" :src="webUrl+'/20220519145831955075.png'" mode="scaleToFill" @click="goPreSale"></image>
|
|
<view class="list">
|
|
<view class="item" v-for="(item,index) in preSaleList" :key="index" @click="goGoodsConByProductID(item,'pre')">
|
|
<image :src="item.image" mode="scaleToFill"></image>
|
|
<view style="text-align: center;">{{ item.title }}</view>
|
|
<text>￥{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- v4 预售专区结束 -->
|
|
|
|
<!-- v4 每天特价开始 -->
|
|
<view class="special-offer" v-if="dailyGoodsList.length">
|
|
<view class="header flex">
|
|
<view class="flex" style="align-items: center;">
|
|
<text class="title">每天特价</text>
|
|
<view class="date-box flex">
|
|
<image class="icon-date" :src="webUrl+'/20220521111703338325.png'" mode="scaleToFill"></image>
|
|
<view class="day">
|
|
<text>{{ date }}</text>
|
|
DAY
|
|
</view>
|
|
<view class="month">{{ month }}月</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="more" @click="goOffer">查看更多
|
|
<uni-icons type="arrowright" color="#7C7C7C" size="14"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list flex">
|
|
<view class="item flex" v-for="(item,index) in dailyGoodsList" :key="index"
|
|
@click="goGoodsConByProductID(item,'day')">
|
|
<image class="top-img" :src="item.image" mode="scaleToFill"></image>
|
|
|
|
<view class="content">
|
|
<view class="title one-t">{{ item.title }}</view>
|
|
<view class="price flex">
|
|
<text class="red">￥{{ item.price }}</text>
|
|
<text class="gray"
|
|
v-if="item.productPrice">￥{{ item.productPrice }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- v4 每天特价结束 -->
|
|
|
|
<!-- v9 专题 -->
|
|
<view class="subject-box">
|
|
<view class="section-half flex jc-between">
|
|
<image class="bg-img" :src="countyFamous.backgroundImage" mode="scaleToFill"
|
|
@click="$global.commonJump('/pkg_product/views/famousList')" v-if="countyFamous.backgroundImage"/>
|
|
<view class="food-box" @click="$global.commonJump('/pkg_product/views/seasonList')">
|
|
<image class="bg-img" :src="seasonalFood.backgroundImage" mode="scaleToFill"
|
|
v-if="seasonalFood.backgroundImage"/>
|
|
|
|
<swiper class="swiper" circular autoplay :interval="3000">
|
|
<swiper-item v-for="(arr,arrIndex) in seasonalFood.groupList" :key="arrIndex">
|
|
<view class="flex">
|
|
<image :src="item.image" mode="scaleToFill" v-for="(item,index) in arr" :key="index"/>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<view class="section-full flex jc-between">
|
|
<swiper class="swiper" circular autoplay :interval="3000">
|
|
<swiper-item v-for="(stay,stayIndex) in contentHomestay" :key="stayIndex">
|
|
<image :src="stay.indexImage" mode="scaleToFill" @click="goHomeStay(stay)"/>
|
|
</swiper-item>
|
|
</swiper>
|
|
<image :src="contentFestival.indexImage" mode="scaleToFill" @click="goFestival"
|
|
v-if="contentFestival.indexImage"/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- v9 老用户弹窗 -->
|
|
<u-popup :show="isOldUser" mode="center" bgColor="transparent">
|
|
<view class="popup-old-user flex flex-col ai-center">
|
|
<image class="main" :src="oldUserPopup.image" mode="scaleToFill" @click="tapOld()"/>
|
|
<view class="icon-box flex jc-center ai-center" @click="changeOldPopup(false)">
|
|
<image :src="webUrl+'/20230608112219219303.png'" mode="scaleToFill"/>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- 2022/6/20 add 尖货推荐 special-offer-->
|
|
<view class="bast-box">
|
|
<view style="padding: 0 32rpx;background: #FFFFFF;">
|
|
<image class="bast-title" :src="webUrl+'/20230407111908318221.png'" mode="scaleToFill"/>
|
|
</view>
|
|
<view class="list flex" v-if="bastList.length">
|
|
<custom-waterfalls-flow :value="bastList" imageKey="image">
|
|
<view class="item flex" v-for="(item,index) in bastList" :key="index" slot="slot{{index}}">
|
|
<template v-if="item.storeName==='swiper'">
|
|
<swiper class="item bannar-swiper" autoplay circular>
|
|
<swiper-item v-for="swipe in bannarList" :key="swipe">
|
|
<image :src="swipe.pic" mode="aspectFit" @click="goGoodsConByProductID(swipe)"/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
<template v-else>
|
|
<image class="top-img" :src="item.image" mode="scaleToFill" @click="goGoodsCon(item)"></image>
|
|
<view class="content" @click="goGoodsCon(item)">
|
|
<view class="title more-t">{{ item.storeName }}</view>
|
|
<view class="price flex">
|
|
<text class="red">￥{{ item.price }}</text>
|
|
<text class="gray"
|
|
v-if="item.productPrice">￥{{ item.productPrice }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
</view>
|
|
<!-- 尖货推荐结束 -->
|
|
|
|
<!-- 最新通知消息开始 -->
|
|
<uni-popup ref="popup" type="center">
|
|
<view v-if="unReadMessageInfo" class="acea-row row-column row-middle"
|
|
style="position: relative;background-color: #fff;width: 440rpx;border-radius: 20rpx;">
|
|
<view class="msg_title">
|
|
{{ unReadMessageInfo.noticeTitle }}
|
|
</view>
|
|
<view class="msg_content">
|
|
<rich-text :nodes="unReadMessageInfo.noticeContent" />
|
|
</view>
|
|
<view class="msg_line"></view>
|
|
<view class="msg_btn" @click="msgConfirm">我知道了</view>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- 通知消息结束 -->
|
|
|
|
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose">
|
|
</Coupon-window>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from 'vuex';
|
|
|
|
import PromotionGood from '@/components/PromotionGood';
|
|
import CouponWindow from '@/components/CouponWindow';
|
|
import CountDown from "@/components/CountDown";
|
|
import hxNavbar from "@/components/hx-navbar/hx-navbar.vue"
|
|
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
|
|
|
import {getCouponReceive, noticeDetail, noticeList} from "@/api/user";
|
|
import {getHomeData, getShareImage} from '@/api/public';
|
|
import {getProducts} from "@/api/store";
|
|
import {sharpBannar} from "@/api/goods";
|
|
import NP from "number-precision";
|
|
|
|
var that;
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
imgBox,
|
|
PromotionGood,
|
|
CouponWindow,
|
|
CountDown,
|
|
hxNavbar
|
|
},
|
|
computed: mapGetters(["userInfo", 'isLogin']),
|
|
props: {},
|
|
data: function () {
|
|
return {
|
|
currentIndex: 0,
|
|
speed: 200,
|
|
seriesWidth: 400,
|
|
duration: 60000,
|
|
unReadMessageInfo: null,
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
isLiving: true, //是否正在直播
|
|
showCoupon: false,
|
|
viewHeight: (750 * 3 / 4.0),
|
|
bslGoodsHeight: 750 * 3 / 4.0 + 'rpx',
|
|
hotGoodsColumnWidth: '325rpx',
|
|
bgImgHeight: '20px',
|
|
logoUrl: '',
|
|
innArray: [],
|
|
shopArray: [],
|
|
restaurantArray: [],
|
|
banner: [],
|
|
menus: [],
|
|
menuArr: [[], []],
|
|
roll: [],
|
|
cityName: "",
|
|
activity: [],
|
|
groupGoods: [],
|
|
activityOne: {},
|
|
bastList: [],
|
|
firstList: [],
|
|
userList: [],
|
|
newGoods: null,
|
|
companyName: '',
|
|
companyAddress: '',
|
|
companyTel: '',
|
|
companyLogo: '',
|
|
info: {
|
|
fastList: [],
|
|
bastBanner: [],
|
|
bastList: []
|
|
},
|
|
likeInfo: [],
|
|
lovely: [],
|
|
benefit: [],
|
|
couponList: [],
|
|
swiperOption: {
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true
|
|
},
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
delay: 2000
|
|
},
|
|
loop: true,
|
|
speed: 1000,
|
|
observer: true,
|
|
observeParents: true
|
|
},
|
|
swiperRoll: {
|
|
direction: 'vertical',
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
delay: 2000
|
|
},
|
|
loop: true,
|
|
speed: 1000,
|
|
observer: true,
|
|
observeParents: true
|
|
},
|
|
swiperScroll: {
|
|
freeMode: true,
|
|
freeModeMomentum: false,
|
|
slidesPerView: 'auto',
|
|
observer: true,
|
|
observeParents: true
|
|
},
|
|
swiperBoutique: {
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true
|
|
},
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
delay: 2000
|
|
},
|
|
loop: true,
|
|
speed: 1000,
|
|
observer: true,
|
|
observeParents: true
|
|
},
|
|
swiperProducts: {
|
|
freeMode: true,
|
|
freeModeMomentum: false,
|
|
slidesPerView: 'auto',
|
|
observer: true,
|
|
observeParents: true
|
|
},
|
|
liveList: [],
|
|
broadcastStyle2: {
|
|
speed: 100,
|
|
font_size: "32", //字体大小(rpx)
|
|
text_color: "#333", //字体颜色
|
|
back_color: "red", //背景色
|
|
},
|
|
bslImglist: [],
|
|
statusBarHeight: 64,
|
|
dailyGoodsList: [], // 每日特价
|
|
preSaleList: [], // 预售商品
|
|
month: 0, // 每日特价:月
|
|
date: 0, // 每日特价：日
|
|
bannarList: [], // 尖货推荐横幅
|
|
shareAppImg: "", // 发送给朋友
|
|
isOldUser: true, // 老用户弹窗
|
|
oldUserPopup: {},
|
|
contentHomestay: {},
|
|
contentFestival: {},
|
|
countyFamous: {},
|
|
seasonalFood: {}
|
|
};
|
|
},
|
|
onLoad: function (options) {
|
|
that = this;
|
|
this.init();
|
|
getShareImage().then(({data}) => this.shareAppImg = data);
|
|
uni.getSystemInfo({
|
|
success: (e) => {
|
|
let statusBar = 0;
|
|
let customBar = 0;
|
|
|
|
// #ifdef MP-WEIXIN
|
|
statusBar = e.statusBarHeight
|
|
const custom = uni.getMenuButtonBoundingClientRect()
|
|
customBar = custom.bottom + custom.top - e.statusBarHeight
|
|
// #endif
|
|
|
|
that.statusBarHeight = customBar;
|
|
//两列商品宽度
|
|
that.hotGoodsColumnWidth = (e.screenWidth - uni.upx2px(90)) / 2 + 'px';
|
|
//状态栏图片高度
|
|
that.bgImgHeight = statusBar + 'px';
|
|
|
|
}
|
|
});
|
|
|
|
this.testAni()
|
|
},
|
|
onShow: function () {
|
|
const today = new Date();
|
|
this.month = today.getMonth() + 1;
|
|
this.date = today.getDate();
|
|
|
|
//如果已经登录获取用户信息
|
|
if (this.isLogin) {
|
|
this.$store.dispatch("getUser", true);
|
|
|
|
//获取最新一条消息
|
|
this.getUnreadMsgList();
|
|
}
|
|
|
|
//获取团购商品
|
|
this.getGroupGoods();
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '探寻有趣有味的生活方式',
|
|
path: '/pages/home/index',
|
|
imageUrl: this.shareAppImg
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh()
|
|
uni.navigateTo({
|
|
url: '/pkg-video/views/lottery'
|
|
})
|
|
},
|
|
methods: {
|
|
init() {
|
|
let that = this;
|
|
|
|
sharpBannar().then(({data}) => {
|
|
this.bannarList = data.banner
|
|
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
getHomeData().then(res => {
|
|
that.logoUrl = res.data.logoUrl;
|
|
that.$set(that, 'banner', res.data.banner);
|
|
|
|
that.$set(that, 'menus', res.data.menus)
|
|
res.data.menus?.forEach((item, index) => {
|
|
if (index % 2 === 0) {
|
|
that.menuArr[0].push(item)
|
|
} else {
|
|
that.menuArr[1].push(item)
|
|
}
|
|
})
|
|
|
|
that.$set(that, 'roll', res.data.roll);
|
|
that.$set(that, 'userList', res.data.lotteryRecord); //滚动会员信息
|
|
that.$set(that, 'info', res.data.info);
|
|
that.$set(that, 'firstList', res.data.firstList.map((item) => {
|
|
item.price = that.$force2Decimal(item.price);
|
|
//如果已经登录获取用户信息
|
|
if (that.$store.getters.token && that.userInfo) {
|
|
var p = NP.times(item.price, NP.divide(parseFloat(that.userInfo.discount),
|
|
100))
|
|
item.vipPrice = that.$force2Decimal(p);
|
|
}
|
|
return item;
|
|
}));
|
|
that.$set(that, 'oldUserPopup', res.data.oldUserPopup)
|
|
that.$set(that, 'contentHomestay', res.data.contentHomestay)
|
|
that.$set(that, 'contentFestival', res.data.contentFestival)
|
|
that.$set(that, 'countyFamous', res.data.countyFamous)
|
|
|
|
// 处理时令尝鲜轮播图所需数据
|
|
const foodLen = res.data.seasonalFood.productsCarousels.length;
|
|
const foods = res.data.seasonalFood.productsCarousels;
|
|
let groupList = [];
|
|
if (foodLen) {
|
|
const count = 4;
|
|
for (let i = 0; i < foodLen; i += count) {
|
|
groupList.push(foods.slice(i, i + count))
|
|
}
|
|
}
|
|
res.data.seasonalFood.groupList = groupList;
|
|
that.$set(that, 'seasonalFood', res.data.seasonalFood)
|
|
|
|
if (that.firstList.length > 0) {
|
|
that.newGoods = that.firstList[0];
|
|
}
|
|
|
|
that.$set(that, 'likeInfo', res.data.likeInfo.map((item) => {
|
|
item.price = that.$force2Decimal(item.price);
|
|
item.otPrice = that.$force2Decimal(item.otPrice);
|
|
//如果已经登录获取用户信息
|
|
if (that.$store.getters.token && that.userInfo) {
|
|
var p = NP.times(item.price, NP.divide(parseFloat(that.userInfo.discount),
|
|
100))
|
|
item.vipPrice = that.$force2Decimal(p);
|
|
}
|
|
return item;
|
|
}));
|
|
|
|
setTimeout(() => {
|
|
//伴手礼图片
|
|
var imgs = [];
|
|
that.likeInfo.forEach((item) => {
|
|
imgs.push(item.image);
|
|
})
|
|
that.$set(that, 'bslImglist', imgs);
|
|
|
|
that.seriesWidth = 770 * imgs.length - 20;
|
|
that.duration = Math.floor(that.seriesWidth / that.speed * 1000);
|
|
}, 1)
|
|
|
|
for (let i = 0; i < res.data.bastList.length; i++) {
|
|
res.data.bastList[i].hide = true;
|
|
}
|
|
that.$set(that, 'bastList', res.data.bastList);
|
|
that.$set(that, 'lovely', res.data.lovely);
|
|
that.$set(that, 'benefit', res.data.benefit);
|
|
that.$set(that, 'couponList', res.data.couponList);
|
|
|
|
that.$set(that, 'companyName', res.data.companyName);
|
|
that.$set(that, 'companyAddress', res.data.companyAddress);
|
|
that.$set(that, 'companyTel', res.data.companyTel);
|
|
that.$set(that, 'companyLogo', res.data.companyLogo);
|
|
|
|
that.$set(that, 'dailyGoodsList', res.data.dailyGoodsList);
|
|
that.$set(that, 'preSaleList', res.data.preSaleList);
|
|
|
|
uni.hideLoading();
|
|
});
|
|
});
|
|
},
|
|
getGroupGoods() {
|
|
var params = {
|
|
page: 1,
|
|
limit: 1,
|
|
sid: 19, //团购id=19
|
|
news: 0,
|
|
priceOrder: "",
|
|
salesOrder: ""
|
|
}
|
|
var _this = this;
|
|
|
|
getProducts(params)
|
|
.then(res => {
|
|
_this.groupGoods = res.data;
|
|
})
|
|
.catch(err => {
|
|
|
|
})
|
|
},
|
|
clickItem(data) {
|
|
this.goGoodsCon(data);
|
|
},
|
|
msgConfirm: function () {
|
|
that.$refs.popup.close();
|
|
},
|
|
goPreSale: function () {
|
|
this.$yrouter.push("/v4/views/preSale/preSale")
|
|
},
|
|
goOffer: function () {
|
|
this.$yrouter.push("/v4/views/offer/offer")
|
|
},
|
|
setMsgReaded: function (mid) {
|
|
noticeDetail({
|
|
id: mid
|
|
})
|
|
},
|
|
getUnreadMsgList: function () {
|
|
var params = {
|
|
limit: 10,
|
|
page: 1
|
|
}
|
|
let that = this;
|
|
noticeList(params).then(res => {
|
|
if (res.data && res.data.length > 0) {
|
|
var msg = res.data[0];
|
|
if (msg.readFlag == 'RF0') {
|
|
that.unReadMessageInfo = msg;
|
|
that.$refs.popup.open();
|
|
that.setMsgReaded(msg.id);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
call: function () {
|
|
|
|
if (this.companyTel != undefined && this.companyTel.length > 0) {
|
|
uni.makePhoneCall({
|
|
// 手机号
|
|
phoneNumber: this.companyTel,
|
|
// 成功回调
|
|
success: (res) => {
|
|
},
|
|
// 失败回调
|
|
fail: (res) => {
|
|
}
|
|
});
|
|
} else {
|
|
this.$dialog.error('电话为空');
|
|
}
|
|
|
|
|
|
},
|
|
goRoll(item) {
|
|
if (item.uniapp_url) {
|
|
this.$yrouter.push(item.uniapp_url)
|
|
}
|
|
},
|
|
goGoodSearch() {
|
|
this.$yrouter.push('/pages/shop/GoodSearch/index');
|
|
},
|
|
goGoodsCon(item) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: item.id
|
|
}
|
|
});
|
|
},
|
|
goGoodsConByProductID(item, from) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: item.productId,
|
|
activityId: item.id,
|
|
from
|
|
}
|
|
});
|
|
},
|
|
|
|
changeOldPopup(state) {
|
|
this.isOldUser = state;
|
|
},
|
|
|
|
goHomeStay(stay) {
|
|
if (stay.uniappUrl) {
|
|
this.$global.commonJump(stay.uniappUrl)
|
|
return
|
|
}
|
|
|
|
if (stay.type === 2 && stay.isLinkToProduct) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: stay.productId
|
|
}
|
|
})
|
|
return
|
|
}
|
|
if (stay.type === 1) {
|
|
uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
|
|
}
|
|
},
|
|
|
|
goFestival() {
|
|
uni.navigateTo({url: '/pkg_product/views/festival'})
|
|
},
|
|
tapOld() {
|
|
this.isOldUser = false
|
|
const {type, text, jumpTime, pageLevel, url, params, couponId} = this.oldUserPopup
|
|
if (couponId != null) {
|
|
getCouponReceive(couponId).then(res => {
|
|
if (res.status === 200) {
|
|
uni.showToast({
|
|
title: text,
|
|
icon: 'none',
|
|
success: () => {
|
|
}
|
|
})
|
|
}
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: err.data.msg + '',
|
|
icon: 'none',
|
|
duration: 3000
|
|
})
|
|
})
|
|
}
|
|
// type 1-定时跳转，2-点击跳转，3-不跳转
|
|
if (type === 1) {
|
|
setTimeout(() => {
|
|
this.$global.levelJump(pageLevel, url, params)
|
|
}, jumpTime * 1000)
|
|
} else if (type === 2) {
|
|
this.$global.levelJump(pageLevel, url, params)
|
|
}
|
|
},
|
|
|
|
testAni() {
|
|
const query = uni.createSelectorQuery().in(this).select('.index')
|
|
query.fields({size: true, scrollOffset: true}, (data) => {
|
|
console.log(JSON.stringify(data))
|
|
}).exec()
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.index {
|
|
background-color: #F5F5FA;
|
|
|
|
.header {
|
|
height: auto !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.header {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.header .paper-cuts-img {
|
|
position: absolute;
|
|
width: 159*2rpx;
|
|
height: 159*2rpx;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
z-index: 0;
|
|
}
|
|
|
|
.swiper-item {
|
|
height: 100%;
|
|
}
|
|
|
|
.slider-banner {
|
|
-webkit-transform: rotate(0);
|
|
width: auto !important;
|
|
}
|
|
|
|
.search {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
height: 64rpx;
|
|
background-color: #F5F5F5;
|
|
padding: 0 28rpx;
|
|
font-size: 28rpx;
|
|
color: #acacac;
|
|
border-radius: 32rpx;
|
|
margin: 0 30rpx;
|
|
}
|
|
|
|
.news {
|
|
margin: 0rpx 30rpx !important;
|
|
border-radius: 8rpx !important;
|
|
background: #f7f7f7 !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.news .new-banner .text .newsTitle {
|
|
color: #666666 !important;
|
|
}
|
|
|
|
.cus-btn {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.cus-btn::after {
|
|
border: none !important;
|
|
}
|
|
|
|
.msg_title {
|
|
font-size: 0.36*100rpx;
|
|
font-weight: bold;
|
|
color: rgba(8, 15, 26, 1);
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.msg_line {
|
|
background-color: #f3f3f3;
|
|
height: 1px;
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.msg_content {
|
|
padding: 0.1*100rpx;
|
|
color: #080F1A;
|
|
font-size: 0.32*100rpx;
|
|
}
|
|
|
|
.msg_btn {
|
|
padding: 10rpx;
|
|
font-size: 34rpx;
|
|
color: #38afef;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
|
|
.pre-sale {
|
|
position: relative;
|
|
width: 686rpx;
|
|
height: 440rpx;
|
|
margin: 0 auto;
|
|
|
|
.bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
position: absolute;
|
|
bottom: 36rpx;
|
|
width: 100%;
|
|
padding: 0 14rpx;
|
|
box-sizing: border-box;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0 10rpx;
|
|
|
|
image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
view {
|
|
width: 200rpx;
|
|
margin: 4rpx 0 12rpx;
|
|
color: #333;
|
|
font-size: 24rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
text {
|
|
display: inline-block;
|
|
padding: 2rpx 15rpx;
|
|
border-radius: 18rpx;
|
|
background: #ED0F0F;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 每天特价
|
|
.special-offer {
|
|
margin-top: 40rpx;
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.header {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 8rpx;
|
|
color: #333;
|
|
line-height: 48rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.icon-date {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.date-box {
|
|
align-items: center;
|
|
padding: 8rpx;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
|
|
.day {
|
|
color: #494949;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
|
|
text {
|
|
color: #FF1200;
|
|
}
|
|
}
|
|
|
|
.month {
|
|
height: 32rpx;
|
|
margin-left: 12rpx;
|
|
padding-left: 6rpx;
|
|
border-left: 2rpx solid #DDDDDD;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.more {
|
|
margin-top: 8rpx;
|
|
color: #7C7C7C;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx 40rpx;
|
|
|
|
.item {
|
|
position: relative;
|
|
flex-direction: column;
|
|
width: 328rpx;
|
|
margin-top: 20rpx;
|
|
background: #fff;
|
|
|
|
.top-img {
|
|
flex-shrink: 0;
|
|
width: 328rpx;
|
|
height: 328rpx;
|
|
}
|
|
|
|
.icon-fire {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
|
|
.title {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
margin: 10rpx 12rpx 10rpx 10rpx;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
line-height: 38rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.price {
|
|
align-items: center;
|
|
margin-left: 10rpx;
|
|
padding-bottom: 10rpx;
|
|
|
|
.red {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
line-height: 38rpx;
|
|
color: #ED0F0F;
|
|
}
|
|
|
|
.gray {
|
|
margin-left: 16rpx;
|
|
text-decoration: line-through;
|
|
font-size: 20rpx;
|
|
line-height: 30rpx;
|
|
color: #C2C5CC;
|
|
}
|
|
}
|
|
|
|
.shop {
|
|
position: absolute;
|
|
bottom: 0;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 6rpx 12rpx 18rpx 10rpx;
|
|
border: 1rpx solid #EFEFEF;
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.subject-box {
|
|
padding: 0 32rpx 40rpx;
|
|
background: #FFFFFF;
|
|
|
|
image {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.section-half {
|
|
margin-bottom: 16rpx;
|
|
|
|
.bg-img {
|
|
width: 336rpx;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.food-box {
|
|
position: relative;
|
|
width: 336rpx;
|
|
height: 180rpx;
|
|
overflow: hidden;
|
|
|
|
.swiper {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
bottom: 20rpx;
|
|
width: 296rpx;
|
|
height: 72rpx;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
|
|
image {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
margin-right: 4rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
image:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-full {
|
|
image {
|
|
width: 336rpx;
|
|
height: 480rpx;
|
|
}
|
|
|
|
.swiper {
|
|
width: 336rpx;
|
|
height: 480rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-old-user {
|
|
image {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.main {
|
|
width: 560rpx;
|
|
height: 840rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.icon-box {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
margin-top: 40rpx;
|
|
background: rgba(51, 51, 51, .4);
|
|
border-radius: 50%;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bast-box {
|
|
.bast-title {
|
|
width: 312rpx;
|
|
height: 40rpx;
|
|
margin: 16rpx 0 16rpx;
|
|
}
|
|
|
|
.bannar-swiper {
|
|
height: 534rpx;
|
|
|
|
image {
|
|
width: 332rpx;
|
|
height: 534rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
padding: 32rpx;
|
|
|
|
.item {
|
|
position: relative;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
|
|
.top-img {
|
|
width: 332rpx;
|
|
height: 332rpx;
|
|
}
|
|
|
|
.content {
|
|
box-sizing: border-box;
|
|
padding: 10rpx 10rpx 20rpx;
|
|
|
|
.title {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.price {
|
|
font-size: 32rpx;
|
|
|
|
.red {
|
|
color: #DA0000;
|
|
}
|
|
|
|
.gray {
|
|
margin-left: 16rpx;
|
|
text-decoration: line-through;
|
|
font-size: 20rpx;
|
|
line-height: 30rpx;
|
|
color: #C2C5CC;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |