mobile-admin/store/recon/list.vue

<template>
	<view class="content">
		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>

		<view class=" bg-white sticky top-0 z-50 flex items-center">
			<view class="flex-1">
				<wd-search @search="search({ value: params.keywords })" @clear="search({ value: params.keywords = '' })"
					v-model="params.keywords" hide-cancel></wd-search>
			</view>
		</view>

		<div class="grid p-2">

			<yList height="91vh" ref="yListRef" :apiObj="recon.faceList" :params="{ ...params }">
				<template #default="{ list: order_list }">
					<div v-for="order of order_list" class="rounded-md overflow-hidden">
						<wd-card class="rounded-md overflow-hidden" type="rectangle">
							<template #title>
								<view class="title">
									<view>ID：{{ order.id }}</view>
									<view @click="utils.copy(order.order_no)" class="title-tip">
										{{ order.order_no }}
										<wd-icon name="file-copy" size="14px"></wd-icon>
									</view>
								</view>
							</template>
							<view style="height: 40px;" class="userBox">
								<template v-if="order.detail && order.detail.length > 0">
									<view v-for="item of order.detail" style="width: 100%;">
										<view style="color: rgba(0,0,0,0.85); font-size: 16px;display: flex;align-items: center;justify-content: space-around;">
											<view style="width: 50%;">
												{{ item.goods_name }} 
											</view>
											<view style="width: 25%;">
												x {{ item.num }}
											</view>
											<view style="width: 25%;">
												<wd-tag class="mx-1" size="small" type="success">
													￥{{ item.price }}
												</wd-tag>
											</view>
											
										</view>
									</view>
								</template>
								<template v-else>
									<view style="color: rgba(0,0,0,0.85);">
										支付金额：<wd-tag class="mx-1" size="small" type="success">
													￥{{ order.total_price }}
												</wd-tag>
									</view>
								</template>
							</view>

							<template #footer>
								<view class="flex justify-between items-center">
									<view style="color: #999;">
										{{ order.create_time }}
									</view>
									<view>
										<wd-button @click="tuikuan(order.order_no)" size="small"
											style="margin-right: 0px;">退款</wd-button>
									</view>
								</view>
							</template>
						</wd-card>
					</div>
				</template>
			</yList>

		</div>

		<wd-toast />
		<wd-message-box></wd-message-box>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import utils from '@/utils/utils.js';
	import recon from '@/api/store/recon.js';
	import myTabbar from "../components/myTabbar/index.vue";
	import kevyloading from "@/components/kevy-loading/kevy-loading";
	import {
		useMessage
	} from '@/uni_modules/wot-design-uni';
	import {
		useToast
	} from '@/uni_modules/wot-design-uni'
	import yList from "/components/yList/index.vue";

	import {
		onShow,
	} from "@dcloudio/uni-app";

	const toast = useToast()
	const message1 = useMessage();

	const originType = ref({
		100: 'success',
		101: 'success',
		200: 'info',
		201: 'danger',
		300: 'warning',
	})

	const yListRef = ref(null);

	const searchType = ref('订单号');
	const popover = ref(false);


	const search = ({
		value
	}) => {

		if (searchType.value == '昵称') {
			yListRef.value.upData({
				type: 'order_no',
				keywords: params.value.keywords
			});
		}

		if (searchType.value == '订单号') {
			yListRef.value.upData({
				type: 'order_no',
				keywords: params.value.keywords
			});
		}

	};
	
	const tuikuan = (order_no) => {
	
		uni.showModal({
			title: '提示',
			content: '是否确认退款？',
			success(res) {
				if (res.confirm) {
					recon.tuikuan({
						order_no,
						refund_price: ''
					}).then(res => {
						if (res.code == 0) {
							
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					
					})
				}
			}
		})
	
	};

	const menu = ref([{
			content: '昵称'
		},
		{
			content: '订单号'
		},
	]);

	const params = ref({
		keywords: "",
		type: 'order_no',
		status: -2
	});

	/**
	 * 切换搜索类型
	 * @param {Object} item - 切换的项
	 */
	function changeSearchType({
		item,
		index
	}) {
		searchType.value = item.content;
		search(params.value.keywords)
	}

	/** 
	 * @type {Ref<boolean>} 
	 * 控制页面加载状态的 Ref
	 */
	const loading = ref(false);
	
	const order_list = ref([]);
	

	// 初始化调用获取一行数据
	onShow(() => {
		
	})
</script>

<style lang="scss" scoped>
	.search-type {
		position: relative;
		height: 30px;
		line-height: 30px;
		padding: 0 8px 0 16px;
		font-size: 24rpx;
		color: rgba(0, 0, 0, .45);
	}

	.search-type::after {
		position: absolute;
		content: '';
		width: 1px;
		right: 0;
		top: 5px;
		bottom: 5px;
		background: rgba(0, 0, 0, 0.25);
	}

	.search-type {
		:deep(.icon-arrow) {
			display: inline-block;
			font-size: 20px;
			vertical-align: middle;
		}
	}


	.userBox,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.userBox {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
</style>