addData.vue 7.8 KB

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