H5_module/integralshop/order/order.vue

<template>
<view>
<!--pages/order/order.wxml-->
<view class="tab">
	<view v-for="(item, index) in TabList" :key="index" :class="'li ' + (item.active ? 'active' : '')" :data-index="index" @tap="switchTab">{{item.label}}</view>
</view>
<block v-if="pageList.length > 0">
	<view v-for="(item, index) in pageList" :key="index" class="lists">
		<view @tap="showOrder" :data-code="item.code" :data-id="item.id" :data-state="item.state">
			<view class="ddbh">
				<view class="dflex ">
					<image src="/mine/static/mine/images/ioc_hwg.png" class="ioc" v-if="item.orderType==10"></image>编号：{{item.id}}
				</view>
				<view class="tihuoma" v-if="item.mode == 1 && item.state < 8 && item.state >= 1">
					提货码：<text>{{item.code}}</text></view>
				<block>
					<image src="/static/pages/images/jishida.png" class="type" v-if="item.orderType == 5"></image>
					<image src="/mine/static/mine/images/tuangou.png" class="type" v-if="item.orderType == 2"></image>
					<image src="/mine/static/mine/images/pingtuan.png" class="type" v-if="item.orderType == 4"></image>
					<image src="/mine/static/mine/images/kanjia.png" class="type" v-if="item.orderType == 7"></image>
					<image src="/mine/static/mine/images/seckill.png" class="type" v-if="item.orderType == 3"></image>
					<image src="/mine/static/mine/images/newbornZone.png" class="type" v-if="item.orderType == 6"></image>
				</block>
			</view>
			<view v-for="(itempro, index2) in item.products" :key="index2" class="li">
				<image :src="itempro.pic + '?x-oss-process=style/w160'" mode="aspectFit" class="cimg"></image>
				<view class="zhinfo">
					<view class="zhtit">{{itempro.title}}</view>
					<view v-if="itempro.propertiesList" class="guigecontent">规格：
						<text v-for="(itemGuige, index) in itempro.propertiesList" :key="index" class="guige" decode="true">{{itemGuige.value}}&nbsp;
						</text>
					</view>
					<view class="jiage">
						<view class="zhjia" v-if="item.orderType!=11">￥{{itempro.salePrice}}</view>
						<view class="zhjia" v-if="item.orderType==11">{{itempro.integral}}积分+￥{{itempro.salePrice}}</view>
						<view class="num">×{{itempro.quantity}}</view>
					</view>
				</view>
			</view>
			<view class="total">
				<!-- <view>共{{item.count}}件商品</view> -->
				<view>
					<block v-if="item.orderType!=11">
						总金额：<text>￥{{item.money}}</text>
					</block>
					<block v-if="item.orderType==11">
						合计：<text>{{item.discountMoney}}积分+￥{{item.money}}</text>
					</block>
					<block v-if="item.discountMoney>0&&item.orderType!=11">
						优惠金额:<text>￥{{item.discountMoney}}</text>
					</block>
				</view>
			</view>
		</view>
		<view class="status">
			<block v-if="item.mode == 1 && item.state == 3">
				<view class="flex">待配货</view>
			</block>
			<block v-else>
				<view class="flex">{{item.stateName}}</view>
			</block>
			<block v-if="item.orderType==4">

			</block>
			<block v-else>
				<view class="sta-btn" @tap="refund" :data-id="item.id" :data-index="index" v-if="item.state>=2&&item.state<=6 && isrefund==1&&(item.orderType==1||item.orderType==10 ||item.orderType==5||item.orderType==11)">
					申请售后</view>
			</block>
			<view class="sta-btn" @tap="cancelOrder" :data-index="index" v-if="item.state == 1">取消订单</view>
			<!-- <navigator class="sta-btn" url="/mine/orderDet/orderDet?id={{item.id}}" hover-class="none">查看详情</navigator> -->
			<view class="sta-btn red" @tap="confirmOrder" :data-index="index" v-if="item.state == 5">确认收货</view>
			<view @tap="payOrder" :data-index="index" class="sta-btn red" v-if="item.state == 1">立即付款</view>
			<view @tap="scoreOrder" :data-index="index" class="sta-btn red" v-if="item.state == 7 && isOpenComments==1">立即评价</view>
		</view>
	</view>
</block>
<view class="nodata" v-if="ishow">
	<image :src="picUrlss+'empty_dd.png'"></image>
	<text>还没有订单哦</text>
</view>
<view class="placeholder-view" :style="'height:' + (bottomBlankHeight + 155) + 'rpx'"></view>
<foot channel="order" :isUpdate="isUpdate" product-type="2"></foot>
</view>
</template>

<script>
// pages/order/order.js
const app = getApp();
const req = require("../../utils/request.js");
import foot from "../components/integral-nav/index";

export default {
  data() {
    return {
		picUrlss: req.public.picUrls,
	bottomBlankHeight: app.globalData.isIPhoneX ? 68 : 0, 
      TabList: [{
        label: '全部',
        active: true
      }, {
        label: '待付款',
        state: 1
      }, {
        label: '待发货',
        state: 3
      }, {
        label: '待收货',
        state: 5
      }, {
        label: '已完成',
        state: 7
      }],
      form: {
        page: 1,
        size: 5
      },
      pageList: [],
      isLoad: true,
      index: "",
      ishow: false,
      isrefund: "",
      isOpenComments: ""
    };
  },

  components: {
    foot
  },
  props: {},
  onLoad: function (options) {
    let that = this;
    let title = "";
    this.isrefundFun();
    this.isOpenCommentsFun();

    if (options.orderType) {
      this.form.orderType = options.orderType;
      if (options.orderType == 2) title = '团购订单';
      if (options.orderType == 4) title = '拼团订单';
      if (options.orderType == 7) title = '砍价订单';
      if (options.orderType == 11) title = '积分订单';
      uni.setNavigationBarTitle({
        title: title
      });
    }

    const index = that.TabList.findIndex(it => it.state == options.state);
    if (options && options.state > 0) that.switchTab({
      currentTarget: {
        dataset: {
          index: index
        }
      }
    });else that.getList();
    this.setData({
      index: index
    });
  },

  onShow() {
    this.switchTab({
      currentTarget: {
        dataset: {
          index: this.index
        }
      }
    });
  },

  onReachBottom() {
    this.form.page++;
    this.getList();
  },

  methods: {
    switchTab(event) {
      let index = event.currentTarget.dataset.index;
      // console.log(index);
      let def = this.TabList.findIndex(it => it.active);
      let d = {};
      d['TabList[' + def + '].active'] = false;
      d['TabList[' + index + '].active'] = true;
      this.isLoad = true;
      this.form.page = 1;
      d['pageList'] = []; // this.data.form.states=this.data.TabList[index].state.toString();

      this.form.state = this.TabList[index].state;
      this.setData({
        index: index
      });
      this.setData(d);
      this.getList();
    },

    getList() {
      let isShowLoading = false;

      if (this.form.page == 1 && !isShowLoading) {
        req.loadIng('加载中');
        isShowLoading = true;
      }

      // console.log(!this.isLoad);
      if (!this.isLoad) return false;
      this.isLoad = false;
      let that = this;
      req.getRequest('/api/order/list', this.form, data => {
        // console.log(data);
        if (data && data.length == 10) this.isLoad = true;
        if (that.form.page > 1) data = that.pageList.concat(data);
        that.setData({
          pageList: data
        });
        // console.log(data);

        if (data.length <= 0) {
          that.setData({
            ishow: true
          });
        } else {
          that.setData({
            ishow: false
          });
        }

        if (isShowLoading) {
          uni.hideLoading();
          isShowLoading = false;
        }
      });
    },

    showOrder(e) {
      let id = e.currentTarget.dataset.id;
      let code = e.currentTarget.dataset.code;
      let state = e.currentTarget.dataset.state; // if(state!=8){

      app.globalData.openPage('mine/orderDet/orderDet?id=' + id + '&isrefund=' + this.isrefund + '&code=' + code); // }else{
      //   req.msg("订单已取消")
      // }
    },

    cancelOrder(event) {
      //取消订单
      let index = event.currentTarget.dataset.index;
      let page = this.pageList[index];
      let that = this;
      req.msgConfirm('确定取消该订单？', () => {
        req.postRequest('/api/order/cancel', {
          id: page.id
        }, () => {
          let d = {};
          d['pageList[' + index + '].stateName'] = '订单取消';
          d['pageList[' + index + '].state'] = 8;
          that.setData(d);
          that.switchTab({
            currentTarget: {
              dataset: {
                index: this.index
              }
            }
          });
        });
      });
    },

    confirmOrder(event) {
      //确认收货
      let index = event.currentTarget.dataset.index;
      let page = this.pageList[index];
      let that = this;
      // console.log(that.index);
      req.msgConfirm('确认执行该操作？', () => {
        req.postRequest('/api/order/receiving', {
          id: page.id
        }, () => {
          let d = {};
          d['pageList[' + index + '].stateName'] = '订单完成';
          d['pageList[' + index + '].state'] = 7;
          that.setData(d);
          that.switchTab({
            currentTarget: {
              dataset: {
                index: this.index
              }
            }
          });
        });
      });
    },

    payOrder(event) {
      //支付订单
      let index = event.currentTarget.dataset.index;
      let page = this.pageList[index];
      let that = this;
      req.payOrder(page.id, success => {
        // console.log(success);

        if (success) {
          //支付成功
          let d = {};
          d['pageList[' + index + '].stateName'] = '待发货';
          d['pageList[' + index + '].state'] = 3;
          that.setData(d);
          that.switchTab({
            currentTarget: {
              dataset: {
                index: this.index
              }
            }
          });
        }
      });
    },

    refund(event) {
      //申请退款
      let id = event.currentTarget.dataset.id;
      uni.navigateTo({
        url: '/mine/refund/refundType/refundType?id=' + id
      }); // let id = event.currentTarget.dataset.id;
      // req.postRequest('/api/order/refund',{id:id},res=>{
      //   req.msg('退款审核中')
      // })
    },

    isrefundFun() {
      //是否开启售后
      let isrefund = JSON.parse(req.getStorage('configRes'));

      if (isrefund.isRefund) {
        this.setData({
          isrefund: isrefund.isRefund
        });
      } // if(isrefund.isRefund==1){
      //   req.getRequest('/api/orderRefund/refundReason','',data=>{
      //     req.setStorage('isrefund',data)
      //   })
      // }

    },

    isOpenCommentsFun() {
      //是否开启评论
      let isOpenComments = JSON.parse(req.getStorage('configRes'));

      if (isOpenComments.is_open_comments) {
        this.setData({
          isOpenComments: isOpenComments.is_open_comments
        });
      }
    },

    scoreOrder(event) {
      //评价订单
      let index = event.currentTarget.dataset.index;
      let page = this.pageList[index];
      let that = this;
      app.globalData.openPage('mine/comments/comments?id=' + page.id);
    }

  }
};
</script>
<style>
@import "./order.css";
</style>