cyzh-SoundOfMusic-H5/pages/activityList/mine/agent/agent.vue

<template>
	<view>
		<view class="container">
			<view class="title" style="padding: 50upx 0 30upx 30upx;">代理方式</view>
			<view class="flex justify-around align-center padding-bottom">
				<view class="flex align-center" @click="current = 0">
					<view class="padding-right-xs" :class="current == 0 ? 'cuIcon-roundcheck theme-color' : 'cuIcon-round'" style="font-size: 36upx;"></view>
					<view>独家代理</view>
				</view>
				<view class="flex align-center" @click="current = 1">
					<view class="padding-right-xs" :class="current == 1 ? 'cuIcon-roundcheck theme-color' : 'cuIcon-round'" style="font-size: 36upx;"></view>
					<view>渠道合伙人</view>
				</view>
			</view>
			<view class="title padding-left padding-bottom">所在城市</view>
			<u-picker mode="region" v-model="regionShow" :params="params" @confirm="getRegion"></u-picker>
			<view class="flex align-center justify-between padding-bottom-sm" @click="regionShow = true">
				<view class=" padding-left" :class="region.startsWith('请') ? 'eg': ''">
					 {{region}}
				</view>
				<view class="cuIcon-right padding-right"></view>
			</view>
			<view class="padding-lr"><u-line color="#eaeaea"></u-line></view>
			<view class="title padding">代理人姓名</view>
			<view class="padding-left">
				<u-input v-model="name" placeholder="请输入姓名" :clearable="false" />
			</view>
			<view class="padding-lr"><u-line color="#eaeaea"></u-line></view>
			<view class="title padding">联系方式</view>
			<view class="padding-left">
				<u-input v-model="phone" placeholder="请输入手机号码" :clearable="false" />
			</view>
			<view class="padding-lr"><u-line color="#eaeaea"></u-line></view>
			<view class="title padding">收款账户</view>
			<view class="padding-left">
				<u-input v-model="account" placeholder="请输入银行卡号" :clearable="false" />
			</view>
			<view class="padding-lr"><u-line color="#eaeaea"></u-line></view>
			<view class="title padding">开户行名称</view>
			<view class="padding-left">
				<u-input v-model="bank" placeholder="请输入开户行名称" :clearable="false" />
			</view>
			<view class="padding-lr padding-bottom"><u-line color="#eaeaea"></u-line></view>
		</view>
		<view class="footer-fixed padding-lg">
			<u-button class="custom-style" shape="circle" @click="confirm">确认并提交</u-button>
		</view>
	</view>
</template>

<script>
	import citySelect from '@/components/basic/u-city-select.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				current: 0,
				name: '',
				phone: '',
				account: '',
				bank: '',
				regionShow: false,
				region: '请选择代理所在城市',
				params: {
					province: true,
					city: true,
					area: false
				}
			}
		},
		methods: {
			getRegion(data) {
				this.region = data.province.label + '-' + data.city.label;
			},
			confirm() {
				uni.redirectTo({
					url: '/pages/activityList/mine/agent/pay'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #ffffff;
		border-radius: 16upx;
		margin: 30upx;
		.title {
			font-size: 32upx;
			font-weight: bold;
		}
	}
	.eg {
		color: #d1d1d1;
	}
	.custom-style {
		background-color: #5b3ee7;
		width: 400upx;
		color: #ffffff;
	}
</style>