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.
472 lines
11 KiB
472 lines
11 KiB
<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>
|
|
|