gaojian/app_tree_planting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面调整

Browse Source
This commit is contained in:
itgaojian163 2023-02-09 17:47:52 +08:00
parent bfde7147b2
commit b17ad7eaed
16 changed files with 1277 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/empty-view.vue Executable file
View File

@ -0,0 +1,23 @@
<template>
<view style="display: flex;justify-content: center;min-height: 100%;width: 750rpx;flex-direction: column;align-items: center;">
<image src="/static/images/ic_empty_data.png" mode="aspectFill" style="width: 200rpx;height: 200rpx;margin-top: 200rpx;"></image>
<view style="font-size: 35rpx;color: #BBBBBB;">暂无数据</view>
</view>
</template>
<script>
export default {
name: 'empty-view',
props: {},
computed: {
},
methods: {
}
}
</script>
<style>
</style>

3
main.js
View File

@ -3,8 +3,9 @@ import App from './App'
import store from './store'
import api from './config/api'
import base from './common/app'
import emptyView from './components/empty-view.vue';
Vue.component('emptyView', emptyView);
Vue.config.productionTip = false
Vue.prototype.$store = store

306
pages/duty/index.vue
View File

@ -1,41 +1,75 @@
<template>
<view class="page">
<view class="status-bar"></view>
<view class="content">
<!-- 搜索框 -->
<view class="search">
<scroller @init="initScroller" @down="refreshData" @up="getList" :up="optUp" @scroll="navFloatShow(scroller)"
:fixed="false">
<view class="status-bar"></view>
<view class="content">
<!-- 搜索框 -->
<!-- <view class="search">
<view class="search-content">
<image src="../../static/images/ic_search.png" class="icon" mode="aspectFill"></image>
<input @input="onSearchInput" placeholder="请输入关键字搜索" />
</view>
<view class="btn" @click="doSearch">搜索</view>
</view>
<!-- 轮播图 -->
<swiper v-if="slider.length > 0" class="swiper" :indicator-dots="true" :autoplay="true" :circular="true">
<swiper-item v-for="(item, index) in slider" :key="index">
<navigator class="item" hover-class="none" :url="'/pages/duty/list'">
<image :lazy-load="true" :src="item.imageUrl" mode="aspectFill"></image>
</view> -->
<!-- 轮播图 -->
<swiper v-if="slider.length > 0" class="swiper" :indicator-dots="false" :autoplay="true"
:circular="true">
<swiper-item v-for="(item, index) in slider" :key="index">
<navigator class="item" hover-class="none" :url="'/pages/duty/list'">
<image :lazy-load="true" :src="item.imageUrl" mode="scaleToFill"></image>
</navigator>
</swiper-item>
</swiper>
<view class="func-box">
<view class="item" @click="openActivity()">
<image src="../../static/images/ic_labour_pious_icon.png" mode="aspectFill"></image>
<text>劳动尽责</text>
</navigator>
</swiper-item>
</swiper>
<view class="func-box">
<view class="item" @click="openActivity()">
<image src="../../static/images/ic_labour_pious_icon.png" mode="scaleToFill"></image>
<text>劳动尽责</text>
</view>
<view class="item" @click="openCertificate">
<image src="../../static/images/ic_certify_search_icon.png" mode="scaleToFill"></image>
<text>证书查询</text>
</view>
<view class="item" @click="openExplain">
<image src="../../static/images/ic_duty_answer_icon.png" mode="scaleToFill"></image>
<text>尽责说明</text>
</view>
</view>
<view class="item" @click="openCertificate">
<image src="../../static/images/ic_certify_search_icon.png" mode="aspectFill"></image>
<text>证书查询</text>
</view>
<view class="item" @click="openExplain">
<image src="../../static/images/ic_duty_answer_icon.png" mode="aspectFill"></image>
<text>尽责说明</text>
<image class="divider-img" src="../../static/images/ic_duty_divider.png" mode="scaleToFill"></image>
<!-- 劳动尽责内容 -->
<view class="duty-box">
<view class="duty-content" v-if="list.length>0">
<view class="content-left">
<view class="title">
{{list[0].title}}
</view>
<view class="btn">去了解></view>
<view class="time">活动时间</view>
<view class="time">{{list[0].startTime}}至{{list[0].endTime}}</view>
</view>
<view class="content-right" v-if="list.length>=2">
<view class="right-item-top">
<view class="title">
{{list[1].title}}
</view>
<view class="btn">去了解></view>
</view>
<view class="right-item-bottom" v-if="list.length>=3">
<view class="title">
{{list[2].title}}
</view>
<view class="btn">去了解></view>
</view>
</view>
</view>
<view v-else>
<emptyView></emptyView>
</view>
</view>
</view>
<image class="divider" src="../../static/images/ic_duty_divider.png" mode="aspectFill"></image>
</view>
</scroller>
<pageLoading v-if="showPageLoading"></pageLoading>
</view>
</template>
@ -49,10 +83,28 @@
return {
showPageLoading: true,
slider: [{
imageUrl: "https://img1.baidu.com/it/u=1470385559,3839180880&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
imageUrl: "/static/images/ic_duty_title_bg.png"
}], //轮播图
list: [],
scroller: {},
optUp: {
isLock: true,
auto: true,
onScroll: true,
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 3 //每页数据条数,默认10
},
empty: {
tip: '暂无数据~'
}
},
};
},
onLoad(res) {
this.getList()
},
methods: {
doSearch() {
@ -74,6 +126,63 @@
uni.navigateTo({
url: "/pages/user/mine_certif_search"
})
},
/*初始化滚动*/
initScroller(scroller) {
this.scroller = scroller;
this.loadData();
},
/*刷新数据*/
refreshData() {
uni.showLoading({
title: '刷新中'
});
this.scroller.resetUpScroll();
},
onSearchInput: function(event) {
this.searchContent = event.target.value
console.log(event.target.value)
if (event.target.value == "") {
this.refreshData()
}
},
/*加载数据*/
loadData() {
this.list = [];
this.scroller.resetUpScroll();
},
/*滚动时导航栏浮动*/
navFloatShow(scroller) {
},
getList() {
this.$app.request({
url: this.$api.duty.getActivityList,
method: 'GET',
data: {
'rows': '3',
'page': '1',
},
dataType: 'json',
success: res => {
if (res.rows != undefined) {
this.list = res.rows
this.showPageLoading = false;
this.scroller.endBySize(res.rows.length, 3);
} else {
this.scroller.endSuccess();
this.$alert(res.msg);
}
},
fail: res => {
this.scroller.endErr();
},
complete: res => {
uni.stopPullDownRefresh();
this.showPageLoading = false;
}
});
}
}
@ -89,7 +198,7 @@
display: flex;
flex: 1;
flex-direction: column;
overflow: auto;
overflow: hidden;
height: 100%;
background: #fff;
}
@ -101,15 +210,16 @@
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 20rpx;
}
/*幻灯片广告 */
.swiper {
height: 350rpx;
height: 420rpx;
margin: 14rpx 24rpx 0;
image {
height: 350rpx;
height: 420rpx;
width: 100%;
border-radius: 15rpx;
//box-shadow: 0 0 12px #dddee1;
@ -179,9 +289,9 @@
}
}
.divider {
.divider-img {
width: 96%;
height: 100rpx;
height: 180rpx;
align-self: center;
}
@ -216,4 +326,134 @@
color: #b3b3b3;
}
}
.duty-box {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
margin-top: 50rpx;
.duty-content {
display: flex;
flex-direction: row;
width: 100%;
.content-left {
display: flex;
flex-direction: column;
background-image: url('/static/images/ic_duty_index_item_1.png');
width: 48%;
height: 80%;
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 10rpx;
padding: 15rpx;
.title {
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 32rpx;
}
.btn {
background: #169302;
border-radius: 15rpx;
padding: 10rpx 15rpx;
width: 140rpx;
color: white;
text-align: center;
font-size: 25rpx;
margin-top: 20rpx;
align-self: flex-end;
}
.time {
margin-top: 20rpx;
font-size: 25rpx;
}
}
.content-right {
display: flex;
flex-direction: column;
width: 48%;
height: 80%;
margin: 10rpx;
.right-item-top {
display: flex;
flex-direction: column;
background-image: url('/static/images/ic_duty_index_item_2.png');
width: 100%;
height: 50%;
background-size: 100% 100%;
background-repeat: no-repeat;
.title {
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 32rpx;
padding: 15rpx;
}
.btn {
background: #169302;
border-radius: 15rpx;
padding: 10rpx 15rpx;
width: 140rpx;
color: white;
text-align: center;
font-size: 25rpx;
margin-top: 20rpx;
margin-left: 10rpx;
align-self: flex-start;
}
}
.right-item-bottom {
display: flex;
flex-direction: column;
margin-top: 10rpx;
background-image: url('/static/images/ic_duty_index_item_3.png');
width: 100%;
height: 50%;
background-size: 100% 100%;
background-repeat: no-repeat;
.title {
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 32rpx;
padding: 15rpx;
}
.btn {
background: #169302;
border-radius: 15rpx;
padding: 10rpx 15rpx;
width: 140rpx;
color: white;
text-align: center;
margin-left: 10rpx;
font-size: 25rpx;
margin-top: 20rpx;
align-self: flex-start;
}
}
}
}
}
</style>

15
pages/user/index.vue
View File

@ -14,10 +14,10 @@
</view>
<!-- 资料 -->
<view class="amount">
<view class="item" @click="openPage('/pages/user/mine_certif_search')">
<!-- <view class="item" @click="openPage('/pages/user/mine_certif_search')">
<view class="num">3333</view>
<view>累计捐赠</view>
</view>
</view> -->
<view class="item">
<view class="num">3333</view>
<view>我的证书</view>
@ -51,14 +51,6 @@
</view>
<image src="../../static/images/ic_arrow_right.png" mode="aspectFill"></image>
</view>
<view class="item">
<view class="item-content">
<image src="../../static/images/ic_print_icon.png" mode="aspectFill"></image>
<text>我的捐赠尽责</text>
</view>
<image src="../../static/images/ic_arrow_right.png" mode="aspectFill"></image>
</view>
<view class="item" @click="changePwd">
<view class="item-content">
<image src="../../static/images/ic_print_icon.png" mode="aspectFill"></image>
@ -82,7 +74,8 @@
imgUrl: this.$api.common.imgUrl,
userInfo: {},
isRefresh: false,
loginOut: false
loginOut: false,
}
},
onLoad(res) {

BIN
static/images/ic_duty_index_item_1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
static/images/ic_duty_index_item_2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
static/images/ic_duty_index_item_3.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
static/images/ic_duty_title_bg.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 421 KiB

BIN
static/images/ic_empty_data.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

676
unpackage/dist/dev/app-plus/app-service.js vendored
View File

File diff suppressed because one or more lines are too long

771
unpackage/dist/dev/app-plus/app-view.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
unpackage/dist/dev/app-plus/static/images/ic_duty_index_item_1.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
unpackage/dist/dev/app-plus/static/images/ic_duty_index_item_2.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
unpackage/dist/dev/app-plus/static/images/ic_duty_index_item_3.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
unpackage/dist/dev/app-plus/static/images/ic_duty_title_bg.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 421 KiB

BIN
unpackage/dist/dev/app-plus/static/images/ic_empty_data.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB