|
@@ -1,31 +1,25 @@
|
1
|
1
|
import React, { useEffect, useState } from "react";
|
2
|
2
|
import Taro from "@tarojs/taro";
|
3
|
3
|
import { View, Text, Image, Button } from "@tarojs/components";
|
|
4
|
+import groupby from 'lodash.groupby'
|
4
|
5
|
import ContainerLayout from "../../compents/container/index";
|
5
|
|
-import more from "../../assets/more.png";
|
|
6
|
+import Divider from '../../compents/Divider'
|
6
|
7
|
import deleteicon from "../../assets/deleteicon.png";
|
7
|
8
|
import userRloe from "../../util/userRole";
|
8
|
9
|
import "./index.scss";
|
9
|
10
|
import { useSelector } from "react-redux";
|
10
|
|
-import { AtFab } from "taro-ui";
|
11
|
11
|
import request from "../../util/request";
|
12
|
12
|
|
13
|
13
|
const ImageCard = props => {
|
14
|
14
|
const { image, onDelete } = props;
|
15
|
15
|
const user = useSelector(state => state.user);
|
16
|
16
|
const [isopen, setIsOpen] = useState(false);
|
17
|
|
-// boxShadow:'0rpx 12rpx 0rpx 0rpx #8a8b8d'
|
|
17
|
+
|
18
|
18
|
return (
|
19
|
19
|
<View
|
20
|
20
|
className="recommend-view-card"
|
21
|
21
|
style={{ height: !isopen ? "330rpx" : undefined, overflow: "hidden" ,background:'#fff', boxShadow:'6rpx 12rpx 0rpx #898989' }}
|
22
|
22
|
>
|
23
|
|
- {/* <View onClick={() => setIsOpen(!isopen)} style={{zIndex:99,boxShadow:'6rpx 12rpx 0rpx #898989',position: 'absolute',width:'100%',height:'330rpx',borderRadius: '30rpx',opacity:0}}>
|
24
|
|
-
|
25
|
|
- </View>
|
26
|
|
- <View onClick={() => setIsOpen(!isopen)} style={{zIndex:-9, boxShadow:'0rpx 12rpx 0rpx -4rpx #898989',position: 'absolute',bottom:'0',width:'670rpx',background:'#fff', height:'100%',borderRadius: '30rpx',opacity:0}}>
|
27
|
|
-
|
28
|
|
- </View> */}
|
29
|
23
|
<Image
|
30
|
24
|
className="recommend-view-img"
|
31
|
25
|
mode="widthFix"
|
|
@@ -46,11 +40,6 @@ const ImageCard = props => {
|
46
|
40
|
)}
|
47
|
41
|
</View>
|
48
|
42
|
);
|
49
|
|
- // : (
|
50
|
|
- // <View>
|
51
|
|
- // <Image className="recommend-view-img" mode="widthFix" src={image} onClick={() => setIsOpen(!isopen)}></Image>
|
52
|
|
- // </View>
|
53
|
|
- // );
|
54
|
43
|
};
|
55
|
44
|
|
56
|
45
|
const recommend = props => {
|
|
@@ -59,24 +48,15 @@ const recommend = props => {
|
59
|
48
|
const { value, houseId, ...prop } = props;
|
60
|
49
|
|
61
|
50
|
// const [state, setState] = useState(1)
|
62
|
|
- const [list, setList] = useState([]);
|
|
51
|
+ const [list, setList] = useState({});
|
63
|
52
|
const [id, setId] = useState();
|
64
|
53
|
|
65
|
|
- // let list = props.dataSource || []
|
66
|
|
-
|
67
|
54
|
useEffect(() => {
|
68
|
|
- setList(props.dataSource || []);
|
|
55
|
+ const lst = groupby(props.dataSource || [], 'groupName')
|
|
56
|
+ // setList(props.dataSource || []);
|
|
57
|
+ setList(lst)
|
69
|
58
|
}, [props.dataSource]);
|
70
|
59
|
|
71
|
|
- // const getImageList=()=>{
|
72
|
|
- // request({url:'/taHouseSurround',params:{houseId:houseId}}).then((res)=>{
|
73
|
|
- // const {records,...page} =res.data.data
|
74
|
|
- // setList(records)
|
75
|
|
- // })
|
76
|
|
- // }
|
77
|
|
-
|
78
|
|
- //
|
79
|
|
-
|
80
|
60
|
const onClick = item => {
|
81
|
61
|
if (user.role == userRloe.customer) {
|
82
|
62
|
setId(item.surroundId);
|
|
@@ -103,8 +83,10 @@ const recommend = props => {
|
103
|
83
|
}
|
104
|
84
|
};
|
105
|
85
|
|
|
86
|
+ const listGroupKeys = Object.keys(list) || []
|
|
87
|
+
|
106
|
88
|
return (
|
107
|
|
- <View className="recommend">
|
|
89
|
+ <View className="recommend page">
|
108
|
90
|
{user.role == userRloe.landlord && (
|
109
|
91
|
<Button
|
110
|
92
|
onClick={() =>
|
|
@@ -114,34 +96,35 @@ const recommend = props => {
|
114
|
96
|
添加图片
|
115
|
97
|
</Button>
|
116
|
98
|
)}
|
117
|
|
- {true &&
|
118
|
|
- list.map(x => {
|
119
|
|
- return (
|
120
|
|
- <View className="recommend-view">
|
121
|
|
- <ContainerLayout className="recommend-view-layout">
|
122
|
|
- <ImageCard image={x.image} onDelete={() => onClick(x)} />
|
123
|
|
- {/* {id != x.surroundId ? <View className='recommend-view-card' style={userRloe.customer == user.role ? { height: "300rpx",overflow:'hidden' }:''}>
|
124
|
|
-
|
125
|
|
- <Image className='recommend-view-img' mode='widthFix' src={x.image} ></Image>
|
126
|
|
-
|
127
|
|
-
|
128
|
|
- {userRloe.customer == user.role ? <Image className='icon' src={more} onClick={() => onClick(x)}></Image>
|
129
|
|
-
|
130
|
|
- : <Image className='icon' src={deleteicon} mode='widthFix' style={{ width: '40rpx' }} onClick={() => onClick(x)}></Image>
|
131
|
|
- }
|
132
|
|
-
|
133
|
|
- </View> :
|
134
|
|
- <View >
|
135
|
|
- <Image className='recommend-view-img' mode='widthFix' src={x.image}></Image>
|
136
|
|
-
|
137
|
|
- </View>
|
138
|
|
- } */}
|
139
|
|
- </ContainerLayout>
|
140
|
|
- </View>
|
141
|
|
- );
|
142
|
|
- })}
|
143
|
99
|
|
144
|
|
- {list.length == 0 && <View className="nodata"> 暂无数据</View>}
|
|
100
|
+ {
|
|
101
|
+ listGroupKeys.length == 0 ?
|
|
102
|
+ (<View className="nodata"> 暂无数据</View>) :
|
|
103
|
+ listGroupKeys.map(k => {
|
|
104
|
+ const lst = list[k] || []
|
|
105
|
+
|
|
106
|
+ return (
|
|
107
|
+ <View className="page__hd">
|
|
108
|
+ <View className="page__title" style="font-size: 1.6em">
|
|
109
|
+ <Divider>{lst[0].groupName}</Divider>
|
|
110
|
+ </View>
|
|
111
|
+ <View className="page__bd">
|
|
112
|
+ {
|
|
113
|
+ lst.map(x => {
|
|
114
|
+ return (
|
|
115
|
+ <View className="recommend-view">
|
|
116
|
+ <ContainerLayout className="recommend-view-layout">
|
|
117
|
+ <ImageCard image={x.image} onDelete={() => onClick(x)} />
|
|
118
|
+ </ContainerLayout>
|
|
119
|
+ </View>
|
|
120
|
+ );
|
|
121
|
+ })
|
|
122
|
+ }
|
|
123
|
+ </View>
|
|
124
|
+ </View>
|
|
125
|
+ )
|
|
126
|
+ })
|
|
127
|
+ }
|
145
|
128
|
</View>
|
146
|
129
|
);
|
147
|
130
|
};
|