feats\

src/components/BadgeTag/index.jsx

@@ -5,15 +5,18 @@ import food from '@/assets/icons/ProCard/food.png'
 import './style.less'
 
 export default (props) => {
-  const { type, style } = props
+  const { type, top = '0px', left = '0px' } = props
 
-  const text = type === 'food' ? '美食' : '攻略';
   const icon = type === 'food' ? food : undefined;
 
+  const style = {
+    top,
+    left
+  }
+
   return (
     <View className='badge-tag-box' style={style}>
       <Image src={icon} className='badge-icon' />
-      <Text>{text}</Text>
     </View>
   )
 }

src/components/BadgeTag/style.less

@@ -1,20 +1,10 @@
 
 .badge-tag-box {
-  font-size: 20px;
-  font-weight: 400;
-  color: #FFFFFF;
   box-sizing: border-box;
-  padding: 8px 10px;
-  background: rgba(0, 0, 0, .2);
-  border-bottom-right-radius: 24px;
+  position: absolute;
 
   .badge-icon {
-    display: inline-block !important;
-    width: 22px !important;
-    height: 22px !important;
-  }
-
-  text {
-    margin-left: 6px;
+    width: 99px;
+    height: 36px;
   }
 }

src/components/BossCard/index.jsx

@@ -1,34 +1,21 @@
 import Taro from '@tarojs/taro'
-import { View, Image } from '@tarojs/components'
-import useSave from "@/utils/hooks/useSave"
-import { getShopDetail, getShopcity } from '@/services/home'
-import { useState, useEffect } from 'react'
-// import Star from '@/components/Star/Star.jsx'
-import position from '@/assets/icons/GuideCheck/position_logo.png'
+import { View, Text } from '@tarojs/components'
 import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
 
-import starOn from '@/assets/icons/housemantj/onlove.png'
-import starOff from '@/assets/icons/housemantj/touristGood.png'
-import food from '@/assets/icons/ProCard/food.png'
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
-
 import { getQueryString } from '@/utils/index'
 import CouponCard from '@/components/CouponCard'
-import IconAction from '@/components/CouponCard/components/IconAction'
-import Cashback from '@/components/CouponCard/components/Cashback'
-import Star from '@/components/Star'
-import BadgeTag from '@/components/BadgeTag'
+import Location from '@/components/Location'
+import SaveIcon from '@/components/SaveIcon'
 
 import './style.less'
 
+const CouponMedia = CouponCard.Media
+const Action = CouponCard.Action
+
 export default (props) => {
 
   const { item, st, taRoomContent, trackClick, det } = props
   const { shopId, packageId } = props.item
-  const [isSaved, toggleSave] = useSave(item.isSaved, 'shop_package', item.packageId)
-
-
-
 
   const goFood = () => {
     trackClick({ eventType: 'hotel_recommend_package', eventParams: getQueryString({ hotelId: taRoomContent.hotelId, shopId: shopId, packageId: packageId }) })
@@ -39,69 +26,31 @@ export default (props) => {
     Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}` })
   }
 
-  const PayAction = <IconAction icon={Pay} text='支付' onClick={handlePayClick} />
+  const PayAction = <Action.Icon icon={Pay} text='支付' onClick={handlePayClick} />
 
   return (
     <CouponCard action={PayAction}>
-      <View className='coupun-content'>
-        <View className='coupun-content_header'>
-          <Cashback money={item.cashback} style={{ position: 'absolute', top: '20rpx', left: 0 }} />
-          <View className='coupun-content_thumb'>
-            <BadgeTag type='food' style={{ position: 'absolute', top: 0, left: 0 }} />
-            <Image src={item.poster} />
+      <CouponMedia onClick={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_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>
-        </View>
-        <View className='coupun-content_body'>
-          <Star score={st} style={{ position: 'absolute', top: '26rpx', left: 0 }} />
-        </View>
-      </View>
+          <View className='cpn-md-act'>
+            <Location {...det} />
+            <SaveIcon saved={item.isSaved > 0} targetType='shop_package' targetId={item.packageId} />
+          </View>
+        </CouponMedia.Body>
+      </CouponMedia>
     </CouponCard>
   )
-
-
-  // return (
-  //   <view class='container'>
-  //     <view class='wrapper'>
-  //       <view class='left-complete-one' onClick={() => { goFood() }} >
-  //         {/* <image className='left-image-1' src={ProCard_hot}></image> */}
-  //         <view className='left-viewText'>
-  //           返现￥{(item.cashback / 100)?.toFixed(2)}
-  //         </view>
-  //         {/* 评分 */}
-  //         <view className='card-box-star'>
-  //           <Star star={st} />
-  //           <text className='card-star-text' >{st}</text>
-  //         </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.description).toString().length > 25 ? (item.description).substring(0, 25) + '...' : (item.description)}</view>
-  //           </view>
-  //           <text className='title-money' >￥{(item.actualPrice / 100)?.toFixed(2)}元<text className='title-money-2'>门市价{(item.standardPrice / 100)?.toFixed(2)}元</text></text>
-  //           <view className='title-position-on'>
-  //             <image className='title-position' src={position} />
-  //             <text className='title-position-image'>{det.areaName == '南京市' ? det.areaName : det.areaPName + '/' + det.areaName}</text>
-  //             {/* <view style={{ display: 'inline-block' }} onClick={toggleSave}>
-
-  //               <image className='title-on' src={isSaved > 0 ? starOn : starOff} />
-  //               <text className='title-on-text'>{isSaved > 0 ? '已收藏' : '加入收藏'}</text>
-  //             </view> */}
-  //           </view>
-  //         </view>
-  //       </view>
-  //       <view class='right-complete-two'>
-  //         <view className='right-content' onClick={() => { Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}` }); }}>
-  //           {/* <view className='right-number'>×1</view> */}
-  //           <image className='right-image' src={Pay} />
-  //           <view className='right-title'>支付</view>
-  //         </view>
-  //       </view>
-  //     </view>
-  //   </view>
-
-
-  // )
 }

src/components/BossCard/style.less

@@ -1,138 +1,184 @@
-@whiteColor: #fff;
-@Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
-.container {
-  width: 100%;
-  .item-center-Number {
-    width: 100%;
-    margin-top: 30px;
-    .buy-num-minus {
-      display: inline-block;
-      width: 60px;
-      height: 60px;
-      background: #ffffff;
-      border: 1px solid #999999;
-      border-radius: 8px 0px 0px 8px;
-    }
-    .buy-num-input {
-      display: inline-block;
-      width: 90px;
-      height: 60px;
-      font-size: 28px;
-      font-weight: 400;
-      color: #202020;
-      background: #ffffff;
-      border: 1px solid #999999;
-      position: relative;
-      top: 26px;
-    }
-    .buy-num-add {
-      display: inline-block;
 
-      width: 60px;
-      height: 60px;
-      background: #ffffff;
-      border: 1px solid #999999;
-      border-radius: 0px 8px 8px 0px;
+.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;
     }
   }
-  .buy-button-box {
-    width: 100%;
-    margin: 40px 0 0 0;
 
-    .button-Cancel {
-      display: inline-block;
-      width: 236px;
-      height: 78px;
-      border: 2px solid #274291;
-      font-size: 30px;
-      font-weight: bold;
-      color: #274291;
-      border-radius: 12px;
-      margin-right: 80px;
-    }
-    .button-OK {
-      display: inline-block;
+  &_ms {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333333;
+  }
 
-      width: 236px;
-      height: 78px;
-      background: #274291;
-      border-radius: 12px;
-      font-size: 30px;
-      font-weight: bold;
-      color: #ffffff;
-    }
+  &_mn {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333333;
   }
 
-  .wrapper {
-    display: flex;
-    position: relative;
-    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));
+  &_rm {
+    font-size: 18px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #666666;
+  }
+}
 
-    .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 0
-          )
-          top right,
-        radial-gradient(circle at bottom right, transparent 15px, #fff 0 0)
-          bottom right;
-      background-size: 100% 60%;
-      background-repeat: no-repeat;
+.cpn-md-act {
+  display: flex;
+  margin-top: 10px;
 
-      width: 573px;
-      border-radius: 15px 0px 0px 15px;
-      // border-radius: 12px;
+  & > view {
+    flex: 1;
+  }
+}
 
-      align-items: center;
-      .left-image-1 {
-        width: 145px;
-        height: 44px;
-        position: absolute;
-        top: 22px;
-      }
-      // @/assets/icons/ProCard/ProCard_hot.png
-      .left-viewText {
-        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;
-        position: absolute;
-        top: 20px;
-        color: @whiteColor;
-        font-weight: 600;
-      }
-      //图片
-      .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;
-        }
-      }
+
+// @whiteColor: #fff;
+// @Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
+// .container {
+//   width: 100%;
+//   .item-center-Number {
+//     width: 100%;
+//     margin-top: 30px;
+//     .buy-num-minus {
+//       display: inline-block;
+//       width: 60px;
+//       height: 60px;
+//       background: #ffffff;
+//       border: 1px solid #999999;
+//       border-radius: 8px 0px 0px 8px;
+//     }
+//     .buy-num-input {
+//       display: inline-block;
+//       width: 90px;
+//       height: 60px;
+//       font-size: 28px;
+//       font-weight: 400;
+//       color: #202020;
+//       background: #ffffff;
+//       border: 1px solid #999999;
+//       position: relative;
+//       top: 26px;
+//     }
+//     .buy-num-add {
+//       display: inline-block;
+
+//       width: 60px;
+//       height: 60px;
+//       background: #ffffff;
+//       border: 1px solid #999999;
+//       border-radius: 0px 8px 8px 0px;
+//     }
+//   }
+//   .buy-button-box {
+//     width: 100%;
+//     margin: 40px 0 0 0;
+
+//     .button-Cancel {
+//       display: inline-block;
+//       width: 236px;
+//       height: 78px;
+//       border: 2px solid #274291;
+//       font-size: 30px;
+//       font-weight: bold;
+//       color: #274291;
+//       border-radius: 12px;
+//       margin-right: 80px;
+//     }
+//     .button-OK {
+//       display: inline-block;
+
+//       width: 236px;
+//       height: 78px;
+//       background: #274291;
+//       border-radius: 12px;
+//       font-size: 30px;
+//       font-weight: bold;
+//       color: #ffffff;
+//     }
+//   }
+
+//   .wrapper {
+//     display: flex;
+//     position: relative;
+//     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));
+
+//     .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 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 {
+//         width: 145px;
+//         height: 44px;
+//         position: absolute;
+//         top: 22px;
+//       }
+//       // @/assets/icons/ProCard/ProCard_hot.png
+//       .left-viewText {
+//         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;
+//         position: absolute;
+//         top: 20px;
+//         color: @whiteColor;
+//         font-weight: 600;
+//       }
+//       //图片
+//       .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;
+//         }
+//       }
       // 商品标题
       .title-content {
         // padding: 84px 0 56px 20px;
@@ -171,89 +217,56 @@
           color: #c0c8d3;
         }
       }
-    }
-  }
-
-  .right-complete-two {
-    background: @whiteColor;
-    background: radial-gradient(circle at top left, transparent 15px, #fff 0 0)
-        top left,
-      radial-gradient(circle at bottom left, transparent 15px, #fff 0 0) bottom
-        left;
-    background-size: 100% 60%;
-    background-repeat: no-repeat;
-    width: 129px;
-    border-radius: 0 15px 15px 0;
-    position: relative;
-    //右面部分
-    .right-content {
-      // width: 100px;
-      // height: 80px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      // border: 1px solid red;
-
-      .right-number {
-        width: 40px;
-        font-size: 20px;
-        border-radius: 4px;
-        border: 2px solid #999;
-        margin: auto;
-        text-align: center;
-      }
-
-      .right-title {
-        font-weight: 700;
-        font-size: 24px;
-        padding-top: 20px;
-        text-align: center;
-      }
-    }
-  }
-  //线条
-  .right-complete-two::after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    margin: 26px auto;
-    height: 70%;
-    border-left: 1px dashed #595959;
-    opacity: 0.12;
-  }
-}
-
+//     }
+//   }
 
-.coupun-content {
-  display: flex;
-
-  &_header {
-    flex: none;
-    box-sizing: border-box;
-    width: 184px;
-    position: relative;
+//   .right-complete-two {
+//     background: @whiteColor;
+//     background: radial-gradient(circle at top left, transparent 15px, #fff 0 0)
+//         top left,
+//       radial-gradient(circle at bottom left, transparent 15px, #fff 0 0) bottom
+//         left;
+//     background-size: 100% 60%;
+//     background-repeat: no-repeat;
+//     width: 129px;
+//     border-radius: 0 15px 15px 0;
+//     position: relative;
+//     //右面部分
+//     .right-content {
+//       // width: 100px;
+//       // height: 80px;
+//       position: absolute;
+//       top: 50%;
+//       left: 50%;
+//       transform: translate(-50%, -50%);
+//       // border: 1px solid red;
 
-    padding: 78px 20px 40px;
+//       .right-number {
+//         width: 40px;
+//         font-size: 20px;
+//         border-radius: 4px;
+//         border: 2px solid #999;
+//         margin: auto;
+//         text-align: center;
+//       }
 
-    .coupun-content_thumb {
-      width: 144px;
-      height: 144px;
-      border-radius: 24px;
-      position: relative;
-      overflow: hidden;
+//       .right-title {
+//         font-weight: 700;
+//         font-size: 24px;
+//         padding-top: 20px;
+//         text-align: center;
+//       }
+//     }
+//   }
+//   //线条
+//   .right-complete-two::after {
+//     content: "";
+//     position: absolute;
+//     top: 15px;
+//     margin: 26px auto;
+//     height: 70%;
+//     border-left: 1px dashed #595959;
+//     opacity: 0.12;
+//   }
+// }
 
-      image {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    }
-  }
-
-  &_body {
-    flex: auto;
-    position: relative;
-    padding: 78px 20px 40px 0;
-  }
-}

src/components/CouponCard/components/IconAction.jsx → src/components/CouponCard/Action/IconAction.jsx

@@ -7,9 +7,16 @@ import './style.less'
 export default (props) => {
   const { icon, text, onClick } = props
 
+  const handleClick = (e) => {
+    if (onClick) {
+      e.stopPropagation()
+      onClick(e);
+    }
+  }
+
   return (
     <View className='cpn-action cpn-icon-action'>
-      <View onClick={onClick}>
+      <View onClick={handleClick}>
         <Image src={icon} />
         <Text>{text}</Text>
       </View>

src/components/CouponCard/components/ImageAction.jsx → src/components/CouponCard/Action/ImageAction.jsx

@@ -7,9 +7,16 @@ import './style.less'
 export default (props) => {
   const { image, onClick } = props
 
+  const handleClick = (e) => {
+    if (onClick) {
+      e.stopPropagation()  
+      onClick(e);
+    }
+  }
+
   return (
     <View className='cpn-action cpn-image-action'>
-      <View onClick={onClick}>
+      <View onClick={handleClick}>
         <Image src={image} />
       </View>
     </View>

src/components/CouponCard/Action/index.js

@@ -0,0 +1,10 @@
+
+import IconAction from "./IconAction";
+import ImageAction from "./ImageAction";
+
+const Action = {
+  Icon: IconAction,
+  Image: ImageAction,
+};
+
+export default Action;

src/components/CouponCard/Action/style.less

@@ -0,0 +1,39 @@
+
+.cpn-action {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > view {
+    flex: none;
+  }
+}
+
+.cpn-icon-action {
+  & > view {
+    & > image {
+      width: 36px;
+      height: 36px;
+      display: block;
+      margin: 0 auto;
+    }
+  
+    & > text {
+      margin-top: 20px;
+      display: inline-block;
+      font-size: 24px;
+      font-weight: bold;
+      color: #202020;
+      line-height: 1.4em;
+    }
+  }
+}
+
+.cpn-image-action {
+  & > image {
+    width: 72px;
+    height: 72px;
+    display: block;
+  }
+}

src/components/CouponCard/Card/index.jsx

@@ -0,0 +1,18 @@
+
+import React from 'react'
+import { View } from '@tarojs/components'
+
+import './style.less'
+
+export default (props) => {
+  const { action = null, onClick } = props
+
+  return (
+    <View className='coupon-card'>
+      <View className='coupon-card_body' onClick={onClick}>
+        {props.children}
+      </View>
+      <View className='coupon-card_action'>{action}</View>
+    </View>
+  )
+}

src/components/CouponCard/style.less → src/components/CouponCard/Card/style.less

@@ -53,14 +53,3 @@
     }
   }
 }
-
-.cpn-action {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > view {
-    flex: none;
-  }
-}

src/components/CouponCard/components/Cashback.jsx → src/components/CouponCard/Cashback/index.jsx

@@ -1,6 +1,7 @@
 
 import React from 'react'
 import { View, Text } from '@tarojs/components'
+import './style.less'
 
 export default (props) => {
   const { money, prefix = '返现', style } = props

src/components/CouponCard/Cashback/style.less

@@ -0,0 +1,10 @@
+
+.cpn_cashback {
+  box-sizing: border-box;
+  background: url('~@/assets/icons/ProCard/ProCard_hot.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 16px 25px 10px 10px;
+  font-size: 20px;
+  color: #fff;
+  line-height: 1em;
+}

src/components/CouponCard/Media/Body.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import Star from '@/components/Star'
+import './style.less'
+
+export default (props) => {
+  const { star } = props
+
+  return (
+    <View className='coupun-media_body'>
+      <Star score={star} style={{ position: 'absolute', top: '26rpx', left: 0 }} />
+      <View>
+        {props.children}
+      </View>
+    </View>
+  )
+}

src/components/CouponCard/Media/Header.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { View, Image } from '@tarojs/components'
+import BadgeTag from '@/components/BadgeTag'
+import Cashback from '../Cashback'
+import './style.less'
+
+export default (props) => {
+  const { cashback, badge, image } = props
+
+  return (
+    <View className='coupun-media_header'>
+      <Cashback money={cashback} style={{ position: 'absolute', top: '10px', left: 0 }} />
+      <View className='coupun-media_thumb'>
+        <BadgeTag type={badge} />
+        <Image src={image} />
+      </View>
+    </View>
+  )
+}

src/components/CouponCard/Media/Wrapper.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import './style.less'
+
+export default (props) => {
+  const { onClick } = props
+
+  const handleClick = (e) => {
+    if (onClick) {
+      e.stopPropagation();  
+      onClick(e);
+    }
+  }
+
+  return (
+    <View className='coupun-media' onClick={handleClick}>
+      {props.children}
+    </View>
+  )
+}

src/components/CouponCard/Media/index.jsx

@@ -0,0 +1,8 @@
+import Wrapper from "./Wrapper";
+import Header from "./Header";
+import Body from "./Body";
+
+Wrapper.Header = Header;
+Wrapper.Body = Body;
+
+export default Wrapper;

src/components/CouponCard/Media/style.less

@@ -0,0 +1,34 @@
+
+.coupun-media {
+  display: flex;
+
+  &_header {
+    flex: none;
+    box-sizing: border-box;
+    width: 184px;
+    position: relative;
+
+    padding: 78px 20px 40px;
+  }
+
+  &_thumb {
+    width: 144px;
+    height: 144px;
+    border-radius: 24px;
+    position: relative;
+    overflow: hidden;
+
+    & > image {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+
+  &_body {
+    flex: auto;
+    position: relative;
+    padding: 78px 20px 40px 0;
+    box-sizing: border-box;
+  }
+}

src/components/CouponCard/components/style.less

@@ -1,36 +0,0 @@
-
-.cpn-icon-action {
-  image {
-    width: 36px;
-    height: 36px;
-    display: block;
-    margin: 0 auto;
-  }
-
-  text {
-    margin-top: 20px;
-    display: inline-block;
-    font-size: 24px;
-    font-weight: bold;
-    color: #202020;
-    line-height: 1.4em;
-  }
-}
-
-.cpn-image-action {
-  image {
-    width: 72px;
-    height: 72px;
-    display: block;
-  }
-}
-
-.cpn_cashback {
-  box-sizing: border-box;
-  background: url('~@/assets/icons/ProCard/ProCard_hot.png') no-repeat;
-  background-size: 100% 100%;
-  padding: 16px 25px 10px 10px;
-  font-size: 20px;
-  color: #fff;
-  line-height: 1em;
-}

src/components/CouponCard/index.jsx

@@ -1,18 +1,8 @@
+import Card from "./Card";
+import Media from "./Media";
+import Action from './Action';
 
-import React from 'react'
-import { View } from '@tarojs/components'
+Card.Media = Media;
+Card.Action = Action;
 
-import './style.less'
-
-export default (props) => {
-  const { action = null, onClick } = props
-
-  return (
-    <View className='coupon-card' onClick={onClick}>
-      <View className='coupon-card_body'>
-        {props.children}
-      </View>
-      <View className='coupon-card_action'>{action}</View>
-    </View>
-  )
-}
+export default Card;

src/components/Location/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { View, Image } from '@tarojs/components'
+import position from '@/assets/icons/GuideCheck/position_logo.png'
+import './style.less'
+
+export default (props) => {
+  const { areaName, areaPName } = props
+
+  const name = [areaPName, areaName].filter(Boolean).join('/')
+
+  return (
+    <View className='loc-box'>
+      <View className='loc-box_icon'>
+        <Image src={position} />
+      </View>
+      <View className='loc-box_name'>
+        {name}
+      </View>
+    </View>
+  )
+}

src/components/Location/style.less

@@ -0,0 +1,25 @@
+
+.loc-box {
+  display: flex;
+  align-items: center;
+
+  &_icon {
+    flex: none;
+    width: 16px;
+    height: 20px;
+
+    & > image {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+
+  &_name {
+    flex: auto;
+    margin-left: 8px;
+    font-size: 20px;
+    font-weight: 400;
+    color: #333333;
+  }
+}

src/components/SaveIcon/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Image } from '@tarojs/components'
+import useSave from "@/utils/hooks/useSave"
+import starOn from '@/assets/icons/housemantj/onlove.png'
+import starOff from '@/assets/icons/housemantj/touristGood.png'
+import './style.less'
+
+export default (props) => {
+  const { saved, targetType, targetId, editable } = props
+  
+  const [isSaved, toggleSave] = useSave(saved, targetType, targetId)
+
+  const link = isSaved ? starOn : starOff
+  const text = isSaved ? '已收藏' : '加入收藏'
+
+  const handleClick = (e) => {
+    if (editable) {
+      e.stopPropagation()
+      toggleSave()
+    }
+  }
+
+  return (
+    <View className='save-box' onClick={handleClick}>
+      <View className='save-box_icon'>
+        <Image src={link} />
+      </View>
+      <View className='save-box_text'>{text}</View>
+    </View>
+  )
+}

src/components/SaveIcon/style.less

@@ -0,0 +1,26 @@
+
+.save-box {
+  display: flex;
+  align-items: center;
+
+  &_icon {
+    flex: none;
+    width: 20px;
+    height: 20px;
+
+    & > image {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+  }
+
+  &_text {
+    flex: auto;
+    margin-left: 8px;
+    font-size: 20px;
+    font-weight: 400;
+    color: #333333;
+  }
+}