refactor(custom): 后结收款增加加载动画

src/pages/admin/add_order/pending_order/pay/index.vue

@@ -26,8 +26,7 @@
         <view class="center">
           <nut-ellipsis
             direction="end"
-            :content="itm.Goods.name"
-          ></nut-ellipsis>
+            :content="itm.Goods.name"></nut-ellipsis>
           <!-- <view class="title">{{ itm.Goods.name }}</view> -->
         </view>
         <view class="num">
@@ -45,28 +44,38 @@
         </view>
       </view>
     </view>
-    <view class="btn" @click="ok">立即收款</view>
+    <nut-button
+      style="border-radius: 10px"
+      shape="square"
+      block
+      :loading="isLoading"
+      type="primary"
+      @click="ok"
+      >立即收款</nut-button
+    >
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import Taro from "@tarojs/taro";
-import { getAfterOrder, createPayQr } from "../../../../../api/admin";
+import {ref} from 'vue';
+import Taro from '@tarojs/taro';
+import {getAfterOrder, createPayQr} from '@/api/admin';
 
 const data = ref<any>({});
 
-const val = ref("");
+const val = ref('');
+
+const isLoading = ref(false);
 
 Taro.useLoad((e: any) => {
   get_data(e);
 });
 
-const get_data = async ({ bid, oid }) => {
+const get_data = async ({bid, oid}) => {
   Taro.showLoading({
-    title: "加载中",
+    title: '加载中',
   });
-  const res = await getAfterOrder({ bid, oid });
+  const res = await getAfterOrder({bid, oid});
   data.value = res.data.data;
   Taro.hideLoading();
 };
@@ -74,43 +83,47 @@ const get_data = async ({ bid, oid }) => {
 const get_color = (status: number) => {
   switch (status) {
     case 0:
-      return "#FD0100";
+      return '#FD0100';
     case 1:
-      return "#03A113";
+      return '#03A113';
     case 2:
-      return "#FFA938";
+      return '#FFA938';
   }
 };
 
 const get_status_text = (status: number) => {
   switch (status) {
     case 0:
-      return "未付款";
+      return '未付款';
     case 1:
-      return "已付款";
+      return '已付款';
     case 2:
-      return "挂帐中";
+      return '挂帐中';
   }
 };
 
 const ok = async () => {
   if (!val.value)
     return Taro.showToast({
-      title: "请输入收款金额",
-      icon: "none",
+      title: '请输入收款金额',
+      icon: 'none',
     });
+  isLoading.value = true;
   const res = await createPayQr({
     oid: data.value.oid,
     bid: data.value.bid,
     price: Number(val.value),
   });
-  Taro.setStorageSync("pay_code", res.data.data.code_url);
+  Taro.setStorageSync('pay_code', res.data.data.code_url);
   Taro.navigateTo({
     url: `/pages/admin/add_order/pending_order/wx_pay_code/index?oid=${data.value.oid}&bid=${data.value.bid}`,
+    success: () => {
+      isLoading.value = false;
+    },
   });
 };
 </script>
 
 <style lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

src/utils/index.ts

@@ -7,11 +7,11 @@ export function calculateDistance(
   la2: number,
   lo2: number,
 ): any {
-  var radLat1 = (la1 * Math.PI) / 180.0;
-  var radLat2 = (la2 * Math.PI) / 180.0;
-  var a = radLat1 - radLat2;
-  var b = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0;
-  var s =
+  const radLat1 = (la1 * Math.PI) / 180.0;
+  const radLat2 = (la2 * Math.PI) / 180.0;
+  const a = radLat1 - radLat2;
+  const b = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0;
+  let s =
     2 *
     Math.asin(
       Math.sqrt(