yuyue.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <template>
  2. <view class="content">
  3. <view class="content-form">
  4. <view class="content-detail">
  5. <view class="detail-text">
  6. <u-image src="/static/pop_icon_warning.png" width="32" height="32"></u-image>
  7. <text>请按照回收要求合理预约服务</text>
  8. </view>
  9. <view class="detail-xqtext">查看详情</view>
  10. </view>
  11. <view class="form-data">
  12. <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
  13. <u-form-item prop="time" label="预约时间:" >
  14. <u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
  15. <u-input placeholder="请选择预约时间" v-model="form.time" @click="selectTime" :disabled="true"/>
  16. <u-icon name="arrow-right" slot="right" @click="selectTime"></u-icon>
  17. </u-form-item>
  18. <u-form-item prop="info" label="用户信息:" >
  19. <u-input placeholder="请选择用户信息" v-model="form.info" @click="selectUserInfo" :disabled="true"/>
  20. <u-icon name="arrow-right" slot="right" @click="selectUserInfo"></u-icon>
  21. </u-form-item>
  22. </u-form>
  23. </view>
  24. <view class="form-data rubbishType">
  25. <view class="rubbishType-title">回收分类</view>
  26. <view class="rubbishType-tags">
  27. <u-tag text="纸质类" shape="circle" type="info" @click="chooseRubbishType"/><u-tag text="金属类" shape="circle" type="info" @click="chooseRubbishType"/><u-tag text="衣物类" shape="circle" type="info" @click="chooseRubbishType"/><u-tag text="塑料类" shape="circle" type="info" @click="chooseRubbishType"/>
  28. </view>
  29. </view>
  30. <view class="form-data rubbishType">
  31. <view class="rubbishType-title">预估重量</view>
  32. <view class="rubbishType-tags">
  33. <u-tag text="10-50克" shape="circle" :type="weightTagType" @click="chooseWeight(1)"/><u-tag text="50-100克" shape="circle" type="info" @click="chooseWeight(2)"/><u-tag text="100克以上" shape="circle" type="info" @click="chooseWeight(3)"/>
  34. </view>
  35. </view>
  36. <view class="form-data qyImg">
  37. <view> 上传图片 <text style="color: #a6a6a6;">(最多3张,单张10MB以内)</text></view>
  38. <view class="info-main">
  39. <view v-if="photograph.length<3 && !isView" class="camera-btn">
  40. <view @click="goPhotograph" class="photograph-camera">
  41. <u-icon name="camera" color="#bfbfbf" size="60" ></u-icon>
  42. </view>
  43. </view>
  44. <view v-show="photograph.length" v-for="(item,index) in photograph" :key="index" class="photograph-con">
  45. <u-icon v-show="!isView" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph(index)"></u-icon>
  46. <u-image width="100%" height="100%" :src="item" @click="previewPictures(item)"></u-image>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. <view style="color:#FF2C5C;text-align: center;margin-bottom: 20upx;">当前地址/时段无可上门骑手,暂不能下单</view>
  52. <view class="btns">
  53. <u-button @click="submit" :loading="loading" :custom-style="submitBtn">提交</u-button>
  54. </view>
  55. <!-- <uni-popup ref="openModal" type="center">
  56. <uni-popup-dialog content="确认提交吗?" @confirm="onOk" :title="title"></uni-popup-dialog>
  57. </uni-popup> -->
  58. </view>
  59. </template>
  60. <script>
  61. // import uniPopup from '@/components/uni-popup/uni-popup.vue'
  62. // import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
  63. import {gatherSave,gatherDetail} from '@/api/index.js'
  64. import {saveImgToAliOss} from '@/libs/tools.js'
  65. export default {
  66. // components: {
  67. // uniPopup,uniPopupDialog
  68. // },
  69. data() {
  70. return {
  71. title:'',
  72. loading:false, // 提交按钮加载圈
  73. photograph: [], // 图片路径
  74. RubbishType:[], // 回收分类
  75. weightType:'',
  76. weightTagType:'info', // 重量按钮类型
  77. form: {
  78. time: '', // 其它垃圾
  79. info: '', // 厨余垃圾
  80. },
  81. isView: false ,// 是否是查看详情
  82. itemId:'',
  83. submitBtn:{
  84. backgroundColor: '#4F88F7',
  85. color: '#fff',
  86. borderRadius: '12px'
  87. },
  88. show: false,
  89. list: [
  90. {
  91. value: 1,
  92. label: '今天',
  93. children: [
  94. {
  95. value: 2,
  96. label: '上午(08-13点)',
  97. },
  98. {
  99. value: 3,
  100. label: '下午(13-18点)',
  101. }
  102. ]
  103. },
  104. {
  105. value: 4,
  106. label: '明天',
  107. children: [
  108. {
  109. value: 5,
  110. label: '上午(08-13点)',
  111. },
  112. {
  113. value: 6,
  114. label: '下午(13-18点)',
  115. }
  116. ]
  117. },
  118. {
  119. value: 7,
  120. label: '后天',
  121. children: [
  122. {
  123. value: 8,
  124. label: '上午(08-13点)',
  125. },
  126. {
  127. value: 9,
  128. label: '下午(13-18点)',
  129. }
  130. ]
  131. },
  132. ],
  133. rules: {
  134. time: [
  135. {
  136. required: true,
  137. message: '请选择时间',
  138. trigger: ['blur', 'change']
  139. }
  140. ],
  141. info:[{required:true,message:'请选择用户信息',trigger:['change']}]
  142. }
  143. };
  144. },
  145. onLoad(option) {
  146. console.log(option,option.id,'ppppppppp')
  147. // 查看
  148. if(option && option.id){
  149. this.isView = true
  150. this.itemId=option.id
  151. this.getDetailData()
  152. }else {
  153. console.log('--------新增')
  154. this.photograph = []
  155. this.form.remarks = ''
  156. this.$refs.uForm.resetFields()
  157. }
  158. },
  159. onUnload() {
  160. },
  161. methods: {
  162. // 保留几位小数
  163. // numberToFixed: function (key, num, max) {
  164. // let val = this.form[key]
  165. // let ret = numberToFixed(val, num, max)
  166. // this.$nextTick(() => {
  167. // this.form[key] = ret
  168. // })
  169. // },
  170. // 选择时间
  171. selectTime(){
  172. wx.hideKeyboard()
  173. this.show=true
  174. },
  175. confirm(e) {
  176. console.log(e);
  177. this.form.time=e[0].label + e[1].label
  178. },
  179. // 选择用户信息
  180. selectUserInfo(){
  181. uni.navigateTo({
  182. url: '/pages/index/userInfo'
  183. })
  184. },
  185. // 选择垃圾分类
  186. chooseRubbishType(){},
  187. // 选择重量
  188. chooseWeight(value){
  189. if(value!=1 || value!=2 || value!=3){
  190. this.weightTagType='primary'
  191. }else{
  192. this.weightTagType='info'
  193. }
  194. console.log('-------选中重量')
  195. },
  196. // 获取详情数据
  197. getDetailData(){
  198. gatherDetail({id:this.itemId}).then(res=>{
  199. if(res.status==200){
  200. console.log(res)
  201. const a = res.data.gatherRubbishList.find(item=>item.rubbishType=='GATHER_BUILDING')
  202. const b = res.data.gatherRubbishList.find(item=>item.rubbishType=='GATHER_OTHER')
  203. const c = res.data.gatherRubbishList.find(item=>item.rubbishType=='GATHER_KITCHEN')
  204. this.form.gatherNum_jianzhu= a ? a.gatherNum.toString() : '0'
  205. this.form.gatherNum_chuyu= c ? c.gatherNum.toString() : '0'
  206. this.form.gatherNum_other= b ? b.gatherNum.toString() : '0'
  207. this.form.remarks=res.data.remarks
  208. this.photograph=res.data.imageUrlList || []
  209. console.log(this.form,'this.form')
  210. }
  211. })
  212. },
  213. // 拍照或从相册选图片
  214. goPhotograph() {
  215. uni.chooseImage({
  216. count: 1, //默认9
  217. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  218. sourceType: ['album','camera'], //从相册选择
  219. success: (res) =>{
  220. console.log(res,'rrrrrrrrrrr')
  221. console.log(JSON.stringify(res.tempFilePaths));
  222. console.log(this.photograph.length,'this.photograph')
  223. if(res.tempFiles[0].size>10485760){
  224. uni.showToast({
  225. title: '图片过大无法上传!',
  226. icon: 'none'
  227. })
  228. return
  229. }
  230. uni.showLoading({
  231. title:'正在保存图片...',
  232. mask: true
  233. })
  234. saveImgToAliOss(res.tempFilePaths[0],(ret)=>{
  235. // console.log(ret,'----------ret')
  236. this.photograph.push(ret.data)
  237. // _this.photograph = ret.data
  238. uni.hideLoading()
  239. })
  240. }
  241. });
  242. },
  243. // 预览图片
  244. previewPictures(item) {
  245. const photograph = [item];
  246. uni.previewImage({
  247. urls: photograph,
  248. });
  249. },
  250. // 删除图片
  251. cancelPhotograph(index) {
  252. setTimeout(() => {
  253. this.photograph.splice(index,1)
  254. }, 500);
  255. },
  256. // 提交
  257. submit(){
  258. uni.navigateTo({
  259. url: '/pages/index/yuyueResult'
  260. })
  261. this.$refs.uForm.validate(valid => {
  262. if (valid) {
  263. console.log('验证通过');
  264. } else {
  265. console.log('验证失败');
  266. }
  267. });
  268. },
  269. // 确认提交
  270. // onOk() {
  271. // this.$refs.openModal.close()
  272. // let params = {
  273. // rubbishEntityList: [],
  274. // imageUrlList: this.photograph,
  275. // remarks: this.form.remarks
  276. // }
  277. // if(this.itemId){
  278. // params.id=this.itemId
  279. // }
  280. // if(this.form.gatherNum_other) {
  281. // params.rubbishEntityList.push({
  282. // "rubbishType":"GATHER_OTHER",
  283. // "rubbishWeight": this.form.gatherNum_other*240,
  284. // "gatherNum": this.form.gatherNum_other,
  285. // "unit":"BUCKET"
  286. // })
  287. // }
  288. // if(this.form.gatherNum_chuyu) {
  289. // params.rubbishEntityList.push({
  290. // "rubbishType":"GATHER_KITCHEN",
  291. // "rubbishWeight": this.form.gatherNum_chuyu*240,
  292. // "gatherNum": this.form.gatherNum_chuyu,
  293. // "unit":"BUCKET"
  294. // })
  295. // }
  296. // if(this.form.gatherNum_jianzhu) {
  297. // params.rubbishEntityList.push({
  298. // "rubbishType":"GATHER_BUILDING",
  299. // "rubbishWeight": this.form.gatherNum_jianzhu*1000,
  300. // "gatherNum": this.form.gatherNum_jianzhu,
  301. // "unit":"TON"
  302. // })
  303. // }
  304. // this.loading=true
  305. // gatherSave(params).then(res=>{
  306. // if(res.status == 200) {
  307. // uni.showToast({
  308. // title: res.message,
  309. // icon: 'none'
  310. // })
  311. // setTimeout(()=>{
  312. // uni.navigateBack()
  313. // },300)
  314. // } else {
  315. // uni.showToast({
  316. // title: res.message,
  317. // icon: 'none'
  318. // })
  319. // }
  320. // this.loading= false
  321. // })
  322. // },
  323. },
  324. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  325. onReady() {
  326. this.$refs.uForm.setRules(this.rules);
  327. }
  328. }
  329. </script>
  330. <style lang="scss">
  331. .content{
  332. width: 100%;
  333. height: 100vh;
  334. padding: 0;
  335. background: #F5F5F5;
  336. display: flex;
  337. flex-direction: column;
  338. .content-form{
  339. flex: 1;
  340. overflow-y: scroll;
  341. .content-detail{
  342. padding:20upx 30upx;
  343. background: rgba(255, 209, 0, 0.4);
  344. opacity: 1;
  345. display: flex;
  346. justify-content: space-between;
  347. .detail-text{
  348. display: flex;
  349. align-items: center;
  350. text{
  351. display: inline-block;
  352. margin-left: 15upx;
  353. }
  354. }
  355. .detail-xqtext{
  356. font-size: 30upx;
  357. font-family: PingFang SC;
  358. font-weight: 500;
  359. color: #FF9528;
  360. }
  361. }
  362. }
  363. .receiveAddress{
  364. width: 100%;
  365. line-height: 1.5em;
  366. box-sizing: border-box;
  367. font-style: normal;
  368. }
  369. .form-data{
  370. padding: 0 30upx;
  371. margin-bottom: 20upx;
  372. background-color: #fff;
  373. }
  374. .rubbishType{
  375. padding: 30upx ;
  376. .rubbishType-title{
  377. margin-bottom: 20upx;
  378. }
  379. .rubbishType-tags{
  380. display: flex;
  381. justify-content: space-between;
  382. }
  383. }
  384. .qyImg{
  385. padding: 40upx ;
  386. }
  387. .info-main {
  388. margin-top: 14upx;
  389. border-radius: 12upx;
  390. background-color: #fff;
  391. display: flex;
  392. .location-icon {
  393. padding-left: 10upx;
  394. vertical-align: sub;
  395. }
  396. .photograph-camera {
  397. border: 2upx dashed #bfbfbf;
  398. border-radius: 12upx;
  399. width: 140upx;
  400. height: 140upx;
  401. display: flex;
  402. align-items: center;
  403. justify-content: center;
  404. }
  405. .camera-btn{
  406. display: flex;
  407. flex-direction: column;
  408. align-items: center;
  409. color: #999999;
  410. font-size: 24upx;
  411. }
  412. .photograph-con {
  413. margin: 0 20upx;
  414. width: 140upx;
  415. height: 140upx;
  416. text-align: center;
  417. position: relative;
  418. .photograph-icon {
  419. display: inline-block;
  420. padding-top: 48upx;
  421. }
  422. .close-circle-icon {
  423. background-color: #fff;
  424. border-radius: 50%;
  425. position: absolute;
  426. right: -23upx;
  427. top: -23upx;
  428. z-index: 9;
  429. }
  430. }
  431. }
  432. .btns{
  433. padding: 30upx 30upx 50upx;
  434. background-color: #fff;
  435. }
  436. }
  437. </style>