houseList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. <template>
  2. <view class="page" :style="{'height':(h)+'px','padding-top':mt+'px'}">
  3. <c-nav-bar title="房间列表" :showIcon="true"></c-nav-bar>
  4. <view class="body">
  5. <!-- 房型信息 -->
  6. <view class="typeInfo">
  7. <view class="titleInfo">
  8. <text style="font-size: 32rpx; font-weight: 700;">房型信息</text>
  9. </view>
  10. <view class="cellBox">
  11. <text style="font-size: 30rpx; margin-right: 30rpx;">房型名称</text>
  12. <input v-model="form.name" type="text" placeholder="请输入房型"
  13. style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
  14. </view>
  15. <view class="bigRoom">
  16. <text style="font-size: 30rpx;color: black; margin-right: 90rpx;">简称</text>
  17. <input v-model="form.shortName" type="text" placeholder="请输入简称"
  18. style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
  19. </view>
  20. </view>
  21. <!-- <view class="shelves">
  22. <view style="margin-left: 30rpx;">
  23. <text style="font-size: 30rpx; ">是否上架</text>
  24. </view>
  25. <view style="margin-right: 30rpx;">
  26. <u-switch v-model="checked" size="50" active-color="#07C160"> </u-switch>
  27. </view>
  28. </view> -->
  29. <!-- 图片上传
  30. -->
  31. <view class="uploadPic">
  32. <view style=" margin-left: 30rpx;">
  33. <text style="font-size: 32rpx; font-weight: 700; ">封面图片({{fileList.length}}/1)</text>
  34. </view>
  35. <view style="margin-top: 20rpx; margin-left: 30rpx; color: #777; font-size: 24rpx;">
  36. <text>仅能上传1张,需展示房间内容</text>
  37. </view>
  38. <view class="pic">
  39. <!-- 图片 -->
  40. <u-upload :fileList="fileList" multiple :maxCount="1" :maxSize="1 * 1024 * 1024"
  41. @afterRead="afterRead" @oversize="overSize" width="120" height="120" @delete="deletePic">
  42. </u-upload>
  43. </view>
  44. </view>
  45. <!-- 房间列表 -->
  46. <view class="everyHouseList" style="padding-top: 20rpx;">
  47. <view class="HouseListTitleInfo">
  48. <text style="font-size: 32rpx; font-weight: 700;">房间列表</text>
  49. <text style="font-size: 24rpx; color: #777;">共{{form.roomFloor.length}}个房间</text>
  50. </view>
  51. <!-- 房间号 -->
  52. <view class="priceBoxWeek" v-for="(room,index) in form.roomFloor" :key="index" @scroll="scroll">
  53. <view class="weekendBox" style="display: flex; justify-content: space-between; align-items: center">
  54. <view style="display: flex; align-items: center;height:54rpx ">
  55. <view style="font-size: 30rpx;"> 楼层:</view>
  56. <input style="width: 150rpx; margin-bottom: 5rpx; font-size: 28rpx; height: 50rpx;"
  57. v-model="room.floor" />
  58. </view>
  59. <view style="display: flex; align-items: center;">
  60. <view style="font-size: 30rpx;"> 房间号:</view>
  61. <input style=" width: 150rpx; margin-bottom: 5rpx; font-size: 28rpx; height: 50rpx;"
  62. v-model="room.roomNumber" />
  63. </view>
  64. <view style="display: flex; margin-top: 10rpx;" @click="delRoom(index)">
  65. <u-icon name="trash"></u-icon>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="submit" @click="addRoom">
  71. <u-icon name="plus-circle" color=" #1372FF"></u-icon>
  72. <text style="color: #1372FF; font-size: 30rpx;">添加房间</text>
  73. </view>
  74. </view>
  75. <!-- 新增按钮 -->
  76. <view class="btn-btn" @click="addNewRoom()">
  77. <view class="btn">
  78. 确定
  79. </view>
  80. </view>
  81. </view>
  82. </view>
  83. </template>
  84. <script>
  85. export default {
  86. data() {
  87. return {
  88. checked: false,
  89. weekedChecked: false,
  90. action: '', //图片服务器地址
  91. fileList: [],
  92. form: {
  93. price: '',
  94. homestayId: '',
  95. mondayPrice: '',
  96. tuesdayPrice: '',
  97. wednesdayPrice: '',
  98. thursdayPrice: '',
  99. fridayPrice: '',
  100. saturdayPrice: '',
  101. sundayPrice: '',
  102. name: '',
  103. shortName: '',
  104. isPutaway: '',
  105. roomFloor: [{
  106. floor: '',
  107. roomNumber: ''
  108. }],
  109. cover: ''
  110. },
  111. }
  112. },
  113. onLoad({
  114. id,
  115. houseBaseId
  116. }) {
  117. this.form.homestayId = id
  118. // console.log(houseBaseId)
  119. this.id = houseBaseId
  120. // console.log(this.id)
  121. this.getTypeInfo()
  122. },
  123. methods: {
  124. scroll(e) {
  125. console.log('-----++++', e);
  126. uni.hideKeyboard()
  127. },
  128. // 删除图片
  129. deletePic(event) {
  130. this.fileList.splice(event.index, 1)
  131. },
  132. // 新增图片
  133. async afterRead(event) {
  134. const result = await this.uploadFilePromise(event.file[0].url);
  135. //图片路径
  136. console.log(result)
  137. },
  138. // 图片大小超出最大允许大小
  139. overSize(e) {
  140. uni.$u.toast('上传图片大小不能超过10MB!')
  141. },
  142. //上传图片
  143. uploadFilePromise(url) {
  144. console.log(url)
  145. return new Promise((resolve, reject) => {
  146. let a = uni.uploadFile({
  147. url: 'https://i.ringzle.com/island-cloud-server/oss/file/aliyunUpload',
  148. filePath: url,
  149. name: 'file',
  150. header: {
  151. token: wx.getStorageSync('access_token')
  152. },
  153. success: (res) => {
  154. console.log(res)
  155. let data = JSON.parse(res.data) //最终传给的是字符串,这里需要转换格式
  156. this.fileList.push({
  157. url: data.data.url
  158. })
  159. this.form.cover = data.data.url;
  160. resolve(data.data.url)
  161. }
  162. });
  163. })
  164. },
  165. // 添加&编辑房屋
  166. addNewRoom() {
  167. // console.log(this.form)
  168. if (!this.id) {
  169. if (this.checked === true) {
  170. this.form.isPutaway = 1
  171. } else {
  172. this.form.isPutaway = 0
  173. }
  174. this.$api.post('/merchant/hotel/mine/addHouseBase', this.form).then(res => {
  175. // console.log(res)
  176. if (res.data.code === 0) {
  177. this.$showToast('修改成功');
  178. setTimeout(() => {
  179. uni.reLaunch({
  180. url: '/pages/my/roomType'
  181. })
  182. }, 1500)
  183. }
  184. })
  185. console.log('这是')
  186. } else {
  187. // console.log('这是修改')
  188. // if(this.)
  189. if (this.checked === true) {
  190. this.form.isPutaway = 1
  191. } else {
  192. this.form.isPutaway = 0
  193. }
  194. this.$api.put('/merchant/hotel/mine/updHouseBase', this.form).then(res => {
  195. // console.log('修改成功')
  196. if (res.data.code === 0) {
  197. this.$showToast('修改成功')
  198. setTimeout(() => {
  199. uni.reLaunch({
  200. url: '/pages/my/roomType'
  201. })
  202. }, 1500)
  203. }
  204. })
  205. }
  206. },
  207. // 添加房间
  208. addRoom() {
  209. const newRoom = {
  210. floor: '',
  211. roomNumber: ''
  212. }
  213. this.form.roomFloor.push(newRoom)
  214. },
  215. // 删除房间
  216. delRoom(index) {
  217. this.form.roomFloor.splice(index, 1)
  218. },
  219. // 获取当前房型信息
  220. getTypeInfo() {
  221. if (this.id) {
  222. this.$api.get(`/merchant/hotel/mine/getHouseBaseInfo/${this.id}`).then((res) => {
  223. // console.log(res)
  224. if (res.data.code === 0) {
  225. this.form = res.data.data
  226. this.fileList.push({
  227. url: res.data.data.cover
  228. })
  229. if (this.form.isPutaway == 1) {
  230. this.checked = true
  231. } else {
  232. this.checked = false
  233. }
  234. }
  235. })
  236. } else {
  237. return
  238. }
  239. }
  240. }
  241. }
  242. </script>
  243. <style lang="scss">
  244. .btn-btn {
  245. width: 100%;
  246. height: 136rpx;
  247. background-color: #fff;
  248. position: fixed;
  249. bottom: 0;
  250. padding: 30rpx 0 0;
  251. // margin: 0 auto;
  252. z-index: 999999;
  253. // margin-top: 30rpx;
  254. // margin-left: 30rpx;
  255. }
  256. .btn {
  257. margin: 0 auto;
  258. width: 690rpx;
  259. height: 96rpx;
  260. background-color: #1372FF;
  261. color: #fff;
  262. display: flex;
  263. justify-content: center;
  264. align-items: center;
  265. font-size: 34rpx;
  266. border-radius: 48rpx;
  267. }
  268. .uicon-close {
  269. font-size: 30rpx !important;
  270. top: 8rpx !important;
  271. }
  272. .page {
  273. background: #F3F4F4;
  274. padding-bottom: 260rpx;
  275. box-sizing: border-box;
  276. overflow-y: auto;
  277. overflow-x: auto;
  278. }
  279. .body {
  280. padding-top: 20rpx;
  281. padding-left: 30rpx;
  282. padding-right: 30rpx;
  283. }
  284. .typeInfo {
  285. background-color: #fff;
  286. width: 100%;
  287. // height: 145px;
  288. border-radius: 5px;
  289. padding-top: 15px;
  290. padding-left: 7px;
  291. padding-right: 15px;
  292. box-sizing: border-box;
  293. }
  294. .titleInfo {
  295. // margin-top: 30rpx;
  296. margin-left: 20rpx;
  297. margin-bottom: 40rpx;
  298. }
  299. .cellBox {
  300. margin-left: 20rpx;
  301. display: flex;
  302. padding-bottom: 40rpx;
  303. border-bottom: 1rpx solid #E1E1E1;
  304. }
  305. .bigRoom {
  306. margin-left: 20rpx;
  307. width: 100%;
  308. height: 102rpx;
  309. display: flex;
  310. // justify-content: center;
  311. align-items: center;
  312. }
  313. .shelves {
  314. width: 695rpx;
  315. height: 102rpx;
  316. background-color: #fff;
  317. margin-top: 20rpx;
  318. border-radius: 10rpx;
  319. display: flex;
  320. justify-content: space-between;
  321. align-items: center;
  322. // padding-left: 30rpx;
  323. // padding-right: 30rpx;
  324. }
  325. .uploadPic {
  326. padding-top: 28rpx;
  327. width: 690rpx;
  328. // height: 293rpx;
  329. background-color: #fff;
  330. border-radius: 10rpx;
  331. margin-top: 20rpx;
  332. }
  333. .pic {
  334. // margin-left: 30rpx;
  335. // margin-top: 20rpx;
  336. // width: 190rpx;
  337. // height: 120rpx;
  338. margin: 20rpx 30rpx;
  339. padding-bottom: 20rpx;
  340. }
  341. // .custom-upload-button{
  342. // width: 190rpx;
  343. // height: 120rpx;
  344. // }
  345. .priceInfo {
  346. width: 690rpx;
  347. // height: 908rpx;
  348. background-color: #fff;
  349. border-radius: 10rpx;
  350. margin-top: 20rpx;
  351. padding-top: 30rpx;
  352. }
  353. .week {
  354. padding-left: 30rpx;
  355. padding-right: 30rpx;
  356. margin-bottom: 20rpx;
  357. }
  358. .weekend {
  359. display: flex;
  360. justify-content: space-between;
  361. border-bottom: 1rpx solid #E1E1E1;
  362. padding-bottom: 30rpx;
  363. }
  364. .everyDay {
  365. padding-left: 30rpx;
  366. padding-right: 30rpx;
  367. width: 100%;
  368. // background-color: pink;
  369. height: 102rpx;
  370. display: flex;
  371. align-items: center;
  372. }
  373. .days {
  374. display: flex;
  375. align-items: center;
  376. border-bottom: 1rpx solid #E1E1E1;
  377. padding-bottom: 30rpx;
  378. }
  379. .priceBoxWeek {
  380. display: flex;
  381. align-items: center;
  382. padding-left: 30rpx;
  383. padding-right: 30rpx;
  384. }
  385. .weekendBox {
  386. width: 630rpx;
  387. display: flex;
  388. align-items: center;
  389. // margin-right: 90rpx;
  390. // justify-content: space-between;
  391. border-bottom: 1rpx solid #E1E1E1;
  392. height: 102rpx;
  393. overflow: hidden;
  394. box-sizing: border-box;
  395. }
  396. .everyHouseList {
  397. // padding-right: 30rpx;
  398. width: 690rpx;
  399. // height: 908rpx;
  400. background-color: #fff;
  401. border-radius: 10rpx;
  402. margin-top: 20rpx;
  403. // padding-top: 30rpx;
  404. }
  405. .HouseListTitleInfo {
  406. margin-right: 30rpx;
  407. margin-left: 20rpx;
  408. margin-bottom: 40rpx;
  409. display: flex;
  410. justify-content: space-between;
  411. }
  412. .submit {
  413. margin-top: 20rpx;
  414. border-radius: 10rpx;
  415. width: 690rpx;
  416. height: 102rpx;
  417. background-color: #fff;
  418. display: flex;
  419. justify-content: center;
  420. align-items: center;
  421. }
  422. .addSubmit {
  423. width: 100%;
  424. position: fixed;
  425. /* 固定定位 */
  426. bottom: 20rpx;
  427. /* 底部对齐 */
  428. left: 0;
  429. /* 可选:左对齐 */
  430. // width: 690rpx;
  431. /* 可选:宽度为 100% */
  432. height: 96rpx;
  433. margin-left: 30rpx;
  434. // padding-top: 20rpx;
  435. margin-top: 30rpx;
  436. background-color: #1372FF;
  437. border-radius: 48rpx;
  438. }
  439. .uploadPicPic {
  440. position: relative;
  441. top: -96rpx;
  442. }
  443. .u-upload__deletable[data-v-69e2a36e] {
  444. width: 0 !important;
  445. }
  446. </style>