✨ feat(ID1000958): 【领取色卡】快速备注文案

【【领取色卡】快速备注文案】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000958

project.private.config.json

@@ -142,6 +142,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/submitOrder/index",
+          "query": "purchaser_id=1861&sale_mode=0&shopping_cart_product_color_list=%5B75615%5D&purchaser_name=%E5%93%88%E5%96%BD",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

src/pages/customerEditor/index.tsx

@@ -5,7 +5,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
 import classnames from 'classnames'
 import Remark from '../orderDetails/components/remark'
 import styles from './index.module.scss'
-import Form from './components/form'
+import Form from './components/Form'
 import Popup from '@/components/popup'
 import { debounce } from '@/common/util'
 import { alert, goLink } from '@/common/common'
@@ -370,7 +370,9 @@ const CustomerEditor = () => {
         <View className={classnames(remarkDesc === '' ? styles.remarkFontactive : styles.remarkFont)}>{remarkDesc === '' ? '尚未备注信息' : remarkDesc}</View>
       </DefaultBoxWithMemo>
       <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
-        <Remark onSave={e => getRemark(e)} defaultValue={infoObj?.remark} showInput={!!showDesc} />
+        {
+          showDesc && <Remark onSave={e => getRemark(e)} defaultValue={infoObj?.remark} />
+        }
       </Popup>
       <Address addressOnChange={val => handleSetSite(val)} defaultValue={addressArr} addressOnClose={() => onClose()} show={showSiteModal} />
       <View className={styles.safeBox}></View>

src/pages/getColorCard/addColorCard/index.tsx

@@ -382,7 +382,9 @@ const AddColorCard = () => {
 
     </View>
     <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
-      <Remark onSave={getRemark} defaultValue={remark} showInput={!!showDesc} />
+      {
+        showDesc && <Remark onSave={getRemark} defaultValue={remark} />
+      }
     </Popup>
   </View>
 }

src/pages/orderDetails/components/remark/index.module.scss

@@ -23,6 +23,7 @@
       font-size: $font_size_medium;
       color: $color_font_two;
     }
+
     textarea {
       background-color: #f3f3f3;
       border-radius: 10px;
@@ -35,6 +36,19 @@
       border: 2px solid #e6e6e6;
     }
   }
+  .recommend_remark {
+    margin: 10px 28px;
+    color: #808080;
+    font-size: 28px;
+  }
+  .recommend_remark_content {
+    margin: 0 20px;
+    .tag {
+      height: 50px;
+      margin: 0 8px;
+      margin-bottom: 10px;
+    }
+  }
   .order_save_address {
     height: 82px;
     background: #007aff;

src/pages/orderDetails/components/remark/index.tsx

@@ -2,14 +2,57 @@ import { Textarea, View } from '@tarojs/components'
 import { useCallback, useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import Popup from '@/components/popup'
+import Tag from '@/components/tag'
 
 interface Param {
   onBlur?: (val: any) => void
   onSave?: (val: string) => void
   defaultValue?: string
-  showInput: boolean
 }
-const Remark = ({ onBlur, onSave, defaultValue = '', showInput = false }: Param) => {
+const recommendReport = [
+  {
+    id: 1,
+    value: '拿色片',
+  },
+  {
+    id: 2,
+    value: '顺丰',
+  },
+  {
+    id: 3,
+    value: '客户自提',
+  },
+  {
+    id: 4,
+    value: '加急一下',
+  },
+  {
+    id: 5,
+    value: '物流到',
+  },
+  {
+    id: 6,
+    value: '中台秀银',
+  },
+  {
+    id: 7,
+    value: '中台晓茵',
+  },
+  {
+    id: 8,
+    value: '中台淑婷',
+  },
+  {
+    id: 9,
+    value: '中台结慧',
+  },
+  {
+    id: 10,
+    value: '辛苦了',
+  },
+]
+
+const Remark = ({ onBlur, onSave, defaultValue = '' }: Param) => {
   const [descData, setDescData] = useState({
     number: 0,
     value: '',
@@ -30,16 +73,31 @@ const Remark = ({ onBlur, onSave, defaultValue = '', showInput = false }: Param)
   useEffect(() => {
     getDesc(defaultValue)
   }, [defaultValue])
+
+  const onClickTag = (item) => {
+    setDescData(prev => ({
+      ...prev,
+      value: prev.value + item.value,
+    }))
+  }
+
   return (
     <View className={styles.order_popup}>
       <View className={styles.order_popup_title}>编辑备注</View>
-      {
+      <View className={styles.order_popup_input}>
-        showInput && <View className={styles.order_popup_input}>
         <Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={e => getDesc(e.detail.value)} onBlur={e => onBlur?.(e)}></Textarea>
         <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
       </View>
+      <View>
+        <View className={styles.recommend_remark}>推荐备注</View>
+        <View className={styles.recommend_remark_content}>
+          {
+            recommendReport.map((item) => {
+              return <Tag type="info" plain onClick={() => onClickTag(item)} circle customClassName={styles.tag} key={item.id}>{item.value}</Tag>
+            })
           }
-
+        </View>
+      </View>
       <View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
     </View>
   )

src/pages/sampleCutting/addSampleCutting/index.tsx

@@ -450,7 +450,9 @@ const AddColorCard = () => {
 
     </View>
     <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
-      <Remark onSave={getRemark} defaultValue={remark} showInput={!!showDesc} />
+      {
+        showDesc && <Remark onSave={getRemark} defaultValue={remark} />
+      }
     </Popup>
   </View>
 }

src/pages/submitOrder/index.tsx

@@ -517,7 +517,9 @@ const SubmitOrder = () => {
       </View>
 
       <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
-        <Remark onSave={e => getRemark(e)} defaultValue={infoObj.remark} showInput={!!showDesc} />
+        {
+          showDesc && <Remark onSave={e => getRemark(e)} defaultValue={infoObj.remark} />
+        }
       </Popup>
     </View>
   )

src/pages/takeDelivery/components/remark/index.module.scss

@@ -24,7 +24,7 @@
       color: $color_font_two;
     }
     textarea {
-            background-color: #f3f3f3;
+      background-color: white;
       border-radius: 10px;
       width: 100%;
       height: 313px;