myfabulousItem.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <template>
  2. <view class="water-flow-box" >
  3. <view class="water-flow-column" :style="{ 'margin-right': columnGap + 'px' }" v-for="(col, c) in colunmList" :key="c">
  4. <view class="item" :id="col.id" style="width: 100%;">
  5. <view
  6. v-for="(item, index) in col.list"
  7. :key="index"
  8. class="item_content"
  9. :style="{ 'margin-bottom': columnGapTwo+ 'px', background: item.background }"
  10. @click="goTodetails(item)"
  11. >
  12. <image :src="item.cover" style="width: 100%;" :mode='"widthFix"'></image>
  13. <view v-if="item.model_type==0">
  14. <view class="waterfall">
  15. <view class="waterfallitem">
  16. {{item.title}}
  17. </view>
  18. <view class="image">
  19. <view class="nickImg">
  20. <image v-if="item.head_photo" :src="item.head_photo" style="border-radius: 50%;" class="tuxiang" mode=""></image>
  21. <image v-else :src="imgUrl+'/head-on.png'" style="border-radius: 50%;" class="tuxiang" mode=""></image>
  22. <view class="contentname">
  23. {{item.nickname?item.nickname:item.mobile}}
  24. </view>
  25. </view>
  26. <view class="fabulous">
  27. <image class="good" :src="imgUrl+'/login/good-job.png'" mode=""></image>
  28. <view class="contentnumber">
  29. {{item.like_num}}
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. <text class="iconfont video" v-if="item.type==1">
  35. &#xe631;
  36. </text>
  37. </view>
  38. <view v-if="item.model_type==1">
  39. <view class="waterfall">
  40. <view class="waterfallitem">
  41. {{item.title}}
  42. </view>
  43. <view class="image">
  44. <view class="nickImg">
  45. <view style="color: #1a1a1a;">
  46. 松河生活平台商城
  47. </view>
  48. </view>
  49. <view class="fabulous">
  50. <image class="good" :src="imgUrl+'/login/good-job.png'" mode=""></image>
  51. <view class="contentnumber">
  52. {{item.like_num}}
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. <text class="iconfont video" v-if="item.type==1">
  58. &#xe631;
  59. </text>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. export default {
  68. name: 'grass-water-flow',
  69. props: {
  70. fieldKey: {
  71. //关键比对key
  72. type: String,
  73. default: 'id'
  74. },
  75. idPrefix: {
  76. //前缀
  77. type: String,
  78. default: 'water-flow-'
  79. },
  80. colunmNumber: {
  81. //瀑布流列数
  82. type: Number,
  83. default: 2
  84. },
  85. columnGap: {
  86. //列间隔
  87. type: Number,
  88. default: 10
  89. },
  90. columnGapTwo: {
  91. //列间隔
  92. type: Number,
  93. default: 10
  94. },
  95. flowList: {
  96. // 瀑布流数据
  97. type: Array,
  98. required: true,
  99. default: function() {
  100. return [];
  101. }
  102. }
  103. },
  104. data() {
  105. return {
  106. colunmList: [], //列
  107. internalDataList: [], //内部操作数据
  108. refrenshColunmDataList: [], //记录加载的数据
  109. imgUrl: this.$mConfig.staticUrl
  110. };
  111. },
  112. watch: {
  113. colunmNumber: function(v) {
  114. this.internalDataList = Object.assign([], this.refrenshColunmDataList);
  115. this.calculateColumn(v, false);
  116. },
  117. flowList: function(v) {
  118. this.internalDataList = Object.assign(this.internalDataList, v);
  119. if (this.internalDataList.length > 0) {
  120. this.getPushContainer();
  121. }
  122. },
  123. colunmList: {
  124. handler() {
  125. this.$nextTick(function() {
  126. var _this = this; setTimeout(function() { _this.getPushContainer(); }, 200);
  127. });
  128. },
  129. deep: true
  130. }
  131. },
  132. created() {
  133. this.internalDataList = Object.assign([], this.flowList);
  134. this.calculateColumn(this.colunmNumber, true);
  135. },
  136. mounted() {
  137. if (this.internalDataList.length > 0) {
  138. this.colunmList[0].list.push(this.internalDataList[0]);
  139. let shiftObj = this.internalDataList.shift();
  140. this.pushLoadData(shiftObj);
  141. }
  142. },
  143. methods: {
  144. /**
  145. * 计算列
  146. * @param {Object} size 列数
  147. * @param {Object} isCreate 是否初始化创建(created生命周期)
  148. */
  149. calculateColumn: function(size, isCreate) {
  150. this.colunmList = [];
  151. for (let i = 1; i <= size; i++) {
  152. let obj = {};
  153. obj.id = this.idPrefix + i;
  154. obj.list = [];
  155. this.colunmList.push(obj);
  156. }
  157. if (!isCreate) {
  158. if (this.internalDataList.length > 0) {
  159. this.colunmList[0].list.push(this.internalDataList[0]);
  160. let shiftObj = this.internalDataList.shift();
  161. this.pushLoadData(shiftObj);
  162. }
  163. }
  164. },
  165. /**
  166. * 获取节点信息
  167. */
  168. getPushContainer() {
  169. let sortList = [];
  170. const query = uni.createSelectorQuery().in(this);
  171. query
  172. .selectAll('.item')
  173. .boundingClientRect()
  174. .exec(res => {
  175. if (res) {
  176. sortList = res[0];
  177. sortList.sort(function(a, b) {
  178. return a.height - b.height;
  179. });
  180. this.pushShiftData(sortList[0]);
  181. }
  182. });
  183. },
  184. //商品跳详情
  185. goTodetails(item){
  186. console.log(item)
  187. console.log(item.model_type)
  188. if(item.model_type==0){
  189. uni.navigateTo({
  190. url:"../recommend/details?id="+item.model_id
  191. })
  192. }
  193. if(item.model_type==1){
  194. uni.navigateTo({
  195. url:"../business/article?id="+item.model_id
  196. })
  197. }
  198. // uni.navigateTo({
  199. // url:"../recommend/details?id="+item.id
  200. // })
  201. // uni.navigateTo({
  202. // url:"../../pages/research/recommend/details?id="+item.id
  203. // })
  204. },
  205. /**
  206. * 处理数据
  207. * @param {Object} pushObj
  208. */
  209. pushShiftData(pushObj) {
  210. if (this.internalDataList.length > 0) {
  211. for (let i = 0; i < this.colunmList.length; i++) {
  212. if (this.colunmList[i].id == pushObj.id) {
  213. this.colunmList[i].list.push(this.internalDataList[0]);
  214. let shiftObj = this.internalDataList.shift();
  215. this.pushLoadData(shiftObj);
  216. }
  217. }
  218. }
  219. },
  220. /**
  221. * 记录加载的数据
  222. * @param {Object} obj
  223. */
  224. pushLoadData(obj) {
  225. if (this.refrenshColunmDataList.length > 0) {
  226. let result = this.refrenshColunmDataList.some(item => {
  227. if (item[this.fieldKey] == obj[this.fieldKey]) {
  228. return true;
  229. }
  230. });
  231. if (!result) {
  232. this.refrenshColunmDataList.push(obj);
  233. }
  234. } else {
  235. this.refrenshColunmDataList.push(obj);
  236. }
  237. },
  238. /**
  239. * 外部刷新数据时,调用此方法,清理掉原有加载数据
  240. */
  241. externalRefrensh() {
  242. this.refrenshColunmDataList = [];
  243. for (let i = 0; i < this.colunmList.length; i++) {
  244. this.colunmList[i].list = [];
  245. }
  246. }
  247. }
  248. };
  249. </script>
  250. <style scoped>
  251. uni-view.water-flow-column{
  252. background-color: transparent;
  253. margin: transparent;
  254. }
  255. .item_content{
  256. border-radius: 18rpx;
  257. margin-bottom: 42rpx;
  258. overflow: hidden;
  259. background-color: #fff;
  260. position: relative;
  261. }
  262. .video {
  263. color: red;
  264. position: absolute;
  265. right: 26rpx;
  266. top: 26rpx;
  267. font-size: 50rpx;
  268. color: #FFFFFF;
  269. }
  270. .black{
  271. height: 30rpx;
  272. background-color: #f5f5f5;
  273. }
  274. .contentnumber{
  275. border-radius: 16rpx;
  276. font-size: 24rpx;
  277. font-family: PingFang SC, PingFang SC-Regular;
  278. font-weight: 400;
  279. color: #999999;
  280. margin-left: 10rpx;
  281. }
  282. .good{
  283. width: 29rpx;
  284. height: 31rpx;
  285. margin-left: 62rpx;
  286. }
  287. .contentname{
  288. width: 90rpx;
  289. flex: 1;
  290. color: #1a1a1a;
  291. font-size: 24rpx;
  292. font-family: PingFang SC, PingFang SC-Regular;
  293. font-weight: 400;
  294. white-space: nowrap;
  295. text-overflow: ellipsis;
  296. overflow: hidden;
  297. margin-left: 13rpx;
  298. }
  299. .tuxiang{
  300. width: 50rpx;
  301. height: 50rpx;
  302. }
  303. .image{
  304. display: flex;
  305. padding: 9rpx 18rpx 22rpx 22rpx ;
  306. justify-content: space-between;
  307. align-items: center;
  308. }
  309. .image .nickImg,.image .fabulous{
  310. display: flex;
  311. justify-content: space-between;
  312. align-items: center;
  313. }
  314. .waterfallitem{
  315. margin: 15rpx 20rpx;
  316. font-size: 24rpx;
  317. line-height: 40rpx;
  318. color: #333333;
  319. overflow: hidden;
  320. text-overflow: ellipsis;
  321. display: -webkit-box;
  322. -webkit-line-clamp: 2;
  323. -webkit-box-orient: vertical;
  324. word-wrap: break-word;
  325. word-break: break-all;
  326. white-space: normal !important;
  327. }
  328. /* 瀑布流最外层 */
  329. .water-flow-box {
  330. /* margin: 10px; */
  331. display: flex;
  332. flex-direction: row;
  333. height: auto;
  334. border-radius: 18rpx;
  335. padding: 30rpx 20rpx 42rpx 29rpx;
  336. }
  337. .water-flow-column {
  338. /* margin-right: 10px; */
  339. display: flex;
  340. flex-flow: column wrap;
  341. width: 100%;
  342. border-radius: 18rpx;
  343. /* background-color: white; */
  344. /* margin-bottom: 42rpx; */
  345. }
  346. .water-flow-box .water-flow-column:last-child {
  347. margin-right: 0px !important;
  348. }
  349. .water-flow-column > .item > .item_content {
  350. /* margin-bottom: 10px; */
  351. color: #ffffff;
  352. /* text-align: center; */
  353. width: 100%;
  354. }
  355. </style>