feats

src/components/SlideView/index.jsx

@@ -0,0 +1,97 @@
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import Taro from '@tarojs/taro';
+import { ScrollView, View, Image, Text } from '@tarojs/components';
+import deleteIcon from '@/assets/icons/landlord/delete.png';
+import './style.less'
+
+export default (props) => {
+  const { className, action, del, onDelete } = props;
+
+  const contextRef = useRef()
+  const contentHeightRef = useRef(0)
+  const [actStyle, setActStyle]= useState()
+
+  const uqClass = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
+  const classes = [className, 'slideview-wrapper', uqClass].filter(Boolean).join(' ');
+
+  const handleScrollLeft = () => {
+    if (contextRef.current) {
+      contextRef.current.scrollIntoView('.slideview-content')
+    }
+  }
+
+  const handleScrollRight = () => {
+    if (contextRef.current) {
+      contextRef.current.scrollIntoView('.slideview-actions')
+    }
+  }
+
+  const handleDelete = (e) => {
+    if (onDelete) {
+      onDelete(e)
+    }
+  }
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      Taro.createSelectorQuery()
+      .select(`.${uqClass}`)
+      .node()
+      .exec((res) => {
+        contextRef.current = res[0].node;
+      })
+    })
+  }, [])
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      // 不清楚为什么, 此处获取高度一直不准确
+      const t = setTimeout(() => {
+        Taro.createSelectorQuery()
+        .select(`.${uqClass}`)
+        .boundingClientRect()
+        .exec((res) => {
+          if (res && res[0]) {
+            const { height } = res[0]
+            if (height && height !== contentHeightRef.current) {
+              setActStyle({
+                height: `${height}px`,
+              })
+              contentHeightRef.current = height
+            }
+          }
+        })
+        clearTimeout(t)
+      }, 500)
+    })
+  })
+
+  return (
+    <ScrollView
+      className={classes}
+      upperThreshold={20}
+      lowerThreshold={20}
+      scrollX
+      scrollWithAnimation
+      enhanced
+      onScrollToUpper={handleScrollLeft}
+      onScrollToLower={handleScrollRight}
+    >
+      <View className='slideview-content'>{props.children}</View>
+      <View className='slideview-actions' style={actStyle}>
+        <View className='slideview-action'>
+          {
+            del && (
+              <View className='slideview-action_delete' onClick={handleDelete}>
+                <Image src={deleteIcon} />
+                <View>删除</View>
+              </View>
+            )
+          }
+          {action}
+        </View>
+      </View>
+    </ScrollView>
+  )
+}

src/components/SlideView/style.less

@@ -0,0 +1,46 @@
+.slideview-wrapper {
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  .slideview-content {
+    min-width: 100%;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .slideview-actions {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 20px;
+    background: #FFFFFF;
+    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 12px;
+
+    .slideview-action {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      &_delete {
+        display: block;
+        flex: none;
+        height: 74px;
+        width: 67px;
+        text-align: center;
+        padding: 10px;
+        font-size: 24px;
+        font-weight: bold;
+        color: #FF3434;
+
+        & > image {
+          width: 28px;
+          height: 30px;
+          display: block;
+          margin: 0 auto 20px;
+        }
+      }
+    }
+
+  }
+}

src/hotel/pages/components/Extend/index.jsx

@@ -4,6 +4,7 @@ import del from '@/assets/icons/landlord/delete.png'
 import Popup from '@/components/Popup'
 import { View, Text, Image, Textarea, Label, Button } from '@tarojs/components';
 import { update, deleteExtend } from '@/services/landlord'
+import SlideView from '@/components/SlideView';
 import './style.less'
 
 export default (props) => {
@@ -91,16 +92,16 @@ export default (props) => {
       {
         item.contentType == 'image' ?
           <View>
-            <mp-slideview buttons={detele} icon onbuttontap={handelDelete}>
+            <SlideView del onDelete={handelDelete}>
               <Image src={eimg} mode='widthFix' style={{ width: '100%', display: 'block' }} onClick={handerChange} />
-            </mp-slideview>
+            </SlideView>
           </View>
           :
           item.contentType == 'text' ?
             <View>
-              <mp-slideview buttons={detele} icon onbuttontap={handelDelete2}>
+              <SlideView del onDelete={handelDelete2}>
                 <View className='storezn' onClick={showText}>{content}</View>
-              </mp-slideview>
+              </SlideView>
             </View>
             : null
       }

src/hotel/pages/components/Extend/style.less

@@ -49,19 +49,19 @@
     margin-bottom: 60px;
     text-align: justify;
   }
-  .weui-slideview__btn__wrp{
-    background: #FFFFFF;
-    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    border-radius: 12px;
-    margin: 5px 5px 5px 20px;
-    height: 97%;
-    width: 67px;
-  }
-  .weui-slideview__btn{
-    width: 44px;
-    height: 44px;
-    line-height: 44px;
-  }
+  // .weui-slideview__btn__wrp{
+  //   background: #FFFFFF;
+  //   box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+  //   border-radius: 12px;
+  //   margin: 5px 5px 5px 20px;
+  //   height: 97%;
+  //   width: 67px;
+  // }
+  // .weui-slideview__btn{
+  //   width: 44px;
+  //   height: 44px;
+  //   line-height: 44px;
+  // }
   Textarea{
     height: 300px;
     width: 100%;

src/hotel/pages/landlord/addRoom/addRoom.jsx

@@ -214,16 +214,17 @@ export default withLayout((props) => {
               </mp-cell>
             </mp-cells>
             {roomId ? <>
-              <mp-cells title='其他指引'>
+              <view>
+                <view className='weui-cells__title'>其他指引</view>
                 {
                   extend == '' ? null :
-                    <mp-cell >
+                    <view>
                       {extend.map((item) => (
                         <Extend key={item.extId} item={item} setReset={setReset} />
                       ))}
-                    </mp-cell>
+                    </view>
                 }
-              </mp-cells>
+              </view>
             </> : null
             }
           </mp-form>