ud

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,

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', () => {
+  it('joins three slots and writes 0 for empty ones', () => {
-    expect(joinStorefrontSlots([front, left, null])).toBe('123,45,null')
+    expect(joinStorefrontSlots([front, left, null])).toBe('123,45,0')
-    expect(joinStorefrontSlots([front, null, null])).toBe('123,null,null')
+    expect(joinStorefrontSlots([front, null, null])).toBe('123,0,0')
-    expect(joinStorefrontSlots([null, null, null])).toBe('null,null,null')
+    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',
       },
     })

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<StorefrontSlot | undefined> = []) {
   return [0, 1, 2].map((index) => {
     const id = slots[index]?.id?.trim()
-    return id ? id : 'null'
+    return id ? id : '0'
   }).join(',')
 }
 

src/pages/complaint/index.config.ts

@@ -3,4 +3,6 @@ export default definePageConfig({
   navigationBarBackgroundColor: '#00C261',
   navigationBarTextStyle: 'white',
   backgroundColor: '#F6F8FC',
+  backgroundColorTop: '#00C261',
+  backgroundColorBottom: '#F6F8FC',
 })

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;
+  color: #ffffff;
-  font-size: 26px;
+  font-size: 28px;
-  line-height: 44px;
+  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;
+  width: 120px;
-  color: rgba(255, 255, 255, 0.85);
+  margin-right: 24px;
-  font-size: 24px;
+  color: rgba(255, 255, 255, 0.7);
-  line-height: 36px;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 40px;
 }
 
 .complaint-hero__meta-value {
   flex: 1;
   min-width: 0;
-  color: #fff;
+  color: #ffffff;
-  font-size: 24px;
+  font-size: 28px;
-  line-height: 36px;
+  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;
+  color: #1a1a1a;
-  font-size: 30px;
+  font-size: 28px;
-  font-weight: 700;
+  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;
+  justify-content: space-between;
-  border-radius: 24px;
+  align-content: space-between;
-  background: #fff;
+  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);
+  justify-content: center;
-  margin: 8px;
+  width: calc(50% - 12px);
-  padding: 20px 16px;
+  min-width: 256px;
-  border: 2px solid #e5e6eb;
+  height: 92px;
-  border-radius: 16px;
+  padding: 0 12px;
-  background: #fff;
+  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;
+  flex-shrink: 0;
-  background: #f2f3f5;
-  color: #4e5969;
-  font-size: 22px;
-  font-weight: 700;
-}
-
-.complaint-type--active .complaint-type__icon {
-  background: #e8f3ff;
-  color: #165dff;
 }
 
 .complaint-type__text {
-  flex: 1;
+  color: #222222;
-  min-width: 0;
+  font-size: 30px;
-  color: #1d2129;
+  font-weight: 400;
-  font-size: 26px;
+  line-height: 44px;
-  line-height: 36px;
+  white-space: nowrap;
-}
-
-.complaint-type--active .complaint-type__text {
-  color: #165dff;
 }
 
 .complaint-textarea {
   position: relative;
   box-sizing: border-box;
-  min-height: 280px;
+  width: 100%;
-  padding: 20px 24px 48px;
+  height: 284px;
-  border-radius: 20px;
+  padding: 24px 24px 48px;
-  background: #fff;
+  border-radius: 32px;
+  background: #ffffff;
+  box-shadow: 0 0 20px 0 rgba(0, 78, 206, 0.1);
 }
 
 .complaint-textarea__input {
   width: 100%;
-  height: 220px;
+  height: 200px;
-  color: #1d2129;
+  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;
+  box-sizing: border-box;
-  height: 160px;
+  width: 200px;
+  height: 200px;
   margin: 0 16px 16px 0;
   overflow: hidden;
-  border-radius: 16px;
+  border-radius: 20px;
-  background: #fff;
+  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__image {
-.complaint-upload__camera {
   width: 100%;
   height: 100%;
 }
 
 .complaint-upload__camera {
-  width: 56px;
+  width: 64px;
-  height: 56px;
+  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;
+  border-radius: 20px;
-  background: #fff;
+  background: #ffffff;
+  box-shadow: 0 0 20px 0 rgba(0, 78, 206, 0.1);
 }
 
 .complaint-contact__input {
   flex: 1;
   min-width: 0;
-  height: 88px;
+  height: 100px;
-  color: #1d2129;
+  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;
 }
 

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<string, string> = {
+const TYPE_ICONS: Record<ComplaintType, { idle: string, active: string }> = {
-  莫名扣费: '¥',
+  莫名扣费: {
-  超过7天未解决: '7',
+    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 () {
       <View className='complaint-hero'>
         <View className='complaint-hero__row'>
           <Text className='complaint-hero__name'>{order?.goods_name || '-'}</Text>
-          <Text className='complaint-hero__paid'>已支付 ￥{order?.total_fee || '-'}</Text>
+          <Text className='complaint-hero__paid'>已支付 ¥{order?.total_fee || '-'}</Text>
         </View>
         <View className='complaint-hero__meta'>
           <View className='complaint-hero__meta-row'>
@@ -123,18 +138,24 @@ export default function ComplaintPage () {
             <Text className='complaint-label__required'>*</Text>
           </View>
           <View className='complaint-types'>
-            {COMPLAINT_TYPES.map((item) => (
+            {COMPLAINT_TYPES.map((item) => {
+              const selected = type === item.value
+              const icon = TYPE_ICONS[item.value]
+              return (
                 <View
                   key={item.value}
-                className={`complaint-type ${type === item.value ? 'complaint-type--active' : ''}`}
+                  className={`complaint-type ${selected ? 'complaint-type--active' : ''}`}
                   onClick={() => setType(item.value)}
                 >
-                <View className='complaint-type__icon'>
+                  <Image
-                  <Text>{TYPE_ICONS[item.value]}</Text>
+                    className='complaint-type__icon'
-                </View>
+                    src={selected ? icon.active : icon.idle}
+                    mode='aspectFit'
+                  />
                   <Text className='complaint-type__text'>{item.label}</Text>
                 </View>
-            ))}
+              )
+            })}
           </View>
         </View>
 
@@ -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) => (
               <View className='complaint-upload' key={`${image.id}-${index}`}>
                 <Image className='complaint-upload__image' src={image.preview || image.url} mode='aspectFill' />
-                <View
+                <Image
                   className='complaint-upload__remove'
+                  src={LOCAL_IMAGES.close}
                   onClick={() => setImages((current) => current.filter((_, itemIndex) => itemIndex !== index))}
-                >
+                />
-                  <Text className='complaint-upload__remove-text'>×</Text>
-                </View>
               </View>
             ))}
             {images.length < 5 ? (

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 (
     <View className='contact-fab' onClick={onClick}>
-      <Image className='contact-fab__icon' src={`${CORP_ASSET_BASE}/images-pc/icon-contactus-service.png`} />
+      <Image className='contact-fab__icon' src={LOCAL_IMAGES.kefu} />
       <Text className='contact-fab__text'>客服</Text>
     </View>
   )

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;
+  width: 292px;
-  height: 180px;
+  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;

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) => (
           <View className='resubmit__field' key={label}>
             <FieldLabel icon={`${MAP_ASSET_BASE}/pay-success-storefront.png`} text={label} />
+            <View className='resubmit__shots'>
               <ImageSlot
                 value={storefrontSlots[index] || null}
                 uploading={uploadingField === `storefront${index}`}
                 progress={uploadProgress}
                 onChange={(filePath) => void handleUpload(`storefront${index}` as 'storefront0' | 'storefront1' | 'storefront2', filePath)}
               />
+              {storefrontSlots[index] ? null : (
+                <View className='resubmit__example'>
+                  <Image
+                    className='resubmit__example-image'
+                    src={STOREFRONT_EXAMPLES[index]}
+                    mode='aspectFill'
+                  />
+                  <View className='resubmit__example-caption'>
+                    <Text>示例</Text>
+                  </View>
+                </View>
+              )}
+            </View>
           </View>
         ))}
 
         <View className='resubmit__field'>
           <FieldLabel icon={`${MAP_ASSET_BASE}/pay-success-license.png`} text='营业执照' />
+          <View className='resubmit__shots'>
             <ImageSlot
               value={licenseImages[0] || null}
               uploading={uploadingField === 'license'}
               progress={uploadProgress}
               onChange={(filePath) => void handleUpload('license', filePath)}
             />
+            {licenseImages[0] ? null : (
+              <Image
+                className='resubmit__example'
+                src={LOCAL_IMAGES.exampleLicense}
+                mode='aspectFill'
+              />
+            )}
+          </View>
         </View>
         </View>