123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <template>
- <view class="container history clearfix">
- <view class="history-main">
- <view v-if="isEmpty" class="empty-container">
- <image class="club-empty-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AJZvwAAGWWe4DnXk371.png" mode="aspectFit"></image>
- <view class="txt">暂无订单数据</view>
- </view>
- <view v-else class="history-list">
- <scroll-view scroll-y="true" >
- <view class="list" v-for="(item, index) in historyList" :key="index">
- <view class="list-left">
- <view class="list-p">订单号:<text class="txt">{{item.orderNo}}</text><text v-if="item.orderSubmitType == 3" class="tag">协销</text></view>
- <view class="list-p">总金额:<text class="txt">¥{{orderPriceToFixed(item.payTotalFee)}}</text></view>
- <view class="list-p">数量(赠):<text class="txt">{{item.productCount}}({{item.presentCount}})</text></view>
- </view>
- <view class="list-opea">
- <view class="opea-p">{{orderStateExp(item.status)}}</view>
- <view class="opea-type-dell" @click.stop="orderDetiles(item.orderID)">
- <text>查看详情</text>
- </view>
- </view>
- </view>
- <!--加载loadding-->
- <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
- <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
- <!--加载loadding-->
- </scroll-view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import authorize from '@/common/config/authorize.js'
- import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
- import tuiNomore from "@/components/tui-components/nomore/nomore"
- import { getSellerClubOrderList } from "@/api/seller.js"
- export default {
- components:{
- tuiLoadmore,
- tuiNomore,
- },
- data() {
- return {
- clubID:'',
- serviceProviderId:'',
- isEmpty:false,
- nomoreText: '上拉显示更多',
- pageNum:1,
- pageSize:10,
- hasNextPage:false,
- loadding: false,
- pullUpOn: true,
- pullFlag: true,
- allowDataStatus:true,
- wrapperHeight:'100%',
- scrollHeight:'',
- deleteAddressId:'',
- currPage:'',//当前页面
- prevPage:'',//上一个页面
- tabCurrentIndex:0,
- historyList:[],
- }
- },
- onLoad(option){
- this.clubID = option.clubID
- },
- methods: {
- inithistoryList(){
- this.$api.getComStorage('orderUserInfo').then((resolve) =>{
- let params = {clubID:resolve.clubID,serviceProviderId:this.serviceProviderId,pageNum:1,pageSize:this.pageSize};
- getSellerClubOrderList(params).then(response =>{
- let responseData = response.data
- if(responseData.results&&responseData.results.length > 0){
- this.isEmpty = false
- this.hasNextPage = response.data.hasNextPage
- this.historyList =responseData.results
- this.pullFlag = false;
- setTimeout(()=>{this.pullFlag = true;},500)
- if(this.hasNextPage){
- this.pullUpOn = false
- this.nomoreText = '上拉显示更多'
- }else{
- this.pullUpOn = true
- this.loadding = false
- this.nomoreText = '已至底部'
- }
- }else{
- this.isEmpty = true
- }
- }).catch(response =>{
- this.$util.msg(response.msg,2000)
- })
- })
- },
- getOnReachBottomData(){
- this.pageNum+=1
- this.$api.getComStorage('orderUserInfo').then((resolve) =>{
- let params = {clubID:resolve.clubID,serviceProviderId:this.serviceProviderId,pageNum:this.pageNum,pageSize:this.pageSize};
- getSellerClubOrderList(params).then(response =>{
- let responseData = response.data
- if(responseData.results&&responseData.results.length > 0){
- this.hasNextPage = response.data.hasNextPage
- this.historyList = this.historyList.concat(responseData.results)
- this.pullFlag = false;// 防上拉暴滑
- setTimeout(()=>{this.pullFlag = true;},500)
- if(this.hasNextPage){
- this.pullUpOn = false
- this.nomoreText = '上拉显示更多'
- }else{
- this.pullUpOn = false
- this.loadding = false
- this.nomoreText = '已至底部'
- }
- }
- }).catch(response =>{
- this.$util.msg(response.msg,2000)
- })
- })
- },
- orderPriceToFixed (n){
- let price ='';
- price = n.toFixed(2);
- return price
- },
- //订单状态文字和颜色
- orderStateExp (state){
- let stateText = '',
- stateTextObject={
- 0:'待确认',
- 4:'交易完成',
- 5:'订单完成',
- 6:'已关闭',
- 7:'交易全退',
- 77:'交易全退',
- 11:'待付款待发货',
- 12:'待付款部分发货',
- 13:'待付款已发货',
- 21:'部分付款待发货',
- 22:'部分付款部分发货',
- 23:'部分付款已发货',
- 31:'已付款待发货',
- 32:'已付款部分发货',
- 33:'已付款已发货',
- 111:'待付款待发货',
- }
- Object.keys(stateTextObject).forEach(key => {
- if(key == state){
- stateText = stateTextObject[key]
- }
- })
- return stateText;
- },
- orderDetiles(id){
- this.$api.navigateTo(`/market/pages/order/order-details?type=confim&orderID=${id}`)
- }
- },
- onReachBottom() {
- if(this.hasNextPage){
- this.loadding = true
- this.pullUpOn = true
- this.getOnReachBottomData()
- }
- },
- onShow() {
- this.$api.getStorage().then((resolve) =>{
- this.serviceProviderId = resolve.serviceProviderID
- this.pageNum = 1;
- this.inithistoryList();
- })
- }
- }
- </script>
- <style lang='scss'>
- page {
- height: auto;
- }
- page,.container{
- /* padding-bottom: 120upx; */
- background: #F7F7F7;
- border-top: 1px solid #EBEBEB;
- }
- .container{
- position: relative;
- }
- .history-main{
- .list{
- display: flex;
- align-items: center;
- width: 702rpx;
- height: auto;
- padding: 24rpx;
- background: #FFFFFF;
- position: relative;
- border-bottom: 1px solid #EBEBEB;
- .list-left{
- flex: 7;
- .list-p{
- line-height: 58rpx;
- font-size: $font-size-26;
- color: $text-color;
- text-align: left;
- .txt{
- margin-left: 20rpx;
- }
- .tag{
- display: inline-block;
- width: 60rpx;
- height: 28rpx;
- line-height: 28rpx;
- font-size: $font-size-20;
- color: #FFFFFF;
- background: $btn-confirm;
- text-align: center;
- border-radius: 14rpx;
- margin-left: 20rpx;
- }
- }
- }
- .list-opea{
- flex: 3;
- color: #166CE1;
- align-items: center;
- display: flex;
- flex-direction: column;
- .opea-p{
- line-height: 70rpx;
- font-size: $font-size-24;
- color: #E11616;
- text-align: right;
- }
- .opea-type-dell{
- width: 160rpx;
- height: 68rpx;
- line-height: 68rpx;
- font-size: $font-size-24;
- text-align: center;
- color: #FFFFFF;
- border-radius: 14rpx;
- background: #166CE1;
- margin-top: 24rpx;
- }
- }
- }
- }
- </style>
|