sange-bridge/pages/price/apply.vue

<template>
	<app-layout>
		<view class="container dir-top-wrap cross-center">
			<view class="input-group">
				<view class="input-item main-left cross-center">
					<view class="label">姓名</view>
					<input type="text" placeholder="请输入正确的姓名" v-model="form.name">
				</view>
				<view class="input-item main-left cross-center">
					<view class="label">账号</view>
					<input type="text" placeholder="请输入正确微信账号" v-model="form.wechat">
				</view>
				<view class="input-item main-left cross-center" >
					<view class="label">备注</view>
					<input type="text" placeholder="选填" v-model="form.remark">
				</view>
			</view>

			<u-button shape="circle"
					  class="button"
					  type="success"
					  hover-class="none"
					  :custom-style="btnStyle"
					  @click="handelApply"
					  :disabled="!form.name || !form.wechat"
			>提交申请</u-button>
		</view>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {
				form:{
					name:'',
					wechat:'',
					remark:'',
				}
			}
		},
		methods: {
			handelApply(){
				uni.showToast({
					title: '提交成功',
					icon: 'success',
					duration: 1500
				});
			}
		},
		computed:{
			btnStyle() {
				let background = 'linear-gradient(90deg, rgba(196,146,68,1) 0%, rgba(225,193,117,1) 100%, rgba(225,193,117,1) 100%)';
				if(!this.form.name || !this.form.wechat){
					background = '#ccc !important'
				}
				return {
					border:'none',
					background: background,
					width: '600rpx',
					padding: '36rpx 0',
					height: '100rpx',
					fontSize: '36rpx',
					fontWeight: 600
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button[disabled]{
		background: #ccc !important;
	}
	.input-group{
		width: 700rpx;
		.input-item{
			position: relative;
			margin: 32rpx 0;
			padding: 24rpx 32rpx;
			font-size: 32rpx;
			z-index: 1;
			&:after{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 200%;
				height: 200%;
				border: 1px solid #979797;
				transform: scale(.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				z-index: -1;
				border-radius: 16rpx;
			}
			.label{
				width: 120rpx;
				color: #666666;
				letter-spacing: .15em;
			}
			input{
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
</style>