<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>
注：以上内容仅用于日常学习
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
