首页推荐

src/pages/building/list/index.jsx

@@ -96,68 +96,69 @@ function CartBody(props) {
       },
     });
   }
-// src={((data.buildingImg && data.buildingImg[0]) || {}).url}background: `url(${item.caseCoverImg})` style={{ background: `url(((data.buildingImg && data.buildingImg[0]) || {}).url)` }}
+  // src={((data.buildingImg && data.buildingImg[0]) || {}).url}background: `url(${item.caseCoverImg})` style={{ background: `url(((data.buildingImg && data.buildingImg[0]) || {}).url)` }}
   const { buildingImg } = data
   console.log("buildingImg1: ", data.buildingImg)
   return (
     <Card
       hoverable
       style={{ minWidth: '330px', borderRadius: '12px', margin: '10px', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)' }}
-      // cover={}
-      // bodyStyle={{ padding: '10px 20px' }}
+    // cover={}
+    // bodyStyle={{ padding: '10px 20px' }}
     >
       {/* 因为 background 方式设置图片背景，如果 图片url 存在空格或者其他特殊字符，导致显示不出来，需要进行 encodeURI(xxx) 转码 */}
-    <img className={Styles.cover} style={{ backgroundImage: `url('${encodeURI( ((data.buildingListImg && data.buildingListImg[0]) || {}).url )}')` }}   ></img>
-    <div style={{ padding: '10px 20px' }}>
-      <p className={Styles.cardText}>
-        <span className={Styles.title}>楼盘编号</span>
-        <span style={{textOverflow: 'ellipsis',  whiteSpace: 'nowrap',  overflow: 'hidden'}}>：{data.code}</span>
-        <AuthButton name="admin.building.update.put" noRight={null}>
-          <span className={Styles.ediText} onClick={() => toEdi(data)}>
-            编辑
+        <span className={Styles.recommderTag}>{data.isMain === 1 ? '首页推荐':''}</span>
+        <img className={Styles.cover} style={{ backgroundImage: `url('${encodeURI(((data.buildingListImg && data.buildingListImg[0]) || {}).url)}')` }}   ></img>
+      <div style={{ padding: '10px 20px' }}>
+        <p className={Styles.cardText}>
+          <span className={Styles.title}>楼盘编号</span>
+          <span style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>：{data.code}</span>
+          <AuthButton name="admin.building.update.put" noRight={null}>
+            <span className={Styles.ediText} onClick={() => toEdi(data)}>
+              编辑
                   <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
-          </span>
-        </AuthButton>
-      </p>
-      <p className={Styles.cardText}>
-        <span className={Styles.title}>楼盘名称</span>
-        <span style={{textOverflow: 'ellipsis',  whiteSpace: 'nowrap',  overflow: 'hidden'}}>：{data.buildingName || data.name}</span>
-      </p>
-      <p className={Styles.cardItem}>
-        <span className={Styles.title}>均价</span>
-        <span >
-          ：约<span style={{ color: '#FF0707', fontSize: '20px' }}> {data.price || '待定'} </span>元/m²
+            </span>
+          </AuthButton>
+        </p>
+        <p className={Styles.cardText}>
+          <span className={Styles.title}>楼盘名称</span>
+          <span style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>：{data.buildingName || data.name}</span>
+        </p>
+        <p className={Styles.cardItem}>
+          <span className={Styles.title}>均价</span>
+          <span >
+            ：约<span style={{ color: '#FF0707', fontSize: '20px' }}> {data.price || '待定'} </span>元/m²
         </span>
-      </p>
-      <p className={Styles.cardItem}>
-        <span className={Styles.title}>项目地址</span>
-        <span className={Styles.address}>：{data.address}</span>
-      </p>
-      <p className={Styles.cardItem}>
-        <span className={Styles.title}>发布状态</span>
-        <span >：{data.status === 1 ? '已发布' : '未发布'}</span>
-      </p>
-      <p className={Styles.cardItem}>
-        <span className={Styles.title}>录入时间</span>
-        <span >：{moment(data.createDate).format('YYYY-MM-DD HH:mm:ss')}</span>
-      </p>
-      <p style={{ margin: '15px 0', position: 'relative', fontSize: '0.106rem' }}>
-      <AuthButton name="admin.building.update.status.put" noRight={null}>
-        <span style={{ color: '#FF4A4A' }} onClick={() => pulicAndUnPulic(data)}>
-          {/* 已发布的时候，需要显示取消发布的字样 */}
-          {data.status === 1 ? '取消发布' : '发布'}
-          <Icon type={data.status === 1 ? 'close-circle' : 'form'} style={{ color: '#C0C4CC', marginLeft: '8px' }} />
-        </span>
-      </AuthButton>
-      <AuthButton name="admin.building.delete.id.delete" noRight={null}>
-        <span style={{
-          color: '#FF4A4A', position: 'absolute', right: '0',
-        }} onClick={() => deleteBuilding(data)}>
-          删除
+        </p>
+        <p className={Styles.cardItem}>
+          <span className={Styles.title}>项目地址</span>
+          <span className={Styles.address}>：{data.address}</span>
+        </p>
+        <p className={Styles.cardItem}>
+          <span className={Styles.title}>发布状态</span>
+          <span >：{data.status === 1 ? '已发布' : '未发布'}</span>
+        </p>
+        <p className={Styles.cardItem}>
+          <span className={Styles.title}>录入时间</span>
+          <span >：{moment(data.createDate).format('YYYY-MM-DD HH:mm:ss')}</span>
+        </p>
+        <p style={{ margin: '15px 0', position: 'relative', fontSize: '0.106rem' }}>
+          <AuthButton name="admin.building.update.status.put" noRight={null}>
+            <span style={{ color: '#FF4A4A' }} onClick={() => pulicAndUnPulic(data)}>
+              {/* 已发布的时候，需要显示取消发布的字样 */}
+              {data.status === 1 ? '取消发布' : '发布'}
+              <Icon type={data.status === 1 ? 'close-circle' : 'form'} style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+            </span>
+          </AuthButton>
+          <AuthButton name="admin.building.delete.id.delete" noRight={null}>
+            <span style={{
+              color: '#FF4A4A', position: 'absolute', right: '0',
+            }} onClick={() => deleteBuilding(data)}>
+              删除
                 <Icon type="rest" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
-        </span>
-      </AuthButton>
-      </p>
+            </span>
+          </AuthButton>
+        </p>
       </div>
     </Card>
   )
@@ -184,7 +185,7 @@ function body(props) {
     // 网路请求
     request({ ...apis.building.getList, params: { ...params } }).then(res => {
       setDataSource(res)
-      console.log("res:",res)
+      console.log("res:", res)
     }).catch(err => {
       // eslint-disable-next-line no-unused-expressions
       <Alert
@@ -207,7 +208,7 @@ function body(props) {
         console.log('提交数据: ', values)
         const { startDate } = values
         if (values.startDate !== undefined) {
-         
+
           values.startDate = `${moment(startDate).format('YYYY-MM-DDT00:00:00.000')}Z`
         }
         getList({ pageNum: 1, pageSize: 9, ...values })
@@ -235,7 +236,7 @@ function body(props) {
 
   function toAdd() {
     // 判断楼盘是否最可以添加
-    request({ ...apis.building.verifyMax}).then(res => {
+    request({ ...apis.building.verifyMax }).then(res => {
       router.push({ pathname: '/building/list/add' })
     }).catch(err => {
       // eslint-disable-next-line no-unused-expressions
@@ -299,15 +300,15 @@ function body(props) {
         <Form.Item>
           {getFieldDecorator('marketStatus')(
             <Select style={{ width: '180px' }} placeholder="销售状态" onChange={handleSelectChange}>
-                <Option value="待定">待定</Option>
-                <Option value="在售">在售</Option>
-                <Option value="售完">售完</Option>
+              <Option value="待定">待定</Option>
+              <Option value="在售">在售</Option>
+              <Option value="售完">售完</Option>
             </Select>,
           )}
         </Form.Item>
         <Form.Item>
           {getFieldDecorator('cityId')(
-             <SelectCity />,
+            <SelectCity />,
           )}
         </Form.Item>
         <Form.Item>
@@ -319,11 +320,11 @@ function body(props) {
           )}
         </Form.Item>
         <Form.Item>
-            <Button type="primary" htmlType="submit">
-              搜索
+          <Button type="primary" htmlType="submit">
+            搜索
             </Button>
-            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
-              重置
+          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+            重置
             </Button>
         </Form.Item>
       </Form>

src/pages/building/list/style.less

@@ -20,8 +20,18 @@
   display: flex;
   align-items: center;
   position: relative;
-  margin-bottom: 0.08rem;
-  
+  margin-bottom: 0.08rem; 
+}
+
+.recommderTag{
+  position: absolute;
+  color: #fff;
+  line-height: 0.28rem;
+  width: 0.54rem;
+  background-color: rgba(0,0,0,0.4);
+  text-align: center;
+  border-radius: 12px 0 12px 0;
+  font-size: 0.09rem;
 }
 .cardItem{
   font-size: 0.106rem;