星油云站
This commit is contained in:
caolc
228
packageQr/components/OrderOil.vue
Normal file
228
packageQr/components/OrderOil.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="content text-left padding">
|
||||
<view class="strong padding-bottom-xs color-333 ">
|
||||
{{oilSite.siteName}}
|
||||
</view>
|
||||
<view class="font-12 color-999">
|
||||
<text class=" text-cut">{{oilSite.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-left padding-right">
|
||||
<view class="padding-bottom-sm">
|
||||
油号选择：
|
||||
</view>
|
||||
<view class="grid col-5 justify-start">
|
||||
<view class="padding-xs" v-for="(item,index) in oilList" :key="index">
|
||||
<button class="cu-btn" @tap="oilNameSel(item)" :class="[selected.otherOilsName===item.otherOilsName?'bg-main-oil':'line-gray']">{{item.otherOilsName}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-top-xs padding-left padding-right">
|
||||
<text class="strong padding-right font-16">
|
||||
{{selected.otherOilsName}}
|
||||
</text>
|
||||
<text class="padding-right">星油价格:<text class="oil-main-color text-bold">￥{{selected.sitePrice|numberFilter}}/L</text></text>
|
||||
<text class="s-rich">市场价:￥{{selected.marketPrice|numberFilter}}/L</text>
|
||||
</view>
|
||||
<view class="padding-left padding-right">
|
||||
<view class="padding-bottom-sm">
|
||||
油枪选择：
|
||||
</view>
|
||||
<view class="grid col-5 justify-start">
|
||||
|
||||
<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
|
||||
<button @tap="gunIdSel(index)" class="cu-btn" :class="[gunId===index?'bg-main-oil':'line-gray']">{{index+1}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="solid-top margin-top-sm shadow-warp">
|
||||
<view class="cu-form-group">
|
||||
<view class="title">加油升数</view>
|
||||
<input type="digit" v-model="vol" @input="calcMoney" placeholder="请输入加油升数" name="input" />
|
||||
<text>约￥{{money.total|numberFilter}}</text>
|
||||
</view>
|
||||
<view class="my-cell">
|
||||
<text class="font-12">星卡优惠金额</text><text class="fr">-￥{{money.discount|numberFilter}}</text>
|
||||
</view>
|
||||
<view class="my-cell">
|
||||
<text class="font-12">实际支付金额</text><text class="oil-main-color fr">￥{{money.realPay|numberFilter}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="margin round bg-main-oil" @tap="onConfirm">确定</button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OliSiteApi from '@/api/oli-site.js'
|
||||
export default {
|
||||
props: {
|
||||
oilList: {
|
||||
type: Array,
|
||||
default () {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
vol: '',
|
||||
userInfo:uni.getStorageSync('loginUser'),
|
||||
oliNameList: [1, 2, 9, 10],
|
||||
ColorList: [1, 2, 9, 10],
|
||||
gunId: 0,
|
||||
oilSite: uni.getStorageSync('oilSite'),
|
||||
selected: {
|
||||
xkPrice: '',
|
||||
standardPrice: ''
|
||||
},
|
||||
money: {
|
||||
total: '',
|
||||
discount: '',
|
||||
realPay: ''
|
||||
},
|
||||
price: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initForm()
|
||||
},
|
||||
watch: {
|
||||
oilList: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log('深度监听', newVal, oldVal)
|
||||
this.oilList = newVal
|
||||
this.initForm()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
selected: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log('深度监听2323', newVal, oldVal)
|
||||
this.selected = newVal
|
||||
if (newVal) {
|
||||
this.calcMoney()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
gunIdSel(index) {
|
||||
this.gunId = index
|
||||
},
|
||||
oilNameSel(item) {
|
||||
this.selected = item
|
||||
console.log(item)
|
||||
},
|
||||
initForm() {
|
||||
if (this.oilList[0]) {
|
||||
this.selected = this.oilList[0]
|
||||
}
|
||||
},
|
||||
onConfirm() {
|
||||
// const data5 = {
|
||||
// ...this.selected,
|
||||
// volume: this.vol,
|
||||
// oilPrice: this.selected.sitePrice,
|
||||
// gunId: this.gunId + 1,
|
||||
// price: this.money.realPay
|
||||
// }
|
||||
console.log(this.oilSite)
|
||||
const datas = {
|
||||
channelId: this.oilSite.siteCode,
|
||||
siteName:this.oilSite.siteName,
|
||||
staffId: this.userInfo.id,
|
||||
refuelDetail: {
|
||||
oilsBarNum: this.gunId + 1,
|
||||
oilProductCode:this.selected.oilProductCode,
|
||||
otherOilsName: this.selected.otherOilsName,
|
||||
price:this.money.realPay,
|
||||
volume:this.vol
|
||||
}
|
||||
}
|
||||
console.log(datas)
|
||||
this.$emit('confirmVol', datas)
|
||||
},
|
||||
calcMoney(e) {
|
||||
this.price = this.selected.sitePrice
|
||||
console.log(this.price)
|
||||
this.money.total = this.vol * this.selected.marketPrice
|
||||
console.log(this.money.total)
|
||||
this.money.discount = this.vol * (this.selected.marketPrice - this.price)
|
||||
this.money.realPay = this.vol * this.selected.sitePrice
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numberFilter(value) {
|
||||
value = value - 1 + 1
|
||||
if (value) {
|
||||
return value.toFixed(2)
|
||||
} else {
|
||||
return '0.00'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-content {
|
||||
background-color: #F1F2F7;
|
||||
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;
|
||||
}
|
||||
|
||||
.money-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.money-position {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
border-radius: 0 0 0 100upx;
|
||||
}
|
||||
</style>
|
||||
110
packageQr/components/company-item.vue
Normal file
110
packageQr/components/company-item.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="margin padding bg-gragul-oil radius company-card">
|
||||
<view class="padding-top padding-bottom-lg flex">
|
||||
<view class="basis-xl">
|
||||
<text class="text-white">{{company.companyName}}</text>
|
||||
<view class="padding-top-xs">
|
||||
<text class="text-white" @tap="makeCall(company.leaderPhone)">负责人：{{company.leaderName}} ({{company.leaderPhone|phoneFilter}})</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="basis-xs">
|
||||
<!-- bg-qy -->
|
||||
<view class="bg-qy">
|
||||
<image style="width: 100%;" :src="mainURL+'bg-qy.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dashed-top padding-top">
|
||||
<view class="flex">
|
||||
<view class="flex-sub text-center" v-show="company.openJoinCompany" @tap="joinqr">
|
||||
<button class="cu-btn round bg-white text-red text-sm">
|
||||
<text class="text-lg">
|
||||
<text class="cuIcon-qr_code padding-right-xs"></text>
|
||||
</text>
|
||||
出示二维码
|
||||
</button>
|
||||
</view>
|
||||
<view class="flex-sub text-center" v-show="company.openDirectOil" @tap="oiling">
|
||||
<button class="cu-btn round bg-white text-red text-sm">
|
||||
<text class="text-lg">
|
||||
<text class="cuIcon-addressbook padding-right-xs"></text>
|
||||
</text>
|
||||
<!-- <text class="cuIcon-crown padding-right-xs"></text> -->
|
||||
直接加油
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
company:{
|
||||
type:Object,
|
||||
default(){}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainURL: this.global.mainURL,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
oiling() {
|
||||
uni.navigateTo({
|
||||
url: `/packageQr/pages/partnership/partner-group/partner-group?id=${this.company.companyId}`
|
||||
})
|
||||
},
|
||||
joinqr() {
|
||||
uni.navigateTo({
|
||||
url: `/packageQr/pages/partnership/join-qr/join-qr?id=${this.company.companyId}&name=${this.company.companyName}`
|
||||
})
|
||||
},
|
||||
makeCall(number){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber:number
|
||||
})
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
phoneFilter(value){
|
||||
if(value){
|
||||
return value.substring(0, 3) + ' ' + ' **** ' + ' ' + value.substring(7, 11)
|
||||
}else{
|
||||
return '暂无手机号'
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-gragul-oil {
|
||||
background: linear-gradient(-51deg, rgba(255, 0, 0, 0.81), rgba(255, 19, 19, 0.81));
|
||||
}
|
||||
|
||||
.dashed-top::after {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
.company-card {
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bg-qy {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
top: 15rpx;
|
||||
right: 2.5rem;
|
||||
}
|
||||
|
||||
.cu-btn {
|
||||
border-radius: 100upx 100upx 100upx 0;
|
||||
}
|
||||
</style>
|
||||
67
packageQr/components/driver-item.vue
Normal file
67
packageQr/components/driver-item.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="solid-bottom content" @tap="virtualScan(driver.driverId)">
|
||||
<view class="text-xl">
|
||||
<text class="cuIcon-deliver text-red padding-sm padding-bottom-0">
|
||||
</text>
|
||||
<text class="text-df text-black padding-top-sm">
|
||||
{{driver.plateNumber?driver.plateNumber:'暂无车牌号'}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="padding-left padding-bottom margin-left">
|
||||
<view class="bg-white padding-left-xs">
|
||||
<text class="padding-right-lg text-df">{{driver.userName}} ({{driver.driverId}})</text>{{driver.phone|phoneFilter}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import partnerApi from '@/api/partner.js'
|
||||
export default {
|
||||
props: {
|
||||
driver: {
|
||||
type: Object,
|
||||
default () {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainURL: this.global.mainURL,
|
||||
loginUser: uni.getStorageSync('loginUser'),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
virtualScan(id) {
|
||||
partnerApi.getQrCode(id).then(res=>{
|
||||
if(res.code==20000){
|
||||
uni.setStorageSync('qrCode', res.data)
|
||||
uni.navigateTo({
|
||||
url:`/pages/stationDetail/stationDetail`
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
phoneFilter(value) {
|
||||
if (value) {
|
||||
return value.substring(0, 3) + ' ' + ' **** ' + ' ' + value.substring(7, 11)
|
||||
} else {
|
||||
return '暂无手机号'
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cu-tag {
|
||||
border-radius: 100upx 0 0 100upx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30rpx;
|
||||
}
|
||||
</style>
|
||||
1201
packageQr/components/tki-qrcode/qrcode.js
Normal file
1201
packageQr/components/tki-qrcode/qrcode.js
Normal file
File diff suppressed because it is too large
Load Diff
210
packageQr/components/tki-qrcode/tki-qrcode.vue
Normal file
210
packageQr/components/tki-qrcode/tki-qrcode.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template xlang="wxml" minapp="mpvue">
|
||||
<view class="tki-qrcode">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
|
||||
<!-- #endif -->
|
||||
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "./qrcode.js"
|
||||
let qrcode
|
||||
export default {
|
||||
name: "tki-qrcode",
|
||||
props: {
|
||||
cid: {
|
||||
type: String,
|
||||
default: 'tki-qrcode-canvas'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'upx'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
foreground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
pdground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lv: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
onval: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadMake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
usingComponents: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '二维码生成中'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_makeCode() {
|
||||
let that = this
|
||||
if (!this._empty(this.val)) {
|
||||
qrcode = new QRCode({
|
||||
context: that, // 上下文环境
|
||||
canvasId:that.cid, // canvas-id
|
||||
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||
showLoading: that.showLoading, // 是否显示loading
|
||||
loadingText: that.loadingText, // loading文字
|
||||
text: that.val, // 生成内容
|
||||
size: that.cpSize, // 二维码大小
|
||||
background: that.background, // 背景色
|
||||
foreground: that.foreground, // 前景色
|
||||
pdground: that.pdground, // 定位角点颜色
|
||||
correctLevel: that.lv, // 容错级别
|
||||
image: that.icon, // 二维码图标
|
||||
imageSize: that.iconSize,// 二维码图标大小
|
||||
cbResult: function (res) { // 生成二维码的回调
|
||||
that._result(res)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '二维码内容不能为空',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
_clearCode() {
|
||||
this._result('')
|
||||
qrcode.clear()
|
||||
},
|
||||
_saveCode() {
|
||||
let that = this;
|
||||
if (this.result != "") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.result,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '二维码保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_result(res) {
|
||||
this.result = res;
|
||||
this.$emit('result', res)
|
||||
},
|
||||
_empty(v) {
|
||||
let tp = typeof v,
|
||||
rt = false;
|
||||
if (tp == "number" && String(v) == "") {
|
||||
rt = true
|
||||
} else if (tp == "undefined") {
|
||||
rt = true
|
||||
} else if (tp == "object") {
|
||||
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||
} else if (tp == "string") {
|
||||
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||
} else if (tp == "function") {
|
||||
rt = false
|
||||
}
|
||||
return rt
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size: function (n, o) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
this.cSize = n
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
val: function (n, o) {
|
||||
if (this.onval) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cpSize() {
|
||||
if(this.unit == "upx"){
|
||||
return uni.upx2px(this.size)
|
||||
}else{
|
||||
return this.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.loadMake) {
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.tki-qrcode {
|
||||
position: relative;
|
||||
}
|
||||
.tki-qrcode-canvas {
|
||||
position: fixed;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
140
packageQr/pages/partnership/join-qr/join-qr.vue
Normal file
140
packageQr/pages/partnership/join-qr/join-qr.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view class="page-content bg-main-oil">
|
||||
<view class="qr-container shadow bg-white">
|
||||
<view class="text-xxl padding back-x" @tap="goBack(1)">
|
||||
<text class="cuIcon-close ">
|
||||
</text>
|
||||
</view>
|
||||
<view class="text-center logo">
|
||||
<image style="width:180upx" :src="mainURL+'logo.png'" mode="widthFix"></image>
|
||||
<!-- <image style="width:150upx" :src="mainURL+'bg-qy.png'" mode="widthFix"></image> -->
|
||||
|
||||
</view>
|
||||
<view class="margin padding text-center oil-main-color text-xl">
|
||||
<text @tap="getCompanyQrCode(id)">{{companyName}}</text>
|
||||
<view class="cu-tag bg-red bg-main-oil padding-left self-tag" @tap="goBack(1)">
|
||||
<text class="padding-left-sm">
|
||||
<text class="cuIcon-order icon-exchange "></text>
|
||||
切换企业</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-top text-center qr-part">
|
||||
<view class="qrimg" @tap="copyQrStr">
|
||||
<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 class="margin padding text-center bg-white ">
|
||||
<text>使用星油扫一扫，司机即可快速加入该企业</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import partnerApi from '@/api/partner.js'
|
||||
// 引入二维码库
|
||||
import tkiQrcode from "../../../components/tki-qrcode/tki-qrcode.vue" //二维码生成器
|
||||
export default {
|
||||
components: {
|
||||
tkiQrcode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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,
|
||||
id: '',
|
||||
companyName: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option.id)
|
||||
this.id = option.id
|
||||
this.companyName = option.name
|
||||
},
|
||||
onShow() {
|
||||
// this.qrInit()
|
||||
this.getCompanyQrCode(this.id)
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getCompanyQrCode(this.id)
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
goBack(num) {
|
||||
uni.navigateBack({
|
||||
delta: num
|
||||
})
|
||||
},
|
||||
qrR() {
|
||||
|
||||
},
|
||||
copyQrStr() {
|
||||
uni.setClipboardData({
|
||||
data: this.val,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已复制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getCompanyQrCode(id) {
|
||||
const data1 = {
|
||||
companyId: id,
|
||||
oilSiteCode: uni.getStorageSync('oilSite').oilSiteCode
|
||||
}
|
||||
partnerApi.getCompanyQrCode(data1).then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.val = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qr-container {
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 750upx;
|
||||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 3px -3px 4px rgba(26, 26, 26, 0.2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: -80rpx;
|
||||
}
|
||||
|
||||
.qr-part {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.self-tag {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2em;
|
||||
border-radius: 100upx 0 0 100upx;
|
||||
}
|
||||
|
||||
.icon-exchange {
|
||||
/* transform: scale(1, 1.8); */
|
||||
transform: rotate(90deg);
|
||||
position: absolute;
|
||||
left: 15upx;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.back-x {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
122
packageQr/pages/partnership/partner-group/partner-group.vue
Normal file
122
packageQr/pages/partnership/partner-group/partner-group.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="page-content ">
|
||||
<cu-custom class="main- totextbar bg-main-oil" round :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">公户加油</block>
|
||||
</cu-custom>
|
||||
<view class="cu-bar padding-bottom padding-top solids-bottom search">
|
||||
<view class="search-form round">
|
||||
<text class="cuIcon-search"></text>
|
||||
<input class="" v-model="searchCondition" @confirm="onSearch" @focus="InputFocus" @blur="InputBlur"
|
||||
:adjust-position="false" type="text" clearable placeholder="请输入车牌号搜索" confirm-type="search"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu sm-border" v-if="userList.length>0">
|
||||
<driver-item class="cu-item" v-for="item in userList" :key="item.driverId" :driver="item" />
|
||||
</view>
|
||||
<view v-if="userList.length<1">
|
||||
<Empty />
|
||||
</view>
|
||||
<view v-show="isLoadMore">
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
|
||||
import partnerApi from '@/api/partner.js'
|
||||
import DriverItem from '../../../components/driver-item.vue'
|
||||
export default {
|
||||
components: {
|
||||
DriverItem,
|
||||
UniLoadMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchCondition: '',
|
||||
staff: {
|
||||
data: 'lalall'
|
||||
},
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
oilSite: uni.getStorageSync('oilSite'),
|
||||
userList: [],
|
||||
value: '',
|
||||
isLoadMore: false,
|
||||
loadStatus: 'loading',
|
||||
companyId: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option.id)
|
||||
this.companyId = option.id
|
||||
},
|
||||
onShow() {
|
||||
this.userList = []
|
||||
this.currentPage = 1
|
||||
this.getList()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.userList = []
|
||||
this.currentPage = 1
|
||||
this.getList()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (!this.isLoadMore) {
|
||||
console.log('xiala')
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
InputBlur() {
|
||||
// this.isLoadMore = false
|
||||
// console.log(this.searchCondition)
|
||||
// this.userList = []
|
||||
// this.currentPage = 1
|
||||
// this.getList()
|
||||
// console.log('InputBlur')
|
||||
},
|
||||
InputFocus() {
|
||||
console.log(this.searchCondition)
|
||||
},
|
||||
onSearch() {
|
||||
this.isLoadMore = false
|
||||
this.userList = []
|
||||
this.currentPage = 1
|
||||
console.log('onSearch')
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
if (!this.isLoadMore) {
|
||||
const data3 = {
|
||||
pageSize: this.pageSize,
|
||||
currentPage: this.currentPage,
|
||||
plateNumber: this.searchCondition,
|
||||
belongCompany: this.companyId
|
||||
}
|
||||
partnerApi.getUserMegByCarNo(data3).then(res => {
|
||||
uni.stopPullDownRefresh();
|
||||
if (res.code == 20000) {
|
||||
this.userList = this.userList.concat(res.data)
|
||||
if (res.data.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.isLoadMore = true
|
||||
this.loadStatus = 'nomore'
|
||||
} else {
|
||||
this.currentPage++
|
||||
this.isLoadMore = false
|
||||
}
|
||||
console.log(this.isLoadMore, this.loadStatus, this.currentPage)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-content {
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
126
packageQr/pages/partnership/partnership.vue
Normal file
126
packageQr/pages/partnership/partnership.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<view class="page-content">
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">合作企业</block>
|
||||
</cu-custom>
|
||||
<view v-if="companyList.length>0">
|
||||
<company-item v-for="item in companyList" :key="item.id" :company="item"></company-item>
|
||||
</view>
|
||||
<view v-if="companyList.length<1">
|
||||
<Empty />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import partnerApi from '@/api/partner.js'
|
||||
import companyItem from '../../components/company-item.vue'
|
||||
export default {
|
||||
components: {
|
||||
companyItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
wanjinAccount: true,
|
||||
companyList:[],
|
||||
oilSiteId:uni.getStorageSync('oilSite').oilSiteCode
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getCompanyList()
|
||||
},
|
||||
methods: {
|
||||
routerTo(key) {
|
||||
if (key === 'xk') {
|
||||
var url = '/pages/qrcode/QrCode_xy/QrCode_xy'
|
||||
} else {
|
||||
var url = '/pages/qrcode/QrCode-wjy/QrCode-wjy'
|
||||
}
|
||||
console.log(url)
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
fail: (err) => {
|
||||
console.log('失败', url, err)
|
||||
}
|
||||
})
|
||||
},
|
||||
getCompanyList(){
|
||||
partnerApi.companyJoinSite(this.oilSiteId).then(res=>{
|
||||
if(res.code==20000){
|
||||
this.companyList = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
position: relative;
|
||||
width: 700upx;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.qr-bg {
|
||||
min-height: 200rpx;
|
||||
text-align: center;
|
||||
max-height: 300rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 4rem;
|
||||
top: 1.2rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 0.4rem;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
font-size: 12px;
|
||||
top: 15.75%;
|
||||
background-color: #fff;
|
||||
border-radius: 10rem 0 0 10rem;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.opened {
|
||||
color: #fe0505;
|
||||
}
|
||||
|
||||
.before-open {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.qr-bg image {
|
||||
background-size: cover;
|
||||
width: 700upx;
|
||||
height: 232rpx;
|
||||
}
|
||||
|
||||
.tip-container {
|
||||
margin-top: 0.5rem;
|
||||
color: rgba(191, 39, 1, 1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 6px 2px 6px 1px rgba(0, 0, 0, 0.06);
|
||||
opacity: 0.71;
|
||||
border-radius: 0px 20px 20px 15px;
|
||||
padding: 0.3rem 0.8rem;
|
||||
}
|
||||
|
||||
.opened {
|
||||
color: #fe0505;
|
||||
}
|
||||
|
||||
.before-open {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
210
packageQr/pages/qrsite/QrCode_xy.vue
Normal file
210
packageQr/pages/qrsite/QrCode_xy.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="page-content bg-main-oil">
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">油站二维码</block>
|
||||
</cu-custom>
|
||||
<view class="margin-xl padding radius bg-white">
|
||||
<view class="text-center padding">
|
||||
<text class="text-lg text-black">{{oilSiteName}}</text>
|
||||
</view>
|
||||
<view class="qr-container padding-top text-center ">
|
||||
<view class="qrimg">
|
||||
<tki-qrcode ref="qrcode" :val="val" :size="400" unit="upx" background="#fff" foreground="#000" pdground="#000"
|
||||
:icon="iconUrl" iconSize="40" :onval="true" :loadMake="true" :usingComponents="usingComponents" :showLoading="true"
|
||||
@result="qrR" />
|
||||
</view>
|
||||
</view>
|
||||
<view @tap="refreashQr" class="text-center padding-top padding-bottom-xs padding-bottom-xs">
|
||||
<text class="color-999 font-12">
|
||||
<text class="cuIcon-refresh padding-right-xs"></text>
|
||||
<!-- 付款码自动 （25s） -->
|
||||
收款码
|
||||
<text class="oil-main-color">
|
||||
刷新
|
||||
</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="text-center color-000 font-10 margin-bottom-sm" @tap="refreashQr">
|
||||
提示：司机扫描二维码支付油费
|
||||
</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-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="!showData.price">
|
||||
未指定
|
||||
</text>
|
||||
<text v-else>￥{{showData.price}}</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 v-if="!showData.volume">
|
||||
未指定
|
||||
</text>
|
||||
<text v-else>{{showData.volume}}L</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="margin-xl padding-top">
|
||||
<button class="bg-white oil-main-color" @tap="modalName='show'">设置油品加油升数</button>
|
||||
</view>
|
||||
<view class="cu-modal" :class="modalName">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar bg-white justify-end">
|
||||
<view class="content ">
|
||||
{{oilSiteName}}
|
||||
</view>
|
||||
<view class="action" @tap="hideModal">
|
||||
<text class="cuIcon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-left padding-bottom padding-top-0 bg-white">
|
||||
<OrderOilForm @confirmVol="getDesignatedQr" :oilList="oilList" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderOilForm from '@/packageQr/components/OrderOil.vue'
|
||||
// 引入二维码库
|
||||
import cloudSiteApi from '@/api/cloud-site.js'
|
||||
import OliSiteApi from '@/api/oli-site.js'
|
||||
import tkiQrcode from "@/packageQr/components/tki-qrcode/tki-qrcode.vue" //二维码生成器
|
||||
|
||||
export default {
|
||||
components: {
|
||||
OrderOilForm,
|
||||
tkiQrcode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
oilList: [],
|
||||
xkPrice:'',
|
||||
modalName: 'mod',
|
||||
oilSiteName: '',
|
||||
qrImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1102530589,2787379918&fm=11&gp=0.jpg",
|
||||
val: '',
|
||||
iconUrl: '../../static/img/qr-icon.png',
|
||||
oilDate: {
|
||||
oilSiteCode: uni.getStorageSync('oilSite').oilSiteCode,
|
||||
oilSiteName: uni.getStorageSync('oilSite').oilSiteName,
|
||||
oilCode: '',
|
||||
oilName: '',
|
||||
gunId: '',
|
||||
standardPrice: '',
|
||||
oilPrice: '',
|
||||
vol: ''
|
||||
},
|
||||
showData: {
|
||||
vol: '',
|
||||
realPay: ''
|
||||
},
|
||||
channelId : uni.getStorageSync('channelId'),
|
||||
siteInfo : {},
|
||||
userInfo : uni.getStorageSync('loginUser'),
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getSiteInfo()
|
||||
this.oilSiteName = uni.getStorageSync('oilSiteName')
|
||||
|
||||
// this.getDesignatedQr/()
|
||||
console.log('oilDate', this.oilDate)
|
||||
},
|
||||
methods: {
|
||||
// 刷新
|
||||
refreashQr() {
|
||||
console.log('刷新函数')
|
||||
if (this.showData.vol) {
|
||||
this.getDesignatedQr(this.showData)
|
||||
} else {
|
||||
this.getDefaultQr()
|
||||
}
|
||||
},
|
||||
getSiteInfo() {
|
||||
OliSiteApi.getSiteDetail(this.channelId).then(res => {
|
||||
console.log('这里是获取油站信息处', res)
|
||||
if (res.code === 20000) {
|
||||
this.siteInfo = res.data.site
|
||||
this.oilList = res.data.oil
|
||||
uni.setStorageSync('oilSite',res.data.site)
|
||||
this.getDefaultQr()
|
||||
}
|
||||
})
|
||||
},
|
||||
getDefaultQr() {
|
||||
let data = {
|
||||
channelId:this.channelId,
|
||||
siteName:this.siteInfo.siteName,
|
||||
staffId:this.userInfo.id
|
||||
}
|
||||
OliSiteApi.getOilSiteCollectQrCode(data).then(res => {
|
||||
console.log( '这里是返回二维码的地方',res)
|
||||
if (res.code === 20000) {
|
||||
this.val = res.data.codeStr
|
||||
}
|
||||
})
|
||||
},
|
||||
getDesignatedQr(data) {
|
||||
const data6 = {
|
||||
...this.oilDate,
|
||||
...data
|
||||
}
|
||||
console.log(data)
|
||||
this.showData = data.refuelDetail
|
||||
OliSiteApi.getOilSiteCollectQrCode(data6).then(res => {
|
||||
if (res.code === 20000) {
|
||||
console.log(res)
|
||||
this.val = res.data.codeStr
|
||||
this.hideModal()
|
||||
}
|
||||
})
|
||||
},
|
||||
hideModal() {
|
||||
console.log('关闭呀')
|
||||
this.modalName = ''
|
||||
},
|
||||
qrR() {
|
||||
console.log('5555')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-content {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.qr-img {
|
||||
width: 400upx;
|
||||
height: 400rpx;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
BIN
packageQr/static/img/new_logo.png
Normal file
BIN
packageQr/static/img/new_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
packageQr/static/img/qr-icon.png
Normal file
BIN
packageQr/static/img/qr-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Reference in New Issue
Block a user