xiaofangweibao-applet/pages/index/index.vue

429 lines
10 KiB
Vue
Raw Normal View History

2024-04-07 11:10:47 +08:00
<template>
<view class="content">
<!-- banner图 -->
<view class="uni-padding-wrap">
<view class="page-section swiper">
<view class="page-section-spacing">
<swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3500"
duration="600">
<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
<view class="swiper-item uni-bg-red">
<image class="swiper-img" :src="item.bannerImg" mode=""></image>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="message-box" @click="noticeMore">
<view class="page-section swiper">
<view class="page-section-spacing">
<swiper style="height: 120rpx;" class="swiper" vertical="ture" circular="true"
indicator-dots='false' indicator-color="rgba(0,0,0,.0)" indicator-active-color="rgba(0,0,0,.0)"
autoplay="true" interval="4000">
<swiper-item class="swiper-list" v-for="(item, index) in messageData" :key="index">
<view class="message-tltle">{{item.noticeTitle}}</view>
<view class="message-content"><span>感谢</span>{{item.noticeDesc}}</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top-xs">
<view class="action sub-title">
<text class="text-xl text-bold text-blue text-shadow">推荐小程序</text>
<text class="text-ABC text-blue">my app</text>
</view>
<view class="action" @click="gomoreapp"><text class="text-lg text-grey text-shadow" >更多</text></view>
</view>
<ad :unit-id="adlist.bannerAd"></ad>
<view class="skill-sequence-panel-content-wrapper">
<!--左边虚化-->
<view class="hide-content-box hide-content-box-left"></view>
<!--右边虚化-->
<view class="hide-content-box hide-content-box-right"></view>
<scroll-view scroll-x="true" class="kite-classify-scroll">
<view class="kite-classify-cell shadow" v-for="(item, index) in curriculum" :key="index">
<view :class="'nav-li bg-index' + (index + 1)">
<view class="nav-name">{{ item.itemName }}</view>
</view>
<view class="nav-content">{{ item.itemDesc }}</view>
<view @click="goDeatil" class="nav-btn shadow" :class="'bg-index' + (index + 1)">立即访问</view>
</view>
</scroll-view>
</view>
<view class="cu-bar bg-white margin-top-xs">
<view class="action sub-title">
<text class="text-xl text-bold text-blue text-shadow">开源项目推荐</text>
<text class="text-ABC text-blue">curriculum</text>
</view>
<view class="action" @click="goMore"><text class="text-lg text-grey text-shadow">更多</text></view>
</view>
<ad :unit-id="adlist.videoAd" ad-type="video" ad-theme="white"></ad>
<view class="cu-card case no-card">
<view @click="goProject(item.id)" class="cu-item shadow" v-for="(item, index) in projectList" :key="index">
<view class="image">
<image :src="item.programImg" mode="widthFix"></image>
<view class="cu-tag bg-gradual-orange">{{ item.programTag }}</view>
<view class="cu-bar bg-shadeBottom">
<text class="text-cut">{{ item.programName }}</text>
</view>
</view>
</view>
</view>
<ad-custom :unit-id="adlist.gridAd"></ad-custom>
<view class="copyright">
<text>AbuCoder版权所有</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
adlist:this.myad()[0],
bannerList: [{
bannerImg: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
},
{
bannerImg: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
},
{
bannerImg: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
},
],
messageData: [
{
noticeTitle: '「AbuCoder」感谢前段铺子前段框架',
tag: '感谢',
noticeContent: '感谢Uview开源框架'
},
{
noticeTitle: '「AbuCoder」感谢若依开发框架',
tag: '感谢',
noticeContent: '第一次做插件,感谢大家的支持哦~'
},
{
noticeTitle: '「AbuCoder」感谢ColorUI前段框架',
tag: '感谢',
noticeContent: '第一次做插件,感谢大家的支持哦~'
}
],
curriculum: [{
itemName: '专业证件照',
itemDesc: '基于uniapp的专业证件照制作小程序欢迎访问...'
},
{
itemName: '极速去水印',
itemDesc: '基于uniapp的专业极速去水印助手小程序欢迎访问...'
},
{
itemName: '证件照(民族语言版)',
itemDesc: '基于uniapp的专业证件照制作小程序民族语言版...'
},
],
projectList:[
{
programImg:'https://cdn.uviewui.com/uview/swiper/swiper2.png',
programTag:'Gitee开源',
programName:'若依开源框架推荐'
}
]
}
},
onLoad() {
this.getBannerlist()
this.getNoticelist()
this.getItemslist()
this.getProgrammslist()
this.myAd()
},
methods: {
//暴力插屏广告
myAd(){
let that = this
if (that.myad()[0].plaqueAd) {
setInterval(function() {
// 在页面中定义插屏广告
let interstitialAd = null
// 在页面onLoad回调事件中创建插屏广告实例
if (wx.createInterstitialAd) {
interstitialAd = wx.createInterstitialAd({
adUnitId: that.myad()[0].plaqueAd
})
interstitialAd.onLoad(() => {})
interstitialAd.onError((err) => {})
interstitialAd.onClose(() => {})
}
// 在适合的场景显示插屏广告
if (interstitialAd) {
interstitialAd.show().catch((err) => {
console.error(err)
})
}
}, 15000); //15000为插屏间隔时间
}
},
getBannerlist(){
this.request('loadBaneer', 'GET').then(res=>{
// console.log("res:",res)
if(res){
let imgurl = {}
for (var i = 0; i < res.data.length; i++) {
imgurl[i] = {};
imgurl[i]['bannerImg'] = this.myimgurl() + res.data[i].bannerImg
}
// console.log(imgurl)
this.bannerList = imgurl
}
})
},
getNoticelist(){
this.request('loadNotice', 'GET').then(res=>{
console.log("res:",res)
if(res){
this.messageData = res.data
}
})
},
getItemslist(){
this.request('loadItems', 'GET').then(res=>{
console.log("res:",res)
if(res){
this.curriculum = res.data
}
})
},
getProgrammslist(){
this.request('loadProgramms', 'GET').then(res=>{
console.log("res:",res)
// if(res){
// this.projectList = res.data
// }
if(res){
let mydata = {}
for (var i = 0; i < res.data.length; i++) {
mydata[i] = {};
mydata[i]['programImg'] = this.myimgurl() + res.data[i].programImg;
mydata[i]['id'] =res.data[i].id
mydata[i]['programName'] = res.data[i].programName
mydata[i]['programTag'] = res.data[i].programTag
}
// console.log(mydata)
this.projectList = mydata
}
})
},
//更多
goMore(){
uni.navigateTo({
url:'../itemlist/itemlist'
})
},
gomoreapp(){
uni.navigateTo({
url:'../projectlist/projectlist'
})
},
noticeMore(){
uni.navigateTo({
url:'../me/mynotice/mynotice'
})
}
}
}
</script>
<style lang="scss">
.swiper-box {
flex: 1;
}
.swiper-item {
height: 100%;
}
/*通知公告*/
.message-box {
width: 100%;
height: 120rpx;
background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
background-repeat: no-repeat;
background-size: 100rpx 100rpx;
background-position: 15rpx 10rpx;
margin: 0rpx 0rpx 10rpx 0rpx;
padding-left: 130rpx;
.message-tltle {
height: 65rpx;
line-height: 70rpx;
font-weight: 600;
font-size: 28rpx;
}
.message-content {
color: #0081ff;
span {
background-color: #0081ff;
color: #FFFFFF;
padding: 2rpx 8rpx;
border-radius: 8rpx;
margin-right: 8rpx;
}
}
}
/*scroll-view外层*/
.skill-sequence-panel-content-wrapper {
position: relative;
white-space: nowrap;
padding: 10rpx 0 10rpx 10rpx;
}
/*左右渐变遮罩*/
.hide-content-box {
position: absolute;
top: 0;
height: 100%;
width: 10px;
z-index: 2;
}
.hide-content-box-left {
left: 0;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
}
.hide-content-box-right {
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
}
.kite-classify-scroll {
width: 100%;
height: 380rpx;
overflow: hidden;
white-space: nowrap;
}
.kite-classify-cell {
display: inline-block;
width: 266rpx;
height: 370rpx;
margin-right: 20rpx;
background-color: #ffffff;
border-radius: 10rpx;
overflow: hidden;
box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
}
.nav-li {
padding: 40rpx 30rpx;
width: 100%;
background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.nav-name {
font-size: 28upx;
text-transform: Capitalize;
margin-top: 20upx;
position: relative;
}
.nav-name::before {
content: '';
position: absolute;
display: block;
width: 40rpx;
height: 6rpx;
background: #fff;
bottom: 0;
right: 0;
opacity: 0.5;
}
.nav-name::after {
content: '';
position: absolute;
display: block;
width: 100rpx;
height: 1px;
background: #fff;
bottom: 0;
right: 40rpx;
opacity: 0.3;
}
.nav-content {
width: 100%;
padding: 15rpx;
display: inline-block;
overflow-wrap: break-word;
white-space: normal;
}
.nav-btn {
width: 200rpx;
height: 60rpx;
margin: 8rpx auto;
text-align: center;
line-height: 60rpx;
border-radius: 10rpx;
}
.bg-index1 {
background-color: #19cf8a;
color: #fff;
}
.bg-index2 {
background-color: #954ff6;
color: #fff;
}
.bg-index3 {
background-color: #5177ee;
color: #fff;
}
.bg-index4 {
background-color: #f49a02;
color: #fff;
}
.bg-index5 {
background-color: #ff4f94;
color: #fff;
}
.bg-index6 {
background-color: #7fd02b;
color: #fff;
}
.item-name {
margin-bottom: 15rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.copyright{
margin: 20rpx auto;
width: 80%;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
color: #9E9E9E;
font-size: 26rpx;
}
</style>