websoft-uniapp/package/admin/order-scan.vue

<template>
	<view class="order" v-if="form.orderId">
		<uni-card title="预定信息" :border="false" :is-shadow="false" :padding="0">
			<view class="order-body web-cell web-cell-align-top">
				<view class="web-cell-content">
					<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
						<uv-cell :title="`${form.merchantName}`" :label="` `" :cellStyle="{ padding: '0', paddingBottom: '5px' }" :border="false" />
						<block v-for="(item, index) in form.orderInfo" :key="index">
							<uv-cell
								:title="`${item.fieldName}`"
								:label="`${item.comments}`"
								:cellStyle="{ padding: '0', paddingBottom: '5px' }"
								:value="`￥${item.price}`"
								:border="false"
							/>
						</block>
					</uv-cell-group>
				</view>
			</view>
			<view slot="actions" class="card-actions">
				<view class="web-text-heading">合计：￥{{ form.totalPrice }}</view>
				<view class="web-text-danger">实付：￥{{ form.payPrice }}</view>
			</view>
		</uni-card>
		<block v-if="form.orderNo">
			<uni-card :border="false" :is-shadow="false" :padding="0">
				<view class="web-cell web-cell-align-top">
					<uv-cell-group :customStyle="{ backgroundColor: '#ffffff', padding: '8px 0' }" :border="false">
						<uv-cell :title="`姓名`" :value="`${form.realName}`" :cellStyle="{ padding: '8px' }" />
						<uv-cell :title="`手机号码`" :value="`${form.phone}`" :cellStyle="{ padding: '8px' }" />
						<uv-cell :title="`订单号`" :value="`${form.orderId}`" :cellStyle="{ padding: '8px' }" />
						<uv-cell :title="`订单编号`" :cellStyle="{ padding: '8px' }">
							<template v-slot:value>
								<uv-parse :content="form.orderNo" :selectable="true"></uv-parse>
							</template>
						</uv-cell>
						<uv-cell :title="`订单状态`" :cellStyle="{ padding: '8px' }">
							<template v-slot:value>
								<text class="web-text-primary" v-if="form.orderStatus == 0">{{ `${orderStatus[form.orderStatus]}` }}</text>
								<text class="web-text-success" v-if="form.orderStatus == 1">{{ `${orderStatus[form.orderStatus]}` }}</text>
							</template>
						</uv-cell>
						<uv-cell :title="`下单时间`" :value="`${form.createTime}`" :cellStyle="{ padding: '8px' }" />
						<uv-cell :title="`支付方式`" :value="`${payType[form.payType]}`" :cellStyle="{ padding: '8px' }" />
						<uv-cell :title="`优惠说明`" :value="`${form.couponDesc ? form.couponDesc : '无'}`" :cellStyle="{ padding: '8px' }" :border="false" />
					</uv-cell-group>
				</view>
			</uni-card>
		</block>
		<uv-gap height="20"></uv-gap>
		<view class="save-btn" v-if="form.orderStatus == 0">
			<uv-button
				:customStyle="{ background: 'linear-gradient(to right, #ccff66, #008e04)', borderRadius: '30px', color: '#ffffff' }"
				text="确认核销"
				@click="save"
			></uv-button>
		</view>
		<!-- 登录组件 -->
		<ws-login ref="login" :logo="logo" @done="reload" />
	</view>
	<view v-else>
		<uv-empty mode="order" text="订单不存在" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
	</view>
</template>

<script>
import * as OrderApi from '@/api/shop/order';
import * as FieldApi from '@/api/booking/field';
import { pageWechatDeposit } from '@/api/shop/wechatDeposit';

export default {
	components: {},
	data() {
		return {
			isLogin: false,
			orderNo: '',
			userId: 0,
			form: {},
			where: {
				page: 1
			},
			canReset: false,
			loadMore: 'more',
			logo: '',
			items: ['全部订单', '未支付', '已支付', '已完成', '押金'],
			orderStatus: ['未使用', '已完成', '已取消', '取消中', '退款申请中', '退款被拒绝', '退款成功', '客户端申请退款'],
			payType: [
				'余额支付',
				'微信支付',
				'会员卡支付',
				'支付宝',
				'现金',
				'POS机',
				'VIP月卡',
				'VIP年卡',
				'VIP次卡',
				'IC月卡',
				'IC年卡',
				'IC次卡',
				'免费',
				'VIP充值卡',
				'IC充值卡',
				'积分支付',
				'VIP季卡',
				'IC季卡'
			],
			orderList: [],
			styles: [
				{
					value: 'button',
					text: '按钮',
					checked: true
				},
				{
					value: 'text',
					text: '文字'
				}
			],
			colors: ['#333333', '#4cd964', '#dd524d'],
			current: 0,
			colorIndex: 0,
			activeColor: '#108001',
			styleType: 'text'
		};
	},
	onLoad(option) {
		this.orderNo = option.orderNo;
		// 判断是否登录
		this.openLogin();
		// 加载数据
		this.reload();
	},
	onShow() {
		// 判断是否登录
		this.openLogin();
	},
	// 触底函数
	onReachBottom() {
		const app = this;
		const { where } = this;
		if (app.canReset) {
			app.where.page = ++where.page;
			app.reload();
		}
	},
	methods: {
		reload() {
			const app = this;
			const { where, userId, orderNo } = this;
			if (userId == 0) {
				app.openLogin();
				return;
			}
			where.userId = userId;
			OrderApi.getByOrderNo(orderNo)
				.then((data) => {
					app.form = data;
					// 页面标题
					if (data.orderStatus == 1) {
						uni.setNavigationBarTitle({
							title: '订单核销'
						});
					}

					uni.hideLoading();
				})
				.catch((err) => {
					console.log('err: ', err);
					app.form = {};
					uni.hideLoading();
				});
		},
		onClickItem(e) {
			const app = this;
			const { where, userId } = this;
			const index = e.currentIndex;
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
			if (userId == 0) {
				app.openLogin();
				return;
			}
			// 全部
			if (index == 0) {
				where.payStatus = undefined;
				where.orderStatus = undefined;
			}
			// 未支付
			if (index == 1) {
				where.payStatus = 2;
			}
			// 已支付
			if (index == 2) {
				where.payStatus = 1;
			}
			// 已完成
			if (index == 3) {
				where.orderStatus = 1;
			}
			// 押金
			if (index == 4) {
				pageWechatDeposit({
					uid: uni.getStorageSync('user_id')
				}).then((res) => {
					console.log('res: ', res);
					app.orderList = res.list;
				});
				return false;
			}
			this.reload();
		},
		// 弹出登录提示框
		async openLogin() {
			this.userId = uni.getStorageSync('user_id');
			if (!this.userId) {
				return uni.switchTab({
					url: '/pages/user/user'
				})
			}
		},
		save() {
			const app = this;
			const { orderNo } = this;
			uni.showLoading({
				title: '请求中.'
			});
			FieldApi.verification(orderNo)
				.then((res) => {
					uni.showToast({
						title: '核销成功',
						icon: 'success'
					});
					uni.hideLoading();
					app.reload()
				})
				.catch((res) => {
					uni.showToast({
						title: res.message || '请检查您的网络.',
						icon: 'none'
					});
					uni.hideLoading();
					app.reload()
				});
		}
	}
};
</script>

<style lang="scss">
.content {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	height: 150px;
	text-align: center;
}

.content-text {
	font-size: 14px;
	color: #666;
}

.color-tag {
	width: 25px;
	height: 25px;
}

.uni-list {
	flex: 1;
}

.order {
	.order-title {
		padding: 20rpx 0;
		border-bottom: 1px #eee solid;

		.merchant-avatar {
			margin-right: 12rpx;
		}

		.merchant-name {
			// padding-left: 12rpx;
		}

		.btn-status {
			font-size: 30rpx;
			display: flex;
		}
	}

	.order-body {
		padding: 16px 0;
	}
}

.ele-flex {
	display: flex;
	justify-content: space-between;
}

.card-actions {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 10px;
	align-items: center;
	height: 45px;
	border-top: 1px #eee solid;

	.web-text-heading {
		font-size: 30rpx;
		font-weight: 500;
	}

	.web-text-danger {
		font-size: 30rpx;
		font-weight: 500;
	}
}

.card-actions-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.card-actions-item-text {
	font-size: 12px;
	color: #666;
	margin-left: 5px;
}

.btn-status {
	font-size: 30rpx;
	display: flex;
}

.close {
	top: 60rpx !important;
}

.save-btn {
	width: 700rpx;
	left: 25rpx;
	height: 80rpx;
	position: fixed;
	bottom: 30rpx;
}
.qrcode {
	margin-top: 30rpx;
	text-align: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
</style>