123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- <template>
- <view>
- <swiper :style="{ height: height }" class="swiper-box" duration="300">
- <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
- <scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
- <!-- 空白页 -->
- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
- <!-- 订单列表 -->
- <view>
- <view class="order-item flex" v-for="(item, index) in tabItem.orderList">
- <view class="title-box">
- <view class="title">
- <text>植物名称:{{ item.name }}</text>
- </view>
- <view class="time">
- <text>{{ item.create_time }}</text>
- </view>
- <view class="time">
- <text>场次:第{{ item.stage }}期</text>
- </view>
- </view>
- <view class="money">
- <view>植物进度:{{ item.price * 1 }}</view>
- <!-- <view class="">
- {{item.status==0&&item.is_return==1}} 待返还
- {{item.status==0&&item.is_return==0}} 进行中
- {{item.status==1}} 打怪成功
- {{item.status==2}} 打怪失败
- </view> -->
- <view class="money" v-if="item.status == 0 && item.is_return == 1">待发放</view>
- <view class="money" v-else-if="item.status == 0 && item.is_return == 0">进行中</view>
- <view class="money" v-else-if="item.status == 1">种植成功</view>
- <view class="money" v-else-if="item.status == 2">种植失败</view>
- </view>
- </view>
- </view>
- <uni-load-more :status="tabItem.loadingType" v-if="!(tabItem.orderList.length == 0 && tabItem.loaded)"></uni-load-more>
- </scroll-view>
- </swiper-item>
- </swiper>
- </view>
- </template>
- <script>
- import { getJl } from '@/api/user.js';
- import { mapState, mapMutations } from 'vuex';
- import { getMoneyStyle } from '@/utils/rocessor.js';
- import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
- import empty from '@/components/empty';
- export default {
- components: {
- empty,
- uniLoadMore
- },
- filters: {
- getMoneyStyle
- },
- data() {
- return {
- zc: 0,
- sr: 0,
- height: '',
- // 头部图高度
- maxheight: '',
- tabCurrentIndex: 0,
- orderStatusSum: 0,
- recharge: 0,
- navList: [
- {
- loadingType: 'more',
- orderList: [],
- page: 1, //当前页数
- limit: 10 //每次信息条数
- }
- ],
- money: ''
- };
- },
- computed: {
- ...mapState('user', ['userInfo'])
- },
- onReady(res) {
- var _this = this;
- uni.getSystemInfo({
- success: resu => {
- const query = uni.createSelectorQuery();
- query.select('.swiper-box').boundingClientRect();
- query.exec(function(res) {
- _this.height = resu.windowHeight - res[0].top + 'px';
- console.log('打印页面的剩余高度', _this.height);
- });
- },
- fail: res => {}
- });
- },
- // onPullDownRefresh() {
- // this.loadData()
- // },
- onLoad() {
- this.loadData();
- },
- methods: {
- ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
- async loadData() {
- let obj = this;
- //这里是将订单挂载到tab列表下
- // let index = this.tabCurrentIndex;
- let navItem = obj.navList[0];
- // let state = navItem.state;
- if (navItem.loaded === true) {
- //tab切换只有第一次需要加载数据
- return;
- }
- if (navItem.loadingType === 'loading') {
- //防止重复加载
- return;
- }
- // 修改当前对象状态为加载中
- navItem.loadingType = 'loading';
- // console.log(navItem.loadingType);
- getJl({
- page: navItem.page,
- limit: navItem.limit
- // pm: navItem.state
- })
- .then(({ data }) => {
- console.log(data.data, '2222');
- // obj.zc = data.zc
- // obj.sr = data.sr
- navItem.orderList = navItem.orderList.concat(data.data);
- console.log(navItem.orderList, 'item');
- navItem.page++;
- if (navItem.limit == data.data.length) {
- navItem.loadingType = 'more';
- } else {
- navItem.loadingType = 'noMore';
- }
- obj.$set(navItem, 'loaded', true);
- })
- .catch(e => {
- console.log(e);
- });
- }
- }
- };
- </script>
- <style lang="scss">
- //列表
- .swiper-box {
- .order-item:last-child {
- margin-bottom: 60rpx;
- }
- .order-item {
- padding: 20rpx 30rpx;
- line-height: 1.5;
- .title-box {
- .title {
- font-size: $font-lg;
- color: $font-color-base;
- }
- .time {
- font-size: $font-base;
- color: $font-color-light;
- }
- }
- .money {
- color: #fd5b23;
- font-size: $font-lg;
- text-align: right;
- .status {
- color: $font-color-light;
- }
- }
- }
- }
- .list-scroll-content {
- background: #ffffff;
- height: 100%;
- }
- .content {
- height: 100%;
- .empty-content {
- background-color: #ffffff;
- }
- }
- .btn-box {
- width: 674rpx;
- height: 88rpx;
- background: linear-gradient(0deg, #2e58ff, #32c6ff);
- border-radius: 44rpx;
- font-size: 36rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #ffffff;
- text-align: center;
- line-height: 88rpx;
- position: fixed;
- bottom: 48rpx;
- left: 0;
- right: 0;
- margin: 0 auto;
- }
- </style>
|