组件封装
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('倒计时结束后再发送');
}
},