Переглянути джерело

refactor(app): 优化消息页面和订单详情页面

- 修改消息页面的图片显示逻辑,使用 coverUrl 替代 img
- 优化消息页面的查看详情文案和样式
- 增加订单详情页面的取消订单功能
- 新增取消订单的 API 请求
EvilDragon 5 місяців тому
батько
коміт
96d16cc2af

+ 4 - 0
packages/app/src/core/libs/requests.ts

@@ -477,6 +477,10 @@ export const getPointsOrders = (query) =>
   }>('/app-api/member/points-order/page', query)
 export const getPointsOrder = (id) =>
   httpGet<Partial<PointsOrder>>('/app-api/member/points-order/get', { id })
+/**
+ * 取消订单
+ */
+export const cancelOrder = (id) => httpGet('/app-api/member/points-order/orderCancel', { id })
 export const getActivities = (query) =>
   httpGet<{
     list: Activity[]

+ 21 - 8
packages/app/src/pages/messages/index.vue

@@ -114,19 +114,19 @@ const handleSubmit = async (message: Message) => {
                     <!-- {{ it.detailBody }} -->
                   </div>
                 </div>
-                <div v-if="it.img" class="row-start-3 col-start-2 col-end-4">
-                  <img class="w-[279px] h-[164px] rounded-md" :src="it.img" />
+                <div v-if="it.coverUrl" class="row-start-3 col-start-2 col-end-4">
+                  <img class="w-[279px] h-[164px] rounded-md" :src="it.coverUrl" />
                 </div>
                 <div class="row-start-4 col-start-1 col-end-4 my-2">
-                  <div v-if="!it.img" class="bg-[#dadada] w-full h-[1px]"></div>
+                  <div v-if="!it.coverUrl" class="bg-[#dadada] w-full h-[1px]"></div>
                 </div>
                 <div class="row-start-5 col-start-2 col-end-4">
-                  <div
-                    class="text-black/90 text-xs font-normal font-['PingFang_SC'] leading-[25px] my-2.5"
-                  >
+                  <div class="text-black/40 text-xs font-normal font-['PingFang_SC']">
                     <template
                       v-if="
-                        [MessageType.Integral].includes(Number(it.messageType)) && it.isRead !== '1'
+                        [MessageType.Integral].includes(Number(it.messageType)) &&
+                        it.messageSubType === '31' &&
+                        it.isRead !== '1'
                       "
                     >
                       <span class="text-black/40">
@@ -142,7 +142,20 @@ const handleSubmit = async (message: Message) => {
                         <!-- 确认积分后,即刻到账,如有问题请驳回,联系材料商修改积分后再次确认 -->
                       </span>
                     </template>
-                    <template v-else>查看详情</template>
+                    <template
+                      v-else-if="
+                        [MessageType.Integral].includes(Number(it.messageType)) &&
+                        it.messageSubType === '22'
+                      "
+                    >
+                      如有问题请您联系官方客服!
+                    </template>
+                    <template v-else>
+                      <div class="flex items-center text-black">
+                        查看详情
+                        <wd-icon name="arrow-right" size="16"></wd-icon>
+                      </div>
+                    </template>
                   </div>
                 </div>
                 <div

+ 9 - 2
packages/app/src/pages/mine/orders/detail/index.vue

@@ -3,14 +3,19 @@
 </route>
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
-import { getPointsOrder } from '../../../../core/libs/requests'
+import { cancelOrder, getPointsOrder } from '../../../../core/libs/requests'
 import BottomAppBar from '@/components/bottom-app-bar.vue'
 import dayjs from 'dayjs'
+import { requestToast } from '../../../../core/utils/common'
 
 const id = ref()
 const status = ref({ '0': '待交付', '1': '已完成', '2': '已驳回', '3': '已撤销' })
 const payTypes = ref({ 0: '积分支付', 1: '现金支付' })
 const { data, run: setData } = useRequest(() => getPointsOrder(id.value), { initialData: {} })
+const handleSubmit = async () => {
+  await requestToast(() => cancelOrder(id.value), { success: true, successTitle: '取消成功' })
+  await setData()
+}
 onLoad((query: { id: string }) => {
   id.value = query.id
   setData()
@@ -77,7 +82,9 @@ onLoad((query: { id: string }) => {
     <div class="flex-1"></div>
     <BottomAppBar fixed>
       <div>
-        <wd-button :round="false" block v-if="data.orderStatus === '0'">取消订单</wd-button>
+        <wd-button :round="false" block v-if="data.orderStatus === '0'" @click="handleSubmit">
+          取消订单
+        </wd-button>
       </div>
     </BottomAppBar>
   </div>