|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
|
|
|
+ <view class="form-item">
|
|
|
+ <image src="../../static/CLOTHES.png" mode="" class="form-item-icon"></image>
|
|
|
+ <u-form-item label="其他垃圾" >
|
|
|
+ <u-input placeholder="请输入" :maxlength="30" v-model="form.receiverName" />
|
|
|
+ <text slot="right" style="color: #000000;">桶(约{{125}} kg)</text>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <image src="../../static/CLOTHES.png" mode="" class="form-item-icon"></image>
|
|
|
+ <u-form-item label="厨余垃圾" >
|
|
|
+ <u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
|
|
|
+ <text slot="right" style="color: #000000;">桶(约{{125}} kg)</text>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <image src="../../static/CLOTHES.png" mode="" class="form-item-icon"></image>
|
|
|
+ <u-form-item label="建筑垃圾" >
|
|
|
+ <u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
|
|
|
+ <text slot="right" style="color: #000000;">桶(约{{125}} t)</text>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <image src="../../static/CLOTHES.png" mode="" class="form-item-icon"></image>
|
|
|
+ <u-form-item label="信息备注" style="width: 100%;">
|
|
|
+ <u-input placeholder="请输入" :maxlength="11" type="textarea" v-model="form.receiverPhone" />
|
|
|
+ <!-- <textarea :auto-height="true" placeholder="请输入备注(最多500个字符)" :maxlength="500" v-model="form.receiveAddress" class="receiveAddress"/> -->
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <image src="../../static/CLOTHES.png" mode="" class="form-item-icon"></image>
|
|
|
+ <u-form-item label="清运照片" style="width: 100%;">
|
|
|
+ <text style="color: #c0c4cc;" v-if="!photograph">最多3张</text>
|
|
|
+ <u-icon v-show="photograph" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph"></u-icon>
|
|
|
+ <u-icon slot="right" name="camera" color="#2979ff" size="60" class="photograph-icon" @click="photograph ? null : goPhotograph()"></u-icon>
|
|
|
+ <u-image v-show="photograph" width="100%" height="100%" :src="photograph" @click="previewPictures"></u-image>
|
|
|
+ <!-- <u-icon slot="right" name="camera" color="#2979ff" size="60" class="photograph-icon"></u-icon> -->
|
|
|
+ <!-- <camera device-position="back" flash="off"></camera>
|
|
|
+ <!-- <button type="primary" @click="takePhoto">拍照</button>
|
|
|
+ <!-- <uni-icons type="camera" @click="takePhoto" size="30rpx"></uni-icons>
|
|
|
+ <view>预览</view>
|
|
|
+ <image mode="widthFix" :src="src"></image> -->
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </u-form>
|
|
|
+ <view class="buttons">
|
|
|
+ <u-button type="primary" @click="submit">提交</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ saveAddress
|
|
|
+ } from '@/api/receiveAddress.js'
|
|
|
+ import Address from '@/components/address.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ Address
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ src:"",
|
|
|
+ photograph: '', // 拍照临时地址
|
|
|
+ form: {
|
|
|
+ receiverName: '',
|
|
|
+ receiverPhone: '',
|
|
|
+ receiveAddress: '' // 详细地址
|
|
|
+ },
|
|
|
+ receiveAreas: '', //地址编码
|
|
|
+ areaName: '', //地址
|
|
|
+ areaInfo: {}, // 省市区
|
|
|
+ areaIdArr: [], // 省市区id数组
|
|
|
+ rules: {
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.form = this.$store.state.vuex_OrderAddress
|
|
|
+ if (this.form.receiveAreasName) {
|
|
|
+ this.areaIdArr = this.form.receiveAreas.split(',')
|
|
|
+ this.areaInfo.label = this.form.receiveAreasName.replace(/\,/g,'-')
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '新增数据录入'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '修改数据'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 开启分享
|
|
|
+ uni.showShareMenu({
|
|
|
+ withShareTicket: true,
|
|
|
+ menus: ['shareAppMessage', 'shareTimeline']
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ this.$u.vuex("vuex_OrderAddress",{})
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 签到拍照
|
|
|
+ goPhotograph() {
|
|
|
+ const _this = this;
|
|
|
+
|
|
|
+ wx.chooseImage({
|
|
|
+ count: 3, //最多可以选择的图片张数,默认9
|
|
|
+ sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
|
|
|
+ sourceType: ['camera'], //album 从相册选图,camera 使用相机,默认二者都有
|
|
|
+ success: function(res) {
|
|
|
+ // tempFilePaths 图片的本地文件路径列表,tempFiles 图片的本地文件列表,每一项是一个 File 对象
|
|
|
+ console.log(JSON.stringify(res.tempFilePaths));
|
|
|
+ uni.showLoading({
|
|
|
+ title: '保存中,请稍后...',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ // saveImgToAliOss(res.tempFilePaths[0],function(ret){
|
|
|
+ // console.log(ret)
|
|
|
+ // _this.photograph = ret.data
|
|
|
+ // uni.hideLoading()
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 预览签到图
|
|
|
+ previewPictures() {
|
|
|
+ const photograph = [this.photograph];
|
|
|
+ uni.previewImage({
|
|
|
+ urls: photograph
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除签到图
|
|
|
+ cancelPhotograph() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.photograph = '';
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.$refs.uForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('验证通过');
|
|
|
+ if (this.form.receiverName ==='') {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入姓名',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.form.receiverPhone ==='') {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入电话',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 省市区
|
|
|
+ if(this.areaIdArr.length == 0){
|
|
|
+ uni.showToast({icon: 'none',title: '请选择省市区'})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.form.receiveAddress ==='') {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入详细地址',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ receiverName: this.form.receiverName,
|
|
|
+ receiverPhone: this.form.receiverPhone,
|
|
|
+ receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
|
|
|
+ receiveAreas: this.areaIdArr.join(','),
|
|
|
+ receiveAddress: this.form.receiveAddress // 详细地址
|
|
|
+ }
|
|
|
+ if(this.form.id) {
|
|
|
+ params.id = this.form.id
|
|
|
+ }
|
|
|
+ saveAddress(params).then(res=>{
|
|
|
+ if(res.status == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.message,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ setTimeout(()=>{
|
|
|
+ uni.navigateBack()
|
|
|
+ },300)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('验证失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 拍照
|
|
|
+ takePhoto() {
|
|
|
+ const ctx = uni.createCameraContext();
|
|
|
+ ctx.takePhoto({
|
|
|
+ quality: 'high',
|
|
|
+ success: (res) => {
|
|
|
+ this.src = res.tempImagePath
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ error(e) {
|
|
|
+ console.log(e.detail);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
|
|
|
+ onReady() {
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .content{
|
|
|
+ padding: 0 50upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ .buttons{
|
|
|
+ padding: 80upx 100upx;
|
|
|
+ }
|
|
|
+ .receiveAddress{
|
|
|
+ width: 100%;
|
|
|
+ line-height: 1.5em;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ .form-item{
|
|
|
+ display: flex;
|
|
|
+ .form-item-icon{
|
|
|
+ width: 45upx;
|
|
|
+ height: 45upx;
|
|
|
+ margin: auto 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|