<template>
<view class="content bg-gray position-re">
<!-- <cu-custom class="bg-main-oil" isBack bgColor="bg-main-oil">
<block slot="content">中石化紫云路</block>
<block slot="backText">返回</block>
</cu-custom> -->
<view class="bg-img 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 no-border">
<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>
<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.juli|distanceFilter}}
</view>
</view>
</view>
<view class="flex text-center padding-top-sm">
<view class="flex-sub">
<view class="" @tap="showThreeSites=true">
<view class="self-icon margin-right-xs">
<image :src="imgURL+'qr-exchange.png'" mode="widthFix"></image>
</view>
变更油站
</view>
</view>
<view class="flex-sub">
<view class="" @tap="toSiteDetail(siteId)">
<view class="self-icon margin-right-xs">
<image :src="imgURL+'qr-xq.png'" mode="widthFix"></image>
</view>
油站详情
</view>
</view>
</view>
</view>
</view>
</view>
<view class="placeholder margin-bottom-lg">
</view>
<view class="margin margin-top-lg radius bg-white">
<view class="padding text-center">
<text class="text-black">
请提醒加油员使用
<text class="text-red">
“ {{showtitles}} ”
</text>
进行订单核销
</text>
</view>
<view class="qr-container margin padding-bottom-xs text-center">
<view class="qr-container text-center ">
<view class="qrimg">
<view class="qrimg" @tap="newQrString">
<tki-qrcode ref="qrcode" cid="2" loadMake :val="val" :size="400" unit="upx"
background="#fff" foreground="#000" pdground="#000" :icon="iconUrl" iconSize="40" onval
:usingComponents="usingComponents" showLoading @result="qrR" />
</view>
</view>
</view>
<view class="text-center padding-top text-sm margin-bottom">
提示：该二维码每隔3分钟自动刷新一次
</view>
</view>
<view class="padding font-12 solid-top">
<view class="flex padding-bottom-sm padding-left padding-right">
<view class="flex-sub">
<text class="cuIcon-card text-olive font-16 padding-right-xs">
</text>
<text>
油卡卡号
</text>
</view>
<view class="text-right flex-sub ">
<picker @change="pickCard" :disabled="!isCompany" :value="activeCardIndex" mode="selector"
:range="cards" range-key="companyName">
<view class="picker">
{{cards[activeCardIndex]?activeCard.accountCardCode :'选择油卡'}}
</view>
</picker>
</view>
<text class="cuIcon-right"></text>
</view>
<view class="flex padding-bottom-sm padding-left padding-right">
<view class="flex-sub">
<text class="cuIcon-selectionfill text-green font-16 padding-right-xs">
</text>
<text>
油卡所属
</text>
</view>
<view class="text-right flex-sub text-green">
{{(cardList[activeCardIndex]?activeCard.companyName:'未选择油卡') |cardForamt}}
</view>
</view>
<view class="flex padding-bottom-sm padding-left padding-right">
<view class="flex-sub">
<text class="cuIcon-moneybagfill oil-main-color font-16 padding-right-xs">
</text>
<text>
油卡余额
</text>
</view>
<view class="text-right flex-sub oil-main-color">
<text>
￥{{(cardList[activeCardIndex]?activeCard.balance:'')|moneyFormat}}
</text>
</view>
</view>
<view class="flex padding-left padding-right">
<view class="flex-sub">
<text class="cuIcon-infofill color-wjy font-16 padding-right-xs">
</text>
<text>
支持油站
</text>
</view>
<text class="text-right flex-sub">
星油/老吕油站
</text>
</view>
</view>
</view>
<!-- <view class="bg-gray padding-top-sm ">
<view class="btn">
<view class="flex padding flex-direction">
<button class="cu-btn block bg-main-oil lg">
<image class="site-icon margin-right-sm" :src="imgURL+'site-yz.png'" mode="widthFix"></image>
一键支付
</button>
</view>
</view>
</view> -->
<!-- showThreeSites -->
<three-sites @hideOneModal="showThreeSites=false" :showThreeSites="showThreeSites"></three-sites>
</view>
</template>
<script>
import oilSiteApi from '@/api/oil-site.js'
import qrApi from '@/api/qr.js'
import accountApi from '@/api/account.js'
import priceTab from '../components/price-tab.vue'
import threeSites from '@/components/three-sites.vue'
import tkiQrcode from "../components/tki-qrcode/tki-qrcode.vue" //二维码生成器
export default {
components: {
priceTab,
threeSites,
tkiQrcode
},
data() {
return {
showtitles:"",
isCompany: uni.getStorageSync('accountStatus'),
activeCardIndex: 0,
showThreeSites: false,
radio: 'B',
qrImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1102530589,2787379918&fm=11&gp=0.jpg",
val: '',
// iconUrl: '../../../static/img/qr-icon.png',
mainURL: this.global.mainURL,
imgURL: this.global.imgURL,
active: 0,
ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
siteId: '',
activeChannelCode: '',
siteInfo: {},
cardList: [],
posName: '',
secondChannelCode: '',
timeinterval: '',
customerId: uni.getStorageSync('user').userCode
}
},
computed: {
iconUrl() {
if (this.activeChannelCode) {
if (this.secondChannelCode) {
this.posName = '壳牌'
return `../../../static/img/YDJY.png`
} else {
this.posName = '星油云站'
return `../../../static/img/${this.activeChannelCode}.png`
}
}
},
accountCardCode() {
if (this.activeCard) {
this.getQrString(this.activeCard)
return this.activeCard.accountCardCode
}
},
activeCard() {
if (this.cardList.length) {
return this.cardList[this.activeCardIndex]
}
},
cards() {
if (this.cardList.length) {
let cards = []
console.log(this.cardList)
// this.cardList.forEach((e) => {
// cards.push(e.accountCardCode)
// })
return this.cardList
}
},
},
onUnload() {
this.timeinterval = ''
},
onLoad(option) {
let oilItem = uni.getStorageSync('oilItem')
this.showtitles = oilItem.listTag
this.siteId = option.siteId
this.activeChannelCode = option.activeChannelCode
this.secondChannelCode = option.secondChannelCode
this.timeinterval = setInterval(() => {
this.newQrString()
}, 1000 * 60 * 3);
this.getUserCard()
this.getSiteInfo(option.siteId)
},
methods: {
qrR() {
},
newQrString() {
this.getQrString(this.activeCard)
},
getQrString(activeCard) {
let data2 = {
companyId: this.activeCard.companyId,
secondChannelCode: this.secondChannelCode,
customerId: this.customerId,
orderSource: "WECHAT_MINIAPPS", //类型：String 必有字段 备注：订单来源（WECHAT_MINIAPPS）
oilsStationId: this.siteId, //类型：String 必有字段 备注：油站ID
channelCode: this.activeChannelCode, //类型：String 必有字段 备注：渠道编码
oilCardNature: activeCard.oilCardType, //类型：String 必有字段 备注：油卡性质
accountCardCode: activeCard.accountCardCode //类型：String 必有字段 备注：油卡卡号
}
qrApi.getOilQrCode(data2).then(res => {
if (res.code === 20000) {
this.val = res.data.codeStr
}
})
},
pickCard(e) {
this.activeCardIndex = e.detail.value
},
getSiteInfo() {
let data2 = {
...uni.getStorageSync('location'),
siteId: this.siteId
}
oilSiteApi.getSiteDetails(data2).then(res => {
if (res.code == 20000) {
this.siteInfo = res.data
}
})
},
getUserCard() {
accountApi.getUserAccount().then(res => {
if (res.code == 20000) {
this.cardList = res.data
if (this.cardList.length > 0) {
// this.getMoneyDetail(this.cardList[0])
}
}
})
},
toSiteDetail(id) {
uni.redirectTo({
url: `/BagStation/pages/stationDetail/stationDetail?siteId=${id}`,
fail: (err) => {
// console.log(err)
},
success: () => {
// console.log('err')
}
})
},
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: 117,
longitude: 21,
name: '江西景德镇',
address: '九龙路1188号',
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: {
distanceFilter(value) {
if (value) {
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
}
},
moneyFormat(value) {
if (value) {
return (parseInt(value * 100) / 100).toFixed(2)
} else {
return '0.00'
}
},
cardForamt(val) {
if (uni.getStorageSync('accountStatus') == true) {
// 企业卡
return val == null ? '未选择油卡' : val
} else {
// 个人卡
return val == null ? '星油豆' : '星油豆'
}
}
}
}
</script>
<style scoped>
.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;
}
.my-cell {}
.placeholder {
min-height: 20upx;
}
.yu-card-xuan {
position: relative;
top: 110rpx
}
.site-label {
max-width: 500upx;
}
.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;
}
.self-icon {
width: 1rem;
display: inline-block;
vertical-align: middle;
}
</style>