java-bookstore/ui/src/pages/order/index.vue

<!--用户详情-->
<template>
	<el-tabs v-model="state.page.orderStatus"  @tab-click="handleClick">
		<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
			<el-table
				:data="state.getList"
				style="width: 100%"
			>
				<el-table-column prop="id" label="编号" />
				<el-table-column prop="item.title" label="商品名称"  />
				<el-table-column prop="price" label="图片"  >
					<template #default="{ row }">
						<img :src="row.item.image"  style="width: 100px; height: 100px;">
					</template>
				</el-table-column>
				<el-table-column prop="price" label="购买单价"  />
				<el-table-column prop="quantity" label="购买数量" />
				<el-table-column prop="totalAmount" label="成交总价" />
								<el-table-column prop="createdTime" label="购买时间" width="220" />
				<el-table-column  label="操作" min-width="120">
					<template #default="scope" >
						<el-button link type="primary" size="small" v-if="state.page.orderStatus == 1" @click="update(scope.row,2)">确认收货</el-button>
						<el-button link type="primary" size="small" v-if="state.page.orderStatus == 2" @click="update(scope.row,3)">我要评价</el-button>
						<el-button link type="primary" size="small" v-if="state.page.orderStatus == 3" @click="del(scope.row.id)">删除订单</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
	</el-tabs>

	<el-dialog
		v-model="dialogVisible"
		title="我要评价"
		width="500"
	>
		<el-form
			ref="formRef"
			style="max-width: 600px"
			:model="state.orderForm"
			label-width="auto"
			label-position="top"
		>
			<el-form-item
				prop="evaluate"
				label="评论内容"
				:rules="[
        {
          required: true,
          message: '评论内容不能为空',
          trigger: 'blur',
        },
      ]"
			>
				<el-input v-model="state.orderForm.evaluate"    :rows="4"
									type="textarea"/>
			</el-form-item>
			<el-form-item
				prop="score"
				label="评分"
			>
				<el-rate v-model="state.orderForm.score" />
			</el-form-item>


		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary"  @click="review(formRef)" >
					提 交
				</el-button>
			</div>
		</template>
	</el-dialog>


</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { FormInstance, TabsPaneContext } from 'element-plus'

const formRef = ref<FormInstance>()
const state = reactive({
	getOrderStatus:[
		{name:"未发货",status:0},
		{name:"已发货",status:1},
		{name:"未评价",status:2},
		{name:"已完成",status:3},
	],
	getList:[],
	orderForm:{
		score: 0
	},
	page:{
		page:1,
		limit:9999,
		order:'desc',
		orderStatus:0,
	}
})

const dialogVisible = ref(false)


/**
 * 删除订单
 * @param id
 */
const del = (id:any) => {
  frontRequest.delete(`/api/order/${id}`).then(res =>{
		toast.success("删除成功~")
		getList()
	})
}

/**
 * 获取列表数据
 */
function getList() {
	frontRequest.get("/api/order/page",{	params: state.page}).then(res =>{
		state.getList = res.data.list;

	})
}
const handleClick = (tab: TabsPaneContext, event: Event) => {

	const selectedStatus = state.getOrderStatus[tab.index].status;
	state.page.orderStatus = selectedStatus;

	getList()
}
onMounted(()=>{
	getList()
})

const update = (data:any,status:number) => {
	// if(status === 4){
	// 	dialogVisible.value = true
	// 	state.orderForm = {...data,evaluate:''}
	// 	state.orderForm.status = 4
	// 	return
	// }
	data.orderStatus = status
	frontRequest.put("/api/order",data).then(res =>{
		toast.success("修改成功~")
		getList()
	})
}


const review = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			updateOrderItemApi(state.orderForm).then(res =>{
				toast.success("修改成功~")
				dialogVisible.value = false
				getList()
			})
		}
	})
}


</script>


<style scoped>

</style>
<route lang="json">
{
"meta": {
"layout": "frontUserInfo"
}
}
</route>