星油云站
This commit is contained in:
caolc
228
packageQr/components/OrderOil.vue
Normal file
228
packageQr/components/OrderOil.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="content text-left padding">
|
||||
<view class="strong padding-bottom-xs color-333 ">
|
||||
{{oilSite.siteName}}
|
||||
</view>
|
||||
<view class="font-12 color-999">
|
||||
<text class=" text-cut">{{oilSite.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-left padding-right">
|
||||
<view class="padding-bottom-sm">
|
||||
油号选择：
|
||||
</view>
|
||||
<view class="grid col-5 justify-start">
|
||||
<view class="padding-xs" v-for="(item,index) in oilList" :key="index">
|
||||
<button class="cu-btn" @tap="oilNameSel(item)" :class="[selected.otherOilsName===item.otherOilsName?'bg-main-oil':'line-gray']">{{item.otherOilsName}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-top-xs padding-left padding-right">
|
||||
<text class="strong padding-right font-16">
|
||||
{{selected.otherOilsName}}
|
||||
</text>
|
||||
<text class="padding-right">星油价格:<text class="oil-main-color text-bold">￥{{selected.sitePrice|numberFilter}}/L</text></text>
|
||||
<text class="s-rich">市场价:￥{{selected.marketPrice|numberFilter}}/L</text>
|
||||
</view>
|
||||
<view class="padding-left padding-right">
|
||||
<view class="padding-bottom-sm">
|
||||
油枪选择：
|
||||
</view>
|
||||
<view class="grid col-5 justify-start">
|
||||
|
||||
<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
|
||||
<button @tap="gunIdSel(index)" class="cu-btn" :class="[gunId===index?'bg-main-oil':'line-gray']">{{index+1}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="solid-top margin-top-sm shadow-warp">
|
||||
<view class="cu-form-group">
|
||||
<view class="title">加油升数</view>
|
||||
<input type="digit" v-model="vol" @input="calcMoney" placeholder="请输入加油升数" name="input" />
|
||||
<text>约￥{{money.total|numberFilter}}</text>
|
||||
</view>
|
||||
<view class="my-cell">
|
||||
<text class="font-12">星卡优惠金额</text><text class="fr">-￥{{money.discount|numberFilter}}</text>
|
||||
</view>
|
||||
<view class="my-cell">
|
||||
<text class="font-12">实际支付金额</text><text class="oil-main-color fr">￥{{money.realPay|numberFilter}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="margin round bg-main-oil" @tap="onConfirm">确定</button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OliSiteApi from '@/api/oli-site.js'
|
||||
export default {
|
||||
props: {
|
||||
oilList: {
|
||||
type: Array,
|
||||
default () {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
vol: '',
|
||||
userInfo:uni.getStorageSync('loginUser'),
|
||||
oliNameList: [1, 2, 9, 10],
|
||||
ColorList: [1, 2, 9, 10],
|
||||
gunId: 0,
|
||||
oilSite: uni.getStorageSync('oilSite'),
|
||||
selected: {
|
||||
xkPrice: '',
|
||||
standardPrice: ''
|
||||
},
|
||||
money: {
|
||||
total: '',
|
||||
discount: '',
|
||||
realPay: ''
|
||||
},
|
||||
price: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initForm()
|
||||
},
|
||||
watch: {
|
||||
oilList: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log('深度监听', newVal, oldVal)
|
||||
this.oilList = newVal
|
||||
this.initForm()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
selected: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log('深度监听2323', newVal, oldVal)
|
||||
this.selected = newVal
|
||||
if (newVal) {
|
||||
this.calcMoney()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
gunIdSel(index) {
|
||||
this.gunId = index
|
||||
},
|
||||
oilNameSel(item) {
|
||||
this.selected = item
|
||||
console.log(item)
|
||||
},
|
||||
initForm() {
|
||||
if (this.oilList[0]) {
|
||||
this.selected = this.oilList[0]
|
||||
}
|
||||
},
|
||||
onConfirm() {
|
||||
// const data5 = {
|
||||
// ...this.selected,
|
||||
// volume: this.vol,
|
||||
// oilPrice: this.selected.sitePrice,
|
||||
// gunId: this.gunId + 1,
|
||||
// price: this.money.realPay
|
||||
// }
|
||||
console.log(this.oilSite)
|
||||
const datas = {
|
||||
channelId: this.oilSite.siteCode,
|
||||
siteName:this.oilSite.siteName,
|
||||
staffId: this.userInfo.id,
|
||||
refuelDetail: {
|
||||
oilsBarNum: this.gunId + 1,
|
||||
oilProductCode:this.selected.oilProductCode,
|
||||
otherOilsName: this.selected.otherOilsName,
|
||||
price:this.money.realPay,
|
||||
volume:this.vol
|
||||
}
|
||||
}
|
||||
console.log(datas)
|
||||
this.$emit('confirmVol', datas)
|
||||
},
|
||||
calcMoney(e) {
|
||||
this.price = this.selected.sitePrice
|
||||
console.log(this.price)
|
||||
this.money.total = this.vol * this.selected.marketPrice
|
||||
console.log(this.money.total)
|
||||
this.money.discount = this.vol * (this.selected.marketPrice - this.price)
|
||||
this.money.realPay = this.vol * this.selected.sitePrice
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numberFilter(value) {
|
||||
value = value - 1 + 1
|
||||
if (value) {
|
||||
return value.toFixed(2)
|
||||
} else {
|
||||
return '0.00'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-content {
|
||||
background-color: #F1F2F7;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.icon-self {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.oil-price {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.oil-price radio {
|
||||
position: absolute;
|
||||
left: 0rem;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.qr-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.pay-desc {
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.bottom-pay {
|
||||
min-height: 100rpx;
|
||||
width: 750upx;
|
||||
}
|
||||
|
||||
.pay-bar {
|
||||
width: 750upx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.money-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.money-position {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
border-radius: 0 0 0 100upx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user