@ -0,0 +1,111 @@
|
||||
|
||||
<template> |
||||
<view class="article-box"> |
||||
<view class="headline">{{detail.title}}</view> |
||||
<view class="acea-row"> |
||||
<view class="header-img"><image src="../../../static/images/menu2.png"></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> |
||||
|
||||
</view> |
||||
<view class="fz24">{{detail.addTime}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="content"> |
||||
<view class="conter" v-html="detail.content"></view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getArticleDetail } from "@/api/store"; |
||||
export default{ |
||||
data() { |
||||
return{ |
||||
id: this.id, |
||||
detail: {} |
||||
} |
||||
}, |
||||
onShareAppMessage() { |
||||
return { |
||||
title: this.detail.title, |
||||
imageUrl: this.detail.imageInput, |
||||
path: 'pages/life/articleDeail/index?id=' + this.detail.id, |
||||
success(res) { |
||||
uni.showToast({ |
||||
title: '分享成功', |
||||
}) |
||||
}, |
||||
fail(res) { |
||||
uni.showToast({ |
||||
title: '分享失败', |
||||
icon: 'none', |
||||
}) |
||||
}, |
||||
} |
||||
}, |
||||
methods:{ |
||||
getArticleDetail(){ |
||||
getArticleDetail({id: this.id}).then((res)=>{ |
||||
this.detail = res.data |
||||
}) |
||||
} |
||||
}, |
||||
onLoad: function (option) { |
||||
this.id= this.$yroute.query.id; |
||||
this.getArticleDetail() |
||||
} |
||||
|
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.article-box{ |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
padding: 0 40rpx; |
||||
.headline{ |
||||
font-size: 32rpx; |
||||
color: #333333; |
||||
padding-top: 20rpx; |
||||
margin-bottom: 30rpx; |
||||
font-weight: 500; |
||||
} |
||||
.header-img{ |
||||
width: 72rpx; |
||||
height: 72rpx; |
||||
margin-right: 20rpx; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.release-auth{ |
||||
font-size: 32rpx; |
||||
color: #333; |
||||
line-height: 44rpx; |
||||
margin-bottom: 6rpx; |
||||
} |
||||
.fz24{ |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
margin-right: 20rpx; |
||||
} |
||||
.eye-icon{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
.content{ |
||||
width: 100%; |
||||
padding: 40rpx 0; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,177 @@
|
||||
<template> |
||||
<view class="list-page"> |
||||
|
||||
<view class="search-box"> |
||||
<view class="search-content acea-row row-middle"> |
||||
<view class="search-icon"><image src="../../../static/images/search.png"> </image></view> |
||||
<input type="text" placeholder="请输入相关关键词" /> |
||||
<view class="search-btn">搜一下</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="list-box"> |
||||
<view class="list-item acea-row row-between row-middle" v-for="(item,index) in articleList" :key="index" @click="toDetail(item.id)"> |
||||
<view class="item-l"> |
||||
<view class="title-box acea-row"> |
||||
<image src="../../../static/images/hot.png" v-if="item.isHot"></image> |
||||
<view class="title line2">{{item.title}}</view> |
||||
</view> |
||||
<view class="auth-info acea-row row-between"> |
||||
<view class="auth">{{item.author}}</view> |
||||
</view> |
||||
<view class="acea-row row-middle"> |
||||
<view class="auth time">{{item.createTime}}</view> |
||||
<view class="see acea-row row-middle"> |
||||
<text>200</text> |
||||
<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> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getArticle } from "@/api/store"; |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
articleList: [], |
||||
page: 0, |
||||
size: 10, |
||||
isLoading: true |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getArticleList() |
||||
}, |
||||
onReachBottom() { |
||||
this.page= this.page+1 |
||||
this.getArticleList() |
||||
}, |
||||
methods:{ |
||||
getArticleList(){ |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if(!this.isLoading) return |
||||
getArticle({page: this.page,size: this.size, isHot: 0}).then((res)=>{ |
||||
res.data.content.length < this.size ? this.isLoading = false : this.isLoading = true |
||||
this.articleList = this.articleList.concat(res.data.content) |
||||
uni.hideLoading() |
||||
}) |
||||
}, |
||||
toDetail(id){ |
||||
this.$yrouter.push({ |
||||
path: '/pages/life/articleDetail/index', |
||||
query: { |
||||
id: id |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.list-page{ |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
background: #EEEEEE; |
||||
.search-box{ |
||||
width: 100%; |
||||
padding: 32rpx 40rpx; |
||||
background: #fff; |
||||
position: fixed; |
||||
top: 0; |
||||
.search-icon{ |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
margin-right: 12rpx; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.search-content{ |
||||
width: 100%; |
||||
padding: 0 0 0 50rpx; |
||||
border: 2rpx solid #FF5100; |
||||
border-radius: 8rpx; |
||||
font-size: 28rpx; |
||||
border-right: 0; |
||||
input{ |
||||
color: #BFBFBF; |
||||
} |
||||
.search-btn{ |
||||
width: 132rpx; |
||||
height: 68rpx; |
||||
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%); |
||||
line-height: 68rpx; |
||||
text-align: center; |
||||
color: #fff; |
||||
border-radius: 8rpx; |
||||
margin-left: auto; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.list-box{ |
||||
width: 100%; |
||||
padding: 180rpx 40rpx 40rpx; |
||||
.list-item{ |
||||
width: 100%; |
||||
background: #fff; |
||||
border-radius: 12rpx; |
||||
padding: 30rpx 28rpx; |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
margin-bottom: 24rpx; |
||||
.item-l{ |
||||
width: calc(100% - 280rpx); |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
.title-box{ |
||||
font-size: 32rpx; |
||||
color: #4A4A4A; |
||||
margin-bottom: 12rpx; |
||||
image{ |
||||
width: 19rpx; |
||||
height: 22rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
.title{ |
||||
width: calc(100% - 38rpx); |
||||
margin-top: -10rpx; |
||||
} |
||||
} |
||||
.auth-info{ |
||||
margin-bottom: 12rpx; |
||||
} |
||||
.see{ |
||||
margin-left: 20rpx; |
||||
image{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-left: 6rpx; |
||||
} |
||||
} |
||||
} |
||||
.item-r{ |
||||
width: 240rpx; |
||||
image{ |
||||
width: 100%; |
||||
height: 130rpx; |
||||
border-radius: 16rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,68 @@
|
||||
{ |
||||
"description": "项目配置文件", |
||||
"packOptions": { |
||||
"ignore": [] |
||||
}, |
||||
"setting": { |
||||
"bundle": false, |
||||
"userConfirmedBundleSwitch": false, |
||||
"urlCheck": true, |
||||
"scopeDataCheck": false, |
||||
"coverView": true, |
||||
"es6": true, |
||||
"postcss": true, |
||||
"compileHotReLoad": false, |
||||
"lazyloadPlaceholderEnable": false, |
||||
"preloadBackgroundData": false, |
||||
"minified": true, |
||||
"autoAudits": false, |
||||
"newFeature": false, |
||||
"uglifyFileName": false, |
||||
"uploadWithSourceMap": true, |
||||
"useIsolateContext": true, |
||||
"nodeModules": false, |
||||
"enhance": true, |
||||
"useMultiFrameRuntime": true, |
||||
"useApiHook": true, |
||||
"useApiHostProcess": true, |
||||
"showShadowRootInWxmlPanel": true, |
||||
"packNpmManually": false, |
||||
"enableEngineNative": false, |
||||
"packNpmRelationList": [], |
||||
"minifyWXSS": true, |
||||
"showES6CompileOption": false |
||||
}, |
||||
"compileType": "miniprogram", |
||||
"libVersion": "2.21.0", |
||||
"appid": "wx1bdc220038c3cb61", |
||||
"projectname": "miniprogram-1", |
||||
"debugOptions": { |
||||
"hidedInDevtools": [] |
||||
}, |
||||
"scripts": {}, |
||||
"staticServerOptions": { |
||||
"baseURL": "", |
||||
"servePath": "" |
||||
}, |
||||
"isGameTourist": false, |
||||
"condition": { |
||||
"search": { |
||||
"list": [] |
||||
}, |
||||
"conversation": { |
||||
"list": [] |
||||
}, |
||||
"game": { |
||||
"list": [] |
||||
}, |
||||
"plugin": { |
||||
"list": [] |
||||
}, |
||||
"gamePlugin": { |
||||
"list": [] |
||||
}, |
||||
"miniprogram": { |
||||
"list": [] |
||||
} |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 921 B |
|
After Width: | Height: | Size: 357 B |
|
After Width: | Height: | Size: 352 B |
|
After Width: | Height: | Size: 524 B |
|
After Width: | Height: | Size: 377 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.1 KiB |