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

<template>
	<view class="page">
		<!-- 其他功能 -->
		<uni-card :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">
						<block v-for="(item,index) in list" :key="index">
							<uv-cell :cellStyle="{padding: '10px 0'}" :title="item.name" :label="item.phone">
								<template v-slot:right-icon>
									<uv-icon size="40rpx" name="trash" @click="onDel(item)"></uv-icon>
								</template>
							</uv-cell>
						</block>
					</uv-cell-group>
				</view>
			</view>
		</uni-card>
		<view class="btn-bar">
			<uv-button class="save-user-profile"
				:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',borderRadius: '30px',color: '#ffffff'}"
				text="添加" @click="add"></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';

	const tenantStore = useTenantStore();

	const userStore = useUserStore();

	export default {
		data() {
			return {
				list: [],
				statusBarHeight: 104,
				isLogin: false,
				form: {
					name: '',
					phone: ''
				},
				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()
						}
					}
				});

			},
			save() {
				Api.addEmergency(this.form).then(msg => {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					this.$refs.addForm.close()
					this.reload()
				}).catch(() => {
					uni.showToast({
						title: '请检查您的网络.',
						icon: 'none'
					})
					uni.hideLoading()
					this.$refs.addForm.close()
					this.reload()
				})
			}
		}
	}
</script>
<style>
	page {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #f0f2f5;
		width: 750rpx;
		overflow-x: hidden;
	}
</style>
<style lang="scss">
	.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>