bottomSheetMore.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <view class="share">
  3. <view :class="{'share-box': shareState}" @click="handleHiddenShare">
  4. </view>
  5. <view class="share-item" :class="{'share-show': shareState}">
  6. <view class="share-to">
  7. <text style="font-size: 16px;color: #000;">{{title}}</text>
  8. </view>
  9. <scroll-view scroll-y="true" class="scroll-Y">
  10. <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in historyList"
  11. :key="key">
  12. <view class="uni-media-list">
  13. <view class="uni-media-list-body">
  14. <view class="uni-media-list-text-top">
  15. <view class="tit-text">施工时间:</view><view class="normal-text">{{value.constructTime}}</view>
  16. </view>
  17. <!-- <view v-if="title=='进场'||title=='导向'||title=='挖孔'||title=='回拖'"
  18. class="uni-media-list-text-top" style=" ">
  19. 描述:{{value.remark}}</view> -->
  20. <view v-if="title=='进场'||title=='导向'||title=='挖孔'||title=='回拖'"
  21. class="uni-media-list-text-top">
  22. <view class="uni-common-mt" style="width: 100%;">
  23. <text class="uni-title uni-common-pl" style=" font-size: 13px;color:
  24. #000;margin-top: 5px;">描述:</text>
  25. <view style="width: 100%;padding-right: 20rpx;box-sizing: border-box;">
  26. <textarea class="textarea" maxlength="255" :disabled="true"
  27. placeholder-style="padding: 10rpx;"
  28. style="width: 100%;height: 100%;border: 1rpx solid #cccccc; border-radius: 15rpx;padding: 10rpx;line-height:normal;"
  29. auto-height>{{value.remark}}</textarea>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="cz-style" v-for="(a,index) in value.zEngineeringMaterialBo" :key="index">
  34. <view class="uni-media-list-text-top" style=" ">
  35. <view class="tit-text">材质:</view><view class="normal-text">{{a.materialQualityName}}</view>
  36. </view>
  37. <view class="uni-media-list-text-top" style=" ">
  38. <view class="tit-text">规格:</view><view class="normal-text">{{a.specificationsName}}</view>
  39. </view>
  40. <view class="uni-media-list-text-top" style=" ">
  41. <view class="tit-text">数量:</view><view class="normal-text">{{a.number}}</view>
  42. </view>
  43. </view>
  44. <view class="uni-media-list-text-top">
  45. <view class="tit-text">负责人:</view>
  46. <view class="normal-text">{{value.constructUser}}</view>
  47. </view>
  48. <view class="uni-media-list-text-top">
  49. <view class="tit-text">负责人联系电话:</view>
  50. <view class="normal-text">{{value.constructPhone}}</view>
  51. </view>
  52. <view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px;">
  53. <text style="margin-left: 30rpx;margin-top: 6rpx;">{{ value.published_at }}</text>
  54. <view v-for="(item,index) in value.zEngiineeringPhotoBoList" :key="index"
  55. style="position: relative;">
  56. <view
  57. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg' || item.substring(item.length - 3) == 'jpeg'">
  58. <image :src="item" mode=""
  59. style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  60. @click="showPhoto(index,value.zEngiineeringPhotoBoList)">
  61. </image>
  62. </view>
  63. <view v-else>
  64. <video :src="item"
  65. style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. </scroll-view>
  73. </view>
  74. </view>
  75. </template>
  76. <script>
  77. export default {
  78. props: {
  79. data: {
  80. type: Object,
  81. default: {}
  82. },
  83. TitleType: {
  84. type: String
  85. }
  86. },
  87. created() {
  88. this.getParamsData();
  89. },
  90. watch: {
  91. data(data) {
  92. this.getParamsData();
  93. }
  94. },
  95. data() {
  96. return {
  97. outPutData: {},
  98. historyList: [], //历史数据
  99. historyPhotoList: [], //历史图片数据
  100. shareState: false,
  101. title: '',
  102. };
  103. },
  104. methods: {
  105. // isEmpty(str) {
  106. // return (!str || 0 === str.length);
  107. // },
  108. showPhoto(index, list) {
  109. uni.previewImage({
  110. current: index,
  111. urls: list,
  112. })
  113. },
  114. getParamsData() {
  115. var selectData = this.data;
  116. this.outPutData = selectData;
  117. //this.title = selectData.zEngineeringNodeBo.type;
  118. //this.historyList = selectData.zEngineeringNodeBo.zEngineeringInfoBoList;
  119. if (this.TitleType == '市政工程') {
  120. this.title = '市政工程';
  121. this.historyList = selectData.zEngineeringNodeBoList[0].zEngineeringInfoBoList;
  122. } else {
  123. this.title = this.TitleType;
  124. this.historyList = selectData.zEngineeringNodeBo.zEngineeringInfoBoList;
  125. }
  126. },
  127. // 显示分享
  128. handleShowShare() {
  129. this.shareState = true;
  130. },
  131. // 隐藏分享
  132. handleHiddenShare() {
  133. this.shareState = false;
  134. }
  135. }
  136. }
  137. </script>
  138. <style lang="scss">
  139. .uni-media-list-body{
  140. border:1px solid #eee;
  141. border-radius: 40rpx;
  142. margin:10rpx 30rpx 20rpx;
  143. padding: 10rpx 0 40rpx;
  144. box-shadow: 0 0 5px #eee;
  145. }
  146. .share {
  147. width: 100%;
  148. height: 100%;
  149. }
  150. .tit-text {
  151. color: #4f535a;
  152. margin-right: 20rpx;
  153. }
  154. .normal-text{
  155. }
  156. .cz-style{
  157. background: #e8f4f9;
  158. margin: 20rpx;
  159. padding: 10rpx;
  160. border-radius: 20rpx;
  161. border: 1px solid #d4e3f0;
  162. }
  163. .uni-media-list-text-top {
  164. font-size: 14px;
  165. color: #696969;
  166. padding: 20rpx 20rpx;
  167. border-bottom: 1px solid #eee;
  168. display: flex;
  169. align-items: center;
  170. }
  171. .share-box {
  172. width: 100%;
  173. height: 100%;
  174. position: fixed;
  175. top: 0rpx;
  176. left: 0rpx;
  177. bottom: 0rpx;
  178. right: 0rpx;
  179. background-color: rgba(0, 0, 0, 0.4);
  180. transition: .3s;
  181. z-index: 999;
  182. }
  183. // 进入分享动画
  184. .share-show {
  185. transition: all 0.3s ease;
  186. transform: translateY(0%) !important;
  187. border-radius: 20px 20px 0px 0px;
  188. }
  189. .scroll-Y {
  190. height: 58vh;
  191. }
  192. // 离开分享动画
  193. .share-item {
  194. position: fixed;
  195. left: 0;
  196. bottom: 0;
  197. width: 100%;
  198. height: 70%;
  199. background-color: #FFFFFF;
  200. transition: all 0.3s ease;
  201. transform: translateY(100%);
  202. z-index: 1999;
  203. .share-to {
  204. width: 100%;
  205. height: 30px;
  206. display: flex;
  207. justify-content: left;
  208. margin: 30rpx 35rpx;
  209. align-items: center;
  210. // &::after {
  211. // content: '';
  212. // width: 240rpx;
  213. // height: 0rpx;
  214. // border-top: 1px solid #E4E7ED;
  215. // -webkit-transform: scaleY(0.5);
  216. // transform: scaleY(0.5);
  217. // margin-left: 30rpx;
  218. // }
  219. // &::before {
  220. // content: '';
  221. // width: 240rpx;
  222. // height: 0rpx;
  223. // border-top: 1px solid #E4E7ED;
  224. // -webkit-transform: scaleY(0.5);
  225. // transform: scaleY(0.5);
  226. // margin-right: 30rpx;
  227. // }
  228. }
  229. .content {
  230. width: 100%;
  231. height: auto;
  232. display: flex;
  233. flex-wrap: wrap;
  234. .block {
  235. width: 100%;
  236. display: flex;
  237. flex-direction: column;
  238. justify-content: center;
  239. align-items: left;
  240. height: auto;
  241. image {
  242. width: 80rpx;
  243. height: 80rpx;
  244. }
  245. text {
  246. margin-top: 16rpx;
  247. font-size: 28rpx;
  248. color: #606266;
  249. }
  250. }
  251. }
  252. .cancel {
  253. width: 100%;
  254. height: 3rem;
  255. display: flex;
  256. justify-content: center;
  257. align-items: center;
  258. border-top: 1rpx solid #E4E7ED;
  259. }
  260. }
  261. </style>