Browse Source

移动端订单、售后订单可以处理

RuHu.Xu 9 months ago
parent
commit
0edcf53fec

+ 1 - 0
src/views/mall/trade/afterSale/AfterSaleMobileTab.vue

@@ -53,6 +53,7 @@ const activeName = ref('info') // Tag 激活的窗口
 //   push({ name: 'Order', query: { openType: "tobedone", } })
 // }
 const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
+// 拒绝售后
 const disagree = async () => {
   const { value } = await ElMessageBox.prompt('请输入拒绝原因', '拒绝退货', {
     confirmButtonText: t('common.ok'),

+ 2 - 2
src/views/mall/trade/afterSale/index.vue

@@ -152,10 +152,10 @@ const AfterSaleTabsRef = ref()
 const openTabs = (type: string, obj?: object) => {
 	if (mobile.value) {
 		// MemberUserMobileTab
-		if (route.query.openType == 'tobedone') {
+		if (route.query.openType == 'tobedone' || obj.status == 10 || obj.status ==30|| obj.status == 40) {
 			push({ name: 'AfterSaleMobileTab', query: { 'type': route.query.openType, 'obj': JSON.stringify(obj) } })
 		}else{
-			push({ name: 'AfterSaleMobileTab', query: { 'type': type, 'obj': JSON.stringify(obj) } })
+			push({ name: 'AfterSaleMobileTab', query: { 'type': type, 'obj': JSON.str ingify(obj) } })
 		}
 	} else {
 		AfterSaleTabsRef.value.open(type, obj)

+ 2 - 2
src/views/mall/trade/order/components/OrderComment.vue

@@ -1,6 +1,5 @@
 <!-- 订单查看 - 评论 -->
 <template>
-
   <div v-if="!formData.total" style="text-align: center;margin-top: 50px;font-size: 14px;">
     该订单暂无评论
   </div>
@@ -9,7 +8,7 @@
     <h3 class="rating-title">{{ item.descriptionScores }}星</h3>
     <div class="content">
       
-      <div class="content-image" v-if="item.picUrls.length != 0" >
+      <div class="content-image" v-if="item.picUrls!='' &&  item.picUrls!=null" >
           <!-- 只显示一张 -->
           <el-image  :src="item.picUrls[0]" class="image"
             @click="imagePreview(item.picUrls)" style="width: 100%;height: 100%;"/>
@@ -65,6 +64,7 @@ const getOrderComment = async () => {
       // close()
     }
     formData.value = res
+   
   }
 
 }

+ 65 - 10
src/views/mall/trade/order/components/OrderMobileIndex.vue

@@ -16,7 +16,7 @@
 		</div>
 
 		<div class="bottom">
-				<OrderBaseInfo ref="baseInfoRef" :is-detail="false" :id="orderId" v-if="activeName == 'info'" />
+				<OrderBaseInfo ref="baseInfoRef" :is-detail="false" :id="orderId" v-show="activeName == 'info'" />
 				<OrderProduct ref="infoRef"  :id="orderId" v-if="activeName == 'product'"/>
 				<OrderComment ref="infoRef"  :id="orderId" v-if="activeName == 'comment'"/>
 				<OrderService ref="infoRef"  :id="orderId" v-if="activeName == 'service'" />
@@ -24,6 +24,11 @@
 				<OrderLogistics ref="infoRef"  :id="orderId" v-if="activeName == 'logistics'"/>
 				<OrderPay ref="infoRef"  :id="orderId" v-if="activeName == 'pay'"/>
 				<OrderLogs ref="infoRef"  :id="orderId" v-if="activeName == 'logs'" />
+				
+		</div>
+		<div  class="bottom-button">
+				<el-button @click="goback">返 回</el-button>
+				<el-button :disabled="formLoading" type="primary" @click="remark">备 注</el-button>
 		</div>
 
 	</ContentWrap>
@@ -31,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-
+import * as TradeOrderApi from '@/api/mall/trade/order'
 import OrderBaseInfo from './OrderBaseInfo.vue'
 import OrderProduct from './OrderProduct.vue'
 import OrderComment from './OrderComment.vue'
@@ -40,21 +45,57 @@ import AfterSale from '@/components/ZxTemplate/AfterSale/AfterSale.vue'
 import OrderLogistics from './OrderLogistics.vue'
 import OrderPay from './OrderPay.vue'
 import OrderLogs from './OrderLogs.vue'
-
-
+import { useRoute } from 'vue-router'
 import { propTypes } from '@/utils/propTypes'
+const route = useRoute();
+const { push } = useRouter() // 路由跳转
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 
 defineOptions({ name: 'ProductSpuForm' })
 
 const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
 const activeName = ref('info') // Tag 激活的窗口
 const orderId = ref(0)
-const props = defineProps({
-	id: propTypes.number.def(undefined), // 订单ID
-})
+orderId.value = route.params.id as unknown as number
+const baseInfoRef = ref(null)
+const defaultRemark = ref('')
+const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
+// 获得备注
+const getRemark = async (id) => {
+	if (id) {
+		const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
+		// 没有表单信息则关闭页面返回
+		if (!res) {
+			message.error('交易订单不存在')
+			close()
+		}
+		defaultRemark.value = res.remark
+	}
+}
+// 备注
+const remark = async () => {
+  const { value } = await ElMessageBox.prompt('请输入备注', '备注', {
+		inputValue:defaultRemark,
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+  })
+  try {
+		await TradeOrderApi.updateOrderRemark({ id: orderId.value, remark: value })
+    message.success(t('common.updateSuccess'))
+		baseInfoRef.value.getDetail()
+    // 发送操作成功的事件
+    emit('success', true)
+	} finally {
+    formLoading.value = false
+  }
+}
 
-orderId.value = props.id
-onMounted(() => {
+const goback = () => {
+	push({ name: 'Order' })
+}
+onMounted(async() => {
+	await getRemark(orderId.value)
   // 当子组件挂载时,改变父组件的样式
   document.getElementsByTagName('section')[1].style.padding = '0px';
   document.getElementsByTagName('section')[1].style.width = '100%';
@@ -71,4 +112,18 @@ onUnmounted(() => {
 
 
 
-<style src="@/styles/MobileTab.css"  lang="scss" scoped> </style>
+<style src="@/styles/MobileTab.css"  lang="scss" scoped> </style>
+<style lang="scss" scoped>
+.bottom-button {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background: white;
+	padding:1rem;
+	box-sizing: border-box;
+	.el-button{
+		width:48%;
+	}
+}
+</style>

+ 44 - 6
src/views/mall/trade/order/form/OrderMobileDeliveryForm.vue

@@ -20,6 +20,8 @@
 			</el-form>
 			<div>
 				<el-button @click="goback">返 回</el-button>
+				<el-button :disabled="formLoading" type="primary" @click="remark">备 注</el-button>
+				<el-button :disabled="formLoading" type="primary" @click="updateAddress">修改地址</el-button>
 				<el-button :disabled="formLoading" type="primary" @click="submitForm">发 货</el-button>
 			</div>
 		</div>
@@ -33,17 +35,19 @@ import * as TradeOrderApi from '@/api/mall/trade/order'
 import OrderBaseInfo from '../components/OrderBaseInfo.vue'
 import OrderProduct from '../components/OrderProduct.vue'
 import { useRoute } from 'vue-router';
-
+import {h} from 'vue'
 import { FormRules } from 'element-plus'
+import AddressForm from './AddressForm.vue'
 const route = useRoute();
 const { push } = useRouter() // 路由跳转
 
+const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const formRules = reactive<FormRules>({
 	logisticsId: [{ required: true,message: '请选择物流公司' }],
 	logisticsNo: [{ required: true,message: '请输入快递单号' }],
 })
-
+const baseInfoRef = ref(null)
 const formData = ref<TradeOrderApi.DeliveryVO>({
 	id: 0, // 订单编号
 	logisticsId: null, // 物流公司编号
@@ -65,13 +69,15 @@ const customFilter = (input) => {
 const winHeight = window.innerHeight || document.documentElement.clientHeight;
 const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
 const orderId = ref(0)
+const defaultRemark = ref('')
 const deliveryExpressList = ref([])
 
 orderId.value = route.params.id as unknown as number
 const goback = () => {
-	push({ name: 'Order', query: {openType:"tobedone", }})
+	push({ name: 'Order'})
 }
 const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
+// 发货
 const submitForm = async () => {
 	// 提交请求
 	formLoading.value = true
@@ -92,12 +98,44 @@ const submitForm = async () => {
 		goback()
 	} finally {
 		formLoading.value = false
-		
 	}
 }
-
+// 获得备注
+const getRemark = async (id) => {
+	if (id) {
+		const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
+		// 没有表单信息则关闭页面返回
+		if (!res) {
+			message.error('交易订单不存在')
+			close()
+		}
+		defaultRemark.value = res.remark
+	}
+}
+// 备注
+const remark = async () => {
+  const { value } = await ElMessageBox.prompt('请输入备注', '备注', {
+		inputValue:defaultRemark,
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+  })
+  try {
+		await TradeOrderApi.updateOrderRemark({ id: formData.value.id, remark: value })
+		
+    message.success(t('common.updateSuccess'))
+		baseInfoRef.value.getDetail()
+    // 发送操作成功的事件
+    emit('success', true)
+	} finally {
+    formLoading.value = false
+  }
+}
+const updateAddress = async () => {
+  
+};
 onMounted(async () => {
 	formData.value.id = orderId.value;
+	await getRemark(formData.value.id)
 	deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList();
 	// 当子组件挂载时,改变父组件的样式
 	document.getElementsByTagName('section')[1].style.padding = '0px';
@@ -126,7 +164,7 @@ onUnmounted(() => {
 	padding:1rem;
 	box-sizing: border-box;
 	.el-button{
-		width: 48%;
+		width: 22%;
 	}
 }
 .el-select-dropdown .el-select-dropdown__list .el-select-dropdown__item {

+ 1 - 1
src/views/mall/trade/order/index.vue

@@ -239,7 +239,7 @@ const formRef = ref()
 const openDetail = (type: string, row: {}, no: string) => {
 	const id = row.id
 	if (mobile.value) {
-		if(props.openType ==  'tobedone' ||  route.query.openType  ==  'tobedone'){
+		if(props.openType ==  'tobedone' ||  route.query.openType  ==  'tobedone' || row.status == TradeOrderStatusEnum.UNDELIVERED.status){
 			push({ name: 'OrderMobileDeliveryForm', params: { id } })
 		}else{
 			push({ name: 'TradeOrderMobileDetail', params: { id } })