按钮封装

components/UiButton.vue

@@ -0,0 +1,103 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-09 11:31:29
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-09 14:22:43
+ * @Description: 按钮，每个类型有设置默认高， 宽度默认随内容变化，有特殊大小需要自定义class控制
+ props
+ type 固定按钮类型 红色面板 red_panel 红色描边red_line 黄色面板yellow_panel 黄色线条yellow_line 黄色渐变yellow_gradual 灰色grey
+ radius 是否圆角  true  false
+ disabled 是否禁用 true false
+-->
+<template>
+	<button :class="`ui-button ${myClass}`" @click="click">
+		<slot></slot>
+	</button>
+</template>
+<script>
+export default {
+	props : {
+		type : {
+			type : String,
+			default : 'red_panel'
+		},
+		radius: {
+			type : String | Boolean,
+			default : false
+		},
+		disabled : {
+			type : Boolean,
+			default : false
+		}
+	},
+	computed : {
+		myClass(){
+			let classStr = this.type ? `ui-button__${this.type}` : '';
+			if(this.radius && typeof this.radius === 'boolean'){
+				classStr += ' ui-button__radius'
+			}
+			classStr += this.disabled ? ' ui-button__disabled' : '';
+			return classStr;
+		}
+	},
+	methods : {
+		click(...args){
+			if(this.disabled){
+				return false;
+			}
+			this.$emit('click', args);
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.ui-button{
+	cursor: pointer;
+	&__red_panel{
+		background: #FF512B;
+		color: #fff;
+		height: 46px;
+		font-size: 18px;
+		padding: 0 30px;
+		border: none;
+		font-weight: bold;
+	}
+	&__red_line{
+		border:1px solid #FF512B;
+		height: 44px;
+		font-size: 18px;
+		padding: 0 30px;
+		color: #FF512B;
+	}
+	&__yellow_line{
+		border:1px solid #FF512B;
+		height: 28px;
+		padding: 0 10px;
+		color: #FF512B;
+	}
+	&__yellow_panel{
+		background:#FF512B;
+		height: 30px;
+		padding: 0 10px;
+		color: #fff;
+	}
+	&__yellow_gradual{
+		background: linear-gradient(270deg, #FFA25A 0%, #FF7F39 100%);
+		height: 42px;
+		color: #fff;
+	}
+	&__grey{
+		background:#f5f5f5;
+		border: 1px solid #ccc;
+		height: 28px;
+		padding: 0 10px;
+	}
+	&__radius{
+		border-radius: 4px;
+	}
+	&__disabled{
+		opacity: .8;
+		cursor: not-allowed;
+	}
+}
+</style>

pages/order/submit/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:30:58
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 16:25:39
+ * @LastEditTime: 2022-05-09 14:13:53
  * @Description: file content
 -->
 
@@ -18,7 +18,7 @@
 		<Message :orderInfo="orderInfo" :message.sync="userMessage"/>
 		<Amount :amount="orderInfo.payAmount"/>
 		<div class="pay">
-			<button class="btn" @click="submit">立即支付</button>
+			<UiButton radius type="red_panel" @click="submit">立即支付</UiButton>
 		</div>
 		<BsPay :visible.sync="payVisible" :orderId="orderId" @cancel="cancelPay"/>
 	</div>
@@ -30,18 +30,20 @@ import UIGoodsInfo from '../../../components/UIGoodsInfo.vue';
 import OrderInfo from './module/OrderInfo.vue';
 import Message from './module/Message.vue';
 import Amount from './module/Amount.vue';
+import UiButton from '../../../components/UiButton.vue';
 export default {
-	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount },
+	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount, UiButton },
 	data(){
 		return {
 			address : {id:3},
 			orderInfo : {},
 			orderId : '',
 			userMessage : '',
-			payVisible : true
+			payVisible : false
 		}
 	},
-	created(){
+	mounted(){
+
 		this.getBeforeOrder();
 	},
 	methods : {
@@ -127,15 +129,7 @@ export default {
 .pay{
 	text-align: right;
 	padding-bottom: 50px;
-	.btn{
-		background: #FF512B;
-		color: #fff;
-		font-size: 18px;
-		border: none;
-		height: 50px;
-		width: 163px;
-		margin-top: 10px;
-	}
+	margin-top: 10px;
 }
 
 </style>

plugins/api/order.js

@@ -4,7 +4,7 @@
  * @Author: ch
  * @Date: 2022-05-04 18:17:25
  * @LastEditors: ch
- * @LastEditTime: 2022-05-07 23:27:49
+ * @LastEditTime: 2022-05-09 11:07:28
  * @Description: file content
  */
 import {axiosTk} from "../axiosTk";