仿互站小程序
This commit is contained in:
Drawfans
55
vant/submit-bar/index.js
Normal file
55
vant/submit-bar/index.js
Normal file
@@ -0,0 +1,55 @@
|
||||
(0, require("../common/component").VantComponent)({
|
||||
classes: [ "bar-class", "price-class", "button-class" ],
|
||||
props: {
|
||||
tip: {
|
||||
type: null,
|
||||
observer: "updateTip"
|
||||
},
|
||||
tipIcon: String,
|
||||
type: Number,
|
||||
price: {
|
||||
type: null,
|
||||
observer: "updatePrice"
|
||||
},
|
||||
label: String,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
buttonHidden: Boolean,
|
||||
buttonText: String,
|
||||
currency: {
|
||||
type: String,
|
||||
value: "¥"
|
||||
},
|
||||
buttonType: {
|
||||
type: String,
|
||||
value: "danger"
|
||||
},
|
||||
decimalLength: {
|
||||
type: Number,
|
||||
value: 2,
|
||||
observer: "updatePrice"
|
||||
},
|
||||
suffixLabel: String,
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updatePrice: function() {
|
||||
var e = this.data, t = e.price, i = e.decimalLength;
|
||||
this.setData({
|
||||
hasPrice: "number" == typeof t,
|
||||
priceStr: (t / 100).toFixed(i)
|
||||
});
|
||||
},
|
||||
updateTip: function() {
|
||||
this.setData({
|
||||
hasTip: "string" == typeof this.data.tip
|
||||
});
|
||||
},
|
||||
onSubmit: function(e) {
|
||||
this.$emit("submit", e.detail);
|
||||
}
|
||||
}
|
||||
});
|
||||
13
vant/submit-bar/index.json
Normal file
13
vant/submit-bar/index.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-button": "../button/index",
|
||||
"van-icon": "../icon/index",
|
||||
"forview": "/utils/forview/index",
|
||||
"van-loading": "/vant/loading/index",
|
||||
"van-dialog": "/vant/dialog/index",
|
||||
"van-popup": "/vant/popup/index",
|
||||
"van-tab": "/vant/tab/index",
|
||||
"van-tabs": "/vant/tabs/index"
|
||||
}
|
||||
}
|
||||
25
vant/submit-bar/index.wxml
Normal file
25
vant/submit-bar/index.wxml
Normal file
@@ -0,0 +1,25 @@
|
||||
<view class="van-submit-bar custom-class">
|
||||
<slot name="top"></slot>
|
||||
<view class="van-submit-bar__tip" wx:if="{{tip}}">
|
||||
<van-icon customClass="van-submit-bar__tip-icon" name="{{tipIcon}}" size="12px" wx:if="{{tipIcon}}"></van-icon>
|
||||
<view class="van-submit-bar__tip-text" wx:if="{{hasTip}}">
|
||||
{{tip}}
|
||||
</view>
|
||||
<slot name="tip"></slot>
|
||||
</view>
|
||||
<view class="bar-class {{utils.bem( 'submit-bar__bar',{safe:safeAreaInsetBottom} )}}">
|
||||
<slot></slot>
|
||||
<view class="van-submit-bar__text" wx:if="{{hasPrice}}">
|
||||
<text>{{label||'合计：'}}</text>
|
||||
<text class="van-submit-bar__price price-class">
|
||||
<text class="van-submit-bar__currency">{{currency}} </text>
|
||||
<text>{{priceStr}}</text>
|
||||
</text>
|
||||
<text class="van-submit-bar__suffix-label">{{suffixLabel}}</text>
|
||||
</view>
|
||||
<van-button square bind:click="onSubmit" class="van-submit-bar__button" customClass="button-class" disabled="{{disabled}}" loading="{{loading}}" size="large" type="{{buttonType}}" wx:if="{{!buttonHidden}}">
|
||||
{{loading?'':buttonText}}
|
||||
</van-button>
|
||||
</view>
|
||||
</view>
|
||||
<wxs module="utils" src="../wxs/utils.wxs" />
|
||||
94
vant/submit-bar/index.wxss
Normal file
94
vant/submit-bar/index.wxss
Normal file
@@ -0,0 +1,94 @@
|
||||
@import "../area/index.wxss";
|
||||
|
||||
.van-submit-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
z-index: 100;
|
||||
z-index: var(--submit-bar-z-index,100);
|
||||
background-color: #fff;
|
||||
background-color: var(--submit-bar-background-color,#fff);
|
||||
}
|
||||
|
||||
.van-submit-bar__tip {
|
||||
padding: 10px;
|
||||
padding: var(--submit-bar-tip-padding,10px);
|
||||
color: #f56723;
|
||||
color: var(--submit-bar-tip-color,#f56723);
|
||||
font-size: 12px;
|
||||
font-size: var(--submit-bar-tip-font-size,12px);
|
||||
line-height: 1.5;
|
||||
line-height: var(--submit-bar-tip-line-height,1.5);
|
||||
background-color: #fff7cc;
|
||||
background-color: var(--submit-bar-tip-background-color,#fff7cc);
|
||||
}
|
||||
|
||||
.van-submit-bar__tip:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-submit-bar__tip-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
font-size: var(--submit-bar-tip-icon-size,12px);
|
||||
min-width: 18px;
|
||||
min-width: calc(var(--submit-bar-tip-icon-size, 12px)*1.5);
|
||||
}
|
||||
|
||||
.van-submit-bar__tip-text {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.van-submit-bar__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 50px;
|
||||
height: var(--submit-bar-height,50px);
|
||||
font-size: 14px;
|
||||
font-size: var(--submit-bar-text-font-size,14px);
|
||||
background-color: #fff;
|
||||
background-color: var(--submit-bar-background-color,#fff);
|
||||
}
|
||||
|
||||
.van-submit-bar__bar--safe {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.van-submit-bar__text {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
color: #323233;
|
||||
color: var(--submit-bar-text-color,#323233);
|
||||
padding-right: 12px;
|
||||
padding-right: var(--padding-sm,12px);
|
||||
font-weight: 500;
|
||||
font-weight: var(--font-weight-bold,500);
|
||||
}
|
||||
|
||||
.van-submit-bar__price {
|
||||
color: #ee0a24;
|
||||
color: var(--submit-bar-price-color,#ee0a24);
|
||||
font-size: 18px;
|
||||
font-size: var(--submit-bar-price-font-size,18px);
|
||||
}
|
||||
|
||||
.van-submit-bar__currency {
|
||||
font-size: 14px;
|
||||
font-size: var(--submit-bar-currency-font-size,14px);
|
||||
}
|
||||
|
||||
.van-submit-bar__suffix-label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.van-submit-bar__button {
|
||||
width: 110px;
|
||||
width: var(--submit-bar-button-width,110px);
|
||||
}
|
||||
Reference in New Issue
Block a user