【订单】 优化# 退款原因样式

src/bundle/pages/user_address/index.vue

@@ -69,14 +69,14 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, ref, watch } from 'vue'
-import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
 import { getGeocoder } from '@/api/app'
-import { apiAddressLists, apiAddressEdit } from '@/api/user'
+import { apiAddressEdit, apiAddressLists } from '@/api/user'
 import { wxOaAddress } from '@/hooks/wechat'
-import { isWeixinClient } from '@/utils/client'
 import { useUserStore } from '@/stores/user'
+import { isWeixinClient } from '@/utils/client'
+import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
 import { storeToRefs } from 'pinia'
+import { ref, shallowRef } from 'vue'
 
 const paging = shallowRef<any>(null)
 const type = ref(false)
@@ -90,6 +90,9 @@ const queryList = async (pageNo, pageSize) => {
     try {
         const { lists } = await apiAddressLists({ pageNo, pageSize })
         paging.value.setLocalPaging(lists)
+        if (lists.length > 0) {
+            uni.$emit('address', lists[0])
+        }
     } catch (e) {
         console.log('报错=>', e)
         //TODO handle the exception

src/pages/order_detail/index.vue

@@ -186,10 +186,11 @@
                 </view>
                 <view
                     class="flex justify-between"
+                    :class="setRefuseReasonStyle()?.container"
                     v-if="orderData.orderStatus === 4 || orderData.orderStatus === 5"
                 >
                     <view>退款原因</view>
-                    <view class="flex-1 ml-2 text-right">
+                    <view class="flex-1" :class="setRefuseReasonStyle()?.content">
                         {{ orderData.orderRefundDetailVo?.refundReason }}
                     </view>
                 </view>
@@ -261,6 +262,20 @@ const payState = reactive({
 const orderId = ref<number | string>('')
 
 const isUseCoupon = computed(() => unref(orderData.value.couponDetailVo))
+const setRefuseReasonStyle = computed(() => () => {
+    const reason = orderData.value.orderRefundDetailVo?.refundReason as string
+    const classNameMap = {
+        container: '',
+        content: ''
+    }
+    if (reason.length <= 30) {
+        classNameMap.content = 'text-right'
+    } else {
+        classNameMap.container = 'flex-col gap-2'
+        classNameMap.content = 'text-left indent-3'
+    }
+    return classNameMap
+})
 
 // 初始化订单详情
 const initOrderDetail = async (): Promise<void> => {