caoliancun
/
MP_XOIL_company_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
62 Commits
6 Branches
0 Tags
4.3 MiB
 
 
 
 
Tag: Branch: Tree: b0a89c5a98
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b0a89c5a98'
${ noResults }
MP_XOIL_company_new/BagStation/pages/stationDetail/stationDetail.vue

734 lines
18 KiB
Raw Blame History

<template>
<view class="content bg-white 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 fixed-top flex align-end margin-bottom-lg " :style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
<image v-if="isShow" @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" style="overflow: hidden;" >
<view style="width: 100%; display: flex;" class="strong padding-bottom-xs" >
<text style="width: 100%;flex: 1;" class="text-cut">{{siteInfo.siteName}}</text>
<!-- <text v-if="siteInfo.siteLevel" class="cu-tag round bg-self-yellow yu-tag text-xs tag-red" style="margin-left: 20px;">{{siteInfo.siteLevel}}级</text> -->
</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 style="" 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>
</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.juli|distanceFilter}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="placeholder margin-bottom">
</view>
<!-- 价格 -->
<price-tab @onChangeChannelCode="getChannelCode" @onChangePayQr="onChangePayQr" @onChangePay="onChangePay"
:channel-list="siteInfo.oilSiteChannelDetailsVos" :channelPrice="siteInfo"></price-tab>
<!-- 客户评价 -->
<view class="bg-gray padding-top-sm " v-if="siteInfo.xoilUreaPriceVos">
<view class="bg-white padding ">
<text>尿素</text>
<view class="padding-top-sm">
<view class="nsjz-flex">
<view class="nsjz-flex-left">
<image :src="ureaproductType == 2?areaLogoUrl1:areaLogoUrl" mode="" style="width: 36rpx;height: 36rpx;"></image>
<view class="nsjz-flex-left-body">
<text>{{ureaproductType == '2'?'品牌桶装尿素':'加注机'}}</text>
<text v-if="ureaproductType == 2">{{areaPrice}}元/桶<text style="font-size: 12px;margin: 0;">起</text></text>
<text v-if="ureaproductType == 1">￥{{areaPrice}}/L</text>
</view>
</view>
<view class="nsjz-flex-botton" @tap="areaJump">
{{ureaproductType == 2?'去购买':'去加注'}}
</view>
</view>
<view style="margin-left: 56rpx;font-size: 12px;">
加注支付前,请与油站工作人员确认
</view>
</view>
</view>
</view>
<!-- 客户评价 -->
<view class="bg-gray padding-top-sm ">
<view class="bg-white padding ">
<text>客户评价</text>
<view class="padding-top-sm">
<text class="cu-tag margin-right-xs"> 服务周到</text>
<text class="cu-tag margin-right-xs">交通便利</text>
<text class="cu-tag margin-right-xs">便捷高效</text>
</view>
</view>
</view>
<!-- 客户订单 -->
<view class="bg-gray padding-top-sm ">
<view class="cu-list bg-white no-border menu padding-top ">
<text class="padding margin-top">客户订单</text>
<view class="cu-item " v-for="(itm,index) in siteInfo.oilSiteOrderInfoVos" :key="index">
<text class="text-black">
{{itm.userName|usernameF}} {{itm.plateNumber|plateNumberF}}
</text>
<text class=" text-black ">加 {{itm.oilsCode}} {{itm.volume}}L 节省 <text class="text-red">
￥{{itm.discountAmount}}</text></text>
</view>
<view class="cu-item no-border" v-if="siteInfo.oilSiteOrderInfoVos && !siteInfo.oilSiteOrderInfoVos.length">
暂无
</view>
</view>
<!-- 底部去支付 -->
<view class="" v-if="activePay||qrcodePay">
<view class="btn bg-white placeholder-hidden">
<view class="flex bg-white padding flex-direction">
<button class="cu-btn block bg-main-oil lg" v-if="activePay" @tap="makePay">
<image class="site-icon margin-right-sm" :src="imgURL+'site-yz.png'" mode="widthFix">
</image>
一键支付
</button>
<button v-if="qrcodePay" class="cu-btn block bg-main-oil margin-tb-sm lg" @tap="siteQrPay">
<image class="site-icon margin-right-sm" :src="imgURL+'site-qr.png'" mode="widthFix">
</image>
二维码支付
</button>
</view>
</view>
<view class="btn bg-white fixed ">
<view class="flex bg-white padding flex-direction">
<button class="cu-btn block bg-main-oil lg" v-if="activePay" @tap="makePay">
<image class="site-icon margin-right-sm" :src="imgURL+'site-yz.png'" mode="widthFix">
</image>
一键支付
</button>
<button v-if="qrcodePay" class="cu-btn block bg-main-oil margin-tb-sm lg" @tap="siteQrPay">
<image class="site-icon margin-right-sm" :src="imgURL+'site-qr.png'" mode="widthFix">
</image>
二维码支付
</button>
</view>
</view>
</view>
</view>
<view class=" cu-modal show" v-show="showtitle">
<view class="cu-dialog overflow-unset dialog-box box-paddings">
<view class="close-icon" @tap="hidendialog">
<image src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/close.png" mode="" style="width:50rpx;height: 50rpx;"></image>
</view>
<view class="">
<image src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/errIcon.png" mode="" style="width:100rpx;height: 100rpx;"></image>
</view>
<view class="cu-bar box-panding text-centerS" >
<text class="headShow"> 支付提醒 </text>
</view>
<view class="cu-bar box-panding" >
<text class="showtext">当前油站距离您较远，请与加油员确认您选择的油站是否正确。</text>
</view>
<view class="checklocation_box_button">
<view v-if="isShow" class="cu-tn btn-box red_btn" @tap="backTohome">
返回油站列表
</view>
<view class="cu-tn btn-box" @tap="gotoPay">
确认下单
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import oilSiteApi from '@/api/oil-site.js'
import priceTab from '../components/price-tab.vue'
export default {
components: {
priceTab
},
onHide() {
// console.log('这里是hiden')
this.innerAudioContext?.stop()
},
onUnload() {
// console.log('这里是卸载页面')
this.innerAudioContext?.stop()
},
data() {
return {
showtitle:false,
radio: 'B',
areaLogoUrl:'../../../static/img/xy-jyz.png',
areaLogoUrl1:'../../../static/img/xy-ns.png',
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: '',
ureaNum:false,
ureaproductType:'',
areaPrice:'',
isShow:true
}
},
onHide() {
this.innerAudioContext?.stop()
},
onLoad(option) {
// let siteId = uni.getStorageSync('siteId') ||
if(option.siteId && !option.customerJump) {
this.isShow = false
this.siteId = option.siteId
this.getSiteInfo(option.siteId)
uni.setStorageSync('siteId',option.siteId)
return
}
// console.log(option)
// if(option.channerCode == 'TY'){
// var oilItem = uni.getStorageSync('OtherSiteInfo')
// // console.log(oilItem)
// }else{
// let obj = option.item,
// var oilItem = JSON.parse(option.item)
// }
let oilItem = option.channerCode == 'TY' ? uni.getStorageSync('OtherSiteInfo') : option.item ? JSON.parse(option.item) : {siteId:option.siteId}
// if(oilItem.secondChannelCode === 'SQ'){
// oilItem.listTag = oilItem.sqSiteBelong === 'JKJY' ? '集卡加油' :'上汽联名卡'
// }
uni.setStorageSync('oilItem',oilItem)
this.getSiteInfo(oilItem.siteId)
this.siteId = oilItem.siteId
// if(option.item.ureaNumber!='0'){
// this.ureaNum = true
// }else{
// this.ureaNum = false
// }
if(oilItem.listTag == '万金油'){
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/wanjinyou.mp3'
}else if(oilItem.listTag == '星油'){
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/xingyouyunzhan.mp3'
}else if(oilItem.listTag == '壳牌'){
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/qiaopainew.mp3'
}else if(oilItem.listTag == '上汽联名卡' ){
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/shangqi.mp3'
}else if(oilItem.listTag == '集卡加油') {
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/shangqijika.mp3'
}
this.ContextAudio(this.audioUrl)
},
methods: {
areaJump(){
// var itemS = {
// siteId:this.siteInfo.xoilUreaPriceVos[0].siteId
// }
uni.navigateTo({
url: '/BagStation/pages/ureaDetail/ureaDetail?item='+ JSON.stringify(this.siteInfo.xoilUreaPriceVos[0]),
fail: (err) => {
// console.log(err)
},
success: () => {
// console.log('err')
}
})
},
// 生成音频文件
ContextAudio(url){
this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.autoplay = true;
this.innerAudioContext.src = url;
this.innerAudioContext.onPlay(() => {
console.log('开始播放');
});
this.innerAudioContext.onError((res) => {
console.log(res)
});
},
hidendialog(){
this.showtitle =false
},
backTohome(){
uni.switchTab({
url:'../../../pages/tabbar/home/home'
})
},
// 距离过远提示弹窗
makePay() {
console.log(this.siteInfo.juli)
if(this.siteInfo.juli > 1000 ){
this.showtitle = true
}else{
this.innerAudioContext?.stop()
uni.navigateTo({
url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}&activeCur=${this.activeCur}`
})
}
},
getChannelCode(val, sec) {
this.activeChannelCode = val
this.secondChannelCode = sec
},
siteQrPay() {
this.innerAudioContext?.stop()
// let siteId =
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stieQr?siteId=${this.siteId}&activeChannelCode=${this.activeChannelCode}&secondChannelCode=${this.secondChannelCode}`
})
},
getSiteInfo(id) {
let data2 = {
...uni.getStorageSync('location'),
siteId: id
}
oilSiteApi.getSiteDetails(data2).then(res => {
console.log('getSiteDetails',res)
if (res.code == 20000) {
this.siteInfo = res.data
if(this.siteInfo.xoilUreaPriceVos){
var areaPriceList = []
this.siteInfo.xoilUreaPriceVos.forEach(item =>{
if(item.productType == '1'){
this.ureaproductType = 1
}else{
this.ureaproductType = 2
}
areaPriceList.push(item.guidePrice)
})
this.areaPrice = Math.min(...areaPriceList)
console.log(Math.min(...areaPriceList),areaPriceList,'对对对对对对多多多多')
}
}else if(res.code == 40000){
uni.showModal({
title: '提示',
content: res.msg,
showCancel:false,
success: function (res) {
if (res.confirm) {
uni.switchTab({
url:'../../../pages/tabbar/home/home'
})
}
}
});
}
})
},
gotoPay() {
this.innerAudioContext?.stop()
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() {
// this.innerAudioContext?.stop()
// uni.navigateBack()
this.innerAudioContext?.stop()
let siteId = uni.getStorageSync('siteId')
siteId
? uni.switchTab({url:'../../../pages/tabbar/home/home'})
: 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: {
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>
.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;
}
.text-centerS{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.red_btn{
margin-right: 20rpx;
color: #FFFFFF;
background-color: #FF6700;
}
.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: center;
/* 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;
}
.close-icon{
position: absolute;
right: 2%;
top: 2%;
}
.dialog-box{
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;
}
.err_btnBox{
display: flex;
justify-content: center;
align-items: center;
}
.nsjz-flex{
display: flex;
align-items: center;
justify-content: space-between;
}
.nsjz-flex-left{
display: flex;
align-items: center;
}
.nsjz-flex-left-body text{
font-weight: 600;
color: #000;
}
.nsjz-flex-left-body{
margin-left: 20rpx;
}
.nsjz-flex-left-body text:last-child{
color: #ff6700;
margin-left: 30rpx;
font-size: 32rpx;
}
.nsjz-flex-botton{
color: #FFFFFF;
border-radius: 5px;
background: #FF6700;
padding: 0rpx 34rpx;
line-height: 30px;
font-size: 16px;
}
</style>