uniapp封装门票等票务样式

晚生隆海

已于 2023-06-29 17:23:49 修改

阅读量954

点赞数 1

分类专栏：微信小程序 Vue # JavaScript 文章标签： uni-app javascript 前端

于 2023-06-29 17:20:18 首次发布

本文链接：https://blog.csdn.net/thlchina/article/details/131460583

版权

JavaScript 同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

微信小程序

8 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

文章介绍了如何使用ticketpage组件，该组件能根据父级背景颜色动态改变镂空部分的样式。组件包含header和content两个插槽，允许用户自定义头部和内容区域的样式。示例代码展示了组件的结构和样式实现，以及如何在实际项目中应用和自定义，如将虚线替换为背景图片。

摘要由CSDN通过智能技术生成

先看效果图
在这里插入图片描述

ticketpage组件引用后，根据父级背景颜色改变镂空的颜色,空组件只有中间镂空的样式，上面是插槽heaer,下面内容是插槽content，可以自定义自己的内容和样式。我实现的最终效果是用的uview组件，如果复现需要项目引入。可以替换中间的虚线为背景图等适合自己的样式

组件代码：

<template>
    <view class="ticket-page">
        <view class="header">
            <slot name="header">header</slot>
        </view>
        <view class="line">
            <view class="middle">
                <view class="dashed"></view>
            </view>
        </view>
        <view class="content">
            <slot name="content">content</slot>
        </view>
    </view>
</template>

<script>
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    mixins: [],
    props: {
        bgColor: {
            default: '#F6F6F6',
        },
    },
    data() {
        // 这里存放数据
        return {
            dashed: '-',
        };
    },
    // 挂载方法
    mounted() {},
    // 方法集合
    methods: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    onLoad(options) {},
    // 生命周期 - 页面展示（不可以访问DOM元素）
    onShow() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    onReady() {},
    onHide() {}, // 生命周期 - 监听页面隐藏
    // 生命周期 - 上拉加载更多
    //onReachBottom() {
    //  if (this.hotelParasm.pageNum * this.hotelParasm.pageSize >= this.total) {
    //  this.loadStatus = 'nomore' return;
    //  if (this.isloading) return;
    //if (this.isloading) return;
    //此处判断，上锁，防止重复请求
    //  if (!this.isloading) {
    //      this.hotelParasm.pageNum += 1
    //          this.gethotelList();
    //      }
    //},
    // 生命周期 - 下拉刷新数据
    //onPullDownRefresh() {
    //},
    onUnload() {}, // 生命周期 - 监听页面卸载
};
</script>
<style lang="scss" scoped>
.ticket-page {
    width: 690rpx;
    box-sizing: border-box;

    .header {
        min-height: 100rpx;
        background-color: white;
        border-radius: 15rpx 15rpx 0 0;
    }
    .line {
        width: 690rpx;
        display: flex;
        justify-content: flex-start;
        height: 30rpx;
        align-items: center;
        box-sizing: border-box;
        background: radial-gradient(circle at 0 50%, transparent 0.4rem, #fff 0.45rem) top left,
            radial-gradient(circle at 100% 50%, transparent 0.4rem, #fff 0.45rem) top right;
        background-size: 51% 100%;
        background-repeat: no-repeat;
        padding-left: 15rpx;
        padding-right: 15rpx;

        .middle {
            width: 660rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            background-color: white;
            overflow: hidden;
            .dashed {
                width: 100%;
                border: 1rpx dashed #cdcdcd;
            }
        }
    }

    .content {
        min-height: 100rpx;
        background-color: white;
        border-radius: 0 0 15rpx 15rpx;
    }
}
</style>

组件使用：

   <ticketpage>
                <template slot="header">
                    <view class="header">
                        <view class="title">巫山小三峡·小小三峡景区</view>
                        <view class="date">
                            <text class="iconfont icon-rili"></text>
                            <text>2023-6-16至2023-7-16</text>
                        </view>
                    </view>
                </template>
                <template #content>
                    <view class="content">
                        <u-cell :border="false">
                            <view slot="title" class="cell-title">购买数量</view>
                            <u-number-box slot="right-icon" @change="handleBuyNum" :integer="true" v-model="buyNum" step="1" :min="0" :max="10">
                                <view slot="minus" class="minus">
                                    <u-icon name="minus" size="12" color="#fff"></u-icon>
                                </view>
                                <text class="ipt" slot="input">{{ buyNum }}</text>
                                <view slot="plus" class="plus">
                                    <u-icon name="plus" color="#fff" size="12"></u-icon>
                                </view>
                            </u-number-box>
                        </u-cell>
                        <view style="padding: 0 30rpx 30rpx; box-sizing: border-box">
                            <view class="prompt">可在使用范围日期内任选一天游玩</view>
                            <view class="prompt">
                                <text style="color: #ff6100">条件退款 | </text>
                                <text style="color: #ff6100; margin-right: 30rpx">无需换票</text>
                                <text style="color: #666666">购买须知 ></text>
                            </view>
                        </view>
                    </view>
                </template>
            </ticketpage>
  <style lang="scss" scoped>
.buy-ticket {
    width: 100%;
    .home {
        background-color: #f1f1f1;
        padding: 30rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        .header {
            padding: 30rpx;
            box-sizing: border-box;
            .title {
                font-size: 32rpx;
                font-weight: bold;
            }
            .date {
                width: 100%;
                background-color: #f7f8fa;
                color: #666;
                padding: 20rpx;
                box-sizing: border-box;
                margin-top: 20rpx;
            }
        }
        .content {
            box-sizing: border-box;
            .ipt {
                display: inline-block;
                width: 40rpx;
                height: 40rpx;
                border-radius: 10rpx;
                text-align: center;
                font-weight: bold;
                // background-color: #cdcdcd;
                margin: 0 6rpx;
                color: #333;
            }
            .cell-title {
                font-size: 32rpx;
                font-weight: bold;
            }
            .plus {
                min-width: 40rpx;
                height: 40rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 4rpx;
                background-color: $red;
                border-radius: 6rpx;
            }
            .minus {
                width: 40rpx;
                height: 40rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 4rpx;
                background-color: #cdcdcd;
                border-radius: 10rpx;
            }
            .prompt {
                height: 40rpx;
                line-height: 40rpx;
                color: #666666;
            }
        }
    }
}
</style>