Browse Source

上传代码

zys
杨豪 3 years ago
parent
commit
c90ecea460
  1. 12
      App.vue
  2. 45
      components/vSwiper.vue
  3. 4
      config/index.js
  4. 81
      pages/home/index.vue
  5. 47
      pages/life/articleDetail/index.vue
  6. 25
      pages/life/articleList/index.vue
  7. 1
      pages/life/index.vue
  8. BIN
      static/images/eye2.png

12
App.vue

@ -10,9 +10,7 @@ export default {
uni.hideTabBar()
},
globalData: {
// baseURL : 'http://192.168.0.110:8092/api/',
baseURL: VUE_APP_API_URL+ '/',
// baseURL : 'https://cloud.api.cyjyyjy.com/api/',
userInfo: null,
navHeight: 0,
navTopHeight: 0,
@ -28,7 +26,6 @@ export default {
onShow(e) {
this.globalData.scene = e.scene
// console.log(this.globalData.scene,'this.globalData.scene')
//tabbar
uni.hideTabBar();
var query = {};
@ -251,6 +248,7 @@ export default {
setMenuHeight() {
uni.getSystemInfo({
success: res => {
console.log(res,'resaaaaa')
this.globalData.navTopHeight = res.statusBarHeight;
this.globalData.CustomBar = res.statusBarHeight + 45;
this.globalData.systemInfo = res;
@ -261,10 +259,12 @@ export default {
}
});
let menuButtonObj = uni.getMenuButtonBoundingClientRect();
this.globalData.menuTop = menuButtonObj.top; // console.log(menuButtonObj)
console.log(menuButtonObj,'menuButtonObj')
this.globalData.menuTop = menuButtonObj.top;
this.globalData.menuHeight = menuButtonObj.height;
this.globalData.navHeight = menuButtonObj.height + (menuButtonObj.top - this.globalData.navTopHeight);
this.globalData.topHeight = menuButtonObj.top + menuButtonObj.height;
this.globalData.topLeft = menuButtonObj.left;
this.globalData.navHeight = menuButtonObj.top;
},
getInfo() {

45
components/vSwiper.vue

@ -1,18 +1,19 @@
<template>
<swiper class="swiper-block" vertical="true" circular="true" previous-margin="90rpx" next-margin="90rpx" current="0" @change="swiperChange">
<swiper class="swiper-block" vertical="true" circular="true" previous-margin="80rpx" next-margin="80rpx" current="0" @change="swiperChange">
<block v-for="(item, index) in articleList" :key="index">
<swiper-item class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @tap="previewImg">
<view class="item-box" :class="(swiperIndex == index ? 'active' : '')" @click="toDetial(item.id)">
<image mode="aspectFill" :src="item.imageInput" class="slide-image"></image>
<view class="content-box">
<view class="title-box">{{item.title}}</view>
<view class="mask"></view>
<view class="title-box line1">{{item.title}}</view>
<view class="content acea-row">
<view>{{item.author}}</view>
<view>{{item.createTime}}</view>
<view class="acea-row row-middle">
<!-- <view class="acea-row row-middle">
<image src="../static/images/eye2.png" class="eye"></image>
<text>{{item.visit}}</text>
<image src="../static/images/eye.png" class="eye"></image>
</view>
</view> -->
</view>
</view>
</view>
@ -60,6 +61,8 @@
width: 670rpx;
height: 300rpx;
margin: 0 auto;
border-radius: 20rpx;
}
.swiper-item {
@ -70,8 +73,8 @@
overflow: unset;
}
.item-box{
width: 622rpx;
height: 200rpx;
width: 600rpx;
height: 230rpx;
position: relative;
border-radius: 20rpx;
}
@ -82,27 +85,49 @@
border-radius: 20rpx;
}
.content-box{
width: 556rpx;
height: 100rpx;
position: absolute;
bottom: 20rpx;
left: 20rpx;
color: #0081FF;
z-index: 5;
}
.mask{
width: 100%;
height: 100%;
background:rgba(255,255,255,.5);
filter: blur(1px);
position: absolute;
top: 0;
left: 0;
border-radius: 12rpx;
}
.title-box{
font-size: 32rpx;
font-weight: 500;
color: #fff;
color: #000;
margin-bottom: 10rpx;
position: absolute;
top: 10rpx;
left: 10rpx;
z-index: 99;
}
.content{
color: #fff;
color: #000;
font-size: 26rpx;
position: absolute;
top: 56rpx;
z-index: 99;
left: 10rpx;
}
.content view{
margin-right: 50rpx;
}
.active {
transform: scale(1.02);
// transform: scale(1.02);
width: 670rpx;
height: 256rpx;
transition: all 0.2s ease-in 0s;
border-radius: 20rpx;
z-index: 20;

4
config/index.js

@ -1,8 +1,8 @@
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api'
// export const VUE_APP_API_URL = 'http://192.168.0.112:8092/api'
export const VUE_APP_API_URL = 'http://192.168.0.111:8092/api'
// export const VUE_APP_API_URL = 'https://cloud.api.cyjyyjy.com/api'
// export const VUE_APP_API_URL = 'http://192.168.0.111:8092/api'
export const VUE_APP_API_URL = 'https://cloud.api.cyjyyjy.com/api'
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
// export const VUE_APP_API_URL = 'https://thapi.xinxintuan.co/api'
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';

81
pages/home/index.vue

@ -2,29 +2,31 @@
<view class="productSort">
<!-- 顶部主页 -->
<skeleton v-if="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
<view class="pageTitle-box" :class="isFixed ? 'showPageTitle' : ''" :style="{'padding-top':navTopHeight + 'px',height:navHeight*2+ 'px'}">
<view class="top-logo acea-row row-center" :style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'">禪易生态云</view>
</view>
<view class="main-box skeleton-rect" >
<view class="back-bg"><image src="https://download.cyjyyjy.com/life-bg.png" mode=""></image></view>
<view class="top-logo acea-row row-center" :style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'">禪易生态云</view>
<view class="details-btn">了解详情</view>
<view class="details-btn skeleton-rect">了解详情</view>
</view>
<!-- 云快讯 -->
<view class="yun-box skeleton-rect">
<view class="acea-row row-between-wrapper">
<view class="acea-row row-between-wrapper skeleton-rect">
<image src="../../static/images/yun.png" class="headline-yun"></image>
<view class="more-r" @click="toAritcleList">
<view class="more-r skeleton-rect" @click="toAritcleList">
<text>查看更多</text>
<image src="../../static/images/home/arrow-r.png"></image>
</view>
</view>
<view class="rotaion">
<view class="rotaion skeleton-rect">
<vSwiper :articleList="articleList"></vSwiper>
</view>
</view>
<!-- 最新活动 -->
<view class="act-box" >
<view class="headline"><image src="../../static/images/new-act.png" mode=""></image></view>
<view class="act-box skeleton-rect" >
<view class="headline"><image src="../../static/images/new-act.png" mode="" skeleton-rect></image></view>
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="slide-left" v-for="(item,index) in activity" :key="index" @tap="toActiveDetail" :data-id="item.id">
<view class="slide-left skeleton-rect" v-for="(item,index) in activity" :key="index" @tap="toActiveDetail" :data-id="item.id">
<view class="act-title">{{item.name}}</view>
<view class="resource-list acea-row-nowrap">
<image :src="item.images" class="act-img" mode="aspectFill"></image>
@ -57,18 +59,18 @@
</view>
<!-- 为您推荐 -->
<view class="rec-box">
<view class="headline"><image src="../../static/images/rec-headline.png" mode=""></image></view>
<view class="headline skeleton-rect"><image src="../../static/images/rec-headline.png" mode=""></image></view>
<view class="rec-switch">
<view class="rec-title acea-row">
<view class="rec-l " @click="tabClick(1)">
<image src="../../static/images/rec-bg.png" class="rec-bg" v-show="active == 1"></image>
<image src="../../static/images/rec-bg.png" class="rec-bg" v-show="active == 2"></image>
<view class="rec-t acea-row row-center-wrapper">
<image src="../../static/images/rec-icon1.png" mode=""></image>
<view>需求</view>
</view>
</view>
<view class="rec-r " @click="tabClick(2)">
<image src="../../static/images/rec-bg.png" class="rec-bg" v-show="active == 2"></image>
<image src="../../static/images/rec-bg.png" class="rec-bg" v-show="active == 1"></image>
<view class="rec-t acea-row row-center-wrapper">
<image src="../../static/images/rec-icon2.png" mode=""></image>
<view>资源</view>
@ -162,6 +164,7 @@ export default {
menuHeight: app.globalData.menuHeight,
navHeight: app.globalData.navHeight,
menuTop: app.globalData.menuTop,
navTopHeight: app.globalData.navTopHeight,
currentTabIndex:0,
flowList:[],
isFixed: false,
@ -180,8 +183,22 @@ export default {
showSkeleton: true
};
},
watch: {
onShareAppMessage() {
return {
title: '禅易云生态',
path: '/pages/home/index',
success(res) {
uni.showToast({
title: '分享成功',
})
},
fail(res) {
uni.showToast({
title: '分享失败',
icon: 'none',
})
},
}
},
onReady:function(){
const that = this;
@ -210,12 +227,19 @@ export default {
// this.getProducts();
// })
},
onPageScroll(e) {
if (e.scrollTop > 60) {
this.isFixed = true;
} else {
this.isFixed = false;
};
},
methods: {
getIndexData(){
uni.showLoading({ title: '正在加载...' })
uni.showNavigationBarLoading();
getIndexData().then(res=>{
this.articleList = res.data.articleList
this.articleList = res.data.articleList.reverse()
this.activity= res.data.recommendActivity.content
this.demandList = res.data.demandList
this.resourcesList = res.data.resourcesDtos
@ -258,6 +282,12 @@ export default {
}
})
},
toGoodsDetail(id){
this.$yrouter.push({
path: "/pages/shop/GoodsCon/index",
query: { id: id }
});
},
getProducts(){
this.loadStatus = 'loading';
getProducts({page:this.page,limit:this.limit}).then((res)=>{
@ -302,18 +332,26 @@ export default {
}
};
</script>
<style lang="scss" scoped>
</style>
<style lang="less" scoped>
.productSort {
// height: 100%;
// padding-bottom: 200rpx;
background: #EEEEEE !important;
position: relative;
}
.pageTitle-box{
width: 100%;
position: fixed;
top: 0;
z-index: 99;
transition: all .5s;
}
.showPageTitle{
background: #fff;
color: #000000 !important;
opacity: 1;
.top-logo{
color: #000;
}
}
.page-top-box{
width: 100%;
position: fixed;
@ -379,6 +417,7 @@ export default {
color: #fff;
font-weight: 600;
font-size: 32rpx;
transition: all .5s cubic-bezier(.25, .5, .5, .9);
}
.details-btn{
width: 196rpx;

47
pages/life/articleDetail/index.vue

@ -1,24 +1,28 @@
<template>
<view class="article-box">
<view class="article-header">
<view class="headline">{{detail.title}}</view>
<view class="acea-row">
<view class="header-img"><image src="../../../static/images/menu2.png"></image></view>
<view class="header-img"><image :src="detail.authorLogo"></image></view>
<view class="">
<view class="release-auth">{{detail.author}}</view>
<view class="acea-row">
<view class="fz24 acea-row row-middle">
<image src="../../../static/images/eye.png" class="eye-icon"></image>
<text>203</text>
<text>{{detail.visit}}</text>
</view>
<view class="fz24">{{detail.formatTime}}</view>
</view>
<view class="fz24">{{detail.addTime}}</view>
</view>
</view>
</view>
<view class="content">
<view class="conter" v-html="detail.content"></view>
<view class="explain-box">转载声明本文由云快讯收录观点仅代表作者本人不代表云快讯立场云快讯不对所包含的准确性可靠性或完整性提供任何明示请自行承担任何责任</view>
<rich-text :nodes="detail.content"></rich-text>
</view>
</view>
</template>
@ -35,7 +39,7 @@ export default{
return {
title: this.detail.title,
imageUrl: this.detail.imageInput,
path: 'pages/life/articleDeail/index?id=' + this.detail.id,
path: '/pages/life/articleDetail/index?id=' + this.detail.id,
success(res) {
uni.showToast({
title: '分享成功',
@ -52,8 +56,23 @@ export default{
methods:{
getArticleDetail(){
getArticleDetail({id: this.id}).then((res)=>{
res.data.content= this.formatRichText(res.data.content)
this.detail = res.data
})
},
formatRichText(html){
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
return newContent;
}
},
onLoad: function (option) {
@ -69,7 +88,9 @@ export default{
.article-box{
width: 100%;
min-height: 100vh;
.article-header{
padding: 0 40rpx;
}
.headline{
font-size: 32rpx;
color: #333333;
@ -84,6 +105,7 @@ export default{
image{
width: 100%;
height: 100%;
border-radius: 25px;
}
}
.release-auth{
@ -104,7 +126,18 @@ export default{
}
.content{
width: 100%;
padding: 40rpx 0;
padding: 24rpx;
overflow: hidden;
}
.explain-box{
width: 100%;
padding: 12rpx 34rpx;
background: #E3E3E3;
color: #999;
font-size: 24rpx;
line-height: 38rpx;
border-radius: 12rpx;
margin-bottom: 12rpx;
}
}

25
pages/life/articleList/index.vue

@ -26,13 +26,14 @@
<image src="../../../static/images/eye.png"></image>
</view>
</view>
</view>
<view class="item-r">
<image :src="item.imageInput" mode="aspectFill"></image>
</view>
</view>
</view>
<view class="loadStatus-box">{{loadStatus}}</view>
</view>
</template>
@ -44,7 +45,8 @@
articleList: [],
page: 0,
size: 10,
isLoading: true
isLoading: true,
loadStatus: '没有更多了...'
}
},
mounted() {
@ -56,12 +58,19 @@
},
methods:{
getArticleList(){
if(!this.isLoading) return
uni.showLoading({
title: '加载中...'
})
if(!this.isLoading) return
this.loadStatus = '加载中...'
getArticle({page: this.page,size: this.size, isHot: 0}).then((res)=>{
res.data.content.length < this.size ? this.isLoading = false : this.isLoading = true
if(res.data.content.length < this.size){
this.loadStatus = '没有更多了...'
this.isLoading = false
} else{
this.isLoading = true
this.loadStatus = '上拉加载更多...'
}
this.articleList = this.articleList.concat(res.data.content)
uni.hideLoading()
})
@ -123,7 +132,7 @@
.list-box{
width: 100%;
padding: 180rpx 40rpx 40rpx;
padding: 180rpx 40rpx 0rpx;
.list-item{
width: 100%;
background: #fff;
@ -173,5 +182,11 @@
}
}
}
.loadStatus-box{
text-align: center;
font-size: 28rpx;
color: #000;
padding: 30rpx 0;
}
}
</style>

1
pages/life/index.vue

@ -309,7 +309,6 @@ export default {
}
}
.category-tab-box{
border: 1rpx solid black;
width: 100%;
height: 108rpx;
line-height: 108rpx;

BIN
static/images/eye2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 B

Loading…
Cancel
Save