init
This commit is contained in:
shuhongfan
@@ -0,0 +1,179 @@
|
||||
.goodsSearch{
|
||||
background-color: white;
|
||||
padding: 38rpx 40rpx 0rpx 40rpx;
|
||||
.searchBox-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
color: #0F0F0F;
|
||||
font-weight: bold;
|
||||
.label{
|
||||
display: inline-block;
|
||||
width: 62rpx;
|
||||
height: 30rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/required.png');
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.stopSend{
|
||||
font-size: 24rpx;
|
||||
color: #888888;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.gantanhao{
|
||||
display: inline-block;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/gantanhao.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
.selected-goods{
|
||||
padding-top: 32rpx;
|
||||
overflow: hidden;
|
||||
.goods{
|
||||
position: relative;
|
||||
margin-bottom: 46rpx;
|
||||
border: 2rpx solid #E63E32;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
color:#E63E32 ;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
padding:15rpx 22rpx 15rpx 18rpx ;
|
||||
height: 34rpx;
|
||||
display: inline-block;
|
||||
image{
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
bottom: 10rpx;
|
||||
top: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.seachBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
::v-deep .uni-searchbar{
|
||||
padding-left: 0rpx!important;
|
||||
.uni-searchbar__box{
|
||||
border-radius: 34rpx!important;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
}
|
||||
uni-search-bar{
|
||||
flex: auto;
|
||||
}
|
||||
.search-icon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/search.png');
|
||||
}
|
||||
.search-btn{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.recent-send,.recent-send-goods,.hot-send-goods{
|
||||
padding: 20rpx 40rpx 0rpx 0rpx;
|
||||
.recent-send-title{
|
||||
font-size: 26rpx;
|
||||
color: #0F0F0F;
|
||||
}
|
||||
.recent-send-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 44rpx;
|
||||
.recent-send-item{
|
||||
margin-right: 20rpx;
|
||||
margin-top: 35rpx;
|
||||
font-size: 24rpx;
|
||||
color: #0F0F0F;
|
||||
padding:15rpx 22rpx 15rpx 18rpx ;
|
||||
height: 34rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 32rpx;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recent-send-goods{
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
color: #0F0F0F;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.hot-send-goods{
|
||||
font-size: 28rpx;
|
||||
padding-top: 0rpx;
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #0F0F0F;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.search-list{
|
||||
.seatch-list-item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 102rpx;
|
||||
border-bottom: 2rpx solid #F4F4F4;
|
||||
.label{
|
||||
font-size: 28rpx;
|
||||
color: #151515;
|
||||
}
|
||||
.classify{
|
||||
font-size: 28rpx;
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .uni-popup{
|
||||
.uni-popup__wrapper{
|
||||
background-color:white!important;
|
||||
padding:36rpx 33rpx 43rpx 33rpx ;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
}
|
||||
.title{
|
||||
font-size: 30rpx;
|
||||
color: #151515;
|
||||
text-align: center;
|
||||
margin-bottom: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content{
|
||||
font-size: 28rpx;
|
||||
color: #151515;
|
||||
line-height: 40prx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.btn{
|
||||
width: 404rpx;
|
||||
height: 88rpx;
|
||||
background-color: #E84134;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
margin-top: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
<!-- 物品类型弹窗页面 -->
|
||||
<template>
|
||||
<view class="goodsSearch">
|
||||
<!-- 头部 -->
|
||||
<view class="searchBox-title">
|
||||
<view class="title">
|
||||
物品名称
|
||||
<view class="label"></view>
|
||||
</view>
|
||||
<view class="stopSend" @click="openForbidGoodsDialog">
|
||||
禁寄物品
|
||||
<view class="gantanhao"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<view class="seachBox" v-if="!isSelectedGoods">
|
||||
<uni-search-bar :cancelButton='isFocus && searchValue?"none":"auto"' :focus="isFocus" placeholder="请输入搜索内容"
|
||||
v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear">
|
||||
<template v-slot:searchIcon>
|
||||
<view class="search-icon"></view>
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
<view class="search-btn" @click="userDefined" v-if="searchValue && isFocus">确定</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近寄件 -->
|
||||
<view class="recent-send-goods" v-if='!isSelectedGoods && recentSendList.data.length && !isInput'>
|
||||
<view class="title">最近寄件</view>
|
||||
<view class="recent-send-list">
|
||||
<view class="recent-send-item" v-for="(item,index) in recentSendList.data" :key='index'
|
||||
@click="handleClick(item)">
|
||||
{{item.name}}{{item.goodsType?'('+item.goodsType.name+')':''}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选择的物品 -->
|
||||
<view class="selected-goods" v-if="isSelectedGoods">
|
||||
<view class="goods" @click.prevent="handleSelectedGoods">
|
||||
<image src='../../../static/shanchu-after.png' @click.stop="handleCancelGood"></image>
|
||||
{{goods.info.name}}{{goods.info.goodsType?'('+goods.info.goodsType.name+')':""}}
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 热门寄件 -->
|
||||
<view class="hot-send-goods" v-if='!isSelectedGoods && !isInput && isFocus'>
|
||||
<view class="title">热门寄件</view>
|
||||
<view class="recent-send-list">
|
||||
<view class="recent-send-item" v-for="(item,index) in hotSendList.data" :key='index'
|
||||
@click="handleClick(item)">
|
||||
{{item.name}}{{item.goodsType?'('+item.goodsType.name+')':''}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 模糊查询出的列表 -->
|
||||
<view class="search-list" v-if="isInput">
|
||||
<view class="seatch-list-item" @click="handleClick(item)" v-for="(item,index) in dimSearchList.data"
|
||||
:key="index">
|
||||
<view class="label">{{item.name}}</view>
|
||||
<view class="classify">{{item.name}}{{item.goodsType?'('+item.goodsType.name+')':''}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 禁寄物品弹窗 -->
|
||||
<uni-popup ref="popup" type="bottom" :safe-area="false">
|
||||
<view class="title">禁止寄递物品目录</view>
|
||||
<view class="content">
|
||||
1.枪支(含仿制品、主要零部件)弹药。
|
||||
</view>
|
||||
<view class="content">
|
||||
2．管制器具。如匕首、三棱刮刀、带有自锁装置的弹簧刀(跳刀)、弩、催泪器等。
|
||||
</view>
|
||||
<view class="content">
|
||||
3.爆炸物品。如炸药、雷管、导火索、烟花、鞭炮、摔炮、拉炮、砸炮等。
|
||||
</view>
|
||||
<view class="content">
|
||||
4.压缩和液化气体及其容器。如氢气、甲烷、乙烷、乙炔、打火机、氯气、压缩氧气、氮气等。
|
||||
</view>
|
||||
<view class="content">
|
||||
5.易燃液体。如汽油、柴油、煤油、桐油、丙酮、乙醚、油漆、生漆、苯、酒精、松香油等。
|
||||
</view>
|
||||
<view class="content">
|
||||
6.易燃固体、自燃物质、遇水易燃物质。如红磷、硫磺、固体酒精、火柴、活性炭等。
|
||||
</view>
|
||||
<view class="content">
|
||||
7.氧化剂和过氧化物。如高锰酸盐、高氯酸盐、氧化氢、双氧水等。
|
||||
</view>
|
||||
<view class="content">
|
||||
8.毒性物质。如砷、砒霜、汞化物、铊化物、氰化物、硒粉、苯酚、汞、剧毒农药等。
|
||||
</view>
|
||||
<view class="content">
|
||||
9.生化制品、传染性、感染性物质。如病菌、炭疽、寄生虫、排泄物、医疗废弃物、尸骨、动物器官等。
|
||||
</view>
|
||||
<view class="content">
|
||||
10.放射性物质。如铀、钴、镭、钚等。
|
||||
</view>
|
||||
|
||||
<view class="btn" @click="closeForbidGoodsDialog">知道了</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
import {
|
||||
usualGoodsList,
|
||||
goodsList
|
||||
} from '@/pages/api/order.js'
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex';
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user
|
||||
const emits = defineEmits(["@getGoodsInfo"]);
|
||||
const props = defineProps({
|
||||
isShowOther: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
})
|
||||
const goods = reactive({
|
||||
info: {}
|
||||
})
|
||||
const isSelectedGoods = ref(false) //是否选择了物品
|
||||
const popup = ref()
|
||||
const searchValue = ref('')
|
||||
const isFocus = ref(false) //是否搜索框为聚焦状态
|
||||
const isInput = ref(false) //是否搜索框为输入状态
|
||||
const isUpload = ref(true) //是否输入框加载完毕
|
||||
//模糊查询出的列表数据
|
||||
const dimSearchList = reactive({
|
||||
data: []
|
||||
})
|
||||
//热门寄件物品
|
||||
const hotSendList = reactive({
|
||||
data: []
|
||||
})
|
||||
|
||||
const recentSendList = reactive({
|
||||
data: [],
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
const getData = () => {
|
||||
usualGoodsList({
|
||||
name: ''
|
||||
}).then((res) => {
|
||||
if (res.data) {
|
||||
hotSendList.data = res.data.slice(0, 6)
|
||||
}
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: '网络异常',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
isSelectedGoods.value = users.goodsInfo.name
|
||||
if (isSelectedGoods.value) goods.info = users.goodsInfo
|
||||
|
||||
goodsList().then((res) => {
|
||||
if (res.data) {
|
||||
recentSendList.data = res.data.slice(0, 5)
|
||||
}
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: '网络异常',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
}
|
||||
const handleSelectedGoods = () => {
|
||||
searchValue.value = goods.info.name
|
||||
isFocus.value = true
|
||||
isInput.value = true
|
||||
isSelectedGoods.value = false
|
||||
dimSearch(searchValue.value)
|
||||
props.isShowOther(true, 'always')
|
||||
}
|
||||
//模糊查询列表数据
|
||||
const dimSearch = (key) => {
|
||||
if (!isUpload.value) return
|
||||
isUpload.value = false
|
||||
usualGoodsList({
|
||||
name: key
|
||||
}).then((res) => {
|
||||
dimSearchList.data = res.data
|
||||
isUpload.value = true
|
||||
})
|
||||
}
|
||||
|
||||
const input = (e) => {
|
||||
isFocus.value = e ? true : false
|
||||
isInput.value = Boolean(e)
|
||||
if (!isUpload.value) return
|
||||
searchValue.value = e
|
||||
dimSearch(e)
|
||||
props.isShowOther(e ? true : false)
|
||||
}
|
||||
const cancel = () => {
|
||||
isInput.value = false
|
||||
props.isShowOther(false)
|
||||
}
|
||||
const clear = () => {
|
||||
props.isShowOther(true)
|
||||
}
|
||||
const blur = () => {
|
||||
console.log('blur')
|
||||
}
|
||||
const focus = () => {
|
||||
isFocus.value = true
|
||||
props.isShowOther(true)
|
||||
}
|
||||
|
||||
//用户自定义的物品
|
||||
const userDefined = () => {
|
||||
goods.info = {
|
||||
name: searchValue.value
|
||||
}
|
||||
isSelectedGoods.value = Boolean(searchValue.value)
|
||||
props.isShowOther(false)
|
||||
emits('getGoodsInfo', {
|
||||
name: searchValue.value
|
||||
})
|
||||
isFocus.value = false
|
||||
}
|
||||
//取消物品选择
|
||||
const handleCancelGood = () => {
|
||||
goods.info = {}
|
||||
store.commit('user/setGoodsInfo', {})
|
||||
emits('getGoodsInfo', {})
|
||||
isSelectedGoods.value = false
|
||||
searchValue.value = ''
|
||||
isFocus.value = false
|
||||
isInput.value = false
|
||||
}
|
||||
|
||||
//点击标签物品
|
||||
const handleClick = (item) => {
|
||||
searchValue.value = item.value
|
||||
isFocus.value = true
|
||||
goods.info = item
|
||||
isSelectedGoods.value = true
|
||||
isInput.value = false
|
||||
props.isShowOther(false)
|
||||
emits('getGoodsInfo', item)
|
||||
}
|
||||
|
||||
//打开禁寄物品弹窗
|
||||
const openForbidGoodsDialog = () => {
|
||||
popup.value.open('bottom');
|
||||
}
|
||||
|
||||
//关闭禁寄物品弹窗
|
||||
const closeForbidGoodsDialog = () => {
|
||||
popup.value.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src='./goodsSearch.scss'></style>
|
||||
@@ -0,0 +1,109 @@
|
||||
.weightAndVolume{
|
||||
background-color: white;
|
||||
margin-top: 20rpx;
|
||||
padding:56rpx 40rpx ;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 200rpx;
|
||||
.volume-box{
|
||||
margin-top: 50rpx;
|
||||
.isVolumeInfo{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.isVolumeInfo-title{
|
||||
font-size: 24rpx;
|
||||
color: #888888;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
::v-deep .uni-switch-input::before{
|
||||
background-color: #CCCCCC;
|
||||
width: 120rpx;
|
||||
}
|
||||
::v-deep .uni-switch-input.uni-switch-input-checked:after{
|
||||
transform: translateX(60rpx);
|
||||
}
|
||||
::v-deep .uni-switch-input{
|
||||
width: 120rpx;
|
||||
}
|
||||
switch{
|
||||
position: relative;
|
||||
left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.weight-box,.volume-box,.isVolumeInfo-title-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.unit{
|
||||
position: absolute;
|
||||
right: 126rpx;
|
||||
top:16rpx ;
|
||||
}
|
||||
.weight-box-title,.volume-box-title{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #0F0F0F;
|
||||
}
|
||||
.uni-numbox{
|
||||
height: 76rpx;
|
||||
.uni-numbox__value{
|
||||
height: 76rpx!important;
|
||||
margin: 0;
|
||||
background-color: #F9F9F9!important;
|
||||
width: 220rpx;
|
||||
}
|
||||
.uni-numbox__plus,.uni-numbox__minus{
|
||||
width: 76rpx;
|
||||
border-radius: 0rpx 36rpx 36rpx 0;
|
||||
background-color: #ECECEC!important;
|
||||
.uni-numbox--text{
|
||||
span{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.uni-numbox__minus{
|
||||
border-radius: 36rpx 0rpx 0rpx 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.isVolumeInfo-title-box{
|
||||
justify-content: flex-end;
|
||||
margin-top: 10rpx;
|
||||
.unit{
|
||||
|
||||
}
|
||||
}
|
||||
.long-width-height{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
.cheng{
|
||||
margin: 0 12rpx;
|
||||
height: 19rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.long,.width,.height{
|
||||
::v-deep .uni-input-wrapper,.uni-input{
|
||||
background-color: #F4F4F4;
|
||||
border-radius: 36rpx;
|
||||
width: 198rpx;
|
||||
height: 74rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.accounting-rules{
|
||||
font-size: 24rpx;
|
||||
color: #888888;
|
||||
margin-top: 40rpx;
|
||||
.red{
|
||||
color: #E84134;
|
||||
font-size: 24rpx;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
<!-- 重量和体积 -->
|
||||
<template>
|
||||
<view class="weightAndVolume">
|
||||
<!-- 重量 -->
|
||||
<view class="weight-box">
|
||||
<view class="weight-box-title">预估重量</view>
|
||||
<!-- <uni-number-box max="9999" min="1" :value="weight" @change="changeWeight" /> -->
|
||||
<view class="number-box">
|
||||
<view class="minus-btn" :class="isLessThan ? 'active' : ''" @click="handleMinus">-</view>
|
||||
<input class="uni-input" type="digit" maxlength="4" v-model="weight" @blur="handleWeigthBlur"/>
|
||||
<view class="add-btn" :class="isExceed ? 'active' : ''" @click="handleAdd">+</view>
|
||||
</view>
|
||||
<view class="unit">kg</view>
|
||||
</view>
|
||||
<!-- 体积 -->
|
||||
<view class="volume-box">
|
||||
<view class="volume-box-title">总体积</view>
|
||||
<view class="isVolumeInfo">
|
||||
<view class="isVolumeInfo-title">补充体积预估费用更准确</view>
|
||||
<switch color="#1DC779" style="transform:scale(0.7)" @change="switchChange" :checked="isVolumeInfo" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 体积输入框 -->
|
||||
<view class="isVolumeInfo-title-box" v-if='isVolumeInfo'>
|
||||
<uni-number-box />
|
||||
<view class="number-box">
|
||||
<view class="minus-btn" :class="isLessThanVolume ? 'active' : ''" @click="handleVolumeMinus">-</view>
|
||||
<input class="uni-input" type="digit" maxlength="6" v-model="volume" @blur="handleVolume" />
|
||||
<view class="add-btn" :class="isExceedVolume ? 'active' : ''" @click="handleVolumeAdd">+</view>
|
||||
</view>
|
||||
<view class="unit">m³</view>
|
||||
</view>
|
||||
<!-- 长宽高输入框 -->
|
||||
<view class="long-width-height" v-if="isVolumeInfo">
|
||||
<view class="long">
|
||||
<input class="uni-input" type="digit" :value="long" maxlength="3" placeholder="长 cm"
|
||||
@input="longFun" />
|
||||
</view>
|
||||
<view class="cheng">*</view>
|
||||
<view class="width">
|
||||
<input class="uni-input" type="digit" :value="width" maxlength="3" placeholder="宽 cm"
|
||||
@input="widthFun" />
|
||||
</view>
|
||||
<view class="cheng">*</view>
|
||||
<view class="height">
|
||||
<input class="uni-input" type="digit" :value="height" maxlength="3" placeholder="高 cm"
|
||||
@input="heightFun" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="accounting-rules">
|
||||
注：实际质量与体积以收派员确定为准，物品在包装后重量可能会增加，重量体积大时会体积重量收费，
|
||||
<text class="red" @click="openAccountRulesDialog">了解计费规则</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex';
|
||||
const emits = defineEmits(["@getWeight", '@getVolume']);
|
||||
let isLessThan = ref(true); //判断重量是否小于0.1
|
||||
let isExceed = ref(false); //判断重量是否大于9999
|
||||
let isLessThanVolume = ref(true); //判断体积是否小于0.0001m³
|
||||
let isExceedVolume = ref(false); //判断体积是否大于99m³
|
||||
const weight = ref(1) //重量
|
||||
const volume = ref(0) //体积
|
||||
const long = ref() //长
|
||||
const width = ref() //宽
|
||||
const height = ref() //高
|
||||
const isVolumeInfo = ref(false)
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user
|
||||
onMounted(() => {
|
||||
weight.value = users.weight
|
||||
width.value = users.width
|
||||
height.value = users.height
|
||||
long.value = users.long
|
||||
volume.value = users.volume ? (Number(users.volume) / 1000000) : 0
|
||||
isVolumeInfo.value = users.width && users.long && users.height
|
||||
})
|
||||
// 减重量
|
||||
const handleMinus = () => {
|
||||
// 重量减去1
|
||||
if (weight.value > 1) {
|
||||
weight.value--;
|
||||
isExceed.value = false; //右侧加号去除置灰
|
||||
weight.value = weight.value.toFixed(1);
|
||||
}
|
||||
if (weight.value <= 1) {
|
||||
|
||||
isLessThan.value = true; //左侧减号置灰
|
||||
if (weight.value <= 0.1) {
|
||||
weight.value = 0.1
|
||||
}
|
||||
}
|
||||
emits('getWeight', weight.value)
|
||||
};
|
||||
|
||||
// 加重量
|
||||
const handleAdd = () => {
|
||||
// 重量加1
|
||||
if (weight.value < 9999) {
|
||||
++weight.value;
|
||||
isLessThan.value = false; //左侧减号去除置灰
|
||||
}
|
||||
if (weight.value === 9999) {
|
||||
isExceed.value = true; //右侧加号置灰
|
||||
}
|
||||
if (weight.value <= 1) {
|
||||
// weight.value = 1;
|
||||
isLessThan.value = true; //左侧减号置灰
|
||||
}
|
||||
emits('getWeight', weight.value)
|
||||
};
|
||||
|
||||
//触发重量输入如果输入0，自动判断为1kg,最小可输入值为0.1kg,最大值为9999kg
|
||||
const handleWeigthBlur = e => {
|
||||
let value = e.detail.value;
|
||||
if (value < 0.1) {
|
||||
value = 1;
|
||||
isLessThan.value = true; //左侧减号置灰
|
||||
} else {
|
||||
if (value >= 0.1 && value <= 1) {
|
||||
isLessThan.value = true;
|
||||
} else {
|
||||
isLessThan.value = false; //左侧减号去除置灰
|
||||
}
|
||||
|
||||
if (value >= 9999) {
|
||||
isExceed.value = true; //右侧加号置灰
|
||||
value = 9999;
|
||||
uni.showToast({
|
||||
title: '重量最大可不能超过9999kg',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
isExceed.value = false; //右侧加号去除置灰
|
||||
}
|
||||
}
|
||||
weight.value = value
|
||||
emits('getWeight', weight.value)
|
||||
};
|
||||
|
||||
|
||||
// 体积
|
||||
const handleVolume = e => {
|
||||
let value = Number(e.detail.value);
|
||||
if (value < 0.0001) {
|
||||
isLessThanVolume.value = true;
|
||||
value = 0;
|
||||
} else {
|
||||
isLessThanVolume.value = false;
|
||||
if (value >= 999) {
|
||||
isExceedVolume.value = true; //右侧加号置灰
|
||||
value = 999;
|
||||
uni.showToast({
|
||||
title: '体积最大可不能超过999m³',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
value = Number(e.detail.value);
|
||||
isExceedVolume.value = false; //右侧加号去除置灰
|
||||
}
|
||||
|
||||
}
|
||||
volume.value = value
|
||||
emits('getVolume', (volume.value) * 1000000, long.value, width.value, height.value)
|
||||
};
|
||||
// 减体积
|
||||
const handleVolumeMinus = () => {
|
||||
// 体积减去1
|
||||
if (volume.value > 1) {
|
||||
volume.value--;
|
||||
isExceedVolume.value = false; //右侧加号去除置灰
|
||||
volume.value = volume.value.toFixed(1);
|
||||
}
|
||||
// 体积
|
||||
if (volume.value <= 1) {
|
||||
|
||||
isLessThanVolume.value = true; //左侧减号置灰
|
||||
if (weight.value <= 0.0001) {
|
||||
weight.value = 0.0001
|
||||
}
|
||||
}
|
||||
emits('getVolume', (volume.value) * 1000000, long.value, width.value, height.value)
|
||||
|
||||
};
|
||||
// 加体积
|
||||
const handleVolumeAdd = () => {
|
||||
// 体积加1
|
||||
if (volume.value < 999) {
|
||||
++volume.value;
|
||||
isLessThanVolume.value = false; //左侧减号去除置灰
|
||||
}
|
||||
if (volume.value === 999) {
|
||||
isExceedVolume.value = true; //右侧加号置灰
|
||||
}
|
||||
emits('getVolume', (volume.value) * 1000000, long.value, width.value, height.value)
|
||||
};
|
||||
|
||||
|
||||
//是否显示具体体积
|
||||
const switchChange = (e) => {
|
||||
isVolumeInfo.value = e.detail.value
|
||||
}
|
||||
//修改长度
|
||||
const longFun = (e) => {
|
||||
long.value = e.detail.value
|
||||
let valueFun = (Number(long.value) * Number(width.value) * Number(height.value)) / 1000000
|
||||
volume.value = valueFun < 0.0001 ? 0.0001 : valueFun
|
||||
emits('getVolume', ((volume.value) * 1000000), e.detail.value, width.value, height.value)
|
||||
}
|
||||
//修改宽度
|
||||
const widthFun = (e) => {
|
||||
width.value = e.detail.value
|
||||
let valueFun = (Number(long.value) * Number(width.value) * Number(height.value)) / 1000000
|
||||
volume.value = valueFun < 0.0001 ? 0.0001 : valueFun
|
||||
emits('getVolume', (volume.value) * 1000000, long.value, e.detail.value, height.value)
|
||||
}
|
||||
//修改高度
|
||||
const heightFun = (e) => {
|
||||
height.value = e.detail.value
|
||||
let valueFun = (Number(long.value) * Number(width.value) * Number(height.value)) / 1000000
|
||||
volume.value = valueFun < 0.0001 ? 0.0001 : valueFun
|
||||
emits('getVolume', (volume.value) * 1000000, long.value, width.value, e.detail.value)
|
||||
}
|
||||
|
||||
//打开计费规则弹窗
|
||||
const openAccountRulesDialog = () => {
|
||||
uni.navigateTo({
|
||||
url: '/subPages/account-rules/index'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./weightAndVolume.scss" lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user