jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

dev_xrcc
jiazhipeng 4 months ago
parent
0b4dc57050
commit
0f406641da
4 changed files with 103 additions and 436 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      components/CustomTabBar.vue
  2. 1
      components/header.vue
  3. 438
      pages/index/index.vue
  4. 96
      pages/index/readingBody.vue

4
components/CustomTabBar.vue
View File

@ -54,7 +54,7 @@ export default {
const pages = getCurrentPages(); const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; const currentPage = pages[pages.length - 1];
const currentPath = currentPage.route; const currentPath = currentPage.route;
tabBarList.forEach((item, index) => { this.tabBarList.forEach((item, index) => {
if (item.pagePath === currentPath) { if (item.pagePath === currentPath) {
this.currentTab = index; this.currentTab = index;
} }
@ -63,7 +63,7 @@ export default {
switchTab(index) { switchTab(index) {
if (this.currentTab === index) return; if (this.currentTab === index) return;
uni.switchTab({ uni.switchTab({
url: '/' + tabBarList[index].pagePath url: '/' + this.tabBarList[index].pagePath
}); });
} }
} }

1
components/header.vue
View File

@ -31,6 +31,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.header{ .header{
flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

438
pages/index/index.vue
View File

@ -13,77 +13,18 @@
components: {CustomTabBar,headerVue}, components: {CustomTabBar,headerVue},
data() { data() {
return { return {
// 导航栏参数
height: 0,
statusBarHeight: 0,
topBanner: [],
smallBanner: [],
menuList: [
{
path: '/subPackages/techan/index?idIndex=0',
image: '',
},
{
path: '/subPackages/techan/index?idIndex=1',
image: '',
},
{
path: '/subPackages/techan/index?idIndex=2',
image: '',
},
{
path: '/subPackages/techan/index?idIndex=3',
image: '',
},
{
path: '/subPackages/techan/index?idIndex=4',
image: '',
},
{
path: '/subPackages/techan/index?idIndex=5',
image: '',
}
],
handwrittenList: [],
shiguang: {},
hotType: [
{
title: '好物推荐',
id: '41'
},
{
title: '苏州非遗',
id: '41'
}
],
hotIndex: 0,
hotList: [],
hotList1: [],
isLoading: false,
limit: 4,
} }
}, },
onLoad() { onLoad() {
}, },
onReady() { onReady() {
// 获取经纬度
// if(!uni.getStorageSync('location')) {
// this.getLocation()
// }
this.initRectInfo()
this.getList()
this.initHotList()
this.changeType(0)
}, },
onReachBottom() { onReachBottom() {
// setTimeout(() => {
// // if (!this.isLoading) this.getHotList();
// this.getHotList()
// }, 1000);
}, },
methods: { methods: {
viewDetail(item) { viewDetail(item) {
@ -97,12 +38,7 @@
url:'/subPackages/letter/detail?id='+item.id url:'/subPackages/letter/detail?id='+item.id
}) })
}, },
initRectInfo () {
const sysInfo = uni.getSystemInfoSync()
this.statusBarHeight = sysInfo.statusBarHeight
// 默认高度
this.height = sysInfo.statusBarHeight + 40
},
getList() { getList() {
// 大轮播 // 大轮播
this.Post({ this.Post({
@ -124,28 +60,6 @@
this.screenPng = res.data[0] this.screenPng = res.data[0]
} }
}); });
// 非遗手札
this.Post({
type_id: 1,
offset: 0,
limit: 1
}, '/api/article/getArticleByType').then(res => {
if(res.data) {
this.handwrittenList = res.data
}
})
// 非遗拾光
this.Post({
type_id: 2,
offset: 0,
limit: 1
}, '/api/article/getArticleByType').then(res => {
if(res.data) {
this.shiguang = res.data[0]
}
})
}, },
// 2是各种详情页，3是列表专题页面，4是小程序 // 2是各种详情页，3是列表专题页面，4是小程序
gotoUrlNew(item) { gotoUrlNew(item) {
@ -183,358 +97,24 @@
break; break;
} }
}, },
// 瀑布流
// getColumnItems(columnIndex) {
// const columnItems = [];
// this.hotList.forEach((item, index) => {
// // switch (this.hotIndex) {
// // case 1:
// // item.src = this.showImg(item.image);
// // break;
// // default:
// // item.src = this.showImg(item.goods.image);
// // }
// item.src = this.showImg(item.goods.image);
// if (index % 2 === columnIndex) {
// columnItems.push(item);
// }
// });
// return columnItems;
// },
// 更改热门推荐类型
changeType(index) {
this.hotIndex = index
// this.isLoading = false
// if (index==0) {
// this.hotList = this.hotList1
// }
// this.getHotList()
},
initHotList () {
this.hotList = []
this.hotList1 = []
this.Post({
tag_id: 51,
offset: this.hotList.length,
limit: 100,
},'/api/tag/getGoodsByTagId').then(res => {
if(res.data.length < this.limit) this.isLoading = true
this.hotList = this.hotList.concat(res.data)
})
this.Post({
tag_id: 52,
offset: this.hotList1.length,
limit: 100,
},'/api/tag/getGoodsByTagId').then(res => {
if(res.data.length < this.limit) this.isLoading = true
this.hotList1 = this.hotList1.concat(res.data)
})
},
getHotList() {
if(this.hotIndex == 1) {
// this.Post({
// type_id: 3,
// offset: this.hotList.length,
// limit: this.limit
// },'/api/Article/getArticleByType').then(res => {
// if(res) {
// if(res.data.length < this.limit) this.isLoading = true
// this.hotList = this.hotList.concat(res.data)
// }
// })
this.Post({
tag_id: 52,
offset: this.hotList1.length,
limit: this.limit,
},'/api/tag/getGoodsByTagId').then(res => {
if(res.data.length < this.limit) this.isLoading = true
this.hotList1 = this.hotList.concat(res.data)
})
}else {
this.Post({
tag_id: 51,
offset: this.hotList.length,
limit: this.limit,
},'/api/tag/getGoodsByTagId').then(res => {
if(res.data.length < this.limit) this.isLoading = true
this.hotList = this.hotList.concat(res.data)
})
}
},
gotoVideo(item) { gotoVideo(item) {
uni.navigateTo({ uni.navigateTo({
url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item)) url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
}) })
}, },
gotoHotDetail(item) {
uni.navigateTo({
url: '/subPackages/techan/detail?id=' + item.goods_id
})
// if(this.hotIndex == 1) {
// if(item.genre == 'video') {
// // 视频
// this.gotoVideo(item)
// }else {
// // 文章
// uni.navigateTo({
// url: '/subPackages/letter/detail?id=' + item.id
// })
// }
// }else {
// uni.navigateTo({
// url: '/subPackages/techan/detail?id=' + item.goods_id
// })
// }
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-header{
width: 100%; .bg {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
text-align: center;
z-index:99;
.title{
font-size: 30rpx
}
.subtitle{
font-size: 22rpx;
}
}
.content {
min-height: 100vh; min-height: 100vh;
background: #F9F0EA; background: #FFFFFF;
padding: 21rpx 0 50rpx;
} }
.top-box {
width: 684rpx;
height: 451rpx;
border-radius: 30rpx;
overflow: hidden;
position: relative;
margin: auto;
.top-banner {
width: 100%;
height: 100%;
}
.search-box {
width: 632rpx;
height: 40rpx;
background: #FFFFFF;
border-radius: 20rpx;
position: absolute;
z-index: 1000;
top: 31rpx;
left: 26rpx;
display: flex;
align-items: center;
font-weight: 500;
font-size: 24rpx;
color: #7B7C7D;
padding-left: 21rpx;
image {
width: 29rpx;
height: 28rpx;
}
span {
padding: 0 15rpx;
}
}
}
.menu-box {
width: 100%;
padding: 54rpx 33rpx 0;
overflow: hidden;
box-sizing: border-box;
.menu-left {
// flex-wrap: wrap;
width: 100%;
display: flex;
justify-content: space-between;
&>view {
flex: 1;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.topImg {
height: 84rpx;
}
.titleImg {
height: 21rpx;
margin-top: 19rpx;
}
}
.menu-right {
width: 254rpx;
height: 323rpx;
border-radius: 20rpx;
}
}
.title-box {
margin: 60rpx 44rpx 21rpx 50rpx;
align-items: flex-end;
&>image {
width: 350rpx;
height: 32rpx;
}
&>image:last-child {
width: 59rpx;
height: 20rpx;
}
}
.handwritten-box {
margin: 0 46rpx;
flex-wrap: wrap;
image {
width: 100%;
height: 181rpx;
border-radius: 10rpx;
}
// &>image:nth-child(n+3) {
// margin-top: 13rpx;
// }
}
.time-box {
background-size: 100% 100%;
width: 657rpx;
height: 370rpx;
border-radius: 30rpx;
margin: 23rpx auto 0;
position: relative;
.play {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 90rpx;
height: 90rpx;
}
}
.hot-type {
height: 122rpx;
font-weight: bold;
font-size: 32rpx;
color: #B5B5B6;
&>view {
position: relative;
}
&>view::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -10rpx;
background-color: #B5B5B6;
margin: 0 auto;
width: 32rpx;
height: 4rpx;
}
.hot-active {
color: #000000;
}
.hot-active::after {
background-color: #000000;
}
}
.hot-box {
margin: 0 48rpx;
display: flex;
justify-content: space-between;
.hot-column {
width: 319rpx;
display: flex;
flex-direction: column;
}
.hot-item {
width: 319rpx;
background: #FFFFFF;
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 13rpx;
.image-container {
position: relative;
.hot-img {
width: 319rpx;
}
.play-img {
width: 66.67rpx;
height: 66.67rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.hot-content {
padding: 15rpx;
.title {
font-weight: bold;
font-size: 26rpx;
color: #000000;
}
.subtitle {
margin-top: 20rpx;
font-weight: 400;
font-size: 24rpx;
color: #000000;
display: flex;
align-items: center;
image {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
display: block;
margin-right: 15rpx;
}
}
}
}
}
</style> </style>

96
pages/index/readingBody.vue
View File

@ -1,25 +1,111 @@
<template> <template>
<view></view> <view class="bg">
<headerVue></headerVue>
<view class="content">
<swiper class="top-banner" :circular="true" :interval="6000"
:duration="800" :indicator-dots="false" :autoplay="true" v-if="topBanner && topBanner.length > 0">
<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)">
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
</swiper-item>
</swiper>
</view>
<CustomTabBar :currentTab="1" />
</view>
</template> </template>
<script> <script>
import headerVue from "@/components/header.vue"
import CustomTabBar from '@/components/CustomTabBar.vue'; import CustomTabBar from '@/components/CustomTabBar.vue';
export default { export default {
components: {CustomTabBar}, components: {CustomTabBar,headerVue},
data() { data() {
return {} return {
topBanner: []
}
}, },
onLoad() { onLoad() {
}, },
onReady() { onReady() {
}, },
methods:{ onReachBottom() {
}, },
methods: {
getList() {
// 大轮播
this.Post({
type_id: 3,
position: 1,
}, '/api/adv/getAdv').then(res => {
if(res.data) {
this.topBanner = res.data;
}
});
},
// 2是各种详情页，3是列表专题页面，4是小程序
gotoUrlNew(item) {
console.log(item);
let that = this;
let url = '';
switch (item.jump_type) {
case 0:
break;
case 2:
uni.navigateTo({
url: item.tdata
});
break;
case 3:
uni.navigateTo({
url: '/subPackages/webPage/webPage?url=' + item.tdata
});
break;
case 4:
uni.navigateToMiniProgram({
appId: item.tdata.appid, // 此为appid
path: item.tdata.page, // 此为首页路径
envVersion: 'release',
success: res => {
// 打开成功
console.log('打开成功', res);
},
fail: err => {
console.log(err);
}
});
break;
default:
break;
}
},
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style>
.bg {
min-height: 100vh;
background: #FFFFFF;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
height: 200rpx;
width: 100%;
}
.top-banner {
width: 100%;
height: 100%;
}
</style>

Write Preview
Loading…
Cancel
Save