H5_module/mine/refund/refundlist/refundlist.vue

<template>
<view>
<!--mine/refund/refund.wxml-->
<block v-if="pageList.length > 0">
	<view v-for="(item, index) in pageList" :key="index" class="lists">
		<view :data-id="item.id">
			<view class="ddbh">
				<view class="dflex id">订单编号：{{item.id}}
					<!-- <view class="tihuoma" wx:if="{{item.mode == 1 && item.state < 8 && item.state >= 1}}">提货码：<text>{{item.code}}</text></view> -->
				</view>
				<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>
			</view>
			<!-- <view class="ddbh" wx:if="{{item.mode ==1}}">
				<view class="dflex" bindtap="showOrder">
					{{merchantName}}
				</view>
				<image src="/pages/images/delete.png" class="type" bindtap="deleteOrder"></image>
			</view> -->
			<view v-for="(item, index2) in item.products" :key="index2" class="li" @tap="showOrder">
				<image :src="item.pic + '?x-oss-process=style/w160'" mode="aspectFit" class="cimg"></image>
				<view class="zhinfo">
					<view class="zhtit">{{item.title}}</view>
					<view v-if="item.propertiesList" class="guigecontent">规格：
						<text v-for="(itemGuige, index) in item.propertiesList" :key="index" class="guige" decode="true">{{itemGuige.value}}&nbsp;
						</text>
					</view>
					<view class="jiage">
						<view class="zhjia"><text class="money">￥</text><text class="size">{{item.salePrice}}</text></view>
						<view class="num">x{{item.quantity}}</view>
					</view>
				</view>
			</view>
			<view class="total">
				<!-- <view>共{{item.count}}件商品</view> -->
				<view>总金额：<text>￥{{item.money}}</text></view>
			</view>
		</view>
		<view class="status">
			<!-- <image src="/mine/images/refund.png" /> -->
			<block v-if="item.state>=40&&item.state<=41">
				<image src="/mine/static/mine/images/refund.png"></image>
				<view class="flex">退款中</view>
			</block>
			<block v-if="item.state==42">
				<image src="/mine/static/mine/images/refund.png"></image>
				<view class="flex">退款失败</view>
			</block>
			<block v-if="item.state==43">
				<image src="/mine/static/mine/images/refund.png"></image>
				<view class="flex">已退款</view>
			</block>
			<view class="sta-btn" @tap="deleteOrder" :data-index="index" :data-id="item.id">删除记录</view>
			<view @tap="sub" :data-index="index" class="sta-btn red" :data-id="item.id">查看详情</view>
		</view>
	</view>
</block>
<view class="nodata" v-if="ishow">
	<image :src="picUrlss+'empty_dd.png'"></image>
	<text>还没有订单哦</text>
</view>
</view>
</template>

<script>
// mine/refund/refund.js
const app = getApp();
const req = require("../../../utils/request.js");

export default {
  data() {
    return {
		picUrlss: req.public.picUrls,
      form: {
        page: 1,
        size: 5
      },
      pageList: [],
      isLoad: true,
      ishow: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList();
    /**
     * 获取门店名称
     */
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.form.page++;
    this.getList();
    // console.log(1);
  }
  /**
   * 用户点击右上角分享
   */
  ,
  methods: {
    /**
     * 获取退款列表
     */
    getList() {
      let isShowLoading = false;

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

      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); // this.setData({pageList:data})

        let refund = [];
        data.forEach(res => {
          if (res.state >= 40) {
            // console.log(res);
            req.getRequest('/api/order/detail', {
              id: res.id
            }, data => {
              that.setData(data);
            });
            refund.push(res);
          }
        }); // console.log(this.data.pageList)

        // console.log(refund);
        this.setData({
          pageList: refund
        });

        if (!this.pageList) {
          that.setData({
            ishow: true
          });
        } else {
          that.setData({
            ishow: false
          });
        }

        if (isShowLoading) {
          uni.hideLoading();
          isShowLoading = false;
        }
      });
      // console.log(this.pageList);
    },

    /**
     * 获取门店名称
     */

    /**
     * 删除订单
     */
    deleteOrder() {
      let that = this;
      req.msgConfirm('确定删除该订单？', () => {
        req.postRequest('/api/order/delete', {
          id: this.id
        }, () => {
          let pages = getCurrentPages();
          // console.log(pages);
          var prevPage = pages[pages.length - 1];
          // console.log(prevPage);
          let pageList = prevPage.data.pageList;
          pageList.splice(pageList.findIndex(it => it.id == that.id), 1);
          prevPage.$vm.setData({
            pageList: pageList
          }); // wx.startPullDownRefresh()
          // that.onShow()
          // wx.navigateBack()
        });
      });
    },

    sub(event) {
      uni.navigateTo({
        url: '/mine/refund/refundDetails/refundDetails?id=' + event.target.dataset.id
      });
    }

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