apply-assistant-v3/uni_modules/rh-ui/components/rh-button/rh-button.vue

<template>
	<view class="g-rh-button g-components-button">
		<button class="bocai-btn" 
						:class="[
								'bocai_btn_size_' + size, 
								'bocai_btn_mode_' + mode, 
								'bocai_btn_type_' + type, 
								'g_w_' + width, 
								'g_h_' + height, 
								customBgColor ? 'customBgColor' : ''
						]" 
						:style="buttonStyle"
						:hover-stop-propagation="true" 
						hover-class="thover" 
						@click="handleClick" 
						:form-type="formType" 
						:open-type="openType" 
						@getphonenumber="getphonenumber"
		>
			<view class="g_flex_row_center">
				<view class="g_flex_column_center g_mr_4" v-if="loading">
					<u-loading mode="flower"></u-loading>
				</view>
				<view class="g_flex_column_center" v-if="icon">
					<view class="iconfont icon" :class="icon" style="font-size: 16px;"></view>
				</view>
				<view class="g_flex_column_center" :class="'g_fs_' + fontSize">
					{{ btnText }}
				</view>
			</view>
		</button>
	</view>
</template>

<script>
/* 按钮
 * @params size 尺寸
 * 			   medium 大；
 * 				 default 默认（中）；
 * 				 small 小；
 * 				 mini 迷你；
 * @params btnText 按钮文本。
 * @params mode 形状
 * 				 circle 胶囊式圆角；square 圆角方形
 * @parmas type 类型
 * 				 primary 主要按钮（底色是主题色）
 * 				 default 默认按钮（底色是白色）
 * 				 infro   信息按钮（底色是灰色）无法触发事件
 * 				 delete  删除按钮（白底红色）
 * 				 none    没有样式（白底黑字）
 *         disabled  禁用（白底黑字）
 * @params openType 开放类型
 * @params openType 开放类型
 * @params icon 图标 项目id 4374774
 * @params gradual 渐变背景色
 * @params customBgColor 背景色
 */
export default {
	props: {
		gradual: {
			type: String,
			default: () => {
				return "";
			},
		},
		size: {
			type: String,
			default: () => {
				return "default";
			},
		},
		btnText: {
			type: String,
			default: () => {
				return "按钮";
			},
		},
		mode: {
			type: String,
			default: () => {
				return "circle";
			},
		},
		type: {
			type: String,
			default: () => {
				return "default";
			},
		},
		openType: {
			type: String,
			default: () => {
				return "";
			},
		},
		formType: {
			type: String,
			default: () => {
				return "";
			},
		},

		icon: {
			type: String,
			default: () => {
				return "";
			},
		},
		width: {
			default: () => {
				return "auto";
			},
		},
		height: {
			default: () => {
				return "auto";
			},
		},
		fontSize: {
			default: () => {
				return "16";
			},
		},
		color: {
			default: () => {
				return "";
			},
		},

		loading: {
			default: () => {
				return false;
			},
		},
		customBgColor: {
			default: () => {
				return "";
			},
		},
		primaryColor:{
			default:()=>{
				return "#1890ff";
			}
		}
	},
	computed: {
		buttonStyle() {
			const baseStyle = {
				lineHeight: this.height - 2 + 'px',
				padding: 0,
				color: this.color || ''
			};

			if (this.type === 'primary') {
				const themeStyle = {
					backgroundColor: this.primaryColor,
					border: `1px solid ${this.primaryColor}`
				};
				return { ...baseStyle, ...themeStyle };
			} else if (this.type === 'default') {
				const defaultStyle = {
					color: this.primaryColor,
					border: `1px solid ${this.primaryColor}`
				};
				return { ...baseStyle, ...defaultStyle };
			} else {
				return baseStyle;
			}
		}
	},
	methods: {
		handleClick() {
			if (!this.loading) {
				this.$emit("clickBtn");
			}
		},
		getphonenumber(e) {
			this.$emit("clickTel", e);
		},
	},
};
</script>

<style lang="scss" scoped>
.g_mr_4 {
	margin-right: 4px;
}
.g_flex_column_center {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.g_flex_row_center {
	display: flex;
	justify-content: center;
}

.g-components-button {
	.bocai-btn {
		width: 100%;
		color: #ffffff;
		box-sizing: border-box;
	}
	.bocai_btn_size {
		&_medium {
			height: 56px;
			font-size: 18px;
			line-height: 56px;
		}
		&_default {
			width: 250px !important;
			height: 42px;
			font-size: 18px;
			line-height: 42px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 42px;
				font-size: 18px;
				line-height: 42px;
			}
		}
		&_small {
			width: 120px !important;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
		&_160 {
			width: 160px !important;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
		&_mini {
			height: 28px !important;
			padding: 0 12px !important;
			font-size: 14px !important;
			line-height: 28px !important;
			.icon {
				font-size: 12px;
			}
		}
		&_height {
			height: 40px;
			font-size: 16px;
			line-height: 40px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
	}
	.bocai_btn_mode {
		&_circle {
			border-radius: 60px;
		}
		&_square {
			border-radius: 10px;
		}
	}
	.bocai_btn_type {
		&_primary {
			color: #fff;
			&.thover {
				opacity: 0.8;
			}
		}
		&_default {
			background-color: #fff;
			&.thover {
				opacity: .8;
			}
		}
		&_infro {
			pointer-events: none;
			background: #ddd;
			color: #666;
			border: 0.5px solid #ddd;
			&.thover {
				background: #cccccc;
			}
		}
		&_delete {
			border: 1rpx solid #fff;
			background-color: #fff;
			color: #fa5151;
			&.thover {
				opacity: 1;
				background-color: #f9f9f9;
				border: 1rpx solid #f9f9f9;
			}
		}
		&_none {
			background-color: #fff;
			color: #333;
			&.thover {
				opacity: .8;
			}
		}
		&_disabled {
			background-color: rgba(0, 0, 0, 0.05);
			color: rgba(0, 0, 0, 0.2);
			border: 1rpx solid rgba(0, 0, 0, 0.05);
			&.thover {
				opacity: 1;
			}
		}
    &_noStyle {
			background-color: rgba(0, 0, 0, 0.05);
			color: #333;
      font-weight: 600;
			&.thover {
				opacity: .8;
			}
		}
		&_gradual {
			background: linear-gradient(-130deg, #5c6cf7, #9963f9);
			color: #fff;
			line-height: 24px !important;
			opacity: 1;
			&.thover {
				opacity: 0.8;
			}
		}
	}
	.customBgColor {
		background-color: '#07c160';
		color: #fff;
	}
	.g_w_260 {
		width: 260px !important;
	}
	.g_h_48 {
		height: 48px !important;
		line-height: 48px !important;
	}
}
</style>