h5mall_uniapp/pages/index/cash-back-list.vue

<template>
	<s-layout title="Cash back list" :bgStyle="{ color: '#fff' }">

		<view class="main">
			<view class="tab-header">
				<view :class="{'active':data.selectedTabIndex===0}" @tap="go(0)"><text>{{$t('index.finance.all')}}</text></view>
				<view :class="{'active':data.selectedTabIndex===1}" @tap="go(1)"><text>{{$t('index.finance.pass')}}</text></view>
				<view :class="{'active':data.selectedTabIndex===2}" @tap="go(2)"><text>{{$t('index.finance.rejected')}}</text></view>
			</view>
			<view v-for="(item,index) in data.items" class="list-item">
				<view>
					<text>{{item.order_sn}}</text>
					<text>{{item.create_time}}</text>
				</view>
				<view>{{item.return_money}}</view>
				<view :class="{'pass':item.return_status,'rejected':!item.return_status}">
					<text> {{item.return_status?$t('index.finance.pass'):$t('index.finance.rejected')}}</text>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	
	import sheep from '@/sheep';
	import { onLoad } from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue'
	const data = reactive({
		selectedTabIndex: 0,
		items: []
	})
	var orders = [];
	onLoad(async () => {
	  await getMyTaskList();
	});
	async function getMyTaskList(){
		const res = await sheep.$api.task.myTaskList({});
		console.log(res)
		if(res.code == 1){
			data.items = res.data;
			for(var i = 0;i < data.items.length;i++){
				data.items[i].create_time = timestampToTime(data.items[i].create_time);
			}
			orders = data.items;
		}else{
			data.items = [];
			orders = [];
		}
		
	}
	
	function timestampToTime(timestamp) {
	  // 时间戳为10位需*1000，时间戳为13位不需乘1000
	  var date = new Date(timestamp * 1000);
	  var Y = date.getFullYear() + "-";
	  var M =
	    (date.getMonth() + 1 < 10
	      ? "0" + (date.getMonth() + 1)
	      : date.getMonth() + 1) + "-";
	  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
	  var h = date.getHours() + ":";
	  var m = date.getMinutes() + ":";
	  var s = date.getSeconds();
	  return Y + M + D + h + m + s;
	}
	const go = (idx) => {
		data.selectedTabIndex = idx;

		switch (idx) {
			case 0: {
				data.items = orders;
			}
			break;
			case 1: {
				data.items = orders.filter(x => x.return_status);
			}
			break;
			case 2: {
				data.items = orders.filter(x => !x.return_status);
			}
			break;
		}

	}
</script>

<style scoped lang="scss">
	.tab-header {
		display: flex;
		align-self: center;
		margin-bottom: 15upx;

		&>view {
			flex: 1;
			display: flex;
			border-bottom: 10upx solid #FDEAC9;

			justify-content: center;

			&>text {
				padding: 10upx 20upx;
				color: #50555555;
			}

			&.active {
				border-bottom-color: #FAA435;

				&>text {
					color: #FAA435;
				}
			}
		}
	}

	.list-item {

		display: flex;
		align-items: center;
		padding: 26upx;
		border-radius: 10upx;
		box-shadow: 0px 0px 5px #ddd;
		margin: 24upx 15upx;
		justify-content: space-between;

		&>view {
			display: flex;
			font-size: 0.8325rem!important;
		}

		&>view:nth-child(1) {
			flex-direction: column;
			font-size: 18upx;
			color: #555;

			&>text:nth-child(2) {
				margin-top: 12upx;
			}
		}

		&>view:nth-child(2) {
			font-size: 40upx;
			color: #FAA435;
		}

		&>view:nth-child(3) {
			padding: 8upx 18upx;
			border-radius: 8upx;
			color: white;
			transform: skewX(-15deg);

			&>text {
				transform: skewX(15deg);
			}
		}

		.pass {
			background: #FAA435;
		}

		.rejected {
			background: #D54941;
		}
	}
</style>