list.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. <template>
  2. <view>
  3. <!-- 第一种样式 人员管理-->
  4. <block v-if="datainfo.length>0">
  5. <!-- 我的互动 -->
  6. <block v-if="type=='myhd'">
  7. <view class="mb12 pr" v-for="(ite,idx) in datainfo" :key="idx">
  8. <view class="hdlist pd12 flex">
  9. <image :src="man" class="mhead flex0"></image>
  10. <view class="flex1 overh">
  11. <view class="flexc mb6">
  12. <view class="name flex1 over">{{ite.nickName}}</view>
  13. <view class="tit flex0 ml10">
  14. <block v-if="ite.targetType==1">评论了你的文章</block>
  15. <block v-if="ite.targetType==2">点赞了你的文章</block>
  16. <block v-if="ite.targetType==3">收藏了你的文章</block>
  17. <block v-if="ite.targetType==4">回复了你的评论</block>
  18. <block v-if="ite.targetType==5">点赞了你的评论</block>
  19. </view>
  20. <view class="time flex0 ml10">{{ite.createTime}}</view>
  21. </view>
  22. <view class="flexc overh mb4">
  23. <view class="line bga"></view>
  24. <view class="txt over flex1">{{ite.targetTitle}}</view>
  25. <image :src="rimg" class="rimg ml10"></image>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. </block>
  31. <block v-if="type=='plsh'">
  32. <view class="mb12 pr" v-for="(ite,idx) in datainfo" :key="idx">
  33. <view class="hdlist ">
  34. <view class="pd12 flex">
  35. <image :src="ite.avatar?baseUrl+ite.avatar:man" class="mhead flex0"></image>
  36. <view class="flex1 overh">
  37. <view class="flexc mb6">
  38. <view class="name flex1 over">{{ite.nickName}}</view>
  39. <view class="time flex0 ml10">02-26</view>
  40. </view>
  41. <view class="txt mb8">{{ite.commentContent}}</view>
  42. <view class="flexc overh mb2">
  43. <view class="line bgd"></view>
  44. <view class="txta over flex1">{{ite.communityTitle}}</view>
  45. <image :src="rimg" class="rimg ml10"></image>
  46. </view>
  47. </view>
  48. </view>
  49. <view class="shbtns flexc pd12" >
  50. <!-- <view class="btn bga" @click="getSh('4',ite)">不予展示</view> -->
  51. <view class="flex1"></view>
  52. <view class="btn bgb" @click="getSh('3',ite)">不通过</view>
  53. <view class="btn bgc" @click="getSh('2',ite)">通过</view>
  54. </view>
  55. </view>
  56. </view>
  57. </block>
  58. <!-- 我的点赞,收藏,评论 :data-idx="idx"
  59. @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"-->
  60. <block v-if="type=='wdhd'">
  61. <view class="mb12 pr" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite)">
  62. <view class="hdlist ">
  63. <view class="pd12 flex">
  64. <image :src="ite.avatar?baseUrl+ite.avatar:man" class="mhead flex0"></image>
  65. <view class="flex1 overh">
  66. <view class="flexc mb6">
  67. <view class="name flex1 over">{{ite.nickName}}</view>
  68. <view class="time flex0 ml10">{{ite.createTime}}</view>
  69. </view>
  70. <view class="txt mb8">{{ite.commentContent}}</view>
  71. <view class="flexc overh mb2">
  72. <view class="line bgd"></view>
  73. <view class="txta over flex1" v-if="tabval=='mypl'">{{ite.communityTitle}}</view>
  74. <view class="txta over flex1" v-else>{{ite.targetTitle}}</view>
  75. <image :src="rimg" class="rimg ml10"></image>
  76. </view>
  77. </view>
  78. </view>
  79. </view>
  80. <!-- <view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:residentInfo:remove'])" @click.stop="getDelFn(ite.residentId)">删除</view> -->
  81. </view>
  82. </block>
  83. <view class="shax" v-if="wtdt">{{wtdt}}</view>
  84. </block>
  85. <!-- 无数据 -->
  86. <view class="nodata" v-else>
  87. <image :src="noiconpimg"></image>
  88. <view>
  89. 暂无数据
  90. </view>
  91. </view>
  92. </view>
  93. </template>
  94. <script>
  95. import {selectDictValue} from "@/utils/common.js"
  96. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  97. import config from '@/config'
  98. export default{
  99. props:{
  100. datainfo: {
  101. type: Array,
  102. default () {
  103. return []
  104. }
  105. },
  106. wtdt:{
  107. type:String,
  108. default () {
  109. return ''
  110. }
  111. },
  112. type:{
  113. type:String,
  114. default () {
  115. return 0
  116. }
  117. },
  118. clcxList:{
  119. type: Array,
  120. default () {
  121. return []
  122. }
  123. },
  124. rymmList:{
  125. type: Array,
  126. default () {
  127. return []
  128. }
  129. },
  130. tabval:{
  131. type:String,
  132. default () {
  133. return ''
  134. }
  135. }
  136. },
  137. data(){
  138. return{
  139. noiconpimg:require("@/static/nodata.png"),
  140. man:require("@/people/static/people/man.png"),
  141. woman:require("@/people/static/people/woman.png"),
  142. rimg:require("@/static/images/rimga.png"),
  143. baseUrl:config.baseUrl,
  144. delBtnWidth:66,//左滑默认宽度
  145. }
  146. },
  147. mounted() {
  148. },
  149. methods:{
  150. checkPermi, checkRole,
  151. kaType(data, list) {
  152. return selectDictValue(list, data);
  153. },
  154. getDetail(e){
  155. console.log(222)
  156. this.$emit('getDetail',e)
  157. },
  158. getDelFn(e){
  159. var that=this;
  160. uni.showModal({
  161. title: '确认删除',
  162. content: "是否确认删除",
  163. cancelText: '取消',
  164. confirmText: '确认',
  165. success: function(res) {
  166. if (res.confirm) {
  167. that.$emit('getDelFn',e)
  168. } else if (res.cancel) {
  169. }
  170. }
  171. });
  172. },
  173. getSh(type,ite){
  174. var that=this;
  175. var str="";
  176. if(type=='2'){
  177. str="通过"
  178. }else if(type=='3'){
  179. str="不通过"
  180. }else if(type=='4'){
  181. str="下架"
  182. }
  183. uni.showModal({
  184. title: '确认'+str,
  185. content: "是否确认"+str,
  186. cancelText: '取消',
  187. confirmText: '确认',
  188. success: function(res) {
  189. if (res.confirm) {
  190. var obj={
  191. status:type,
  192. contentId:ite.contentId,
  193. commentId:ite.commentId,
  194. }
  195. that.$emit('getSh',obj)
  196. } else if (res.cancel) {
  197. }
  198. }
  199. });
  200. },
  201. getZhan(idx){
  202. // var obj=JSON.parse(JSON.stringify(this.datainfo))[idx]
  203. // obj.zhanflag=!obj.zhanflag;
  204. // this.datainfo.splice(idx,1,obj);
  205. this.datainfo[idx].zhanflag=!this.datainfo[idx].zhanflag
  206. },
  207. getDelFn(id){
  208. var that=this;
  209. uni.showModal({
  210. title: '确认删除',
  211. content: "是否确认删除",
  212. cancelText: '取消',
  213. confirmText: '确认',
  214. success: function(res) {
  215. if (res.confirm) {
  216. that.$emit('getDelFn',id)
  217. } else if (res.cancel) {
  218. }
  219. }
  220. });
  221. },
  222. getAgeFromID(idNumber) {
  223. if(idNumber){
  224. const birthDateStr = idNumber.substring(6, 14);
  225. const birthYear = parseInt(birthDateStr.substring(0, 4));
  226. const birthMonth = parseInt(birthDateStr.substring(4, 6));
  227. const birthDay = parseInt(birthDateStr.substring(6, 8));
  228. const today = new Date();
  229. const currentYear = today.getFullYear();
  230. const currentMonth = today.getMonth() + 1;
  231. const currentDay = today.getDate();
  232. let age = currentYear - birthYear;
  233. if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
  234. age--;
  235. }
  236. return age;
  237. }
  238. },
  239. getPreview(idx,arr) {
  240. var newArr=[];
  241. arr.forEach(ite=>{
  242. var ds=this.baseUrl+ite
  243. newArr.push(ds)
  244. })
  245. uni.previewImage({
  246. urls: newArr,
  247. current:idx,
  248. success: function(data) {},
  249. fail: function(err) {}
  250. });
  251. },
  252. //开始触摸滑动
  253. drawStart(e) {
  254. // console.log("开始触发");
  255. var touch = e.touches[0];
  256. this.startX = touch.clientX;
  257. },
  258. //触摸滑动
  259. drawMove(e) {
  260. var idx=e.currentTarget.dataset.idx
  261. var aidx=e.currentTarget.dataset.aidx
  262. var type=e.currentTarget.dataset.type;
  263. for (var index in this.datainfo) {
  264. if(type&&type=='peo'){
  265. for(var i in this.datainfo[idx].residentInfoList){
  266. this.$set(this.datainfo[idx].residentInfoList[i],'right',0);
  267. }
  268. }else{
  269. this.$set(this.datainfo[index],'right',0);
  270. }
  271. }
  272. var touch = e.touches[0];
  273. var item = this.datainfo[idx];
  274. var disX = this.startX - touch.clientX;
  275. if (disX >= 20) {
  276. if (disX > this.delBtnWidth) {
  277. disX = this.delBtnWidth;
  278. }
  279. if(type&&type=='peo'){
  280. this.$set(this.datainfo[idx].residentInfoList[aidx],'right',disX);
  281. }else{
  282. this.$set(this.datainfo[idx],'right',disX);
  283. }
  284. // this.csListArrl[idx].right=disX
  285. } else {
  286. // this.csListArrl[idx].right=0
  287. this.$set(this.datainfo[idx],'right',0);
  288. }
  289. },
  290. //触摸滑动结束
  291. drawEnd(e) {
  292. // console.log("滑动结束");
  293. var idx=e.currentTarget.dataset.idx
  294. var item = this.datainfo[idx];
  295. if (item.right >= this.delBtnWidth / 2) {
  296. // this.datainfo[idx].right=this.delBtnWidth
  297. // this.$set(this.datainfo[idx],'right',this.delBtnWidth);
  298. } else {
  299. this.datainfo[idx].right=0
  300. }
  301. },
  302. }
  303. }
  304. </script>
  305. <style lang="scss" scoped>
  306. .flex{display: flex;}
  307. .flexc{display: flex;align-items: center;}
  308. .mb10{margin-bottom: 20rpx;}
  309. // 互动
  310. .pd12{padding: 24rpx;}
  311. .hdlist{background: #FFFFFF;border-radius: 20rpx;position: relative;z-index: 1;
  312. .mhead{width: 56rpx;height: 56rpx;margin-right: 20rpx;border-radius: 50%;}
  313. .name{font-size: 28rpx;font-weight: bold;color: #272727;height: 56rpx;line-height: 56rpx;}
  314. .tit{font-weight: 500;font-size: 22rpx;color: #666666;}
  315. .time{font-weight: 500;font-size: 22rpx;color: #666666;}
  316. .line{width: 6rpx;height: 28rpx;border-radius: 4rpx;margin-right: 12rpx;
  317. &.bga{background: #FACA7D;}
  318. &.bgb{background: #86AFFF;}
  319. &.bgc{background: #93E9C2;}
  320. &.bgd{background: #DADADA;}
  321. }
  322. .txt{font-weight: 500;font-size: 26rpx;color: #272727;line-height: 36rpx;}
  323. .txta{font-weight: 500;font-size: 26rpx;color: #666666;}
  324. .rimg{width: 12rpx;height: 22rpx;}
  325. .shbtns{border-top: 2rpx solid #DADADA;
  326. .btn{border-radius: 20rpx;min-width: 110rpx;box-sizing: border-box;padding: 0 16rpx;
  327. height: 52rpx;display: flex;align-items: center;justify-content: center;flex:0 0 auto;margin-left: 20rpx;
  328. &.bga{border: 2rpx solid #06C770;background: #DAEFE6;color: #06C770;margin-left: 0;}
  329. &.bgb{border: 2rpx solid #FF6969;;background: #FFE7E7;color: #FF6969;}
  330. &.bgc{background: #0256FD;color: #FFFFFF;}
  331. }
  332. }
  333. }
  334. // 无数据
  335. .nodata{display: flex;flex-direction: column;align-items: center;
  336. image{width: 440rpx;height: 440rpx;}
  337. view{font-size: 30rpx;color: #666666;font-weight: bold;}
  338. }
  339. </style>