在搞加密解密
This commit is contained in:
xk_guohonglei
207
pages/orderList/OrderDetail/OrderDetail.vue
Normal file
207
pages/orderList/OrderDetail/OrderDetail.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<view class="page-content my-bg">
|
||||
<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="padding margin">
|
||||
|
||||
</view>
|
||||
<view class="text-center margin-top icon-container">
|
||||
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===3" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view>
|
||||
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===4||orderItem.sourceType===6" :style="'background-image:url('+baseURL+'static/img/order-xy.png)'"></view>
|
||||
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===5" :style="'background-image:url('+baseURL+'static/img/order-lv.png)'"></view>
|
||||
</view>
|
||||
<view class="radius margin margin-top bg-white padding-top padding">
|
||||
<!-- sourceType 万金油3 老吕5 星油4/6 -->
|
||||
<!-- <image size="20" v-if="orderItem.sourceType===4||orderItem.sourceType===6" :src="baseURL+'static/img/order-xy.png'"></image>
|
||||
<image size="20" v-else-if="orderItem.sourceType===3" :src="baseURL+'static/img/order-wjy.png'"></image>
|
||||
<image size="20" v-else-if="orderItem.sourceType===5" :src="baseURL+'static/img/order-lv.png'"></image> -->
|
||||
<view class="margin padding">
|
||||
<view class="text-lg text-center">{{orderItem.istate|formatStr}}</view>
|
||||
<view class="number text-xl text-center oil-main-color">￥{{orderItem.realamount|numberFormat}}</view>
|
||||
</view>
|
||||
<view class="margin-bottom-sm" @tap="copyId(orderItem.orderID,'加油司机编号')">
|
||||
加油司机编号
|
||||
<text class="fr">{{orderItem.driverID}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
|
||||
</text></text>
|
||||
</view>
|
||||
|
||||
<view class="margin-bottom-sm" @tap="copyId(orderItem.orderID,'司机车牌')">
|
||||
司机车牌
|
||||
<text class="fr">{{orderItem.carNo}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
|
||||
</text></text>
|
||||
</view>
|
||||
|
||||
<view class="margin-bottom-sm">
|
||||
油枪油号
|
||||
<text class="fr">{{orderItem.bar}}号枪{{orderItem.oilName}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
加油总金额
|
||||
<text class="fr">¥ {{orderItem.amount|numberFormat}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
加油升数
|
||||
<text class="fr">{{orderItem.vol|numberFormat}} 升</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
星卡优惠
|
||||
<text class="fr">¥ {{orderItem.amount-orderItem.realamount|numberFormat}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
优惠券
|
||||
<text class="fr">{{orderItem.coupon|couponFormat}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
实扣款
|
||||
<text class="fr oil-main-color">¥ {{orderItem.realamount|numberFormat}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="radius bg-white margin padding ">
|
||||
|
||||
<view class="flex padding-bottom-sm">
|
||||
|
||||
<view class="basis-sm">
|
||||
加油站名称
|
||||
</view>
|
||||
<view class="basis-lg text-right text-cut">{{orderItem.oilSiteName}}</view>
|
||||
</view>
|
||||
<view class="flex padding-bottom-sm">
|
||||
|
||||
<view class="basis-xs">
|
||||
地址
|
||||
</view>
|
||||
<view class="basis-xl text-right text-cut">{{orderItem.address}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="radius bg-white margin margin-bottom-0 padding">
|
||||
<view class="margin-bottom-sm" @tap="copyId(orderItem.orderID,'订单号')">
|
||||
订单号
|
||||
<text class=" fr">{{orderItem.orderID}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
|
||||
</text></text>
|
||||
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
下单时间
|
||||
<text class="fr">{{orderItem.createDatetime}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
扣款时间
|
||||
<text class="fr">{{orderItem.paydatetime}}</text>
|
||||
</view>
|
||||
<view class="padding-bottom-sm">
|
||||
开票状态
|
||||
<text class="fr">{{orderItem.invoiceState|invoiceStateFormat}}</text>
|
||||
</view>
|
||||
<!-- <view class="margin-bottom-sm" v-if="orderItem.paydatetime">
|
||||
支付时间
|
||||
<text class="fr">{{orderItem.paydatetime}}</text>
|
||||
</view>-->
|
||||
</view>
|
||||
<view class="padding">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import cloudSiteApi from '@/api/cloud-site.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// orderId:'',
|
||||
orderId: uni.getStorageSync('orderId'),
|
||||
orderItem: {},
|
||||
baseURL: this.global.baseURL
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOrderDetail()
|
||||
},
|
||||
methods: {
|
||||
copyId(id, name) {
|
||||
uni.setClipboardData({
|
||||
data: id,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: name + '已复制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getOrderDetail() {
|
||||
cloudSiteApi.getSiteOrderById(this.orderId).then(res => {
|
||||
if (res.code === 20000) {
|
||||
this.orderItem = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatStr(value) {
|
||||
switch (parseInt(value)) {
|
||||
case 1:
|
||||
return '订单已支付'
|
||||
case -1:
|
||||
return '订单支付失败'
|
||||
case 3:
|
||||
return '订单已支付'
|
||||
case 4:
|
||||
return '订单支付失败'
|
||||
case 0:
|
||||
return '订单待支付'
|
||||
default:
|
||||
return '订单待支付'
|
||||
}
|
||||
},
|
||||
couponFormat(value) {
|
||||
if (value) {
|
||||
return value
|
||||
} else {
|
||||
return '未使用'
|
||||
}
|
||||
},
|
||||
numberFormat(value) {
|
||||
if (value) {
|
||||
return value.toFixed(2)
|
||||
}
|
||||
},
|
||||
invoiceStateFormat(value) {
|
||||
switch (parseInt(value)) {
|
||||
case 1:
|
||||
return '已申请'
|
||||
case 2:
|
||||
return '已开票'
|
||||
case -1:
|
||||
return '开票失败'
|
||||
case 0:
|
||||
return '未开票'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 去付款弹窗 */
|
||||
.popup-container p.title {
|
||||
padding: 16px 10px;
|
||||
}
|
||||
|
||||
text.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-container .text-sl {
|
||||
position: absolute;
|
||||
margin-left: -64rpx;
|
||||
margin-top: -64rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,126 +1,211 @@
|
||||
<template>
|
||||
<view class="content my-bg">
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">加油记录</block>
|
||||
</cu-custom>
|
||||
<scroll-view scroll-x class="bg-white nav">
|
||||
<view class="flex text-center">
|
||||
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabList" :key="index"
|
||||
@tap="tabSelect" :data-id="index">{{item}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="padding padding-bottom-0">
|
||||
<view v-show="TabCur==0" class="order-list">
|
||||
<view v-for="item in allOrder" :key="item.orderID">
|
||||
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="TabCur==1" class="order-list">
|
||||
<view v-for="item in payingOrder" :key="item.orderID">
|
||||
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="TabCur==2" class="order-list">
|
||||
<view v-for="item in finishedOrder" :key="item.orderID">
|
||||
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content my-bg">
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">加油记录</block>
|
||||
</cu-custom>
|
||||
<scroll-view scroll-x class="bg-white nav">
|
||||
<view class="flex text-center">
|
||||
<view
|
||||
class="cu-item flex-sub"
|
||||
:class="index==TabCur?'text-orange cur':''"
|
||||
v-for="(item,index) in tabList"
|
||||
:key="index"
|
||||
@tap="tabSelect"
|
||||
:data-id="index"
|
||||
>{{item}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="padding padding-bottom-0">
|
||||
<view v-show="TabCur==0" class="order-list">
|
||||
<view v-for="item in allOrder" v-if="allOrder.length" :key="item.orderID">
|
||||
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
|
||||
</view>
|
||||
<view v-if="allOrder.length<1">
|
||||
<Empty />
|
||||
</view>
|
||||
<view v-show="load.isLoadMore1">
|
||||
<uni-load-more :status="load.loadStatus1"></uni-load-more>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="TabCur==1" class="order-list">
|
||||
<view v-for="item in payingOrder" v-if="payingOrder.length" :key="item.orderID">
|
||||
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
|
||||
</view>
|
||||
<view v-if="payingOrder.length<1">
|
||||
<Empty />
|
||||
</view>
|
||||
<view v-show="load.isLoadMore2">
|
||||
<uni-load-more :status="load.loadStatus2"></uni-load-more>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="TabCur==2" class="order-list">
|
||||
<view v-for="item in finishedOrder" v-if="finishedOrder.length" :key="item.orderID">
|
||||
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
|
||||
</view>
|
||||
<view v-if="finishedOrder.length<1">
|
||||
<Empty />
|
||||
</view>
|
||||
<view v-show="load.isLoadMore3">
|
||||
<uni-load-more :status="loadStatus3"></uni-load-more>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cloudSiteApi from '@/api/cloud-site.js'
|
||||
import OrderItem from '@/components/order-item'
|
||||
export default {
|
||||
components: {
|
||||
OrderItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
'全部', '待支付', '已支付'
|
||||
],
|
||||
TabCur: 0,
|
||||
pageNumber: 1,
|
||||
istate: -3,
|
||||
scrollLeft: 0,
|
||||
order: {
|
||||
istate: 0,
|
||||
vol: 3,
|
||||
oilName: '0#',
|
||||
orderID: '15979997825872',
|
||||
oilCode: '12396989',
|
||||
oilSiteName: '疯疯疯加油站',
|
||||
carNo: '皖A12354',
|
||||
sourceType: 3,
|
||||
realamount: 4.66,
|
||||
credateDatetime: '2020-10-12 12:30:10'
|
||||
},
|
||||
allOrder: [],
|
||||
finishedOrder: [],
|
||||
payingOrder: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.calcIstate(this.TabCur)
|
||||
},
|
||||
methods: {
|
||||
tabSelect(e) {
|
||||
this.TabCur = e.currentTarget.dataset.id;
|
||||
this.calcIstate(this.TabCur)
|
||||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||||
},
|
||||
|
||||
calcIstate(id) {
|
||||
import cloudSiteApi from '@/api/cloud-site.js'
|
||||
import OrderItem from '@/components/order-item'
|
||||
import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
|
||||
import Empty from '@/components/Empty'
|
||||
export default {
|
||||
components: {
|
||||
OrderItem,
|
||||
Empty,
|
||||
UniLoadMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
'全部', '待支付', '已支付'
|
||||
],
|
||||
TabCur: 0,
|
||||
pageNumber: 1,
|
||||
istate: -3,
|
||||
scrollLeft: 0,
|
||||
order: {
|
||||
istate: 0,
|
||||
vol: 3,
|
||||
oilName: '0#',
|
||||
orderID: '15979997825872',
|
||||
oilCode: '12396989',
|
||||
oilSiteName: '疯疯疯加油站',
|
||||
carNo: '皖A12354',
|
||||
sourceType: 3,
|
||||
realamount: 4.66,
|
||||
credateDatetime: '2020-10-12 12:30:10'
|
||||
},
|
||||
allOrder: [],
|
||||
finishedOrder: [],
|
||||
payingOrder: [],
|
||||
loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
||||
isLoadMore: false, //是否加载中
|
||||
pageNumber1: 1,
|
||||
pageNumber2: 1,
|
||||
pageNumber3: 1,
|
||||
load: {
|
||||
isLoadMore1: false,
|
||||
loadStatus1: 'loading',
|
||||
isLoadMore2: false,
|
||||
loadStatus2: 'loading',
|
||||
isLoadMore3: false,
|
||||
loadStatus3: 'loading',
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadList(-3, this.pageNumber1)
|
||||
this.loadList(0, this.pageNumber2)
|
||||
this.loadList(1, this.pageNumber3)
|
||||
},
|
||||
|
||||
switch (id) {
|
||||
case 0:
|
||||
this.istate = -3
|
||||
this.loadList()
|
||||
break
|
||||
case 1:
|
||||
this.istate = 0
|
||||
this.loadList()
|
||||
break
|
||||
case 2:
|
||||
this.istate = 1
|
||||
this.loadList()
|
||||
break
|
||||
}
|
||||
},
|
||||
loadList() {
|
||||
const data2 = {
|
||||
istate: this.istate, //类型：Number 必有字段 备注：订单状态 0待支付 1支付成功 -3 查所有
|
||||
pageIndex: this.pageNumber //类型：Number 必有字段 备注：查询第几页,默认一页10条
|
||||
}
|
||||
cloudSiteApi.getSiteOrder(data2).then(res => {
|
||||
if (res.code === 20000) {
|
||||
switch (this.istate) {
|
||||
case 0:
|
||||
this.payingOrder = res.data
|
||||
break
|
||||
case 1:
|
||||
this.finishedOrder = res.data
|
||||
break
|
||||
case -3:
|
||||
this.allOrder = res.data
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
onReachBottom() { //上拉触底函数
|
||||
if (this.TabCur === 0) {
|
||||
if (!this.load.isLoadMore1) { //此处判断，上锁，防止重复请求
|
||||
this.load.isLoadMore1 = true
|
||||
this.calcIstate(this.TabCur)
|
||||
}
|
||||
}
|
||||
if (this.TabCur === 1) {
|
||||
if (!this.load.isLoadMore2) { //此处判断，上锁，防止重复请求
|
||||
this.load.isLoadMore2 = true
|
||||
this.calcIstate(this.TabCur)
|
||||
}
|
||||
}
|
||||
if (this.TabCur === 2) {
|
||||
if (!this.load.isLoadMore3) { //此处判断，上锁，防止重复请求
|
||||
this.load.isLoadMore3 = true
|
||||
this.calcIstate(this.TabCur)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabSelect(e) {
|
||||
this.TabCur = e.currentTarget.dataset.id;
|
||||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||||
},
|
||||
|
||||
calcIstate(id) {
|
||||
switch (id) {
|
||||
case 0:
|
||||
this.istate = -3
|
||||
this.loadList(this.istate, this.pageNumber1)
|
||||
break
|
||||
case 1:
|
||||
this.istate = 0
|
||||
this.loadList(this.istate, this.pageNumber2)
|
||||
break
|
||||
case 2:
|
||||
this.istate = 1
|
||||
this.loadList(this.istate, this.pageNumber3)
|
||||
break
|
||||
}
|
||||
},
|
||||
loadList(istate, pageNumber) {
|
||||
const data2 = {
|
||||
istate: istate, //类型：Number 必有字段 备注：订单状态 0待支付 1支付成功 -3 查所有
|
||||
pageIndex: pageNumber //类型：Number 必有字段 备注：查询第几页,默认一页10条
|
||||
}
|
||||
cloudSiteApi.getSiteOrder(data2).then(res => {
|
||||
console.log(data2.istate, data2.pageIndex)
|
||||
if (res.code === 20000) {
|
||||
switch (istate) {
|
||||
case -3:
|
||||
this.allOrder = this.allOrder.concat(res.data)
|
||||
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.load.isLoadMore1 = true
|
||||
this.load.loadStatus1 = 'nomore'
|
||||
} else {
|
||||
this.pageNumber1++
|
||||
this.load.isLoadMore1 = false
|
||||
}
|
||||
break
|
||||
case 0:
|
||||
this.payingOrder = this.payingOrder.concat(res.data)
|
||||
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.load.isLoadMore2 = true
|
||||
this.load.loadStatus2 = 'nomore'
|
||||
} else {
|
||||
this.pageNumber2++
|
||||
this.load.isLoadMore2 = false
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
this.finishedOrder = this.finishedOrder.concat(res.data)
|
||||
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.load.isLoadMore3 = true
|
||||
this.load.loadStatus3 = 'nomore'
|
||||
} else {
|
||||
this.pageNumber3++
|
||||
this.load.isLoadMore3 = false
|
||||
}
|
||||
break
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
min-height: 100%;
|
||||
}
|
||||
.content {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.order-list .order-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.order-list .order-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user