zhangdan 4 년 전
부모
커밋
041d96e662
3개의 변경된 파일246개의 추가작업 그리고 0개의 파일을 삭제
  1. 6 0
      pages.json
  2. 240 0
      pages/userCenter/addData.vue
  3. BIN
      static/CLOTHES.png

+ 6 - 0
pages.json

@@ -48,6 +48,12 @@
 			"style": {
 				"navigationBarTitleText": "修改密码"
 			}
+		},
+		{
+			"path": "pages/userCenter/addData",
+			"style": {
+				"navigationBarTitleText": "垃圾数据录入"
+			}
 		}
     ],
 	"globalStyle": {

+ 240 - 0
pages/userCenter/addData.vue

@@ -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>

BIN
static/CLOTHES.png