diff --git a/src/assets/images/example-license.png b/src/assets/images/example-license.png new file mode 100644 index 0000000..73f5e48 Binary files /dev/null and b/src/assets/images/example-license.png differ diff --git a/src/assets/images/example-storefront-front.png b/src/assets/images/example-storefront-front.png new file mode 100644 index 0000000..ea95c94 Binary files /dev/null and b/src/assets/images/example-storefront-front.png differ diff --git a/src/assets/images/example-storefront-left.png b/src/assets/images/example-storefront-left.png new file mode 100644 index 0000000..116c0b8 Binary files /dev/null and b/src/assets/images/example-storefront-left.png differ diff --git a/src/assets/images/example-storefront-right.png b/src/assets/images/example-storefront-right.png new file mode 100644 index 0000000..d07ec6b Binary files /dev/null and b/src/assets/images/example-storefront-right.png differ diff --git a/src/assets/images/icon-complaint-charge-active.png b/src/assets/images/icon-complaint-charge-active.png new file mode 100644 index 0000000..838fa90 Binary files /dev/null and b/src/assets/images/icon-complaint-charge-active.png differ diff --git a/src/assets/images/icon-complaint-charge.png b/src/assets/images/icon-complaint-charge.png new file mode 100644 index 0000000..e29ac2d Binary files /dev/null and b/src/assets/images/icon-complaint-charge.png differ diff --git a/src/assets/images/icon-complaint-fraud-active.png b/src/assets/images/icon-complaint-fraud-active.png new file mode 100644 index 0000000..1275ae3 Binary files /dev/null and b/src/assets/images/icon-complaint-fraud-active.png differ diff --git a/src/assets/images/icon-complaint-fraud.png b/src/assets/images/icon-complaint-fraud.png new file mode 100644 index 0000000..399c532 Binary files /dev/null and b/src/assets/images/icon-complaint-fraud.png differ diff --git a/src/assets/images/icon-complaint-other-active.png b/src/assets/images/icon-complaint-other-active.png new file mode 100644 index 0000000..6f70eff Binary files /dev/null and b/src/assets/images/icon-complaint-other-active.png differ diff --git a/src/assets/images/icon-complaint-other.png b/src/assets/images/icon-complaint-other.png new file mode 100644 index 0000000..b485e4f Binary files /dev/null and b/src/assets/images/icon-complaint-other.png differ diff --git a/src/assets/images/icon-complaint-service-active.png b/src/assets/images/icon-complaint-service-active.png new file mode 100644 index 0000000..6545a43 Binary files /dev/null and b/src/assets/images/icon-complaint-service-active.png differ diff --git a/src/assets/images/icon-complaint-service.png b/src/assets/images/icon-complaint-service.png new file mode 100644 index 0000000..3b4edbf Binary files /dev/null and b/src/assets/images/icon-complaint-service.png differ diff --git a/src/assets/images/icon-complaint-timeout-active.png b/src/assets/images/icon-complaint-timeout-active.png new file mode 100644 index 0000000..97a2e1d Binary files /dev/null and b/src/assets/images/icon-complaint-timeout-active.png differ diff --git a/src/assets/images/icon-complaint-timeout.png b/src/assets/images/icon-complaint-timeout.png new file mode 100644 index 0000000..416ce8e Binary files /dev/null and b/src/assets/images/icon-complaint-timeout.png differ diff --git a/src/assets/images/icon-kefu.png b/src/assets/images/icon-kefu.png new file mode 100644 index 0000000..61cd1df Binary files /dev/null and b/src/assets/images/icon-kefu.png differ diff --git a/src/lib/assets.ts b/src/lib/assets.ts index 9184e12..975ee15 100644 --- a/src/lib/assets.ts +++ b/src/lib/assets.ts @@ -1,15 +1,45 @@ +import exampleLicense from '@/assets/images/example-license.png' +import exampleStorefrontFront from '@/assets/images/example-storefront-front.png' +import exampleStorefrontLeft from '@/assets/images/example-storefront-left.png' +import exampleStorefrontRight from '@/assets/images/example-storefront-right.png' import iconCamera from '@/assets/images/icon-camera.png' import iconClose from '@/assets/images/icon-close.png' import emptyOrders from '@/assets/images/empty-orders.png' +import iconComplaintCharge from '@/assets/images/icon-complaint-charge.png' +import iconComplaintChargeActive from '@/assets/images/icon-complaint-charge-active.png' +import iconComplaintFraud from '@/assets/images/icon-complaint-fraud.png' +import iconComplaintFraudActive from '@/assets/images/icon-complaint-fraud-active.png' +import iconComplaintOther from '@/assets/images/icon-complaint-other.png' +import iconComplaintOtherActive from '@/assets/images/icon-complaint-other-active.png' +import iconComplaintService from '@/assets/images/icon-complaint-service.png' +import iconComplaintServiceActive from '@/assets/images/icon-complaint-service-active.png' +import iconComplaintTimeout from '@/assets/images/icon-complaint-timeout.png' +import iconComplaintTimeoutActive from '@/assets/images/icon-complaint-timeout-active.png' +import iconKefu from '@/assets/images/icon-kefu.png' import iconInputClear from '@/assets/images/icon-input-clear.png' import iconLogo from '@/assets/images/icon-logo.png' import iconPen from '@/assets/images/icon-pen.png' import iconSearch from '@/assets/images/icon-search.png' export const LOCAL_IMAGES = { + exampleLicense, + exampleStorefrontFront, + exampleStorefrontLeft, + exampleStorefrontRight, camera: iconCamera, close: iconClose, empty: emptyOrders, + complaintCharge: iconComplaintCharge, + complaintChargeActive: iconComplaintChargeActive, + complaintFraud: iconComplaintFraud, + complaintFraudActive: iconComplaintFraudActive, + complaintOther: iconComplaintOther, + complaintOtherActive: iconComplaintOtherActive, + complaintService: iconComplaintService, + complaintServiceActive: iconComplaintServiceActive, + complaintTimeout: iconComplaintTimeout, + complaintTimeoutActive: iconComplaintTimeoutActive, + kefu: iconKefu, clear: iconInputClear, logo: iconLogo, pen: iconPen, diff --git a/src/lib/order.test.ts b/src/lib/order.test.ts index 5f834e4..456f4e1 100644 --- a/src/lib/order.test.ts +++ b/src/lib/order.test.ts @@ -95,13 +95,19 @@ describe('storefront slots', () => { const front = { id: '123', url: 'https://cdn.example/front.jpg', preview: 'https://cdn.example/front.jpg' } const left = { id: '45', url: 'https://cdn.example/left.jpg', preview: 'https://cdn.example/left.jpg' } - it('joins three slots and writes null for empty ones', () => { - expect(joinStorefrontSlots([front, left, null])).toBe('123,45,null') - expect(joinStorefrontSlots([front, null, null])).toBe('123,null,null') - expect(joinStorefrontSlots([null, null, null])).toBe('null,null,null') + it('joins three slots and writes 0 for empty ones', () => { + expect(joinStorefrontSlots([front, left, null])).toBe('123,45,0') + expect(joinStorefrontSlots([front, null, null])).toBe('123,0,0') + expect(joinStorefrontSlots([null, null, null])).toBe('0,0,0') }) - it('parses comma ids into front/left/right, treating null as empty', () => { + it('parses comma ids into front/left/right, treating 0 and legacy null as empty', () => { + expect(parseStorefrontSlots({ + extra: { + entity_storefront_image: '123,45,0', + entity_storefront_image_url: 'https://cdn.example/front.jpg,https://cdn.example/left.jpg,0', + }, + })).toEqual([front, left, null]) expect(parseStorefrontSlots({ extra: { entity_storefront_image: '123,45,null', @@ -126,7 +132,7 @@ describe('map coordinate display', () => { }) describe('buildResubmitPayload', () => { - it('updates extra while dropping upload-only keys and keeping storefront null placeholders', () => { + it('updates extra while dropping upload-only keys and keeping storefront 0 placeholders', () => { expect( buildResubmitPayload({ order: mapOrder as any, @@ -154,7 +160,7 @@ describe('buildResubmitPayload', () => { entity_address_name: '淮海路2号', entity_address: '121.480000,31.240000', entity_phone2: '13700137000', - entity_storefront_image: '123,45,null', + entity_storefront_image: '123,45,0', entity_business_license_image: '31', }, }) diff --git a/src/lib/order.ts b/src/lib/order.ts index dafdd54..fd8f8e3 100644 --- a/src/lib/order.ts +++ b/src/lib/order.ts @@ -45,7 +45,7 @@ function splitValues (value: unknown) { } function isEmptySlotToken (value?: string) { - return !value || value === 'null' + return !value || value === 'null' || value === '0' } function splitSlotValues (value: unknown) { @@ -58,7 +58,7 @@ export type StorefrontSlot = UploadedImage | null export function joinStorefrontSlots (slots: Array = []) { return [0, 1, 2].map((index) => { const id = slots[index]?.id?.trim() - return id ? id : 'null' + return id ? id : '0' }).join(',') } diff --git a/src/pages/complaint/index.config.ts b/src/pages/complaint/index.config.ts index 6d26eb2..3ff4cea 100644 --- a/src/pages/complaint/index.config.ts +++ b/src/pages/complaint/index.config.ts @@ -3,4 +3,6 @@ export default definePageConfig({ navigationBarBackgroundColor: '#00C261', navigationBarTextStyle: 'white', backgroundColor: '#F6F8FC', + backgroundColorTop: '#00C261', + backgroundColorBottom: '#F6F8FC', }) diff --git a/src/pages/complaint/index.scss b/src/pages/complaint/index.scss index 870ad99..5132237 100644 --- a/src/pages/complaint/index.scss +++ b/src/pages/complaint/index.scss @@ -6,7 +6,7 @@ } .complaint-hero { - padding: 8px 32px 56px; + padding: 16px 24px 48px; background: #00c261; } @@ -20,54 +20,62 @@ flex: 1; min-width: 0; padding-right: 16px; - color: #fff; + color: #ffffff; font-size: 32px; - font-weight: 700; + font-weight: 500; line-height: 44px; } .complaint-hero__paid { flex-shrink: 0; - color: #fff; - font-size: 26px; - line-height: 44px; + color: #ffffff; + font-size: 28px; + font-weight: 400; + line-height: 40px; + text-align: right; } .complaint-hero__meta { + box-sizing: border-box; + width: 100%; + height: 152px; margin-top: 20px; - padding: 20px 24px; + padding: 24px 32px; border-radius: 16px; - background: rgba(255, 255, 255, 0.16); + background: #1ab86f; } .complaint-hero__meta-row { display: flex; - align-items: flex-start; + align-items: center; } .complaint-hero__meta-row + .complaint-hero__meta-row { - margin-top: 12px; + margin-top: 24px; } .complaint-hero__meta-label { - width: 140px; - color: rgba(255, 255, 255, 0.85); - font-size: 24px; - line-height: 36px; + width: 120px; + margin-right: 24px; + color: rgba(255, 255, 255, 0.7); + font-size: 28px; + font-weight: 400; + line-height: 40px; } .complaint-hero__meta-value { flex: 1; min-width: 0; - color: #fff; - font-size: 24px; - line-height: 36px; + color: #ffffff; + font-size: 28px; + font-weight: 400; + line-height: 40px; word-break: break-all; } .complaint-sheet { margin-top: -32px; - padding: 32px 32px 0; + padding: 32px 24px 0; border-radius: 32px 32px 0 0; background: #f6f8fc; } @@ -80,9 +88,10 @@ display: flex; align-items: center; margin-bottom: 16px; - color: #1d2129; - font-size: 30px; - font-weight: 700; + color: #1a1a1a; + font-size: 28px; + font-weight: 500; + line-height: 40px; } .complaint-label__required { @@ -95,26 +104,35 @@ color: #86909c; font-size: 24px; font-weight: 400; + line-height: 40px; } .complaint-types { + box-sizing: border-box; display: flex; flex-wrap: wrap; - padding: 8px 8px 0; - border-radius: 24px; - background: #fff; + justify-content: space-between; + align-content: space-between; + width: 100%; + height: 404px; + padding: 32px 24px; + border-radius: 32px; + background: #ffffff; + box-shadow: 0 0 20px 0 rgba(0, 78, 206, 0.1); } .complaint-type { box-sizing: border-box; display: flex; align-items: center; - width: calc(50% - 16px); - margin: 8px; - padding: 20px 16px; - border: 2px solid #e5e6eb; - border-radius: 16px; - background: #fff; + justify-content: center; + width: calc(50% - 12px); + min-width: 256px; + height: 92px; + padding: 0 12px; + border: 2px solid #dedede; + border-radius: 12px; + background: #ffffff; } .complaint-type--active { @@ -122,49 +140,35 @@ } .complaint-type__icon { - display: flex; - align-items: center; - justify-content: center; width: 44px; height: 44px; margin-right: 8px; - border-radius: 22px; - background: #f2f3f5; - color: #4e5969; - font-size: 22px; - font-weight: 700; -} - -.complaint-type--active .complaint-type__icon { - background: #e8f3ff; - color: #165dff; + flex-shrink: 0; } .complaint-type__text { - flex: 1; - min-width: 0; - color: #1d2129; - font-size: 26px; - line-height: 36px; -} - -.complaint-type--active .complaint-type__text { - color: #165dff; + color: #222222; + font-size: 30px; + font-weight: 400; + line-height: 44px; + white-space: nowrap; } .complaint-textarea { position: relative; box-sizing: border-box; - min-height: 280px; - padding: 20px 24px 48px; - border-radius: 20px; - background: #fff; + width: 100%; + height: 284px; + padding: 24px 24px 48px; + border-radius: 32px; + background: #ffffff; + box-shadow: 0 0 20px 0 rgba(0, 78, 206, 0.1); } .complaint-textarea__input { width: 100%; - height: 220px; - color: #1d2129; + height: 200px; + color: #1a1a1a; font-size: 28px; line-height: 40px; } @@ -175,6 +179,7 @@ bottom: 16px; color: #c9cdd4; font-size: 24px; + line-height: 40px; } .complaint-placeholder { @@ -188,66 +193,57 @@ .complaint-upload { position: relative; - width: 160px; - height: 160px; + box-sizing: border-box; + width: 200px; + height: 200px; margin: 0 16px 16px 0; overflow: hidden; - border-radius: 16px; - background: #fff; + border-radius: 20px; + background: #ffffff; + box-shadow: 0 0 25px 0 rgba(0, 78, 206, 0.1); } .complaint-upload--add { display: flex; align-items: center; justify-content: center; - border: 2px solid #e5e6eb; } -.complaint-upload__image, -.complaint-upload__camera { +.complaint-upload__image { width: 100%; height: 100%; } .complaint-upload__camera { - width: 56px; - height: 56px; + width: 64px; + height: 64px; } .complaint-upload__remove { position: absolute; top: 8px; right: 8px; - display: flex; - align-items: center; - justify-content: center; width: 36px; height: 36px; - border-radius: 18px; - background: rgba(29, 33, 41, 0.45); -} - -.complaint-upload__remove-text { - color: #fff; - font-size: 28px; - line-height: 32px; } .complaint-contact { display: flex; align-items: center; box-sizing: border-box; - height: 88px; + width: 100%; + height: 100px; padding: 0 24px; - border-radius: 16px; - background: #fff; + border-radius: 20px; + background: #ffffff; + box-shadow: 0 0 20px 0 rgba(0, 78, 206, 0.1); } .complaint-contact__input { flex: 1; min-width: 0; - height: 88px; - color: #1d2129; + height: 100px; + color: #1a1a1a; font-size: 28px; } @@ -255,6 +251,7 @@ width: 36px; height: 36px; margin-left: 12px; + flex-shrink: 0; } .complaint-footer { @@ -263,7 +260,7 @@ bottom: 0; left: 0; z-index: 10; - padding: 16px 32px calc(24px + env(safe-area-inset-bottom)); + padding: 16px 24px calc(24px + env(safe-area-inset-bottom)); background: #f6f8fc; } @@ -273,9 +270,9 @@ border: 0; border-radius: 16px; background: #165dff; - color: #fff; + color: #ffffff; font-size: 32px; - font-weight: 700; + font-weight: 500; line-height: 88px; } diff --git a/src/pages/complaint/index.tsx b/src/pages/complaint/index.tsx index ff62d5e..6f85d1b 100644 --- a/src/pages/complaint/index.tsx +++ b/src/pages/complaint/index.tsx @@ -3,17 +3,32 @@ import Taro, { useLoad } from '@tarojs/taro' import { useState } from 'react' import { report, uploadImage } from '@/api/user' import { LOCAL_IMAGES } from '@/lib/assets' -import { buildFeedbackPayload, COMPLAINT_TYPES } from '@/lib/feedback' +import { buildFeedbackPayload, COMPLAINT_TYPES, type ComplaintType } from '@/lib/feedback' import { getOrderDraft } from '@/lib/orderDraft' import type { OrderLike, UploadedImage } from '@/lib/order' import './index.scss' -const TYPE_ICONS: Record = { - 莫名扣费: '¥', - 超过7天未解决: '7', - 交易被骗: '¥', - 不满意商家服务: '服', - 其他问题: '…', +const TYPE_ICONS: Record = { + 莫名扣费: { + idle: LOCAL_IMAGES.complaintCharge, + active: LOCAL_IMAGES.complaintChargeActive, + }, + 超过7天未解决: { + idle: LOCAL_IMAGES.complaintTimeout, + active: LOCAL_IMAGES.complaintTimeoutActive, + }, + 交易被骗: { + idle: LOCAL_IMAGES.complaintFraud, + active: LOCAL_IMAGES.complaintFraudActive, + }, + 不满意商家服务: { + idle: LOCAL_IMAGES.complaintService, + active: LOCAL_IMAGES.complaintServiceActive, + }, + 其他问题: { + idle: LOCAL_IMAGES.complaintOther, + active: LOCAL_IMAGES.complaintOtherActive, + }, } export default function ComplaintPage () { @@ -102,7 +117,7 @@ export default function ComplaintPage () { {order?.goods_name || '-'} - 已支付 ￥{order?.total_fee || '-'} + 已支付 ¥{order?.total_fee || '-'} @@ -123,18 +138,24 @@ export default function ComplaintPage () { * - {COMPLAINT_TYPES.map((item) => ( - setType(item.value)} - > - - {TYPE_ICONS[item.value]} + {COMPLAINT_TYPES.map((item) => { + const selected = type === item.value + const icon = TYPE_ICONS[item.value] + return ( + setType(item.value)} + > + + {item.label} - {item.label} - - ))} + ) + })} @@ -149,6 +170,7 @@ export default function ComplaintPage () { maxlength={200} placeholder='请描述您遇到的问题' placeholderClass='complaint-placeholder' + disableDefaultPadding value={content} onInput={(event) => setContent(event.detail.value.slice(0, 200))} /> @@ -165,12 +187,11 @@ export default function ComplaintPage () { {images.map((image, index) => ( - setImages((current) => current.filter((_, itemIndex) => itemIndex !== index))} - > - × - + /> ))} {images.length < 5 ? ( diff --git a/src/pages/index/contact.tsx b/src/pages/index/contact.tsx index d441391..1d8364d 100644 --- a/src/pages/index/contact.tsx +++ b/src/pages/index/contact.tsx @@ -1,6 +1,7 @@ import { Image, Text, View } from '@tarojs/components' import Taro from '@tarojs/taro' import { useEffect, useState } from 'react' +import { LOCAL_IMAGES } from '@/lib/assets' import { CORP_ASSET_BASE, MAP_ASSET_BASE } from '@/lib/cdn' import { getWeixinContactAction, selectServiceWeixinLink, type ServiceContact } from '@/lib/contact' import WeixinQrImage from './weixin-qr' @@ -120,7 +121,7 @@ export default function ContactModal ({ open, contact, onCancel }: Props) { export function ContactFab ({ onClick }: { onClick: () => void }) { return ( - + 客服 ) diff --git a/src/pages/resubmit/index.scss b/src/pages/resubmit/index.scss index 900fc26..2cc7ade 100644 --- a/src/pages/resubmit/index.scss +++ b/src/pages/resubmit/index.scss @@ -106,15 +106,46 @@ line-height: 36px; } -.resubmit__shot { +.resubmit__shots { + display: flex; + align-items: flex-start; +} + +.resubmit__shot, +.resubmit__example { position: relative; - width: 240px; - height: 180px; + width: 292px; + height: 200px; overflow: hidden; border-radius: 16px; background: #fff; } +.resubmit__example { + margin-left: 20px; + flex-shrink: 0; +} + +.resubmit__example-image { + width: 100%; + height: 100%; +} + +.resubmit__example-caption { + position: absolute; + right: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + height: 48px; + color: #fff; + font-size: 24px; + line-height: 48px; + background: rgba(0, 0, 0, 0.55); +} + .resubmit__shot--empty { display: flex; flex-direction: column; diff --git a/src/pages/resubmit/index.tsx b/src/pages/resubmit/index.tsx index 8b707f2..95b6141 100644 --- a/src/pages/resubmit/index.tsx +++ b/src/pages/resubmit/index.tsx @@ -26,6 +26,11 @@ import { consumeMapPickerResult } from '@/pages/map/picker' import './index.scss' const STOREFRONT_LABELS = ['门头正面', '门头左面', '门头右面'] +const STOREFRONT_EXAMPLES = [ + LOCAL_IMAGES.exampleStorefrontFront, + LOCAL_IMAGES.exampleStorefrontRight, + LOCAL_IMAGES.exampleStorefrontLeft, +] const DISCLAIMER_BODY = '我们只是代客户提交商户、企业位置资料，不是地图标注平台方，所提供服务为商业有偿帮助咨询服务，全程都是人工提交资料，自身并不能对第三方网站的原始内容进行编辑，请知悉。' @@ -316,23 +321,46 @@ export default function ResubmitPage () { {STOREFRONT_LABELS.map((label, index) => ( - void handleUpload(`storefront${index}` as 'storefront0' | 'storefront1' | 'storefront2', filePath)} - /> + + void handleUpload(`storefront${index}` as 'storefront0' | 'storefront1' | 'storefront2', filePath)} + /> + {storefrontSlots[index] ? null : ( + + + + 示例 + + + )} + ))} - void handleUpload('license', filePath)} - /> + + void handleUpload('license', filePath)} + /> + {licenseImages[0] ? null : ( + + )} +