<template><page-meta :root-font-size="fontSize+'px'"></page-meta> <member-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div member-order-list"> <view class="div common-header-wrap"> <view class="status-holder"></view> <view :style="'height:'+navHeight+'px'"></view> <view class="common-header-holder"></view> <view class="common-header-fixed"> <title-header /> <uni-nav-bar title="兑换记录" class="common-header" left-icon="back" @clickLeft="goBack()"> </uni-nav-bar> </view> </view> <!-- header --> <view class="div order-header"> <view class="ul"> <view class="li item" v-for="item in orderNav" v-bind:key="item.id" v-bind:class="{ active: stateType == item.id }" v-on:click="setOrderNavActive(item.id)" > {{ item.name }} </view> </view> </view> <view class="scroll-view div" style="position:relative"> <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div" @scrolltolower="loadMore" scroll-y="true"> <view class="div order-body" v-if="order_list && order_list.length" > <view class="div list" v-for="item in order_list" :key="item.point_orderid"> <view class="div" @click="goNavigate('/pages/member/pointsorder/OrderDetail',{point_orderid:item.point_orderid})"> <view class="div tips-body"> <text class="span tips"> 订单编号: {{ item.point_ordersn }} </text> <text class="span title tips statusTips" > {{ item.point_orderstatetext }} </text> </view> <view class="div order-image"> <view class="div goods_info clearfix" v-for="(image,index) in item.prodlist" :key="index" > <view class="div img-wrapper"> <image mode="aspectFit" class="img" v-bind:src="image.pointog_goodsimage" /> </view> <view class="p goods_name">{{image.pointog_goodsname}}</view> <view class="p goods_points"> <view class="points">¥{{image.pointog_goodspoints}}</view> <view class="num">X{{image.pointog_goodsnum}}</view> </view> </view> </view> <view class="div order_amount"> (共计{{ item.prodlist.length }}种商品) 合计 : <text class="order_amount_icon">¥</text><text class="i">{{ item.point_allpoint }}积分</text> </view> </view> <view class="div order-list-opratio"> <!-- 收货 --> <text v-if="item.point_orderstate =='30'" v-on:click="receive(item.point_orderid)" class="button line_red">收货</text> <!-- 取消 --> <text v-if="item.point_orderstate =='20'" v-on:click="cancel(item.point_orderid)" class="button line_red">取消</text> </view> </view> </view> <empty-record v-else-if="order_list && !order_list.length"></empty-record> </scroll-view> </view> </view> <uni-popup background-color="#fff" ref="confirm" type="dialog"> <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog> </uni-popup> </member-base> </template> <script> import {getFontSize} from '@/util/common' import TitleHeader from '../../TitleHeader' import { urlencode } from '@/util/common' import MemberBase from '../MemberBase' import { getOrderList, cancelOrder, receiveOrder } from '../../../api/memberPointsorder' import { mapState } from 'vuex' import EmptyRecord from '../../EmptyRecord' export default { components:{ TitleHeader, MemberBase, EmptyRecord }, name:'MemberOrderList', data(){ return { navHeight: 0, dialog:{}, order_id: 0, orderNav: [ { 'name': '全部', 'id': '' }, { 'name': '待发货', 'id': 'state_pay' }, { 'name': '待收货', 'id': 'state_send' }, { 'name': '已取消', 'id': 'state_cancel' }, { 'name': '已完成', 'id': 'state_finish' } ], stateType: '', orderDetailVisible: false, wrapperHeight: 0, params: { 'page': 0, 'per_page': 10 }, loading: false, // 是否加载更多 isMore: true, // 是否有更多 order_list: false, } }, mounted(){ // #ifdef MP-WEIXIN this.navHeight = uni.getMenuButtonBoundingClientRect().top // #endif this.wrapperHeight = uni.getSystemInfoSync().windowHeight - 180 }, computed:{ fontSize(){ return getFontSize() }, ...mapState({ user: state => state.member.info }) }, onLoad: function (option) { this.stateType=option.state ? option.state : '' this.loadMore() }, methods:{ closeDialog(){ }, confirmDialog(value){ switch(this.dialog.condition){ case 1: cancelOrder(this.dialog.data).then(res => { this.reload() }).catch(function (error) { uni.showToast({icon:'none',title: error.message}) }) break case 2: receiveOrder(this.dialog.data).then(res => { this.reload() }).catch(function (error) { uni.showToast({icon:'none',title: error.message}) }) break } }, goNavigate(path,query=false){ uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')}) }, goBack(){uni.navigateBack({delta:1})}, setOrderNavActive (index) { this.stateType = index this.getOrderList(true) }, cancel (orderId) { this.dialog={condition:1,content:'确定要取消该订单吗?',data:orderId} this.$refs.confirm.open() }, receive (orderId) { this.dialog={condition:2,content:'确定该订单已收货吗?',data:orderId} this.$refs.confirm.open() }, loadMore () { this.loading = true this.params.page = ++this.params.page if (this.isMore) { this.loading = false this.getOrderList(false) } }, reload () { // 重新加载数据 this.params.page = 0 this.isMore = true this.loading = false this.order_list = false this.loadMore() }, getOrderList (ifReplace) { uni.showLoading({ title: '加载中' }) if (ifReplace) { this.loading = false this.params.page = 1 this.isMore = true } getOrderList(this.params, this.stateType, '').then(res => { uni.hideLoading() if (res.result.hasmore) { this.isMore = true } else { this.isMore = false } let tOrderList = res.result.order_list if (tOrderList) { if (ifReplace || !this.order_list) { this.order_list = tOrderList } else { this.order_list = this.order_list.concat(tOrderList) } } }).catch(function (error) { uni.hideLoading() uni.showToast({icon:'none',title: error.message}) }) } } } </script> <style lang="scss" scoped> .scroll-view-wrapper{display: flex;flex-direction: column;} .scroll-view{flex:1} .member-order-list { .order-header { height:2.2rem; .ul { list-style: none; width: auto; display: flex; justify-content: space-around; align-content: center; align-items: center; height: 100%; background: rgba(255, 255, 255, 1); border-bottom: 1px solid #e8eaed; .li { font-size:$subFontSize; color: #333; height: 100%; text-align: center; line-height:2.2rem; border-bottom:0.1rem solid transparent; &.active { color: $primaryColor; border-bottom-color: $primaryColor; } } } } .order-body { position:relative; .list { width: 100%; margin-top:0.5rem; .tips-body { height:2.2rem; background: rgba(255, 255, 255, 1); box-shadow: 0 0.5px 0 0 rgba(232, 234, 237, 1); display: flex; justify-content: space-between; padding: 0 0.75rem 0 0.5rem; .tips { font-size:$subFontSize; color: #333; line-height:2.2rem; } .statusTips { color: $primaryColor; } } .order-image { height: 4.55rem; background: rgba(250, 250, 250, 1); width: 100%; overflow:hidden; overflow-x: auto; white-space: nowrap; .goods_info{ height:4rem; margin-bottom: .5rem; display: flex; align-items: center; padding-right: $pageSpace; .img-wrapper{ width: 3rem; height: 3rem; margin: .85rem .6rem .5rem .3rem; .img{ width: 3rem; height: 3rem; border-radius: 1px; } } .goods_name{ white-space: normal; overflow: hidden; height: 2rem; width: 10rem; font-size: .7rem; } .goods_points{ margin-left: auto; padding-right: .75rem; text-align: right; .points{ font-size:$subFontSize; color: rgba(78, 84, 93, 1); } .num{ font-size: .6rem; color: #999; padding-top: .3rem; } } } } .order_amount { font-size:$subFontSize; color: rgba(78, 84, 93, 1); line-height:2.2rem; height:2.2rem; background-color: #fff; padding: 0 0.75rem 0 0; border-bottom: 1px solid #e8eaed; box-sizing: border-box; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .order_amount_icon{ font-size:$subFontSize; color: $primaryColor; } .i { font-size:$h1; color: $primaryColor; padding-left:0.25rem; font-style: normal; &.freight { color: #333; font-size:$fontSize; } } } } .loading-wrapper { text-align: center; .p { color: #c3c3c3; font-size:$fontSize; margin:0.5rem auto; } } } .mint-popup { width: 100%; height:12rem; } } .order-list-opratio{height: 2.2rem;display: flex;justify-content: flex-end;background: rgba(255, 255, 255, 1);border-radius: 0.1rem;} .order-list-opratio .button{width: 4.5rem;height: 1.5rem;font-size:$subFontSize;border-radius: 0.7rem;margin: 0.35rem 0.75rem 0.35rem 0;background-color: #fff;border: 1px solid #ccc;box-shadow: 0 3px 6px 0 rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;} .order-list-opratio .line_red{background-color: #fff;color: #f2270c;border: 1px solid #f2270c;box-shadow: 0 3px 6px 0 rgba(242,39,12,.1);} </style>