Ver código fonte

首页的三个详情页调试

master
[caserKing] 4 anos atrás
pai
commit
fd4e0d95dd
5 arquivos alterados com 486 adições e 4 exclusões
  1. +10
    -0
      src/routers/index.js
  2. +6
    -0
      src/services/apiUrl.js
  3. +1
    -1
      src/stores/index.js
  4. +11
    -3
      src/views/home/index.vue
  5. +458
    -0
      src/views/home/recordDetail.vue

+ 10
- 0
src/routers/index.js Ver arquivo

@@ -29,6 +29,7 @@ const PointRecord = () => import(/* webpackChunkName: "PointRecord" */ '@/views/
const MyTicket = () => import(/* webpackChunkName: "MyTicket" */ '@/views/person/myTicket.vue');
const UserInfo = () => import(/* webpackChunkName: "UserInfo" */ '@/views/person/userInfo.vue');
const Account = () => import(/* webpackChunkName: "Account" */ '@/views/person/account.vue');
const RecordDetail = () => import(/* webpackChunkName: "RecordDetail" */ '@/views/home/recordDetail.vue');

Vue.use(Router);

@@ -51,6 +52,15 @@ const routes = [
title: '首页'
}
},
{
path: '/recordDetail',
name: 'recordDetail',
component: RecordDetail,
meta: {
isShowNav: true,
title: '交易详情'
}
},
/* {
path: '/demo',
name: 'demo',


+ 6
- 0
src/services/apiUrl.js Ver arquivo

@@ -29,6 +29,12 @@ export const apiUrl = {
getUnverifiedAmountOnDate: '/api/couponOrder/getUnverifiedAmountOnDate',
//首页账单列表
listBillOweAndWaitPay:"/api/bill/listBillOweAndWaitPay",
//未核销的券包
couponOrderListUnVerified: '/api/couponOrder/listUnverified',
//交易记录list
couponOrderListVerified: '/api/couponOrder/listVerified',
//刷卡支付交易流水分页列表接口
micropayListMicroPay: '/api/micropay/listMicroPay',

loginOut: '/api/loginOut',



+ 1
- 1
src/stores/index.js Ver arquivo

@@ -11,7 +11,7 @@ Vue.use(Vuex)

export default new Vuex.Store({
state: {
token: '914e314e-81cb-4064-93f8-79b9ac5cc7d1',
token: '461675506000465920',
merchant_id:'',
merchant_id_scan:'',



+ 11
- 3
src/views/home/index.vue Ver arquivo

@@ -19,7 +19,7 @@
<!-- -->
<div class="line-item-box">
<!-- 111 -->
<div class="line-title clear">
<div class="line-title clear" @click="goToDetail(0)">
<p class="line-left">交易记录</p>
<img class="line-detail" src="../../assets/images/jian.png">
<p class="line-right">今日交易额: 0元</p>
@@ -33,7 +33,7 @@

<div class="line-item-box">
<!-- 222 -->
<div class="line-title clear">
<div class="line-title clear" @click="goToDetail(1)">
<p class="line-left">核销记录</p>
<img class="line-detail" src="../../assets/images/jian.png">
<p class="line-right">今日核销额: 0元</p>
@@ -47,7 +47,7 @@

<div class="line-item-box">
<!-- 333 -->
<div class="line-title clear">
<div class="line-title clear" @click="goToDetail(2)">
<p class="line-left">收银记录</p>
<img class="line-detail" src="../../assets/images/jian.png">
<p class="line-right">今日收银: 0元</p>
@@ -133,6 +133,14 @@ export default {
toWriteoff(path){
this.$router.push(path)
},
goToDetail (index) {
this.$router.push({
path: '/recordDetail',
query: {
index
}
})
},
listBillOweAndWaitPay(data) {
this.$http.listBillOweAndWaitPay({
method: 'post',


+ 458
- 0
src/views/home/recordDetail.vue Ver arquivo

@@ -0,0 +1,458 @@
<template>
<div class='page-home'>
<div class="back-box">
<van-icon class="back-icon" @click="goBack" size=".6rem" name="arrow-left" color="#fff" />
<span>{{titleStr}}</span>
</div>
<img src="../../assets/images/bg.png" class="top-circle-img">
<p class="top-circle-p" @click="showPicker()">{{dealTime(currentDate)}}</p>

<van-list
style="margin:2.4rem 0 1rem 0;height:calc(100vh - 4rem);overflow-y:auto;"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="loadMore"
>
<div class="item-record" v-if="pageType!=2" v-for="(item,index) in recordList" :key="index">
<div class="item-detail">
<div class="item-left">券状态</div>
<div class="item-right" style="color:#FFAE00;" v-if="item.couponOrderStatus==0">未核销</div>
<div class="item-right" style="color:#52A0FD;" v-if="item.couponOrderStatus==1">已核销</div>
<div class="item-right" style="color:#FF5700;" v-if="item.couponOrderStatus==2">已过期</div>
<div class="item-right" style="color:#FF5700;" v-if="item.couponOrderStatus==3">已退款</div>
</div>

<div class="item-detail">
<div class="item-left">券名称</div>
<div class="item-right">{{item.title}}</div>
</div>

<div class="item-detail">
<div class="item-left">券码</div>
<div class="item-right">{{item.id}}</div>
</div>

<div class="item-detail" v-if="pageType !=1">
<div class="item-left">购买时间</div>
<div class="item-right">{{dealTime02(item.createDate)}}</div>
</div>

<div class="item-detail" v-if="pageType !=2">
<div class="item-left">核销时间</div>
<div class="item-right">{{dealTime02(item.updateDate)}}</div>
</div>

<div class="item-detail">
<div class="item-left">购买用户</div>
<div class="item-right">{{item.cuserPhone}}</div>
</div>

<div class="item-detail" v-if="pageType ==1">
<div class="item-left">核销员</div>
<div class="item-right">{{item.buserName}}</div>
</div>

<div class="item-detail">
<div class="item-left">券面额</div>
<div class="item-right">{{item.price/100}}</div>
</div>

<div class="item-detail">
<div class="item-left">券售价</div>
<div class="item-right">{{item.couponPrice/100}}</div>
</div>
</div>
<!-- -->
<div class="item-record" v-if="pageType==2" v-for="(item,index) in recordList" :key="index">

<div class="item-detail">
<div class="item-left">订单编号</div>
<div class="item-right">{{item.id}}</div>
</div>

<div class="item-detail">
<div class="item-left">订单金额</div>
<div class="item-right">{{item.payment+'元'}}</div>
</div>

<div class="item-detail">
<div class="item-left">交易时间</div>
<div class="item-right">{{dealTime02(item.createDate)}}</div>
</div>

<div class="item-detail">
<div class="item-left">支付方式</div>
<!-- <div class="item-right">{{item.type}}</div> -->
<div class="item-right">微信</div>
</div>

<div class="item-detail">
<div class="item-left">支付状态</div>
<!-- <div class="item-right">{{item.orderStatus}}</div> -->
<div class="item-right">交易成功</div>
</div>

<div class="item-detail">
<div class="item-left">付款人</div>
<div class="item-right" v-if="item.cuserName">{{item.cuserName}}</div>
<div class="item-right" v-if="!item.cuserName">{{item.nickName}}</div>
</div>

<div class="item-detail">
<div class="item-left">付款人手机号</div>
<div class="item-right">{{item.cuserPhone}}</div>
</div>

<div class="item-detail">
<div class="item-left">收款人</div>
<div class="item-right">{{item.buserName}}</div>
</div>

<div class="item-detail">
<div class="item-left">收款人手机号</div>
<div class="item-right">{{item.buserPhone}}</div>
</div>
</div>

</van-list>



<div class="picker-bg" v-if="isShowPicker">
<van-datetime-picker
@confirm="changeTime"
@cancel="isShowPicker=false"
v-model="changeDate"
type="date"
title="选择年月日"
:min-date="minDate"
:max-date="maxDate"
/>
</div>

</div>
</template>

<script type="text/babel">
import {formatDate} from '@/filters'
// 组件
export default {
name: 'page-index',
components: {

},
computed: {
},
data() {
return {
pageType: 0,
titleStr: '交易记录',
isShowPicker: false,
minDate: new Date(1990, 0, 1),
maxDate: new Date(),
currentDate: formatDate(new Date(),'yyyy-MM-dd'),
changeDate: formatDate(new Date(),'yyyy-MM-dd'),

pageNum: 1,
recordList: [],
loading: false,
finished: false,

};
},
mounted() {
this.pageType = this.$route.query.index
this.titleStr = this.pageType == '0' ? '交易记录': (this.pageType == '1' ? '核销记录':'收银记录')
this.getData()

},
methods: {
dealTicketStatus (status) {
let str = ''
if (status == 0) {
str = '未核销'
} else if (status == 1) {
str = '已核销'
} else if (status == 2) {
str = '已过期'
} else if (status == 3) {
str = '已退款'
}
return str
},
doSearch () {
this.pageNum = 1
this.getData()
},
loadMore () {
this.pageNum += 1
this.getData()
},
dealTime (time) {
return formatDate(new Date(time), 'yyyy-MM-dd');
},
dealTime02 (time) {
return formatDate(new Date(time), 'yyyy-MM-dd HH:mm:ss');
},
showPicker () {
this.isShowPicker = true;
this.changeDate = new Date()
},
changeTime (val) {
this.currentDate = formatDate(new Date(val),'yyyy-MM-dd');
this.isShowPicker = false;
},
getData () {
this.loading = true
let arr = ['couponOrderListUnVerified','couponOrderListVerified','micropayListMicroPay']
this.$http[arr[this.pageType]]({
method: 'get',
params: {
data: '2020-10-22',
// data: this.currentDate,
pageNum: this.pageNum,
pageSize: 10,
}
}).then(res => {
if (res.code === 200) {
this.loading = false
this.finished = res.data.list.list.length === 0
this.recordList = this.recordList.concat(res.data.list.list)
}
})
},

goBack() {
this.$router.go(-1)
}

}
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.floatR {
float: right;
}
@font-face {
font-family: 'iconfont'; /* project id 1353693 */
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot');
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'),
url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg');
}

.page-home {
background: #f8f8fa;
.back-box {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 1.3rem;
line-height: 1.3rem;
background: #52A0FD;
color: #fff;
font-size: @fontSize16;
.back-icon {
position: absolute;
left: 0;
top: 0;
margin: .4rem 0 0 .1rem;
}
}
.top-circle-img {
position: absolute;
top: .7rem;
left: 0;
width: 100%;
height: 1.5rem;
}
.top-circle-p {
position: absolute;
top: 1.3rem;
left: 0;
width: 100%;
height: 1rem;
line-height: 1rem;
z-index: 1000;
color: #fff;
text-align: center;
font-size: @fontSize16
}
}
.header-wrap {
width: 100%;
height: 4rem;
position: relative;
top: -1rem;

.header-bg {
width: 100%;
height: 4rem;
}
.header-box {
position: absolute;
left: 3.5%;
top: 1.4rem;
width: 93%;
height: 3rem;
background: url('../../assets/images/reviveimg.png') no-repeat;
background-size: 100%;
border-radius: .2rem;
box-shadow: 2px 6px .3rem rgba(0,0,0,.15);
overflow: hidden;


.header-logo {
float: left;
width: 1.7rem;
height: 1.7rem;
margin: .7rem .5rem 0 .5rem;
}
.header-name-box {
float: left;
width: 5.5rem;
margin-top: .7rem;

.header-title {
width: 100%;
height: .75rem;
line-height: .75rem;
color: #333;
font-size: @fontSize16;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:nth-of-type(2) {
color: #999;
}
}
}
.header-detail {
float: right;
width: .7rem;
height: .7rem;
margin-top: 1.2rem;
margin-right: .3rem;
}
}
}


.text-left,.text-right {
float: left;
width: 4.4rem;
height: 2rem;
font-size: @fontSize16;
span {
display: block;
margin-top: .3rem;
&:nth-of-type(1) {
color: #888;
}
}
}
.text-center {
float: left;
width: .5rem;
height: 2rem;
line-height: 2rem;
}
.search-btn {
width: 100%;
float: left;
height:1rem;
background: #51a0fc;
color: #fff;
}


.picker-bg {
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.2);
position: fixed;
left: 0;
top: 0;
z-index: 100;
/deep/ .van-picker {
width: 100%;
position:absolute!important;
bottom: 0;
left: 0;
}
}



.item-record {
margin: .35rem .4rem;
border-radius: .1rem;
background: #fff;
box-shadow: .05rem .12rem .15rem rgba(0,0,0,0.15);
font-size: @fontSize14;
.item-detail {
width: 100%;
height: 1rem;
line-height: 1rem;
padding: 0 .4rem;

&:first-child {
margin-top: 0;
}
.item-left,.item-right {
float: left;
span {
display: block;
margin-top: .4rem;
font-size: @fontSize16;
text-align: left;
&:nth-of-type(1) {
max-width: 6rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&:nth-of-type(2) {
margin-top: .2rem;
color: #888;
}
}
}
.item-right {
float: right;
color: #888;
span {
text-align: right;
&:nth-of-type(2) {
font-size: @fontSize14;
color: red;
}
}
}
}


}





</style>

Carregando…
Cancelar
Salvar