。

src/components/BadgeTag/index.jsx

 import { View, Image } from '@tarojs/components'
 import food from '@/assets/icons/ProCard/food.png'
 import glTip from '@/assets/icons/housemantj/gltip.png'
+import mjTip from '@/assets/icons/housemantj/mjtip.png'
 
 import './style.less'
 
 export default (props) => {
   const { type, top = '0px', left = '0px' } = props
 
-  const icon = type === 'food' ? food : glTip;
+  const icon = type === 'food' ||type=='shop'? food :type=='tourist'?mjTip : glTip;
 
   const style = {
     top,

src/components/BossCard/index.jsx

 import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
 import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
-
 import { getQueryString } from '@/utils/index'
 import CouponCard from '@/components/CouponCard'
 import Location from '@/components/Location'
             {(item.description).toString().length > 25 ? (item.description).substring(0, 25) + '...' : (item.description)}
           </View>
           <View className='cpn-card-text' style={{ marginTop: '10rpx' }}>
-            {/* <Text className='cpn-card-text_ms'>￥</Text> */}
             <Text className='cpn-card-text_mn'>￥{`${(item.actualPrice / 100)?.toFixed(2)}元`}</Text>
             <Text className='cpn-card-text_rm'>{`门市价${(item.standardPrice / 100)?.toFixed(2)}元`}</Text>
           </View>

src/components/BossCard/style.less

       margin-left: 8px;
     }
   }
-
-  &_ms {
-    font-size: 20px;
-    font-weight: bold;
-    color: #333333;
-  }
-
   &_mn {
     font-size: 24px;
     font-weight: bold;

src/components/CollectList/MyCollect/index.jsx

 import Taro from '@tarojs/taro'
 import useLike from "@/utils/hooks/useLike"
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import formatPrice from "@/utils/formatPrice";
 import Star from '@/components/Star/Star.jsx'
 import position from '@/assets/icons/GuideCheck/position_logo.png'
 import food from '@/assets/icons/ProCard/food.png'
 import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
 
-
-
+import CouponCard from '@/components/CouponCard'
+import Location from '@/components/Location'
 import './style.less'
 
+
+const CouponMedia = CouponCard.Media
+const Action = CouponCard.Action
 export default (props) => {
   const { item, cardNavigateTo } = props
-  // const [isSaved, toggleSave] = useSave(item.isSaved, 'shop_package', item.targetId)
   const [isLike, toggleLike] = useLike(item.isLike, 'tourist', item.targetId)
 
   const targetType = item.targetType
 
   const star = parseFloat(((item.sweetScore + item.environmentScore + item.serviceScore) / 3).toFixed(1));
+
+  const handleDetail = () => {
+    targetType=="shop_package"? Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${item.shopId}` })
+    :targetType=="tourist"?Taro.navigateTo({ url: `/pages/details/mjDetails/sceneryDetails?id=${item.targetId}` })
+    :Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${item.targetId}` })
+  }
+
+  const PayAction = <Action.Icon icon={SeeDetails} text='查看详情' onClick={handleDetail} />
+
   return (
 
     <View className='View-box-LR'>
       <View className='left-View-box'>
         {
           targetType === "shop_package" && (
-            <view class='wrapper'>
-              <view class='left-complete-one'   >
-                <image className='left-image-1' src={ProCard_hot} style={{ display: item.targetType === 'shop_package' ? '' : 'none' }} ></image>
-                <view className='left-viewText'  >
-                  返现￥{formatPrice(item.cashback)}
-                </view>
-                {/* 评分 */}
-                <view className='card-box-star' style={{ display: item.targetType === 'shop_package' ? '' : 'none' }} >
-                  <Star star={star} />
-                  <text className='card-star-text' >{star}</text>
-                </view>
-                <view className='title-image' >
-                  <image className='image-1' mode='scaleToFill' src={item.poster}></image>
-                  <image className='image-2' src={item.targetType === 'tourist' ? Attractions : food}></image>
-                </view>
-                <view className='title-content'>
-                  <view className='Pro-title'  >
-                    <view className='title-text'>{(item.title).toString().length > 25 ? (item.title).substring(0, 25) + '...' : (item.title)}</view>
-                  </view>
-                  <text className='title-money' >￥{formatPrice(item.actualPrice)}元<text className='title-money-2'>门市价{formatPrice(item.standardPrice)}元</text></text>
-                  <view className='title-position-on'>
-                    <image className='title-position' src={position} />
-                    <text className='title-position-image'>
-                      {
-                        targetType === "shop_package" && (
-                          item.areaPName == null ? item.areaName : item.areaPName + '/' + item.areaName
-                        )
-                      }
-                    </text>
-                  </view>
-                </view>
-              </view>
-              <view class='right-complete-two'>
-                <view className='right-content' onClick={() => { Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${item.shopId}` }); }}>
-                  <image className='right-image' src={SeeDetails} />
-                  <view className='right-title'>查看详情</view>
-                </view>
-              </view>
-            </view>
+            <View style={{ margin: '15px 5px' }}>
+              <CouponCard action={PayAction}>
+                <CouponMedia>
+                  <CouponMedia.Header
+                    cashback={item.cashback}
+                    image={item.poster}
+                    badge='food'
+                  />
+                  <CouponMedia.Body star={star}>
+                    <View className='cpn-card-text'>
+                      {(item.title).toString().length > 25 ? (item.title).substring(0, 25) + '...' : (item.title)}
+                    </View>
+                    <View className='cpn-card-text' style={{ marginTop: '10rpx' }}>
+                      <Text className='cpn-card-text_mn'>￥{`${(item.actualPrice / 100)?.toFixed(2)}元`}</Text>
+                      <Text className='cpn-card-text_rm'>{`门市价${(item.standardPrice / 100)?.toFixed(2)}元`}</Text>
+                    </View>
+                    <View className='cpn-md-act'>
+                      <Location {...item} />
+                    </View>
+                  </CouponMedia.Body>
+                </CouponMedia>
+              </CouponCard>
+            </View>
           )
         }
       </View>
       <View className='right-View-box'>
         {
           targetType !== "shop_package" && (
-            <view class='wrapper'>
-              <view class='left-complete-one'   >
-                <view className='title-image'>
-                  <image className='image-1' mode='scaleToFill' src={item.poster}></image>
-                  <image className='image-2' src={item.targetType === 'tourist' ? Attractions : food}></image>
-                </view>
-                <view className='title-content'>
-                  <view className='Pro-title'  >
-                    <view className='title-text'>{(item.title).toString().length > 25 ? (item.title).substring(0, 25) + '...' : (item.title)}</view>
-                  </view>
-                  <text className='title-money' >￥{formatPrice(item.averagePrice)}元</text>
-                  <view onClick={toggleLike}>
-                    <image className='title-on' src={isLike === 1 ? baozan : weibaozan} />
-                    <text className='title-on-text'>爆赞 {item.likeNum}</text>
-                  </view>
-                  <view className='title-position-on'>
-                    <image className='title-position' src={position} />
-                    <text className='title-position-image'>
 
-                      {
-                        targetType === "tourist" && (
-                          item.areaPName == null ? item.areaName : (item.areaPName + '/' + item.areaName)
-                        )
-                      }
-                      {
-                        targetType === "shop" && (
-                          item.areaPName === null ? item.areaName : (item.areaPName + '/' + item.areaName)
-                        )
-                      }</text>
-                  </view>
-                </view>
-              </view>
-              <view class='right-complete-two'>
-                <view className='right-content' onClick={() => { targetType === 'tourist' ? Taro.navigateTo({ url: `/pages/details/mjDetails/sceneryDetails?id=${item.targetId}` }) : Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${item.targetId}` }) }}>
-                  <image className='right-image' src={SeeDetails} />
-                  <view className='right-title'>查看详情</view>
-                </view>
-              </view>
-            </view>
+            <View style={{ margin: '15px 5px' }}>
+              <CouponCard action={PayAction}>
+                <CouponMedia>
+                  <CouponMedia.Header
+                    image={item.poster}
+                    badge={targetType}
+                  />
+                  <CouponMedia.Body >
+                    <View className='cpn-card-text'>
+                      {(item.title).toString().length > 25 ? (item.title).substring(0, 25) + '...' : (item.title)}
+                    </View>
+                    <View className='cpn-card-text' style={{ marginTop: '10rpx' }}>
+                      <Text className='cpn-card-text_mn'>￥{`${formatPrice(item.averagePrice)}元`}</Text>
+                    </View>
+                   
+                    <View className='cpn-md-act'> 
+                    <Location {...item} />
+
+                    <view onClick={toggleLike} className='wdscbaozan'>
+                   <image className='title-on' src={isLike === 1 ? baozan : weibaozan} />
+                   <text className='title-on-text'>爆赞 {item.likeNum}</text>
+                 </view>
+                    </View>
+                  </CouponMedia.Body>
+                </CouponMedia>
+              </CouponCard>
+            </View>
+
           )
+          // <view class='wrapper'>
+          //   <view class='left-complete-one'   >
+          //     <view className='title-image'>
+          //       <image className='image-1' mode='scaleToFill' src={item.poster}></image>
+          //       <image className='image-2' src={item.targetType === 'tourist' ? Attractions : food}></image>
+          //     </view>
+          //     <view className='title-content'>
+          //       <view className='Pro-title'  >
+          //         <view className='title-text'>{(item.title).toString().length > 25 ? (item.title).substring(0, 25) + '...' : (item.title)}</view>
+          //       </view>
+          //       <text className='title-money' >￥{formatPrice(item.averagePrice)}元</text>
+          //       <view onClick={toggleLike}>
+          //         <image className='title-on' src={isLike === 1 ? baozan : weibaozan} />
+          //         <text className='title-on-text'>爆赞 {item.likeNum}</text>
+          //       </view>
+          //       <view className='title-position-on'>
+          //         <image className='title-position' src={position} />
+          //         <text className='title-position-image'>
+          //           {
+          //             item.areaPName === null ? item.areaName : (item.areaPName + '/' + item.areaName)
+          //           }
+          //         </text>
+          //       </view>
+          //     </view>
+          //   </view>
+          //   <view class='right-complete-two'>
+          //     <view className='right-content' onClick={() => { targetType === 'tourist' ? Taro.navigateTo({ url: `/pages/details/mjDetails/sceneryDetails?id=${item.targetId}` }) : Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${item.targetId}` }) }}>
+          //       <image className='right-image' src={SeeDetails} />
+          //       <view className='right-title'>查看详情</view>
+          //     </view>
+          //   </view>
+          // </view>
+
         }
       </View>
     </View>

src/components/CollectList/MyCollect/style.less

 @whiteColor: #fff;
-// .title-on {
-//   width: 21px;
-//   height: 21px;
-//   padding-right: 10px;
-// }
-// .wrapper {
-//   margin-top: 40px;
-//   display: flex;
-//   position: relative;
-//   // margin-top: 600px;
-//   // margin: 30px auto;
-//   width: 100%;
-
-//   // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-//   // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
-//   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: 183px;
-//     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: 85px;
-//     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: 80%;
-//     border-radius: 15px 0px 0px 15px;
-//     // border-radius: 12px;
-
-//     align-items: center;
-//     .left-image-1 {
-//       width: 145px;
-//       height: 44px;
-//       position: absolute;
-//       top: 22px;
-//     }
-//     .left-viewText {
-//       // background-image: url(@Image-ProCard_hot);
-//       // width: 287px;
-//       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: 84px 0 56px 20px;
-//       padding-left: 18px;
-
-//       .Pro-title {
-//         .title-text {
-//           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 {
-//         // padding-top: 34px;
-//         font-size: 24px;
-//         // color: red;
-//         font-weight: 800;
-//       }
-//       .title-money-2 {
-//         font-size: 18px;
-//         color: rgba(102, 102, 102, 0.8);
-
-//         padding-left: 10px;
-//         text-decoration: line-through;
-//       }
-
-//       .title-time {
-//         font-size: 24px;
-//         // padding-top: 20px;
-//         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 {
-//         //   // margin-bottom: 10px;
-//         //   padding-top: 5px;
-//         //   padding-left: 40px;
-//         //   width: 21px;
-//         //   height: 21px;
-//         //   padding-right: 10px;
-//         // }
-// .title-on {
-//   width: 21px;
-//   height: 21px;
-//   padding-right: 10px;
-// }
-//         .title-on-text {
-//           align-items: center;
-
-//           font-size: 20px;
-//           color: #333;
-//         }
-//       }
-//     }
-//   }
-//   // .left-complete-one:nth-child(2) {
-//   //   background: rgb(182, 0, 0);
-//   //   padding-top: 10px;
-//   // }
-// }
-
-// .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 {
-//     // width: 50%;
-//     height: 134px;
-//     position: absolute;
-//     top: calc(50% - 45px);
-//     left: calc(50% - 30px);
-//     .right-image {
-//       width: 35px;
-//       height: 34px;
-//       margin-left: calc(50% - 41.5px);
-//     }
-
-//     .right-title {
-//       font-weight: 700;
-//       width: 110px;
-//       font-size: 24px;
-//       padding-top: 15px;
-//       text-align: center;
-//       position: relative;
-//       left: -22px;
-//     }
-//   }
-// }
-// //线条
-// .right-complete-two::after {
-//   content: "";
-//   position: absolute;
-//   top: 15px;
-//   margin: 26px auto;
-//   height: 70%;
-//   border-left: 1px dashed #595959;
-// }
-
-// .wrapper-tourist {
-//   margin-top: 40px;
-//   display: flex;
-//   position: relative;
-//   // margin-top: 600px;
-//   // margin: 30px auto;
-//   width: 100%;
-
-//   // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-//   // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
-//   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: 183px;
-//     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: 35px;
-//     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: 80%;
-//     border-radius: 15px 0px 0px 15px;
-//     // border-radius: 12px;
-
-//     align-items: center;
-//     .left-image-1 {
-//       width: 145px;
-//       height: 44px;
-//       position: absolute;
-//       top: 22px;
-//     }
-//     .left-viewText {
-//       // background-image: url(@Image-ProCard_hot);
-//       // width: 287px;
-//       width: auto;
-//       height: 44.3px;
-//       position: absolute;
-//       left: 1px;
-//       top: 28px;
-//       font-size: 20px;
-//       color: @whiteColor;
-//     }
-//     //图片
-//     .title-image {
-//       // width: 145px;
-//       // margin-left: 20px;
-//       // overflow: hidden;
-//       // position: relative;
-//       height: 144px;
-//       margin-left: 20px;
-//       border-radius: 24px;
-//       overflow: hidden;
-//       position: relative;
-//       .image-1 {
-//         // width: 100%;
-//         // height: 145px;
-//         // border-radius: 10px;
-
-//         width: 144px;
-//         height: 144px;
-//         margin: 0;
-//       }
-//       .image-2 {
-//         width: 89px;
-//         height: 34px;
-//         position: absolute;
-//         left: 0;
-//         top: 0;
-//       }
-//     }
-//     // 商品标题
-//     .title-content {
-//       // padding: 84px 0 56px 20px;
-//       padding-left: 18px;
-
-//       .Pro-title {
-//         .title-text {
-//           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 {
-//         // padding-top: 34px;
-//         font-size: 24px;
-//         // color: red;
-//         font-weight: 800;
-//       }
-//       .title-money-2 {
-//         font-size: 18px;
-//         color: rgba(102, 102, 102, 0.8);
-
-//         padding-left: 10px;
-//         text-decoration: line-through;
-//       }
-
-//       .title-time {
-//         font-size: 24px;
-//         // padding-top: 20px;
-//         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 {
-//           // margin-bottom: 10px;
-//           padding-top: 5px;
-//           padding-left: 40px;
-//           width: 21px;
-//           height: 21px;
-//           padding-right: 10px;
-//         }
-//       }
-//       .title-on-text {
-//         align-items: center;
-//         font-size: 20px;
-//         color: #333;
-//       }
-//     }
-//   }
-// }
 .View-box-LR {
+  margin: 30px 0;
   .left-View-box {
     .wrapper {
       display: flex;
     }
   }
 }
+.cpn-card-text {
+  font-size: 24px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  vertical-align: baseline;
+
+  & > text {
+    display: inline-block;
+
+    & + text {
+      margin-left: 8px;
+    }
+  }
+  &_mn {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  &_rm {
+    font-size: 18px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #666666;
+  }
+}
+
+.cpn-md-act {
+  display: flex;
+  margin-top: 10px;
+  position: relative;
+
+  & > view {
+    flex: 1;
+  }
+  .wdscbaozan{
+  .title-on {
+    width: 28px;
+    height: 28px;
+    padding-right: 10px;
+    position: relative;
+    top: 0.1em;
+  }
+  .title-on-text {
+    align-items: center;
+    font-size: 22px;
+    color: #333;
+  }
+}
+}

src/components/CouponCard/Card/style.less

 // 开孔半径
 @radius-size: 16px;
 
+// 圆角
+@border-radius: 12px;
+
 .coupon-card {
   display: flex;
   filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
-  border-radius: 12px;
+  border-radius: @border-radius;
 
   & + & {
     margin-top: 36px;
                   bottom right;
     background-size: 100% 60%;
     background-repeat: no-repeat;
+
+    border-top-left-radius: @border-radius;
+    border-bottom-left-radius: @border-radius;
   }
 
   &_action {
                   bottom left;
     background-size: 100% 60%;
     background-repeat: no-repeat;
+
+    border-top-right-radius: @border-radius;
+    border-bottom-right-radius: @border-radius;
     
     // 避开孔位置, 方便子元素居中
     // padding-left: @radius-size * 2;

src/components/CouponCard/Media/Body.jsx

 
   return (
     <View className='coupun-media_body'>
-      <Star score={(star).toFixed(1)} style={{ position: 'absolute', top: '26rpx', left: 0 }} />
+      {star?<Star score={(star).toFixed(1)} style={{ position: 'absolute', top: '26rpx', left: 0 }} />:''}      
       <View>
         {props.children}
       </View>

src/components/CouponCard/Media/Header.jsx

 
   return (
     <View className='coupun-media_header'>
-      <Cashback money={cashback} style={{ position: 'absolute', top: '10px', left: 0 }} />
+      {cashback?<Cashback money={cashback} style={{ position: 'absolute', top: '10px', left: 0 }} />:''}
       <View className='coupun-media_thumb'>
         <BadgeTag type={badge} />
         <Image src={image} />

src/components/foodCards/foodCards.jsx

 import useSave from "@/utils/hooks/useSave"
 import Taro from '@tarojs/taro'
-import Star from '@/components/Star/Star.jsx'
-import pay from '@/assets/icons/housemantj/pay.png'
-import msTip from '@/assets/icons/housemantj/foodtip.png'
-import wz from '@/assets/icons/housemantj/location.png'
-import ax from '@/assets/icons/housemantj/onlove.png'
-import good from '@/assets/icons/housemantj/touristGood.png'
+import { View, Text } from '@tarojs/components'
+import CouponCard from '@/components/CouponCard'
+import Location from '@/components/Location'
+import SaveIcon from '@/components/SaveIcon'
+import Pay from '@/assets/icons/housemantj/pay.png'
 import './style.less'
 
 
+const CouponMedia = CouponCard.Media
+const Action = CouponCard.Action
 
 //套餐卡片
 export default (props) => {
-  const { item,st,det } = props
+  const { item, st, det, editable, goshop } = props
   const { shopId } = props.item
-  const [isSaved, toggleSave] = useSave(item.isSaved, 'shop_package', item.packageId)
-
   const goFood = () => {
-    const page = Taro.getCurrentPages()
-    const currentPage = page[page.length - 1];//第一位是首页，最后一位是当前页面
-    const pagesUrl = `/${currentPage.route}`;
-    if (pagesUrl === '/pages/details/foodDetails/foodDetails') {
-
-    } else {
-      Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${shopId}` })
-
-    }
+    Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${shopId}` })
   }
+  const handlePayClick = () => {
+    Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}` })
+  }
+  const PayAction = <Action.Icon icon={Pay} text='支付' onClick={handlePayClick} />
   return (
-    <view className='foodCard'>
-      <view className='fCleft'>
-        <view className='fCleft_header'>
-          <view style={{flex:"none"}}>
-            <view className='backMoney'>
-              返现￥{(item.cashback / 100).toFixed(2)}
-            </view>
-          </view>
-          <view>
-            <view className='appraise'>
-              <Star star={st} />
-              <text className='storezf'>{st}</text>
-            </view>
-          </view>
-        </view>
-        <view className='fCleft_body'>
-          <view className='contentImg' onClick={() => { goFood() }}>
-            <image src={item.poster} className='img1'></image>
-            <image src={msTip} className='mstip'></image>
-          </view>
-          <view className='neirong'>
-            <view className='textword' onClick={() => { goFood() }} >{(item.description).toString().length > 22 ? (item.description).substring(0, 22) + '...' : (item.description)}</view>
-            <view className='jiage' onClick={() => { goFood() }} >
-              <text className='rmb' >￥</text>
-              <text className='p1'><text className='price' >{(item.actualPrice / 100).toFixed(2)}</text>元&nbsp;&nbsp;</text>
-              <text className='p2'>门市价<text className='oldprice' >{(item.standardPrice / 100).toFixed(2)}</text>元</text>
-            </view>
-            <view className='address'>
-              <image className='dw' src={wz} />
-              <text className='wz'>{det.areaName=='南京市'?det.areaName:det.areaPName+'/'+det.areaName}</text>
-              <view style={{ display: 'inline-block' }} onClick={toggleSave}>
-                <image className='star' src={isSaved > 0 ? ax : good}></image>
-                <text className='collection'>{isSaved > 0 ? '已收藏' : '加入收藏'}</text>
-              </view>
-            </view>
-          </view>
-        </view>
-      </view>
-      <view className='fCright' onClick={() => { Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}`}); }}>
-        <image src={pay} />
-        <view>支付</view>
-      </view>
-      <view className='columnLine'></view>
-    </view>
-
+    <View style={{margin:'15px 5px'}}>
+      <CouponCard action={PayAction}>
+        <CouponMedia onClick={goshop ? '' : goFood}>
+          <CouponMedia.Header
+            cashback={item.cashback}
+            image={item.poster}
+            badge='food'
+          />
+          <CouponMedia.Body star={st}>
+            <View className='cpn-card-text'>
+              {(item.description).toString().length > 25 ? (item.description).substring(0, 25) + '...' : (item.description)}
+            </View>
+            <View className='cpn-card-text' style={{ marginTop: '10rpx' }}>
+              <Text className='cpn-card-text_mn'>￥{`${(item.actualPrice / 100)?.toFixed(2)}元`}</Text>
+              <Text className='cpn-card-text_rm'>{`门市价${(item.standardPrice / 100)?.toFixed(2)}元`}</Text>
+            </View>
+            <View className='cpn-md-act'>
+              <Location {...det} />
+              <SaveIcon saved={item.isSaved > 0} targetType='shop_package' editable={editable} targetId={item.packageId} />
+            </View>
+          </CouponMedia.Body>
+        </CouponMedia>
+      </CouponCard>
+    </View>
   )
 }

src/components/foodCards/style.less

-.foodCard{
-  background: #FFF;
-  border-radius: 12px;
-  position: relative;
-  margin: 15px 15px;
-  margin-bottom: 30px;
-  overflow: hidden;
-  // filter: drop-shadow(0px 6px 13px rgba(0, 0, 0, 0.12));
-  // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-  background: radial-gradient(circle at 82% top,transparent 20px,#fff 0) top,
-              radial-gradient(circle at 82% bottom,transparent 20px,#fff 0) bottom;
-  background-repeat: no-repeat;
-  background-size: 100% 50%;
-  box-sizing: border-box;
-  display: flex;
-
-  .fCleft{
-    flex: auto;
+.cpn-card-text {
+  font-size: 24px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  vertical-align: baseline;
 
-    &_header {
-      display: flex;
-      margin: 22px 0;
+  & > text {
+    display: inline-block;
 
-      & > view {
-        flex: 1;
-      }
-    }
-
-    &_body {
-      display: flex;
-      padding: 0 20px 43px 20px;
-    }
-    
-    .backMoney{
-      display: inline-block;
-
-      font-size: 24px;
-      font-weight: bold;
-      color: #FFF;     
-      padding: 12px 30px 9px 1em;
-      background:url('../../assets/icons/housemantj/fximg.png') no-repeat;
-      background-size: 100% 100%;
+    & + text {
+      margin-left: 8px;
     }
+  }
+  &_mn {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333333;
+  }
 
-    .appraise {
-      display: inline-block;
-      image{
-        width: 21px;
-        height: 21px;
-        margin-right: 10px;
-      }
-      text{
-        font-size: 24px;           
-        font-weight: bold;
-        color: #020200;
-      }
-    }
+  &_rm {
+    font-size: 18px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #666666;
+  }
+}
 
-    .contentImg{
-      flex: none;
-      position: relative;
-      width: 144px;
-      
-      .img1{
-        width: 144px;
-        height: 144px;
-        border-radius: 24px;
-      }
-      .mstip{
-          width:99px;
-          height:37px;
-          position: absolute;
-          left: 0;          
-      }
-    }
-    .neirong{
-      flex: auto;
-      margin-left: 1em;
+.cpn-md-act {
+  display: flex;
+  margin-top: 10px;
 
-      .textword{
-        font-size: 24px;           
-        color: #333;
-        margin: 0 21px 0 0;
-        height: 84px;
-      }
-      .jiage{
-        line-height: 20px;
-        font-weight: bold;
-        color: #333;
-        .rmb{
-          font-size: 24px;             
-          margin-right:8px;
-        }
-        .p1{
-          font-size: 24px;     
-        }
-        .p2{
-          font-size: 18px;             
-          text-decoration: line-through;
-          opacity: 0.8;
-          font-weight: 400;
-          color: #666;
-        }
-      }
-      .address{
-        line-height: 0;
-        margin-top: 18px;
-        .dw{
-          width: 16px;
-          height: 20px;
-          position: relative;
-          top:3px;
-          margin-right: 10px;
-        }
-        .wz{
-          font-size: 20px;             
-          color: #333;
-        }
-        .star{
-          width: 21px;
-          height: 21px;
-          margin: 0 10px 0 40px;
-          position: relative;
-          top: 3px;
-        }
-        .collection{
-          font-size: 20px;             
-          color: #333333;
-        }
-      }
-    }
-  }
-  .fCright{
-    flex: none;
-    width: 18%;
-    line-height: 0;
-    image{
-      display: block;
-      width:35px;
-      height:32px;
-      margin: 0 auto;
-      margin-top: 100%;
-    }
-    view{
-      font-size: 24px;
-      line-height: 23px;
-      font-weight: bold;
-      color: #202020;
-      margin-top: 19px;
-      text-align: center;
-    }
-  }
-  .columnLine{
-    flex: none;
-    width: 1px;
-    height: 50%;
-    border-right: 2px dashed #595959;
-    opacity: 0.12;
-    position: absolute;
-    right: 18%;
-    bottom: 25%;
+  & > view {
+    flex: 1;
   }
 }

src/pages/details/foodDetails/foodDetails.jsx

                     <text>返现套餐</text>
                   </view>
                   {(spackage || []).map((item) => (
-                    <Cards key={item.packageId} st={star} item={item} det={detail} />
+                    <Cards key={item.packageId} editable='1' st={star} goshop='1' item={item} det={detail} />
                   ))}
                   <view
                     className='showMore'

src/pages/details/mjDetails/sceneryDetails.jsx

             <view className='title'>
               <image src={titlems} />老板推荐好吃的
             </view>
-
             {(recommend || []).map((item) => <Cards item={item} det={item} st={parseFloat(item.score.toFixed(1))} />)}
           </view>
           <view className='bottom'>这是我的底线</view>

src/pages/details/mjDetails/sceneryDetails.less

   color: #202020;
   text-align: center;
   position: absolute;
-  bottom: -100px;
+  bottom: -130px;
   padding-top: 77px;
   padding-bottom: 20px;
   .moreTip{