stayInfo.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  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. filters: {
  57. // 去除富文本标签样式
  58. removeHtmlStyle(html) {
  59. const relStyle = /style\s*?=\s*?(['"])[\s\S]*?\1/g
  60. const relTag = /<.+?>/g
  61. const relClass = /class\s*?=\s*?(['"])[\s\S]*?\1/g
  62. let newHtml = ''
  63. if (html) {
  64. newHtml = html.replace(relStyle, '')
  65. newHtml = newHtml.replace(relTag, '')
  66. newHtml = newHtml.replace(relClass, '')
  67. }
  68. return newHtml
  69. }
  70. },
  71. methods: {
  72. goToPosition() {
  73. const qwe = JSON.stringify(this.stayInfo)
  74. uni.navigateTo({
  75. url: '/pagesMy/stayInfo/roomPosition?item=' + JSON.stringify(this.stayInfo)
  76. })
  77. },
  78. getStayInfo() {
  79. this.$api.get('/merchant/hotel/mine/getMerchantHomestayInfo/'+this.homestayId).then(res => {
  80. if (res.data.code == 0) {
  81. this.stayInfo = res.data.data;
  82. this.stayInfo.picList.forEach((item) => {
  83. this.imgUrlList.push({
  84. url: item
  85. })
  86. })
  87. }
  88. })
  89. },
  90. // 删除图片
  91. deletePic(event) {
  92. this.imgUrlList.splice(event.index, 1)
  93. },
  94. // 新增图片
  95. async afterRead(event) {
  96. let lists = [].concat(event.file)
  97. let fileListLen = this.imgUrlList.length
  98. lists.map((item) => {
  99. this.imgUrlList.push({
  100. ...item,
  101. status: 'uploading',
  102. message: '上传中'
  103. })
  104. })
  105. for (let i = 0; i < lists.length; i++) {
  106. const result = await this.uploadFilePromise(lists[i].url)
  107. let item = this.imgUrlList[fileListLen]
  108. this.imgUrlList.splice(fileListLen, 1, Object.assign(item, {
  109. status: 'success',
  110. message: '',
  111. url: result
  112. }))
  113. fileListLen++
  114. }
  115. console.log(this.imgUrlList)
  116. },
  117. uploadFilePromise(url) {
  118. return new Promise((resolve, reject) => {
  119. let a = uni.uploadFile({
  120. url: 'https://i.ringzle.com/island-cloud-server/oss/file/upload', // 仅为示例,非真实的接口地址
  121. filePath: url,
  122. name: 'file',
  123. formData: {
  124. user: 'test'
  125. },
  126. success: (res) => {
  127. console.log(res)
  128. let data = JSON.parse(res.data);
  129. console.log(data)
  130. resolve(data.data.url)
  131. }
  132. });
  133. })
  134. },
  135. save(){
  136. if(!this.$u.test.mobile(this.stayInfo.landlinePhone)){
  137. this.$showToast('请输入正确手机号');
  138. return
  139. }
  140. this.stayInfo.picList=[];
  141. this.imgUrlList.forEach((i)=>{
  142. if(i.url){
  143. this.stayInfo.picList.push(i.url)
  144. }
  145. })
  146. this.$api.post('/merchant/hotel/mine/updMHomestayInfo',this.stayInfo).then(res=>{
  147. console.log(res)
  148. })
  149. }
  150. }
  151. }
  152. </script>
  153. <style lang="scss" scoped>
  154. /deep/.u-cell__body {
  155. padding: 0;
  156. }
  157. ::v-deep .u-icon__icon{
  158. font-size: 40rpx!important;
  159. margin-bottom: 10rpx;
  160. }
  161. ::v-deep .u-upload__button__text{
  162. color:#B9C2D0!important;
  163. font-size: 20rpx!important;
  164. }
  165. ::v-deep .u-cell__body {
  166. padding: 0;
  167. }
  168. .pages {
  169. background: #F9FAFC;
  170. .content {
  171. padding: 20rpx 30rpx;
  172. height: 100vh;
  173. .card {
  174. background: #fff;
  175. border-radius: 16rpx;
  176. padding: 30rpx;
  177. margin-bottom: 20rpx;
  178. display: flex;
  179. align-items: center;
  180. justify-content: space-between;
  181. &.c2{
  182. display: block;
  183. }
  184. .label {
  185. font-size: 30rpx;
  186. }
  187. .tit {
  188. font-size: 30rpx;
  189. font-weight: bold;
  190. margin-bottom: 20rpx;
  191. }
  192. .upload {
  193. margin-top: 48rpx;
  194. width: 100%;
  195. height: 200rpx;
  196. border-radius: 16rpx;
  197. background-color: #F5F8FA;
  198. display: flex;
  199. align-items: center;
  200. text-align: center;
  201. .upload-one {
  202. margin: 0 245rpx;
  203. width: 200rpx;
  204. height: 200rpx;
  205. image {
  206. width: 100%;
  207. height: 100%;
  208. }
  209. }
  210. }
  211. }
  212. }
  213. .bottom {
  214. position: fixed;
  215. bottom: 0;
  216. background: #fff;
  217. width: 100%;
  218. padding: 20rpx 0 30rpx;
  219. box-sizing: border-box;
  220. .btn {
  221. background: #33AFFC;
  222. color: white;
  223. text-align: center;
  224. height: 96rpx;
  225. margin: 0 auto;
  226. font-size: 34rpx;
  227. line-height: 96rpx;
  228. align-self: center;
  229. border-radius: 48rpx;
  230. width: 690rpx;
  231. }
  232. }
  233. }
  234. </style>