运营报表优化

账单备注调整
调整样式
2026-09-07 23:09:44 +08:00 · 2026-09-07 22:37:53 +08:00 · 2026-09-06 23:15:13 +08:00 · 2026-09-04 21:54:10 +08:00
15 changed files with 242 additions and 47 deletions
@@ -4,8 +4,8 @@
  flex-shrink: 0;

  &__btn {
-    width: 52rpx;
-    height: 52rpx;
+    width: 42rpx;
+    height: 42rpx;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
@@ -10,6 +10,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
  <title>订货采购</title>
  <script crossorigin="anonymous" src="https://polyfill.alicdn.com/polyfill.min.js?features=es2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2Ces2020%2Ces2021%2Ces2022"></script>
+  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script><%= htmlWebpackPlugin.options.script %></script>
 </head>
 <body>
@@ -115,8 +115,8 @@
    }

    &__img {
-      width: 72rpx;
-      height: 72rpx;
+      width: 120rpx;
+      height: 120rpx;
      border-radius: 8rpx;
      background: #f2f3f5;
      flex-shrink: 0;
@@ -149,6 +149,14 @@

    &__amount {
      font-size: 28rpx;
+      color: #ee0a24;
+      font-weight: 500;
+      display: block;
+      margin-top: 4rpx;
+    }
+
+    &__price {
+      font-size: 24rpx;
      color: #323233;
      font-weight: 500;
      display: block;
@@ -104,12 +104,6 @@ export default function BillDetailPage() {
            <Text className='bill-card__value'>{bill.pay_remark}</Text>
          </View>
        )}
-        {bill.remark && (
-          <View className='bill-card__row'>
-            <Text className='bill-card__label'>账单备注</Text>
-            <Text className='bill-card__value'>{bill.remark}</Text>
-          </View>
-        )}
      </View>

      {/* ===== 金额构成 ===== */}
@@ -141,6 +135,10 @@ export default function BillDetailPage() {
            {Number(bill.after_sale) < 0 ? `- ￥${bill.after_sale}` : `￥${bill.after_sale}`}
          </Text>
        </View>
+        <View className='bill-card__row'>
+          <Text className='bill-card__label'>账单备注</Text>
+          <Text className='bill-card__value'>{bill.remark || '暂无备注'}</Text>
+        </View>
        <View className='bill-card__row bill-card__row--total'>
          <Text className='bill-card__label'>账单总额</Text>
          <Text className='bill-card__total'>￥{bill.total_amount}</Text>
@@ -161,13 +159,17 @@ export default function BillDetailPage() {
              />
            )}
            <View className='bill-goods__main'>
-              <Text className='bill-goods__name'>{item.product_name}</Text>
-              <Text className='bill-goods__spec'>
-                {formatSpec(item.product_spec, item.unit)}{' ￥'}{item.price}
-              </Text>
+              <View className='bill-goods__name'>{item.product_name}</View>
+              <View className='bill-goods__spec'>
+                {formatSpec(item.product_spec, item.unit)}
+              </View>
+              <View className='bill-goods__spec'>
+                单价：{formatRetailPrice(item.price, item.spec)} {item.price_unit}
+              </View>
            </View>
            <View className='bill-goods__side'>
-              <Text className='bill-goods__amount'>￥{item.price} × {item.quantity}</Text>
+              <Text className='bill-goods__price'>￥{item.price} × {item.quantity}</Text>
+              <View className='bill-goods__amount'>￥{item.amount}</View>
            </View>
          </View>
        ))}
@@ -59,8 +59,8 @@
    }

    &__image {
-      width: 150rpx;
-      height: 150rpx;
+      width: 180rpx;
+      height: 180rpx;
      border-radius: 12rpx;
      background: #f2f3f5;
      flex-shrink: 0;
@@ -108,7 +108,6 @@
    }

    &__spec {
-      margin-top: 10rpx;
      font-size: 24rpx;
      color: #969799;
    }
@@ -223,7 +223,7 @@ export default function CartPage() {
              </View>
              <Text className='cart-item__spec'>
                {formatSpec(item.spec, item.unit)}{'  '}
-                单价：{formatRetailPrice(item.price, item.spec)} {item.price_unit}
+                <View>单价：{formatRetailPrice(item.price, item.spec)} {item.price_unit}</View>
              </Text>
              <View className='cart-item__bottom'>
                <Text className='cart-item__price'>￥{item.price}</Text>
@@ -301,7 +301,7 @@
    }

    &__bottom {
-      margin-top: 16rpx;
+      margin-top: 8rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
@@ -320,8 +320,8 @@
    }

    &__add {
-      width: 52rpx;
-      height: 52rpx;
+      width: 42rpx;
+      height: 42rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #ee0a24, #ff6034);
      display: flex;
@@ -318,9 +318,11 @@ export default function IndexPage() {
                    <Text className='product-card__name'>{product.name}</Text>
                    <View className='product-card__spec'>
                      {formatSpec(product.spec, product.unit)}{'  '}
-                      {product.price !== null && <>
-                        单价：{formatRetailPrice(product.price, product.spec)} {product.price_unit}
-                      </>}
+                      <View>
+                        {product.price !== null && <>
+                          单价：{formatRetailPrice(product.price, product.spec)} {product.price_unit}
+                        </>}
+                      </View>
                    </View>
                    <View className='product-card__bottom'>
                      {product.price !== null ? (
@@ -20,10 +20,68 @@ const MAX_VOUCHERS = 3
 /** 在线支付（调起 wx.requestPayment）仅微信小程序支持 */
 const IS_WEAPP = process.env.TARO_ENV === 'weapp'

-/** 支付方式选项（在线支付仅小程序端展示，排在最前） */
+/** H5 端处于微信内置浏览器时，可走公众号网页授权 + JSAPI 在线支付 */
+const IS_H5_WECHAT =
+  process.env.TARO_ENV === 'h5' &&
+  typeof navigator !== 'undefined' &&
+  /micromessenger/i.test(navigator.userAgent)
+
+/** 在线支付（旺铺网关 JSAPI）是否可用：小程序 / 微信内 H5 */
+const ONLINE_PAY_AVAILABLE = IS_WEAPP || IS_H5_WECHAT
+
+/** H5 公众号支付草稿存储 key（授权跳转前暂存账单选择，回跳后恢复） */
+const H5_PAY_DRAFT_KEY = 'h5_online_pay_draft'
+
+/** H5 公众号支付草稿（授权回跳页面重载，勾选状态经 sessionStorage 恢复） */
+interface H5PayDraft {
+  bill_ids: number[]
+  remark?: string
+}
+
+/**
+ * 调起公众号 JSAPI 支付（WeixinJSBridge 未注入时等待 WeixinJSBridgeReady 事件）
+ * resolve: 'ok' 支付成功 / 'cancel' 用户取消 / 'fail' 调起失败
+ */
+function invokeWechatJsapiPay(payParams: Record<string, any>): Promise<'ok' | 'cancel' | 'fail'> {
+  return new Promise(resolve => {
+    const invoke = () => {
+      ;(window as any).WeixinJSBridge.invoke(
+        'getBrandWCPayRequest',
+        {
+          appId: String(payParams.appId || ''),
+          timeStamp: String(payParams.timeStamp || ''),
+          nonceStr: String(payParams.nonceStr || ''),
+          package: String(payParams.package || ''),
+          signType: String(payParams.signType || 'RSA'),
+          paySign: String(payParams.paySign || ''),
+        },
+        (res: any) => {
+          const msg: string = res?.err_msg || ''
+          if (msg === 'get_brand_wcpay_request:ok') resolve('ok')
+          else if (msg === 'get_brand_wcpay_request:cancel') resolve('cancel')
+          else resolve('fail')
+        },
+      )
+    }
+    if ((window as any).WeixinJSBridge) {
+      invoke()
+    } else {
+      document.addEventListener('WeixinJSBridgeReady', invoke, { once: true })
+    }
+  })
+}
+
+/** 支付方式选项（在线支付仅小程序/微信内 H5 展示，排在最前） */
 const PAY_METHODS: Array<{ value: PayMethod; label: string; icon: string; desc: string }> = [
-  ...(IS_WEAPP
-    ? [{ value: 4 as PayMethod, label: '微信在线支付', icon: 'wechat', desc: '小程序内直接付款，免上传凭证' }]
+  ...(ONLINE_PAY_AVAILABLE
+    ? [
+        {
+          value: 4 as PayMethod,
+          label: '微信在线支付',
+          icon: 'wechat',
+          desc: IS_WEAPP ? '小程序内直接付款，免上传凭证' : '微信内直接付款，免上传凭证',
+        },
+      ]
    : []),
  { value: 1, label: '微信支付', icon: 'wechat', desc: '扫码完成转账' },
  { value: 2, label: '支付宝', icon: 'alipay', desc: '扫码完成转账' },
@@ -45,7 +103,7 @@ export default function PaymentPage() {
  const loadingRef = useRef(false)

  const [config, setConfig] = useState<PaymentConfig | null>(null)
-  const [payMethod, setPayMethod] = useState<PayMethod>(IS_WEAPP ? 4 : 1)
+  const [payMethod, setPayMethod] = useState<PayMethod>(ONLINE_PAY_AVAILABLE ? 4 : 1)
  const [vouchers, setVouchers] = useState<UploadedFile[]>([])
  const [remark, setRemark] = useState('')
  const [uploading, setUploading] = useState(false)
@@ -247,14 +305,123 @@ export default function PaymentPage() {
    }
  }, [submitting, selectedIds, remark, loadBills])

-  /** 提交入口：按支付方式分发 */
+  /**
+   * H5 公众号支付主流程（授权回跳后执行）：
+   * 授权 code 下单（scene=mp，后端换付款人 openid）→ WeixinJSBridge 调起支付 → 主动查询同步结果
+   * 与小程序端一致：无论成功/取消都跳转支付详情（待支付单可在详情页刷新同步结果）
+   */
+  const runH5OnlinePay = useCallback(
+    async (billIds: number[], code: string, remarkText?: string) => {
+      setSubmitting(true)
+      try {
+        const res = await createOnlinePaymentApi({
+          bill_ids: billIds,
+          code,
+          scene: 'mp',
+          remark: remarkText,
+        })
+        const { id, payment_no, pay_params } = res.data
+        const result = await invokeWechatJsapiPay(pay_params)
+        if (result !== 'ok') {
+          // 用户取消或调起失败：账单仍锁定在支付单中，进详情页可刷新同步/稍后处理
+          Taro.showToast({
+            title: result === 'cancel' ? '已取消支付' : '支付调起失败，请稍后重试',
+            icon: 'none',
+          })
+          setTimeout(() => {
+            Taro.redirectTo({ url: `/pages/payment-detail/index?id=${id}` })
+          }, 800)
+          return
+        }
+        // 主动查询同步结果（网关后台通知延迟/丢失时的兜底结账）
+        let paid = false
+        try {
+          const q = await queryOnlinePaymentApi(payment_no)
+          paid = q.data.status === 1
+        } catch {
+          // 查询失败不阻断，进详情页可手动刷新
+        }
+        Taro.showToast({ title: paid ? '支付成功' : '支付结果确认中', icon: paid ? 'success' : 'none' })
+        setTimeout(() => {
+          Taro.redirectTo({ url: `/pages/payment-detail/index?id=${id}` })
+        }, 800)
+      } catch {
+        // 下单失败：账单可能已被其他端付款/锁定，刷新列表
+        loadBills(1, true)
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [loadBills],
+  )
+
+  /** H5 公众号支付：处理微信授权回跳（URL 携带 code 且本地存在支付草稿时自动继续支付） */
+  const h5CallbackRef = useRef(false)
+  useEffect(() => {
+    if (!IS_H5_WECHAT || h5CallbackRef.current || !loggedIn) return
+    const code = new URLSearchParams(window.location.search).get('code')
+    if (!code) return
+    // 清理地址栏授权参数，避免刷新/分享带出已失效的 code
+    window.history.replaceState(null, '', window.location.pathname)
+    let draft: H5PayDraft | null = null
+    try {
+      draft = JSON.parse(window.sessionStorage.getItem(H5_PAY_DRAFT_KEY) || 'null')
+      window.sessionStorage.removeItem(H5_PAY_DRAFT_KEY)
+    } catch {
+      draft = null
+    }
+    if (!draft || !Array.isArray(draft.bill_ids) || draft.bill_ids.length === 0) return
+    h5CallbackRef.current = true
+    setSelectedIds(draft.bill_ids)
+    if (draft.remark) setRemark(draft.remark)
+    runH5OnlinePay(draft.bill_ids, code, draft.remark)
+  }, [loggedIn, runH5OnlinePay])
+
+  /**
+   * H5 公众号支付入口：暂存支付草稿 → 跳转微信网页授权（snsapi_base 静默授权）
+   * 授权后回跳本页携带 code，由上方 effect 恢复草稿并继续支付
+   */
+  const handleH5OnlinePay = useCallback(async () => {
+    if (submitting) return
+    if (selectedIds.length === 0) {
+      Taro.showToast({ title: '请选择要付款的账单', icon: 'none' })
+      return
+    }
+    setSubmitting(true)
+    try {
+      // mp_appid 可能尚未加载完成，兜底重新拉取
+      let appid = config?.mp_appid
+      if (!appid) {
+        const res = await getPaymentConfigApi()
+        setConfig(res.data)
+        appid = res.data.mp_appid
+      }
+      if (!appid) {
+        Taro.showToast({ title: '公众号支付暂未开通，请选择其他支付方式', icon: 'none' })
+        setSubmitting(false)
+        return
+      }
+      const draft: H5PayDraft = { bill_ids: selectedIds, remark: remark.trim() || undefined }
+      window.sessionStorage.setItem(H5_PAY_DRAFT_KEY, JSON.stringify(draft))
+      const redirectUri = encodeURIComponent(window.location.origin + window.location.pathname)
+      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base#wechat_redirect`
+    } catch {
+      setSubmitting(false)
+    }
+  }, [submitting, selectedIds, remark, config])
+
+  /** 提交入口：按支付方式与端分发（小程序 wx.requestPayment / H5 公众号 JSAPI / 线下凭证） */
  const handleSubmit = useCallback(() => {
    if (isOnline) {
-      handleOnlinePay()
+      if (IS_H5_WECHAT) {
+        handleH5OnlinePay()
+      } else {
+        handleOnlinePay()
+      }
    } else {
      handleVoucherSubmit()
    }
-  }, [isOnline, handleOnlinePay, handleVoucherSubmit])
+  }, [isOnline, handleOnlinePay, handleH5OnlinePay, handleVoucherSubmit])

  /** 当前支付方式的收款展示 */
  const renderMethodContent = () => {
@@ -111,8 +111,8 @@
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

    &__image {
-      width: 160rpx;
-      height: 160rpx;
+      width: 180rpx;
+      height: 180rpx;
      border-radius: 12rpx;
      background: #f2f3f5;
      flex-shrink: 0;
@@ -136,7 +136,6 @@
    }

    &__spec {
-      margin-top: 10rpx;
      font-size: 24rpx;
      color: #969799;
    }
@@ -161,8 +160,8 @@
    }

    &__add {
-      width: 56rpx;
-      height: 56rpx;
+      width: 42rpx;
+      height: 42rpx;
      border-radius: 50%;
      background: #ee0a24;
      display: flex;
@@ -291,9 +291,11 @@ export default function ProductPage() {
                  <Text className='product-item__name'>{product.name}</Text>
                  <Text className='product-item__spec'>
                    {formatSpec(product.spec, product.unit)}{'  '}
-                    {product.price !== null && <>
-                      单价：{formatRetailPrice(product.price, product.spec)} {product.price_unit}
-                    </>}
+                    <View>
+                      {product.price !== null && <>
+                        单价：{formatRetailPrice(product.price, product.spec)} {product.price_unit}
+                      </>}
+                    </View>
                  </Text>
                  <View className='product-item__bottom'>
                    {product.price !== null ? (
@@ -173,9 +173,13 @@ export default function ReportPage() {
                    </View>
                    <View className='report-item__row'>
                      <Text className='report-item__spec'>
-                        {item.product_spec ? `${item.product_spec} · ` : ''}
-                        累计 {item.quantity}{item.unit}
-                        {parseFloat(item.weight) > 0 ? ` · 称重 ${item.weight}` : ''}
+                        {item.product_spec ? `${item.product_spec}` : ''}{item.unit}
+                      </Text>
+                    </View>
+                    <View className='report-item__row'>
+                      <Text className='report-item__spec'>
+                        累计 {item.quantity}
+                        {parseFloat(item.weight) > 0 ? ` · 重量 ${item.weight}` : ''}
                      </Text>
                      <Text className='report-item__percent'>{item.percent}%</Text>
                    </View>
@@ -74,6 +74,8 @@ export interface BillItem {
  amount: string
  /** 商品首图 URL（无图为空字符串） */
  image: string
+  price_unit: string
+  spec: string
 }

 /** 账单关联订单 */
@@ -42,6 +42,8 @@ export interface PaymentConfig {
  wechat_qrcode: string
  alipay_qrcode: string
  bank_info: string
+  /** 公众号 appid（H5 网页授权取 code 拼授权链接用，配置了公众号支付才返回） */
+  mp_appid?: string
 }

 /** 支付记录（列表行与详情的 payment 字段一致） */
@@ -123,7 +125,7 @@ export function getPaymentDetailApi(id: number) {
  return get<PaymentDetail>(`/mini/payment/${id}`)
 }

-/** 在线支付下单返回（pay_params 为旺铺网关透传的 wx.requestPayment 调起参数，以网关实际返回为准） */
+/** 在线支付下单返回（pay_params 为旺铺网关透传的调起参数：小程序给 wx.requestPayment，H5 公众号给 getBrandWCPayRequest，以网关实际返回为准） */
 export interface OnlinePaymentCreateResult {
  id: number
  /** 支付单号（ZF 前缀，= 上送网关的商户订单号 mer_order_id），查询/对账用 */
@@ -131,6 +133,7 @@ export interface OnlinePaymentCreateResult {
  /** 应付金额（= 所选账单总额合计，元） */
  amount: string
  pay_params: {
+    appId?: string
    timeStamp?: string
    nonceStr?: string
    package?: string
@@ -152,9 +155,15 @@ export interface OnlinePaymentQueryResult {

 /**
 * 发起在线支付（合并账单下单）：POST /mini/payment/online
- * code 为 wx.login() 返回的登录凭证（后端换付款人 openid）
+ * code：小程序传 wx.login() 登录凭证（不传 scene）；
+ * H5 公众号传网页授权回调 code，需带 scene: 'mp'（后端按场景换付款人 openid）
 */
-export function createOnlinePaymentApi(data: { bill_ids: number[]; code: string; remark?: string }) {
+export function createOnlinePaymentApi(data: {
+  bill_ids: number[]
+  code: string
+  scene?: 'mp'
+  remark?: string
+}) {
  return post<OnlinePaymentCreateResult>('/mini/payment/online', data)
 }

@@ -10,7 +10,7 @@ const LOGIN_PATH = '/pages/login/index'
 /** 默认请求超时（ms） */
 const DEFAULT_TIMEOUT = 15000
 /** 接口根地址（uploadFile 等原生请求同样使用） */
-// export const BASE_URL = "http://localhost:8000/index.php"
+// export const BASE_URL = "http://localhost:8000"
 export const BASE_URL = "https://purchase.henanklkj.com/index.php"

 /**
Author	SHA1	Message	Date
xinadmin	8f9b54ce76	运营报表优化	2026-09-07 23:09:44 +08:00
xinadmin	a85da7a5d1	账单备注调整	2026-09-07 22:37:53 +08:00
xinadmin	1b9e505feb	调整样式	2026-09-06 23:15:13 +08:00
xinadmin	74aee003e7	H5支付	2026-09-04 21:54:10 +08:00