杨阁辉
4 years ago
11 changed files with 1126 additions and 57 deletions
Split View
Diff Options
-
13pages.json
-
48pages/my-offer/index.vue
-
667pages/submit-quotation/index.vue
-
4pages/trade/index.vue
-
62pages/trade/orderList.vue
-
46pages/trade/quotationList.vue
-
BINstatic/imgs/trade/myPrice.png
-
25uni_modules/uni-number-box/changelog.md
-
220uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
-
85uni_modules/uni-number-box/package.json
-
13uni_modules/uni-number-box/readme.md
@ -0,0 +1,667 @@ |
|||
<template> |
|||
<view class="submit-quotation"> |
|||
<view> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title=""> |
|||
<view class="submit-title">提交报价</view> |
|||
<view slot="left"></view> |
|||
<view slot="right"></view> |
|||
</uni-nav-bar> |
|||
</view> |
|||
<view class="submit-main"> |
|||
<view><text class="submit-main-title">交货要求</text></view> |
|||
<view> |
|||
<text class="submit-main-subTitle">询价客户：</text> |
|||
<text class="submit-main-subContant">东莞市隆兴纸业有限公司</text> |
|||
</view> |
|||
<view> |
|||
<text class="submit-main-subTitle">交货区域：</text> |
|||
<text class="submit-main-subContant">广东省/广州市/天河区</text> |
|||
</view> |
|||
<view> |
|||
<text class="submit-main-subTitle">交货时间：</text> |
|||
<text class="submit-main-subContant">2021/12/29 12:30</text> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-deadline"> |
|||
<view class="submit-text">报价截止</view> |
|||
<view class="submit-time"><text class="submit-time-text">12</text></view> |
|||
<view class="sbumit-colon">:</view> |
|||
<view class="submit-time"><text class="submit-time-text">12</text></view> |
|||
<view class="sbumit-colon">:</view> |
|||
<view class="submit-time"><text class="submit-time-text">12</text></view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-contant"> |
|||
<view class="submit-contant-head"> |
|||
<view class="submit-contant-title">丽品白卡｜200g｜787*1092｜5000张</view> |
|||
<view class="" @click="commodityModify()"><image class="submit-image" src="../../static/imgs/trade/myPrice.png" mode=""></image></view> |
|||
</view> |
|||
<view class="submit-contant-body"> |
|||
<view class=""> |
|||
<text class="submit-contant-body-title">重量(吨)：</text> |
|||
<text class="submit-contant-body-subtitle">1.6544</text> |
|||
</view> |
|||
<view> |
|||
<text class="submit-contant-body-title">单价(元/吨)：</text> |
|||
<text class="submit-contant-body-subtitle"> |
|||
1000 |
|||
<image @click="priceModify()" class="submit-image-price" src="../../static/imgs/trade/myPrice.png" mode=""></image> |
|||
</text> |
|||
</view> |
|||
<view> |
|||
<text class="submit-contant-body-title">小计(元)：</text> |
|||
<text class="submit-contant-body-subtitle">1.6544</text> |
|||
</view> |
|||
<view class="submit-contant-body-input"> |
|||
<uni-easyinput maxlength="100" class="submit-contant-body-inputClass" v-model="value" placeholder="请输入内容"></uni-easyinput> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="submit-contant-order"> |
|||
<view class=""> |
|||
<text class="submit-contant-order-title">其他费用：</text> |
|||
<text class="submit-contant-order-subtitle">¥ 80.00</text> |
|||
</view> |
|||
<view class=""> |
|||
<text class="submit-contant-order-title">合计：</text> |
|||
<text class="submit-contant-order-money">¥ 13800.32</text> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-contant-time"> |
|||
<view class=""> |
|||
<text class="submit-contant-time-title">有效时间：</text> |
|||
<text class="submit-contant-time-title">24小时</text> |
|||
</view> |
|||
<view class="" @click="resetTime()"><text class="submit-contant-time-subtitle">设置</text></view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-contant-remark"> |
|||
<view class="submit-contant-remark-title">报价备注</view> |
|||
<view class=""><uni-easyinput maxlength="200" type="textarea" class="submit-contant-remark-input" v-model="value1" placeholder="请输入内容"></uni-easyinput></view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-btnBg"><button class="submit-btn" type="primary">提交报价</button></view> |
|||
<view class=""> |
|||
<uni-popup ref="popup" :mask-click="false"> |
|||
<view class="submit-popup"> |
|||
<view class="submit-line"> |
|||
<view class="submit-popup-close"> |
|||
<view class="submit-popup-title">纸品名称：</view> |
|||
<view class="" @click="close()"><image class="submit-popup-close-image" src="../../static/imgs/client/close-icon.png" mode=""></image></view> |
|||
</view> |
|||
<view><uni-data-picker class="submit-popup-input" :border="false" :localdata="items" @change="onchange"></uni-data-picker></view> |
|||
</view> |
|||
<view class="submit-line"> |
|||
<view class="submit-popup-close"><view class="submit-popup-title">克重(g)</view></view> |
|||
<view class=""><uni-easyinput :inputBorder="false" class="submit-popup-input" type="number" v-model="value" placeholder="请输入内容"></uni-easyinput></view> |
|||
</view> |
|||
<view class="submit-line"> |
|||
<view class="submit-popup-close"><view class="submit-popup-title">规格(mm)</view></view> |
|||
<view class="submit-popup-close"> |
|||
<view class=""> |
|||
<uni-easyinput |
|||
:inputBorder="false" |
|||
class="submit-popup-input submit-popup-specifications" |
|||
type="number" |
|||
v-model="value" |
|||
placeholder="请输入内容" |
|||
></uni-easyinput> |
|||
</view> |
|||
<view class="submit-popup-x">x</view> |
|||
<view class=""> |
|||
<uni-easyinput |
|||
:inputBorder="false" |
|||
class="submit-popup-input submit-popup-specifications" |
|||
type="number" |
|||
v-model="value" |
|||
placeholder="请输入内容" |
|||
></uni-easyinput> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="submit-popup-close submit-number-box"> |
|||
<view class=""><view class="submit-popup-title">购买数量(张)</view></view> |
|||
<view class="submit-number-line"> |
|||
<uni-number-box v-model="vModelValue"></uni-number-box> |
|||
<text class="submit-number-text">预估重量：1.6346吨</text> |
|||
</view> |
|||
</view> |
|||
<view class=""><button class="submit-btn submit-number-btn" type="primary">确认修改纸品</button></view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
<view class=""> |
|||
<uni-popup ref="popupPrice" :mask-click="false"> |
|||
<view class="submit-popup"> |
|||
<view class="submit-line"> |
|||
<view class="submit-popup-close"> |
|||
<view class="submit-popup-title"> |
|||
单价(元/吨) |
|||
<text class="submit-number-text submit-price-subTitle">预估重量：1.6346吨</text> |
|||
</view> |
|||
<view class="" @click="close()"><image class="submit-popup-close-image" src="../../static/imgs/client/close-icon.png" mode=""></image></view> |
|||
</view> |
|||
<view> |
|||
<view class=""> |
|||
<uni-easyinput :inputBorder="false" class="submit-popup-input" type="number" v-model="value" placeholder="请输入内容"></uni-easyinput> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="submit-number-box submit-price"> |
|||
<view class="submit-popup-close"><view class="submit-popup-title">其他费用(元)</view></view> |
|||
<view class=""><uni-easyinput :inputBorder="false" class="submit-popup-input" type="number" v-model="value" placeholder="请输入内容"></uni-easyinput></view> |
|||
</view> |
|||
<view class="submit-price-total"> |
|||
<view class="submit-price-text">合计：</view> |
|||
<view class="submit-price-total-text">¥ 0</view> |
|||
</view> |
|||
<view class=""><button class="submit-btn submit-number-btn" type="primary">确认报价</button></view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
<view class=""> |
|||
<uni-popup ref="popupTime" :mask-click="false"> |
|||
<view class="submit-check-time"> |
|||
<view class="submit-check-flex "> |
|||
<view class="submit-check-cancel" @click="pickerCancel()"> |
|||
取消 |
|||
</view> |
|||
<view class="submit-check-title"> |
|||
设置时间 |
|||
</view> |
|||
<view class="submit-check-sure" @click="pickerSure()"> |
|||
确认 |
|||
</view> |
|||
</view> |
|||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="timeValue" @change="bindChange" class="picker-view"> |
|||
<picker-view-column> |
|||
<view class="item submit-check-text" v-for="(item, index) in years" :key="index">{{ item }}</view> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<view class="item submit-check-text" v-for="(item, index) in months" :key="index">{{ item }}小时</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { back, go2 } from '@/utils/hook.js' |
|||
import qnHeader from '@/components/qn-header/qn-header.vue' |
|||
import uGap from '@/components/u-gap/u-gap.vue' |
|||
export default { |
|||
components: { |
|||
qnHeader, |
|||
uGap |
|||
}, |
|||
data() { |
|||
const date = new Date() |
|||
const years = ['长期'] |
|||
const year = date.getFullYear() |
|||
const months = [] |
|||
const month = date.getMonth() + 1 |
|||
const day = date.getDate() |
|||
for (let i = 0; i <= 31; i++) { |
|||
years.push(i+'天') |
|||
} |
|||
for (let i = 1; i <= 12; i++) { |
|||
months.push(i) |
|||
} |
|||
return { |
|||
value: '', |
|||
value1: '', |
|||
vModelValue: '', |
|||
indicatorStyle: `height: 50px;`, |
|||
visible: true, |
|||
title: 'picker-view', |
|||
years, |
|||
year, |
|||
months, |
|||
month, |
|||
timeValue: [0, 1], |
|||
pickerValue:[], |
|||
items: [ |
|||
{ |
|||
text: '一年级', |
|||
value: '1-0' |
|||
}, |
|||
{ |
|||
text: '二年级', |
|||
value: '2-0' |
|||
}, |
|||
{ |
|||
text: '三年级', |
|||
value: '3-0' |
|||
}, |
|||
{ |
|||
text: '一年级', |
|||
value: '1-0' |
|||
}, |
|||
{ |
|||
text: '二年级', |
|||
value: '2-0' |
|||
}, |
|||
{ |
|||
text: '三年级', |
|||
value: '3-0' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
back, |
|||
// 商品操作按钮 |
|||
commodityModify(item) { |
|||
console.log(111) |
|||
this.$refs.popup.open('bottom') |
|||
}, |
|||
// 单价操作按钮 |
|||
priceModify() { |
|||
this.$refs.popupPrice.open('bottom') |
|||
}, |
|||
// 事件设置 |
|||
resetTime() { |
|||
this.$refs.popupTime.open('bottom') |
|||
}, |
|||
// 事件选择change事件 |
|||
bindChange(e) { |
|||
console.log(e.detail.value) |
|||
}, |
|||
close() { |
|||
this.$refs.popup.close() |
|||
this.$refs.popupPrice.close() |
|||
}, |
|||
// 纸张选择下拉change事件 |
|||
onchange(e) { |
|||
console.log(e) |
|||
this.pickerValue = e.detail.value |
|||
}, |
|||
// 时间设置取消 |
|||
pickerCancel(){ |
|||
this.$refs.popupTime.close() |
|||
}, |
|||
// 时间设置确认 |
|||
pickerSure(){ |
|||
this.$refs.popupTime.close() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.picker-view { |
|||
width: 750rpx; |
|||
height: 600rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
.item { |
|||
height: 50rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
padding-top: 30rpx; |
|||
} |
|||
.submit-quotation { |
|||
.submit-title { |
|||
width: 100%; |
|||
font-family: PingFangSC-Medium; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
} |
|||
.submit-main { |
|||
width: 750rpx; |
|||
height: 260rpx; |
|||
padding: 24rpx 0rpx 0rpx 32rpx; |
|||
line-height: 52rpx; |
|||
background: #ffffff; |
|||
.submit-main-title { |
|||
font-family: PingFangSC-Medium; |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
} |
|||
.submit-main-subTitle { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.submit-main-subContant { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.submit-deadline { |
|||
width: 750rpx; |
|||
height: 75rpx; |
|||
background: #f4f9fc; |
|||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12); |
|||
display: flex; |
|||
justify-content: center; |
|||
.submit-text { |
|||
font-family: PingFangSC-Medium; |
|||
font-size: 28rpx; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
margin-top: 22rpx; |
|||
width: 130rpx; |
|||
} |
|||
.submit-time { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: #ee0a24; |
|||
border-radius: 8rpx; |
|||
margin-top: 20rpx; |
|||
text-align: center; |
|||
} |
|||
.submit-time-text { |
|||
font-family: PingFangSC-Semibold; |
|||
font-size: 24rpx; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
line-height: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
.sbumit-colon { |
|||
width: 24rpx; |
|||
height: 32rpx; |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 24rpx; |
|||
color: #ee0a24; |
|||
text-align: center; |
|||
line-height: 32rpx; |
|||
font-weight: 400; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
.submit-contant { |
|||
background-color: #ffffff; |
|||
// height: 368rpx; |
|||
border-bottom: 2rpx solid #dddddd; |
|||
padding-bottom: 20rpx; |
|||
.submit-contant-head { |
|||
line-height: 90rpx; |
|||
width: 750rpx; |
|||
height: 90rpx; |
|||
border-bottom: 2rpx dashed #d8d8d8; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.submit-contant-title { |
|||
font-family: PingFangSC-Semibold; |
|||
font-size: 30rpx; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 600; |
|||
padding: 0rpx 0rpx 0rpx 32rpx; |
|||
} |
|||
.submit-contant-body { |
|||
line-height: 68rpx; |
|||
padding-left: 32rpx; |
|||
.submit-contant-body-title { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.submit-contant-body-subtitle { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
float: right; |
|||
margin-right: 32rpx; |
|||
} |
|||
.submit-contant-body-input { |
|||
margin-right: 32rpx; |
|||
} |
|||
.submit-contant-body-inputClass { |
|||
background-color: #f7f8fa; |
|||
} |
|||
} |
|||
} |
|||
.submit-contant-order { |
|||
width: 750rpx; |
|||
height: 90rpx; |
|||
line-height: 90rpx; |
|||
background: #ffffff; |
|||
display: flex; |
|||
padding-left: 32rpx; |
|||
padding-right: 32rpx; |
|||
justify-content: space-between; |
|||
.submit-contant-order-title { |
|||
width: 140rpx; |
|||
height: 40rpx; |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
font-weight: 400; |
|||
} |
|||
.submit-contant-order-subtitle { |
|||
width: 101rpx; |
|||
height: 40rpx; |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 400; |
|||
} |
|||
.submit-contant-order-money { |
|||
width: 172rpx; |
|||
height: 42rpx; |
|||
font-family: PingFangSC-Semibold; |
|||
font-size: 40rpx; |
|||
color: #f5222d; |
|||
letter-spacing: 0; |
|||
line-height: 42rpx; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
.submit-contant-time { |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
background: #ffffff; |
|||
line-height: 88rpx; |
|||
display: flex; |
|||
padding-left: 32rpx; |
|||
padding-right: 32rpx; |
|||
justify-content: space-between; |
|||
.submit-contant-time-title { |
|||
width: 230rpx; |
|||
height: 40rpx; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.submit-contant-time-subtitle { |
|||
width: 56rpx; |
|||
height: 40rpx; |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.submit-contant-remark { |
|||
width: 750rpx; |
|||
height: 336rpx; |
|||
background: #ffffff; |
|||
.submit-contant-remark-title { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
padding: 28rpx 0rpx 0rpx 32rpx; |
|||
} |
|||
.submit-contant-remark-input { |
|||
background: #f7f8fa; |
|||
border-radius: 20rpx; |
|||
margin: 10rpx 32rpx 32rpx 32rpx; |
|||
width: 686rpx; |
|||
} |
|||
} |
|||
.submit-btnBg { |
|||
width: 750rpx; |
|||
height: 120rx; |
|||
background: #ffffff; |
|||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12); |
|||
padding: 12rpx 32rpx 12rpx 32rpx; |
|||
} |
|||
.submit-btn { |
|||
width: 686rpx; |
|||
height: 96rpx; |
|||
background: #007aff; |
|||
border-radius: 10px; |
|||
} |
|||
.submit-image { |
|||
width: 24.38rpx; |
|||
height: 20.38rpx; |
|||
margin-right: 32rpx; |
|||
cursor: pointer; |
|||
} |
|||
.submit-image-price { |
|||
width: 24.38rpx; |
|||
height: 20.38rpx; |
|||
margin-left: 14rpx; |
|||
cursor: pointer; |
|||
} |
|||
.submit-popup { |
|||
width: 750rpx; |
|||
height: 960rpx; |
|||
background: #ffffff; |
|||
border-top-right-radius: 2rpx; |
|||
border-top-left-radius: 2rpx; |
|||
padding: 20rpx 32rpx 0rpx 32rpx; |
|||
// line-height: 124rpx; |
|||
.submit-popup-input { |
|||
background-color: #f5f5f5; |
|||
} |
|||
.submit-popup-close { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.submit-popup-close-image { |
|||
width: 24.38rpx; |
|||
height: 20.38rpx; |
|||
cursor: pointer; |
|||
} |
|||
.submit-popup-title { |
|||
font-size: 30rpx; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 400; |
|||
} |
|||
.submit-popup-specifications { |
|||
width: 320rpx; |
|||
} |
|||
.submit-popup-x { |
|||
font-size: 32rpx; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
font-weight: 400; |
|||
} |
|||
.submit-line { |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
padding-bottom: 32rpx; |
|||
height: 194rpx; |
|||
line-height: 72rpx; |
|||
} |
|||
.submit-number-box { |
|||
margin-top: 24rpx; |
|||
} |
|||
.submit-number-text { |
|||
font-size: 24rpx; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
font-weight: 400; |
|||
} |
|||
.submit-number-line { |
|||
line-height: 40rpx; |
|||
} |
|||
.submit-number-btn { |
|||
position: absolute; |
|||
bottom: 20rpx; |
|||
} |
|||
.submit-price { |
|||
line-height: 72rpx; |
|||
} |
|||
.submit-price-total { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-top: 20rpx; |
|||
} |
|||
.submit-price-total-text { |
|||
font-size: 40rpx; |
|||
color: #f5222d; |
|||
letter-spacing: 0; |
|||
line-height: 42rpx; |
|||
font-weight: 600; |
|||
} |
|||
.submit-price-text { |
|||
font-size: 28rpx; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
text-align: right; |
|||
font-weight: 400; |
|||
line-height: 40rpx; |
|||
} |
|||
.submit-price-subTitle { |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
.submit-check-time{ |
|||
background-color: #FFFFFF; |
|||
padding: 28rpx 32rpx 0px 28rpx; |
|||
.submit-check-flex { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.submit-check-title{ |
|||
font-size: 32rpx; |
|||
color: #323233; |
|||
text-align: center; |
|||
line-height: 44rpx; |
|||
font-weight: 500; |
|||
} |
|||
.submit-check-cancel{ |
|||
font-size: 28rpx; |
|||
color: #969799; |
|||
line-height: 40rpx; |
|||
font-weight: 400; |
|||
cursor: pointer; |
|||
} |
|||
.submit-check-sure{ |
|||
font-size: 28rpx; |
|||
color: #007AFF; |
|||
line-height: 40rpx; |
|||
font-weight: 400; |
|||
cursor: pointer; |
|||
} |
|||
.submit-check-text{ |
|||
font-size: 36rpx; |
|||
color: #323233; |
|||
line-height: 48rpx; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
| Before | After |
|---|---|
|
|
| Width: 32 | Height: 32 | Size: 794 B |
@ -0,0 +1,25 @@ |
|||
## 1.2.1（2021-11-22） |
|||
- 修复 vue3中某些scss变量无法找到的问题 |
|||
## 1.2.0（2021-11-19） |
|||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box) |
|||
## 1.1.2（2021-11-09） |
|||
- 新增 提供组件设计资源，组件样式调整 |
|||
## 1.1.1（2021-07-30） |
|||
- 优化 vue3下事件警告的问题 |
|||
## 1.1.0（2021-07-13） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.0.7（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.0.6（2021-04-20） |
|||
- 修复 uni-number-box 浮点数运算不精确的 bug |
|||
- 修复 uni-number-box change 事件触发不正确的 bug |
|||
- 新增 uni-number-box v-model 双向绑定 |
|||
## 1.0.5（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
|
|||
## 1.0.7（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
- 新增 支持 v-model |
|||
- 新增 支持 focus、blur 事件 |
|||
- 新增 支持 PC 端 |
|||
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<view class="uni-numbox"> |
|||
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}"> |
|||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text> |
|||
</view> |
|||
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" |
|||
v-model="inputValue" :style="{background, color}" /> |
|||
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}"> |
|||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
/** |
|||
* NumberBox 数字输入框 |
|||
* @description 带加减按钮的数字输入框 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=31 |
|||
* @property {Number} value 输入框当前值 |
|||
* @property {Number} min 最小值 |
|||
* @property {Number} max 最大值 |
|||
* @property {Number} step 每次点击改变的间隔大小 |
|||
* @property {String} background 背景色 |
|||
* @property {String} color 字体颜色（前景色） |
|||
* @property {Boolean} disabled = [true|false] 是否为禁用状态 |
|||
* @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value |
|||
* @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象 |
|||
* @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象 |
|||
*/ |
|||
|
|||
export default { |
|||
name: "UniNumberBox", |
|||
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'], |
|||
props: { |
|||
value: { |
|||
type: [Number, String], |
|||
default: 1 |
|||
}, |
|||
modelValue: { |
|||
type: [Number, String], |
|||
default: 1 |
|||
}, |
|||
min: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
max: { |
|||
type: Number, |
|||
default: 100 |
|||
}, |
|||
step: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
background: { |
|||
type: String, |
|||
default: '#f5f5f5' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#333' |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
inputValue: 0 |
|||
}; |
|||
}, |
|||
watch: { |
|||
value(val) { |
|||
this.inputValue = +val; |
|||
}, |
|||
modelValue(val) { |
|||
this.inputValue = +val; |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.value === 1) { |
|||
this.inputValue = +this.modelValue; |
|||
} |
|||
if (this.modelValue === 1) { |
|||
this.inputValue = +this.value; |
|||
} |
|||
}, |
|||
methods: { |
|||
_calcValue(type) { |
|||
if (this.disabled) { |
|||
return; |
|||
} |
|||
const scale = this._getDecimalScale(); |
|||
let value = this.inputValue * scale; |
|||
let step = this.step * scale; |
|||
if (type === "minus") { |
|||
value -= step; |
|||
if (value < (this.min * scale)) { |
|||
return; |
|||
} |
|||
if (value > (this.max * scale)) { |
|||
value = this.max * scale |
|||
} |
|||
} |
|||
|
|||
if (type === "plus") { |
|||
value += step; |
|||
if (value > (this.max * scale)) { |
|||
return; |
|||
} |
|||
if (value < (this.min * scale)) { |
|||
value = this.min * scale |
|||
} |
|||
} |
|||
|
|||
this.inputValue = (value / scale).toFixed(String(scale).length - 1); |
|||
this.$emit("change", +this.inputValue); |
|||
// TODO vue2 兼容 |
|||
this.$emit("input", +this.inputValue); |
|||
// TODO vue3 兼容 |
|||
this.$emit("update:modelValue", +this.inputValue); |
|||
}, |
|||
_getDecimalScale() { |
|||
|
|||
let scale = 1; |
|||
// 浮点型 |
|||
if (~~this.step !== this.step) { |
|||
scale = Math.pow(10, String(this.step).split(".")[1].length); |
|||
} |
|||
return scale; |
|||
}, |
|||
_onBlur(event) { |
|||
this.$emit('blur', event) |
|||
let value = event.detail.value; |
|||
if (!value) { |
|||
// this.inputValue = 0; |
|||
return; |
|||
} |
|||
value = +value; |
|||
if (value > this.max) { |
|||
value = this.max; |
|||
} else if (value < this.min) { |
|||
value = this.min; |
|||
} |
|||
const scale = this._getDecimalScale(); |
|||
this.inputValue = value.toFixed(String(scale).length - 1); |
|||
this.$emit("change", +this.inputValue); |
|||
this.$emit("input", +this.inputValue); |
|||
}, |
|||
_onFocus(event) { |
|||
this.$emit('focus', event) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
$box-height: 26px; |
|||
$bg: #f5f5f5; |
|||
$br: 2px; |
|||
$color: #333; |
|||
|
|||
.uni-numbox { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.uni-numbox-btns { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0 8px; |
|||
background-color: $bg; |
|||
/* #ifdef H5 */ |
|||
cursor: pointer; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-numbox__value { |
|||
margin: 0 2px; |
|||
background-color: $bg; |
|||
width: 40px; |
|||
height: $box-height; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
border-left-width: 0; |
|||
border-right-width: 0; |
|||
color: $color; |
|||
} |
|||
|
|||
.uni-numbox__minus { |
|||
border-top-left-radius: $br; |
|||
border-bottom-left-radius: $br; |
|||
} |
|||
|
|||
.uni-numbox__plus { |
|||
border-top-right-radius: $br; |
|||
border-bottom-right-radius: $br; |
|||
} |
|||
|
|||
.uni-numbox--text { |
|||
// fix nvue |
|||
line-height: 20px; |
|||
|
|||
font-size: 20px; |
|||
font-weight: 300; |
|||
color: $color; |
|||
} |
|||
|
|||
.uni-numbox .uni-numbox--disabled { |
|||
color: #c0c0c0 !important; |
|||
/* #ifdef H5 */ |
|||
cursor: not-allowed; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
{ |
|||
"id": "uni-number-box", |
|||
"displayName": "uni-number-box 数字输入框", |
|||
"version": "1.2.1", |
|||
"description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"uniui", |
|||
"数字输入框" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"前端组件", |
|||
"通用组件" |
|||
], |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": ["uni-scss"], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
|
|||
|
|||
## NumberBox 数字输入框 |
|||
> **组件名：uni-number-box** |
|||
> 代码块： `uNumberBox` |
|||
|
|||
|
|||
带加减按钮的数字输入框。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
|
|||
|
|||
Write
Preview
Loading…
Cancel
Save