fish-uniapp/pages/orderAdmin/OrderCancellation/index.vue

<template>
	<view class="OrderCancellation">
		<view class="header">
			<image mode="aspectFit" :src="`${$VUE_APP_RESOURCES_URL}/images/writeOffBg.jpg`" @click="openQRCode" />
		</view>
		<view class="whiteBg">
			<view class="input">
				<input type="number" placeholder="0" v-model="verify_code" />
			</view>
			<view class="bnt" @click="storeCancellation">立即核销</view>
			<view class="bnt" @click="openQRCode">扫码核销</view>
		</view>
		<!-- #ifndef H5 -->
		<!-- <view class="scan" v-if="iswechat">
			<image :src="`${$VUE_APP_RESOURCES_URL}/images/scan.gif`" @click="openQRCode" />
		</view> -->
		<!-- #endif -->
		<WriteOff :iShidden="iShidden" :orderInfo="orderInfo" @cancel="cancel" @confirm="confirm"></WriteOff>
	</view>
</template>

<script>
	import WriteOff from "@/components/WriteOff";
	import {
		isWeixin
	} from "@/utils";
	// import { wechatEvevt } from "@/libs/wechat";
	import {
		orderVerific
	} from "@/api/order";
	const NAME = "OrderCancellation";

	export default {
		name: NAME,
		components: {
			WriteOff
		},
		props: {},
		data: function() {
			return {
				iShidden: true,
				orderInfo: {},
				verify_code: ""
			};
		},
		mounted: function() {},
		methods: {
			cancel: function(res) {
				this.iShidden = res;
			},
			confirm: function() {
				orderVerific(this.verify_code, 1)
					.then(res => {
						this.iShidden = true;
						this.verify_code = "";
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
					})
					.catch(err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					});
			},
			storeCancellation: function() {
				let ref = /[0-9]{12}/;
				if (!this.verify_code) {
					uni.showToast({
						title: "请输入核销码",
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!ref.test(this.verify_code)) {
					uni.showToast({
						title: "请输入正确的核销码",
						icon: "none",
						duration: 2000
					});
					return;
				}
				uni.showLoading({
					title: "查询中"
				});
				orderVerific(this.verify_code, 0)
					.then(res => {
						uni.hideLoading();
						this.orderInfo = res.data;
						this.iShidden = false;
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 2000
						});
					})
					.catch(error => {
						uni.hideLoading();
						uni.showToast({
							title: error.msg ||
								error.response.data.msg ||
								error.response.data.message,
							icon: "none",
							duration: 2000
						});
					});
			},
			openQRCode: function() {
				let that = this;
				// 这里需要调用扫码功能
				uni.scanCode({
					success: (res) => {
						var result = res.result;
						if (result) {
							that.verify_code = res.result;
							that.storeCancellation();
						} else {
							uni.showToast({
								title: '没有扫描到什么！',
								icon: "none",
								duration: 2000
							});
						}
					}
				})

			}
		}
	};
</script>

<style scoped lang="less">
	.OrderCancellation .header {
		width: 100%;
		height: 3 * 100rpx;
		background-size: 100% 100%;

		image {
			width: 100%;
			height: 3 * 100rpx;
		}
	}

	.OrderCancellation .whiteBg {
		width: 6.9 * 100rpx;
		background-color: #fff;
		margin: -0.93 * 100rpx auto 0 auto;
		padding-top: 0.8 * 100rpx;
		padding-bottom: 30rpx;
		z-index: 20;
		position: relative;
		border-radius: 0.06 * 100rpx 0.06 * 100rpx 0 0;
	}

	.OrderCancellation .whiteBg .input {
		width: 5.8 * 100rpx;
		margin: 0 auto;
		border-bottom: 0.01 * 100rpx solid #eee;
	}

	.OrderCancellation .whiteBg .input input {
		padding-bottom: 0.25 * 100rpx;
		font-size: 0.6 * 100rpx;
		height: auto;
		color: #282828;
		width: 100%;
		text-align: center;
	}

	.OrderCancellation .whiteBg .bnt {
		font-size: 0.32 * 100rpx;
		color: #fff;
		width: 5.8 * 100rpx;
		height: 0.86 * 100rpx;
		border-radius: 0.43 * 100rpx;
		background-image: linear-gradient(to right, #eb3729 0%, #eb3729 100%);
		background-image: -webkit-linear-gradient(to right, #eb3729 0%, #eb3729 100%);
		background-image: -moz-linear-gradient(to right, #eb3729 0%, #eb3729 100%);
		text-align: center;
		line-height: 0.86 * 100rpx;
		margin: 0.55 * 100rpx auto 0 auto;
	}

	.OrderCancellation .scan {
		width: 3 * 100rpx;
		height: 3 * 100rpx;
		margin: 1.1 * 100rpx auto 0 auto;
	}

	.OrderCancellation .scan image {
		width: 100%;
		height: 100%;
		display: block;
	}
</style>