feats

src/components/BadgeTag/index.jsx

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

src/components/BadgeTag/style.less

@@ -0,0 +1,20 @@
+
+.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;
+
+  .badge-icon {
+    display: inline-block !important;
+    width: 22px !important;
+    height: 22px !important;
+  }
+
+  text {
+    margin-left: 6px;
+  }
+}

src/components/BossCard/index.jsx

@@ -1,8 +1,9 @@
 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 Star from '@/components/Star/Star.jsx'
 import position from '@/assets/icons/GuideCheck/position_logo.png'
 import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
 
@@ -12,9 +13,11 @@ 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 './style.less'
 
@@ -32,50 +35,73 @@ export default (props) => {
     Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${shopId}` })
   }
 
+  const handlePayClick = () => {
+    Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}` })
+  }
+
+  const PayAction = <IconAction icon={Pay} text='支付' onClick={handlePayClick} />
 
   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>
+    <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} />
+          </View>
+        </View>
+        <View className='coupun-content_body'>
+          <Star score={st} style={{ position: 'absolute', top: '26rpx', left: 0 }} />
+        </View>
+      </View>
+    </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

@@ -223,3 +223,37 @@
     opacity: 0.12;
   }
 }
+
+
+.coupun-content {
+  display: flex;
+
+  &_header {
+    flex: none;
+    box-sizing: border-box;
+    width: 184px;
+    position: relative;
+
+    padding: 78px 20px 40px;
+
+    .coupun-content_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;
+  }
+}

src/components/CouponCard/components/Cashback.jsx

@@ -0,0 +1,16 @@
+
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+
+export default (props) => {
+  const { money, prefix = '返现', style } = props
+
+  const yuan = !money ? 0 : Number(money / 100).toFixed(2)
+
+  return (
+    <View className='cpn_cashback' style={style}>
+      <Text>{prefix}</Text>
+      <Text>{`￥${yuan}`}</Text>
+    </View>
+  )
+}

src/components/CouponCard/components/IconAction.jsx

@@ -0,0 +1,18 @@
+
+import React from 'react'
+import { View, Image, Text } from '@tarojs/components'
+
+import './style.less'
+
+export default (props) => {
+  const { icon, text, onClick } = props
+
+  return (
+    <View className='cpn-action cpn-icon-action'>
+      <View onClick={onClick}>
+        <Image src={icon} />
+        <Text>{text}</Text>
+      </View>
+    </View>
+  )
+}

src/components/CouponCard/components/ImageAction.jsx

@@ -0,0 +1,17 @@
+
+import React from 'react'
+import { View, Image, Text } from '@tarojs/components'
+
+import './style.less'
+
+export default (props) => {
+  const { image, onClick } = props
+
+  return (
+    <View className='cpn-action cpn-image-action'>
+      <View onClick={onClick}>
+        <Image src={image} />
+      </View>
+    </View>
+  )
+}

src/components/CouponCard/components/style.less

@@ -0,0 +1,36 @@
+
+.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

@@ -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' onClick={onClick}>
+      <View className='coupon-card_body'>
+        {props.children}
+      </View>
+      <View className='coupon-card_action'>{action}</View>
+    </View>
+  )
+}

src/components/CouponCard/style.less

@@ -0,0 +1,66 @@
+
+// 开孔半径
+@radius-size: 16px;
+
+.coupon-card {
+  display: flex;
+  filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
+  border-radius: 12px;
+
+  & + & {
+    margin-top: 36rpx;
+  }
+
+  & > view {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  &_body {
+    flex: auto;
+    min-height: 60px;
+    background: radial-gradient(circle at top right, transparent @radius-size, #fff 0 0)
+                  top right,
+                radial-gradient(circle at bottom right, transparent @radius-size, #fff 0 0)
+                  bottom right;
+    background-size: 100% 60%;
+    background-repeat: no-repeat;
+  }
+
+  &_action {
+    flex: none;
+    width: 18%;
+    min-width: 130px;
+    background: radial-gradient(circle at top left, transparent @radius-size, #fff 0 0)
+                  top left,
+                radial-gradient(circle at bottom left, transparent @radius-size, #fff 0 0)
+                  bottom left;
+    background-size: 100% 60%;
+    background-repeat: no-repeat;
+    
+    // 避开孔位置, 方便子元素居中
+    padding-left: @radius-size * 2;
+
+    &::before {
+      position: absolute;
+      content: ' ';
+      width: 1px;
+      border-left: 1px dashed rgba(89, 89, 89, .2);
+      height: 50%;
+      top: 25%;
+      left: 0;
+      z-index: 2;
+    }
+  }
+}
+
+.cpn-action {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > view {
+    flex: none;
+  }
+}

src/components/Star/Star.jsx

@@ -1,6 +1,6 @@
 import hongxin from '@/assets/icons/housemantj/Save2.png'
 import baixin from '@/assets/icons/housemantj/save.png'
-import './Star.less'
+import './style.less'
 
 const Star = (props) => <image className='star-image' src={props.star >= props.index ? hongxin : baixin}></image>
 

src/components/Star/Star.less

@@ -1,5 +0,0 @@
-.star-image{
-  width: 24px;
-  height: 24px;
-  margin-right: 10px;
-}

src/components/Star/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import Star from './Star'
+import './style.less'
+
+export default (props) => {
+  const { score, style } = props
+
+  return (
+    <View className='star-box' style={style}>
+      <View>
+        <Star star={score} />
+      </View>
+      <View>
+        {score}
+      </View>
+    </View>
+  )
+}

src/components/Star/style.less

@@ -0,0 +1,25 @@
+.star-image{
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+
+.star-box {
+  display: flex;
+
+  & > view {
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: 20px;
+    font-weight: bold;
+    color: #333333;
+
+    &:last-child {
+      margin-top: -4px;
+    }
+
+    & + view {
+      margin-left: 10px;
+    }
+  }
+}