优化首页
This commit is contained in:
zpc
parent
f99467f3a2
commit
750cd87abb
|
|
@ -30,11 +30,8 @@ class BasePlatform {
|
|||
}
|
||||
async appData() {
|
||||
await this.loadCacheData();
|
||||
// uni.switchTab({
|
||||
// url: '/pages/shouye/index'
|
||||
// });
|
||||
uni.switchTab({
|
||||
url: '/pages/shouye/newIndex'
|
||||
url: '/pages/shouye/index'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -227,12 +227,10 @@ class MiniProgramPlatform extends BasePlatform {
|
|||
const t= await uni.getAccountInfoSync();
|
||||
console.log("getAccountInfoSync",t);
|
||||
await this.loadCacheData();
|
||||
// uni.switchTab({
|
||||
// url: '/pages/shouye/index'
|
||||
// });
|
||||
uni.switchTab({
|
||||
url: '/pages/shouye/newIndex'
|
||||
url: '/pages/shouye/index'
|
||||
});
|
||||
|
||||
// this.getConfig().then(res => {
|
||||
// console.log(res, 'res');
|
||||
// })
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ export const getGoods = async (page, type, keyword) => {
|
|||
type,
|
||||
keyword
|
||||
});
|
||||
await sleep(1000);
|
||||
if (res.status == 1) {
|
||||
let isWXShenHe = ConfigManager.GetVersion();
|
||||
let _data = res.data.data;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<template>
|
||||
<view class="refresher-container">
|
||||
<!-- 这里的图片请换成自己项目的图片 -->
|
||||
<image class="refresher-image" mode="aspectFit" src="@/static/refresher_loading.gif"></image>
|
||||
<!-- <image class="refresher-image" mode="aspectFit" src="@/static/refresher_loading.gif"></image> -->
|
||||
<image class="refresher-image" mode="aspectFit" src="https://image.zfunbox.cn/app/index_login.gif"></image>
|
||||
<text class="refresher-text">{{statusText}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -19,10 +20,10 @@
|
|||
// 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue);
|
||||
// 获取到当前语言之后，就可以自定义不同语言下的展示内容了
|
||||
const statusTextMap = {
|
||||
'default': '哎呀，用点力继续下拉！',
|
||||
'release-to-refresh': '拉疼我啦，松手刷新~~',
|
||||
'loading': '正在努力刷新中...',
|
||||
'complete': '刷新成功啦~'
|
||||
'default': '下拉刷新',
|
||||
'release-to-refresh': '释放刷新',
|
||||
'loading': '正在努力加载中...',
|
||||
'complete': '加载成功'
|
||||
};
|
||||
return statusTextMap[this.status];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,24 @@
|
|||
<template>
|
||||
<view class="qbt_con_item" @click="toDetails(item)">
|
||||
<!-- 商品图片 -->
|
||||
<view class="list_1 center" style="background-color: #fff;border-radius: 16rpx 16rpx 0rpx 0rpx;">
|
||||
<image :src="item.imgurl" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="list_2">
|
||||
<view class="hang1">{{ item.title }}</view>
|
||||
|
||||
<!-- 参与次数 -->
|
||||
<view class="redu" v-if="item.join_count">
|
||||
<text>{{ item.join_count }}次参与</text>
|
||||
</view>
|
||||
<view class="redu" v-else>快去参与吧！</view>
|
||||
|
||||
<!-- 价格与库存 -->
|
||||
<view class="qbt_con_item_3 flex_center" style="margin-top: 24rpx">
|
||||
<view class="item-price">
|
||||
￥<text style="font-size: 24rpx">{{ item.price }}</text>
|
||||
￥<text>{{ item.price }}</text>
|
||||
</view>
|
||||
<view v-if="item.stock" class="qbt_con_item_price">
|
||||
<text>{{ item.sale_stock }}/{{ item.stock }}</text>
|
||||
|
|
@ -19,17 +26,18 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image :src="$img1('common/new2.png')" class="image1" mode="widthFix"
|
||||
v-if="item.new_is == 1 && tabCurId == 2"></image>
|
||||
<image :src="$img1('common/new1.png')" class="image1"
|
||||
style="animation: zoom 1.2s ease-in-out infinite" mode="widthFix"
|
||||
v-if="item.new_is == 1 && tabCurId != 2"></image>
|
||||
<view class="image3 common_bg" style="padding: 0 10rpx;line-height: 32rpx;"
|
||||
:style="{ backgroundImage: tabCurId != 2 ? `url(${$img1('common/label1.png')})` : `url(${$img1('common/label2.png')})`, }">
|
||||
<text>
|
||||
{{ item.type_text }}
|
||||
</text>
|
||||
|
||||
<!-- 新品标签 -->
|
||||
<image v-if="item.new_is == 1" :src="$img1(tabCurId == 2 ? 'common/new2.png' : 'common/new1.png')" class="image1"
|
||||
:style="tabCurId != 2 ? 'animation: zoom 1.2s ease-in-out infinite' : ''" mode="widthFix">
|
||||
</image>
|
||||
|
||||
<!-- 类型标签 -->
|
||||
<view class="image3 common_bg">
|
||||
<text>{{ item.type_text }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 折扣标签 -->
|
||||
<view v-if="item.is_shou_zhe == 1" class="half-tag">
|
||||
<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
|
@ -48,24 +56,24 @@ export default {
|
|||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
toDetails(item) {
|
||||
// 无限赏
|
||||
let url = "/pages/shouye/detail";
|
||||
let params = {
|
||||
const params = {
|
||||
goods_id: item.id,
|
||||
};
|
||||
|
||||
// 根据商品类型跳转不同页面
|
||||
if (item.type == 2 || item.type == 8 || item.type == 16) {
|
||||
url = "/pages/shouye/detail_wuxian";
|
||||
}
|
||||
|
||||
if (item.type == 9) {
|
||||
url = "/package/index/lian-ji";
|
||||
}
|
||||
if (item.type == 3) {
|
||||
url = "/package/index/leitai";
|
||||
url = "/pages/shouye/detail_wuxian"; // 无限赏
|
||||
} else if (item.type == 9) {
|
||||
url = "/package/index/lian-ji"; // 连击
|
||||
} else if (item.type == 3) {
|
||||
url = "/package/index/leitai"; // 擂台
|
||||
}
|
||||
|
||||
this.$customRouter.navigateTo(url, params);
|
||||
|
|
@ -83,6 +91,7 @@ export default {
|
|||
background-color: #f8f8f8;
|
||||
border-radius: 16rpx;
|
||||
|
||||
// 新品标签
|
||||
.image1 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
|
|
@ -92,17 +101,20 @@ export default {
|
|||
right: 10rpx;
|
||||
}
|
||||
|
||||
// 类型标签
|
||||
.image3 {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
min-width: 68rpx;
|
||||
padding: 0 6rpx;
|
||||
height: 32rpx;
|
||||
justify-content: center;
|
||||
padding: 0 10rpx;
|
||||
line-height: 32rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url(https://image.zfunbox.cn/static/web/static/common/label2.png);
|
||||
|
||||
text {
|
||||
font-size: 16rpx;
|
||||
|
|
@ -111,6 +123,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 折扣标签
|
||||
.half-tag {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
|
|
@ -126,6 +139,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 商品图片容器
|
||||
.list_1 {
|
||||
width: 100%;
|
||||
height: 332rpx;
|
||||
|
|
@ -133,13 +147,14 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.list_1>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 商品信息容器
|
||||
.list_2 {
|
||||
padding: 28rpx 20rpx 0;
|
||||
font-size: 20rpx;
|
||||
|
|
@ -147,13 +162,22 @@ export default {
|
|||
color: #333333;
|
||||
}
|
||||
|
||||
// 参与次数
|
||||
.redu {
|
||||
margin-top: 24rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
color: #6C6C6C;
|
||||
|
||||
>image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// 价格区域
|
||||
.qbt_con_item_3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -171,27 +195,22 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 库存信息
|
||||
.qbt_con_item_price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18rpx;
|
||||
font-weight: 400;
|
||||
color: #6c6c6c;
|
||||
|
||||
image {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.qbt_con_item_price>image {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.redu>image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
@keyframes zoom {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
|
|
@ -205,4 +224,4 @@ export default {
|
|||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -1,240 +1,234 @@
|
|||
<template>
|
||||
<!-- 优惠券 -->
|
||||
<view>
|
||||
<!-- 优惠券弹窗 -->
|
||||
<uni-popup ref="_couponPop" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
||||
<view v-if="couponData" class="coupon-pop common_bg relative">
|
||||
<scroll-view class="coupon-list" scroll-y>
|
||||
<view v-for="(item, i) in couponData.goods.list" :key="i" class="coupon-item">
|
||||
<view class="center">
|
||||
<text>￥</text>
|
||||
<text>{{ Number(item.price) }}</text>
|
||||
</view>
|
||||
<view class="ml30 column">
|
||||
<text>{{ item.title }}</text>
|
||||
<text>有限期{{ item.effective_day }}天</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view @click="receiveCoupon" class="get-btn center">立即收下</view>
|
||||
<view class="bt-close flex" @tap="close">
|
||||
<image class="img100" :src="$img1('common/close.png')"></image>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<!-- 优惠券 -->
|
||||
<view>
|
||||
<!-- 优惠券弹窗 -->
|
||||
<uni-popup ref="_couponPop" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
||||
<view v-if="couponData" class="coupon-pop common_bg relative">
|
||||
<scroll-view class="coupon-list" scroll-y>
|
||||
<view v-for="(item, i) in couponData" :key="i" class="coupon-item">
|
||||
<view class="center">
|
||||
<text>￥</text>
|
||||
<text>{{ Number(item.price) }}</text>
|
||||
</view>
|
||||
<view class="ml30 column">
|
||||
<text>{{ item.title }}</text>
|
||||
<text>有限期{{ item.effective_day }}天</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view @click="receiveCoupon" class="get-btn center">立即收下</view>
|
||||
<view class="bt-close flex" @tap="close">
|
||||
<image class="img100" :src="$img1('common/close.png')"></image>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'home-page-coupon',
|
||||
data() {
|
||||
return {
|
||||
couponData: null,
|
||||
canGetCoupon: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 检查是否有可领取的优惠券
|
||||
* @returns {Promise<boolean>} 是否有可领取的优惠券
|
||||
*/
|
||||
async checkCoupon() {
|
||||
return new Promise((resolve) => {
|
||||
this.req({
|
||||
url: "coupon",
|
||||
data: {},
|
||||
success: (res) => {
|
||||
if (res.status == 1) {
|
||||
|
||||
export default {
|
||||
name: 'home-page-coupon',
|
||||
data() {
|
||||
return {
|
||||
couponData: null,
|
||||
canGetCoupon: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 检查是否有可领取的优惠券
|
||||
* @returns {Promise<boolean>} 是否有可领取的优惠券
|
||||
*/
|
||||
async checkCoupon() {
|
||||
return new Promise((resolve) => {
|
||||
this.req({
|
||||
url: "coupon",
|
||||
data: {},
|
||||
success: (res) => {
|
||||
if (res.status == 1 && res.data.status != 2) {
|
||||
res.data.totalMoney = 0;
|
||||
if (res.data.goods && res.data.goods.list && res.data.goods.list
|
||||
.length > 0) {
|
||||
this.couponData = res.data.goods.list;
|
||||
this.canGetCoupon = true;
|
||||
this.$refs._couponPop.open();
|
||||
resolve(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (res.data.goods.list.length > 0) {
|
||||
res.data.totalMoney = res.data.goods.list.reduce((pre, item) => {
|
||||
return pre + Number(item.price);
|
||||
}, 0);
|
||||
|
||||
this.couponData = res.data;
|
||||
this.canGetCoupon = true;
|
||||
resolve(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.couponData = null;
|
||||
this.canGetCoupon = false;
|
||||
resolve(false);
|
||||
},
|
||||
fail: () => {
|
||||
this.canGetCoupon = false;
|
||||
resolve(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
this.couponData = null;
|
||||
this.canGetCoupon = false;
|
||||
resolve(false);
|
||||
},
|
||||
fail: () => {
|
||||
this.canGetCoupon = false;
|
||||
resolve(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 打开优惠券弹窗
|
||||
*/
|
||||
async open() {
|
||||
const hasCoupon = await this.checkCoupon();
|
||||
if (hasCoupon) {
|
||||
this.$refs._couponPop.open();
|
||||
}
|
||||
return hasCoupon;
|
||||
},
|
||||
/**
|
||||
* 打开优惠券弹窗
|
||||
*/
|
||||
async open() {
|
||||
const hasCoupon = await this.checkCoupon();
|
||||
|
||||
/**
|
||||
* 关闭优惠券弹窗
|
||||
*/
|
||||
close() {
|
||||
this.$refs._couponPop.close();
|
||||
},
|
||||
return hasCoupon;
|
||||
},
|
||||
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
receiveCoupon() {
|
||||
if (!this.couponData || !this.couponData.goods || !this.couponData.goods.list) {
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* 关闭优惠券弹窗
|
||||
*/
|
||||
close() {
|
||||
this.$refs._couponPop.close();
|
||||
},
|
||||
|
||||
let arr = this.couponData.goods.list.map((item) => item.id);
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
receiveCoupon() {
|
||||
if (!this.couponData) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (arr.length <= 0) {
|
||||
return;
|
||||
}
|
||||
let arr = this.couponData.map((item) => item.id);
|
||||
|
||||
this.req({
|
||||
url: "receive",
|
||||
data: {
|
||||
coupon_id: arr.join(","),
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.status == 1) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "success",
|
||||
});
|
||||
}, 100);
|
||||
if (arr.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.close();
|
||||
this.$emit('received');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('优惠券组件');
|
||||
this.checkCoupon();
|
||||
}
|
||||
}
|
||||
this.req({
|
||||
url: "receive",
|
||||
data: {
|
||||
coupon_id: arr.join(","),
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.status == 1) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "success",
|
||||
});
|
||||
}, 100);
|
||||
|
||||
this.close();
|
||||
this.$emit('received');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('优惠券组件');
|
||||
this.checkCoupon();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-pop {
|
||||
width: 604rpx;
|
||||
height: 598rpx;
|
||||
position: relative;
|
||||
background: url($imgurl + "index/couponBg.png") no-repeat 0 0 / 100% 100%;
|
||||
.coupon-pop {
|
||||
width: 604rpx;
|
||||
height: 598rpx;
|
||||
position: relative;
|
||||
background: url($imgurl + "index/couponBg.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
.coupon-pop-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0 30rpx;
|
||||
.coupon-pop-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0 30rpx;
|
||||
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding-top: 128rpx;
|
||||
height: 400rpx;
|
||||
.coupon-list {
|
||||
padding-top: 128rpx;
|
||||
height: 400rpx;
|
||||
|
||||
.coupon-item {
|
||||
width: 530rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: url($imgurl + "index/couponItem.png") no-repeat 0 0 / 100% 100%;
|
||||
.coupon-item {
|
||||
width: 530rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: url($imgurl + "index/couponItem.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
>view:nth-child(1) {
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
>view:nth-child(1) {
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
|
||||
>text:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FDB075;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
>text:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FDB075;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
>text:nth-child(2) {
|
||||
font-weight: 700;
|
||||
font-size: 64rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
}
|
||||
>text:nth-child(2) {
|
||||
font-weight: 700;
|
||||
font-size: 64rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
}
|
||||
|
||||
>view:nth-child(2) {
|
||||
>text:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
>view:nth-child(2) {
|
||||
>text:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
|
||||
>text:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
}
|
||||
}
|
||||
>text:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gap-box {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
.gap-box {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.get-btn {
|
||||
margin: 120rpx auto 0;
|
||||
width: 386rpx;
|
||||
height: 102rpx;
|
||||
background: #D8FD24;
|
||||
border-radius: 26rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.get-btn {
|
||||
margin: 120rpx auto 0;
|
||||
width: 386rpx;
|
||||
height: 102rpx;
|
||||
background: #D8FD24;
|
||||
border-radius: 26rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bt-tip {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
bottom: -50rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.bt-tip {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
bottom: -50rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bt-close {
|
||||
position: absolute;
|
||||
bottom: -230rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.bt-close {
|
||||
position: absolute;
|
||||
bottom: -230rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
style="margin-top: 30rpx; flex-direction: column">
|
||||
<text style="color: black; font-weight: 600; margin-bottom: 20rpx">今日推荐</text>
|
||||
<view class="flex row align-center" style="width: 100%; height: 230rpx; justify-content: space-between;">
|
||||
<swiper style="width: 100%;height: 100%;" :display-multiple-items="3">
|
||||
<swiper autoplay style="width: 100%;height: 100%;" :display-multiple-items="3">
|
||||
<swiper-item v-for="(item, index) in tuijian" :key="index">
|
||||
<view style="background-color: gray;width: 220rpx; height: 220rpx; border-radius: 10rpx">
|
||||
<image class="" style="width: 220rpx; height: 220rpx; border-radius: 10rpx"
|
||||
|
|
|
|||
|
|
@ -1,201 +0,0 @@
|
|||
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
|
||||
<!-- watch-touch-direction-change用于开启监听列表触摸方向，只有当当前组件的列表滚动到顶部并且吸顶才需要判断-->
|
||||
<z-paging ref="paging" @scroll="scroll" v-model="dataList" @query="queryList"
|
||||
:watch-touch-direction-change="true" @touchDirectionChange="touchDirectionChange" :fixed="false"
|
||||
:scrollable="scrollable" :refresher-enabled="false" @scrolltoupper="scrolltoupper" :auto="false">
|
||||
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index">
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
<view class="item-detail">{{ item.detail }}</view>
|
||||
<view class="item-line"></view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
||||
dataList: [],
|
||||
scrollTop: 0,
|
||||
firstLoaded: false,
|
||||
//当前组件内的列表是否允许滚动
|
||||
scrollable: false,
|
||||
//是否已经吸顶了
|
||||
stickyed: false,
|
||||
//用于暂存请求结束回调方法
|
||||
completeFunc: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
// 当前组件的index，也就是当前组件是swiper中的第几个
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
// 当前swiper切换到第几个index
|
||||
currentIndex: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentIndex: {
|
||||
handler(newVal) {
|
||||
if (newVal === this.tabIndex) {
|
||||
// 懒加载，当滑动到当前的item时，才去加载
|
||||
if (!this.firstLoaded) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.paging.reload();
|
||||
setTimeout(() => {
|
||||
//首次切换到当前tab时，如果当前是吸顶状态，则设置当前列表允许滚动
|
||||
if (this.stickyed) {
|
||||
this.scrollable = true;
|
||||
}
|
||||
}, 100);
|
||||
}, 100);
|
||||
})
|
||||
}
|
||||
// 非首次切换到当前tab时，如果scrollTop=0，则页面list允许滚动
|
||||
if (this.scrollTop === 0 && this.firstLoaded) {
|
||||
this.$emit('setScrollable', true);
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// -----------组件暴露给页面调用的方法-------------
|
||||
// 当页面需要控制子组件列表是否可以滚动时调用此方法
|
||||
setScrollable(scrollable) {
|
||||
this.scrollable = scrollable;
|
||||
this.stickyed = this.scrollable;
|
||||
},
|
||||
// 当页面需要触发子组件列表刷新时调用此方法
|
||||
reload(completeFunc) {
|
||||
//先把父组件下拉刷新的回调函数存起来
|
||||
this.completeFunc = completeFunc;
|
||||
//调用z-paging的reload方法
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
|
||||
//-----------组件的私有方法-------------
|
||||
queryList(pageNo, pageSize) {
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
type: this.tabIndex + 1
|
||||
}
|
||||
let d = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
d.push({
|
||||
title: '测试' + i,
|
||||
detail: '测试' + i
|
||||
})
|
||||
}
|
||||
this.$refs.paging.complete(d);
|
||||
this.firstLoaded = true;
|
||||
// 请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
if (this.completeFunc) {
|
||||
this.completeFunc();
|
||||
}
|
||||
// this.$request.queryList(params).then(res => {
|
||||
// this.$refs.paging.complete(res.data.list);
|
||||
// this.firstLoaded = true;
|
||||
// // 请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
// if (this.completeFunc) {
|
||||
// this.completeFunc();
|
||||
// }
|
||||
// }).catch(res => {
|
||||
// // 如果请求失败写this.$refs.paging.complete(false);
|
||||
// // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
||||
// // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
||||
// this.$refs.paging.complete(false);
|
||||
// // 请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
// if (this.completeFunc) {
|
||||
// this.completeFunc();
|
||||
// }
|
||||
// })
|
||||
},
|
||||
// 当列表滚动到顶部时
|
||||
scrolltoupper() {
|
||||
this.scrollTop = 0;
|
||||
this.$emit('setScrollable', true);
|
||||
},
|
||||
// 监听列表滚动
|
||||
scroll(e) {
|
||||
this.scrollTop = e.detail.scrollTop;
|
||||
if (this.scrollTop > 10) {
|
||||
this.$emit('setScrollable', false);
|
||||
}
|
||||
// 如果组件内list滚动的时候，是未吸顶的状态，则通知页面滚动到吸顶状态并且禁止页面列表滚动
|
||||
if (!this.stickyed) {
|
||||
this.$emit('setStickyed', false);
|
||||
}
|
||||
},
|
||||
// 监听列表触摸方向(只有当当前组件的列表滚动到顶部并且吸顶才需要判断)
|
||||
touchDirectionChange(direction) {
|
||||
if (!(this.scrollTop === 0 && this.stickyed)) return;
|
||||
// 当列表滚动到顶部时
|
||||
if (direction === 'top') {
|
||||
// 用户将列表向上移动(scrollTop不断减小)，这时候要禁止当前组件的列表滚动，允许页面z-paging滚动
|
||||
this.$emit('setScrollable', true);
|
||||
this.scrollable = false;
|
||||
} else if (direction === 'bottom') {
|
||||
// 用户将列表向下移动(scrollTop不断增大)，这时候要允许当前组件的列表滚动，禁止页面z-paging滚动
|
||||
this.$emit('setScrollable', false);
|
||||
this.scrollable = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
|
||||
/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
|
||||
.content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0rpx 30rpx;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
|
||||
.item-line {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :scrollable="false"
|
||||
:hide-empty-view="hideEmptyView" :refresher-enabled="false" @contentHeightChanged="contentHeightChanged"
|
||||
:auto="false" :auto-clean-list-when-reload="false">
|
||||
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index">
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
<view class="item-detail">{{ item.detail }}</view>
|
||||
<view class="item-line"></view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
||||
dataList: [],
|
||||
height: 0,
|
||||
hideEmptyView: true,
|
||||
completeFunc: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
// 当前组件的index，也就是当前组件是swiper中的第几个
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
// 当前swiper切换到第几个index
|
||||
currentIndex: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentIndex: {
|
||||
handler(newVal) {
|
||||
if (newVal === this.tabIndex) {
|
||||
// 懒加载，当滑动到当前的item时，才去加载
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.paging.reload();
|
||||
}, 100);
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
queryList(pageNo, pageSize) {
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
type: this.tabIndex + 1
|
||||
}
|
||||
let d = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
d.push({
|
||||
title: '测试' + i,
|
||||
detail: '测试' + i
|
||||
})
|
||||
}
|
||||
setTimeout(() => {
|
||||
|
||||
this.$refs.paging.complete(d);
|
||||
this.hideEmptyView = false;
|
||||
//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
if (this.completeFunc) {
|
||||
this.completeFunc();
|
||||
}
|
||||
}, 1000);
|
||||
// this.$request.queryList(params).then(res => {
|
||||
// this.$refs.paging.complete(res.data.list);
|
||||
// this.hideEmptyView = false;
|
||||
// //请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
// if (this.completeFunc) {
|
||||
// this.completeFunc();
|
||||
// }
|
||||
// }).catch(res => {
|
||||
// // 如果请求失败写this.$refs.paging.complete(false);
|
||||
// // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
||||
// // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
||||
// this.$refs.paging.complete(false);
|
||||
// // 请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
// if (this.completeFunc) {
|
||||
// this.completeFunc();
|
||||
// }
|
||||
// })
|
||||
},
|
||||
// 页面通知当前子组件刷新列表
|
||||
reload(completeFunc) {
|
||||
// 先把父组件下拉刷新的回调函数存起来
|
||||
this.completeFunc = completeFunc;
|
||||
// 调用z-paging的reload方法
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
// 当列表高度改变时，通知页面的swiper同步更改高度
|
||||
contentHeightChanged(height) {
|
||||
const finalHeight = this.dataList.length ? height : 0;
|
||||
// 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
|
||||
const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
|
||||
this.$emit('heightChanged', Math.max(finalHeight, minHeight));
|
||||
},
|
||||
// 页面通知当前子组件加载更多数据
|
||||
doLoadMore() {
|
||||
this.$refs.paging.doLoadMore();
|
||||
},
|
||||
// 页面通知当前子组件清除数据
|
||||
clear() {
|
||||
this.$refs.paging.clear();
|
||||
this.hideEmptyView = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
|
||||
/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
|
||||
.content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0rpx 30rpx;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
|
||||
.item-line {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
"enable" : false
|
||||
},
|
||||
"devServer" : {
|
||||
"https" : true,
|
||||
"https" : false,
|
||||
"port" : 3001,
|
||||
"disableHostCheck" : true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -365,12 +365,6 @@
|
|||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shouye/newIndex",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
|
|
@ -462,7 +456,7 @@
|
|||
// "iconHeight": "10px",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/shouye/newIndex",
|
||||
"pagePath": "pages/shouye/index",
|
||||
"iconPath": "static/tab/n1.png",
|
||||
"selectedIconPath": "static/tab/c1.png",
|
||||
"text": "首页"
|
||||
|
|
|
|||
|
|
@ -1,59 +1,48 @@
|
|||
<!-- 滚动吸附效果演示(vue) -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{ top: statusBarHeight + 'px' }" @tap="jumapSlots()">
|
||||
<view class="flex" style="width: 100%">
|
||||
<view class="title1" style="width: 166rpx; height: 64rpx; margin-top: 5rpx;">
|
||||
<image :src="$img1('common/home_logo.png')" style="width: 166rpx; height: 64rpx;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
|
||||
@up="loadData">
|
||||
<view style="width: 100%;" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view style="width: 100%;height: 70rpx;"></view>
|
||||
<banner :type-id="9" :height="300" :img-width="94"></banner>
|
||||
|
||||
<!-- 公告 -->
|
||||
<view class="news-box flex row" @click="$refs.rulePop.getRule(3, '提示')">
|
||||
<image :src="$img1('common/notice.png')" style="width: 33rpx; height: 26.05rpx; margin-left: 16rpx;"
|
||||
mode=""></image>
|
||||
<view class="news-text">
|
||||
<uni-notice-bar :style="{ width: `100%` }" :speed="8" background-color="transparent" color="#333333"
|
||||
scrollable single :text="$c.filterText(gonggao)"></uni-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 今日推荐 -->
|
||||
<view class="flex yqhy" v-if="tuijian.length > 0" style="margin-top: 30rpx; flex-direction: column">
|
||||
<text style="color: black; font-weight: 600; margin-bottom: 20rpx">今日推荐</text>
|
||||
<view class="flex row align-center"
|
||||
style="width: 100%; height: 230rpx; justify-content: space-between; overflow: auto;">
|
||||
<view v-for="(item, index) in tuijian" class="recommend_item" :key="index">
|
||||
<image class="" style="width: 200rpx; height: 200rpx; border-radius: 10rpx" :src="item.imgurl"
|
||||
@click="$c.navTo(item, index)"></image>
|
||||
<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
|
||||
<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower"
|
||||
style="background-color: #fff;" @scroll="scroll">
|
||||
<!-- 自定义下拉刷新view -->
|
||||
<template #refresher="{ refresherStatus }">
|
||||
<custom-refresher :status="refresherStatus" />
|
||||
</template>
|
||||
<view class="navLeft align-center" :style="{ top: statusBarHeight + 'rpx' }">
|
||||
<view class="flex" style="width: 100%">
|
||||
<view class="title1" style="width: 166rpx; height: 64rpx; margin-top: 5rpx;">
|
||||
<image :src="$img1('common/home_logo.png')" style="width: 166rpx; height: 64rpx;" mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="tab" scroll-x>
|
||||
<view class="tab-item" v-for="(item, i) in tabList" :key="i" :class="{ act: tabCur == i }"
|
||||
@click="getlist(i)">
|
||||
{{ item.title }}
|
||||
<view style="width: 100%;" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view style="width: 100%;height: 70rpx;"></view>
|
||||
<banner :type-id="9" :height="300" :img-width="94"></banner>
|
||||
<home-page-gonggao />
|
||||
<home-page-tuijian />
|
||||
<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
|
||||
<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
|
||||
<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar">
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="qbt_con" v-if="tabCur > -1">
|
||||
<goods-item v-for="(item, index) in listdata" :key="index" :item="item"
|
||||
:tab-cur-id="tabList[tabCur].id"></goods-item>
|
||||
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
||||
<z-tabs ref="tabs" :current="current" :list="tabList" :scroll-count="1" @change="tabsChange" />
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
|
||||
@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
||||
|
||||
<home-page-goods ref="swiperList" :tabIndex="index" :currentIndex="current"
|
||||
@heightChanged="heightChanged" :goodsId="getTabGoodsId">
|
||||
</home-page-goods>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
</z-paging>
|
||||
<home-page-coupon ref="homePageCoupon" />
|
||||
|
||||
<rule-pop ref="rulePop"></rule-pop>
|
||||
<!-- <rule-pop ref="appNotice" notice-check></rule-pop> -->
|
||||
<home-page-tanchuang ref="homePageTanchuang" />
|
||||
<float-ball v-if="!$config.GetVersion()"></float-ball>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<!-- 隐私政策弹窗 -->
|
||||
<priv-pop></priv-pop>
|
||||
|
|
@ -64,62 +53,20 @@
|
|||
<script>
|
||||
import lffBarrage from "@/components/lff-barrage/lff-barrage.vue";
|
||||
import FloatBall from "@/components/float-ball/FloatBall.vue";
|
||||
import GoodsItem from "@/components/home-page/GoodsItem.vue";
|
||||
import homePageGonggao from "@/components/home-page/home-page-gonggao.vue";
|
||||
import homePageTuijian from "@/components/home-page/home-page-tuijian.vue";
|
||||
import HomePageCoupon from "@/components/home-page/home-page-coupon.vue";
|
||||
import HomePageTanchuang from "@/components/home-page/home-page-tanchuang.vue";
|
||||
import {
|
||||
getAdvert,
|
||||
getDanYe
|
||||
} from "../../common/server/config";
|
||||
import HomePageGoods from "@/components/home-page/home-page-goods.vue";
|
||||
export default {
|
||||
components: {
|
||||
lffBarrage,
|
||||
FloatBall,
|
||||
GoodsItem,
|
||||
homePageGonggao,
|
||||
homePageTuijian,
|
||||
HomePageCoupon,
|
||||
HomePageTanchuang
|
||||
},
|
||||
data() {
|
||||
let tabList = []; // this.$config.getGoodType();
|
||||
let statusBarHeight = this.$sys().statusBarHeight;
|
||||
return {
|
||||
z_imgPath: this.$z_img2 + "shouye/",
|
||||
tabList: tabList,
|
||||
tabCur: -1,
|
||||
keyword: "",
|
||||
listdata: [],
|
||||
isLoading: false,
|
||||
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
||||
downOption: {
|
||||
auto: false,
|
||||
},
|
||||
// 上拉加载的配置(可选, 绝大部分情况无需配置)
|
||||
upOption: {
|
||||
auto: true,
|
||||
page: {
|
||||
size: 15, // 每页数据的数量,默认10
|
||||
},
|
||||
},
|
||||
advert: [], //轮播图
|
||||
tuijian: [], //推荐上新
|
||||
aa: false,
|
||||
gonggao: "",
|
||||
couponData: "",
|
||||
canGetCoupon: false,
|
||||
swCur: 0,
|
||||
statusBarHeight
|
||||
};
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
this.aa = false;
|
||||
},
|
||||
onHide() {
|
||||
clearInterval(this.timer);
|
||||
this.aa = false;
|
||||
let pages = getCurrentPages();
|
||||
// console.log(11, this.$mp.page.route)
|
||||
uni.setStorageSync("page", this.$mp.page.route);
|
||||
HomePageTanchuang,
|
||||
HomePageGoods
|
||||
},
|
||||
onLoad(v) {
|
||||
console.log("参数", v);
|
||||
|
|
@ -130,27 +77,104 @@ export default {
|
|||
if (v.scene) {
|
||||
uni.setStorageSync("pid", v.scene);
|
||||
}
|
||||
this.tabList = this.$config.getGoodType();
|
||||
this.tabCur = 0;
|
||||
this.goodType = this.$config.getGoodType();
|
||||
this.tabIndex = 0;
|
||||
|
||||
},
|
||||
onShow() {
|
||||
let that = this;
|
||||
this.aa = true;
|
||||
// this.getCoupon();
|
||||
console.log(this.$refs.homePageCoupon);
|
||||
|
||||
this.$refs.homePageCoupon && this.$refs.homePageCoupon.checkCoupon();
|
||||
if (!this.isLoading) {
|
||||
this.getnews();
|
||||
this.$refs.homePageTanchuang && this.$refs.homePageTanchuang.checkNotice();
|
||||
},
|
||||
computed: {
|
||||
tabList() {
|
||||
return this.goodType.map(item => item.title);
|
||||
},
|
||||
getTabGoodsId() {
|
||||
return this.goodType[this.current]?.id ?? 0;
|
||||
}
|
||||
if (this.tabList.length == 0) {
|
||||
this.tabList = this.$config.getGoodType();
|
||||
this.tabCur = 0;
|
||||
}
|
||||
this.canGetCoupon = true;
|
||||
},
|
||||
|
||||
data() {
|
||||
let statusBarHeight = this.$sys().statusBarHeight;
|
||||
return {
|
||||
current: 0,
|
||||
statusBarHeight,
|
||||
goodType: [],
|
||||
swiperHeight: 0,
|
||||
tabsBarHeight: 0,
|
||||
observer: null,
|
||||
isQuerying: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {
|
||||
// #ifdef MP
|
||||
if (e.detail.scrollTop < 700 && this.statusBarHeight > 0) {
|
||||
if (this.isQuerying) {
|
||||
return;
|
||||
}
|
||||
this.isQuerying = true;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.bar-view').boundingClientRect(rect => {
|
||||
if (rect) {
|
||||
// 判断元素是否粘滞
|
||||
if (rect.top <= 30) {
|
||||
this.tabsBarHeight = this.statusBarHeight;
|
||||
} else if (rect.top > 30 && this.statusBarHeight > 0) {
|
||||
this.tabsBarHeight = 0;
|
||||
}
|
||||
}
|
||||
this.isQuerying = false;
|
||||
|
||||
}).exec();
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
tabsChange(index) {
|
||||
// this.tabIndex = index;
|
||||
// 当切换tab时请调用组件的reload方法，请勿直接调用：queryList方法！！
|
||||
// this.$refs.paging.reload();
|
||||
this._setCurrent(index);
|
||||
},
|
||||
// 下拉刷新时，通知当前显示的列表进行reload操作
|
||||
onRefresh() {
|
||||
this.$refs.swiperList[this.current].reload(() => {
|
||||
//当当前显示的列表刷新结束，结束当前页面的刷新状态
|
||||
this.$refs.pagePaging.endRefresh();
|
||||
});
|
||||
},
|
||||
// 当滚动到底部时，通知当前显示的列表加载更多
|
||||
scrolltolower() {
|
||||
console.log("this.current", this.current);
|
||||
|
||||
this.$refs.swiperList[this.current].doLoadMore();
|
||||
},
|
||||
// swiper滑动中
|
||||
swiperTransition(e) {
|
||||
this.$refs.tabs.setDx(e.detail.dx);
|
||||
},
|
||||
// swiper滑动结束
|
||||
swiperAnimationfinish(e) {
|
||||
this._setCurrent(e.detail.current);
|
||||
this.$refs.tabs.unlockDx();
|
||||
},
|
||||
// 设置swiper的高度
|
||||
heightChanged(height) {
|
||||
if (height === 0) {
|
||||
// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
|
||||
// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
|
||||
height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
|
||||
}
|
||||
this.swiperHeight = height;
|
||||
},
|
||||
_setCurrent(current) {
|
||||
if (current !== this.current) {
|
||||
//切换tab时，将上一个tab的数据清空
|
||||
this.$refs.swiperList[this.current].clear();
|
||||
}
|
||||
this.current = current;
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
let imageUrl = this.$config.getShareImageUrl();
|
||||
return {
|
||||
|
|
@ -159,513 +183,67 @@ export default {
|
|||
|
||||
path: "/pages/shouye/index?pid=" + uni.getStorageSync("userinfo").ID,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 删除getBallStyle和getPopupStyle方法
|
||||
},
|
||||
methods: {
|
||||
// 删除BallClick和getFloatBall方法
|
||||
|
||||
swChange(e) {
|
||||
this.swCur = e.detail.current;
|
||||
},
|
||||
|
||||
|
||||
async getnews() {
|
||||
this.isLoading = true;
|
||||
const advert = await getAdvert(1);
|
||||
this.advert = advert;
|
||||
const tuijian = await getAdvert(5);
|
||||
this.tuijian = tuijian;
|
||||
console.log("tuijiantuijiantuijiantuijiantuijian", tuijian);
|
||||
|
||||
const gonggao = await getDanYe(3);
|
||||
this.gonggao = gonggao.content;
|
||||
|
||||
this.isLoading = false;
|
||||
},
|
||||
|
||||
loadData({
|
||||
num,
|
||||
size
|
||||
}) {
|
||||
// 模拟接口
|
||||
let that = this;
|
||||
that.req({
|
||||
url: "goods",
|
||||
data: {
|
||||
page: num,
|
||||
type: that.tabList[that.tabCur].id,
|
||||
keyword: that.keyword,
|
||||
},
|
||||
success: function (res) {
|
||||
|
||||
let _data = res.data.data;
|
||||
let isWXPay = that.$config.GetVersion()
|
||||
if (isWXPay) {
|
||||
let _data2 = [];
|
||||
for (let i = 0; i < _data.length; i++) {
|
||||
if (_data[i].title.indexOf('京东卡') == -1) {
|
||||
_data2.push(_data[i]);
|
||||
}
|
||||
}
|
||||
_data = _data2;
|
||||
}
|
||||
that.mescroll.endByPage(_data.length, res.data.last_page);
|
||||
if (num == 1) {
|
||||
that.listdata = _data;
|
||||
} else {
|
||||
that.listdata = that.listdata.concat(_data);
|
||||
}
|
||||
console.log(that.listdata);
|
||||
},
|
||||
});
|
||||
},
|
||||
todetails(e) {
|
||||
// 无限赏
|
||||
let url = "/pages/shouye/detail";
|
||||
let params = {
|
||||
goods_id: e.id,
|
||||
// type_text: e.type_text
|
||||
};
|
||||
|
||||
if (e.type == 2 || e.type == 8 || e.type == 16) {
|
||||
url = "/pages/shouye/detail_wuxian";
|
||||
}
|
||||
|
||||
if (e.type == 9) {
|
||||
url = "/package/index/lian-ji";
|
||||
}
|
||||
if (e.type == 3) {
|
||||
url = "/package/index/leitai";
|
||||
}
|
||||
|
||||
this.$customRouter.navigateTo(url, params);
|
||||
},
|
||||
getlist(v) {
|
||||
this.tabCur = v;
|
||||
this.listdata = [];
|
||||
this.mescroll.resetUpScroll();
|
||||
this.mescroll.scrollTo(0, 0);
|
||||
|
||||
// this.loadData(1)
|
||||
},
|
||||
|
||||
toRanking() {
|
||||
this.$customRouter.navigateTo("/pages/shouye/ranking");
|
||||
},
|
||||
toyaqingRanking() {
|
||||
this.$customRouter.navigateTo("/pages/shouye/yaoqing_ranking");
|
||||
},
|
||||
|
||||
jumapSlots() {
|
||||
// this.$customRouter.navigateTo("/pages/other/web-detail-lucky");
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.title1 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
<style>
|
||||
.swiper {}
|
||||
|
||||
.status-bar {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recommend_item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
flex: 0 0 auto;
|
||||
background-color: gray;
|
||||
margin-right: 40rpx;
|
||||
.zp-paging-touch-view {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.zp-scroll-view-container {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.banner-view {
|
||||
background-color: #007AFF;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0rpx 30rpx;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
|
||||
.item-line {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
z-index: 100;
|
||||
z-index: 96;
|
||||
|
||||
>view {
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pop {
|
||||
width: 506rpx;
|
||||
height: 380px;
|
||||
position: relative;
|
||||
background: #b198e2;
|
||||
|
||||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(137, 77, 211, 0.33);
|
||||
border-radius: 44rpx;
|
||||
|
||||
>view:nth-child(1) {
|
||||
padding-top: 40rpx;
|
||||
|
||||
>image {
|
||||
width: 430rpx;
|
||||
height: 430rpx;
|
||||
margin: 0 auto 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&-view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 506rpx;
|
||||
height: 276rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 68rpx 0 0 40rpx;
|
||||
background: url($imgurl + "index/hudu.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
>text:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 52rpx;
|
||||
color: #894dd3;
|
||||
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
|
||||
}
|
||||
|
||||
>text:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #894dd3;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&-liwu {
|
||||
position: absolute;
|
||||
right: -160rpx;
|
||||
width: 380rpx;
|
||||
height: 260rpx;
|
||||
bottom: -60rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&-close {
|
||||
width: 94rpx;
|
||||
height: 94rpx;
|
||||
position: absolute;
|
||||
bottom: -140rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.image2 {
|
||||
width: 115rpx;
|
||||
height: 62rpx;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
|
||||
.gonggao {
|
||||
width: 750rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 39rpx;
|
||||
margin: 0rpx auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
/* position: relative; */
|
||||
position: absolute;
|
||||
top: 330rpx;
|
||||
z-index: 16;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.header-left-title {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 88rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10rpx;
|
||||
|
||||
image {
|
||||
width: 230rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
width: 750rpx;
|
||||
height: 460rpx;
|
||||
margin: 40rpx auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-dot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -40rpx;
|
||||
z-index: 10;
|
||||
|
||||
.sw-dot-item {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
margin: 0 8rpx;
|
||||
transition: 0.3s;
|
||||
|
||||
&.act {
|
||||
width: 18rpx;
|
||||
background-color: #ff873a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yh_bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.news-box {
|
||||
width: 686rpx;
|
||||
height: 52rpx;
|
||||
margin: 40rpx auto 0;
|
||||
display: flex;
|
||||
background-color: #F8F8F8;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.news-text {
|
||||
width: 600rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 18rpx;
|
||||
|
||||
::v-deep.uni-noticebar__content-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav1 {
|
||||
width: 710rpx;
|
||||
margin: 30rpx auto 0;
|
||||
|
||||
>view:nth-child(1) {
|
||||
width: 284rpx;
|
||||
height: 349rpx;
|
||||
}
|
||||
|
||||
>view:nth-child(2) {
|
||||
height: 349rpx;
|
||||
|
||||
>image:nth-child(1) {
|
||||
width: 423rpx;
|
||||
height: 183rpx;
|
||||
}
|
||||
|
||||
>image:nth-child(2) {
|
||||
width: 423rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yqhy {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
margin-top: 30rpx;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.nav2 {
|
||||
width: 710rpx;
|
||||
height: 170rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 50rpx 0 30rpx;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tab-list-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-size: auto 100%;
|
||||
background-position: center center;
|
||||
padding: 0 30rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #cccccc;
|
||||
height: 70rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.active {
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
white-space: nowrap;
|
||||
margin-top: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
margin-right: 50rpx;
|
||||
padding: 20rpx 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
&.act {
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 60rpx;
|
||||
height: 4rpx;
|
||||
background: #333333;
|
||||
border-radius: 30rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 4rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.title_ipt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20rpx auto;
|
||||
border-radius: 30rpx;
|
||||
padding-left: 30rpx;
|
||||
width: 620rpx;
|
||||
height: 58rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title_ipt>image {
|
||||
width: 33rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
|
||||
.title_ipt>input {
|
||||
width: 90%;
|
||||
height: 58rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 105rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 58rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.title_ipt>view {
|
||||
width: 90rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(0deg, #1ac762 0%, #35ed85 100%);
|
||||
border-radius: 18rpx;
|
||||
font-size: 26rpx;
|
||||
color: #111111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.qiehuan {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
width: 690rpx;
|
||||
margin: 20rpx auto 0;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.qiehuan_line {
|
||||
margin: -10rpx auto;
|
||||
width: 50rpx;
|
||||
height: 20rpx;
|
||||
border-bottom: 4rpx solid #ff7514;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.qiehuan>view {
|
||||
margin-right: 10rpx;
|
||||
/* flex: 1;
|
||||
text-align: center; */
|
||||
}
|
||||
|
||||
.wzs {
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.xzs {
|
||||
font-size: 34rpx;
|
||||
color: #ff7514;
|
||||
}
|
||||
|
||||
.qbt_con {
|
||||
|
|
@ -675,133 +253,7 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.coupon-pop {
|
||||
width: 604rpx;
|
||||
height: 598rpx;
|
||||
position: relative;
|
||||
background: url($imgurl + "index/couponBg.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
.coupon-pop-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0 30rpx;
|
||||
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding-top: 128rpx;
|
||||
height: 400rpx;
|
||||
|
||||
.coupon-item {
|
||||
width: 530rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: url($imgurl + "index/couponItem.png") no-repeat 0 0 / 100% 100%;
|
||||
|
||||
>view:nth-child(1) {
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
|
||||
|
||||
>text:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FDB075;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
>text:nth-child(2) {
|
||||
font-weight: 700;
|
||||
font-size: 64rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
}
|
||||
|
||||
>view:nth-child(2) {
|
||||
>text:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
|
||||
>text:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FDB075;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gap-box {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.get-btn {
|
||||
margin: 120rpx auto 0;
|
||||
width: 386rpx;
|
||||
height: 102rpx;
|
||||
background: #D8FD24;
|
||||
border-radius: 26rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bt-tip {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
bottom: -50rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bt-close {
|
||||
position: absolute;
|
||||
bottom: -230rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.group-fixed1 {
|
||||
// 删除此样式
|
||||
}
|
||||
|
||||
.pop-ball {
|
||||
// 删除此样式
|
||||
}
|
||||
|
||||
.pop-ball-close {
|
||||
// 删除此样式
|
||||
.content {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
<!-- 滚动吸附效果演示(vue) -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
|
||||
<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower"
|
||||
style="background-color: #fff;" @scroll="scroll">
|
||||
<!-- 自定义下拉刷新view -->
|
||||
<template #refresher="{ refresherStatus }">
|
||||
<custom-refresher :status="refresherStatus" />
|
||||
</template>
|
||||
<view class="navLeft align-center" :style="{ top: statusBarHeight + 'rpx' }">
|
||||
<view class="flex" style="width: 100%">
|
||||
<view class="title1" style="width: 166rpx; height: 64rpx; margin-top: 5rpx;">
|
||||
<image :src="$img1('common/home_logo.png')" style="width: 166rpx; height: 64rpx;" mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 100%;" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view style="width: 100%;height: 70rpx;"></view>
|
||||
<banner :type-id="9" :height="300" :img-width="94"></banner>
|
||||
<home-page-gonggao />
|
||||
<home-page-tuijian />
|
||||
<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
|
||||
<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
|
||||
<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar">
|
||||
|
||||
</view>
|
||||
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
||||
<z-tabs ref="tabs" :current="current" :list="tabList" :scroll-count="1" @change="tabsChange" />
|
||||
</view>
|
||||
<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
|
||||
@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
||||
|
||||
<home-page-goods ref="swiperList" :tabIndex="index" :currentIndex="current"
|
||||
@heightChanged="heightChanged" :goodsId="getTabGoodsId">
|
||||
</home-page-goods>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
</z-paging>
|
||||
<home-page-coupon ref="homePageCoupon" />
|
||||
<home-page-tanchuang ref="homePageTanchuang" />
|
||||
<float-ball v-if="!$config.GetVersion()"></float-ball>
|
||||
<!-- #ifdef MP -->
|
||||
<!-- 隐私政策弹窗 -->
|
||||
<priv-pop></priv-pop>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lffBarrage from "@/components/lff-barrage/lff-barrage.vue";
|
||||
import FloatBall from "@/components/float-ball/FloatBall.vue";
|
||||
import homePageGonggao from "@/components/home-page/home-page-gonggao.vue";
|
||||
import homePageTuijian from "@/components/home-page/home-page-tuijian.vue";
|
||||
import HomePageCoupon from "@/components/home-page/home-page-coupon.vue";
|
||||
import HomePageTanchuang from "@/components/home-page/home-page-tanchuang.vue";
|
||||
import HomePageGoods from "@/components/home-page/home-page-goods.vue";
|
||||
export default {
|
||||
components: {
|
||||
lffBarrage,
|
||||
FloatBall,
|
||||
homePageGonggao,
|
||||
homePageTuijian,
|
||||
HomePageCoupon,
|
||||
HomePageTanchuang,
|
||||
HomePageGoods
|
||||
},
|
||||
onLoad(v) {
|
||||
console.log("参数", v);
|
||||
|
||||
if (v.pid) {
|
||||
uni.setStorageSync("pid", v.pid);
|
||||
}
|
||||
if (v.scene) {
|
||||
uni.setStorageSync("pid", v.scene);
|
||||
}
|
||||
this.goodType = this.$config.getGoodType();
|
||||
this.tabIndex = 0;
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.$refs.homePageCoupon && this.$refs.homePageCoupon.checkCoupon();
|
||||
this.$refs.homePageTanchuang && this.$refs.homePageTanchuang.checkNotice();
|
||||
},
|
||||
computed: {
|
||||
tabList() {
|
||||
return this.goodType.map(item => item.title);
|
||||
},
|
||||
getTabGoodsId() {
|
||||
return this.goodType[this.current].id;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
let statusBarHeight = this.$sys().statusBarHeight;
|
||||
return {
|
||||
current: 0,
|
||||
statusBarHeight,
|
||||
goodType: [],
|
||||
swiperHeight: 0,
|
||||
tabsBarHeight: 0,
|
||||
observer: null,
|
||||
isQuerying: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {
|
||||
// #ifdef MP
|
||||
if (e.detail.scrollTop < 700 && this.statusBarHeight > 0) {
|
||||
if (this.isQuerying) {
|
||||
return;
|
||||
}
|
||||
this.isQuerying = true;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.bar-view').boundingClientRect(rect => {
|
||||
if (rect) {
|
||||
// 判断元素是否粘滞
|
||||
if (rect.top <= 30) {
|
||||
this.tabsBarHeight = this.statusBarHeight;
|
||||
} else if (rect.top > 30 && this.statusBarHeight > 0) {
|
||||
this.tabsBarHeight = 0;
|
||||
}
|
||||
}
|
||||
this.isQuerying = false;
|
||||
|
||||
}).exec();
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
tabsChange(index) {
|
||||
// this.tabIndex = index;
|
||||
// 当切换tab时请调用组件的reload方法，请勿直接调用：queryList方法！！
|
||||
// this.$refs.paging.reload();
|
||||
this._setCurrent(index);
|
||||
},
|
||||
// 下拉刷新时，通知当前显示的列表进行reload操作
|
||||
onRefresh() {
|
||||
this.$refs.swiperList[this.current].reload(() => {
|
||||
//当当前显示的列表刷新结束，结束当前页面的刷新状态
|
||||
this.$refs.pagePaging.endRefresh();
|
||||
});
|
||||
},
|
||||
// 当滚动到底部时，通知当前显示的列表加载更多
|
||||
scrolltolower() {
|
||||
console.log("this.current", this.current);
|
||||
|
||||
this.$refs.swiperList[this.current].doLoadMore();
|
||||
},
|
||||
// swiper滑动中
|
||||
swiperTransition(e) {
|
||||
this.$refs.tabs.setDx(e.detail.dx);
|
||||
},
|
||||
// swiper滑动结束
|
||||
swiperAnimationfinish(e) {
|
||||
this._setCurrent(e.detail.current);
|
||||
this.$refs.tabs.unlockDx();
|
||||
},
|
||||
// 设置swiper的高度
|
||||
heightChanged(height) {
|
||||
if (height === 0) {
|
||||
// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
|
||||
// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
|
||||
height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
|
||||
}
|
||||
this.swiperHeight = height;
|
||||
},
|
||||
_setCurrent(current) {
|
||||
if (current !== this.current) {
|
||||
//切换tab时，将上一个tab的数据清空
|
||||
this.$refs.swiperList[this.current].clear();
|
||||
}
|
||||
this.current = current;
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
let imageUrl = this.$config.getShareImageUrl();
|
||||
return {
|
||||
imageUrl: imageUrl,
|
||||
title: this.$config.getAppSetting("app_name") + "，正版潮玩手办一番赏",
|
||||
|
||||
path: "/pages/shouye/index?pid=" + uni.getStorageSync("userinfo").ID,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.swiper {}
|
||||
|
||||
.status-bar {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zp-paging-touch-view {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.zp-scroll-view-container {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.banner-view {
|
||||
background-color: #007AFF;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0rpx 30rpx;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
|
||||
.item-line {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
z-index: 96;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.qbt_con {
|
||||
padding: 1rpx 30rpx 100rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
15
vue.config.js
Normal file
15
vue.config.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
module.exports = {
|
||||
chainWebpack: (config) => {
|
||||
// 发行或运行时启用了压缩时会生效
|
||||
config.optimization.minimizer('terser').tap((args) => {
|
||||
const compress = args[0].terserOptions.compress
|
||||
// 非 App 平台移除 console 代码(包含所有 console 方法，如 log,debug,info...)
|
||||
compress.drop_console = true
|
||||
compress.pure_funcs = [
|
||||
'__f__', // App 平台 vue 移除日志代码
|
||||
// 'console.debug' // 可移除指定的 console 方法
|
||||
]
|
||||
return args
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user