111
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.

790 lines
18 KiB

2 years ago
<template>
<view class="content bg-white position-re">
<view class="bg-img fixed-top flex align-end margin-bottom-lg " :style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix" class="position-ab site-back">
</image>
<view class="cu-list menu margin padding-sm radius my-shadow bg-white yu-card-xuan">
<view class="cu-item ">
<view class="content">
<view class="strong padding-bottom-xs">
{{siteInfo.siteName}}
</view>
<view class="font-12 color-999 site-label text-cut">
{{siteInfo.address}}
</view>
<view class="font-12 color-999 site-label text-cut">
营业时间 00:00 23:59
</view>
</view>
<view class="action " @tap="openMap">
<view class="oil-main-color">
<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
{{siteInfo.totalDistance ? siteInfo.totalDistance : siteInfo.juli |distanceFilter}}
</view>
</view>
</view>
</view>
</view>
<view class="bg-img placeholder-hidden flex align-end margin-bottom-lg " :style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix" class="position-ab site-back">
</image>
<view class="flex-sub">
<view class="cu-list menu margin padding-sm radius my-shadow bg-white yu-card-xuan">
<view class="cu-item ">
<view class="content">
<view class="strong padding-bottom-xs">
{{siteInfo.siteName}}
</view>
<view class="font-12 color-999 site-label text-cut">
{{siteInfo.address}}
</view>
<view class="font-12 color-999 site-label text-cut">
营业时间 00:00 23:59
</view>
</view>
<view class="action " @tap="openMap">
<view class="oil-main-color">
<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
{{siteInfo.totalDistance ? siteInfo.totalDistance : siteInfo.juli|distanceFilter}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="placeholder padding-top-big margin-bottom" >
<view class="TreatmentLiquid_box" v-if="siteInfo.formats == '1' ">
<view class="" style="width: 100%; display: flex; justify-content: space-between;" v-if="siteInfo.xoilUreaPrices.length !=0">
<view class="TreatmentLiquid_box_name">
尾气处理液
</view>
<view class="">
{{TreatmentLiquid}}/
</view>
</view>
<view class="placeholder padding-top-big margin-bottom no-JIAZHU" style="width: 100%;" v-else>
<text>此加注站暂无加注机</text>
</view>
</view>
<view class="BrandList" v-if="siteInfo.formats == '2' ">
<view class="BrandList_item" v-for="(list , i ) in BrandLists" :key='i'>
<view class="BrandList_item_title">
{{list.brandName}}
</view>
<view class="BrandList_item_mian" v-for="(item , j ) in list.specifications" :key='j'>
<view class="BrandList_item_mian_left"> {{item.options}}/</view>
<view class="BrandList_item_mian_main"> &yen; {{item.salePrice | saleMoney}}</view>
<uni-number-box v-model="item.goodsQuantity" @blur='changeNumber(item,i,j)' @change="changeNumber(item,i,j,$event)"></uni-number-box>
</view>
<view class="" style="width: 20%;height: 20%;"></view>
</view>
</view>
</view>
<view class="characteristic_box">
<view class="characteristic_box_title">
油站特色
</view>
<view class="characteristic_box_list">
<text>
加注站
</text>
</view>
</view>
<view class="btn bg-white button_bottom">
<view class="flex bg-white padding flex-direction">
<button class="cu-btn block bg-main-oil lg" v-if="distinguish == '2'" @click="payForDrumyijian" >
<image class="site-icon margin-right-sm" :src="imgURL+'site-yz.png'" mode="widthFix"></image>
一键支付
</button>
<button v-if="distinguish == '1'" class="cu-btn block bg-main-oil margin-tb-sm lg" @click="ScanCode" >
<image class="site-icon margin-right-sm" :src="imgURL+'site-qr.png'" mode="widthFix">
</image>
扫码加注
</button>
</view>
</view>
<AbnormalPopup :types='PopupType' :PopupShows='PopupShow' :payTyps='payTyps' @gotoDetail='gotoDetail' @hidenPopup='hidenPopups' @hiden='hidenPopup' @RefreshPopup='RefreshPopup'></AbnormalPopup>
</view>
</template>
<script>
import ureaItem from '@/components/site-item/urea-site-item.vue'
import priceTab from '../components/price-tab.vue'
import ureaSiteApi from '../../../api/urea_site.js'
import ureaFinanceApi from '../../../api/urea_finance.js'
import AbnormalPopup from '../../../components/AbnormalPopup.vue'
export default {
components: {
priceTab ,
AbnormalPopup
},
data() {
return {
payTyps:'',
PopupType:null,
PopupShow:false,
show:true,
value:'1',
showtitle:false,
radio: 'B',
BrandLists:[],
mainURL: this.global.mainURL,
imgURL: this.global.imgURL,
active: 0,
ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
siteInfo: {},
activeCur: '',
activePay: null,
qrcodePay: null,
siteId: '',
activeChannelCode: '',
secondChannelCode: '',
distinguish:'',
TreatmentLiquid:'',
}
},
onLoad(option) {
var oilItem = JSON.parse(option.item)
this.siteInfo = oilItem
// this.siteInfo = oilItem
if(this.siteInfo.formats == '1'){
this.distinguish = this.siteInfo.formats
console.log(this.distinguish,'9999999999999999')
this.findUreaSiteDetails(this.siteInfo.siteId)
}else{
this.distinguish = this.siteInfo.formats
this.getSiteInfo(this.siteInfo.siteId) //查询尿素站点详情 桶装
}
if(this.siteInfo.productType == '1'){
this.findUreaSiteDetails(this.siteInfo.siteId)
}else if(this.siteInfo.productType && this.siteInfo.productType !== '1'){
console.log(this.siteInfo )
this.distinguish = this.siteInfo.productType
this.getSiteInfo(this.siteInfo.siteId) //查询尿素站点详情 桶装
}
console.log(this.distinguish,this.siteInfo.formats,'dddddddddddddddddddd')
this.checkOrder()
},
methods: {
gotoDetail(){
this.PopupShow = false
this.findUreaSiteDetails(this.NextSiteId)
},
findUreaSiteDetails(siteId){ //查询尿素站点详情 加注站
let data={
siteIds:siteId,
currentLongitude: uni.getStorageSync('location').longitude,
currentLatitude:uni.getStorageSync('location').latitude
}
ureaSiteApi.findUreaSiteDetails(data).then(res=>{
this.siteInfo = res.data
console.log(this.siteInfo)
this.TreatmentLiquid = res.data.xoilUreaPrices[0].salePrice
})
},
hidenPopup(e){
this.PopupShow =e
this.payForDrum()
},
hidenPopups(e){
this.PopupShow =e
},
payForDrumyijian(e){
this.checkLocation(this.siteInfo.juli,e)
},
checkLocation(jl,i){
let juli = Number(jl)
if(juli > 100){
this.PopupShow = true
this.PopupType =0
return
}else{
this.payForDrum()
}
},
changeNumber(item,i,j,n){
let numbers = n
let money= item.salePrice * numbers
this.BrandLists[i].specifications[j].totalPrice =money
},
addToCommodity(item,e){
},
payForDrum(){
this.PopupShow = false
let user = uni.getStorageSync('user')
let dataList = [] ,
payMoney =[],
sum = 0
this.BrandLists.forEach((ele,i)=>{
ele.specifications.forEach((list,j)=>{
if(list.totalPrice !='0' && list.goodsQuantity !=0){
dataList.push(list)
payMoney.push(list.totalPrice)
}
})
})
if(dataList.length == 0){
uni.showToast({
title:'请添加购买数量',
icon:'none'
})
return
}
payMoney.forEach(ele=>{
sum = ele+sum
})
let datas = {
siteId:this.siteInfo.siteId,
oilCardNature:'',
accountCardCode:'',
driverPhone:user.userPhone,
oldRealAmount:'',
payStyle:'3',
belongCompanyId:'' ,
formats:'2',
oldRealAmount:sum,
driverId:user.id,
xoilUreaOrderRelations:dataList
}
ureaFinanceApi.generateBarrelOrders(datas).then(res=>{
uni.setStorageSync('ureaOrderMade', res.data)
uni.redirectTo({
url: '/BagStation/pages/makeOrder/orderPaying?type=urea'
})
})
},
checkOrder(){
let uers = uni.getStorageSync('user')
ureaFinanceApi.findUnpaidOrders(uers.id).then(res=>{
let data = JSON.stringify(res.data)
if(!res.data){
}else{
uni.redirectTo({
url:`/BagStation/orderDetail/orderDetailUrea?data=${data}&&type=orderList`
})
}
})
},
ScanCode(){
uni.scanCode({
scanType: 'qrCode',
onlyFromCamera: false,
success: (resResult) => {
console.log(resResult.result)
let number = resResult.result.indexOf('='),
codeLenght = resResult.result.length
let code =resResult.result.substring(number+1,codeLenght)
var data = {
sn : code,
siteId:this.siteInfo.siteId,
currentLongitude:this.siteInfo.longitude,
currentLatitude:this.siteInfo.latitude,
}
ureaSiteApi.siteMatch(data).then(res=>{
if(res.code == 40000 && res.msg =="站点不匹配"){
this.NextSiteId = res.data.siteId
this.PopupShow = true
this.PopupType = 6
return
}
let data1= {
sn:data.sn
}
let StringNumber = ''
var info = JSON.stringify(this.siteInfo)
if(res.data.status=='0'){
ureaSiteApi.sendRequest(data1).then(res=>{
if(res.code==20000){
uni.navigateTo({
url:`/BagStation/pages/ureaMakeScan/ureaMakeScan?item=${info}&&sn=${data1.sn}`
})
}else{
if(res.code == 40000){
if(res.msg == '提枪并挂枪再扫码支付'){
this.PopupShow = true
this.PopupType = 4
}
}
}
})
}else{
uni.navigateTo({
url:`/BagStation/pages/ureaMakeScan/ureaMakeScan?item=${info}&&sn=${data1.sn}`
})
}
})
}
})
},
valChange(e){
},
backTohome(){
uni.switchTab({
url:'../../../pages/tabbar/home/home'
})
},
hidendialog(){
this.showtitle =false
},
gotoPay(){
uni.navigateTo({
url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}&activeCur=${this.activeCur}`
})
},
getChannelCode(val, sec) {
this.activeChannelCode = val
this.secondChannelCode = sec
},
siteQrPay() {
// let siteId =
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stieQr?siteId=${this.siteId}&activeChannelCode=${this.activeChannelCode}&secondChannelCode=${this.secondChannelCode}`
})
},
getSiteInfo(id) {
ureaSiteApi.findSiteDetails(id).then( res=>{
// console.log(res)
this.BrandLists = res.data
let userInfo= uni.getStorageSync('user'),
listInfos = {
goodsQuantity:'0',
totalPrice:0,
buyerId:userInfo.id,
buyerName:userInfo.name
}
res.data.forEach( (ele,i)=>{
ele.specifications.forEach((list,j)=>{
list.goodsQuantity = '0'
list.totalPrice = 0
list.brandName =ele.brandName
list.buyerId = userInfo.id,
list.buyerName=userInfo.name
})
})
console.log(this.BrandLists)
})
},
makePay() {
console.log(this.siteInfo.juli)
if(this.siteInfo.juli > 1000 ){
this.showtitle = true
}else{
uni.navigateTo({
url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}&activeCur=${this.activeCur}`
})
}
},
onChangePayQr(val) {
this.qrcodePay = val
},
onChangePay(val, active) {
this.activePay = val
this.activeCur = active
},
openPlugin() {
const key = this.qqKey; //使用在腾讯位置服务申请的key
const referer = '星油云'; //调用插件的app的名称
const endPoint = JSON.stringify({
name: '油站',
latitude: 39.89631551,
longitude: 116.323459711
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
})
},
goBack() {
uni.navigateBack({
})
},
selectRadio() {
this.radio === 'A' ? this.radio = '' : this.radio = 'A'
},
openMap() {
let that = this
uni.openLocation({
latitude: this.siteInfo.latitude,
longitude: this.siteInfo.longitude,
name: this.siteInfo.siteName,
address: this.siteInfo.address,
scale: 12,
success: function() {
// console.log('success')
},
fail: (error) => {
// console.log('error')
// console.log(error)
},
complete: () => {
// console.log('made')
},
})
var map = uni.createMapContext('map')
map.moveToLocation()
}
},
filters: {
saleMoney(value){
return (Math.floor(value * 100) / 100 ).toFixed(2)
},
distanceFilter(value) {
if (value) {
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
}
},
usernameF(value) {
if (value) {
return value.substr(0, 1) + '**'
} else {
return '匿名'
}
},
plateNumberF(value) {
if (value) {
return value.substr(0, 2) + '*****'
} else {
return '车牌号已隐藏'
}
}
}
}
</script>
<style scoped>
.TreatmentLiquid_box_name{
color: #333;
}
.BrandList_item_mian_left{
font-size:30rpx;
color: #333;
}
.BrandList_item_mian_main{
font-size: 35rpx;
color: #FF9000;
font-weight: 700;
}
.BrandList_item_mian{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4%;
}
.BrandList_item{
margin-bottom:10%;
}
.BrandList_item_title{
font-size: 32rpx;
font-family: 'PingFang SC';
font-weight: bold;
color: #333333;
margin-bottom: 3%;
}
.BrandList{
padding: 0 8%;
}
.button_bottom{
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.characteristic_box{
padding: 5% 8%;
padding-bottom: 20%;
}
.characteristic_box_title{
font-size: 30rpx;
font-family: 'PingFang SC';
font-weight: bold;
color: #333333;
margin-bottom: 3%;
}
.characteristic_box_list{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.characteristic_box_list text{
border: 2rpx solid #FF9000;
color: #FF9000;
padding: 1% 2%;
font-size: 24rpx;
margin-right: 2%;
}
.padding-top-big{
padding: 12% 0 2%;
}
.TreatmentLiquid_box{
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
font-size: 34rpx;
color: red;
padding: 0 8%;
}
.content {
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;
}
.placeholder {
min-height: 10upx;
}
.yu-card-xuan {
position: relative;
top: 110rpx
}
.site-label {
max-width: 450upx;
min-width: 450upx;
}
.cu-btn.sm {
width: 80%;
}
.site-back {
width: 2rem;
top: 2.8rem;
left: 1rem;
}
.site-icon {
width: 1.5rem;
vertical-align: middle;
}
.my-tag {
padding: 0 12rpx;
}
.fixed {
position: fixed;
bottom: 0;
width: 750upx;
}
.placeholder-hidden {
opacity: 0;
}
.yu-card-xuan .action {
white-space: nowrap;
}.close-icon{
position: absolute;
right: 2%;
top: 2%;
}
.dialog-box{
position: relative;
}
.text-centerS{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.red_btn{
color: #FFFFFF;
background-color: #fe0505;
}
.box-paddings{
padding:40rpx 0;
}
.headShow{
font-size: 36rpx;
font-weight: 600;
}
.showtext{
line-height: 2;
font-size: 30rpx;
margin-bottom: 30rpx;
padding: 0 10%;
word-spacing: 10px;
letter-spacing: 3px;
text-align: left;
}
.checklocation_box_button{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5%;
}
.btn-box{
width: 45%;
flex: 0 0 auto;
text-align: center;
padding: 3%;
border-radius: 20rpx;
font-size: 28rpx;
box-sizing: border-box;
border: 2rpx solid #bfbfbf;
}
.box-panding{
padding:10 0;
}
.checklocation{
position: fixed;
top: 50%;
left: 20%;
right: 20%;
z-index: 999;
}
.checklocation_box{
background-color: #FFFFFF;
}
.content {
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;
}
.placeholder {
min-height: 10upx;
}
.yu-card-xuan {
position: relative;
top: 110rpx
}
.site-label {
max-width: 450upx;
min-width: 450upx;
}
.cu-btn.sm {
width: 80%;
}
.site-back {
width: 2rem;
top: 2.8rem;
left: 1rem;
}
.site-icon {
width: 1.5rem;
vertical-align: middle;
}
.my-tag {
padding: 0 12rpx;
}
.fixed {
position: fixed;
bottom: 0;
width: 750upx;
}
.placeholder-hidden {
opacity: 0;
}
.yu-card-xuan .action {
white-space: nowrap;
}
.no-JIAZHU{
text-align: center;
font-size: 32rpx;
/* padding: 0; */
font-weight: 700;
}
</style>