组件封装

1. 单选按钮组件封装

需要传值 title 列表的标题、defaulttitle默认标题、listdata渲染列表的数据

<template>
	<view class="yxd-order-list-container">
		<view class="items " :class="{margintop:ismargintop}">
			<view class="title">
				{{title}} <text v-if="smalltitle" class="smalltitle">{{smalltitle}}</text>
			</view>

			<view class="item flex space-between" @click="selectItem(item)" v-for="(item,index) in listdata"
				:key="index">
				<view class="text">{{item || item.data}} <text class="itemRemarks">{{itemRemarks}}</text>   </view>
				<view class="item-img" v-if="SelectItem!='' ? SelectItem===item : defaulttitle ===item">
					<image src="/static/active.png" class="img100" mode=""></image>
				</view>
				<view class="item-img-no" v-else> </view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 大标题
			title: {
				type: String,
				default: "默认标题"
			},	
			// 小标题
			smalltitle: {
				type: String,
				default: ""
			},
			// 是否默认进行上边距
			ismargintop:{
				type:Boolean,
				default:true
			},
			// 默认选中的标题
			defaulttitle: {
				type: String,
				default: ""
			},
			//列表数据
			listdata: {
				type: Array,
				default: [
					"天气原因不方便出行2",
					"换票不方便",
					"入园证件未带/带错",
					"需要提前购买不能马上入园",
					"有价格更优惠的票",
					"计划有变/拍错/不想去了"
				]
			},
			
			itemRemarks:{
				type:String,
				default:""
			}
		},
		data(){
			return{
				SelectItem:""
			}
		},
		methods: {
			selectItem(value) {
				this.SelectItem = value
				this.$emit('change', value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yxd-order-list-container {
		.margintop{
			margin-top: 16upx;
		};
		.items {
			
			width: 100%;
			padding: 20upx 40upx;
			background-color: #fff;

			.title {
				font-size: 34upx;
				height: 85upx;
				line-height: 85upx;
			}
			.smalltitle {
				font-size: 28upx;
				height: 85upx;
				line-height: 85upx;
				padding-left: 13upx;
			}
			

			.item {
				height: 75upx;
				line-height: 75upx;
				border-top: 1px solid #f3f4f6;
				display: flex;
				align-items: center;

				.text {
					font-size: 28upx;
					.itemRemarks{
						font-size: 26upx;
						color: #fd871f;
					}
				}

				.item-img {
					width: 30upx;
					height: 30upx;
					background-color: #fb8519;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 80%;
						height: 80%;

					}
				}

				.item-img-no {
					width: 30upx;
					height: 30upx;
					border-radius: 50upx;
					border: 1px solid #c6c6c6;

				}
			}
		}

	}
</style>

2.多选按钮组件封装

需要传值 title 列表的标题、smalltitle小标题、ismargintop组件是否显示默认上边距[默认为true]、defaulttitle默认选中标题、listdata渲染列表的数据、itemRemarks单条的列表的子标题

<template>
	<view class="yxd-order-list-container">
		<view class="items " :class="{margintop:ismargintop}">
			<view class="title">
				{{title}} <text v-if="smalltitle" class="smalltitle">{{smalltitle}}</text>
			</view>
			<!-- v-if="SelectItem!='' ? SelectItem===item : defaulttitle ===item" -->
			<view class="item flex space-between" @click="selectItem(item)" v-for="(item,index) in listdata"
				:key="index">
				<view class="text">{{item || item.data}} <text class="itemRemarks">{{itemRemarks}}</text> </view>
				<view class="item-img" v-if="isselected.indexOf(item)>-1">
					<image src="/static/active.png" class="img100" mode=""></image>
				</view>
				<view class="item-img-no" v-else> </view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 大标题
			title: {
				type: String,
				default: "默认标题"
			},
			// 小标题
			smalltitle: {
				type: String,
				default: ""
			},
			// 是否默认进行上边距
			ismargintop: {
				type: Boolean,
				default: true
			},
			// 默认选中的标题
			defaulttitle: {
				type: String,
				default: ""
			},
			//列表数据
			listdata: {
				type: Array,
				default: [
					"天气原因不方便出行2",
					"换票不方便",
					"入园证件未带/带错",
					"需要提前购买不能马上入园",
					"有价格更优惠的票",
					"计划有变/拍错/不想去了"
				]
			},

			itemRemarks: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				SelectItem: "",
				isselected: []
			}
		},
		methods: {
			selectItem(value) {
				this.SelectItem = value
				console.log(value);
				let index = this.isselected.indexOf(value);
				if (index > -1) {
					//移除数组中的数据，index为从第几个开始数，1为移除几个。
					this.isselected.splice(index, 1);
				} else {
					this.isselected.push(value);
				}
				console.log(this.isselected);

				this.$emit('change', this.isselected)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yxd-order-list-container {
		.margintop {
			margin-top: 16upx;
		}

		;

		.items {

			width: 100%;
			padding: 20upx 40upx;
			background-color: #fff;

			.title {
				font-size: 34upx;
				height: 85upx;
				line-height: 85upx;
			}

			.smalltitle {
				font-size: 28upx;
				height: 85upx;
				line-height: 85upx;
				padding-left: 13upx;
			}


			.item {
				height: 75upx;
				line-height: 75upx;
				border-top: 1px solid #f3f4f6;
				display: flex;
				align-items: center;

				.text {
					font-size: 28upx;

					.itemRemarks {
						font-size: 26upx;
						color: #fd871f;
					}
				}

				.item-img {
					width: 30upx;
					height: 30upx;
					background-color: #fb8519;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 80%;
						height: 80%;

					}
				}

				.item-img-no {
					width: 30upx;
					height: 30upx;
					border-radius: 50upx;
					border: 1px solid #c6c6c6;

				}
			}
		}

	}
</style>

3.时间组件封装

传递一个时间戳，可以然后对这个时间戳进行相应的变化

<template>
	<view class="content">
		{{content}}
	</view>
</template>

<script>
	export default {
		name: "azy-time",
		data() {
			return {
				time_inv:'',
				time_text:'',
				content:'',//展示的文字
				minute:"" ,
				second:""
				
			};
		},
		props:{
			timemap:{
				type:Number,
				default:0,
			}
		},
		created(){
			this.time_text = this.$props.timemap;
			let that = this;
			that.time_inv = setInterval(()=>{
				if(that.time_text > 1){
					that.time_text--;
					that.minute= `${parseInt(that.time_text/60)}<10`?'0'+`${parseInt(that.time_text/60)}`:`${parseInt(that.time_text/60)}`
					that.second= `${parseInt(that.time_text%60)}`<10?'0'+`${parseInt(that.time_text%60)}`:`${parseInt(that.time_text%60)}`
					that.content =	that.minute+':'+that.second
				}else{
					clearInterval(that.time_inv);
				}
			},1000)
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	
</style>

4.获取验证码

<view class="getcode" @click="getCode" v-if="seconds<0"> 获取验证码 </view>
<view class="getcode" @click="getCode" v-else-if="seconds==0"> 重新获取 </view>
<view class="getcode"  v-else> {{seconds}}s </view>

data() {
    return {
        seconds: -1,
        inv: '',
    }
},

getCode() {
    let that = this
    if (that.seconds <= 0) {
        // 模拟向后端请求验证码
        uni.showLoading({
            title: '正在获取验证码'
        })
        setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            // this.$refs.uCode.start();
            that.seconds = 60
            if (!that.inv) {
                that.inv = setInterval(() => {
                    if (that.seconds == 0) {
                        clearInterval(that.inv);
                        that.inv = '';
                    } else {
                        that.seconds--;
                    }
                }, 1000)
            }
        }, 2000);

    } else {
        uni.$u.toast('倒计时结束后再发送');
    }
},