flx

src/components/CompoentsOrder/OrderCard/index.jsx

 const Action = CouponCard.Action
 
 export default (props) => {
-  const { item, setShowCutover, show, sh } = props
+  const { item, setShowCutover, show, sh, kkp } = props
 
   const handleDetail = () => {
     if (item.status === 0) {
     });
   };
   const PayAction =
-    sh == '1' ? <Action.Icon icon={Refund} text='售后/退款' onClick={() => handleRefund(item)} /> :
-      item.status === 0 ? <Action.Icon icon={Pay} text='支付' onClick={handleDetail} /> :
-        item.status === 1 && item.isVerified == false ? <Action.Icon icon={QRcode} text='扫码核销' onClick={() => onWriteOff(item)} /> :
-          item.status === 2 && item.isVerified == false ? <Action.Image image={refund} /> :
-            item.status === 7 && item.isVerified == false ? <Action.Image image={Cancel} /> :
-              item.status === 9 ? <Action.Image image={Null} /> :
-                item.isVerified == true && item.isEvaluated > 0 ? <Action.Image image={Evaluated} /> :
-                  item.isVerified == true ? <Action.Icon icon={Evaluation} text='评价' onClick={() => evaluation(item)} /> : <Action.Icon icon={Evaluation} />
+    kkp == '1' ? null :
+      sh == '1' ? <Action.Icon icon={Refund} text='售后/退款' onClick={() => handleRefund(item)} /> :
+        item.status === 0 ? <Action.Icon icon={Pay} text='支付' onClick={handleDetail} /> :
+          item.status === 1 && item.isVerified == false ? <Action.Icon icon={QRcode} text='扫码核销' onClick={() => onWriteOff(item)} /> :
+            item.status === 2 && item.isVerified == false ? <Action.Image image={refund} /> :
+              item.status === 7 && item.isVerified == false ? <Action.Image image={Cancel} /> :
+                item.status === 9 ? <Action.Image image={Null} /> :
+                  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' ? <view className='OrderNumber'>订单编号：{item.orderId}</view> : null
+        sh != '1'|| kkp == '1'? <view className='OrderNumber'>订单编号：{item.orderId}</view> : null
       }
       <CouponCard action={PayAction}>
         <CouponMedia>
             image={item.poster}
             badge='food'
           />
-          <CouponMedia.Body star={item.score}>
+          <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='title-money-2'>
+                <text className={kkp == '1' ? 'shanchu' : 'title-money-2'}>
                   数量：{item.amount}张
                 </text>
               </View>

src/components/CompoentsOrder/OrderCard/style.less

     .title-money-2 {
       font-size: 20px;
       color: #333333;
+      text-decoration: line-through;
+    }
+    .shanchu{
+      font-size: 20px;
+      color: #333333;
     }
     & > text {
       display: inline-block;

src/components/CouponCard/Media/Body.jsx

 
   return (
     <View className='coupun-media_body'>
-      {enableStar && <Star score={(star).toFixed(1)} style={{ marginTop: '26rpx' }} />}      
+      {
+        star == 'ss' ? <Star score={5} style={{ marginTop: '26rpx', opacity: '0' }} /> :
+          enableStar ? <Star score={(star).toFixed(1)} style={{ marginTop: '26rpx' }} /> : null
+      }
       <View className='coupun-media_body_ctt'>
         {props.children}
       </View>

src/components/SlideView/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/SlideView/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/hotel/components/HouseManage/houseManage.jsx

     getShareMessage: () => {
       const { shareImage, roomOrderId } = shareDataRef.current
       setShowCard(false)
-      console.log(`/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}&fromType=hotel&recommender=${hotel.hotelId}`)
+      // console.log(`/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}&fromType=hotel&recommender=${hotel.hotelId}`)
       return {
         title: room.roomName,
         path: `/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}&fromType=hotel&recommender=${hotel.hotelId}`,

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

 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) => {
       {
         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

     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

               </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>

src/pages/MineUserAll/RefundMoney/CheckRefund/index.jsx

-import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
 import Taro from "@tarojs/taro";
 import { Button, Textarea, View } from "@tarojs/components";
 import formatPrice from "@/utils/formatPrice";
-import formatTime from "@/utils/formatTime";
 import { useState, useEffect } from "react";
+import OrderCard from '@/components/CompoentsOrder/OrderCard'
 import withLayout from "@/layouts";
 import { getOrderSub, refund } from "@/services/payOrder";
-import food from "@/assets/icons/ProCard/food.png";
-import ProCard_hot from "@/assets/icons/ProCard/ProCard_hot.png";
 import CustomNav from "@/components/CustomNav";
+import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
 import "./style.less";
 
 const options = [
       <view className='index-navbar'>
         <CustomNav title='售后退款' />
       </view>
-
-      <View className='box-content '>
-        <scroll-view scroll-y style='height: calc(100vh - 65px);' >
-
-          <view className='Refund-Content-box'>
-
-            <view className='title-image'>
-              <image
-                mode='scaleToFill'
-                className='title-image-cup'
-                src={BlackSpot}
-              />
-              <text className='title-title-boss'>商品信息</text>
+      <View className='index-container'>
+        <View className='box-content'>
+          <scroll-view scroll-y style='height: calc(100vh - 65px);' >
+            <view className='Refund-Content-box'>
+              <view className='title-image'>
+                <image
+                  mode='scaleToFill'
+                  className='title-image-cup'
+                  src={BlackSpot}
+                />
+                <text className='title-title-boss'>商品信息</text>
+              </view>
             </view>
-          </view>
-          {/* 商品信息结束 */}
-          <view>
-            {(list || []).map((item) => {
-              return (
-                <view class='wrapper' key={item.orderId}>
-                  <view class='left-complete-one'>
-                    <image className='left-image-1' src={ProCard_hot}></image>
-                    <view className='left-viewText'>
-                      返现￥{formatPrice(item.cashback)}
-                    </view>
-                    <view className='title-image'>
-                      <image
-                        className='image-1'
-                        mode='scaleToFill'
-                        src={item.poster}
-                      ></image>
-                      <image className='image-2' src={food}></image>
-                    </view>
-                    <view className='title-content'>
-                      <view className='Pro-title'>
-                        <view className='title-text'>
-                          {item.packageDescription}
-                          <text className='title-money-2'>
-                            数量：{item.amount}张
-                          </text>
-                        </view>
-                      </view>
-                      <text className='title-money'>
-                        ￥{formatPrice(item.unitPrice)}元
-                        <text className='title-money-2'>
-                          门市价{formatPrice(item.standardPrice)}元
-                        </text>
-                      </text>
-                      <view className='title-time'>
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
-                      </view>
-                    </view>
-                  </view>
-                  <view class='right-complete-two'>
-                    <view className='right-content'></view>
-                  </view>
-                </view>
-              );
-            })}
-          </view>
-
-          {/* 卡片结束 */}
-          <view className='Refund-Content-box'>
-            <view className='title-image'>
-              <image
-                mode='scaleToFill'
-                className='title-image-cup'
-                src={BlackSpot}
-              />
-              <text className='title-title-boss'>退款原因</text>
+            {/* 商品信息结束 */}
+            <view>
+              {(list || []).map((item) => {
+                return (
+                  <OrderCard item={item} key={item.orderId} kkp='1' />
+                );
+              })}
             </view>
-            {/* 退款结束 */}
-          </view>
-          <view className='Refund-content'>
-            {options.map((x) => {
-              return (
-                <text
-                  className={`Refund-star-view${x.key} ${checkeds.indexOf(x.key) > -1
-                    ? "bg2"
-                    : `Refund-star-view${x.key}`
-                    }`}
-                  key={x.key}
-                  onClick={() => viewOK(x)}
-                >
-                  {x.title}
-                </text>
-              );
-            })}
-          </view>
-
-          <view className='Refund-Content-box'>
-            <view className='title-image'>
-              <image
-                mode='scaleToFill'
-                className='title-image-cup'
-                src={BlackSpot}
+            {/* 卡片结束 */}
+            <view className='Refund-Content-box'>
+              <view className='title-image'>
+                <image
+                  mode='scaleToFill'
+                  className='title-image-cup'
+                  src={BlackSpot}
+                />
+                <text className='title-title-boss'>退款原因</text>
+              </view>
+              {/* 退款结束 */}
+            </view>
+            <view className='Refund-content'>
+              {options.map((x) => {
+                return (
+                  <text
+                    className={`Refund-star-view1 ${checkeds.indexOf(x.key) > -1
+                      ? "bg2"
+                      : `Refund-star-view2`
+                      }`}
+                    key={x.key}
+                    onClick={() => viewOK(x)}
+                  >
+                    {x.title}
+                  </text>
+                );
+              })}
+            </view>
+            <view className='Refund-Content-box'>
+              <view className='title-image'>
+                <image
+                  mode='scaleToFill'
+                  className='title-image-cup'
+                  src={BlackSpot}
+                />
+                <text className='title-title-boss'>退款说明</text>
+              </view>
+            </view>
+            <view class='section'>
+              <Textarea
+                placeholder='请补充退款说明（选填）!'
+                onInput={(e) => setExplain(e.detail.value)}
+                confirm-type='done'
               />
-              <text className='title-title-boss'>退款说明</text>
             </view>
-          </view>
-          <view class='section'>
-            <Textarea
-              placeholder='请补充退款说明（选填）!'
-              onInput={(e) => setExplain(e.detail.value)}
-              confirm-type='done'
-            />
-          </view>
-          <view className='money-title'>
-            实付金额:{" "}
-            <text className='money-name'>{formatPrice(totalPrice.charges)}元</text>
-          </view>
-          <view className='money-title'>
-            已获返现:{" "}
-            <text className='money-name'>{formatPrice(totalPrice.cashback)}元</text>
-          </view>
-          <view className='money-title'>
-            退款金额:{" "}
-            <text className='money-name'>{formatPrice(totalPrice.refundPrice)}元</text>
-          </view>
-          <view className='ul-li-text'>
-            <view className='ul-li-view'></view>
-            <text className='ul-li-textname'>退款金额不可修改；</text>
-          </view>
-          <view className='ul-li-text'>
-            <view className='ul-li-view'></view>
-            <text className='ul-li-textname'>
-              下单获得返现金额，会在退款时被扣除；
-            </text>
-          </view>
-          <view className='ul-li-text'>
-            <view className='ul-li-view'></view>
-            <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
-          </view>
-
-          <view className='button-info'>
-            <Button className='button-box' onClick={() => onRefund()}>
-              提交申请
-            </Button>
-          </view>
-        </scroll-view>
-
+            <view className='money-title'>
+              实付金额:{" "}
+              <text className='money-name'>{formatPrice(totalPrice.charges)}元</text>
+            </view>
+            <view className='money-title'>
+              已获返现:{" "}
+              <text className='money-name'>{formatPrice(totalPrice.cashback)}元</text>
+            </view>
+            <view className='money-title'>
+              退款金额:{" "}
+              <text className='money-name'>{formatPrice(totalPrice.refundPrice)}元</text>
+            </view>
+            <view className='ul-li-text'>
+              <view className='ul-li-view'></view>
+              <text className='ul-li-textname'>退款金额不可修改</text>
+            </view>
+            <view className='ul-li-text'>
+              <view className='ul-li-view'></view>
+              <text className='ul-li-textname'>
+                下单获得返现金额，会在退款时被扣除；
+              </text>
+            </view>
+            <view className='ul-li-text'>
+              <view className='ul-li-view'></view>
+              <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
+            </view>
+            <view className='button-info'>
+              <Button className='button-box' onClick={() => onRefund()}>
+                提交申请
+              </Button>
+            </view>
+          </scroll-view>
+        </View>
       </View>
-
     </view >
   );
 });

src/pages/MineUserAll/RefundMoney/CheckRefund/style.less

 @whiteColor: #fff;
 
 .box-content {
-  padding: 0 30px;
+  margin: 0 30px;
+  height: 100%;
   .Refund-Content-box {
     .title-image {
       margin-top: 39px;
         height: 32px;
         margin-top: 10px;
         padding-right: 10px;
-        align-items: center;
       }
       .title-title-boss {
-        align-items: center;
         font-size: 32px;
         font-weight: 800;
-        color: #202020;
       }
     }
   }
 
-  .wrapper {
-    margin: auto;
-    margin-top: 40px;
-    display: flex;
-    position: relative;
-    width: calc(100% -25px);
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
-    .card-box-star {
-      position: absolute;
-      width: auto;
-      height: 44.3px;
-      position: absolute;
-      left: 200px;
-      top: 28px;
-      font-size: 20px;
-      color: @whiteColor;
-      .card-star-image {
-        padding-left: 6px;
-        width: 21px;
-        height: 21px;
-      }
-      .card-star-text {
-        padding-left: 10px;
-        font-size: 20px;
-        color: #333;
-        font-weight: 700;
-      }
-    }
-
-    .left-complete-one {
-      padding-top: 87px;
-      padding-bottom: 43px;
-      position: relative;
-      display: flex;
-      background: @whiteColor;
-      background: radial-gradient(circle at top right, transparent 15px, #fff 0)
-          top right,
-        radial-gradient(circle at bottom right, transparent 15px, #fff 0) bottom
-          right;
-      background-size: 100% 60%;
-      background-repeat: no-repeat;
-      width: 573px;
-      border-radius: 15px 0px 0px 15px;
-      align-items: center;
-      .left-image-1 {
-        width: 145px;
-        height: 44px;
-        position: absolute;
-        top: 22px;
-      }
-      .left-viewText {
-        width: auto;
-        height: 44.3px;
-        position: absolute;
-        left: 1px;
-        top: 28px;
-        font-size: 20px;
-        color: @whiteColor;
-      }
-      //图片
-      .title-image {
-        height: 144px;
-        margin-left: 20px;
-        border-radius: 24px;
-        overflow: hidden;
-        position: relative;
-
-        .image-1 {
-          width: 144px;
-          height: 144px;
-          margin: 0;
-        }
-        .image-2 {
-          width: 89px;
-          height: 34px;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-      }
-      // 商品标题
-      .title-content {
-        padding-left: 18px;
-
-        .Pro-title {
-          .title-text {
-            width: 375px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            //必须要
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            /* 多出文本省略号代替 */
-            text-align: left;
-            font-size: 24px;
-          }
-        }
-        .title-money {
-          font-size: 24px;
-          display: inline-block;
-          font-weight: 800;
-          margin: 15px auto;
-        }
-        .title-money-2 {
-          height: 19px;
-          font-size: 20px;
-          font-weight: 400;
-          color: #333333;
-          padding-left: 50px;
-          text-decoration: line-through;
-        }
-
-        .title-time {
-          font-size: 24px;
-          color: #c0c8d3;
-        }
-        .title-position-on {
-          display: flex;
-          font-size: 20px;
-          .title-position {
-            width: 18px;
-            height: 24px;
-            padding-right: 10px;
-            padding-top: 5px;
-          }
-          .title-position-image {
-            align-items: center;
-            font-size: 20px;
-            color: #333;
-          }
-          .title-on {
-            padding-top: 5px;
-            padding-left: 40px;
-            width: 21px;
-            height: 21px;
-            padding-right: 10px;
-          }
-          .title-on-text {
-            align-items: center;
-
-            font-size: 20px;
-            color: #333;
-          }
-        }
-      }
-    }
-  }
-
-  .right-complete-two {
-    background: @whiteColor;
-    background: radial-gradient(circle at top left, transparent 15px, #fff 0)
-        top left,
-      radial-gradient(circle at bottom left, transparent 15px, #fff 0) bottom
-        left;
-    background-size: 100% 60%;
-    background-repeat: no-repeat;
-    width: 129px;
-    border-radius: 0 15px 15px 0;
-    position: relative;
-    //右面部分
-    .right-content {
-      height: 120px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      .right-image {
-        width: 36px;
-        height: 36px;
-        margin: 0 auto;
-        align-items: center;
-        margin: auto;
-        padding-left: 8px;
-      }
-
-      .right-title {
-        font-weight: 700;
-        font-size: 24px;
-        padding-top: 10px;
-        text-align: center;
-      }
-    }
-  }
   .Refund-content {
-    width: 100%;
     margin-top: 45px;
     .Refund-star-view1 {
-      display: inline-block;
-      width: 295px;
-      height: 60px;
       border: 1px solid #999999;
       border-radius: 30px;
       font-size: 24px;
-      font-weight: bold;
-      color: #666666;
-      text-align: center;
-      line-height: 60px;
-    }
-    .Refund-star-view2 {
-      width: 198px;
-      height: 60px;
-      border: 1px solid #999999;
-      border-radius: 30px;
-      font-size: 24px;
-      font-weight: bold;
-      color: #666666;
-      text-align: center;
-      line-height: 60px;
       display: inline-block;
-      margin-left: 30px;
-    }
-    .Refund-star-view3 {
-      margin: 30px auto;
-      display: inline-block;
-      width: 507px;
-      height: 60px;
-      border: 1px solid #999999;
-      border-radius: 30px;
-      font-size: 24px;
-      font-weight: bold;
-      color: #666666;
-      text-align: center;
-      line-height: 60px;
-    }
-    .Refund-star-view4 {
-      display: inline-block;
-      width: 146px;
-      height: 60px;
-      background: #ffffff;
-      border-radius: 30px;
-      border: 1px solid #999999;
-      font-size: 24px;
-      font-weight: bold;
-      color: #666666;
-      text-align: center;
-      line-height: 60px;
-      margin-left: 30px;
-    }
-    .Refund-star-view5 {
-      display: inline-block;
-      width: 220px;
-      height: 60px;
-      background: #ffffff;
-      border-radius: 30px;
-      border: 1px solid #999999;
-      font-size: 24px;
       font-weight: bold;
       color: #666666;
-      text-align: center;
-      line-height: 60px;
+      padding: 18px 23px 19px 23px;
+      margin-bottom: 30px;
     }
-    .Refund-star-view6 {
-      display: inline-block;
-      width: 257px;
-      height: 60px;
-      background: #ffffff;
-      border-radius: 30px;
-      border: 1px solid #999999;
-      font-size: 24px;
-      font-weight: bold;
-      color: #666666;
-      text-align: center;
-      line-height: 60px;
-      margin-left: 30px;
+    .Refund-star-view2 {
+      margin-right: 30px;
     }
     /* 点击以后的样式 */
     .bg2 {
       color: #274190;
+      margin-right: 30px;
       border: 2px solid #274190;
     }
   }
 
   .section {
-    height: 254px;
-    background: #ffffff;
     border: 1px solid #b5b5b5;
+    font-size: 24px;
     box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
-    padding: 0 20px 0 20px;
+    padding: 30px;
     margin-top: 40px;
-    textarea {
-      padding-top: 20px;
-      font-size: 24px;
-      font-weight: 400;
-      color: #666666;
-    }
   }
 
   .money-title {
     margin: 40px 0;
-    padding-bottom: 20px;
+    padding: 30px 0;
     font-size: 30px;
     font-weight: bold;
     color: #202020;
-    background: #ffffff;
     box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.12);
+    .money-name {
+      font-size: 30px;
+      color: #ff3434;
+    }
   }
 
-  .money-name {
-    font-size: 30px;
-    font-weight: bold;
-    color: #ff3434;
-  }
   .ul-li-text {
     .ul-li-view {
       display: inline-block;
       border-radius: 50%;
     }
     .ul-li-textname {
-      display: inline-block;
-      height: 19px;
       font-size: 20px;
-      font-weight: 400;
       color: #999999;
     }
   }
 
   .button-info {
-    margin-bottom: 70px;
+    margin-bottom: 80px;
     .button-box {
-      margin: 60px 0;
-      height: 88px;
-      line-height: 88px;
-      background: #274291;
+      margin-top: 60px;
+      height: 92px;
+      line-height: 92px;
+      background: #1a3b83;
       border-radius: 12px;
       color: @whiteColor;
-      margin-bottom: 2em;
+      font-size: 30px;
+      letter-spacing: 0.1em;
     }
   }
 }

src/pages/MineUserAll/RefundMoney/style.less

 @whiteColor: #fff;
 
 .box-content {
-  padding: 0 30px;
   .View-box-Card {
-    margin: 30px 5px 0 5px;
+    margin: 30px 30px 0 30px;
     .foot {
       font-size: 28px;
       color: #c0c8d3;

src/pages/PayOrder/Card/index.jsx

 
 
 export default (props) => {
-  const { item, packageId, onMoldeOn } = props
-  // const [BuyNumber, setBuyNumber] = useState(1);
-  // const [detail, setDetail] = useState({});
-  // const [showDialog, setShowDialog] = useState(false);
-  // const ShowMoldeOn = (e) => {
-  //   if (packageId) {
-  //     setBuyNumber(e.amount || 1);
-  //     setDetail(e);
-  //     setShowDialog(true);
-  //   }
-  // };
+  const { item, onMoldeOn } = props
   return (
     <view class='wrapper-payOrder' key={item.orderId}>
       <view class='left-complete-one-payOrder'>
-        {/* <image className='left-image-1' src={ProCard_hot}></image> */}
         <view className='left-viewText-payOrder'>
           返现￥{formatPrice(item.cashback)}
         </view>
           <image className='image-2-payOrder' src={food}></image>
         </view>
         <view className='title-content-payOrder'>
-          {/* <view className='Pro-title-payOrder'> */}
           <view className='title-text-payOrder'>{item.description}</view>
-          {/* </view> */}
           <text className='title-money-payOrder'>
             ￥{formatPrice(item.actualPrice || item.unitPrice)}元
             <text className='title-money-2-payOrder'>

src/pages/PayOrder/Card/style.less

 
 .wrapper-payOrder {
   display: flex;
-  position: relative;
-  // margin-top: 600px;
-  margin: 30px auto;
-  width: calc(100% - 50px); // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-  // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
+  margin: 30px 30px 0;
   filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
-
   .left-complete-one-payOrder {
     padding-top: 87px;
     padding-bottom: 43px;
     position: relative;
     display: flex;
     background: #fff;
-
     background: radial-gradient(circle at top right, transparent 15px, #fff 0 0)
         top right,
       radial-gradient(circle at bottom right, transparent 15px, #fff 0 0) bottom
         right;
     background-size: 100% 60%;
     background-repeat: no-repeat;
-
-    width: 573px;
     border-radius: 15px 0px 0px 15px;
-    // border-radius: 12px;
-
     align-items: center;
     .left-image-1-payOrder {
       width: 145px;
       top: 22px;
     }
     .left-viewText-payOrder {
-      // background-image: url(@Image-ProCard_hot);
-      // width: 287px;
-      // width: auto;
-      // height: 44.3px;
-      // position: absolute;
-      // left: 1px;
-      // top: 28px;
-      // font-size: 24px;
-      // color: @whiteColor;
-      // font-weight: 600;
-
       background: url(../../../assets/icons/ProCard/ProCard_hot.png) no-repeat;
       background-size: 100% 100%;
       padding: 0 24px 7px 2px;
-      width: auto;
       font-size: 24px;
       line-height: 48px;
       height: 44.3px;
     //图片
     .title-image-payOrder {
       height: 144px;
+      min-width: 144px;
       margin-left: 20px;
       border-radius: 24px;
       overflow: hidden;
     }
     // 商品标题
     .title-content-payOrder {
-      // padding: 84px 0 56px 20px;
-      padding-left: 18px;
+      padding-left: 20px;
 
-      // .Pro-title {
       .title-text-payOrder {
-        width: 375px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box; //必须要
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        word-break: break-all; /* 多出文本省略号代替 */
-        text-align: left;
         font-size: 24px;
         padding-bottom: 10px;
       }
-      // }
       .title-money-payOrder {
         padding-top: 34px;
         font-size: 24px;
-        // color: red;
         font-weight: 800;
       }
       .title-money-2-payOrder {
         left;
     background-size: 100% 60%;
     background-repeat: no-repeat;
-    width: 129px;
+    min-width: 129px;
     border-radius: 0 15px 15px 0;
     position: relative;
     //右面部分
     .right-content-payOrder {
-      // width: 100px;
-      // height: 80px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      // border: 1px solid red;
-
       .right-number-payOrder {
-        width: 40px;
         font-size: 20px;
         border-radius: 4px;
         border: 2px solid #999;
-        margin: auto;
         text-align: center;
       }
-
       .right-title-payOrder {
         font-weight: 700;
         font-size: 24px;
         padding-top: 20px;
-        text-align: center;
       }
     }
   }