| | |
| | | <template> |
| | | <view class=""> |
| | | |
| | | <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="100" |
| | | :labelStyle="{fontSize:'28rpx'}"> |
| | | <view class="content"> |
| | | |
| | | <u-form-item label="对象电话" prop="transactionObjectTel" borderBottom required> |
| | | <u-input v-model="info.transactionObjectTel" border="none" placeholder="请输入" placeholderClass="f-28 c-99" |
| | | inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="交易金额" prop="transactionMoney" borderBottom required> |
| | | <u-input v-model="info.transactionMoney" disabled disabledColor="#fff" border="none" placeholder="请输入" placeholderClass="f-28 c-99" |
| | | inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="物品数量" prop="goodsNums" borderBottom required> |
| | | <u-input v-model="info.goodsNums" type="number" border="none" placeholder="请输入" placeholderClass="f-28 c-99" |
| | | inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | |
| | | <u-form-item label="交易位置" prop="location" borderBottom ref="location" required> |
| | | <u-input v-model="info.location" border="none" placeholder="请输入" placeholderClass="f-28 c-99" |
| | | inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="交易过程" prop="transactionProcess" borderBottom> |
| | | <u-input v-model="info.transactionProcess" border="none" placeholder="请输入" placeholderClass="f-28 c-99" |
| | | inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | </view> |
| | | |
| | | <view class="upload bgc-ff"> |
| | | <view class="f-28 mb-20">手持身份证</view> |
| | | <view class="mt-20"> |
| | | <u-upload :fileList="imageUrls" :previewFullImage="uploadConfig.previewFullImage" |
| | | :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" |
| | | :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImgs($event,'imageUrls')" |
| | | @delete="deletePic"> |
| | | <view class="upload-item upload-icon flex_base"> |
| | | <u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon> |
| | | </view> |
| | | </u-upload> |
| | | </view> |
| | | </view> |
| | | <view class="upload bgc-ff"> |
| | | <view class="f-28 mb-20">物品照片</view> |
| | | <view class="mt-20"> |
| | | <u-upload :fileList="goodsImageUrls" :previewFullImage="uploadConfig.previewFullImage" |
| | | :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" |
| | | :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImgs($event,'goodsImageUrls')" |
| | | @delete="deletePic"> |
| | | <view class="upload-item upload-icon flex_base"> |
| | | <u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon> |
| | | </view> |
| | | </u-upload> |
| | | </view> |
| | | </view> |
| | | |
| | | </u-form> |
| | | |
| | | <button class="submit-btn" @click="sumitInfo">提交</button> |
| | | <!-- <button class="list-btn" @click="navigatorPage">我上报的事件</button> --> |
| | | </view> |
| | | </template> |
| | | |
| | | |
| | | <script> |
| | | import uploadMixin from "@/mixin/uploadMixin"; |
| | | import { |
| | | saveLabelReporting |
| | | } from "@/api/reporting/reporting"; |
| | | export default { |
| | | mixins: [uploadMixin], |
| | | data(){ |
| | | return{ |
| | | |
| | | info: { |
| | | transactionObjectTel:"", |
| | | transactionMoney:"", |
| | | goodsNums:"", |
| | | location:"", |
| | | transactionProcess:"", |
| | | districtId:"", |
| | | districtName:"", |
| | | userId:"" |
| | | }, |
| | | rules: { |
| | | 'transactionObjectTel': { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请输入对象电话', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | |
| | | 'transactionMoney': { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请输入交易金额', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | 'location':{ |
| | | type: 'string', |
| | | required: true, |
| | | message: '请输入交易位置', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | 'transactionProcess':{ |
| | | type: 'string', |
| | | required: false, |
| | | message: '请输入交易过程', |
| | | trigger: ['blur', 'change'] |
| | | } |
| | | }, |
| | | imageUrls:[], |
| | | goodsImageUrls:[] |
| | | } |
| | | }, |
| | | onLoad(option) { |
| | | if(option.type != 1){ |
| | | uni.setNavigationBarTitle({title:this.setTitle(type)}) |
| | | uni.setNavigationBarTitle({title:this.setTitle(option.type)}) |
| | | } |
| | | |
| | | this.$set(this.info,"eventType",option.type); |
| | | let siteInfo = uni.getStorageSync("siteInfo"); |
| | | let userInfo = uni.getStorageSync("userInfo"); |
| | | this.$set(this.info, "houseCode", siteInfo.id); |
| | | this.$set(this.info, "districtName", siteInfo.name); |
| | | this.$set(this.info, "userId", userInfo.user_id); |
| | | }, |
| | | methods:{ |
| | | setTitle(type){ |
| | |
| | | }else if (type == 3){ |
| | | return "二手手机维修" |
| | | } |
| | | }, |
| | | |
| | | |
| | | confirmDate(e) { |
| | | console.log(e); |
| | | this.showSelectDate = false; |
| | | this.info.checkTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM') |
| | | }, |
| | | |
| | | async afterReadImgs(event, key) { |
| | | this.showLoading() |
| | | let lists = [].concat(event.file) |
| | | let fileListLen = this[key].length |
| | | lists.map((item) => { |
| | | this[key].push({ |
| | | ...item, |
| | | status: 'uploading', |
| | | message: '上传中' |
| | | }) |
| | | }) |
| | | for (let i = 0; i < lists.length; i++) { |
| | | const result = await this.uploadFilePromise(lists[i].url) |
| | | this[key].splice(fileListLen, 1, Object.assign({}, { |
| | | url: result.data.link, |
| | | name: result.data.name |
| | | })) |
| | | fileListLen++ |
| | | } |
| | | this.loadingClose() |
| | | }, |
| | | |
| | | checkImages() { |
| | | if (this.imageUrls.length) { |
| | | this.$set(this.info,"imageUrls",this.setImages(this.imageUrls)) |
| | | } |
| | | if (this.goodsImageUrls.length) { |
| | | this.$set(this.info,"goodsImageUrls",this.setImages(this.goodsImageUrls)) |
| | | } |
| | | |
| | | |
| | | |
| | | } |
| | | }, |
| | | |
| | | setImages(key){ |
| | | let urls = []; |
| | | for(let i of key){ |
| | | urls.push(i.url); |
| | | } |
| | | return urls.join(",") |
| | | }, |
| | | |
| | | sumitInfo() { |
| | | this.$refs.info.validate().then(valid => { |
| | | this.checkImages() |
| | | saveLabelReporting(this.info).then(res => { |
| | | uni.showToast({ |
| | | icon: 'success', |
| | | title: '提交成功', |
| | | success() { |
| | | setTimeout(() => { |
| | | that.$u.func.globalNavigator("", "navBack") |
| | | }, 1000) |
| | | } |
| | | }) |
| | | }) |
| | | }) |
| | | }, |
| | | // navigatorPage() { |
| | | // let url = "/subPackage/bs/views/repairList" + "?title=" + this.title + "&type=" + this.info.type |
| | | // this.$u.func.globalNavigator(url, "navTo") |
| | | // } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | <style lang="less"> |
| | | page { |
| | | background-color: #F5F5F5; |
| | | } |
| | | |
| | | .content { |
| | | margin: 20rpx 30rpx; |
| | | padding: 0 30rpx; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | /deep/.u-radio-group--row { |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .site-box { |
| | | padding: 30rpx; |
| | | margin: 20rpx 30rpx; |
| | | border-radius: 4rpx; |
| | | |
| | | .c-aa { |
| | | color: #aaa; |
| | | } |
| | | |
| | | .address { |
| | | width: 60%; |
| | | margin-left: 25rpx; |
| | | } |
| | | } |
| | | |
| | | .upload-item { |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | border: 1px solid #EEEEEE; |
| | | } |
| | | |
| | | .upload { |
| | | margin: 0 30rpx 20rpx; |
| | | padding: 30rpx; |
| | | |
| | | |
| | | } |
| | | |
| | | .submit-btn { |
| | | width: 690rpx; |
| | | height: 78rpx; |
| | | line-height: 78rpx; |
| | | background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%); |
| | | border-radius: 8rpx 8rpx 8rpx 8rpx; |
| | | font-size: 32rpx; |
| | | color: #fff; |
| | | margin-top: 50rpx; |
| | | } |
| | | |
| | | .list-btn { |
| | | width: 690rpx; |
| | | height: 78rpx; |
| | | line-height: 78rpx; |
| | | background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%); |
| | | border-radius: 8rpx 8rpx 8rpx 8rpx; |
| | | font-size: 32rpx; |
| | | color: #fff; |
| | | margin-top: 50rpx; |
| | | } |
| | | </style> |