bai_cha_hui/pages/order/refund/index/index.vue

<template>
	<view class="refund-list">
		<view class="top-tabbar">
			<view :class="state_active==-1?'tab-item active':'tab-item'" @click="stateFunc(-1)">
				全部
			</view>
			<view :class="state_active==0?'tab-item active':'tab-item'" @click="stateFunc(0)">
				待处理
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
			@scrolltoupper="scrolltoupperFunc" @scrolltolower="scrolltolowerFunc">
			<view :class="topRefresh?'top-refresh open':'top-refresh'">
				<view class="circle" v-for="(circle,n) in 3" :key="n"></view>
			</view>
			<view class="list">
				<view class="item bg-white p30 mb20" v-for="(item,index) in tableData" :key="index">
					<view class="d-b-c">
						<text>{{item.create_time}}</text>
						<text class="red">{{item.state_text}}</text>
					</view>
					<view class="one-product d-s-c pt20">
						<view class="cover">
							<image :src="item.orderproduct.image.file_path" mode="aspectFit"></image>
						</view>
						<view class="flex-1">
							<view class="pro-info">{{item.orderproduct.product_name}}</view>
							<view class="pt10 p-0-30">
								<text class="f24 gray9">
									{{item.orderproduct.product_attr}}
								</text>
							</view>
						</view>
					</view>
					<view class="d-e-c pt20">
						<view>
							商品金额：
							<text class="red">¥{{item.orderproduct.total_price}}</text>
						</view>
					</view>
					<view class="d-e-c pt10">
						<view>
							订单实付金额：
							<text class="red"
								v-if="item.order_master && item.order_master.order_source==70">¥{{(item.order_master.pay_price*1+item.order_master.advance.pay_price*1).toFixed(2)}}</text>
							<text class="red" v-else>¥{{item.orderproduct.total_pay_price}}</text>
						</view>
					</view>
					<view class="d-e-c mt20 pt20 border-t">
						<button
							v-if="item.orderproduct.is_agent==0 && item.plate_status.value==0 && (item.status.value==0 || item.status.value==10) && item.type.value==30 "
							style="margin-right: 15rpx;" type="default" class="btn-gray-border"
							@click="intervention(item.order_refund_id)">申请平台介入</button>
						<text
							v-if="item.orderproduct.is_agent==0 && item.plate_status.value==10 && (item.status.value==0 || item.status.value==10) "
							style="margin-right: 15rpx;" type="default" class="text_red">平台介入处理中</text>
						<button type="default" class="btn-gray-border"
							@click="gotoRefundDetail(item.order_refund_id)">查看详情</button>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="tableData.length==0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*选中状态*/
				state_active: -1,
				/*页面数据*/
				tableData: [],
				list_rows: 5,
				last_page: 0,
				page: 1,
				no_more: false,
				loading: true,
				/*顶部刷新*/
				topRefresh: false,

			}
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.tableData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		mounted() {
			this.init();
			/*获取页面数据*/
			this.getData();

		},
		onPullDownRefresh() {
			/*下拉到顶，页面值还原初始化*/
			//this.restoreData();
			//this.getData();
		},
		methods: {
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('.top-tabbar');
						view.boundingClientRect(data => {
							let h = self.phoneHeight - data.height;
							self.scrollviewHigh = h;
						}).exec();
					}
				});
			},
			/*页面数据*/
			getData() {
				let self = this;
				self.loading = true;
				let page = self.page;
				let state = self.state_active;
				let list_rows = self.list_rows;
				self._get('user.refund/lists', {
					state: state,
					page: page || 1,
					list_rows: list_rows,
					type: 1
				}, function(data) {
					self.loading = false;
					self.tableData = self.tableData.concat(data.data.list.data);
					// console.log(self.tableData);
					self.last_page = data.data.list.last_page;
					if (self.last_page <= 1) {
						self.no_more = true;
						return false;
					}
				});

			},
			/*类别切换*/
			stateFunc(e) {
				let self = this;
				if (self.state_active != e) {
					self.tableData = [];
					self.loading = true;
					self.page = 1;
					self.state_active = e;
					self.getData();
				}
			},
			/*查看售后详情*/
			gotoRefundDetail(e) {
				this.gotoPage('/pages/order/refund/detail/detail?order_refund_id=' + e);
			},
			/* 申请平台介入 */
			intervention(e) {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.refund/plateapply', {
					order_refund_id: e
				}, function(data) {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: '申请平台介入成功'
					})
					self.getData();
					self.loading = false;
				});
			},
			/*可滚动视图区域到顶触发*/
			scrolltoupperFunc() {
				/* let self = this;
				self.topRefresh = true;
				self.no_more = false;
				setTimeout(function() {
					self.topRefresh = false;
				}, 2000);
				self.tableData = [];
				self.page = 1;
				self.getData(); */
			},

			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				if (self.no_more) {
					return;
				}
				self.page++;
				if (self.page <= self.last_page) {
					self.getData();
				} else {
					self.no_more = true;
				}
			}

		}
	}
</script>

<style>
	.text_red {
		color: #FF6633;
	}
</style>