498 lines
12 KiB
Vue
498 lines
12 KiB
Vue
<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.split('(')[0]:'未选择油卡') |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 v-if="activeCard.shareCompanyQuota==1">
|
||
共享余额
|
||
</text>
|
||
<text v-else>
|
||
￥{{(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
|
||
},
|
||
onLoad(option) {
|
||
console.log('进入siteQr',option)
|
||
let oilItem = uni.getStorageSync('oilItem')
|
||
console.log(oilItem)
|
||
this.showtitles = oilItem.listTag
|
||
},
|
||
data() {
|
||
return {
|
||
showtitles:"",
|
||
isCompany: uni.getStorageSync('accountStatus'),
|
||
activeCardIndex: 0,
|
||
showThreeSites: false,
|
||
radio: 'B',
|
||
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: '',
|
||
otherUser:'',
|
||
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)
|
||
e.companyName = e.companyName + '('+( e.companyType==0?`柴油账户:${e.balance}元`:e.companyType==1?`汽油账户:${e.balance}元`:e.companyType==2?`LNG账户:${e.balance}元`:`尿素:${e.balance}元`) + ')'
|
||
})
|
||
return this.cardList
|
||
}
|
||
},
|
||
},
|
||
onUnload() {
|
||
this.timeinterval = ''
|
||
},
|
||
onLoad(option) {
|
||
let oilItem = uni.getStorageSync('oilItem')
|
||
let otherUserInfo = uni.getStorageSync('otherUserInfo')
|
||
if(otherUserInfo){
|
||
this.otherUser = 'kl'
|
||
}
|
||
this.otherUserInfo = otherUserInfo
|
||
console.log('+++++',option)
|
||
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,
|
||
orderSource: "WECHAT_MINIAPPS", //类型：String 必有字段 备注：订单来源（WECHAT_MINIAPPS）
|
||
secondChannelCode: this.secondChannelCode,
|
||
customerId: this.customerId,
|
||
oilsStationId: this.siteId, //类型：String 必有字段 备注：油站ID
|
||
channelCode: this.activeChannelCode, //类型：String 必有字段 备注：渠道编码
|
||
oilCardNature: activeCard.oilCardType, //类型：String 必有字段 备注：油卡性质
|
||
accountCardCode: activeCard.accountCardCode //类型：String 必有字段 备注：油卡卡号
|
||
}
|
||
console.log('这里是二维码参数',data2)
|
||
qrApi.getOilQrCode(data2).then(res => {
|
||
console.log('这里是二维码返回处+',res,'+')
|
||
if (res.code === 20000) {
|
||
console.log(res.data)
|
||
// console.log(this.otherUser,'++++++++++++++++++++')
|
||
// if(this.otherUser = 'kl'){
|
||
// this.val = res.data.codeStr+"&"+this.otherUser
|
||
// return
|
||
// }
|
||
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() {
|
||
console.log('%c look that ↓','color:red;font-size:50px')
|
||
console.log(uni.getStorageSync('oilItem'),'*-*-*-*-')
|
||
accountApi.getNewUserAccount({siteId:uni.getStorageSync('oilItem').siteId}).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>
|