优化
This commit is contained in:
zpc
parent
6e3ea0090c
commit
f99467f3a2
|
|
@ -30,8 +30,11 @@ class BasePlatform {
|
|||
}
|
||||
async appData() {
|
||||
await this.loadCacheData();
|
||||
// uni.switchTab({
|
||||
// url: '/pages/shouye/index'
|
||||
// });
|
||||
uni.switchTab({
|
||||
url: '/pages/shouye/index'
|
||||
url: '/pages/shouye/newIndex'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -227,8 +227,11 @@ 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/index'
|
||||
url: '/pages/shouye/newIndex'
|
||||
});
|
||||
// this.getConfig().then(res => {
|
||||
// console.log(res, 'res');
|
||||
|
|
|
|||
35
common/server/goods.js
Normal file
35
common/server/goods.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import RequestManager from '../request';
|
||||
import common from '../common';
|
||||
import { platform } from '@/common/platform/PlatformFactory'
|
||||
import ConfigManager from './../config';
|
||||
import { sleep } from '../util';
|
||||
/**
|
||||
* 获取商品列表
|
||||
* @param {number} page
|
||||
* @param {number} type
|
||||
* @param {string} keyword
|
||||
* @returns
|
||||
*/
|
||||
export const getGoods = async (page, type, keyword) => {
|
||||
const res = await RequestManager.getCache("goods", {
|
||||
page,
|
||||
type,
|
||||
keyword
|
||||
});
|
||||
await sleep(1000);
|
||||
if (res.status == 1) {
|
||||
let isWXShenHe = ConfigManager.GetVersion();
|
||||
let _data = res.data.data;
|
||||
if (isWXShenHe) {
|
||||
let _data2 = [];
|
||||
for (let i = 0; i < _data.length; i++) {
|
||||
if (_data[i].title.indexOf('京东卡') == -1) {
|
||||
_data2.push(_data[i]);
|
||||
}
|
||||
}
|
||||
_data = _data2;
|
||||
}
|
||||
return _data;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
61
components/custom-refresher/custom-refresher.vue
Normal file
61
components/custom-refresher/custom-refresher.vue
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!-- z-paging自定义的下拉刷新view -->
|
||||
<template>
|
||||
<view class="refresher-container">
|
||||
<!-- 这里的图片请换成自己项目的图片 -->
|
||||
<image class="refresher-image" mode="aspectFit" src="@/static/refresher_loading.gif"></image>
|
||||
<text class="refresher-text">{{statusText}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
statusText() {
|
||||
// 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue);
|
||||
// 获取到当前语言之后，就可以自定义不同语言下的展示内容了
|
||||
const statusTextMap = {
|
||||
'default': '哎呀，用点力继续下拉！',
|
||||
'release-to-refresh': '拉疼我啦，松手刷新~~',
|
||||
'loading': '正在努力刷新中...',
|
||||
'complete': '刷新成功啦~'
|
||||
};
|
||||
return statusTextMap[this.status];
|
||||
}
|
||||
},
|
||||
props: {
|
||||
status: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.refresher-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
height: 150rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.refresher-image {
|
||||
margin-top: 10rpx;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.refresher-text {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
208
components/home-page/GoodsItem.vue
Normal file
208
components/home-page/GoodsItem.vue
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
<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>
|
||||
</view>
|
||||
<view v-if="item.stock" class="qbt_con_item_price">
|
||||
<text>{{ item.sale_stock }}/{{ item.stock }}</text>
|
||||
<image :src="$img1('index/box.png')" style="width: 20rpx; height: 18rpx"></image>
|
||||
</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>
|
||||
</view>
|
||||
<view v-if="item.is_shou_zhe == 1" class="half-tag">
|
||||
<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GoodsItem',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
tabCurId: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toDetails(item) {
|
||||
// 无限赏
|
||||
let url = "/pages/shouye/detail";
|
||||
let 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";
|
||||
}
|
||||
|
||||
this.$customRouter.navigateTo(url, params);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qbt_con_item {
|
||||
width: 330rpx;
|
||||
height: 505rpx;
|
||||
margin-top: 30rpx;
|
||||
position: relative;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.image1 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
|
||||
.image3 {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
min-width: 68rpx;
|
||||
padding: 0 6rpx;
|
||||
height: 32rpx;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
font-size: 16rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.half-tag {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 250rpx;
|
||||
z-index: 1;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_1 {
|
||||
width: 100%;
|
||||
height: 332rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list_1>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list_2 {
|
||||
padding: 28rpx 20rpx 0;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.redu {
|
||||
margin-top: 24rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.qbt_con_item_3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.item-price {
|
||||
font-size: 16rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qbt_con_item_price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18rpx;
|
||||
font-weight: 400;
|
||||
color: #6c6c6c;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
240
components/home-page/home-page-coupon.vue
Normal file
240
components/home-page/home-page-coupon.vue
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
<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>
|
||||
</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 && res.data.status != 2) {
|
||||
res.data.totalMoney = 0;
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 打开优惠券弹窗
|
||||
*/
|
||||
async open() {
|
||||
const hasCoupon = await this.checkCoupon();
|
||||
if (hasCoupon) {
|
||||
this.$refs._couponPop.open();
|
||||
}
|
||||
return hasCoupon;
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭优惠券弹窗
|
||||
*/
|
||||
close() {
|
||||
this.$refs._couponPop.close();
|
||||
},
|
||||
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
receiveCoupon() {
|
||||
if (!this.couponData || !this.couponData.goods || !this.couponData.goods.list) {
|
||||
return;
|
||||
}
|
||||
|
||||
let arr = this.couponData.goods.list.map((item) => item.id);
|
||||
|
||||
if (arr.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
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-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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
components/home-page/home-page-gonggao.vue
Normal file
64
components/home-page/home-page-gonggao.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<!-- 公告 -->
|
||||
<view>
|
||||
<view class="news-box flex row" @click="$refs.gonggaoRulePop.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>
|
||||
<rule-pop ref="gonggaoRulePop"></rule-pop>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDanYe
|
||||
} from "../../common/server/config";
|
||||
export default {
|
||||
name: 'home-page-gonggao',
|
||||
data() {
|
||||
return {
|
||||
gonggao: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getGonggao() {
|
||||
const gonggao = await getDanYe(3);
|
||||
this.gonggao = gonggao.content;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getGonggao();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
185
components/home-page/home-page-goods.vue
Normal file
185
components/home-page/home-page-goods.vue
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<!-- 在这个文件对每个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">
|
||||
<template #refresher="{ refresherStatus }">
|
||||
<custom-refresher :status="refresherStatus" />
|
||||
</template>
|
||||
<view class="qbt_con">
|
||||
<goods-item :item="item" v-for="(item, index) in dataList" :key="index"
|
||||
:tab-cur-id="goodsId"></goods-item>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoods } from "@/common/server/goods";
|
||||
import GoodsItem from "@/components/home-page/GoodsItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
GoodsItem
|
||||
},
|
||||
name: 'home-page-goods',
|
||||
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
|
||||
}
|
||||
},
|
||||
goodsId: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentIndex: {
|
||||
handler(newVal) {
|
||||
if (newVal === this.tabIndex) {
|
||||
// 懒加载，当滑动到当前的item时，才去加载
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.paging.reload(true);
|
||||
}, 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
|
||||
})
|
||||
}
|
||||
getGoods(pageNo, this.goodsId, "").then(res => {
|
||||
this.$refs.paging.complete(res || []);
|
||||
this.hideEmptyView = false;
|
||||
//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
if (this.completeFunc) {
|
||||
this.completeFunc();
|
||||
}
|
||||
}).catch(res => {
|
||||
this.$refs.paging.complete(false);
|
||||
})
|
||||
|
||||
// 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(false);
|
||||
},
|
||||
// 当列表高度改变时，通知页面的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;
|
||||
}
|
||||
|
||||
.qbt_con {
|
||||
padding: 1rpx 30rpx 100rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
39
components/home-page/home-page-tanchuang.vue
Normal file
39
components/home-page/home-page-tanchuang.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<view>
|
||||
<rule-pop ref="appNotice" notice-check></rule-pop>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'home-page-tanchuang',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkNotice() {
|
||||
let is_shou_tan = this.$config.getBaseConfigKey("is_shou_tan");
|
||||
if (is_shou_tan != 1) {
|
||||
return;
|
||||
}
|
||||
/* 上次勾选(今日不再提醒)的日期 */
|
||||
const _last_notice_date = uni.getStorageSync("_last_notice_date");
|
||||
/* 本次打开app是否已经弹过公告弹窗 */
|
||||
const _is_this_show = uni.getStorageSync("_is_this_show");
|
||||
const nowDate = this.$c.getDateTime();
|
||||
if (_last_notice_date != nowDate && !_is_this_show) {
|
||||
this.$refs.appNotice.getRule(19, "公告");
|
||||
uni.setStorageSync("_is_this_show", true);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checkNotice();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
73
components/home-page/home-page-tuijian.vue
Normal file
73
components/home-page/home-page-tuijian.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<!-- 今日推荐 -->
|
||||
<view>
|
||||
<!-- 今日推荐 -->
|
||||
<view class="flex yqhy" v-if="tuijian != null && 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;">
|
||||
<swiper 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"
|
||||
:src="item.imgurl" @click="$c.navTo(item, index)"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDanYe, getAdvert
|
||||
} from "../../common/server/config";
|
||||
export default {
|
||||
name: 'home-page-tuijian',
|
||||
data() {
|
||||
return {
|
||||
tuijian: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTuiJian() {
|
||||
const tuijian = await getAdvert(5);
|
||||
this.tuijian = tuijian;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTuiJian();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.yqhy {
|
||||
width: calc(100% - 32rpx - 16rpx);
|
||||
height: 300rpx;
|
||||
margin-top: 30rpx;
|
||||
margin-left: 32rpx;
|
||||
|
||||
.nav2 {
|
||||
width: 710rpx;
|
||||
height: 170rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend_item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
flex: 0 0 auto;
|
||||
background-color: gray;
|
||||
margin-right: 40rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -69,7 +69,6 @@ export default {
|
|||
|
||||
open(opt) {
|
||||
this.ruleData = opt
|
||||
|
||||
this.$refs._rule_pop.open()
|
||||
},
|
||||
|
||||
|
|
|
|||
201
components/sticky-swiper-item/sticky-swiper-item.vue
Normal file
201
components/sticky-swiper-item/sticky-swiper-item.vue
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<!-- 在这个文件对每个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>
|
||||
163
components/sticky-swiper-next-item/sticky-swiper-next-item.vue
Normal file
163
components/sticky-swiper-next-item/sticky-swiper-next-item.vue
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<!-- 在这个文件对每个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>
|
||||
|
|
@ -365,6 +365,12 @@
|
|||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shouye/newIndex",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
|
|
@ -456,7 +462,7 @@
|
|||
// "iconHeight": "10px",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/shouye/index",
|
||||
"pagePath": "pages/shouye/newIndex",
|
||||
"iconPath": "static/tab/n1.png",
|
||||
"selectedIconPath": "static/tab/c1.png",
|
||||
"text": "首页"
|
||||
|
|
|
|||
|
|
@ -38,8 +38,11 @@ export default {
|
|||
methods: {
|
||||
toHome() {
|
||||
// #ifdef H5 || MP
|
||||
// uni.switchTab({
|
||||
// url: '/pages/shouye/index'
|
||||
// });
|
||||
uni.switchTab({
|
||||
url: '/pages/shouye/index'
|
||||
url: '/pages/shouye/newIndex'
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
259
pages/shouye/newIndex.vue
Normal file
259
pages/shouye/newIndex.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<!-- 滚动吸附效果演示(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>
|
||||
BIN
static/refresher_loading.gif
Normal file
BIN
static/refresher_loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Loading…
Reference in New Issue
Block a user