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

【【领取色卡】快速备注文案】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000958
2023-03-23 16:36:05 +08:00 · 2023-03-23 16:36:05 +08:00 · 7afb11bc74
commit 7afb11bc74
parent ef0a52f658
8 changed files with 194 additions and 107 deletions
--- a/project.private.config.json
+++ b/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
        }
      ]
    }
--- a/src/pages/customerEditor/index.tsx
+++ b/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>
--- a/src/pages/getColorCard/addColorCard/index.tsx
+++ b/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>
 }
--- a/src/pages/orderDetails/components/remark/index.module.scss
+++ b/src/pages/orderDetails/components/remark/index.module.scss
@ -1,48 +1,62 @@
-.order_popup{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px 0;
-    .order_popup_title{
-        color: $font_size_big;
-        font-weight: 700;
-        color: #000000;
-        padding-bottom: 20px;
-    }               
-    .order_popup_input{
-        width: 100%;
-        padding: 0 25px;
-        box-sizing: border-box;
-        margin-top: 43px;
-        position: relative;
-        .descDataNum{
-            position: absolute;
-            right: 40px;
-            bottom: 10px;
-            height: 39px;
-            font-size: $font_size_medium;
-            color: $color_font_two;
-        }
-        textarea{
-            background-color: #f3f3f3;
-            border-radius: 10px;
-            width: 100%;
-            height: 313px;
-            padding: 20px;
-            padding-bottom: 50px;
-            box-sizing: border-box;
-            font-size: $font_size;
-            border: 2px solid #e6e6e6;
-        }
+.order_popup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+  .order_popup_title {
+    color: $font_size_big;
+    font-weight: 700;
+    color: #000000;
+    padding-bottom: 20px;
+  }
+  .order_popup_input {
+    width: 100%;
+    padding: 0 25px;
+    box-sizing: border-box;
+    margin-top: 43px;
+    position: relative;
+    .descDataNum {
+      position: absolute;
+      right: 40px;
+      bottom: 10px;
+      height: 39px;
+      font-size: $font_size_medium;
+      color: $color_font_two;
    }
-    .order_save_address{
-        height: 82px;
-        background: #007aff;
-        border-radius: 40px;
-        width: 668px;
-        text-align: center;
-        line-height: 82px;
-        color: #fff;
-        margin-top: 60px;
-    }       
-}
+
+    textarea {
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      width: 100%;
+      height: 313px;
+      padding: 20px;
+      padding-bottom: 50px;
+      box-sizing: border-box;
+      font-size: $font_size;
+      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;
+    border-radius: 40px;
+    width: 668px;
+    text-align: center;
+    line-height: 82px;
+    color: #fff;
+    margin-top: 60px;
+  }
+}
--- a/src/pages/orderDetails/components/remark/index.tsx
+++ b/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>
-      {
-        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 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>
  )
--- a/src/pages/sampleCutting/addSampleCutting/index.tsx
+++ b/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>
 }
--- a/src/pages/submitOrder/index.tsx
+++ b/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>
  )
--- a/src/pages/takeDelivery/components/remark/index.module.scss
+++ b/src/pages/takeDelivery/components/remark/index.module.scss
@ -1,48 +1,48 @@
-.order_popup{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px 0;
-    .order_popup_title{
-        color: $font_size_big;
-        font-weight: 700;
-        color: #000000;
-        padding-bottom: 20px;
-    }               
-    .order_popup_input{
-        width: 100%;
-        padding: 0 25px;
-        box-sizing: border-box;
-        margin-top: 43px;
-        position: relative;
-        .descDataNum{
-            position: absolute;
-            right: 40px;
-            bottom: 10px;
-            height: 39px;
-            font-size: $font_size_medium;
-            color: $color_font_two;
-        }
-        textarea{
-            background-color: #f3f3f3;
-            border-radius: 10px;
-            width: 100%;
-            height: 313px;
-            padding: 20px;
-            padding-bottom: 50px;
-            box-sizing: border-box;
-            font-size: $font_size;
-            border: 2px solid #e6e6e6;
-        }
+.order_popup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+  .order_popup_title {
+    color: $font_size_big;
+    font-weight: 700;
+    color: #000000;
+    padding-bottom: 20px;
+  }
+  .order_popup_input {
+    width: 100%;
+    padding: 0 25px;
+    box-sizing: border-box;
+    margin-top: 43px;
+    position: relative;
+    .descDataNum {
+      position: absolute;
+      right: 40px;
+      bottom: 10px;
+      height: 39px;
+      font-size: $font_size_medium;
+      color: $color_font_two;
    }
-    .order_save_address{
-        height: 82px;
-        background: #007aff;
-        border-radius: 40px;
-        width: 668px;
-        text-align: center;
-        line-height: 82px;
-        color: #fff;
-        margin-top: 60px;
-    }       
-}
+    textarea {
+      background-color: white;
+      border-radius: 10px;
+      width: 100%;
+      height: 313px;
+      padding: 20px;
+      padding-bottom: 50px;
+      box-sizing: border-box;
+      font-size: $font_size;
+      border: 2px solid #e6e6e6;
+    }
+  }
+  .order_save_address {
+    height: 82px;
+    background: #007aff;
+    border-radius: 40px;
+    width: 668px;
+    text-align: center;
+    line-height: 82px;
+    color: #fff;
+    margin-top: 60px;
+  }
+}