1.0web商城实体类业务流程完成

This commit is contained in:
yuanteng 2024-12-21 21:24:42 +08:00
parent 49a4240438
commit 71efe041a9
3 changed files with 198 additions and 191 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <!-- <div> -->
<!-- <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">--> <!-- <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">-->
<!-- <el-form-item label="服装类别" prop="type">--> <!-- <el-form-item label="服装类别" prop="type">-->
<!-- <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">--> <!-- <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">-->
@ -13,7 +13,7 @@
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- </el-form>--> <!-- </el-form>-->
<el-calendar :disabled-date="disabledDate" class="disabledDate"> <!-- <el-calendar :disabled-date="disabledDate" class="disabledDate">
<template #date-cell="{ data }"> <template #date-cell="{ data }">
<p <p
:class="[ :class="[
@ -27,9 +27,9 @@
<span v-if="selectedDates.includes(data.day)"></span> <span v-if="selectedDates.includes(data.day)"></span>
</p> </p>
</template> </template>
</el-calendar> </el-calendar> -->
<!--抽屉--> <!--抽屉-->
<el-drawer <!-- <el-drawer
v-for="(drawerInfo, date) in dateDrawerData" v-for="(drawerInfo, date) in dateDrawerData"
:key="date" :key="date"
v-model="drawerInfo.visible" v-model="drawerInfo.visible"
@ -51,134 +51,134 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="resetForm">重置</el-button> <el-button type="primary" @click="resetForm">重置</el-button>
</el-form-item> </el-form-item> -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from 'vue' // import { ref, onMounted } from 'vue'
import { ElButton, ElTimePicker, ElDrawer } from 'element-plus' // import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
import myAxios from "@/api/myAxios" // import myAxios from "@/api/myAxios"
const dateDrawerData = ref<{ // const dateDrawerData = ref<{
visible: boolean // visible: boolean
timeDataList: { value1: string; value2: [Date, Date] }[] // timeDataList: { value1: string; value2: [Date, Date] }[]
}>({}) // }>({})
const addTimePickers = (date: string) => { // const addTimePickers = (date: string) => {
if (!dateDrawerData.value[date]) { // if (!dateDrawerData.value[date]) {
dateDrawerData.value[date] = { // dateDrawerData.value[date] = {
visible: false, // visible: false,
timeDataList: [] // timeDataList: []
} // }
} // }
dateDrawerData.value[date].timeDataList.push({ // dateDrawerData.value[date].timeDataList.push({
value1: '', // value1: '',
value2: [new Date(), new Date()] // value2: [new Date(), new Date()]
}) // })
} // }
const deleteTimePicker = (index: number, date: string) => { // const deleteTimePicker = (index: number, date: string) => {
if (dateDrawerData.value[date]) { // if (dateDrawerData.value[date]) {
dateDrawerData.value[date].timeDataList.splice(index, 1) // dateDrawerData.value[date].timeDataList.splice(index, 1)
} // }
} // }
const printSelectedTimePeriods = (date: string) => { // const printSelectedTimePeriods = (date: string) => {
if (dateDrawerData.value[date]) { // if (dateDrawerData.value[date]) {
const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => { // const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
return { // return {
time1: timeData.value1 // time1: timeData.value1
} // }
}) // })
console.log(selectedTimePeriods); // console.log(selectedTimePeriods);
} // }
} // }
const selectedDates = ref<string[]>([]) // const selectedDates = ref<string[]>([])
const disabledDate = (date: any) => { // const disabledDate = (date: any) => {
const today = new Date() // const today = new Date()
const dateString = date.toISOString().split('T')[0] // const dateString = date.toISOString().split('T')[0]
const todayString = today.toISOString().split('T')[0] // const todayString = today.toISOString().split('T')[0]
return dateString < todayString // return dateString < todayString
} // }
const isFutureDate = (date: any) => { // const isFutureDate = (date: any) => {
const today = new Date().toISOString().split('T')[0] // const today = new Date().toISOString().split('T')[0]
return date >= today // return date >= today
} // }
const handleDateClick = (date: any) => { // const handleDateClick = (date: any) => {
const dateStr = date // const dateStr = date
if (isFutureDate(dateStr)) { // if (isFutureDate(dateStr)) {
if (selectedDates.value.includes(dateStr)) { // if (selectedDates.value.includes(dateStr)) {
selectedDates.value = selectedDates.value.filter(d => d!== dateStr) // selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
} else { // } else {
selectedDates.value.push(dateStr) // selectedDates.value.push(dateStr)
if (!dateDrawerData.value[dateStr]) { // if (!dateDrawerData.value[dateStr]) {
dateDrawerData.value[dateStr] = { // dateDrawerData.value[dateStr] = {
visible: true, // visible: true,
timeDataList: [] // timeDataList: []
} // }
} else { // } else {
dateDrawerData.value[dateStr].visible = true; // dateDrawerData.value[dateStr].visible = true;
} // }
} // }
} // }
} // }
onMounted(() => { // onMounted(() => {
getType(); // getType();
}) // })
const form = ref({ // const form = ref({
type: '', // type: '',
name: '' // name: ''
}) // })
const typeList = ref<{ type: string; label: string }[]>([]) // const typeList = ref<{ type: string; label: string }[]>([])
const getType = async () => { // const getType = async () => {
const res = await myAxios.post('/clothesGrade/list', {}) // const res = await myAxios.post('/clothesGrade/list', {})
typeList.value = res.data.data.map((item: any) => ({ // typeList.value = res.data.data.map((item: any) => ({
type: item.clothesType, // type: item.clothesType,
label: item.clothesType // label: item.clothesType
})) // }))
} // }
const nameList = ref<{ name: string; label: string }[]>([]) // const nameList = ref<{ name: string; label: string }[]>([])
const loadType = (value: any) => { // const loadType = (value: any) => {
form.value.type = value // form.value.type = value
getName() // getName()
} // }
const loadName = (value: any) => { // const loadName = (value: any) => {
form.value.name = value; // form.value.name = value;
} // }
const getName = async () => { // const getName = async () => {
const selectedType = form.value.type; // const selectedType = form.value.type;
const res = await myAxios.post('/clothesInfo/list/page', { // const res = await myAxios.post('/clothesInfo/list/page', {
clothesType: selectedType // clothesType: selectedType
}) // })
console.log(selectedType, '1111111111111'); // console.log(selectedType, '1111111111111');
nameList.value = res.data.data.records.map((item: any) => ({ // nameList.value = res.data.data.records.map((item: any) => ({
name: item.name, // name: item.name,
label: item.name // label: item.name
})) // }))
} // }
// // //
const onSubmit = () => { // const onSubmit = () => {
} // }
// // //
const resetForm = () => { // const resetForm = () => {
} // }
</script> </script>
<style scoped> <style scoped>

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <!-- <div> -->
<!-- <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">--> <!-- <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">-->
<!-- <el-form-item label="服装类别" prop="type">--> <!-- <el-form-item label="服装类别" prop="type">-->
<!-- <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">--> <!-- <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">-->
@ -13,7 +13,7 @@
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- </el-form>--> <!-- </el-form>-->
<el-calendar :disabled-date="disabledDate" class="disabledDate"> <!-- <el-calendar :disabled-date="disabledDate" class="disabledDate">
<template #date-cell="{ data }"> <template #date-cell="{ data }">
<p <p
:class="[ :class="[
@ -27,9 +27,9 @@
<span v-if="selectedDates.includes(data.day)"></span> <span v-if="selectedDates.includes(data.day)"></span>
</p> </p>
</template> </template>
</el-calendar> </el-calendar> -->
<!--抽屉--> <!--抽屉-->
<el-drawer <!-- <el-drawer
v-for="(drawerInfo, date) in dateDrawerData" v-for="(drawerInfo, date) in dateDrawerData"
:key="date" :key="date"
v-model="drawerInfo.visible" v-model="drawerInfo.visible"
@ -51,7 +51,7 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="resetForm">重置</el-button> <el-button type="primary" @click="resetForm">重置</el-button>
</el-form-item> </el-form-item> -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -59,40 +59,40 @@ import { ref, onMounted } from 'vue'
import { ElButton, ElTimePicker, ElDrawer } from 'element-plus' import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
import myAxios from "@/api/myAxios" import myAxios from "@/api/myAxios"
const dateDrawerData = ref<{ // const dateDrawerData = ref<{
visible: boolean // visible: boolean
timeDataList: { value1: string; value2: [Date, Date] }[] // timeDataList: { value1: string; value2: [Date, Date] }[]
}>({}) // }>({})
const addTimePickers = (date: string) => { // const addTimePickers = (date: string) => {
if (!dateDrawerData.value[date]) { // if (!dateDrawerData.value[date]) {
dateDrawerData.value[date] = { // dateDrawerData.value[date] = {
visible: false, // visible: false,
timeDataList: [] // timeDataList: []
} // }
} // }
dateDrawerData.value[date].timeDataList.push({ // dateDrawerData.value[date].timeDataList.push({
value1: '', // value1: '',
value2: [new Date(), new Date()] // value2: [new Date(), new Date()]
}) // })
} // }
const deleteTimePicker = (index: number, date: string) => { // const deleteTimePicker = (index: number, date: string) => {
if (dateDrawerData.value[date]) { // if (dateDrawerData.value[date]) {
dateDrawerData.value[date].timeDataList.splice(index, 1) // dateDrawerData.value[date].timeDataList.splice(index, 1)
} // }
} // }
const printSelectedTimePeriods = (date: string) => { // const printSelectedTimePeriods = (date: string) => {
if (dateDrawerData.value[date]) { // if (dateDrawerData.value[date]) {
const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => { // const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
return { // return {
time1: timeData.value1 // time1: timeData.value1
} // }
}) // })
console.log(selectedTimePeriods); // console.log(selectedTimePeriods);
} // }
} // }
const selectedDates = ref<string[]>([]) const selectedDates = ref<string[]>([])
const disabledDate = (date: any) => { const disabledDate = (date: any) => {
@ -107,24 +107,24 @@ const isFutureDate = (date: any) => {
return date >= today return date >= today
} }
const handleDateClick = (date: any) => { // const handleDateClick = (date: any) => {
const dateStr = date // const dateStr = date
if (isFutureDate(dateStr)) { // if (isFutureDate(dateStr)) {
if (selectedDates.value.includes(dateStr)) { // if (selectedDates.value.includes(dateStr)) {
selectedDates.value = selectedDates.value.filter(d => d!== dateStr) // selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
} else { // } else {
selectedDates.value.push(dateStr) // selectedDates.value.push(dateStr)
if (!dateDrawerData.value[dateStr]) { // if (!dateDrawerData.value[dateStr]) {
dateDrawerData.value[dateStr] = { // dateDrawerData.value[dateStr] = {
visible: true, // visible: true,
timeDataList: [] // timeDataList: []
} // }
} else { // } else {
dateDrawerData.value[dateStr].visible = true; // dateDrawerData.value[dateStr].visible = true;
} // }
} // }
} // }
} // }
onMounted(() => { onMounted(() => {
getType(); getType();

View File

@ -6,7 +6,7 @@
<el-button type="warning" @click="reset" style="height:25px">重置</el-button> <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
</div> </div>
<!-- 数据展示层 --> <!-- 数据展示层 -->
<el-table :data="tableData" border stripe header-cell-class-name="headerBg" <el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
:header-cell-style="{ 'text-align': 'center' }"> :header-cell-style="{ 'text-align': 'center' }">
<el-table-column type="selection" width="55" fixed="left"></el-table-column> <el-table-column type="selection" width="55" fixed="left"></el-table-column>
@ -26,7 +26,7 @@
<el-table-column label="商品图片" prop="goodSnapshot.goodImg"> <el-table-column label="商品图片" prop="goodSnapshot.goodImg">
<template #default="scope"> <template #default="scope">
<div> <div>
<img :src="scope.row.goodSnapshot.goodImg" alt="" style="height: 50px;"> <img :src="scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -51,21 +51,25 @@
</el-table-column> </el-table-column>
<el-table-column prop="totalAmount" label="订单总金额"></el-table-column> <el-table-column prop="totalAmount" label="订单总金额"></el-table-column>
<el-table-column prop="orderStatus" label="订单状态"></el-table-column> <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
<el-table-column prop="orderStatus" label="快递单号"></el-table-column> <el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
<el-table-column label="操作" width="220px" fixed="right"> <el-table-column label="操作" width="220px" fixed="right">
<template #default="scope"> <template #default="scope">
<el-button size="small" @click="showDetail(scope.$index, scope.row)"> <el-button size="small" @click="showDetail(scope.$index, scope.row)">
详情 详情
</el-button> </el-button>
<el-button size="small" @click="openShipmentDialog(scope.row.id)" > <!-- @click="deliverGoods(scope.row)"--> <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="openShipmentDialog(scope.row.id)" > <!-- @click="deliverGoods(scope.row)"-->
发货 发货
</el-button> </el-button>
<el-button :disabled="!['待支付', '待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="warning" plain> <el-button :disabled="!['待支付'].includes(scope.row.orderStatus)" size="small" @click="cancelOrder(scope.row)" type="warning" plain>
取消订单 取消订单
</el-button> </el-button>
<el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="danger" plain>
退款
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页器 -->
<div style="padding: 10px 0"> <div style="padding: 10px 0">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]" :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
@ -104,7 +108,7 @@
</el-form-item> </el-form-item>
</div> </div>
<el-form-item label="快递单号" style="width: 300px"> <el-form-item label="快递单号" style="width: 300px">
<!-- <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input> --> <el-input v-model="editForm.trackingNumber" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<div style="display: flex"> <div style="display: flex">
<el-form-item label="创建时间" style="width: 300px;"> <el-form-item label="创建时间" style="width: 300px;">
@ -143,6 +147,7 @@
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import myAxios from "@/api/myAxios"; import myAxios from "@/api/myAxios";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
const tableData: any = ref([]); // const tableData: any = ref([]); //
const total = ref(0); const total = ref(0);
const title = ref('') const title = ref('')
@ -154,17 +159,13 @@ const shipment:any = ref({
const DialogVisible = ref(false); // const DialogVisible = ref(false); //
const shipments = ref(false) const shipments = ref(false)
const name = ref('') const name = ref('')
const searchParams: any = ref({ // const searchParams: any = ref({ //
current: 1, // current: 1, //
pageSize: 5, // pageSize: 5, //
sortField: "id", //ID sortField: "id", //ID
sortOrder: "descend" // sortOrder: "descend" //
}) })
const id = ref({}) const loading = ref(false)
const num = ref(0)
const orderDetail: any = ref([]) //
//
const orderList = ref([{}])
onMounted(() => { onMounted(() => {
getOrderList() // getOrderList() //
}) })
@ -187,7 +188,7 @@ const getOrderList = async () => {
if (res.data.code === 1) { if (res.data.code === 1) {
tableData.value = res.data.data.records; tableData.value = res.data.data.records;
total.value = parseInt(res.data.data.total) total.value = parseInt(res.data.data.total)
// console.log('--->', tableData.value); console.log('表单信息--->', tableData.value);
} else { } else {
ElMessage({ ElMessage({
message: '获取数据失败', message: '获取数据失败',
@ -212,8 +213,7 @@ const openShipmentDialog = (id: number) => {
shipments.value = true; shipments.value = true;
currentId.value = id; currentId.value = id;
} }
const deliverGoods = async () => { //
const deliverGoods = async () => {
if (currentId.value) { if (currentId.value) {
const res = await myAxios.post('/order/update', { const res = await myAxios.post('/order/update', {
id: currentId.value, id: currentId.value,
@ -231,25 +231,32 @@ const deliverGoods = async () => {
} }
shipments.value = false; shipments.value = false;
} }
const deleteOrder = async (row : any) => { //+退 const deleteOrder = async (row : any) => { //退
console.log('row-->',row.id) loading.value = true
console.log('row-->',row)
const res = await myAxios.post('/wechat/refund/create', { id: row.id }) //退 const res = await myAxios.post('/wechat/refund/create', { id: row.id }) //退
console.log(res) console.log(res)
if (res.data.code === 1) { setTimeout(()=>{
ElMessage({ if(res.data.code === 1) {
type: 'success', SuccessInfo('退款成功')
message: '退款成功', getOrderList()
}) loading.value = false
getOrderList() }
} },10000)
} }
const reset = () => { const reset = () => { //
name.value = ''; name.value = '';
}; };
const load = () => { } const load = () => { } //
// const cancelOrder = async (row:any)=>{ //()
const save =()=>{ console.log('点击的这一行--->',row);
const res = await myAxios.post('/order/cancel/id',{ id: row.id })
if(res.data.code === 1) {
getOrderList()
SuccessInfo('取消订单成功')
} else {
ErrorInfo('请求错误')
}
} }
</script> </script>