9 changed files with 539 additions and 87 deletions
Split View
Diff Options
-
+20 -0api/api.js
-
+138 -0components/list/newsItem.vue
-
+45 -23components/list/scenicSpot.vue
-
+23 -45components/list/videoList.vue
-
+1 -1config.js
-
+14 -1pages.json
-
+37 -17pages/index/index.vue
-
+59 -0pages_order/service/newsDetail.vue
-
+202 -0pages_order/service/newsList.vue
+ 20
- 0
api/api.js
View File
+ 138
- 0
components/list/newsItem.vue
View File
| @ -0,0 +1,138 @@ | |||
| <template> | |||
| <view class="item" | |||
| > | |||
| <view class="image" @click="showVideo(item, index)"> | |||
| <image :src="item.spotImage && item.spotImage.split(',')[0]" mode="aspectFill"> | |||
| </image> | |||
| </view> | |||
| <view class="bottom"> | |||
| <view class="headImage"> | |||
| {{ item.spotName }} | |||
| </view> | |||
| <view class="like"> | |||
| <view class=""> | |||
| 查看详情 | |||
| </view> | |||
| <view class="" | |||
| style="margin-top: 10rpx;"> | |||
| <uv-icon size="26rpx" | |||
| name="arrow-right"></uv-icon> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| props : { | |||
| item : { | |||
| default : {} | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| queryParams: { | |||
| pageNo: 1, | |||
| pageSize: 10, | |||
| }, | |||
| total : 0, | |||
| list : [], | |||
| } | |||
| }, | |||
| computed : { | |||
| ...mapState(['spotList']), | |||
| spotListWord(){ | |||
| return this.spotList.filter(n => n.categoryId == 0) | |||
| }, | |||
| }, | |||
| methods: { | |||
| navigateTo(item){ | |||
| this.$utils.navigateTo(`/pages_order/service/?id=${item.id}&type=Inheritance`) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .item { | |||
| background-color: #fff; | |||
| position: relative; | |||
| width: calc(50% - 20rpx); | |||
| margin-left: 20rpx; | |||
| margin-top: 20rpx; | |||
| .image { | |||
| position: relative; | |||
| width: 100%; | |||
| height: 420rpx; | |||
| overflow: hidden; | |||
| image { | |||
| width: 100%; | |||
| height: 420rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| .icon { | |||
| position: absolute; | |||
| right: 30rpx; | |||
| top: 30rpx; | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| background-color: #ffffffaa; | |||
| border-radius: 50%; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| } | |||
| .bottom { | |||
| font-size: 30rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| position: absolute; | |||
| bottom: 0; | |||
| left: 0; | |||
| background-color: #ffffffaa; | |||
| width: calc(100% - 40rpx); | |||
| padding: 30rpx; | |||
| font-weight: 900; | |||
| align-items: center; | |||
| .headImage { | |||
| display: flex; | |||
| align-items: center; | |||
| image { | |||
| width: 50rpx; | |||
| height: 50rpx; | |||
| border-radius: 50%; | |||
| margin-right: 6rpx; | |||
| } | |||
| } | |||
| .like { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| font-weight: 500; | |||
| font-size: 22rpx; | |||
| } | |||
| } | |||
| } | |||
| .showVideo{ | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 100%; | |||
| width: 1000%; | |||
| video{ | |||
| // width: 100%; | |||
| // height: 100%; | |||
| } | |||
| } | |||
| </style> | |||
components/list/videoList - 副本.vue → components/list/scenicSpot.vue
View File
+ 23
- 45
components/list/videoList.vue
View File
+ 1
- 1
config.js
View File
+ 14
- 1
pages.json
View File
+ 37
- 17
pages/index/index.vue
View File
+ 59
- 0
pages_order/service/newsDetail.vue
View File
| @ -0,0 +1,59 @@ | |||
| <template> | |||
| <!-- 0文化遗产详情、1申遗历程详情、2非遗体验详情 三合一 --> | |||
| <view class="page"> | |||
| <navbar title="新闻详情" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="" | |||
| style="padding: 20rpx;"> | |||
| <uv-parse :content="detail.newsContent"></uv-parse> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| components : { | |||
| }, | |||
| data() { | |||
| return { | |||
| detail : {}, | |||
| id : 0, | |||
| type : '', | |||
| dict : {}, | |||
| collectonFlag : false, | |||
| } | |||
| }, | |||
| onLoad(args) { | |||
| this.id = args.id | |||
| }, | |||
| onShow() { | |||
| this.queryArticleById() | |||
| }, | |||
| onPullDownRefresh(){ | |||
| this.queryArticleById() | |||
| }, | |||
| methods: { | |||
| queryArticleById(){ | |||
| let data = { | |||
| newsId : this.id, | |||
| } | |||
| // if(uni.getStorageSync('token')){ | |||
| // data.token = uni.getStorageSync('token') | |||
| // } | |||
| this.$api('queryNewsById', data, res => { | |||
| uni.stopPullDownRefresh() | |||
| if(res.code == 200){ | |||
| this.detail = res.result | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page{ | |||
| } | |||
| </style> | |||
+ 202
- 0
pages_order/service/newsList.vue
View File
| @ -0,0 +1,202 @@ | |||
| <template> | |||
| <!-- 申遗新闻 --> | |||
| <view class="apply"> | |||
| <navbar title="申遗新闻" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="top-img"> | |||
| <uv-swiper | |||
| :list="banner.course" | |||
| indicator | |||
| height="420rpx" | |||
| keyName="imageContent"></uv-swiper> | |||
| </view> | |||
| <view class="middle-box"> | |||
| <view class="middle-img"> | |||
| <view | |||
| :key="index" | |||
| :class="{act : item.id == articleType}" | |||
| v-for="(item, index) in category"> | |||
| <image src="../static/applyRelic/2.png" mode="aspectFill" /> | |||
| </view> | |||
| </view> | |||
| <view class="middle-font"> | |||
| <view @click="selectMiddle(item.id)" | |||
| :key="index" | |||
| v-for="(item, index) in category"> | |||
| {{ item.name }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="apply-list"> | |||
| <uv-list @scrolltolower="scrolltolower"> | |||
| <uv-list-item | |||
| :title="item.newsTitle" | |||
| :note="$dayjs(item.createTime).format('YYYY-MM-DD')" | |||
| :border="true" | |||
| v-for="(item,index) in list" | |||
| :key="index" | |||
| :clickable="true" | |||
| @click="toUrl(item)" | |||
| > | |||
| <template #footer> | |||
| <uv-image :src="item.newsImage && | |||
| item.newsImage.split(',')[0]" radius="10rpx" width="240rpx" | |||
| height="160rpx" /> | |||
| </template> | |||
| </uv-list-item> | |||
| </uv-list> | |||
| </view> | |||
| <uv-empty | |||
| v-if="total == 0" | |||
| text="没有找到你需要的哦!" | |||
| textSize="30rpx" | |||
| iconSize="200rpx" | |||
| icon="list"></uv-empty> | |||
| <tabber /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| data() { | |||
| return { | |||
| queryParams: { | |||
| pageNo: 1, | |||
| pageSize: 10, | |||
| }, | |||
| total : 0, | |||
| list : [], | |||
| articleType : -1, | |||
| keyword : '', | |||
| category : [], | |||
| } | |||
| }, | |||
| computed : { | |||
| ...mapState(['banner']), | |||
| }, | |||
| onShow() { | |||
| this.queryArticleListByType() | |||
| }, | |||
| onReachBottom() { | |||
| this.loadMoreData() | |||
| }, | |||
| onPullDownRefresh(){ | |||
| this.queryArticleListByType() | |||
| }, | |||
| onLoad(args) { | |||
| this.keyword = args.keyword | |||
| this.queryNewsTypeList() | |||
| }, | |||
| methods: { | |||
| queryArticleListByType(){ | |||
| let query = { | |||
| ...this.queryParams, | |||
| categoryId : this.articleType | |||
| } | |||
| if(this.articleType == -1){ | |||
| return | |||
| } | |||
| if(this.keyword){ | |||
| query.articleTitle = this.keyword | |||
| } | |||
| this.$api('queryNewsByType', query, res => { | |||
| uni.stopPullDownRefresh() | |||
| if(res.code == 200){ | |||
| this.list = res.result.records | |||
| this.total = res.result.total | |||
| } | |||
| }) | |||
| }, | |||
| queryNewsTypeList(){ | |||
| this.$api('queryNewsTypeList', { | |||
| pageNo : 1, | |||
| pageSize : 9999999, | |||
| }, res => { | |||
| if(res.code == 200){ | |||
| this.category = res.result.records | |||
| this.selectMiddle(this.category[0].id) | |||
| } | |||
| }) | |||
| }, | |||
| loadMoreData(){ | |||
| if(this.queryParams.pageSize < this.total){ | |||
| this.queryParams.pageSize += 10 | |||
| this.queryArticleListByType() | |||
| } | |||
| }, | |||
| toUrl(item){ | |||
| console.log(item); | |||
| this.$utils.navigateTo(`/pages_order/service/newsDetail?id=${item.id}`) | |||
| }, | |||
| selectMiddle(id){ | |||
| this.articleType = id | |||
| this.queryArticleListByType() | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .apply { | |||
| .top-img { | |||
| } | |||
| .middle-box { | |||
| display: flex; | |||
| position: relative; | |||
| height: 220rpx; | |||
| align-items: center; | |||
| justify-content: space-around; | |||
| background-color: #fff; | |||
| .middle-img { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-around; | |||
| width: 100%; | |||
| view { | |||
| width: 160rpx; | |||
| height: 160rpx; | |||
| border-radius: 50%; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| } | |||
| .act{ | |||
| box-shadow: 0 0 18rpx 14rpx #ff000042; | |||
| } | |||
| .middle-font { | |||
| position: absolute; | |||
| display: flex; | |||
| width: 100%; | |||
| justify-content: space-around; | |||
| view { | |||
| width: 60rpx; | |||
| color: #FFFDF6; | |||
| font-weight: 600; | |||
| } | |||
| } | |||
| } | |||
| .apply-list { | |||
| width: 94%; | |||
| margin-left: 3%; | |||
| /deep/ .uv-list-item{ | |||
| background-color: #FFFDF6 !important; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||