addData.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <template>
  2. <view class="content">
  3. <view>
  4. <view class="form-data">
  5. <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
  6. <u-form-item label="其他垃圾:" >
  7. <u-input placeholder="请输入" :maxlength="30" v-model="form.receiverName" />
  8. <text slot="right" style="color: #000000;">桶(约{{125}}kg)</text>
  9. </u-form-item>
  10. <u-form-item label="厨余垃圾:" >
  11. <u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
  12. <text slot="right" style="color: #000000;">桶(约{{125}}kg)</text>
  13. </u-form-item>
  14. <u-form-item label="建筑垃圾:" >
  15. <u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
  16. <text slot="right" style="color: #000000;">吨(约{{125}}kg)</text>
  17. </u-form-item>
  18. </u-form>
  19. </view>
  20. <view class="form-data remark">
  21. <text>信息备注</text>
  22. <textarea :auto-height="true" :maxlength="500" v-model="form.receiveAddress" class="receiveAddress"/>
  23. </view>
  24. <view class="form-data qyImg">
  25. <text>清运照片</text>
  26. <view class="info-main">
  27. <view class="photograph-con">
  28. <u-icon v-show="photograph" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph"></u-icon>
  29. <u-icon v-show="!photograph" name="camera" color="#bfbfbf" size="60" class="photograph-icon"></u-icon>
  30. <!-- <u-image src="/static/camera.png"></u-image> -->
  31. <u-image v-show="photograph" width="100%" height="100%" :src="photograph" @click="previewPictures"></u-image>
  32. </view>
  33. </view>
  34. </view>
  35. <u-button @click="open" class="submitBtn" type="success" shape="circle">提交</u-button>
  36. <uni-popup ref="openModal" type="center">
  37. <uni-popup-dialog content="确认提交吗?" @close="close" @confirm="onOk" :title="title"></uni-popup-dialog>
  38. </uni-popup>
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. import {
  44. saveAddress
  45. } from '@/api/receiveAddress.js'
  46. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  47. import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
  48. export default {
  49. components: {
  50. uniPopup,uniPopupDialog
  51. },
  52. data() {
  53. return {
  54. title:'',
  55. show:false,
  56. src:"",
  57. photograph: [], // 图片路径
  58. form: {
  59. receiverName: '',
  60. receiverPhone: '',
  61. receiveAddress: '' // 详细地址
  62. },
  63. };
  64. },
  65. onLoad(option) {
  66. console.log(option,option.id,'ppppppppp')
  67. // 查看
  68. if(option && option.id){
  69. }else {
  70. console.log('--------新增')
  71. this.photograph = []
  72. }
  73. },
  74. onUnload() {
  75. },
  76. methods: {
  77. // 签到拍照
  78. goPhotograph() {
  79. uni.chooseImage({
  80. count: 3, //默认9
  81. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  82. sourceType: ['album','camera'], //从相册选择
  83. success: (res) =>{
  84. console.log(JSON.stringify(res.tempFilePaths));
  85. // this.photograph = JSON.stringify(res.tempFilePaths)
  86. uni.showLoading({
  87. title: '保存中,请稍后...',
  88. mask: true
  89. })
  90. saveImgToAliOss(res.tempFilePaths[0],function(ret){
  91. console.log(ret)
  92. _this.photograph = ret.data
  93. uni.hideLoading()
  94. })
  95. }
  96. });
  97. // const _this = this;
  98. // wx.chooseImage({
  99. // count: 3, //最多可以选择的图片张数,默认9
  100. // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  101. // sourceType: ['camera'], //album 从相册选图,camera 使用相机,默认二者都有
  102. // success: function(res) {
  103. // // tempFilePaths 图片的本地文件路径列表,tempFiles 图片的本地文件列表,每一项是一个 File 对象
  104. // console.log(JSON.stringify(res.tempFilePaths));
  105. // uni.showLoading({
  106. // title: '保存中,请稍后...',
  107. // mask: true
  108. // })
  109. // // saveImgToAliOss(res.tempFilePaths[0],function(ret){
  110. // // console.log(ret)
  111. // // _this.photograph = ret.data
  112. // // uni.hideLoading()
  113. // // })
  114. // }
  115. // });
  116. },
  117. // 预览签到图
  118. previewPictures() {
  119. const photograph = [this.photograph];
  120. uni.previewImage({
  121. urls: photograph
  122. });
  123. },
  124. // 删除签到图
  125. cancelPhotograph() {
  126. setTimeout(() => {
  127. this.photograph = '';
  128. }, 500);
  129. },
  130. // 提交
  131. open(){
  132. this.$refs.openModal.open()
  133. },
  134. // 取消
  135. close(){
  136. },
  137. // 确认提交
  138. onOk() {
  139. this.$refs.openModal.open()
  140. // this.show=true
  141. // this.$refs.uForm.validate(valid => {
  142. // if (valid) {
  143. // console.log('验证通过');
  144. // if (this.form.receiverName ==='') {
  145. // uni.showToast({
  146. // title: '请输入姓名',
  147. // icon: 'none'
  148. // })
  149. // return false
  150. // }
  151. // if (this.form.receiverPhone ==='') {
  152. // uni.showToast({
  153. // title: '请输入电话',
  154. // icon: 'none'
  155. // })
  156. // return false
  157. // }
  158. // // 省市区
  159. // if(this.areaIdArr.length == 0){
  160. // uni.showToast({icon: 'none',title: '请选择省市区'})
  161. // return
  162. // }
  163. // if (this.form.receiveAddress ==='') {
  164. // uni.showToast({
  165. // title: '请输入详细地址',
  166. // icon: 'none'
  167. // })
  168. // return false
  169. // }
  170. // let params = {
  171. // receiverName: this.form.receiverName,
  172. // receiverPhone: this.form.receiverPhone,
  173. // receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
  174. // receiveAreas: this.areaIdArr.join(','),
  175. // receiveAddress: this.form.receiveAddress // 详细地址
  176. // }
  177. // if(this.form.id) {
  178. // params.id = this.form.id
  179. // }
  180. // saveAddress(params).then(res=>{
  181. // if(res.status == 200) {
  182. // uni.showToast({
  183. // title: res.message,
  184. // icon: 'none'
  185. // })
  186. // setTimeout(()=>{
  187. // uni.navigateBack()
  188. // },300)
  189. // }
  190. // })
  191. // } else {
  192. // console.log('验证失败');
  193. // }
  194. // });
  195. },
  196. // 拍照
  197. takePhoto() {
  198. const ctx = uni.createCameraContext();
  199. ctx.takePhoto({
  200. quality: 'high',
  201. success: (res) => {
  202. this.src = res.tempImagePath
  203. }
  204. });
  205. },
  206. error(e) {
  207. console.log(e.detail);
  208. }
  209. },
  210. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  211. onReady() {
  212. this.$refs.uForm.setRules(this.rules);
  213. }
  214. }
  215. </script>
  216. <style lang="scss">
  217. .content{
  218. width: 100%;
  219. height: 100vh;
  220. padding: 0;
  221. background: #F5F5F5;
  222. // .buttons{
  223. // font-size: 32upx;
  224. // display: block;
  225. // height: 80upx;
  226. // line-height: 80upx;
  227. // margin: 0 auto;
  228. // background-color: #0DC55F;
  229. // color: #fff;
  230. // border-radius: 50upx;
  231. // }
  232. .receiveAddress{
  233. width: 100%;
  234. line-height: 1.5em;
  235. box-sizing: border-box;
  236. font-style: normal;
  237. }
  238. .form-data{
  239. padding: 0 40upx;
  240. margin-bottom: 20upx;
  241. background-color: #fff;
  242. }
  243. .remark{
  244. padding: 40upx ;
  245. }
  246. .qyImg{
  247. padding: 40upx ;
  248. }
  249. .info-main {
  250. margin-top: 14upx;
  251. border-radius: 12upx;
  252. background-color: #fff;
  253. .location-icon {
  254. padding-left: 10upx;
  255. vertical-align: sub;
  256. }
  257. .photograph-con {
  258. border: 2upx dashed #bfbfbf;
  259. border-radius: 12upx;
  260. width: 160upx;
  261. height: 160upx;
  262. text-align: center;
  263. position: relative;
  264. .photograph-icon {
  265. display: inline-block;
  266. padding-top: 48upx;
  267. }
  268. .close-circle-icon {
  269. background-color: #fff;
  270. border-radius: 50%;
  271. position: absolute;
  272. right: -23upx;
  273. top: -23upx;
  274. z-index: 9;
  275. }
  276. }
  277. }
  278. .submitBtn{
  279. font-size: 32upx;
  280. display: block;
  281. width: 670upx;
  282. height: 80upx;
  283. line-height: 80upx;
  284. margin: 0 auto;
  285. color: #fff;
  286. border-radius: 50upx;
  287. }
  288. }
  289. </style>