RedDragonfly/pages/bazaar/VaseYard/reported.vue

<template>
	<view class="reported">
		<view class="top">
			<view class="list">
				<view class="left">
					产品:
				</view>
				<view class="right">
					{{appear.fullName || ''}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					瓶码:
				</view>
				<view class="right">
					{{bottleId || ''}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					箱码:
				</view>
				<view class="right">
					{{appear.boxId || ''}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					配送单:
				</view>
				<view class="right">
					{{appear.sendId || ''}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					配送日期:
				</view>
				<view class="right">
					{{appear.sendTime || ''}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					经销商:
				</view>
				<view class="right">
					{{appear.name || ''}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					经销商所在地:
				</view>
				<view class="right">
					{{appear.region || ''}}
				</view>
			</view>
			<view class="list">
				<view class="left">
					当前地点:
				</view>
				<view class="right">
					{{cityName}}
				</view>
			</view>
			<view class="textarea">
				<textarea class="text" v-module="remark" placeholder="请输入窜货说明" />
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="setAdd()">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		add
	} from '../../../api/bazaar.js'
	import {
		mapState
	} from 'vuex'
	import qqmapsdk from '../../../utils/qqmap-wx-jssdk.js'
	const QQMapWX = new qqmapsdk({
		key: 'SREBZ-KVJ3J-GFRFV-XKRU4-LGLQE-C4B2T'
	})
	export default {
		data() {
			return {
				bottleId: '',
				remark: '',
				x: '',
				y: '',
				cityName: ''
			};
		},
		onLoad(opints) {
			this.bottleId = opints.bottleId
		},
		created() {
			uni.showLoading({
				title: '加载中'
			});
			// this.getLocation()
		},
		computed: {
			...mapState({
				appear: store => store.appear,
				submit: store => store.user.name
			})
		},
		mounted() {
			uni.hideLoading()
		},
		onShow() {
			uni.getLocation({
				success: (res) => {
					let latitude = res.latitude;
					let longitude = res.longitude;
					QQMapWX.reverseGeocoder({
						location: {
							latitude: latitude,
							longitude: longitude
						},
						success: (res) => {
							let cityName = res.result.address_component.province + res.result
								.address_component.city + res.result.address_component.district;
							this.cityName = cityName;
						}
					})
				},
				fail: (res) => {
					uni.showToast({
						title: '获取位置信息失败',
						icon: 'none'
					})
				}
			})
		},
		methods: {
			// 上报
			async setAdd() {
				const res = await add({
					name: this.appear.fullName,
					typeName: this.appear.typeName,
					brand: this.appear.brand,
					gene: this.appear.gene,
					level: this.appear.level,
					capacity: this.appear.capacity,
					bottleId: this.bottleId,
					boxId: this.appear.boxId,
					sendId: this.appear.sendId,
					sendTime: this.appear.sendTime,
					agencyName: this.appear.name,
					agencyRegion: this.appear.region,
					region: '宁波',
					remark: this.remark,
					submit: this.submit,
					accessToken: uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				console.log(res);
			},
		}
	}
</script>

<style lang="scss">
	.reported {
		padding: 80rpx 20rpx 0;

		.top {
			.list {
				display: flex;
				margin: 20rpx 0;

				.left {
					width: 200rpx;
					margin-right: 15rpx;
					text-align: right;
				}
			}

			.textarea {
				width: 100%;
				height: 200rpx;
				margin: 30rpx 0;

				.text {
					width: 100%;
					height: 100%;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					background-color: #f6f6f6;
				}
			}
		}

		.btn {}
	}
</style>