已对接6个接口
准备回复订单详情页面
This commit is contained in:
xk_guohonglei
127
components/OrderOil.vue
Normal file
127
components/OrderOil.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="content text-left padding">
|
||||
<view class="strong padding-bottom-xs color-333 ">
|
||||
{{'oilSiteName'}}
|
||||
</view>
|
||||
<view class="font-12 color-999">
|
||||
<text class="padding-right">1.32km</text> | <text class="padding-left text-cut">紫云路与金寨南路交口向西200...</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 ColorList" :key="index">
|
||||
<button class="cu-btn" :class="[active===index?'bg-main-oil':'line-gray']">92#</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-top-xs padding-left padding-right">
|
||||
<text class="strong padding-right font-16">
|
||||
0#柴油
|
||||
</text>
|
||||
<text class="padding-right">星油价格:<text class="oil-main-color text-bold">￥6.41/L</text></text>
|
||||
<text class="s-rich">市场价:￥6.5/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 class="cu-btn" :class="[active===index?'bg-main-oil':'line-gray']">{{index}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="solid-top margin-top-sm shadow-warp">
|
||||
<view class="cu-form-group">
|
||||
<view class="title">加油升数</view>
|
||||
<input type="number" placeholder="请输入加油升数" name="input"></input>
|
||||
<text>约￥0.00</text>
|
||||
</view>
|
||||
<view class="my-cell">
|
||||
<text class="font-12">星卡优惠金额</text><text class="fr">-￥0.00</text>
|
||||
</view>
|
||||
<view class="my-cell">
|
||||
<text class="font-12">实际支付金额</text><text class="oil-main-color fr">￥0.00</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="margin round bg-main-oil">确定</button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
ColorList: [1, 2, 9, 10]
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -1,25 +1,27 @@
|
||||
<template>
|
||||
<view class="flex price-list">
|
||||
<view class="flex-sub">
|
||||
<view class="basis-xs">
|
||||
</view>
|
||||
<view class="solid-right basis-xs" v-for="(item,index) in price" :key="index">
|
||||
<view class="text-center">
|
||||
|
||||
</view>
|
||||
<view class="flex-treble text-center solid-right">
|
||||
<view class="strong font-16 oil-main-color">
|
||||
￥5.81
|
||||
</view>
|
||||
<view class="radius text-center oil-card-price main-color-border">
|
||||
<text class="oil-free">
|
||||
省
|
||||
</text>
|
||||
<text class="free-money">
|
||||
七毛
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
星油油价
|
||||
<view class="strong font-16 oil-main-color">
|
||||
￥{{item.price|numberFliter}}
|
||||
</view>
|
||||
<view class="radius text-center oil-card-price main-color-border">
|
||||
<text class="oil-free">
|
||||
省
|
||||
</text>
|
||||
<text class="free-money">
|
||||
{{item.free|numberFliter}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
星油油价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-treble text-center solid-right">
|
||||
<!-- <view class="flex-treble text-center solid-right">
|
||||
<view class="strong font-16 color-wjy">
|
||||
￥5.81
|
||||
</view>
|
||||
@@ -50,18 +52,34 @@
|
||||
<view class="">
|
||||
老吕油价
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PriceList',
|
||||
props: {
|
||||
price: {
|
||||
type: Array,
|
||||
default () {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLast: true
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numberFliter(value) {
|
||||
value = value - 1 + 1
|
||||
if (value) {
|
||||
return value.toFixed(2)
|
||||
} else {
|
||||
return '0.00'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<view class="radius padding-xs padding-bottom padding-top margin-top bg-white shadow solid-bottom">
|
||||
<view class="item-title ">
|
||||
<text class="margin color-000 text-bold">92#油</text>
|
||||
<text class="fr padding-right text-sm text-grey">2020-8-18</text>
|
||||
<PriceList />
|
||||
<text class="margin color-000 text-bold">{{oilItem.oilName}}</text>
|
||||
<text class="fr padding-right text-sm text-grey">市场价：￥{{ oilItem.standardPrice|numberFliter}}</text>
|
||||
<PriceList :price="price" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -14,10 +14,65 @@
|
||||
components: {
|
||||
PriceList
|
||||
},
|
||||
props: {
|
||||
oilItem: {
|
||||
type: Object,
|
||||
default () {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
price: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('之心')
|
||||
this.calcPrice()
|
||||
},
|
||||
filters: {
|
||||
numberFliter(value) {
|
||||
value = value-1+1
|
||||
if(value){
|
||||
return value.toFixed(2)
|
||||
}else{
|
||||
return '0.00'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcPrice() {
|
||||
if (this.oilItem.xkPrice) {
|
||||
this.price.push({
|
||||
price: this.oilItem.xkPrice,
|
||||
color: '#ff0000',
|
||||
name: '星油油价',
|
||||
className1: 'red',
|
||||
className2: 'btn-red',
|
||||
free: this.oilItem.standardPrice - this.oilItem.xkPrice
|
||||
})
|
||||
}
|
||||
if (this.oilItem.wjyPrice) {
|
||||
this.price.push({
|
||||
price: this.oilItem.wjyPrice,
|
||||
color: '#f7b400',
|
||||
name: '万金油价',
|
||||
className1: 'yellow',
|
||||
className2: 'btn-yellow',
|
||||
free: this.oilItem.standardPrice - this.oilItem.wjyPrice
|
||||
})
|
||||
}
|
||||
if (this.oilItem.lvPrice) {
|
||||
this.price.push({
|
||||
price: this.oilItem.lvPrice,
|
||||
color: '#ff5200',
|
||||
name: '老吕油价',
|
||||
className1: 'laolv',
|
||||
className2: 'btn-laolv',
|
||||
free: this.oilItem.standardPrice - this.oilItem.lvPrice
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
1201
components/tki-qrcode/qrcode.js
Normal file
1201
components/tki-qrcode/qrcode.js
Normal file
File diff suppressed because it is too large
Load Diff
210
components/tki-qrcode/tki-qrcode.vue
Normal file
210
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>
|
||||
Reference in New Issue
Block a user