|
|
@@ -19,12 +19,15 @@
|
|
|
</view>
|
|
|
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
|
|
|
<!-- 空白页 -->
|
|
|
- <empty v-if="orderList.length === 0"></empty>
|
|
|
+ <view class="empty-box"><empty v-if="orderList.length === 0"></empty></view>
|
|
|
+
|
|
|
|
|
|
<!-- 订单列表 -->
|
|
|
<view v-for="(item, index) in orderList" :key="index" class="order-item flex">
|
|
|
<view class="title-box flex_item">
|
|
|
- <view class="title-avatar"><image :src="item.avatar"></image></view>
|
|
|
+ <view class="title-avatar">
|
|
|
+ <image :src="item.avatar"></image>
|
|
|
+ </view>
|
|
|
<view class="list_tpl">
|
|
|
<view class="title">
|
|
|
<text>{{ item.nickname }}</text>
|
|
|
@@ -40,250 +43,305 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { mapState, mapMutations } from 'vuex';
|
|
|
-import uniLoadMore from '@/uview-ui/components/u-loading-page/u-loading-page.vue';
|
|
|
-import empty from '@/uview-ui/components/u-empty/u-empty.vue';
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- empty,
|
|
|
- uniLoadMore
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- // 初始化获取页面宽度
|
|
|
- uni.createSelectorQuery()
|
|
|
- .select('.content')
|
|
|
- .fields(
|
|
|
- {
|
|
|
- size: true
|
|
|
- },
|
|
|
- data => {
|
|
|
- // console.log(data);
|
|
|
- // console.log(Math.floor((data.width / 750) * 300));
|
|
|
- // 保存头部高度
|
|
|
- this.maxheight = data.height - Math.floor((data.width / 750) * 470) - 44;
|
|
|
- // console.log(this.maxheight);
|
|
|
- }
|
|
|
- )
|
|
|
- .exec();
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 头部图高度
|
|
|
- maxheight: '',
|
|
|
- orderList: [
|
|
|
- {
|
|
|
- nickname:'lan',
|
|
|
- time:'2021-9-9'
|
|
|
- }
|
|
|
- ],
|
|
|
- all: '',
|
|
|
- loadingType:'',
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(options) {},
|
|
|
- onShow() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 页面跳转
|
|
|
- navto(e) {
|
|
|
- uni.navigateTo({
|
|
|
- url: e
|
|
|
- });
|
|
|
+ import {
|
|
|
+ spread
|
|
|
+ } from '@/api/finance.js'
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import uniLoadMore from '@/uview-ui/components/u-loading-page/u-loading-page.vue';
|
|
|
+ import empty from '@/uview-ui/components/u-empty/u-empty.vue';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ empty,
|
|
|
+ uniLoadMore
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 初始化获取页面宽度
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select('.content')
|
|
|
+ .fields({
|
|
|
+ size: true
|
|
|
+ },
|
|
|
+ data => {
|
|
|
+ // console.log(data);
|
|
|
+ // console.log(Math.floor((data.width / 750) * 300));
|
|
|
+ // 保存头部高度
|
|
|
+ this.maxheight = data.height - Math.floor((data.width / 750) * 470) - 44;
|
|
|
+ // console.log(this.maxheight);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .exec();
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ // 头部图高度
|
|
|
+ maxheight: '',
|
|
|
+ orderList: [{}],
|
|
|
+ all: '', //推广人数
|
|
|
+ loadingType: 'more', //页面加载即时刷新
|
|
|
+ page: 1, //默认展示一行
|
|
|
+ limit: 10, //一行展示10条数据
|
|
|
+ loadingType:'more'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.loadData(); //onload只是在第一次进入页面会刷新数据，从二级页面回来不会重新加载数据
|
|
|
},
|
|
|
- // 点击返回 我的页面
|
|
|
- toBack() {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/user/user'
|
|
|
- });
|
|
|
+
|
|
|
+ onShow() { //onShow没有参数
|
|
|
+ this.loadData(); //onshow在每次打开页面都会加载数据，可以用于数据在需要刷新的环境下
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async loadData() {
|
|
|
+ if (this.loadingType == "nomore") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ spread({
|
|
|
+ limit: 10,
|
|
|
+ page: 1
|
|
|
+ }).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ this.all = data.total;
|
|
|
+ this.orderList = data.list;
|
|
|
+ if (data.length != this.limit) {
|
|
|
+ this.loadingType = 'nomore'
|
|
|
+ } else {
|
|
|
+ this.page++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 页面跳转
|
|
|
+ navto(e) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: e
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击返回 我的页面
|
|
|
+ toBack() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/user/user'
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-page {
|
|
|
- background: #ffffff;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.content-money {
|
|
|
- padding-bottom: 30rpx;
|
|
|
- background: $page-color-base;
|
|
|
- .buttom-box {
|
|
|
- position: relative;
|
|
|
- background-color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- margin: 0 30rpx;
|
|
|
- padding: 30rpx 0;
|
|
|
- border-radius: $border-radius-sm;
|
|
|
- margin-top: -80rpx;
|
|
|
- .buttom {
|
|
|
- font-size: $font-lg;
|
|
|
- flex-grow: 1;
|
|
|
- .money {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #ff0000;
|
|
|
+ page {
|
|
|
+ background: #ffffff;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-money {
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ background: $page-color-base;
|
|
|
+
|
|
|
+ .buttom-box {
|
|
|
+ position: relative;
|
|
|
+ background-color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-radius: $border-radius-sm;
|
|
|
+ margin-top: -80rpx;
|
|
|
+
|
|
|
+ .buttom {
|
|
|
+ font-size: $font-lg;
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .text {
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .interval {
|
|
|
- width: 2rpx;
|
|
|
- height: 60rpx;
|
|
|
- background-color: #eeeeee;
|
|
|
- }
|
|
|
- .icon {
|
|
|
- height: 50rpx;
|
|
|
- width: 48rpx;
|
|
|
- margin: 0 auto;
|
|
|
- .icon-img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .interval {
|
|
|
+ width: 2rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background-color: #eeeeee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ height: 50rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .icon-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.money-box {
|
|
|
- // background: $base-color;
|
|
|
- height: 424rpx;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- font-size: 35rpx;
|
|
|
- position: relative;
|
|
|
- // padding-top: 60rpx;
|
|
|
- .header {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 700;
|
|
|
- z-index: 99;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .goback-box {
|
|
|
- position: absolute;
|
|
|
- left: 18rpx;
|
|
|
- top: 0;
|
|
|
- height: 80rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .goback {
|
|
|
- z-index: 100;
|
|
|
- width: 34rpx;
|
|
|
- height: 34rpx;
|
|
|
- }
|
|
|
- .tuiguang_bg {
|
|
|
- width: 100%;
|
|
|
+
|
|
|
+ .money-box {
|
|
|
+ // background: $base-color;
|
|
|
height: 424rpx;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .money_img {
|
|
|
- width: 100%;
|
|
|
- height: 120rpx;
|
|
|
+ color: #ffffff;
|
|
|
text-align: center;
|
|
|
- padding-top: 50rpx;
|
|
|
- padding-bottom: 135rpx;
|
|
|
- image {
|
|
|
- width: 120rpx;
|
|
|
+ font-size: 35rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // padding-top: 60rpx;
|
|
|
+ .header {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ z-index: 99;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goback-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 18rpx;
|
|
|
+ top: 0;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goback {
|
|
|
+ z-index: 100;
|
|
|
+ width: 34rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tuiguang_bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 424rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money_img {
|
|
|
+ width: 100%;
|
|
|
height: 120rpx;
|
|
|
- border: 4rpx solid #fd5f6f;
|
|
|
- border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 50rpx;
|
|
|
+ padding-bottom: 135rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border: 4rpx solid #fd5f6f;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .money-frame {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- padding-top: 120rpx;
|
|
|
- // left: 30rpx;
|
|
|
- // height: 460rpx;
|
|
|
- // display: flex;
|
|
|
- // align-items: flex-start;
|
|
|
- // flex-direction: column;
|
|
|
- // justify-content: center;
|
|
|
- }
|
|
|
- .money_name {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- font-size: 32rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .money_num {
|
|
|
- font-size: 72rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- .money_ren {
|
|
|
- font-size: 36rpx;
|
|
|
+
|
|
|
+ .money-frame {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 120rpx;
|
|
|
+ // left: 30rpx;
|
|
|
+ // height: 460rpx;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: flex-start;
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money_name {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money_num {
|
|
|
+ font-size: 72rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ .money_ren {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.navbar {
|
|
|
- display: flex;
|
|
|
- height: 40px;
|
|
|
- padding: 0 5px;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
|
|
- position: relative;
|
|
|
- z-index: 10;
|
|
|
- .nav-item {
|
|
|
- flex: 1;
|
|
|
+
|
|
|
+ .navbar {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- font-size: 15px;
|
|
|
- color: $font-color-dark;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 5px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
|
|
position: relative;
|
|
|
- &.current {
|
|
|
- color: #ff0000;
|
|
|
- &:after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 0;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 44px;
|
|
|
- height: 0;
|
|
|
- border-bottom: 2px solid #ff0000;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 15px;
|
|
|
+ color: $font-color-dark;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &.current {
|
|
|
+ color: #ff0000;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 0;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 44px;
|
|
|
+ height: 0;
|
|
|
+ border-bottom: 2px solid #ff0000;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-// 列表
|
|
|
+
|
|
|
+ // 列表
|
|
|
|
|
|
|
|
|
.order-item {
|
|
|
padding: 20rpx 30rpx;
|
|
|
line-height: 1.5;
|
|
|
+
|
|
|
.title-box {
|
|
|
width: 100%;
|
|
|
+
|
|
|
.title-avatar {
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
margin-right: 25rpx;
|
|
|
background: #03A9F4;
|
|
|
border-radius: 100%;
|
|
|
+
|
|
|
image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.list_tpl {
|
|
|
width: 85%;
|
|
|
+
|
|
|
.title {
|
|
|
font-size: $font-lg;
|
|
|
color: $font-color-base;
|
|
|
@@ -291,25 +349,29 @@ page {
|
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+
|
|
|
.time {
|
|
|
font-size: $font-base;
|
|
|
color: $font-color-light;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.money {
|
|
|
color: #db1935;
|
|
|
font-size: $font-lg;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.list-scroll-content {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.content {
|
|
|
- height: 100%;
|
|
|
- .empty-content {
|
|
|
- background-color: #ffffff;
|
|
|
+ .list-scroll-content {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .empty-content {
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
