|
- <template>
- <div class='page-home'>
- <div class="back-box">
- <van-icon class="back-icon" @click="goBack" size=".6rem" name="arrow-left" color="#fff" />
- <span>积分操作记录</span>
- </div>
-
- <div class="btn-box">
- <button class="btn-tab" @click="dealType('type01')" :class="cardType==='type01'?'btn-tab-active':''">赠券库存</button>
- <button class="btn-tab" @click="dealType('type02')" :class="cardType==='type02'?'btn-tab-active':''">注券记录</button>
- </div>
-
- <div class="header-wrap" v-if="cardType==='type02'">
- <div class="header-box">
- <div class="text-left" @click="showPicker('startTime')">
- <span>开始日期</span>
- <span>{{startTime}}</span>
- </div>
- <p class="text-center">至</p>
- <div class="text-right" @click="showPicker('endTime')">
- <span>结束日期</span>
- <span>{{endTime}}</span>
- </div>
- <button class="search-btn" @click="doSearch">查询</button>
- </div>
- </div>
-
-
-
-
- <van-list
- v-if="cardType==='type01'"
- style="margin-bottom:2rem;height:calc(100vh - 7rem);overflow-y:auto;"
- v-model="loading"
- :finished="finished"
- finished-text="没有更多了"
- @load="loadMore"
- >
- <div class="item-record" v-for="(item,index) in recordList01" :key="index">
- <div class="item-detail">
- <div class="item-left">
- <span>{{item.title}}</span>
- <span v-if="item.validStartDate">有效期:{{dealTime(item.validStartDate)}}至{{dealTime(item.validEndDate)}}</span>
- <span v-if="!item.validStartDate">{{'有效期:自领取后'+ item.validDays+'日内有效'}}</span>
- </div>
- <div class="item-right">
- <span>库存:{{item.merchantRemain}}</span>
- <span v-if="item.status == 1">已作废</span>
- </div>
- </div>
- </div>
-
- </van-list>
-
- <van-list
- v-if="cardType==='type02'"
- style="margin-bottom:2rem;height:calc(100vh - 8.69rem);overflow-y:auto;"
- v-model="loading"
- :finished="finished"
- finished-text="没有更多了"
- @load="loadMore"
- >
- <div class="item-record02" v-for="(item,index) in recordList02" :key="index">
- <p class="item-time02">{{dealTime(item.createDate)}}</p>
- <div class="item-detail02">
- <div class="item-left02">
- <span>{{item.title}}</span>
- <span>{{item.userName}}</span>
- <span>操作人:{{item.operator}}</span>
- </div>
- <div class="item-right02">
- <span>用户手机:{{item.phone}}</span>
- <span></span>
- <span>注券时间:{{dealTime(item.createDate)}}</span>
- </div>
- </div>
- </div>
-
- </van-list>
-
- <div class="picker-bg" v-if="isShowPicker">
- <van-datetime-picker
- @confirm="changeTime"
- @cancel="isShowPicker=false"
- v-model="currentDate"
- 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: {
-
- },
- data() {
- return {
- isShowPicker: false,
- minDate: new Date(1990, 0, 1),
- maxDate: new Date(),
- currentDate: new Date(),
- startTime: formatDate(new Date(),'yyyy-MM-dd'),
- endTime: formatDate(new Date(),'yyyy-MM-dd'),
- timeType: 'startTime',
-
- pageNum: 1,
- recordList01: [],
- recordList02: [],
- loading: false,
- finished: false,
- cardType: 'type01',
-
- };
- },
- mounted() {
- this.wxMerchantcouponSend()
-
- },
- methods: {
- dealType (str) {
- console.log(str)
- this.cardType = str
- this.doSearch()
- },
- doSearch () {
- this.pageNum = 1
- this.recordList01 = []
- this.recordList02 = []
- this.wxMerchantcouponSend()
- },
- loadMore () {
- this.pageNum += 1
- this.wxMerchantcouponSend()
-
- },
- dealTime (time) {
- return formatDate(new Date(time), 'yyyy-MM-dd');
- },
- showPicker (str) {
- this.isShowPicker = true;
- this.timeType = str;
- this.currentDate = new Date(this[str])
- },
- changeTime (val) {
- this[this.timeType] = formatDate(new Date(val),'yyyy-MM-dd');
- this.isShowPicker = false;
- },
- /**
- * 检查用户是否有权限修改收款账户
- */
- wxMerchantcouponSend() {
- this.loading = true
- let url = ''
- let params = {}
- if (this.cardType === 'type01') {
- url = 'wxMerchantcouponSend'
- params = {
- pageNum: this.pageNum,
- pageSize: 10,
- sendType: 7,
- expired:'',
- status:'',
- }
- } else {
- url = 'wxMerchantcouponStory'
- params = {
- pageNum: this.pageNum,
- pageSize: 10,
- channelType:7,
- beginDate: this.startTime ,
- endDate: this.endTime,
- }
- }
- this.$http[url]({
- method: 'get',
- params: params
- }).then(res => {
- if (res.code === 200) {
- this.loading = false
- this.finished = res.data.list.length === 0
- if (this.cardType === 'type01') {
- this.recordList01 = this.recordList01.concat(res.data.list)
- } else {
- this.recordList02 = this.recordList02.concat(res.data.list)
- }
-
- }
- })
- },
- goBack() {
- this.$router.go(-1)
- }
-
-
- }
- }
- </script>
-
- <style lang="less" rel="stylesheet/less" >
- .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 {
- float: left;
- margin: .4rem 0 0 .1rem;
- }
- }
- }
- .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 {
- width: 100%;
- font-size: @fontSize14;
-
- .item-time {
- width: 100%;
- height: .8rem;
- line-height: .8rem;
- color: #888;
- text-align: left;
- padding-left: .4rem;
- }
- .item-detail {
- margin: .35rem .4rem;
- padding: 0 .4rem;
- height: 2rem;
- border-radius: .1rem;
- background: rgba(0,0,0,0.08);
- .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;
- span {
- text-align: right;
- &:nth-of-type(2) {
- font-size: @fontSize14;
- color: red;
- }
- }
- }
- }
-
-
-
-
- }
-
-
-
-
-
-
- .item-record02 {
- width: 100%;
- font-size: @fontSize14;
-
- .item-time02 {
- width: 100%;
- height: .8rem;
- line-height: .8rem;
- color: #888;
- text-align: left;
- padding-left: .4rem;
- }
- .item-detail02 {
- padding: 0 .4rem;
- width: 100%;
- height: 2.2rem;
- background: #fff;
- .item-left02,.item-right02 {
- float: left;
- span {
- display: block;
- margin-top: .3rem;
- font-size: @fontSize14;
- text-align: left;
- &:nth-of-type(1) {
- max-width: 5rem;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
- &:nth-of-type(2) {
- min-height: .4rem;
- margin-top: .2rem;
- color: #888;
- }
- &:nth-of-type(3) {
- margin-top: .2rem;
- color: #888;
- }
- }
- }
- .item-right02 {
- float: right;
- span {
- text-align: right;
- &:nth-of-type(1) {
- max-width: 5rem;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
- &:nth-of-type(2) {
- min-height: .4rem;
- margin-top: .2rem;
- color: #888;
- }
- &:nth-of-type(3) {
- margin-top: .2rem;
- color: #888;
- }
- }
- }
- }
-
-
-
-
- }
-
- .btn-box {
- width: 100%;
- margin-top: 1.7rem;
- overflow: hidden;
- .btn-tab {
- float: left;
- width: 3.4rem;
- height: 1rem;
- border-radius: .1rem ;
- background: #fff;
- color: #333;
- margin-left: 1.6rem;
- &:last-child {
- margin-left:0;
- }
- }
- .btn-tab-active {
- background: #51a0fc;
- color: #fff;
- }
- }
-
-
-
-
- </style>
|