purchase-let/pageQuota/vipUser/index.vue

<template>
	<view class="tabs">
		<text @click="currentTab=1" :class="{actText:currentTab==1}">开通行业会员</text>
		<text @click="currentTab=2" :class="{actText:currentTab==2}"> 已开通列表</text>
		<view class="lines" :class="{actLine:currentTab==2}" />
	</view>

	<!-- tabs1 -->
	<block v-if='currentTab==1'>
		<view class="card card1">
			<view class="card1-tit">
				行业会员开通报备
			</view>
			<up-form labelPosition="left" :model="formData">
				<up-form-item label="" prop="userInfo.name" borderBottom>
					<up-input v-model="formData.name" border="none" prefixIcon="account" placeholder="请输入姓名"
						:customStyle="{background:'#F3F3F3',padding:'20rpx','border-radius':'30rpx'}"
						:placeholderStyle="{color:'#444444'}" :prefixIconStyle="{'margin-right':'40rpx'}"></up-input>
				</up-form-item>
				<up-form-item label="" prop="userInfo.name" borderBottom>
					<up-input v-model="formData.phone" border="none" prefixIcon="account" placeholder="请输入电话号码"
						:customStyle="{background:'#F3F3F3',padding:'20rpx','border-radius':'30rpx'}"
						:placeholderStyle="{color:'#444444'}" :prefixIconStyle="{'margin-right':'40rpx'}"></up-input>
				</up-form-item>

				<up-form-item label="" prop="userInfo.name" borderBottom>
					<view @click="showPop" style="width: 100%;">
						<up-input style="pointer-events: none" v-model="formData.address" border="none"
							prefixIcon="account" readonly placeholder="请选择地址" :customStyle="{background:'#F3F3F3',padding:'20rpx',
							'border-radius':'30rpx'
							 }" :placeholderStyle="{color:'#444444'}" :prefixIconStyle="{'margin-right':'40rpx'}"
							suffixIcon='arrow-down'></up-input>
					</view>
				</up-form-item>
			</up-form>
			<view class="store-info">
				报备人:{{STORE_INFO.detailed_address}}
			</view>
		</view>
		<view class="submit-btn">
			<up-button text="完成并收款" @click="submit" shape="circle" color="#50C758"></up-button>
		</view>
	</block>

	<!-- tabs2 -->
	<block v-else>
		<view class="vip-card">
			<text>当前已开通：</text>
			<text class='num'>100</text>
			<text>位行业会员</text>
		</view>

		<view class="table">
			<uni-table stripe emptyText="暂无更多数据" width="100%">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="10" align="center">序号</uni-th>
					<uni-th width="25" align="center">行业会员</uni-th>
					<uni-th width="25" align="center">经营资金</uni-th>
					<uni-th width="30" align="center">开通时间</uni-th>
					<uni-th width="20" align="center">状态</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item in 4">
					<uni-td align="center">1</uni-td>
					<uni-td style="font-size: 20rpx;" align="center">军哥</uni-td>
					<uni-td style="font-size: 20rpx;" align="center">1000.00</uni-td>
					<uni-td style="font-size: 20rpx;" align="center">2020-10-20</uni-td>
					<uni-td style="font-size: 20rpx;" align="center">已开通</uni-td>
				</uni-tr>


			</uni-table>
		</view>
	</block>






</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	//  用户选择的门店信息
	let STORE_INFO = uni.getStorageSync('STORE_INFO');
	if (STORE_INFO)
		STORE_INFO = JSON.parse(STORE_INFO)

	const currentTab = ref(1)

	const formData = reactive({
		name: "",
		phone: "",
		address: ""
	})


	const submit = () => {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	}


	const showPop = () => {
		console.log(4545)
	}
</script>

<style lang='scss'>
	.tabs {
		background-color: #fff;
		width: 100vw;
		box-sizing: border-box;
		padding: 30rpx 0;
		justify-content: space-around;
		position: relative;
		display: flex;
		font-size: 32rpx;
		color: #444444;

		.actText {
			color: #20B128;
		}


		.lines {
			position: absolute;
			width: 70rpx;
			height: 7rpx;
			border-radius: 8rpx;
			background-color: #33B83A;
			bottom: 15rpx;
			transition: 300ms;
			left: calc(25vw - 35rpx);
		}

		.actLine {
			left: calc(75vw - 35rpx);
		}
	}

	.card {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.card1 {
		padding: 52rpx 30rpx;

		.card1-tit {
			font-size: 32rpx;
			color: #444444;
			text-align: center;
			margin-bottom: 90rpx;
		}

		.store-info {
			font-size: 28rpx;
			color: #20B128;
			text-align: center;
			margin-top: 30rpx;
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 50rpx;
		width: 710rpx;
		left: 50%;
		transform: translateX(-50%);

	}


	.vip-card {
		width: 690rpx;
		height: 270rpx;
		background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/4a92b202406162207212332.png');
		background-size: 100% 100%;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		color: #444444;
		justify-content: space-around;

		.num {
			font-size: 72rpx;
			color: #7B5232;

		}
	}

	.table {
		padding: 20rpx;
		width: 710rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}
</style>