You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
high-mini/pages/goods/refuel-details/refuel-details.vue

819 lines
24 KiB

<template>
<view>
<image mode="widthFix" class="width100" :src="storeList.gasLogoSmall"></image>
<view class="height100p titlecon backcorfff">
<view class="height75 paddtop25 width90">
<view class="flleft width80p">
<view class="width100 text1 font18 fontwig6 fcor333">{{storeList.gasName}}</view>
<view class="width100 font14 fcor666 mart5">{{storeList.gasAddress}}</view>
</view>
<view class="flright reimg fotct width20" v-if="storeList.distance" @click="seeloaction">
<image mode="widthFix" :src="imagewxUrl+imgadres"></image>
<view class="fcor089">{{storeList.distance}}km</view>
</view>
</view>
<view class="fcor999 font14 width90 mart0">
营业时间 : 00:00-23:59
</view>
</view>
<!-- 标价 -->
<view class="width90 relbj">
<view class="height60">
<view class="flleft mart10 bjcss font16 fontwig6" @click="showPopup(1)">
{{oilNo}}
<image mode="widthFix" :src="imagewxUrl+imgadres2"></image>
</view>
<view class="margle20 font15 fcoreb5 flleft mart20 borRit">
<view class="fontspec fotct ">平台价</view>
<view class="fontwig6 font20"><text class="font14">¥</text>{{priceVip}}</view>
</view>
<view class="margle20 font15 fcor666 flleft mart20 borRit">
<view class="fontspec fotct ">油站价</view>
<view class="fontwig6 font20"><text class="font14">¥</text>{{priceGun}}</view>
</view>
<view class="margle20 font15 fcor666 flleft mart20 ">
<view class="fontspec fotct ">国标价</view>
<view class="fontwig6 font20"><text class="font14">¥</text>{{priceOfficial}}</view>
</view>
</view>
</view>
<view class="line10 mart15"></view>
<!-- 我要加油 -->
<view class="width90 mart15 font16 fcor666">我要加油</view>
<view class="width90 relbj mart15">
<view class="width50 flleft fotct" @click="showPopup(1)">
<view class="width100 fcor999 font14 mart10">选择油号</view>
<view class="width100 mart10">
<image mode="widthFix" style="width: 20px;" :src="imagewxUrl+imgadres1"></image>
<text class="font20 fcor333 fontwig6 margle">{{oilNo}}</text>
<image mode="widthFix" class="margle" style="width: 10px; " :src="imagewxUrl+imgadres2">
</image>
</view>
</view>
<view class="width50 flright fotct" @click="showPopup(2)">
<view class="width100 fcor999 font14 mart10">选择油枪</view>
<view class="width100 mart10 ">
<image mode="widthFix" style="width: 20px;" :src="imagewxUrl+imgadres3"></image>
<text class="font20 fcor333 fontwig6 margle">{{gunNo}}号</text>
<image mode="widthFix" class="margle" style="width: 10px; " :src="imagewxUrl+imgadres2">
</image>
</view>
</view>
</view>
<view class="line10 mart15"></view>
<!--加油金额-->
<view class="width90 mart15 font16 fcor666">加油金额</view>
<view class="width90 height40 mart10" style="border: 1px solid #f2f2f2;">
<view class="width8 flleft">¥</view>
<input type="digit" class="font16 width60 flleft height40" placeholder="输入金额(保留2位小数)" v-model="inputMoney"
@input="Listeningfocus" />
<view class="width30 height40 flright font14 fcor999 fotct"
style="border-left: 1px solid #f2f2f2;line-height: 40px;">
约{{oilLiters}}L
</view>
</view>
<!-- 详情描述-->
<view class="line10 mart15"></view>
<view class="width90 height40 mart10">
<view class="flleft width50 font15 fcor666">加油升数:<text class="fcoreb5 margle">
{{oilLiters}}L</text></view>
<view class="flright width50 font15 fcor666">平台折扣:<text class="fcoreb5 margle">
{{discount}}折</text></view>
</view>
<view class="width90 height40">
<view class="flleft width50 font15 fcor666">优惠价格:<text class="fcoreb5 margle">
¥{{pricePreferences}}</text></view>
<view class="flright width50 font15 fcor666">加油补贴:<text class="fcoreb5 margle">
¥{{oilSubsidy}}</text></view>
</view>
<view class="width90 height40">
<view class="flleft width50 font15 fcor666">每升优惠:<text class="fcoreb5 margle">
¥{{litersPreferences}}</text></view>
<view class="flright width50 font15 fcor666">本次优惠:<text class="fcoreb5 margle">
¥{{totalPreferences}}</text></view>
</view>
<view class="line10 mart15"></view>
<!-- <view class="list width90">
<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)"
:class="{'on':amount.price == inputMoney}">
<view class="heTitle fcor333" :class="{'fcor089':amount.id == inputAmount}">{{amount.price}}元</view>
</view>
</view> -->
<view class="height60 width100"></view>
<!-- 底部按钮 -->
<view class="footer">
<view class="flleft padleft15 font15 fcoreb5">
合计: ¥<text class="font24">{{totalPrice}}</text><text class="font12 fcor666"
v-if="priceVip != priceOfficial">优惠约:¥{{discountPrice}}</text>
</view>
<!-- #ifdef MP -->
<button class="reBtn flright" v-if="user.phone == null" @click="jumpPhone">去支付</button>
<button class="reBtn flright" v-else @click="postionIng">去支付</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<button class="reBtn flright" v-if="user.phone == null" @click="jumpH5Bding">去支付</button>
<button class="reBtn flright" v-else @click="postionIng">去支付</button>
<!-- #endif -->
</view>
<!-- 底部弹窗 -->
<wybPopup ref="popup" type="bottom" height="600" width="500" radius="6" :showCloseIcon="true">
<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 1">选择油号</view>
<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 2">选择油枪</view>
<view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 1">汽油油号</view>
<view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 2">汽油油枪</view>
<view v-if="typeId == 1">
<view :class="swiper.oilNoName == oilNo?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList"
:key="index" @click="changeValue(swiper)">
{{swiper.oilNoName}}
</view>
</view>
<view v-if="typeId == 2">
<view :class="item.gunNo == gunNo?'activeRefuel':'refuel'" v-for="(item,index) in gunnumber"
:key="index" @click="changeValue2(item)">
{{item.gunNo}}
</view>
</view>
</wybPopup>
<view class="height30"></view>
<!-- #ifdef H5 -->
<mumu-getlocation ref='muLocation'></mumu-getlocation>
<!-- #endif -->
</view>
</template>
<script>
import {
getGasDetailByStoreKey,
addOrder,
getDictionaryByCodeTypeOl,
oilPriceDiscountCompute,
recentGasStation
} from '../../../Utils/Api.js';
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
import mumuGetlocation from '@/uni_modules/mumu-getlocation/components/mumu-getlocation/mumu-getlocation.vue'
let app = getApp();
export default {
components: {
wybPopup,
mumuGetlocation
},
data() {
return {
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'dhl.png',
imgadres2: 'xiala.png',
imgadres1: 'yhl.png',
imgadres3: 'yql.png',
detailList: [],
gunnumber: [],
user: '',
amountList: [{
id: '1',
price: '200'
},
{
id: '2',
price: '300'
},
{
id: '3',
price: '400'
},
{
id: '4',
price: '500'
}
],
inputAmount: '',
store_key: '',
storeList: '',
oilNo: '',
priceVip: '',
priceOfficial: '',
priceGun: '',
gunNo: '',
typeId: '',
counId: '',
inputMoney: '',
gasOilNo: '',
litre: '',
totalPrice: '0.00',
discountPrice: '0.00',
gasGunList: [],
oilType: '',
distance: 9999, //距离限制
xzMoney: '300', //金额限制
isTyAgent: false, //是否是代理商
oilLiters: '0', //加油升数
discount: '0', //平台折扣
oilSubsidy: '0', //加油补贴
litersPreferences: '0', //每升优惠
pricePreferences: '0', //优惠价格
totalPreferences: '0', //本次优惠
locationRef: null, // 用于接收定位对象
}
},
onLoad(options) {
this.store_key = options.id;
this.counId = options.desId;
if (app.globalData.accountId) {
this.isTyAgent = true;
}
// #ifdef H5
if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
this.recentGasStation();
} else {
this.getGasDetailByStoreKey();
}
// #endif
// #ifdef MP
this.getGasDetailByStoreKey();
// #endif
this.getDictionaryByCodeTypeOl();
this.getDictionaryByCodeTypeMoney();
},
onShow() {
this.user = app.globalData.userInfo;
},
onUnload() {
if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
uni.removeStorage({
key: 'accountType'
})
app.globalData.accountType = '';
}
},
methods: {
//前往导航
seeloaction() {
uni.openLocation({
latitude: Number(this.storeList.gasAddressLatitude), //目的地的定位
longitude: Number(this.storeList.gasAddressLongitude), //目的地的定位
name: this.storeList.gasName,
address: this.storeList.gasAddress
})
},
//显示弹出
showPopup(item) {
this.typeId = item;
this.$refs.popup.show();
},
//一键加油
recentGasStation() {
uni.showLoading({
title: '加载中...'
})
let params = {
latitude: app.globalData.latitude,
longitude: app.globalData.longitude,
isTyAgent: this.isTyAgent
}
recentGasStation(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
this.storeList = res.return_data;
if (!this.oilNo) {
this.oilNo = res.return_data.oilPriceList[0].oilNoName;
this.priceVip = res.return_data.oilPriceList[0].priceVip;
this.priceGun = res.return_data.oilPriceList[0].priceGun;
this.priceOfficial = res.return_data.oilPriceList[0].priceOfficial;
this.detailList = res.return_data.oilPriceList;
this.oilType = res.return_data.oilPriceList[0].oilType;
this.gasGunList = res.return_data.gasGunList;
this.counId = res.return_data.goodsId;
for (var i = 0; i < res.return_data.gasGunList.length; i++) {
if (this.oilNo == res.return_data.gasGunList[i].oilNoName) {
this.gunnumber.push(res.return_data.gasGunList[i])
this.gunNo = res.return_data.gasGunList[i].gunNo;
this.gasOilNo = res.return_data.gasGunList[i].oilNo;
}
}
}
} else {
uni.showToast({
title: res.return_msg,
icon: "none",
duration: 2000
});
}
})
},
//查询详情
getGasDetailByStoreKey() {
uni.showLoading({
title: '加载中...'
})
let params = {
storeKey: this.store_key,
latitude: app.globalData.latitude,
longitude: app.globalData.longitude,
isTyAgent: this.isTyAgent
}
getGasDetailByStoreKey(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
this.storeList = res.return_data;
if (!this.oilNo) {
this.oilNo = res.return_data.oilPriceList[0].oilNoName;
this.priceVip = res.return_data.oilPriceList[0].priceVip;
this.priceGun = res.return_data.oilPriceList[0].priceGun;
this.priceOfficial = res.return_data.oilPriceList[0].priceOfficial;
this.detailList = res.return_data.oilPriceList;
this.oilType = res.return_data.oilPriceList[0].oilType;
this.gasGunList = res.return_data.gasGunList;
for (var i = 0; i < res.return_data.gasGunList.length; i++) {
if (this.oilNo == res.return_data.gasGunList[i].oilNoName) {
this.gunnumber.push(res.return_data.gasGunList[i])
this.gunNo = res.return_data.gasGunList[i].gunNo;
this.gasOilNo = res.return_data.gasGunList[i].oilNo;
}
}
}
} else {
uni.showToast({
title: res.return_msg,
icon: "none",
duration: 2000,
success() {
setTimeout(() => {
uni.navigateBack({})
}, 2000)
}
});
}
})
},
//距离限制
getDictionaryByCodeTypeOl() {
let datas = {
codeType: 'MILEAGE_LIMIT'
}
getDictionaryByCodeTypeOl(datas).then(res => {
if (res.return_code == '000000') {
this.distance = res.return_data.codeValue;
}
})
},
//加油金额限制
getDictionaryByCodeTypeMoney() {
let datas = {
codeType: 'TY_PRICE_LIMIT'
}
getDictionaryByCodeTypeOl(datas).then(res => {
if (res.return_code == '000000') {
this.xzMoney = res.return_data.codeValue;
}
})
},
//选择油号
changeValue(item) {
this.gunnumber = [];
this.oilNo = item.oilNoName;
for (var i = 0; i < this.gasGunList.length; i++) {
if (this.oilNo == this.gasGunList[i].oilNoName) {
this.gunnumber.push(this.gasGunList[i])
this.gunNo = this.gasGunList[i].gunNo;
this.gasOilNo = this.gasGunList[i].oilNo;
}
}
this.oilType = item.oilType;
this.gasOilNo = item.oilNo;
this.priceVip = item.priceVip;
this.priceOfficial = item.priceOfficial;
this.priceGun = item.priceGun;
this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
this.$refs.popup.hide();
},
//选择油枪
changeValue2(item) {
this.gunNo = item.gunNo;
this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
this.$refs.popup.hide();
},
// select(amount) {
// this.inputMoney = amount.price;
// this.litre = parseFloat(amount.price / this.priceGun).toFixed(2);
// this.totalPrice = parseFloat(amount.price / this.priceGun * this.priceVip).toFixed(2);
// if (this.priceVip != this.priceGun) {
// let gbprice = parseFloat(this.litre * this.priceOfficial).toFixed(2);
// this.discountPrice = parseFloat(gbprice - this.inputMoney).toFixed(2);
// }
// },
// H5获取手机号
jumpH5Bding() {
uni.navigateTo({
url: '/pages/login/register'
})
},
//失去焦点算价格和油升
Listeningfocus() {
var a = /^[0-9]+(\.[0-9]{1})?$/;
var b = /^[0-9]+(.[0-9]{1})?$/;
var c = /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/;
if (this.inputMoney == '') {
uni.showToast({
title: '请输入正确加油金额',
icon: "none",
duration: 2000
});
this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.litre = '';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
return;
}
if (parseInt(this.inputMoney) > parseInt(this.xzMoney)) {
uni.showToast({
title: '加油金额不能超过' + this.xzMoney + '元',
icon: "none",
duration: 2000
});
this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.litre = '';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
return;
}
this.oilPriceDiscountCompute();
},
//计算价格
oilPriceDiscountCompute() {
let datas = {
"price": this.inputMoney,
"goodsId": this.counId,
"oilNo": this.gasOilNo,
"isTyAgent": this.isTyAgent
}
oilPriceDiscountCompute(datas).then(res => {
if (res.return_code == '000000') {
this.totalPrice = res.return_data.payPrice;
this.oilLiters = res.return_data.oilLiters;
this.discount = res.return_data.discount;
this.oilSubsidy = res.return_data.oilSubsidy;
this.litersPreferences = res.return_data.litersPreferences;
this.pricePreferences = res.return_data.pricePreferences;
this.totalPreferences = res.return_data.totalPreferences;
if (this.priceVip != this.priceOfficial) {
// let gbprice = parseFloat(this.litre * this.priceOfficial).toFixed(2);
// this.discountPrice = parseFloat(gbprice - this.totalPrice).toFixed(2);
this.discountPrice = parseFloat(this.inputMoney - this.totalPrice).toFixed(2);
}
} else {
this.totalPrice = '0';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
}
})
},
//跳转手机授权
jumpPhone() {
uni.navigateTo({
url: '../../userLogin/userLogin'
})
},
// 保留小数点后两位的,不会四舍五入
numFilter(tempVal) {
// 截取当前数据到小数点后三位
// let tempVal = parseFloat(value).toFixed(3)
let realVal = tempVal.substring(0, tempVal.length - 2)
return realVal
},
/**
* 定位
*/
postionIng() {
let that = this;
var c = /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/;
if (that.inputMoney == '' || that.inputMoney < 10 || !(c.test(this.inputMoney))) {
uni.showToast({
title: '请输入正确金额',
icon: "none",
duration: 2000
});
return;
}
// #ifdef H5
// let data = {
// key: "7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB" //腾讯地图申请的密钥
// };
// let url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口
// data.output = "jsonp";
// this.$jsonp(url, data)
// .then(res => {
// app.globalData.latitude = res.result.location.lat;
// app.globalData.longitude = res.result.location.lng;
// if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
// that.recentGasStation();
// } else {
// that.getGasDetailByStoreKey();
// }
// setTimeout(() => {
// that.toPay();
// }, 500);
// }).catch(error => {
// if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
// that.recentGasStation();
// } else {
// that.getGasDetailByStoreKey();
// }
// setTimeout(() => {
// that.toPay();
// }, 500);
// });
this.$nextTick(() => {
// 在检测用户是否开启定位权限需要一个过程,推荐使用 login 提示一下
// 初始化组件,并且检测是否开启与授权定位
this.$refs.muLocation.__init().then(location => {
// 用户授权了和开启了定位,把定位对象保存到 data 中
this.locationRef = location;
this.getLocation();
}, err => {
if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
that.recentGasStation();
} else {
that.getGasDetailByStoreKey();
}
setTimeout(() => {
that.toPay();
}, 500);
});
})
// #endif
// #ifdef MP
uni.getLocation({
type: 'wgs84',
success: function(res) {
app.globalData.latitude = res.latitude;
app.globalData.longitude = res.longitude;
that.getGasDetailByStoreKey();
setTimeout(() => {
that.toPay();
}, 500);
},
fail: (err) => {
uni.showToast({
title: '请打开设置里面的位置信息',
icon: "none",
duration: 2000
});
}
})
// #endif
},
// 获取精准定位
getLocation() {
uni.showLoading({
title: '加载中'
})
let that = this;
that.locationRef.getLocation() // 调用 getLocation 方法获取精准定位
.then(res => {
uni.hideLoading();
// res 就是返回的数据
app.globalData.latitude = res.lat;
app.globalData.longitude = res.lng;
if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
that.recentGasStation();
} else {
that.getGasDetailByStoreKey();
}
setTimeout(() => {
that.toPay();
}, 500);
})
},
//去支付
toPay() {
if (this.storeList.distance > this.distance && this.storeList.distance != null) {
uni.showToast({
title: '请在' + this.distance + '公里内进行下单',
icon: "none",
duration: 3000
});
return;
}
if (this.inputMoney == '' || this.inputMoney < 10) {
uni.showToast({
title: '请输入正确金额',
icon: "none",
duration: 2000
});
return;
}
uni.showLoading({
title: '提交订单中...'
})
let goods = {
"identificationCode": app.globalData.identificationCode,
"isTyAgent": this.isTyAgent,
"highChildOrderList": [{
"goodsType": 3,
"goodsId": this.counId,
"saleCount": 1,
"goodsPrice": this.inputMoney,
"gasGunNo": this.gunNo,
"gasOilNo": this.gasOilNo,
"gasOilType": this.oilType,
"gasPriceGun": this.priceOfficial,
"gasPriceVip": this.priceVip
}]
}
addOrder(goods).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
uni.redirectTo({
url: '/pages/goods/refuel-confirm/refuel-confirm?payprice=' + res.return_data
.payPrice + '&orderId=' + res.return_data.id + '&couponId=' + this.counId +
'&adres=' + this.storeList.gasAddress
})
} else {
uni.showToast({
title: res.return_msg,
icon: 'none',
duration: 2000
});
}
})
},
}
}
</script>
<style lang="less">
.titlecon {
border-radius: 10px 10px 0 0;
position: relative;
top: -30px;
}
.refuel {
padding: 6px 15px;
border-radius: 5px;
background-color: #f6f6f6;
color: #666666;
margin-right: 10px;
margin-left: 15px;
margin-top: 15px;
display: inline-block;
font-size: 16px;
width: 10%;
text-align: center;
}
.activeRefuel {
padding: 6px 15px;
border-radius: 5px;
border: 1px solid #089bf5;
color: #089bf5;
margin-right: 10px;
margin-left: 15px;
margin-top: 15px;
display: inline-block;
font-size: 16px;
width: 10%;
text-align: center;
}
.reimg {
image {
width: 20px;
}
}
.relab {
padding: 5px;
border-radius: 5px;
margin-left: 10px;
color: #089bf5;
background-color: #e5f2fe;
}
.relbj {
height: 80px;
box-shadow: 0 0 8px 2px #f6f6f6;
border-radius: 5px;
}
.bjcss {
line-height: 60px;
margin-left: 10px;
image {
width: 10px;
margin-left: 10px;
}
}
.borRit {
padding-right: 10px;
border-right: 1px solid #f4f4f4;
}
.list {
display: flow-root;
justify-content: space-between;
padding: 20upx 0;
.box {
width: 30%;
margin-right: 2%;
margin-top: 20upx;
float: left;
height: 120upx;
line-height: 120upx;
// display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 10upx;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
font-size: 36upx;
color: #666666;
border: 1px solid #f2f2f2;
&.on {
// background-color: #089bf5;
border: 1px solid #089bf5;
}
}
.heTitle {
width: 100%;
font-size: 16px;
}
.mitext {
margin-top: 10upx;
width: 100%;
font-size: 12px;
}
}
.footer {
position: fixed;
bottom: 0upx;
width: 100%;
height: 100rpx;
color: #FFFFFF;
border-top: solid 1upx #eee;
background-color: #FFFFFF;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
.reBtn {
width: 120px;
background-color: #089bf5;
color: #FFFFFF;
text-align: center;
padding: 0;
font-size: 16px;
border-radius: 0px;
height: 50px;
line-height: 50px;
position: absolute;
right: 0px;
}
}
</style>