静态页面

src/pages/WuYe/TianJiaBaoXiu/index.jsx

@@ -11,7 +11,8 @@ export default function WuYeTianJiaBaoXiu () {
   const [Title, setTitle] = useState('')
   const [Desc, setDesc] = useState('')
   const [DataLock, setDataLock] = useState(false)
-  const CurrnetBaoXiuType = Current.router.params.type
+  const [CurrnetBaoXiuType] = useState(Current.router.params.type)
+  const [PhotoUrl, setPhotoUrl] = useState(null)
 
   const TitleChange = (e) => {
     setTitle(e.detail.value)
@@ -42,7 +43,8 @@ export default function WuYeTianJiaBaoXiu () {
         ticketTitle: Title,
         ticketContent: Desc,
         type: 2,
-        repairType: CurrnetBaoXiuType - 0
+        repairType: [CurrnetBaoXiuType] - 0,
+        imageUrl: PhotoUrl
       }
     }).then((res) => {
       Taro.showToast({ title: '报修提交成功', icon: 'none' })
@@ -60,11 +62,25 @@ export default function WuYeTianJiaBaoXiu () {
       sizeType: ['compressed'],
       sourceType: ['album', 'camera'],
       success: (res) => {
-        console.log(res)
+        const tempFilePaths = res.tempFilePaths
+        Taro.uploadFile({
+          url: apis.uploadImage.url,
+          filePath: tempFilePaths[0],
+          name: 'file',
+          formData: { user: 'upload' },
+          header: { 'x-action': 'miniapp', 'authorization': `Bearer ${Taro.getStorageSync('token')}` },
+          success: (res) => {
+            setPhotoUrl(JSON.parse(res.data).data)
+          }
+        })
       }
     })
   }
 
+  const DeleteItem = () => {
+    setPhotoUrl(null)
+  }
+
   return (
     <view className='WuYeTianJiaBaoXiu'>
       <view className='Form'>
@@ -78,9 +94,13 @@ export default function WuYeTianJiaBaoXiu () {
             <text>添加图片</text>
           </view>
         </view>
-        <view className='PhotoItem'>
-          <text className='iconfont iconshanchu'></text>
-        </view>
+        {
+          PhotoUrl !== null &&
+          <view className='PhotoItem'>
+            <text className='iconfont iconshanchu' onClick={DeleteItem}></text>
+            <image mode='aspectFit' src={PhotoUrl}></image>
+          </view>
+        }
       </view>
       <view className='Btn'>
         <text onClick={Send}>确认发送</text>

src/pages/WuYe/TianJiaBaoXiu/index.less

@@ -83,7 +83,7 @@
           z-index: 1;
         }
 
-        >text {
+        >text.iconfont {
           display: inline-block;
           position: absolute;
           z-index: 2;

src/pages/WuYe/XiuGaiBaoXiu/index.jsx

@@ -13,6 +13,7 @@ export default function WuYeXiuGaiBaoXiu () {
   const [DataLock, setDataLock] = useState(false)
   const [DetailInfo, setDetailInfo] = useState(null)
   const [CurrnetId] = useState(Current.router.params.id)
+  const [PhotoUrl, setPhotoUrl] = useState(null)
 
   useEffect(() => {
     Init()
@@ -21,6 +22,7 @@ export default function WuYeXiuGaiBaoXiu () {
   const Init = () => {
     request({ ...apis.getGongDanDetail, args: { orgId: user.orgId }, params: { ticketId: CurrnetId } }).then((res) => {
       setDetailInfo(res)
+      setPhotoUrl(res.tdImagesList !== null && res.tdImagesList.length > 0 ? res.tdImagesList[0] : null)
     })
   }
 
@@ -53,7 +55,8 @@ export default function WuYeXiuGaiBaoXiu () {
       data: {
         ticketTitle: DetailInfo.ticketTitle,
         ticketContent: DetailInfo.ticketContent,
-        type: 2
+        type: 2,
+        imageUrl: PhotoUrl
       }
     }).then((res) => {
       Taro.showToast({ title: '报修修改成功', icon: 'none' })
@@ -65,6 +68,31 @@ export default function WuYeXiuGaiBaoXiu () {
     })
   }
 
+  const AddImg = () => { // 添加图片
+    Taro.chooseImage({
+      count: 1,
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        const tempFilePaths = res.tempFilePaths
+        Taro.uploadFile({
+          url: apis.uploadImage.url,
+          filePath: tempFilePaths[0],
+          name: 'file',
+          formData: { user: 'upload' },
+          header: { 'x-action': 'miniapp', 'authorization': `Bearer ${Taro.getStorageSync('token')}` },
+          success: (res) => {
+            setPhotoUrl(JSON.parse(res.data).data)
+          }
+        })
+      }
+    })
+  }
+
+  const DeleteItem = () => {
+    setPhotoUrl(null)
+  }
+
   return (
     <view className='WuYeXiuGaiBaoXiu'>
       <view className='Form'>
@@ -72,15 +100,19 @@ export default function WuYeXiuGaiBaoXiu () {
         <Textarea placeholder='描述问题详情，以便我们更好的相处' onInput={DescChange} value={DetailInfo === null ? null : DetailInfo.ticketContent}></Textarea>
       </view>
       <view className='Photo'>
-        <view className='Add'>
+        <view className='Add' onClick={AddImg}>
           <view className='centerLabel'>
             <text className='iconfont iconxiangji'></text>
             <text>添加图片</text>
           </view>
         </view>
-        <view className='PhotoItem'>
-          <text className='iconfont iconshanchu'></text>
-        </view>
+        {
+          PhotoUrl !== null &&
+          <view className='PhotoItem'>
+            <text className='iconfont iconshanchu' onClick={DeleteItem}></text>
+            <image mode='aspectFit' src={PhotoUrl}></image>
+          </view>
+        }
       </view>
       <view className='Btn'>
         <text onClick={Send}>确认修改</text>

src/utils/api.js

@@ -1,6 +1,10 @@
 const prefix = `${HOST}/api/wx`
 
 const $api = {
+  uploadImage: { // 上传图片
+    method: 'post',
+    url: `${prefix}/image`
+  },
   getMessageList: { // 获取小区通知
     method: 'get',
     url: `${prefix}/message/:orgId/news`