微信小程序组件

<template>
    <!-- 立即购买按钮 -->
    <view class='comButton'>
        <view class="buy"
              :style="{width:width,height:height,marginTop:marginTop,marginBottom:marginBottom,background:backgroundcolor,color:color,fontSize:fontSize,borderRadius:borderRadius,border:border}"
              :class='{"notBuy":disabled}'
              @tap="myClick">
            <slot>立即购买</slot>
        </view>
    </view>
</template>

<script>
export default {
    name: "comButton",
    components: {},
    filters: {},
    props: {
        //是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        //宽度
        width: {
            type: String,
            default: "444rpx"
        },
        //高度
        height: {
            type: String,
            default: "80rpx"
        },
        //上外边距
        marginTop: {
            type: String,
            default: "0rpx"
        },
        //下外边距
        marginBottom: {
            type: String,
            default: "0rpx"
        },
        //按钮背景颜色
        backgroundcolor: {
            type: String,
            default: "linear-gradient(87deg, #FDC400 0%, #F2781A 100%)"
        },
        borderRadius: {
            type: String,
            default: "30px"
        },
        //文字颜色
        color: {
            type: String,
            default: "#FFFFFF"
        },
        //文字大小
        fontSize: {
            type: String,
            default: "14px"
        },
        //是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        //按钮边框
        border: {
            type: String,
            defalut: "none"
        }
    },
    data() {
        return {};
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        myClick() {
            this.$emit("myClick");
        }
    }
};
</script>
<style lang='scss'>
.comButton {
    .buy {
        // width: 444px;
        height: 80px;
        background: linear-gradient(90deg, #fdc400 0%, #f2781a 100%);
        opacity: 1;
        border-radius: 40px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 36px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .notBuy {
        // width: 444px;
        height: 80px;
        background: #dddddd;
        opacity: 1;
        border-radius: 40px;
    }
}
</style>

<template>
    <!-- 卡片容器 -->
    <view class='comCardContainer'
          @tap="myClick">
        <view class="card-wrap"
              :style={width:width,height:height,background:background,padding:padding,borderRadius:borderRadius,boxSizing:boxSizing}>
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    name: "CardContainer",
    components: {},
    filters: {},
    props: {
        width: {
            type: String,
            default: "375px"
        },
        height: {
            type: String,
            default: "750px"
        },
        background: {
            type: String,
            default: "white"
        },
        padding: {
            type: String,
            default: "0px 0px"
        },
        borderRadius: {
            type: String,
            default: "16px"
        },
        boxSizing: {
            type: String,
            default: "border-box"
        }
    },
    data() {
        return {};
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        myClick() {
            this.$emit("myClick");
        }
    }
};
</script>
<style lang='scss'>
view.comCardContainer {
    view.card-wrap {
        position: relative;
        overflow: hidden;
    }
}
</style>

<template>
    <view class="AtSearchBar">
        <view class="AtSearchBar_hid"
              v-if="isDoon"
              @tap="goto"></view>
        <AtSearchBar :placeholder='placeholder'
                     :fixed="fixed"
                     :focus="focus"
                     :disabled="disabled"
                     :showActionButton="showActionButton"
                     :actionName="actionName"
                     :value="keyValue"
                     :onActionClick="change"
                     :onChange='changeKey'
                     :onConfirm="onConfirm"
                     :onFocus="onFocus"
                     :style="{width:width,borderRadius:height,height:height,background:background,border:border}"></AtSearchBar>
    </view>
</template>
<script>
import Taro from "@tarojs/taro";
import { AtSearchBar } from "taro-ui-vue";
import "taro-ui-vue/dist/style/components/search-bar.scss";
import "taro-ui-vue/dist/style/components/button.scss";
import "taro-ui-vue/dist/style/components/icon.scss";
//搜索组件
export default {
    components: {
        AtSearchBar
    },
    props: {
        //占位符
        placeholder: {
            type: String,
            default: "请输入搜索内容"
        },
        //是否固定顶部
        fixed: {
            type: Boolean,
            default: false
        },
        //是否聚焦
        focus: {
            type: Boolean,
            default: false
        },
        //是否禁止输入
        disabled: {
            type: Boolean,
            default: false
        },
        //是否一直显示右侧按钮
        showActionButton: {
            type: Boolean,
            default: true
        },
        //右侧按钮文案
        actionName: {
            type: String,
            default: "搜索"
        },
        //宽度
        width: {
            type: String,
            default: "95%"
        },
        //高度
        height: {
            type: String,
            default: "28px"
        },
        //是否只是展示
        //直接跳页面配合gotoPages方法
        isDoon: {
            type: Boolean,
            default: false
        },
        background: {
            type: String,
            default: "#fef9e6"
        },
        border: {
            type: String,
            default: "1px solid #fdc400"
        },
        //搜索内容
        keyValue: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            // key: ""
        };
    },
    methods: {
        change() {
            //搜索控件用@changeValue="changeValue"
            //changeValue(key){}
            // this.$emit("changeValue", this.key);
            this.$emit("changeValue", this.keyValue);
        },
        changeKey(key) {
            // console.log(key);
            // this.key = key;
            this.$emit("update:keyValue", key);
        },
        goto() {
            this.$emit("gotoPages");
        },
        onConfirm() {
            this.$emit("onConfirm", this.keyValue);
        },
        onFocus(key) {
            this.$emit("onFocus");
        }
    }
};
</script>
<style lang='scss'>
.AtSearchBar {
    display: flex;
    justify-content: center;
    position: relative;
    .at-search-bar__input-cnt {
        // background-color: #fef9e6;
        .at-search-bar__clear {
            display: none !important;
        }
        .at-search-bar__placeholder-wrap {
            -webkit-align-self: left;
            -ms-flex-item-align: left;
            align-self: left;
            -webkit-align-items: left;
            -ms-flex-align: left;
            align-items: left;
            -webkit-justify-content: left;
            -ms-flex-pack: left;
            justify-content: left;
            vertical-align: left;
            .at-icon {
                color: #777;
            }
            .at-search-bar__placeholder {
                color: #777;
            }
        }
    }
    .at-search-bar {
        // background-color: #fef9e6;
        padding: 0;
        // border: 2px solid #fdc400;
        .at-search-bar__action {
            height: 48px;
            width: 56px;
            background: linear-gradient(90deg, #fdc400 0%, #f2781a 100%);
            opacity: 1;
            border-radius: 28px;
            font-size: 28px;
            line-height: 48px;
            color: #fff;
            text-align: center;
        }
    }
    .at-search-bar::after {
        border: none;
    }
    .AtSearchBar_hid {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
    }
}
</style>

<template>
    <!-- 自定义顶部导航条 -->
    <view class="CustomTopNav">
        <view class="CustomContent"
              :style="{ height: navBarHeight + 'px',backgroundColor:backgroundColor}">
            <view class="CustomNav"
                  :style="{
        height: menuHeight + 'px',
        minHeight: menuHeight + 'px',
        left: menuRight + 'px',
        bottom: menuBotton + 'px',
      }">
                <slot></slot>
            </view>
        </view>
        <view :style="{ height: navBarHeight +'px' }"></view>
    </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
    name: "TopNav",
    data() {
        return {
            menuHeight: 0, //胶囊高度
            menuTop: 0, //胶囊距离顶部距离
            navBarHeight: 0, //导航栏高度
            menuRight: 0, //胶囊距右方间距
            menuBotton: 0 //胶囊距底部间距
        };
    },
    props: {
        //背景颜色
        backgroundColor: {
            type: String,
            default: "white"
        }
    },
    computed: {},
    watch: {},
    components: {},
    created() {
        this.getHeight();
    },
    mounted() {},
    methods: {
        getHeight() {
            const that = this;
            // 获取系统信息
            const systemInfo = Taro.getSystemInfoSync();
            // 胶囊按钮位置信息
            const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
            // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
            that.navBarHeight =
                (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
                menuButtonInfo.height +
                systemInfo.statusBarHeight;
            that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
            that.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
            that.menuHeight = menuButtonInfo.height;
        }
    }
};
</script>
<style lang="scss">
.CustomTopNav {
    .CustomContent {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        color: #fff;
        z-index: 800;
        .CustomNav {
            padding-right: 170px;
            position: absolute;
            height: 100%;
            color: black;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
    }
}
</style>