fix SalesOrderPayment.vue style

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -17,7 +17,15 @@
 			<t-form-item label="履约时间" content-align="right"><t-button theme="primary" variant="outline" size="small" :content="deliveredAtText || '此刻'" @click="pickerVisible = true" /></t-form-item>
 			<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
 		</t-form>
-		<package-photo-field v-if="order" v-model="photoItems" required title="履约凭证照片" />
+		<photo-scroller
+			v-if="order"
+			:model-value="photoUrlList"
+			v-model:photo-items="photoItems"
+			:upload="uploadPhotoList"
+			:edit-mode="true"
+			required
+			title="履约凭证照片"
+		/>
 		<t-popup v-model="pickerVisible" placement="bottom">
 			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="履约时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
 		</t-popup>
@@ -45,7 +53,7 @@
 import PackageAPI from "@/api/PackageAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
-import PackagePhotoField from "@/components/PackagePhotoField.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { CustomerPackageItem, GaoCustomerPackage } from "@/types/Package";
 import type { OrderFulfillmentItemRequest } from "@/types/Fulfillment";
@@ -56,6 +64,7 @@ import { createPackageRequestNo, formatPackageAmount, getPackageQuantityText, no
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { uploadPhotoList } from "@/utils/photo";
 
 type SourceItem = SalesOrderItem | CustomerPackageItem;
 defineOptions({ name: "OrderFulfillmentCreate" });
@@ -72,6 +81,7 @@ const remark = ref("");
 const requestNo = ref("");
 const isSaving = ref(false);
 const photoItems = ref<PhotoItem[]>([]);
+const photoUrlList = computed(() => photoItems.value.map(item => item.url));
 const orderPickerVisible = ref(false);
 const orderLoading = ref(false);
 const orderOptions = ref<SalesOrder[]>([]);

src/pages/fulfillment/OrderFulfillmentDetail.vue

@@ -52,7 +52,14 @@
 				<t-form-item label="冲正原因" required-mark><t-textarea v-model.trim="revokeReason" borderless autosize /></t-form-item>
 				<t-form-item label="库存是否退回门店"><t-switch v-model="returnedToStore" /></t-form-item>
 			</t-form>
-			<package-photo-field v-model="photoItems" required title="冲正凭证照片" />
+			<photo-scroller
+				:model-value="photoUrlList"
+				v-model:photo-items="photoItems"
+				:upload="uploadPhotoList"
+				:edit-mode="true"
+				required
+				title="冲正凭证照片"
+			/>
 		</bottom-popup>
 	</div>
 </template>
@@ -62,7 +69,7 @@ import { BottomPopup } from "timi-tdesign-mobile";
 import { Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
-import PackagePhotoField from "@/components/PackagePhotoField.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { OrderFulfillment } from "@/types/Fulfillment";
 import type { PhotoItem } from "@/types/Photo";
@@ -72,6 +79,7 @@ import { getErrorMessage } from "@/utils/error";
 import { getFulfillmentStatusText, getFulfillmentTypeText, getStatusTheme } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { uploadPhotoList } from "@/utils/photo";
 
 type ReasonAction = "reject" | "cancel";
 defineOptions({ name: "OrderFulfillmentDetail" });
@@ -90,6 +98,7 @@ const revokeReason = ref("");
 const returnedToStore = ref(true);
 const revokeRequestNo = ref("");
 const photoItems = ref<PhotoItem[]>([]);
+const photoUrlList = computed(() => photoItems.value.map(item => item.url));
 const isWaitingStock = computed(() => fulfillment.value?.status === "WAITING_STOCK");
 const isPending = computed(() => fulfillment.value?.status === "PENDING");
 const isVerified = computed(() => fulfillment.value?.status === "VERIFIED");