caoliancun/company_h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
caolc
2022-08-29 09:45:23 +08:00
parent f6cef4b439
commit 63bb475012
34 changed files with 742 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/views/orderDetails/components/oilGun.vue
View File

@@ -4,16 +4,19 @@
<div class="seleOilGun-title">油枪选择:</div>
<div class="seleOilGun-container">
<div @click="seleGun(index, item)"
:style="{ background: seleIndex == index ? '#FF6700' : '', color: seleIndex == index ? '#FFFFFF' : '', border: seleIndex == index ? '0px' : '' }"
:style="{ background: seleIndex == item ? '#FF6700' : '', color: seleIndex == item ? '#FFFFFF' : '', border: seleIndex == item ? '0px' : '' }"
v-for="(item, index) in 9" :key="index" class="seleOilGun-item ac jc">
{{ item }}
</div>
<div :style="{background:seleIndex==0 ? '#FF6700' : '',color:seleIndex==0 ? '#FFFFFF' : '',border: seleIndex==0 ?'0px' : ''}" @click="isShow.keyboard=true;seleIndex=0" class="other-seleOilGun-item ac jc">
{{seleIndex?'other':otherOilsBar}}
</div>
</div>
</div>
<div class="oilGun-information">
<div @click="isShowFn" class="oilGun-information-item ac">
<img src="@/assets/kc.png" alt="" />
<span :class=" page.plateNumber ?'cp' : '' " class="oilGun-information-item-text ">
<span :class="page.plateNumber ? 'cp' : ''" class="oilGun-information-item-text ">
{{ page.plateNumber ? page.plateNumber : '请输入车牌号' }}
</span>
<van-icon name="arrow" />
@@ -46,7 +49,7 @@
<div class="flex discount-title">优惠:</div>
<div class="flex bw top">
<span>星油优惠金额</span>
<span>{{ page.oilDiscountAmount ? `-￥${page.oilDiscountAmount}` : '---' }}</span>
<span>{{ page.oilDiscountAmount ? `-￥${Number(page.oilDiscountAmount).toFixed(2)}` : '---' }}</span>
</div>
<div class="flex bw top">
<span>优惠券</span>
@@ -55,15 +58,16 @@
</div>
<van-popup round closeable :style="{ height: '35%' }" position="bottom" v-model="isShow.licensePlate">
<div class="license-plate-popup">
<div class="license-plate-popup-title">选择车牌号</div>
<div class="license-plate-popup-title">请输入车牌号</div>
<div class="license-plate-popup-input flex ac">
<div class="license-plate-popup-input-lable">
<span>车牌号</span>
<input v-model="page.plateNumber" class="license-plate-popup-input-input" type="text">
<input v-model="plateNumber" class="license-plate-popup-input-input" type="text">
</div>
</div>
</div>
</van-popup>
<van-number-keyboard @hide="keyboardHide" v-model="otherOilsBar" :show="isShow.keyboard" :maxlength="2" @blur="isShow.keyboard = false" />
</div>
</template>
@@ -78,7 +82,9 @@ export default {
},
data() {
return {
otherOilsBar:'',
timer: null,
plateNumber:'',
page: {
oilDiscountAmount: '',
volume: '',
@@ -88,28 +94,51 @@ export default {
},
aboutLiters: 0,
price: '',
seleIndex: 0,
seleIndex: 1,
isShow: {
licensePlate: false
licensePlate: false,
keyboard:false
},
show: true,
selePriceIndex: null
};
},
watch: {
seleIndex:function(n){
if(n!==0){
this.otherOilsBar = ''
}
},
'seleOil.oilProductCode': {
handler(n, o) {
console.log(n,o,'------------------')
if (n !== o) {
this.blur()
}
},
deep: true,
},
'isShow.licensePlate': {
handler(n) {
if (!n) {
if (this.checkFn('plateNumber', this.plateNumber)) {
this.page.plateNumber = this.plateNumber
} else {
this.$notify('请输入正确车牌号')
this.$nextTick(function () {
this.plateNumber = ''
this.page.plateNumber = ''
})
}
}
},
deep: true
},
page: {
handler() {
this.$nextTick(function () {
this.$emit('input', Object.assign(JSON.parse(JSON.stringify(this.seleOil)), this.page));
console.log(this.page.oilsBar,'this.page.oilsBar')
this.$emit('input', Object.assign(JSON.parse(JSON.stringify(this.seleOil)), {...this.page,oilsBar:this.page.oilsBar?this.page.oilsBar:this.otherOilsBar}));
})
},
deep: true
@@ -118,11 +147,54 @@ export default {
},
created() { },
mounted() {
this.plateNumber = this.$pinia.state.value.user.user.plateNumber
this.page.plateNumber = this.$pinia.state.value.user.user.plateNumber
this.$nextTick(function () {
this.$emit('input', Object.assign(this.seleOil, this.page))
})
},
methods: {
keyboardHide(){
setTimeout(()=>{
if(this.otherOilsBar){
this.page = Object.assign({}, { ...this.page, oilsBar: this.otherOilsBar })
}else{
this.seleIndex= 1
}
},0)
},
chenkFn() {
let chenk = /^\d+(.\d{1,2})?$/
if (!chenk.test(Number(this.price))) {
this.$nextTick(function () {
this.price = this.price.slice(0, this.price.length - 1);
})
} else {
if (this.price.indexOf('.') !== -1 && this.price.split('.')[1].length > 2) {
this.$nextTick(function () {
this.price = Number(this.price).toFixed(2);
})
}
}
},
checkFn(e, n) {
switch (e) {
case 'name':
/(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,18}[a-zA-Z]{1}$)/
.test(n);
break
case 'plateNumber':
return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/
.test(n)
break
case 'phone':
return /^1[3456789]\d{9}$/.test(n);
break;
case 'replacePhone':
/^1[3456789]\d{9}$/.test(n);
break;
}
},
resetFn() {
this.page = Object.assign(
{},
@@ -143,11 +215,11 @@ export default {
}
oilSiteApi.getOrderDiscountInfo(page).then(res => {
let { payRealAmount, oilDiscountAmount, volume } = res.data;
this.page = Object.assign(JSON.parse(JSON.stringify(this.page)),{ payRealAmount, oilDiscountAmount, volume });
this.page = Object.assign(JSON.parse(JSON.stringify(this.page)), { payRealAmount, oilDiscountAmount, volume });
})
},
seleGun(index, item) {
this.seleIndex = index;
this.seleIndex = item;
this.page = Object.assign({}, { ...this.page, oilsBar: item })
},
selePrice(index) {
@@ -155,6 +227,7 @@ export default {
this.blur()
},
change() {
this.chenkFn()
if (this.timer) {
clearTimeout(this.timer)
}
@@ -183,6 +256,7 @@ export default {
.license-plate-popup-input-input {
border: none !important;
background-color: #fcfcfc;
margin-left: 10px;
}
.license-plate-popup-input-lable {
@@ -328,6 +402,18 @@ export default {
padding: 0 30px;
}
.other-seleOilGun-item {
width: 110px;
height: 50px;
border-radius: 6px 6px 6px 6px;
opacity: 1;
border: 1px solid #cecece;
display: flex;
font-size: 28px;
color: #333333;
box-sizing: border-box;
}
.seleOilGun-item {
width: 110px;
height: 50px;