websoft-uniapp/package/user/ic-card.vue

<template>
	<view class="page">
		<!-- 其他功能 -->
		<view class="ic-card-body web-cell web-cell-align-top">
			<view class="web-cell-content"></view>
		</view>

		<uni-card title="卡片信息" :border="false" :is-shadow="false" :padding="'10px 6px'">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" :label-width="80">
				<uni-forms-item label="卡号" name="careId" required>
					<uv-input placeholder="请输入您的IC卡号" v-model="formData.careId" maxlength="20"></uv-input>
				</uni-forms-item>
				<uni-forms-item label="姓名" name="name" required>
					<uv-input placeholder="请输入您的姓名" v-model="formData.name" maxlength="6"></uv-input>
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phone" required>
					<uv-input placeholder="请输入您的手机号码" v-model="formData.phone" maxlength="11"></uv-input>
				</uni-forms-item>
			</uni-forms>
		</uni-card>
		
		<view class="card-desc web-text-secondary">
			<view>温馨提示</view>
			<view>1、请输入卡号和姓名及手机号码进行激活</view>
			<view>2、如果忘记用户信息，请先联系场馆</view>
		</view>

		<view class="btn-bar">
			<uv-button
				class="save-user-profile"
				:customStyle="{ background: 'linear-gradient(to right, #70b915, #008e04)', borderRadius: '30px', color: '#ffffff' }"
				text="立即激活"
				@click="submit"
			></uv-button>
		</view>
		<!-- 登录组件 -->
		<ws-login ref="login" :logo="logo" @done="reload" />
		<!-- EmergencyEdit弹窗 -->
		<uni-popup ref="addForm" type="center" border-radius="10px 10px 0 0">
			<uni-card title="添加联系人" :border="false" :is-shadow="false" :padding="0">
				<uv-form labelPosition="left" :model="form" :rules="rules" ref="form">
					<uv-form-item label="姓名" prop="userInfo.name" borderBottom>
						<uv-input placeholder="请输入姓名" v-model="form.name" maxlength="11" :customStyle="{ margin: '10px 0' }"></uv-input>
					</uv-form-item>
					<uv-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSexSelect">
						<uv-input placeholder="请输入手机号码" v-model="form.phone" maxlength="11" :customStyle="{ margin: '10px 0' }"></uv-input>
					</uv-form-item>
					<uv-button
						class="add-emergency"
						:customStyle="{ background: 'linear-gradient(to right, #70b915, #008e04)', borderRadius: '30px', color: '#ffffff' }"
						text="保存"
						@click="save"
					></uv-button>
				</uv-form>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
import { useUserStore } from '@/store/modules/user';
import * as Api from '@/api/booking/emergency';
import * as MpMenuApi from '@/api/cms/mp-menu/index';
import { getWxOpenId } from '@/api/passport/login';
import { openUrl } from '@/utils/common';

import { useTenantStore } from '@/store/modules/tenant';
import { pad } from 'crypto-js';

const tenantStore = useTenantStore();

const userStore = useUserStore();

export default {
	data() {
		return {
			list: [],
			statusBarHeight: 104,
			isLogin: false,
			form: {
				name: '',
				phone: ''
			},
			// 表单数据
			formData: {},
			fields: {},
			logo: '',
			bookingUser: {},
			server: [],
			order: []
		};
	},
	onLoad() {
		this.reload();
	},
	methods: {
		async reload(e) {
			const app = this;
			// 当前登录用户信息
			const userInfo = await userStore.fetchUserInfo();
			if (Object.keys(userInfo).length > 0) {
				app.isLogin = true;
				app.userInfo = userInfo;
			} else {
				app.isLogin = false;
			}

			// 获取联系人列表
			// Api.pageEmergency({
			// 	userId: userInfo.userId
			// }).then((res) => {
			// 	app.list = res.list;
			// });
		},
		navTo(item) {
			if (!this.isLogin) {
				this.$refs.login.open('bottom');
				return false;
			}
			openUrl(item);
		},
		// 弹出登录提示框
		openLogin() {
			if (!this.isLogin) {
				this.$refs.login.open('bottom');
				return false;
			}
		},
		add() {
			this.$refs.addForm.open('center');
		},
		onDel(item) {
			const app = this;
			uni.showModal({
				title: '确定要删除吗?',
				success(o) {
					if (o.confirm) {
						uni.showLoading({
							title: '请求中.'
						});
						// Api.removeEmergency(item.emergencyId).then((res) => {
						// 	uni.showToast({
						// 		title: '操作成功',
						// 		icon: 'none'
						// 	});
						// });
						app.reload();
					}
				}
			});
		},
		// 触发提交表单
		submit() {
			this.$refs.form.validate().then(res => {
				// const saveOrUpdate = this.formData.id ? Api.updateICCard : Api.addICCard
				// saveOrUpdate(this.formData).then(message => {
				// 	uni.showToast({
				// 		title: '保存成功',
				// 		icon: 'success'
				// 	})
				// 	this.$refs.addForm.close()
				// 	this.reload()
				// }).catch((err) => {
				// 	console.log(err);
				// })
				// console.log('表单数据信息：', res);
			}).catch(err => {
				console.log('表单错误信息：', err);
			})
		},
	}
};
</script>
<style>
page {
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #f0f2f5;
	width: 750rpx;
	overflow-x: hidden;
}
</style>
<style lang="scss">
.ic-card-body {
	width: 692rpx;
	margin: 20rpx auto;
	height: 450rpx;
	border-radius: 20rpx;
	background: url('https://oss.wsdns.cn/20240528/a0a2eaa6073041bcb8ef182b87efe00a.jpg?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90');
	background-size: 100%;
}
.card-desc{
	padding: 20rpx 40rpx;
	line-height: 1.4rem;
	font-size:24rpx;
}
.avatar {
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}

.save-user-profile {
	width: 700rpx;
	margin: 40rpx auto;
}

.add-emergency {
	width: 500rpx !important;
	margin: 40rpx auto;
}

.btn-bar {
	width: 700rpx;
	left: 25rpx;
	position: fixed;
	bottom: 30rpx;
	margin: auto;
	clear: both;
}
</style>