Browse Source

上传代码

zys
杨豪 3 years ago
parent
commit
c90ecea460
  1. 12
      App.vue
  2. 45
      components/vSwiper.vue
  3. 4
      config/index.js
  4. 85
      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() uni.hideTabBar()
}, },
globalData: { globalData: {
// baseURL : 'http://192.168.0.110:8092/api/',
baseURL: VUE_APP_API_URL+ '/', baseURL: VUE_APP_API_URL+ '/',
// baseURL : 'https://cloud.api.cyjyyjy.com/api/',
userInfo: null, userInfo: null,
navHeight: 0, navHeight: 0,
navTopHeight: 0, navTopHeight: 0,
@ -28,7 +26,6 @@ export default {
onShow(e) { onShow(e) {
this.globalData.scene = e.scene this.globalData.scene = e.scene
// console.log(this.globalData.scene,'this.globalData.scene')
//tabbar //tabbar
uni.hideTabBar(); uni.hideTabBar();
var query = {}; var query = {};
@ -251,6 +248,7 @@ export default {
setMenuHeight() { setMenuHeight() {
uni.getSystemInfo({ uni.getSystemInfo({
success: res => { success: res => {
console.log(res,'resaaaaa')
this.globalData.navTopHeight = res.statusBarHeight; this.globalData.navTopHeight = res.statusBarHeight;
this.globalData.CustomBar = res.statusBarHeight + 45; this.globalData.CustomBar = res.statusBarHeight + 45;
this.globalData.systemInfo = res; this.globalData.systemInfo = res;
@ -261,10 +259,12 @@ export default {
} }
}); });
let menuButtonObj = uni.getMenuButtonBoundingClientRect(); 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.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() { getInfo() {

45
components/vSwiper.vue

@ -1,18 +1,19 @@
<template> <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"> <block v-for="(item, index) in articleList" :key="index">
<swiper-item class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @tap="previewImg"> <swiper-item class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @tap="previewImg">
<view class="item-box" :class="(swiperIndex == index ? 'active' : '')" @click="toDetial(item.id)"> <view class="item-box" :class="(swiperIndex == index ? 'active' : '')" @click="toDetial(item.id)">
<image mode="aspectFill" :src="item.imageInput" class="slide-image"></image> <image mode="aspectFill" :src="item.imageInput" class="slide-image"></image>
<view class="content-box"> <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 class="content acea-row">
<view>{{item.author}}</view> <view>{{item.author}}</view>
<view>{{item.createTime}}</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> <text>{{item.visit}}</text>
<image src="../static/images/eye.png" class="eye"></image> </view> -->
</view>
</view> </view>
</view> </view>
</view> </view>
@ -60,6 +61,8 @@
width: 670rpx; width: 670rpx;
height: 300rpx; height: 300rpx;
margin: 0 auto; margin: 0 auto;
border-radius: 20rpx;
} }
.swiper-item { .swiper-item {
@ -70,8 +73,8 @@
overflow: unset; overflow: unset;
} }
.item-box{ .item-box{
width: 622rpx; width: 600rpx;
height: 200rpx; height: 230rpx;
position: relative; position: relative;
border-radius: 20rpx; border-radius: 20rpx;
} }
@ -82,27 +85,49 @@
border-radius: 20rpx; border-radius: 20rpx;
} }
.content-box{ .content-box{
width: 556rpx;
height: 100rpx;
position: absolute; position: absolute;
bottom: 20rpx; bottom: 20rpx;
left: 20rpx; left: 20rpx;
color: #0081FF; color: #0081FF;
z-index: 5; 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{ .title-box{
font-size: 32rpx; font-size: 32rpx;
font-weight: 500; font-weight: 500;
color: #fff; color: #000;
margin-bottom: 10rpx; margin-bottom: 10rpx;
position: absolute;
top: 10rpx;
left: 10rpx;
z-index: 99;
} }
.content{ .content{
color: #fff; color: #000;
font-size: 26rpx; font-size: 26rpx;
position: absolute;
top: 56rpx;
z-index: 99;
left: 10rpx;
} }
.content view{ .content view{
margin-right: 50rpx; margin-right: 50rpx;
} }
.active { .active {
transform: scale(1.02); // transform: scale(1.02);
width: 670rpx;
height: 256rpx;
transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
border-radius: 20rpx; border-radius: 20rpx;
z-index: 20; 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 = 'http://natapp.xinxintuan.co/api';
// export const VUE_APP_API_URL = 'https://wxapi.yixiang.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.112:8092/api'
export const VUE_APP_API_URL = 'http://192.168.0.111: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 = 'https://cloud.api.cyjyyjy.com/api'
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/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://thapi.xinxintuan.co/api'
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api'; // export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';

85
pages/home/index.vue

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

47
pages/life/articleDetail/index.vue

@ -1,24 +1,28 @@
<template> <template>
<view class="article-box"> <view class="article-box">
<view class="article-header">
<view class="headline">{{detail.title}}</view> <view class="headline">{{detail.title}}</view>
<view class="acea-row"> <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="">
<view class="release-auth">{{detail.author}}</view> <view class="release-auth">{{detail.author}}</view>
<view class="acea-row"> <view class="acea-row">
<view class="fz24 acea-row row-middle"> <view class="fz24 acea-row row-middle">
<image src="../../../static/images/eye.png" class="eye-icon"></image> <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>
<view class="fz24">{{detail.addTime}}</view>
</view> </view>
</view> </view>
</view> </view>
<view class="content"> <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>
</view> </view>
</template> </template>
@ -35,7 +39,7 @@ export default{
return { return {
title: this.detail.title, title: this.detail.title,
imageUrl: this.detail.imageInput, imageUrl: this.detail.imageInput,
path: 'pages/life/articleDeail/index?id=' + this.detail.id, path: '/pages/life/articleDetail/index?id=' + this.detail.id,
success(res) { success(res) {
uni.showToast({ uni.showToast({
title: '分享成功', title: '分享成功',
@ -52,8 +56,23 @@ export default{
methods:{ methods:{
getArticleDetail(){ getArticleDetail(){
getArticleDetail({id: this.id}).then((res)=>{ getArticleDetail({id: this.id}).then((res)=>{
res.data.content= this.formatRichText(res.data.content)
this.detail = res.data 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) { onLoad: function (option) {
@ -69,7 +88,9 @@ export default{
.article-box{ .article-box{
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
.article-header{
padding: 0 40rpx; padding: 0 40rpx;
}
.headline{ .headline{
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
@ -84,6 +105,7 @@ export default{
image{ image{
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 25px;
} }
} }
.release-auth{ .release-auth{
@ -104,7 +126,18 @@ export default{
} }
.content{ .content{
width: 100%; 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> <image src="../../../static/images/eye.png"></image>
</view> </view>
</view> </view>
</view> </view>
<view class="item-r"> <view class="item-r">
<image :src="item.imageInput" mode="aspectFill"></image> <image :src="item.imageInput" mode="aspectFill"></image>
</view> </view>
</view> </view>
</view> </view>
<view class="loadStatus-box">{{loadStatus}}</view>
</view> </view>
</template> </template>
@ -44,7 +45,8 @@
articleList: [], articleList: [],
page: 0, page: 0,
size: 10, size: 10,
isLoading: true isLoading: true,
loadStatus: '没有更多了...'
} }
}, },
mounted() { mounted() {
@ -56,12 +58,19 @@
}, },
methods:{ methods:{
getArticleList(){ getArticleList(){
if(!this.isLoading) return
uni.showLoading({ uni.showLoading({
title: '加载中...' title: '加载中...'
}) })
if(!this.isLoading) return this.loadStatus = '加载中...'
getArticle({page: this.page,size: this.size, isHot: 0}).then((res)=>{ 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) this.articleList = this.articleList.concat(res.data.content)
uni.hideLoading() uni.hideLoading()
}) })
@ -123,7 +132,7 @@
.list-box{ .list-box{
width: 100%; width: 100%;
padding: 180rpx 40rpx 40rpx; padding: 180rpx 40rpx 0rpx;
.list-item{ .list-item{
width: 100%; width: 100%;
background: #fff; background: #fff;
@ -173,5 +182,11 @@
} }
} }
} }
.loadStatus-box{
text-align: center;
font-size: 28rpx;
color: #000;
padding: 30rpx 0;
}
} }
</style> </style>

1
pages/life/index.vue

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

BIN
static/images/eye2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 B

Loading…
Cancel
Save