index.jsx 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. import React, { useEffect, useMemo, useState } from 'react'
  2. import Taro from "@tarojs/taro";
  3. import { useSelector } from 'react-redux'
  4. import { View, Input, Text, Image, Form } from '@tarojs/components'
  5. import Layout from '../../../layout/index'
  6. import Tab from '../../../compents/tab/index'
  7. import Container from '../../../compents/container/index'
  8. import locationicon from '../../../assets/locationicon.png'
  9. import uploadicon from '../../../assets/uploadicon.png'
  10. import request, { uploadFiles } from '../../../util/request'
  11. import './index.scss'
  12. const index = (props) => {
  13. const user = useSelector(state => state.user)
  14. const { shopKeeperList = [] } = user
  15. const shopId = shopKeeperList[0].shopId || ''
  16. const [userRole, setUserRole] = useState('1')
  17. const [pageState, setPageState] = useState('1')
  18. const [list, setList] = useState([])
  19. const [imgUrl, setImgUrl] = useState('')
  20. const [address, setAddress] = useState({})
  21. const [parking, setParking] = useState({})
  22. useEffect(() => {
  23. }, [])
  24. const onChooseLocation = (type) => {
  25. console.log(333)
  26. wx.chooseLocation({
  27. success: (res) => {
  28. console.log(res)
  29. if (type == 'address') {
  30. setAddress(res)
  31. } else {
  32. setParking(res)
  33. }
  34. }
  35. })
  36. }
  37. const formSubmit = (e) => {
  38. // console.log(e.detail, 'formSubmit')
  39. if(!e.detail.value?.title){
  40. wx.showToast({
  41. title: '请完善房源信息',
  42. icon: 'none',
  43. duration: 2000
  44. })
  45. return
  46. }
  47. const value = e.detail.value
  48. const data = {
  49. ...value,
  50. // address: `${value.address}____${value.addressdetail}`,
  51. // parking: `${value.parking}____${value.parkingdetail}`,
  52. lngLat: `${address.latitude},${address.longitude}`,
  53. parkLngLat: `${address.latitude},${address.longitude}`,
  54. desc:imgUrl,
  55. }
  56. console.log(data,e.detail.value,'formSubmit')
  57. request({ url: '/taHouse', method: 'post', data:{...data} }).then((res) => {
  58. if (res.data.code == 1000)
  59. Taro.navigateBack({
  60. delta: 1
  61. })
  62. })
  63. }
  64. const formReset = () => {
  65. console.log('formReset')
  66. }
  67. const onAdderssChange = (e) => {
  68. console.log(e,'formReset')
  69. setAddress({
  70. ...address,
  71. address:e.detail.value
  72. })
  73. }
  74. const onParkingAdderssChange = (e) => {
  75. console.log(e,'formReset')
  76. setParking({
  77. ...parking,
  78. address:e.detail.value
  79. })
  80. }
  81. return <View className='addnewhouse'>
  82. <Form onSubmit={formSubmit} onReset={formReset}>
  83. {/* <Form onSubmit={this.formSubmit} onReset={this.formReset} >
  84. <View className='example-body'>
  85. <Switch name='switch' className='form-switch'></Switch>
  86. </View>
  87. </Form> */}
  88. <Layout>
  89. <View className='inputstyle-view'>
  90. <Text className='title'>房源名称</Text>
  91. <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
  92. <Input name='title' placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
  93. </Container>
  94. </View>
  95. {/* <View className='inputstyle-view'>
  96. <Text className='title'>房屋名称</Text>
  97. <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
  98. <Input name='title' placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
  99. </Container>
  100. </View> */}
  101. <View className='inputstyle-view'>
  102. <Text className='title'>位置信息</Text>
  103. <View style={{ display: 'flex' }}>
  104. <Container className='inputstyle-view-card' style={{ width: '100%', borderRadius: '20rpx', padding: '0 40rpx' }}>
  105. <Input name='shortAddress' value={address.name} disabled placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
  106. </Container>
  107. <Container className='map-view-icon' onClick={() => onChooseLocation('address')}>
  108. <Image className='icon' mode='widthFix' style={{ width: '100%' }} style={{ width: '40rpx' }} src={locationicon} />
  109. </Container>
  110. </View>
  111. </View>
  112. <View className='inputstyle-view'>
  113. <Text className='title'>具体地址</Text>
  114. <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
  115. <Input name='address' value={address.address} onInput={onAdderssChange} placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
  116. </Container>
  117. </View>
  118. <View className='inputstyle-view'>
  119. <Text className='title'>停车场地址</Text>
  120. <View style={{ display: 'flex' }}>
  121. <Container className='inputstyle-view-card' style={{ width: '100%', borderRadius: '20rpx', padding: '0 40rpx' }}>
  122. <Input name='shortParking' value={parking.name} disabled placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
  123. </Container>
  124. <Container className='map-view-icon' onClick={() => onChooseLocation('parking')}>
  125. <Image className='icon' mode='widthFix' style={{ width: '100%' }} style={{ width: '40rpx' }} src={locationicon} />
  126. </Container>
  127. </View>
  128. </View>
  129. <View className='inputstyle-view'>
  130. <Text className='title'>具体地址</Text>
  131. <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
  132. <Input name='parking' value={parking.address} onInput={onParkingAdderssChange} placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
  133. </Container>
  134. </View>
  135. <View className='inputstyle-view'>
  136. <Text className='title'>WiFi名称</Text>
  137. <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
  138. <Input name='wifiName' placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
  139. </Container>
  140. </View>
  141. <View className='inputstyle-view'>
  142. <Text className='title'>WiFi密码</Text>
  143. <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
  144. <Input name='wifiPassword' placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
  145. </Container>
  146. </View>
  147. <View className='inputstyle-view'>
  148. <Text className='title'>其他指引</Text>
  149. <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx',textAlign:'center', padding: '0 40rpx' }} >
  150. {imgUrl&&<Image className='guide-view-img' mode='widthFix' onClick={() => Taro.chooseImage({
  151. count: 1,
  152. // sizeType: ['original', 'compressed'],
  153. sourceType: ['album'],
  154. success: (res) => {
  155. // tempFilePath可以作为img标签的src属性显示图片
  156. const tempFilePaths = res.tempFilePaths
  157. uploadFiles(tempFilePaths).then((res) => {
  158. console.log(res, 'uploadFiles')
  159. setImgUrl(res[0])
  160. }).catch((e) => {
  161. console.log(e, 'err')
  162. })
  163. // setImgurl(tempFilePaths[0])
  164. }
  165. })} src={imgUrl}></Image>}
  166. {!imgUrl&&<View style={{minHeight:'400rpx',paddingTop:'150rpx'}}>
  167. <Image className='guide-view-img' mode='widthFix' style={{width:'100rpx'}} onClick={() => Taro.chooseImage({
  168. count: 1,
  169. // sizeType: ['original', 'compressed'],
  170. sourceType: ['album'],
  171. success: (res) => {
  172. // tempFilePath可以作为img标签的src属性显示图片
  173. const tempFilePaths = res.tempFilePaths
  174. uploadFiles(tempFilePaths).then((res) => {
  175. console.log(res, 'uploadFiles')
  176. setImgUrl(res[0])
  177. }).catch((e) => {
  178. console.log(e, 'err')
  179. })
  180. // setImgurl(tempFilePaths[0])
  181. }
  182. })} src={uploadicon}></Image>
  183. <View>上传图片</View>
  184. </View>}
  185. {/* <Input placeholderClass='placeholderinput' className='input' type='text' placeholder='小区/写字楼/大厦等' /> */}
  186. </Container>
  187. </View>
  188. </Layout>
  189. <Tab formType="submit" className='addhousetab' pageState='3' value={['取消', '确认新增']} onClick={[(e) => {
  190. Taro.navigateBack({
  191. delta: 1
  192. })
  193. }, () => { console.log('33') }]}></Tab>
  194. </Form>
  195. {/* Taro.chooseImage({
  196. sourceType: ['album'],
  197. success: (res) => {
  198. const tempFilePaths = res.tempFilePaths
  199. uploadFiles(tempFilePaths).then((res) => {
  200. console.log(res, 'uploadFiles')
  201. setImgUrl(res[0])
  202. })
  203. }
  204. }) */}
  205. </View>
  206. }
  207. export default index