flx

src/components/CompoentsOrder/OrderCard/index.jsx

 import Taro from "@tarojs/taro";
 import { View, Text } from '@tarojs/components'
 import formatTime from "@/utils/formatTime";
+import SlideViewOrder from '@/components/SlideViewOrder';
+import { getOrderSub, deleteOrder } from "@/services/payOrder";
+
 import CouponCard from '@/components/CouponCard'
 import QRcode from "@/assets/icons/UserCenter/QRcode.png";
 import refund from "@/assets/icons/GuideCheck/refund.png";
 const Action = CouponCard.Action
 
 export default (props) => {
-  const { item, setShowCutover, show, sh, kkp } = props
+  const { item, setShowCutover, show, sh, kkp, handeDelete } = props
 
   const handleDetail = () => {
     if (item.status === 0) {
     }
   }
 
+
+
   //核销
   const onWriteOff = (item) => {
     Taro.scanCode({
                   item.isVerified == true && item.isEvaluated > 0 ? <Action.Image image={Evaluated} /> :
                     item.isVerified == true ? <Action.Icon icon={Evaluation} text='评价' onClick={() => evaluation(item)} /> : null
 
-
   return (
     <>
       {
-        sh != '1'|| kkp == '1'? <view className='OrderNumber'>订单编号：{item.orderId}</view> : null
+        sh != '1' || kkp == '1' ? <view className='OrderNumber'>订单编号：{item.orderId}</view> : null
       }
-      <CouponCard action={PayAction}>
-        <CouponMedia>
-          <CouponMedia.Header
-            cashback={item.cashback}
-            image={item.poster}
-            badge='food'
-          />
-          <CouponMedia.Body star={kkp == '1' ? 'ss' : item.score}>
-            <View className='orderCard'>
-              <View className='cpn-card-text'>
-                <View style={{ flex: '1' }}>{(item.packageDescription).toString().length > 25 ? (item.packageDescription).substring(0, 25) + '...' : (item.packageDescription)}</View>
-                <text className={kkp == '1' ? 'shanchu' : 'title-money-2'}>
-                  数量：{item.amount}张
-                </text>
-              </View>
-              <View className='cpn-card-text' style={{ marginTop: '10rpx' }}>
-                <Text className='cpn-card-text_mn'>￥{`${(item.unitPrice / 100)?.toFixed(2)}元`}</Text>
-              </View>
-              <View className='cpn-md-act'>
-                <view className={item.isVerified == 1 ? 'title-time' : ''}>
-                  {
-                    sh == 1 ? '有效期：' + formatTime(item.endTime, "yyyy/MM/dd") :
-                      item.isVerified == 1 ? '核销时间 :' + formatTime(item?.verifiedDate, "yyyy/MM/dd") :
-                        '有效期：' + formatTime(item?.startTime, "yyyy/MM/dd") + '-' +
-                        formatTime(item.endTime, "yyyy/MM/dd")
-                  }
-                </view>
+      <SlideViewOrder del onDelete={() => handeDelete(item)} >
+        <CouponCard action={PayAction}>
+          <CouponMedia>
+            <CouponMedia.Header
+              cashback={item.cashback}
+              image={item.poster}
+              badge='food'
+            />
+            <CouponMedia.Body star={kkp == '1' ? 'ss' : item.score}>
+              <View className='orderCard'>
+                <View className='cpn-card-text'>
+                  <View style={{ flex: '1' }}>{(item.packageDescription).toString().length > 25 ? (item.packageDescription).substring(0, 25) + '...' : (item.packageDescription)}</View>
+                  <text className={kkp == '1' ? 'shanchu' : 'title-money-2'}>
+                    数量：{item.amount}张
+                  </text>
+                </View>
+                <View className='cpn-card-text' style={{ marginTop: '10rpx' }}>
+                  <Text className='cpn-card-text_mn'>￥{`${(item.unitPrice / 100)?.toFixed(2)}元`}</Text>
+                </View>
+                <View className='cpn-md-act'>
+                  <view className={item.isVerified == 1 ? 'title-time' : ''}>
+                    {
+                      sh == 1 ? '有效期：' + formatTime(item.endTime, "yyyy/MM/dd") :
+                        item.isVerified == 1 ? '核销时间 :' + formatTime(item?.verifiedDate, "yyyy/MM/dd") :
+                          '有效期：' + formatTime(item?.startTime, "yyyy/MM/dd") + '-' +
+                          formatTime(item.endTime, "yyyy/MM/dd")
+                    }
+                  </view>
+                </View>
               </View>
-            </View>
-          </CouponMedia.Body>
-        </CouponMedia>
-      </CouponCard>
+            </CouponMedia.Body>
+          </CouponMedia>
+        </CouponCard>
+      </SlideViewOrder>
     </>
   )
 }

src/components/CompoentsOrder/complete/index.jsx

 import OrderCard from '../OrderCard'
 import "./style.less";
 import { View } from "@tarojs/components";
+import SlideViewOrder from '@/components/SlideViewOrder';
 
 
 const dict = {
                 /* 待支付 */
                 if (item.status === 0) {
                   return (
-                    <mp-slideview buttons={button} onButtontap={() => slideButtonTap(item)} icon >
-                      <view key={`${type}-${item.orderId}`}  >
-                        <OrderCard item={item} />
-                      </view>
-                    </mp-slideview>
+                    // <SlideViewOrder del onDelete={() => slideButtonTap(item)}>
+                    <view key={`${type}-${item.orderId}`}  >
+                      <OrderCard item={item} handeDelete={slideButtonTap} />
+                    </view>
+                    // </SlideViewOrder>
                   );
                 }
                 /* 已使用 */

src/components/SlideViewOrder/index.jsx

+
+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/SlideViewOrder/style.less

+.slideview-wrapper {
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  &::-webkit-scrollbar{
+    width: 0;
+    height: 0;
+    color: transparent;
+  }
+
+  .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/components/add-tips/index.wxml

   <view class='arrow' style="margin-right:{{arrowR}}px;"></view>
   <view class='body' bindtap='hidden' style="margin-right:{{bodyR}}px;">
     <image src="{{logo}}" class="logo"></image>
-    <view class="tips">选择"添加到我的小程序",使用更便捷</view>
+    <view class="tips"></view>
   </view>
 </view>

src/components/add-tips/index.wxss

   zoom: 1.5;
 }
 .tips {
+  height: 200px;
+  width: 200px;
   flex: 1;
   color: #fff;
   font-size: 20px;
   font-weight: 700;
 }
 .logo {
-  height: 42px;
-  width: 42px;
+  height: 200px;
+  width: 200px;
   border-radius: 8px;
   margin-right: 10px;
 }

src/pages/details/foodDetails/foodDetails.less

-.storeDetails{
-  background-color: #fff;  
+.storeDetails {
+  background-color: #fff;
   border-radius: 12px;
   margin-bottom: 20px;
 
-  .swiper{
+  .swiper {
     height: calc((100vw - 60px) * 0.6);
   }
-  .storeImage{
+  .storeImage {
     position: relative;
     border-radius: 22px;
     width: 100%;
     height: 100%;
-    .tpPage{
+    .tpPage {
       position: absolute;
       right: 20px;
       bottom: 20px;
       background: #000000;
-      border-radius: 16px;  
-      font-size: 24px;       
-      color: #FFFFFF;
-      padding:0 7px;
-      opacity: 0.4;  
+      border-radius: 16px;
+      font-size: 24px;
+      color: #ffffff;
+      padding: 0 7px;
+      opacity: 0.4;
       line-height: 32px;
       padding: 7px 8px 8px 7px;
-      text{
+      text {
         opacity: 0.64;
       }
     }
-  }  
-  .storeJs{
+  }
+  .storeJs {
     padding: 20px;
-    .storeName{      
-      font-size: 32px;         
+    .storeName {
+      font-size: 32px;
       font-weight: bold;
       color: #202020;
     }
-    .sprice{
+    .sprice {
       color: #202020;
-      font-size: 32px;         
+      font-size: 32px;
       font-weight: bold;
-      .t1{        
+      .t1 {
         font-size: 24px;
         padding-right: 10px;
       }
-      .bzRight{        
+      .bzRight {
         font-weight: 400;
         font-size: 24px;
         float: right;
       }
     }
-    .appraise{
+    .appraise {
       line-height: 0;
       margin-top: 28px;
       margin-bottom: 37px;
-      font-size: 24px;         
+      font-size: 24px;
       font-weight: bold;
       color: #020200;
-      .t1{
+      .t1 {
         margin-left: 10px;
       }
-      .comment{
+      .comment {
         color: #666;
       }
     }
-    .yysj{
+    .yysj {
       line-height: 0;
       font-size: 24px;
       color: #666;
-      .yysjImg{
+      .yysjImg {
         width: 26px;
         height: 26px;
         position: relative;
         padding-right: 10px;
       }
     }
-    .dpPosition{
+    .dpPosition {
       margin-top: 40px;
       position: relative;
-      .dwTip{
+      .dwTip {
         width: 28px;
         height: 28px;
         position: absolute;
         top: 4px;
-        left:0;
+        left: 0;
       }
-      view{
-        font-size: 24px;         
+      view {
+        font-size: 24px;
         color: #666666;
         padding-left: 34px;
         padding-bottom: 40px;
-        .zhuandao{
+        .zhuandao {
           width: 14px;
           height: 24px;
           transform: rotate(180deg);
           position: relative;
           left: 8px;
           top: 5px;
-        }        
+        }
       }
-      
     }
   }
 }
-.title{
+.title {
   margin: 59px 0 41px 0;
-  image{
+  image {
     width: 30px;
     height: 30px;
     position: relative;
     top: 5px;
   }
-  text{
-    font-size: 34px;       
+  text {
+    font-size: 34px;
     font-weight: bold;
     color: #202020;
     margin-left: 10px;
   }
 }
-.cs{
+.cs {
   height: 500px;
   // background: rgb(240, 142, 142);
   // background: radial-gradient(circle at top left, transparent 15px, rgb(240, 142, 142) 0) top left,
   //           radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
   //           radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
 
+  background: radial-gradient(
+        circle at 82% top,
+        transparent 15px,
+        rgb(240, 140, 140) 0
+      )
+      top,
+    radial-gradient(
+        circle at 82% bottom,
+        transparent 15px,
+        rgb(230, 120, 120) 0
+      )
+      bottom;
 
-  background: radial-gradient(circle at 82% top,transparent 15px,rgb(240,140,140) 0) top,
-              radial-gradient(circle at 82% bottom,transparent 15px,rgb(230,120,120) 0) bottom;
-
-background-repeat: no-repeat;
-background-size: auto 50%;
+  background-repeat: no-repeat;
+  background-size: auto 50%;
 }
 
-.showMore{
+.showMore {
   width: 100%;
-  background: linear-gradient(0deg, rgba(248, 248, 248, 0.58) 42%, rgba(248, 248, 248, 0) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(248, 248, 248, 0.58) 42%,
+    rgba(248, 248, 248, 0) 100%
+  );
   font-size: 28px;
   font-weight: bold;
   color: #202020;
   text-align: center;
   position: absolute;
-  bottom: -100px;
+  bottom: -140px;
   padding-top: 77px;
   padding-bottom: 20px;
-  .moreTip{
+  .moreTip {
     width: 38px;
     height: 19px;
     margin-top: 14px;
   }
 }
-.storezn{
-  font-size: 28px;    
+.storezn {
+  font-size: 28px;
   color: #202020;
   line-height: 54px;
   margin-bottom: 44px;
 }
-.storezn+image{
+.storezn + image {
   width: 100%;
   margin-bottom: 40px;
 }
 
-.botton{
-  font-size: 28px;   
-  color: #C0C8D3;
+.botton {
+  font-size: 28px;
+  color: #c0c8d3;
   line-height: 34px;
   text-align: center;
-  padding:40px 0 68px 0;
-  background-color: #F8F8F8;
+  padding: 40px 0 68px 0;
+  background-color: #f8f8f8;
 }
-.bottomTab{
-  background: #FFF;
+.bottomTab {
+  background: #fff;
   border-radius: 12px;
   column-count: 3;
-  text-align: center;  
-  .sharebtn{
+  text-align: center;
+  .sharebtn {
     position: absolute;
     width: 260px;
     opacity: 0;
   }
-  .tab{
+  .tab {
     line-height: 96px;
-    font-size: 28px;     
+    font-size: 28px;
     font-weight: bold;
     color: #202020;
-    image{
+    image {
       width: 31px;
       height: 31px;
       position: relative;
       margin-right: 12px;
     }
   }
-}
+}

src/utils/copyTxt.js

-
-export default function copyTxt(text, fn) { // 复制功能
-  if (typeof document.execCommand !== 'function') {
-    console.log('复制失败，请长按复制')
-    return
-  }
-  var dom = document.createElement('textarea')
-  dom.value = text
-  dom.setAttribute('style', 'display: block;width: 1px;height: 1px;')
-  document.body.appendChild(dom)
-  dom.select()
-  var result = document.execCommand('copy')
-  document.body.removeChild(dom)
-  if (result) {
-    console.log('复制成功')
-    typeof fn === 'function' && fn()
-    return
-  }
-  if (typeof document.createRange !== 'function') {
-    console.log('复制失败，请长按复制')
-    return
-  }
-  var range = document.createRange()
-  var div = document.createElement('div')
-  div.innerhtml = text
-  div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;')
-  document.body.appendChild(div)
-  range.selectNode(div)
-  var selection = window.getSelection()
-  console.log(selection)
-  if (selection.rangeCount > 0) {
-    selection.removeAllRanges()
-  }
-  selection.addRange(range)
-  document.execCommand('copy')
-  typeof fn === 'function' && fn()
-  console.log('复制成功')
-}