video_app/pages/index/index.vue

1313 lines
32 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view style="padding-bottom: 20rpx;">
<template v-if="showSearch">
<!-- 自定义导航栏(带搜索) -->
<!-- #ifdef H5 -->
<u-navbar :background="background" height="60" :is-back="false" :title="title" :border-bottom="false">
<!-- #endif -->
<!-- #ifndef H5 -->
<u-navbar height="60" :background="background" :is-back="false" :title="title" :border-bottom="false">
<!-- #endif -->
<!-- #ifdef MP-TOUTIAO -->
<view :style="{marginTop:barHeight/2+'px'}" class="nvavBar flex" style="padding-left: 80rpx;">
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO -->
<view class="nvavBar flex justify-center">
<!-- #endif -->
<view class="nvavBar-box" :style="{height:barHeight>0?barHeight+'px':'70rpx'}">
<!-- #ifdef H5 || APP -->
<view @click.stop="goSearch" class="nvavBar-boxs flex align-center"
style="width: 100%;">
<u-search placeholder-color="#cccccc" disabled search-icon-color="#ff7581"
:show-action="false" placeholder="今日正在热播" v-model="keyword"></u-search>
</view>
<!-- #endif -->
<!-- #ifndef H5 || APP -->
<view @click.stop="goSearch" class="nvavBar-boxs flex align-center"
:style="{width: 'calc(100% - '+barWidth+'px);'}">
<u-search placeholder-color="#cccccc" disabled search-icon-color="#ff7581"
:show-action="false" placeholder="今日正在热播" v-model="keyword"></u-search>
</view>
<!-- #endif -->
</view>
</view>
</u-navbar>
</template>
<view class="bgColorTop " :class="{'top-zhanwei':!showSearch}">
<!-- <view v-if="homeTypeSel != '否'" class="topTabs flex align-center justify-center">
<view class="topTabs-box">
<scroll-view class="topTabs-box-H" scroll-x="true">
<view class="topTabs-box-H-item" @tap="typeSel(index)"
:class="TabCur==index?'topTabsActive':''" v-for="(item,index) in typeList" :key="index">
{{item.classificationName}}
</view>
</scroll-view>
</view>
</view> -->
<!-- 轮播图 -->
<view v-if="TabCur == 0" class="swipers flex align-center justify-center">
<view class="swipers-box">
<swiper class="swipers-box" :indicator-dots="false" :autoplay="true" interval="5000" duration="500"
:circular="true">
<swiper-item class="swipers-box" v-for="(item,index) in swiperList" :key='index'
@tap="goPage(item)">
<image :src="item.imageUrl" mode="aspectFill" style="width: 100%;height:100%;"></image>
</swiper-item>
</swiper>
</view>
</view>
</view>
<block v-if="TabCur == 0">
<!-- 公告 -->
<view class="gg flex align-center justify-center" v-if="noticeList.length>0">
<view class="gg-box flex align-center justify-between">
<image src="../../static/images/index/ggIcon.png" mode=""></image>
<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
class="gg-box-swiper">
<block v-for="(item, index) in noticeList">
<swiper-item @tap='goMsg(item.url)'>
<view class="gg-box-swiper-t">{{item.title}}</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<!-- 金刚区 -->
<view class="centers">
<view class="centers-cistrict flex align-center justify-center" v-if="gridList.length > 0">
<view class="centers-cistrict-box">
<swiper :indicator-dots="false" class="centers-cistrict-boxs" :autoplay="false" :interval="3000"
:duration="300">
<swiper-item v-for="(item,index) in gridList" :key="index">
<view class="swiper-item flex align-center justify-between">
<view class="swiper-item-s" @click="goGridList(ite)" v-for="(ite,ind) in item.child"
:key="ind">
<view class="swiper-item-s-img">
<image :src="ite.imageUrl" mode="aspectFill"></image>
</view>
<view class="swiper-item-s-txt">
{{ite.name}}
</view>
</view>
<block v-if="item.child.length == 2">
<view class="swiper-item-s" style="height: 0;"></view>
<view class="swiper-item-s" style="height: 0;"></view>
<view class="swiper-item-s" style="height: 0;"></view>
</block>
<block v-if="item.child.length == 3">
<view class="swiper-item-s" style="height: 0;"></view>
<view class="swiper-item-s" style="height: 0;"></view>
</block>
<block v-if="item.child.length == 4">
<view class="swiper-item-s" style="height: 0;"></view>
</block>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view v-if="rmVideList.length>0">
<recommendVideo @more="moreVideo" @video="seVideo" v-if="rmVideList.length>0" :list="rmVideList"
title="本周热门" typeId="2" />
</view>
<view v-if="rmVideList.length>0">
<recommendVideo @more="moreVideo" @video="seVideo" v-if="phbVideoList.length>0" :list="phbVideoList"
title="本周排行榜" typeId="1" />
</view>
<view v-if="rmVideList.length>0">
<recommendVideo @more="moreVideo" @video="seVideo" v-if="newVideList.length>0" :list="newVideList"
title="最新热播" typeId="" />
</view>
<!-- 视频列表 -->
<view class="videTitle flex align-center justify-center">
<view class="videTitle-box">
更多短剧
</view>
</view>
</block>
<view v-if="courseList.length>0" class="" style="width: 100%;margin-top: 20rpx;">
<videoList @success="posterSuccess" :list="courseList" />
</view>
<u-loadmore v-if="courseList.length > 0" :status="status" />
<empty title="暂无视频" v-if="courseList.length == 0" />
<uni-popup ref="popusAuthorization" type="center" :maskClick="false">
<view class="contentview">
<view class="title">隐私保护指引</view>
<view class="des" @click="openPrivacyContract">
在使用当前小程序服务之前请仔细阅读<text
style="color: #5074FF;">{{privacyContractName}}</text>如你同意{{privacyContractName}}请点击同意开始使用
</view>
<view class="btns">
<button class="item reject" @click="exitMiniProgram">拒绝</button>
<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
</view>
</view>
</uni-popup>
<!-- 会员助力 -->
<u-popup v-model="showjl" :closeable="true" close-icon-color="#ffffff" mode="center">
<view class="zl" @click="goZl()">
<image class="zl-bg"
src="https://dj-api.hnsiyao.cn/file/uploadPath/2023/12/14/adf37beca97826d44970d20118f88e29.png"
mode=""></image>
<view class="zl-title">
会员免费领
</view>
<view class="zl-titlef">
免费领会员
</view>
<view class="zl-titlef2">
助力中...
</view>
<view class="zl-titlebtn">
立即领取
</view>
</view>
</u-popup>
<!-- 新人红包 -->
<u-popup v-model="xxPopu" :closeable="false" close-icon-color="#ffffff" mode="center">
<view class="zl" style="height: 580rpx;" @click="saveNewUser()">
<image class="zl-bgs"
src="https://dj-api.hnsiyao.cn/file/uploadPath/2024/02/22/cee2fcdc4c4ebe31ab4ce2c3c3a3d183.png"
mode=""></image>
<view class="zl-titles">
{{xxJDNum}} <text>金币</text>
</view>
</view>
</u-popup>
<!-- 活动悬浮入口 -->
<activityComp v-if="showzl && showzls" @clickCloseHd="clickCloseHd" @setImgs="goZl()" />
<!-- 追剧悬浮 -->
<!-- <drag-button v-if="shodrag && shodrags" @clickClose="clickClose" :videoInfo="videoInfo" :isDock="true"
:existTabBar="true" @btnClick="btnClick" /> -->
<u-image @click="goMsg('/me/choujiang/choujiang')" :src="`../../static/red-pack-new.gif`"
style="width: 200rpx;height: 200rpx;position: fixed;right: 30rpx;bottom: 180rpx;"></u-image>
<!-- #ifdef H5 -->
<div v-if="isWeixin"
style="width: 100%;height: 100%;position: fixed;top: 0;z-index: 999;background: url('../../static/images/open_guide.png') no-repeat center bottom / cover;">
</div>
<!-- #endif -->
<!-- #ifdef H5 -->
<div v-if="isIos" @click="isIos=false"
style="width: 100%;height: 100%;position: fixed;top: 0;z-index: 999;background: url('../../static/images/index_guide.png') no-repeat center bottom / 100%;background-color: rgba(0, 0, 0, 0.8);">
</div>
<!-- #endif -->
</view>
</template>
<script>
import {
returnIsSafari
} from '@/utils/app.js'
import empty from '../../components/empty.vue'
import videoList from '../../components/videoList/videoList.vue'
import recommendVideo from '../../components/recommendVideo/recommendVideo.vue'
import activityComp from '../../components/activityComp/activityComp.vue'
import dragButton from "@/components/drag-button/drag-button.vue";
export default {
components: {
videoList,
empty,
recommendVideo,
activityComp,
dragButton
},
data() {
return {
showSearch: false,
showzls: true,
shodrags: true,
shodrag: false, //是否显示拖拽悬浮
background: {
backgroundImage: 'linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%)'
},
title: '',
showzl: false, //悬浮助理图标
showjl: false, //显示助力弹窗
status: 'loadmore',
swiperList: [], //轮播图列表
noticeList: [], //公告列表
keyword: '',
gridList: [], //获取金刚区类表
status: 'loadmore',
limit: 10,
page: 1,
pages: 1,
courseList: [], //视频列表
privacyContractName: '',
bgImg: '',
tuiguang: '',
qdCodeion: '', //渠道码
qdCode: '',
xxPopu: false,
xxJDNum: 0,
typeList: [],
TabCur: 0,
homeTypeSel: '否', //否
barWidth: 0, //胶囊宽度
barHeight: 0, //胶囊高度
rmVideList: [], //热门视频
phbVideoList: [], //排行榜视频
newVideList: [], //最新热播
videoInfo: [],
draw: Math.floor((Math.random() * 12) + 1),
isWeixin: false,
isIos: true,
scrollTop: 0,
};
},
onShareAppMessage(res) {
return {
path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
.qdCode, //这是为了传参 onload(data){let id=data.id;}
title: this.tuiguang,
imageUrl: this.bgImg
}
},
onShareTimeline(res) {
return {
path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
.qdCode, //这是为了传参 onload(data){let id=data.id;}
title: this.tuiguang,
imageUrl: this.bgImg
}
},
onPageScroll(e) {
console.log(e);
this.scrollTop = e.scrollTop
},
onLoad(options) {
// barWidth
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-KUAISHOU
// 获取胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
//获取小程序胶囊的宽度
this.barWidth = menuButtonInfo.width
this.barHeight = menuButtonInfo.height
// #endif
if (uni.getStorageSync('qdCode')) {
this.qdCode = uni.getStorageSync('qdCode')
}
// #ifdef MP-WEIXIN
let that = this
try {
wx.getPrivacySetting({
success: res => {
console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
if (res.needAuthorization) {
that.privacyContractName = res.privacyContractName;
that.$refs.popusAuthorization.open();
}
},
fail: () => {},
complete: () => {},
})
} catch (e) {
//TODO handle the exception
}
// #endif
this.getBgImg()
this.getTypeList();
this.invitationCode = uni.getStorageSync('invitationCode')
// #ifdef MP-WEIXIN
if (options.scene) { //这里为线上操作
//此处的二维码 page/index/index?brokerId=123
let scene = decodeURIComponent(options.scene);
scene = scene.split(',')
uni.setStorageSync('invitation', scene[0])
//小程序获取到的qdCode
if (scene[1]) {
uni.setStorageSync('qdCodeion', scene[1])
}
}
// #endif
if (options.invitation) {
uni.setStorageSync('invitation', options.invitation)
}
//设置从链接获取到的qdCode
if (options.qdCode) {
uni.setStorageSync('qdCodeion', options.qdCode)
}
if (uni.getStorageSync('token')) {
this.$Request.get('/app/common/type/813').then(res => {
if (res.code == 0 && res.data.value) {
if (res.data.value == '是') {
this.getActivity()
}
}
})
}
let u = navigator ? navigator.userAgent : '';
if (u.toLowerCase().indexOf('micromessenger') !== -1) {
this.isWeixin = true
}
// uni.removeStorageSync('isIos')
if (u.indexOf('iPhone') > -1 && !uni.getStorageSync('isIos')) {
uni.setStorageSync('isIos', true)
this.isIos = true
} else {
this.isIos = false
}
},
onShow() {
//本周热门
this.getrecomVideo('2')
//本周排行榜
this.getrecomVideo('1')
//最新
this.getrecomVideo('')
this.getBannerList()
this.getMsg()
this.getGardList()
this.page = 1
this.getCourseList()
this.homeTypeSel = uni.getStorageSync('homeTypeSel') ? uni.getStorageSync('homeTypeSel') : '否'
//#ifdef H5
let that = this
this.$u.get('/app/common/type/108').then(res => { //// 是否开启公众号自动登陆 108
if (res.code == 0 && res.data) {
if (res.data.value == '是') {
let ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') !== -1) {
let openid = uni.getStorageSync('openId');
let userId = uni.getStorageSync('userId');
if (userId) {
if (!openid) {
if (window.location.href.indexOf('?code=') !== -1 || window.location.href
.indexOf(
'&code=') !==
-1) {
let code;
if (window.location.href.indexOf('?code=') !== -1) {
code = window.location.href.split('?code=')[1].split('&')[0];
} else {
code = window.location.href.split('&code=')[1].split('&')[0];
}
if (userId) {
that.$u.get('/app/user/openId/' + code + '/' + userId).then(
res => {
uni.setStorageSync('openId', res.data)
});
}
} else {
window.location.href =
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
that.$queue.getWxAppid() +
'&redirect_uri=' +
window.location.href.split('#')[0] +
'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
}
}
}
}
}
}
});
//#endif
if (uni.getStorageSync('token')) {
this.getMyLoveVideo()
this.$Request.get('/app/common/type/813').then(res => {
if (res.code == 0 && res.data.value) {
if (res.data.value == '是') {
this.getActivitys()
}
}
})
//新用户红包 837
this.$Request.get('/app/common/type/837').then(res => {
if (res.code == 0 && res.data.value) {
this.xxJDNum = res.data.value;
this.checkNewUser()
}
})
} else { //没有登录隐藏悬浮与弹窗
this.showzl = false
this.shodrag = false
this.videoInfo = []
}
},
onReachBottom() {
if (this.page < this.pages) {
this.page += 1
this.status = 'loading'
this.getCourseList()
} else {
this.status = 'nomore'
}
},
onPullDownRefresh() {
this.page = 1
this.getCourseList()
},
methods: {
// 获取活动等级
getActivitys() {
this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
if (res.code == 0) {
if (res.data) {
this.showzl = true
}
}
})
},
//关闭活动入口
clickCloseHd() {
// this.showzl = false
this.showzls = false
},
//悬浮去看视频
btnClick(item) {
uni.navigateTo({
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
.dyEpisodeId
})
},
//关闭悬浮
clickClose() {
// this.shodrag = data
this.shodrags = false
},
//获取我的收藏的短剧
getMyLoveVideo() {
let data = {
page: 1,
limit: 1,
classify: 1
}
this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
if (res.code == 0) {
this.videoInfo = res.data.records
if (this.videoInfo.length > 0) {
this.shodrag = true
}
}
})
},
// 查看更多
moreVideo(item) {
console.log(item)
let title = ''
if (item == 2) {
title = '本周热门'
uni.navigateTo({
url: '/pages/index/course/courseList?title=' + title + '&sort=' + item
})
} else if (item == 1) {
title = '本周排行榜'
uni.navigateTo({
url: '/pages/index/course/courseList?title=' + title + '&sort=' + item
})
} else {
title = '最新热播'
uni.navigateTo({
url: '/pages/index/course/courseList?title=' + title
})
}
},
pageScrollTo(time = 100) {
uni.pageScrollTo({
scrollTop: this.scrollTop - 50,
duration: time,
complete() {
}
})
},
//查看视频
seVideo(item) {
const time = 100;
// #ifdef H5
if (returnIsSafari()) {
this.pageScrollTo(time)
setTimeout(() => {
uni.navigateTo({
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
.courseDetailsId +
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
.dyEpisodeId
})
}, time)
} else {
uni.navigateTo({
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
.dyEpisodeId
})
}
// #endif
// #ifndef H5
uni.navigateTo({
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
.dyEpisodeId
})
// #endif
},
//点击回调
posterSuccess(item) {
const time = 100;
// #ifdef H5
if (returnIsSafari()) {
this.pageScrollTo(time)
setTimeout(() => {
uni.navigateTo({
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
.courseDetailsId +
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
.dyEpisodeId
})
}, 100)
} else {
uni.navigateTo({
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
.dyEpisodeId
})
}
// #endif
// #ifndef H5
uni.navigateTo({
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
.dyEpisodeId
})
// #endif
},
//获取推荐视频
getrecomVideo(sort) {
let data = {
page: 1,
limit: 3,
sort: sort,
classifyId: ''
}
// #ifdef MP-WEIXIN
data.wxShow = 1
// #endif
// #ifdef MP-TOUTIAO
data.dyShow = 1
// #endif
this.$Request.getT('/app/course/selectCourse', data).then(res => {
if (res.code == 0) {
if (Number(sort) == 2) { //本周热门
this.rmVideList = res.data.list
} else if (Number(sort) == 1) { //本周排行榜
this.phbVideoList = res.data.list
} else { //最新热播
this.newVideList = res.data.list
}
}
})
},
getTypeList() {
this.$Request.getT('/app/courseClassification/queryClassification').then(res => {
if (res.code == 0) {
let fenlei = {
classificationId: 0,
classificationName: "热门"
}
this.typeList = [];
this.typeList.push(fenlei);
res.data.forEach(d => {
this.typeList.push(d);
});
// console.log(JSON.stringify(this.typeList))
}
});
},
typeSel(index) {
this.TabCur = index;
this.page = 1
this.courseList = []
this.getCourseList()
},
checkNewUser() {
this.$u.api.userinfo().then(res => {
if (res.code == 0 && res.data) {
if (res.data.isNewUser && res.data.isNewUser == 1) {} else {
this.xxPopu = true;
}
}
})
},
saveNewUser() {
this.$Request.postT('/app/user/getNewUserRed').then(res => {
if (res.code == 0) {
this.xxPopu = false;
this.$queue.showToast('领取成功,金币已到账!');
} else {
this.$queue.showToast(res.msg)
}
})
},
// 获取活动等级
getActivity() {
this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
if (res.code == 0) {
if (res.data) {
this.showjl = true
}
}
})
},
//去助力页面
goZl() {
uni.navigateTo({
url: '/me/assistance/assistance'
})
this.showjl = false
},
// 打开隐私协议页面
openPrivacyContract() {
let that = this;
wx.openPrivacyContract({
fail: () => {
that.$queue.showToast('遇到错误无法打开!');
}
})
},
// 拒绝隐私协议
exitMiniProgram() {
// 直接退出小程序
wx.exitMiniProgram()
},
// 同意隐私协议
handleAgreePrivacyAuthorization() {
this.$refs.popusAuthorization.close();
},
//获取背景图
getBgImg() {
this.$u.get('app/banner/selectBannerList?classify=5').then(res => {
if (res.code == 0) {
this.bgImg = res.data[0].imageUrl
this.tuiguang = res.data[0].describes
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
});
},
// 获取资源列表
getCourseList() {
let typeId = '';
if (this.TabCur != 0) {
typeId = this.typeList[this.TabCur].classificationId;
}
let data = {
limit: this.limit,
page: this.page,
sort: '',
classifyId: typeId
}
// #ifdef MP-WEIXIN
data.wxShow = 1
// #endif
// #ifdef MP-TOUTIAO
data.dyShow = 1
// #endif
this.$Request.getT('/app/course/selectCourse', data).then(res => {
uni.stopPullDownRefresh()
if (res.code == 0) {
this.pages = res.data.totalPage
if (this.page < this.pages) {
this.status = 'loadmore'
} else {
this.status = 'nomore'
}
if (this.page == 1) {
this.courseList = res.data.list
} else {
this.courseList = [...this.courseList, ...res.data.list]
}
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
uni.stopPullDownRefresh();
})
},
//切换类型
selectTabs(index) {
this.current = index
this.page = 1
this.getCourseList()
},
// 跳转资源列表
goGridList(e) {
uni.navigateTo({
url: e.url
})
},
//处理分割金刚区
processArray(arr) {
let arr2 = [];
let child = [];
for (let i = 0; i < arr.length; i++) {
child.push(arr[i]);
if (child.length === 5) {
arr2.push({
child: child
});
child = [];
}
}
// 如果arr数组的长度不是5的倍数将剩余的元素添加到arr2数组的最后一个child中
if (child.length > 0) {
arr2.push({
child: child
});
}
return arr2;
},
// 获取金刚区列表
getGardList() {
this.$u.api.bannerList({
classify: '2',
}).then(res => {
if (res.code == 0) {
let arr = []
res.data.forEach(ret => {
if (ret.state == 1) {
arr.push(ret)
}
})
this.gridList = this.processArray(arr)
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
},
// 跳转搜索
goSearch() {
uni.navigateTo({
url: '/pages/index/search/index'
});
},
// 跳转公告链接
goMsg(url) {
if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
},
//轮播图跳转
goPage(item) {
let token = uni.getStorageSync('token')
const {
url,
jumpType
} = item
if (token) {
if (url) {
if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
if (jumpType == 1) {
console.log(url);
uni.navigateTo({
url
});
} else {
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
}
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
}
} else {
uni.navigateTo({
url: '/pages/login/login'
})
}
},
// 公告
getMsg() {
let data = {
page: 1,
limit: 5,
state: 1
}
this.$u.api.msg(data).then(res => {
if (res.code == 0) {
this.notice = res.data.list
res.data.list.forEach(res => {
this.noticeList.push(res)
})
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
},
// 获取轮播图列表
getBannerList() {
this.$u.api.bannerList({
classify: '1'
}).then(res => {
if (res.code == 0) {
res.data.forEach(d => {
if (d.state == 1) {
this.swiperList.push(d)
}
})
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
},
},
}
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
/deep/.u-mode-center-box {
background-color: transparent !important;
}
/deep/.u-navbar-inner {
/* #ifdef H5 */
background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
/* #endif */
}
.videTitle {
width: 100%;
height: auto;
margin-top: 30rpx;
.videTitle-box {
width: 686rpx;
height: 100%;
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
}
.nvavBar {
width: 750rpx;
height: 100%;
.nvavBar-box {
/* #ifdef MP-TOUTIAO */
width: 543rpx;
/* #endif */
/* #ifndef MP-TOUTIAO */
width: 686rpx;
/* #endif */
height: 70rpx;
}
.nvavBar-boxs {
height: 100%;
background-color: #ffffff;
border-radius: 44rpx;
}
}
.zl {
width: 518rpx;
height: 556rpx;
position: relative;
background: transparent;
.zl-bg {
width: 518rpx;
height: 556rpx;
position: absolute;
top: 0;
left: 0;
}
.zl-bgs {
width: 518rpx;
height: 580rpx;
position: absolute;
top: 0;
left: 0;
}
.zl-title {
position: absolute;
top: 15%;
left: 46%;
transform: translate(-50%, 100%);
font-size: 44rpx;
font-weight: bold;
color: #F24364;
background: linear-gradient(0deg, #FF5878 0.390625%, #F30931 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
}
.zl-titles {
position: absolute;
top: 24%;
left: 50%;
transform: translate(-50%, 100%);
font-size: 70rpx;
font-weight: bold;
background: #FFFFFF;
background-clip: text;
-webkit-text-fill-color: transparent;
text {
font-size: 30rpx;
margin-left: 10rpx;
}
}
.zl-titlef {
font-size: 14rpx;
font-weight: bold;
color: #ffffff;
position: absolute;
top: 41%;
right: 35%;
}
.zl-titlef2 {
font-size: 14rpx;
font-weight: bold;
color: #ffffff;
position: absolute;
top: 48%;
left: 22%;
}
.zl-titlebtn {
font-size: 34rpx;
font-weight: bold;
background: linear-gradient(0deg, #FF5878 0.390625%, #F30931 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-65%, 50%);
}
}
.topTabsActive {
color: #FF7581 !important;
font-size: 30rpx !important;
font-weight: bold !important;
background-color: #FFE6E9 !important;
}
.bgColorTop {
width: 100%;
background: #ffffff;
position: relative;
}
.bgColorTop::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
z-index: 1;
/* 确保在垂直渐变之上 */
}
.bgColorTop::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent, #ffffff);
/* 垂直渐变结束颜色为透明 */
z-index: 2;
/* 确保在水平渐变之上 */
}
.topTabs {
width: 100%;
height: auto;
position: relative;
z-index: 3;
// padding-top: 10rpx;
margin-bottom: 20rpx;
padding-top: 20rpx;
.topTabs-box {
width: 686rpx;
height: 100%;
}
.topTabs-box-H {
white-space: nowrap;
width: 100%;
}
.topTabs-box-H-item {
display: inline-block;
background-color: #F8F4F4;
margin-right: 36rpx;
color: #666666;
font-size: 28rpx;
padding: 10rpx 30rpx;
border-radius: 44rpx;
}
}
.swipers {
width: 100%;
height: auto;
position: relative;
z-index: 3;
.swipers-box {
width: 686rpx;
height: 270rpx;
border-radius: 24rpx;
}
}
.search {
width: 100%;
height: auto;
.search-box {
width: 686rpx;
height: 70rpx;
border-radius: 35rpx;
background-color: red;
}
}
.gg {
width: 100%;
height: auto;
margin-top: 20rpx;
.gg-box {
width: 686rpx;
height: 62rpx;
background-color: #FFF2F4;
border-radius: 32rpx;
padding: 0 30rpx;
image {
width: 36rpx;
height: 36rpx;
}
}
.gg-box-swiper {
width: calc(100% - 56rpx);
height: 100%;
}
.gg-box-swiper-t {
width: 100%;
height: 100%;
color: #FD4F65;
line-height: 62rpx;
font-size: 26rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.centers {
width: 100%;
height: auto;
border-radius: 60rpx 60rpx 0 0;
.centers-cistrict {
width: 100%;
height: 160rpx;
// height: 216rpx;
// margin-top: 24rpx;
.centers-cistrict-box {
width: 686rpx;
height: 100%;
// background-color: #ffffff;
// border-radius: 24rpx;
}
.centers-cistrict-boxs {
width: 100%;
height: 100%;
border-radius: 24rpx;
}
.swiper-item {
width: 100%;
height: 125rpx;
margin-top: 20rpx;
// margin-top: 30rpx;
// padding: 0 20rpx;
}
.swiper-item-s {
width: calc(100% / 5 - 30rpx);
height: 100%;
}
.swiper-item-s-img {
width: 94rpx;
height: 94rpx;
margin: 0 auto;
image {
width: 100%;
height: 94rpx;
}
}
.swiper-item-s-txt {
width: 100%;
text-align: center;
margin-top: 10rpx;
color: #333333;
font-size: 26rpx;
margin-top: 10rpx;
}
}
}
.contentview {
width: 632rpx;
padding: 48rpx;
box-sizing: border-box;
background: #ffffff;
border-radius: 16rpx;
}
.contentview .title {
text-align: center;
color: #333;
font-weight: bold;
font-size: 32rpx;
}
.contentview .des {
font-size: 26rpx;
color: #666;
margin-top: 40rpx;
text-align: justify;
line-height: 1.6;
}
.top-zhanwei {
/* #ifdef H5 */
padding-top: 32rpx;
/* #endif */
/* #ifndef H5 */
padding-top: 44px;
/* #endif */
}
.contentview .des .link {
color: #5074FF;
text-decoration: underline;
}
button::after {
border: none;
}
.btns {
margin-top: 48rpx;
display: flex;
}
.btns .item {
justify-content: space-between;
width: 244rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16rpx;
box-sizing: border-box;
border: none;
}
.btns .reject {
background: #f4f4f5;
color: #909399;
}
.btns .agree {
background: #5074FF;
color: #ffffff;
}
</style>