<template>
<view class="box">
<homenav :iStatusBarHeight="iStatusBarHeight" :title="'历史消费'" ></homenav>
<view class="screenBox">
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
<view style="height: 44px;"></view>
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="screenName"> <span>车牌号：{{array[index]}}</span>
<image src="../../static/timg/icon_arrow_right.png" mode="" class="jtImg"></image>
</view>
</picker>
</view>
<view style="height: 90rpx;"></view>
<view class="itemHistory" v-for="(item,index) in itemData" :key="index" @click="goDetail(item)">
<view class="topBox">
<view class="dan">{{item.code}}</view>
<!-- SheetType单据类型(1维修单 2销售单3洗车单4销售退货) -->
<view class="stateBox" v-if="item.SheetType == 1">
<!-- 0待施工（已保存）1施工中（已派工）2已完工 3已质检 4 已作废 -->
<view class="danState" :class="{danState2:item.PayState == 2,danState3:item.PayState == 0}" v-if="item.SheetState == 0">待施工</view>
<view class="danState" :class="{danState2:item.PayState == 2,danState3:item.PayState == 0}" v-if="item.SheetState == 1">施工中</view>
<view class="danState" :class="{danState2:item.PayState == 2,danState3:item.PayState == 0}" v-if="item.SheetState == 2">已完工</view>
<view class="danState" :class="{danState2:item.PayState == 2,danState3:item.PayState == 0}" v-if="item.SheetState == 3">已质检</view>
<view class="danState" v-if="item.SheetState == 4">已作废</view>
<!-- 结算状态 -->
<view v-if="item.SheetState == 4">
<view class="danState" v-if="item.PayState == 0">/未结算</view>
<view class="danState" v-if="item.PayState == 2">/已结算</view>
</view>
<view v-else>
<view class="danState3" v-if="item.PayState == 0">/未结算</view>
<view class="danState2" v-if="item.PayState == 2">/已结算</view>
</view>
</view>
<view class="stateBox" v-if="item.SheetType == 2">
<!-- 0待施工（已保存）1施工中（已派工）2已审核 3已质检 4 已作废 -->
<view class="danState" :class="{danState3:item.PayState == 2}" v-if="item.SheetState < 2 ">未审核</view>
<view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 2">已审核</view>
<view class="danState" v-if="item.SheetState == 4">已作废</view>
<!-- 结算状态 -->
<view v-if="item.SheetState == 4">
<view class="danState" v-if="item.PayState == 0">/未结算</view>
<view class="danState" v-if="item.PayState == 2">/已结算</view>
</view>
<view v-else>
<view class="danState3" v-if="item.PayState == 0">/未结算</view>
<view class="danState2" v-if="item.PayState == 2">/已结算</view>
</view>
</view>
<view class="stateBox" v-if="item.SheetType == 3">
<!-- 0待施工（已保存）1施工中（已派工）2已完工 3已质检 4 已作废 -->
<view class="danState" :class="{danState2:item.PayState == 2}" v-if="item.SheetState == 0">已保存</view>
<view class="danState" v-if="item.SheetState == 4">已作废</view>
<!-- 结算状态 -->
<view v-if="item.SheetState == 4">
<view class="danState" v-if="item.PayState == 0">/未结算</view>
<view class="danState" v-if="item.PayState == 2">/已结算</view>
</view>
<view v-else>
<view class="danState" v-if="item.PayState == 0">/未结算</view>
<view class="danState2" v-if="item.PayState == 2">/已结算</view>
</view>
</view>
</view>
<view class="carPlate">
<view class="plateBox">
<view class="plate">{{item.PlateNumber}}</view>
<view class="mileage" v-if="item.CurrentMileage>0">{{item.CurrentMileage}}km</view>
</view>
<view v-if="ReceiptsMoney" class="price"><span style="font-size: 22rpx;">￥</span>{{item.money?item.money:0}}</view>
</view>
<view class="time">{{item.time}}</view>
<view class="shopName">{{item.ShopName}}</view>
<!-- <view class="itemN" v-if="item.listItems.length != 0">
<view class="itemContent" v-if="item.listItems.length != 0" v-for="(v,i) in item.listItems">{{v.ItemName}},</view>
</view>
<view class="itemN" v-if="item.listParts.length != 0">
<view class="itemContent" v-if="item.listParts.length != 0" v-for="(v,i) in item.listParts">{{v.GoodsName}},</view>
</view> -->
<view class="itemN" v-if="item.ItemName">
<view class="itemContent" >{{item.ItemName}}</view>
</view>
<view class="itemN" v-if="item.GoodsName">
<view class="itemContent" >{{item.GoodsName}}</view>
</view>
<view v-if="((item.PayState == 2) && (appraise == true) && ((item.lastDay <= 30 && item.EvaluateState == 0) || item.EvaluateState == 1))" class="bottom">
<view v-if="(item.EvaluateState == 0) && (item.lastDay <= 30) && appraise == true && item.PayState == 2" @click.stop="goAppraise(item)" class="ping">评价</view>
<view v-if="item.EvaluateState == 1" @click.stop="goAppraiseDetail(item)" class="kan">查看评价</view>
</view>
</view>
<view class="itemHistory" v-for="(item,index) in oldlist" :key="index" @click="goDetail2(item)">
<view class="topBox">
<view class="dan">{{item.Code}}</view>
<!-- SheetType单据类型(1维修单 2销售单3洗车单4销售退货) -->
<view class="stateBox" >
<view class="danState2">{{item.CheckoutState?item.CheckoutState:''}}</view>
</view>
</view>
<view class="carPlate">
<view class="plateBox">
<view class="plate">{{item.PlateNumber}}</view>
<view class="mileage" v-if="item.CurrentMileage>0">{{item.CurrentMileage}}km</view>
</view>
<view v-if="ReceiptsMoney&&item.CheckoutMoney" class="price"><span style="font-size: 22rpx;">￥</span>{{item.CheckoutMoney}}</view>
</view>
<view class="time">{{item.time}}</view>
<view class="shopName">{{item.ShopName}}</view>
<view class="itemN" v-if="item.ItemName">
<view class="itemContent" >{{item.ItemName}}</view>
</view>
<view class="itemN" v-if="item.GoodsName">
<view class="itemContent" >{{item.GoodsName}}</view>
</view>
</view>
<!-- 上拉 加载更多 -->
<view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view>
<!-- 无数据空白页 -->
<nodata v-if="itemData.length==0&&oldlist.length==0"></nodata>
<!-- 手机号授权 -->
<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
<view class="authorizCont" @click.stop="">
<view class="authorizName">{{wxOpenData.miniAppName}}</view>
<view class="authorizMs">未注册的手机号登录后将自动创建会员账号，如果您不同意授权获取手机号，会影响您使用我们的产品和服务。</view>
<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
</view>
<view style="text-align: center;padding-top: 56rpx;">
<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
</view>
</view>
</view>
</template>
<script>
import nodata from '../../components/nodata/nodata.vue'
import homenav from "../../components/homenav/nav.vue"
export default {
components: {
nodata,homenav
},
data() {
return {
page: 1,
itemData: [],
oldlist:[],
noMoreShow: false,
appraise:false,
ReceiptsMoney:false,//支付金额
iStatusBarHeight:'',
array: [],
index: 0,
wxOpenData: '',
plateNumber:'',
ext:'',
authorizShow:false,
userInfo: '',
code:'',
}
},
onLoad() {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
this.page = 1
this.userInfo=this.$store.state.userInfo;
this.ext=this.$common.getExtStoreId();
if(this.userInfo){
this.myOrderCoupon()
this.myPower()
this.showPower()
this.getplateNumber()
}else{
this.$common.automaticlogin().then(val => {
this.userInfo=this.$store.state.userInfo;
this.wxOpenData=this.$store.state.wxOpenData;
if(!this.userInfo){
this.authorizShow=true
}else{
this.myOrderCoupon()
this.myPower()
this.showPower()
this.getplateNumber()
}
})
}
},
methods: {
decryptPhoneNumber: function(e) {
console.log(e);
this.code=e.detail.code
this.wxPhoneLogin()
this.authorizShow=false;
},
wxPhoneLogin(){
var that=this;
this.$http('miniApp2/sys/wxPhoneLogin', {
appId:this.ext.appId,
unionId:this.ext.unionId,
code:this.code,
openId:this.wxOpenData.openid
},'POST').then(res => {
var data = res.data;
if(data.loginInfo){
this.userInfo=data.loginInfo.openUser;
this.wxOpenData=data.loginInfo;
this.$store.commit('mutationswxOpenData', data)
this.$store.commit('mutationsuserInfo', this.userInfo)
this.myOrderCoupon()
this.myPower()
this.showPower()
this.getplateNumber()
}
})
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail)
this.index = e.detail.value
this.plateNumber=this.array[this.index]
if(this.index==0){
this.plateNumber=''
}
this.myOrderCoupon()
},
getplateNumber(){
console.log("444")
this.wxOpenData= this.$store.state.wxOpenData;
this.$http('openweiXinCardInfoController/plateNumber-by-customerId', {
customerId:this.wxOpenData.loginInfo.uid
}, 'GET').then(res => {
this.array=res.data.split(',')
this.array.unshift('全部')
})
},
//显示权限
showPower() {
this.$http('openweiXinCardInfoController/getShowSetting', {
}, 'GET').then(res => {
var list = res.data
list.forEach((item, index) => {
if (item.fieldValue == 'ReceiptsMoney') {
this.ReceiptsMoney = item.isChecked
}
})
})
},
//评价权限
myPower() {
this.$http('openMiniEvaluate/getEvaluateSetting', {
}, 'GET').then(res => {
// var list = res.data.Items
this.appraise = res.data
})
},
goAppraiseDetail(item) {
uni.navigateTo({
url: 'myAppraiseDetail?sheetId=' + item.id
})
},
goAppraise(item){
uni.navigateTo({
url: 'appraise?sheetID=' + item.id + '&shopID=' + item.shopID
})
},
goDetail(item) {
uni.navigateTo({
url: 'historyDetail?id=' + item.id + '&lastDay=' + item.lastDay
})
},
goDetail2(item){
uni.navigateTo({
url: '../subPack/oldhistoryDetail?id=' + item.id + '&lastDay=' + item.lastDay
})
},
myOrderCoupon() {
let that = this
uni.showLoading({
title: '加载中'
})
/* this.$http('openweiXinCardInfoController/queryConsumptionList', {
plateNumber:this.plateNumber
// page: this.page,
// limit: 10,
}, 'POST').then(res => {
uni.hideLoading();
// var list = res.data.Items
var list = res.data
if (this.page == 1) {
this.itemData = list
} else {
this.itemData = this.itemData.concat(list)
}
if (list.length < 10) {
this.noMoreShow = true
} else {
this.noMoreShow = false
}
}) */
this.$http('openweiXinCardInfoController/queryConsumptionListV2', {
plateNumber:this.plateNumber
// page: this.page,
// limit: 10,
}, 'POST').then(res => {
uni.hideLoading();
var list = res.data.list
this.oldlist=res.data.oldlist
this.itemData = list
if (list.length < 10) {
this.noMoreShow = true
} else {
this.noMoreShow = false
}
})
},
//时间对比
getDateBeforeNow(stringTime) {
console.log("传参未格式化", stringTime);
stringTime = new Date(stringTime.replace(/-/g, '/'))
// 统一单位换算
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var week = day * 7;
var month = day * 30;
var year = month * 12;
var time1 = new Date().getTime(); //当前的时间戳
console.log("当前时间", time1);
// 对时间进行毫秒单位转换
var time2 = new Date(stringTime).getTime(); //指定时间的时间戳
console.log("传过来的时间", time2);
var time = time1 - time2;
console.log("计算后的时间", time);
var result = null;
// if (time < 0) {
// // alert("传过来的时间的时间不能晚于当前时间！");
// result = stringTime;
// } else if (time / year >= 1) {
// result = parseInt(time / year) + "年前";
// } else if (time / month >= 1) {
// result = parseInt(time / month) + "月前";
// } else if (time / week >= 1) {
// result = parseInt(time / week) + "周前";
// } else if (time / day >= 1) {
// result = parseInt(time / day) + "天前";
// } else if (time / hour >= 1) {
// result = parseInt(time / hour) + "小时前";
// } else if (time / minute >= 1) {
// result = parseInt(time / minute) + "分钟前";
// } else {
// result = "刚刚";
// }
if (time < 0) {
// alert("传过来的时间的时间不能晚于当前时间！");
result = -1;
} else if (time / day >= 0) {
result = parseInt(time / day);//多少天前
}
console.log("多少天前", result);
return result;
},
},
// 下拉刷新
onPullDownRefresh() {
this.page = 1
this.myOrderCoupon()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
// 上拉加载更多
onReachBottom() {
// this.page++;
this.myOrderCoupon()
},
}
</script>
<style scoped>
.box {
min-height: 100vh;
background-color: #F4F5F7;
padding-top: 20rpx;
}
.jtImg{
width: 12rpx;height: 20rpx;
margin-top: 10rpx;
}
.screenBox{
background: #FFFFFF;
margin-bottom: 20rpx;
position: fixed;
width: 100vw;
top: 0;left: 0;
}
.screenName{
padding: 24rpx;font-size: 28rpx;
display: flex;
justify-content: space-between;
}
.itemHistory {
margin: 0rpx 24rpx 20rpx;
padding: 20rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
}
.topBox{
display: flex;
justify-content: space-between;
align-items: center;
}
.dan {
font-size: 24rpx;
color: #999999;
}
.stateBox{
display: flex;
}
.danState{
font-size: 24rpx;
color: #999999;
}
.danState2{
font-size: 24rpx;
color: #00A040;
}
.danState3{
font-size: 24rpx;
color: #FF4F00;
}
.time {
font-size: 24rpx;
color: #999999;
}
.carPlate {
margin: 20rpx 0rpx 15rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.plateBox {
display: flex;
}
.plate {
font-size: 30rpx;
color: #3C3C3C;
font-weight: bold;
margin-right: 20rpx;
}
.mileage {
font-size: 24rpx;
color: #F19D01;
padding: 0rpx 10rpx;
border: 1px solid #F19D01;
border-radius: 4rpx;
height: 33rpx;
}
.price{
font-size: 32rpx;
font-weight: 500;
color: #EC0F0A;
}
.itemN {
margin-top: 15rpx;
display: flex;
/* 隐藏文字显示 ...不换行 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shopName{
color: #666666;
font-size: 24rpx;
margin-top: 15rpx;
/* 隐藏文字显示 ...不换行 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.itemContent {
color: #666666;
font-size: 24rpx;
}
.bottom{
padding-top: 20rpx;
border-top: 1rpx solid #EEEEEE;
margin-top: 20rpx;
display: flex;
justify-content: flex-end;
font-size: 28rpx;
margin-left: -24rpx;
margin-right: -24rpx;
}
.ping{
text-align: center;
color: #666666;
width: 150rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 36rpx;
border: 2rpx solid #DDDDDD;
margin-right: 24rpx;
}
.kan{
text-align: center;
color: #666666;
width: 150rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 36rpx;
border: 2rpx solid #DDDDDD;
margin-right: 24rpx;
}
.noMore {
text-align: center;
line-height: 50rpx;
color: #999999;
font-size: 28rpx;
}
.authorizBox{
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
.authorizCont{
margin-top: 30vh;
width: 564rpx;
height: 408rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-left: 93rpx;
position: relative;
}
.authorizCloseImg{
width: 62rpx;
height: 62rpx;
}
.sqLogoBox{
width: 180rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 90rpx;
text-align: center;
position: absolute;
top: -50rpx;
left: 192rpx;
}
.authorizName{
color: #333333;
line-height: 42rpx;
font-size: 30rpx;
text-align: center;
padding-top: 58rpx;
}
.authorizMs{
color: #999999;
line-height: 36rpx;
font-size: 26rpx;
width: 452rpx;
padding-top: 24rpx;
text-align: center;
margin-left: 56rpx;
}
.authorizContbutton{
width: 422rpx;
height: 88rpx;
background: #EC0F0A;
border-radius: 44rpx;
line-height: 88rpx;
text-align: center;
font-size:30rpx;
color: #FFFFFF;
margin-top: 62rpx;
margin-left:71rpx;
}
</style>