123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376 |
- <template>
- <view class="">
- <view id="header-id">
- <view class="header-content flex-y-center">
- <view class="flex-y-center header">
- <icon type="search" size="15" style="margin-right: 10rpx;"></icon>
- <input type="text" value="" @input="onInput" @confirm="search" confirm-type="search" placeholder="输入订单编号查询" />
- </view>
- </view>
- <view class="tabs">
- <liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
- </view>
- </view>
- <view class="hg226"></view>
- <view class="home">
- <view class="box-pack-between total">
- <text class="price-color ft32">总计:¥{{total_money}}</text>
- <view class="total-right flex-y-center">
- <picker :range="type_arr" @change="bindCge">
- <view class="flex-y-center">
- {{type_arr[type_index]}}
- <image src="../static/images/san.png" mode=""></image>
- </view>
- </picker>
- </view>
- </view>
- <view style="height:100rpx;"></view>
- <no-none v-if='list.length<=0'></no-none>
- <block v-else>
- <view class="list" v-for="(item,index) in list" :key="index">
- <view class="box-pack-between top">
- <text>{{item.out_trade_no}}</text>
- <view class="flex-center stutas">
- <image :src="item.pay_type==1?pay_type:pay_type1" mode=""></image>
- {{item.order_status=='SUCCESS'?'支付成功':'未支付'}}
- </view>
- </view>
- <view class="text-color ft28 center">
- 付款时间:<text>{{item.pay_time}}</text>
- </view>
- <view class="text-color ft28">
- 付款金额:<text class="price-color ft28">{{item.pay_price}}</text>
- </view>
- </view>
- <loading :is_load="is_load" :is_load_more='is_load_more'></loading>
- </block>
- </view>
- <uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
- <view class="model">
- <view class="flex-y-center box-pack-between model-date">
- <view class="model-item " :class="act_index==1?'act':''">
- <picker mode='date' :value="start" :start="startDate" :end="endDate" @change="bindDateChange1" data-index="1">
- <view class="flex-center">
- <text>{{start}}</text>
- </view>
- </picker>
- </view>
- <text>至</text>
- <view class="model-item" :class="act_index2==2?'act':''">
- <picker mode='date' :value="end" :start="startDate" :end="endDate" @change="bindDateChange2" data-index="2">
- <view class="flex-center">
- <text>{{end}}</text>
- </view>
- </picker>
- </view>
- </view>
- <view class="model-btn flex-center" @click="sure">
- 确定
- </view>
- </view>
- </uni-popup-top>
- </view>
- </template>
- <script>
- import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
- import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
- export default {
- components: {
- uniPopupTop,
- liuyunoTabs
- },
- data() {
- return {
- tabs: [
- "今日",
- "昨日",
- "本周",
- "筛选"
- ],
- defaultIndex: 0,
- startDate: "2020-10-01",
- endDate: "2030-10-01",
- start: "开始时间",
- end: "结束时间",
- act_index: 0,
- act_index2: 0,
- type_arr: [
- "全部", "微信", "支付宝",
- ],
- type_index: 0,
- list: [],
- page: 1,
- is_load: false,
- is_load_more: false,
- total_money: 0,
- time: "",
- pay_type: "../static/images/wx.png",
- pay_type1: "../static/images/ali.png",
- keywords:"",
- top:"226rpx",
- maskClass: {
- 'position': 'fixed',
- 'bottom': 0,
- 'top': "226rpx",
- 'left': 0,
- 'right': 0,
- 'backgroundColor': 'rgba(0, 0, 0, 0.4)'
- },
- }
- },
- onLoad() {
- this.http();
- },
- onReady() {},
- onReachBottom() {
- console.log("dddd")
- if (!this.is_load) {
- this.page = this.page + 1;
- this.http();
- }
- },
- methods: {
- tabClick(e) {
- this.defaultIndex = e;
- if (e == 3) {
- this.$refs.popup.open();
- return
- } else {
- this.act_index = 0;
- this.act_index2 = 0;
- this.start = "开始时间";
- this.end = "结束时间";
- this.time = "";
- this.clear();
- }
- this.$refs.popup.close();
- },
- clear() {
- this.page = 1;
- this.list = [];
- this.http();
- },
- bindDateChange1(e) {
- this.act_index = e.currentTarget.dataset.index;
- this.start = e.target.value;
- },
- bindDateChange2(e) {
- this.act_index2 = e.currentTarget.dataset.index;
- this.end = e.target.value;
- },
- sure(e) {
- this.time = this.start + " - " + this.end;
- this.clear();
- this.$refs.popup.close();
- },
- bindCge(e) {
- console.log(e, "e")
- this.type_index = e.detail.value;
- this.clear();
- },
- search(e){
- this.keywords=e.detail.value;
- this.clear();
- },
- onInput(e)
- {
- if(!e.detail.value){
- this.keywords="";
- this.clear();
- }
- },
- http() {
- let type = this.defaultIndex,
- pay_type = this.type_index;
- this.request({
- url: "user/getList",
- data: {
- token: uni.getStorageSync('token'),
- page: this.page,
- limit: 5,
- time: this.time,
- paytime: type == 0 ? "today" : type == 1 ? "yesterday" : type == 2 ? "week" : "",
- pay_type,
- keywords:this.keywords,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
-
- if (res.data.data.length == 0) {
- this.is_load = true,
- this.is_load_more = true,
- setTimeout(() => {
- this.is_load_more = false
- }, 1e3);
- return
- }
-
- this.total_money += res.data.total_money;
- this.is_load = false;
- this.list = this.list.concat(res.data.data);
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
- }
- }
- </script>
- <style lang="scss">
- $yellow: #FFA024;
- page {
- background: #F5F7FA;
- }
- #header-id {
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 999;
- }
- .hg226 {
- height: 226rpx;
- }
- .header-content {
- background: #FFFFFF;
- height: 126rpx;
- .header {
- width: 670rpx;
- height: 70rpx;
- opacity: 1;
- background: #f5f6f9;
- border-radius: 4rpx;
- font-size: 28rpx;
- padding: 0 30rpx;
- margin: 0 auto;
- }
- }
- .tabs {
- font-size: 32rpx;
- }
- .price-color {
- color: $yellow;
- }
- .text-color {
- color: #99A0AD
- }
- .home {
- width: 670rpx;
- margin: 0 auto;
- position: relative;
- .total {
- padding: 24rpx 0;
- position: fixed;
- width: 670rpx;
- background: #F5F7FA;
- z-index: 99;
- .total-right {
- font-size: 28rpx;
- color: #666666;
- image {
- width: 15rpx;
- height: 10rpx;
- margin-left: 10rpx;
- }
- }
- }
- .list {
- width: 670rpx;
- height: 227rpx;
- opacity: 1;
- background: #ffffff;
- border-radius: 8rpx;
- box-shadow: 0px 6rpx 10rpx 0px rgba(213, 213, 213, 0.04);
- margin: 0 auto;
- padding: 20rpx 32rpx;
- margin-bottom: 20rpx;
- .top {
- margin-bottom: 43rpx;
- }
- .center {
- margin-bottom: 22rpx;
- }
- .stutas {
- image {
- width: 32rpx;
- height: 32rpx;
- margin-right: 10rpx;
- }
- }
- }
- }
- .model {
- width: 100%;
- z-index: 155;
- background: #FFFFFF;
- padding-bottom: 20rpx;
- .model-date {
- width: 100%;
- padding: 20rpx 80rpx;
- border-bottom: 1rpx solid #F1F1F1;
- .model-item {
- width: 225rpx;
- text-align: center;
- font-size: 28rpx;
- color: #999;
- position: relative;
- padding: 10rpx 0;
- text-align: center;
- border-radius: 8rpx;
- border: 1rpx solid #999;
- }
- .act {
- color: #FFFFFF;
- background: #FFBE2C;
- border: 1rpx solid #FFBE2C;
- }
- }
- .model-btn {
- text-align: center;
- color: #FFFFFF;
- height: 80rpx;
- border-radius: none;
- width: 80%;
- opacity: 1;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
- margin: 0 auto;
- margin-top: 20rpx;
- }
- }
- </style>
|