stayInfo.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <template>
  2. <view class="pages" :style="{'height':(h)+'px','padding-top':mt+'px'}">
  3. <c-nav-bar title="酒店民宿信息" :showIcon="true"></c-nav-bar>
  4. <view class="content">
  5. <view class="card" @click="goToPosition()">
  6. <text class="label">位置定位</text>
  7. <u-icon name="arrow-right" size="24"></u-icon>
  8. </view>
  9. <view class="card">
  10. <text class="label">联系电话</text>
  11. <u--input inputAlign="right" placeholder="请输入内容" border="none" v-model="stayInfo.landlinePhone" style="text-align: right;"></u--input>
  12. </view>
  13. <view class="card c2">
  14. <view class="tit">酒店简介</view>
  15. <view>
  16. <u--textarea customStyle="font-size:28rpx;line-height:28rpx" border='none' maxlength="300" count v-model="stayInfo.introduction" :value="stayInfo.introduction"
  17. placeholder="请输入酒店简介" height='360' ></u--textarea>
  18. </view>
  19. </view>
  20. <view class="card c2">
  21. <view class="tit">内饰照片</view>
  22. <view class="imgs">
  23. <!-- <image src="" v-for="(item,index) in imgUrlList" :key="index"></image> -->
  24. <u-upload ref="uUpload" uploadText="上传图片" :fileList="imgUrlList" :maxSize="10 * 1024 * 1024" width="180"
  25. height="120" @afterRead="afterRead" @delete="deletePic">
  26. </u-upload>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="bottom">
  31. <view class="btn" @click="save()">
  32. 确定
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. homestayId: uni.getStorageSync('homestayId')||0,
  42. value: '',
  43. value1: '',
  44. fileList: [],
  45. fileList1: [],
  46. imgUrlList: [],
  47. fileList2: [],
  48. stayInfo: {
  49. picList: []
  50. },
  51. }
  52. },
  53. onLoad() {
  54. this.getStayInfo()
  55. },
  56. methods: {
  57. goToPosition() {
  58. const qwe = JSON.stringify(this.stayInfo)
  59. uni.navigateTo({
  60. url: '/pagesMy/stayInfo/roomPosition?item=' + JSON.stringify(this.stayInfo)
  61. })
  62. },
  63. getStayInfo() {
  64. this.$api.get('/merchant/hotel/mine/getMerchantHomestayInfo/'+this.homestayId).then(res => {
  65. if (res.data.code == 0) {
  66. this.stayInfo = res.data.data;
  67. this.stayInfo.picList.forEach((item) => {
  68. this.imgUrlList.push({
  69. url: item
  70. })
  71. })
  72. }
  73. })
  74. },
  75. // 删除图片
  76. deletePic(event) {
  77. this.imgUrlList.splice(event.index, 1)
  78. },
  79. // 新增图片
  80. async afterRead(event) {
  81. let lists = [].concat(event.file)
  82. let fileListLen = this.imgUrlList.length
  83. lists.map((item) => {
  84. this.imgUrlList.push({
  85. ...item,
  86. status: 'uploading',
  87. message: '上传中'
  88. })
  89. })
  90. for (let i = 0; i < lists.length; i++) {
  91. const result = await this.uploadFilePromise(lists[i].url)
  92. let item = this.imgUrlList[fileListLen]
  93. this.imgUrlList.splice(fileListLen, 1, Object.assign(item, {
  94. status: 'success',
  95. message: '',
  96. url: result
  97. }))
  98. fileListLen++
  99. }
  100. console.log(this.imgUrlList)
  101. },
  102. uploadFilePromise(url) {
  103. return new Promise((resolve, reject) => {
  104. let a = uni.uploadFile({
  105. url: 'https://i.ringzle.com/island-cloud-server/oss/file/upload', // 仅为示例,非真实的接口地址
  106. filePath: url,
  107. name: 'file',
  108. formData: {
  109. user: 'test'
  110. },
  111. success: (res) => {
  112. console.log(res)
  113. let data = JSON.parse(res.data);
  114. console.log(data)
  115. resolve(data.data.url)
  116. }
  117. });
  118. })
  119. },
  120. save(){
  121. this.stayInfo.picList=[];
  122. this.imgUrlList.forEach((i)=>{
  123. if(i.url){
  124. this.stayInfo.picList.push(i.url)
  125. }
  126. })
  127. this.$api.post('/merchant/hotel/mine/updMHomestayInfo',this.stayInfo).then(res=>{
  128. console.log(res)
  129. })
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss" scoped>
  135. /deep/.u-cell__body {
  136. padding: 0;
  137. }
  138. ::v-deep .u-icon__icon{
  139. font-size: 40rpx!important;
  140. margin-bottom: 10rpx;
  141. }
  142. ::v-deep .u-upload__button__text{
  143. color:#B9C2D0!important;
  144. font-size: 20rpx!important;
  145. }
  146. ::v-deep .u-cell__body {
  147. padding: 0;
  148. }
  149. .pages {
  150. background: #F9FAFC;
  151. .content {
  152. padding: 20rpx 30rpx;
  153. height: 100vh;
  154. .card {
  155. background: #fff;
  156. border-radius: 16rpx;
  157. padding: 30rpx;
  158. margin-bottom: 20rpx;
  159. display: flex;
  160. align-items: center;
  161. justify-content: space-between;
  162. &.c2{
  163. display: block;
  164. }
  165. .label {
  166. font-size: 30rpx;
  167. }
  168. .tit {
  169. font-size: 30rpx;
  170. font-weight: bold;
  171. margin-bottom: 20rpx;
  172. }
  173. .upload {
  174. margin-top: 48rpx;
  175. width: 100%;
  176. height: 200rpx;
  177. border-radius: 16rpx;
  178. background-color: #F5F8FA;
  179. display: flex;
  180. align-items: center;
  181. text-align: center;
  182. .upload-one {
  183. margin: 0 245rpx;
  184. width: 200rpx;
  185. height: 200rpx;
  186. image {
  187. width: 100%;
  188. height: 100%;
  189. }
  190. }
  191. }
  192. }
  193. }
  194. .bottom {
  195. position: fixed;
  196. bottom: 0;
  197. background: #fff;
  198. width: 100%;
  199. padding: 20rpx 0 30rpx;
  200. box-sizing: border-box;
  201. .btn {
  202. background: #33AFFC;
  203. color: white;
  204. text-align: center;
  205. height: 96rpx;
  206. margin: 0 auto;
  207. font-size: 34rpx;
  208. line-height: 96rpx;
  209. align-self: center;
  210. border-radius: 48rpx;
  211. width: 690rpx;
  212. }
  213. }
  214. }
  215. </style>