订单管理功能实现C

订单管理功能实现C"/>

订单管理功能实现C

<template><el-dialogmodel-value="dialogVisible"title="订单商品详情"width="40%"@close="handleClose"><el-table:data="tableData" stripe style="width: 100%"><el-table-column type="index" width="50"/><el-table-column prop="goodsPic" label="商品图片"><template v-slot="scope"><img :src="getServerUrl()+'/image/product/'+scope.row.goodsPic" width="80" height="80"/></template></el-table-column><el-table-column prop="goodsName" label="商品名称"></el-table-column><el-table-column prop="goodsPrice" label="商品价格" width="100"></el-table-column><el-table-column prop="goodsNumber" label="商品数量" width="100"></el-table-column></el-table></el-dialog>
</template><script setup>import {defineEmits, defineProps, ref, watch} from "vue";
import axios, {getServerUrl} from "@/util/axios";const tableData=ref([])const initOrderDetailData=async(id)=>{const res=await axios.get('admin/orderDetail/list/'+id)tableData.value=res.data.list
}const props=defineProps({id:{type:Number,default:-1,required:true}})watch(()=>props.id,()=>{let id=props.id;console.log("id="+props.id)if(id!=-1){initOrderDetailData(id)}})const emits=defineEmits(['update:modelValue'])const handleClose=()=>{emits('update:modelValue',false)}</script>