593 lines
14 KiB
Vue
593 lines
14 KiB
Vue
<template>
|
||
<div class="consumption">
|
||
<div class="consumption-card">
|
||
<div class="card-block">
|
||
<div>
|
||
<div>账户余额（元）</div>
|
||
<div class="amount">{{ user.ACCOUNT_BALANCE }}</div>
|
||
</div>
|
||
|
||
<navigator
|
||
open-type="redirect"
|
||
url="/pages/homeFn/integral/index"
|
||
class="jump-btn"
|
||
>
|
||
积分记录
|
||
<image
|
||
src="https://eshangtech.com/ShopICO/consumption/to-other.png"
|
||
style="width: 25rpx; height: 25rpx"
|
||
mode="aspectFit"
|
||
></image>
|
||
</navigator>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="consumption-history">
|
||
<div><span>{{pageMsg.part_consumer_today}}</span><span>今日累计消费</span></div>
|
||
<div><span>{{pageMsg.part_consumer_this_month}}</span><span>当月累计消费</span></div>
|
||
</div> -->
|
||
|
||
<!-- <div class="consumption-btn-box">
|
||
<div class="consumption-btn" hover-class="" @tap="getToday()">本日</div>
|
||
<div class="consumption-btn" @tap="getWeek()">本周</div>
|
||
<div class="consumption-btn" @tap="getMonth()">本月</div>
|
||
</div>
|
||
<div class="consumption-search-box">
|
||
<div class="search-by-date" v-show="searchByDate===0" @tap="searchByDate=1">
|
||
<i class="ico-timer"></i>
|
||
按日期查询
|
||
</div>
|
||
<div class="search-content" v-show="searchByDate===1">
|
||
<div class="search-content-unit">
|
||
<span>起始日期</span>
|
||
<p>
|
||
<span class="date-color" @click="onShowDatePicker(0)">{{searchTime[0]}}</span>
|
||
<span style="margin: 0 10px">至</span>
|
||
<span class="date-color" @click="onShowDatePicker(1)">{{searchTime[1]}}</span>
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<date-Picker v-model="showPicker" :init="searchTime[timeFlag]" type="date" @selected="onSelected"/> -->
|
||
<div class="consumption-title">
|
||
<div>交易记录</div>
|
||
<div class="consumption-title-des">
|
||
<block v-if="pageMsg.screenName != '选择日期'">
|
||
<span @click="pageMsg.isScreen = !pageMsg.isScreen">{{
|
||
pageMsg.screenName
|
||
}}</span>
|
||
</block>
|
||
<block v-else>
|
||
<picker
|
||
mode="date"
|
||
:value="searchTime[0]"
|
||
start="2016-01-01"
|
||
:end="pageMsg.nowDay"
|
||
class="searchTime-tag"
|
||
@change="pickDate($event, 0)"
|
||
>
|
||
<view class="picker">
|
||
{{ searchTime[0] }}
|
||
</view>
|
||
</picker>
|
||
~
|
||
<picker
|
||
mode="date"
|
||
:value="searchTime[1]"
|
||
start="2016-01-01"
|
||
:end="pageMsg.nowDay"
|
||
class="searchTime-tag"
|
||
@change="pickDate($event, 1)"
|
||
>
|
||
<view class="picker">
|
||
{{ searchTime[1] }}
|
||
</view>
|
||
</picker>
|
||
<!-- <span class="searchTime-tag" @click.stop="pickDate">{{searchTime[0]}}</span> ~ <span class="searchTime-tag" @click.stop="pickDate">{{searchTime[1]}}</span> -->
|
||
</block>
|
||
<van-icon
|
||
@click="pageMsg.isScreen = !pageMsg.isScreen"
|
||
:name="pageMsg.isScreen ? 'arrow-up' : 'arrow-down'"
|
||
size="36rpx"
|
||
color="#999999"
|
||
custom-style="transition:all .2s;vertical-align:middle;margin-left:16rpx;padding-bottom:4rpx;"
|
||
/>
|
||
|
||
<div class="sreen-box" v-show="pageMsg.isScreen">
|
||
<div
|
||
class="sreen-unit"
|
||
v-for="(u, o) in screenCodes"
|
||
:key="o"
|
||
@click="selectTime(u)"
|
||
>
|
||
<i v-if="u.id === 0" class="screen-ico"></i>{{ u.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="consumption-content">
|
||
<block v-for="(unit, i) in consumptionRecord" :key="i">
|
||
<!-- <p class="consumption-content-date">{{unit.date}}</p> -->
|
||
<div class="consumption-content-unit">
|
||
<div class="cp-u-left">
|
||
<i
|
||
class="ico-shop"
|
||
:class="{
|
||
'ico-hym': unit.RECODE_TYPE === 3010,
|
||
'ico-md': unit.RECODE_TYPE === 3000,
|
||
'ico-hy':
|
||
unit.RECODE_TYPE !== 3000 && unit.RECODE_TYPE !== 3010,
|
||
}"
|
||
></i>
|
||
<div>
|
||
<p class="cp-u-title">{{ unit.SHOPNAME }}</p>
|
||
|
||
<p class="cp-u-type">{{ unit.RECODE_TYPENAME }}</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p
|
||
class="cp-u-price"
|
||
:class="{
|
||
colorOr: unit.RECODE_AMOUNT < 0,
|
||
colorGr: unit.RECODE_AMOUNT > 0,
|
||
}"
|
||
>
|
||
<span style="font-size: 24rpx">{{
|
||
unit.RECODE_AMOUNT > 0 ? "+" : ""
|
||
}}</span
|
||
>{{ unit.RECODE_AMOUNT }}
|
||
</p>
|
||
<p class="cp-u-type">{{ unit.date }}</p>
|
||
</div>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
<div v-if="loadingType == 0">
|
||
<no-data :text="'您没有消费记录'" :isShow="consumptionRecord.length > 0" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import NoData from "@/components/noData.vue";
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
let nowMounthS = this.$utils.cutDate(new Date(), "YYYY-MM") + "-01";
|
||
let nowMounthE = this.$utils.cutDate(new Date(), "YYYY-MM-DD");
|
||
let nowWeekS = this.$utils.cutDate(
|
||
new Date(),
|
||
"YYYY-MM-DD",
|
||
-(new Date().getDay() - 1)
|
||
);
|
||
return {
|
||
loadingType: 1,
|
||
searchByDate: 0,
|
||
searchTime: [],
|
||
consumptionRecord: [],
|
||
timeFlag: 0,
|
||
showPicker: false,
|
||
screenCodes: [
|
||
{
|
||
id: 0,
|
||
name: "选择日期",
|
||
value: "",
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "本月",
|
||
value: [nowMounthS, nowMounthE],
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "本周",
|
||
value: [nowWeekS, nowMounthE],
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "今天",
|
||
value: [nowMounthE, nowMounthE],
|
||
},
|
||
],
|
||
pageMsg: {
|
||
getAmount: 0,
|
||
useAmount: 0,
|
||
screenName: "本月",
|
||
nowDay: nowMounthE,
|
||
|
||
isScreen: false,
|
||
},
|
||
};
|
||
},
|
||
components: {
|
||
NoData
|
||
},
|
||
computed: {
|
||
...mapGetters(["user"]),
|
||
},
|
||
methods: {
|
||
selectTime(item) {
|
||
this.pageMsg.screenName = item.name;
|
||
if (item.id !== 0) {
|
||
this.searchTime = item.value;
|
||
|
||
this.consumptionRecord = [];
|
||
this.getConsuptionRecord();
|
||
}
|
||
this.pageMsg.isScreen = !this.pageMsg.isScreen;
|
||
},
|
||
pickDate(event, index) {
|
||
this.searchTime[index] = event.mp.detail.value;
|
||
// if (this.searchTime) {
|
||
|
||
this.consumptionRecord = [];
|
||
this.getConsuptionRecord();
|
||
// }
|
||
},
|
||
getConsuptionRecord() {
|
||
let _this = this;
|
||
|
||
_this.$api
|
||
.postCoop({
|
||
action_type: "GetMembershipConsumptionList",
|
||
action_data: _this.user.INDUSTRY_MEMBERSHIP_ID,
|
||
STARTDATE: _this.searchTime[0],
|
||
ENDDATE: _this.searchTime[1],
|
||
})
|
||
.then(function (res) {
|
||
_this.consumptionRecord = res.MembershipConsumption;
|
||
// let getAmount = 0
|
||
// let useAmount = 0
|
||
res.MembershipConsumption.map((v) => {
|
||
v.date = _this.$utils.cutDate(
|
||
new Date(v.RECODE_DATE),
|
||
"YYYY-MM-DD"
|
||
);
|
||
if (
|
||
v.RECODE_TYPE === 1000 ||
|
||
v.RECODE_TYPE === 1010 ||
|
||
v.RECODE_TYPE === 1050
|
||
) {
|
||
v.sign = 1; // 正数
|
||
// getAmount += v.RECODE_AMOUNT
|
||
v.RECODE_AMOUNT = Math.round(v.RECODE_AMOUNT * 100) / 100;
|
||
} else {
|
||
v.sign = 0; // 负数
|
||
// useAmount += v.RECODE_AMOUNT
|
||
v.RECODE_AMOUNT = (Math.round(v.RECODE_AMOUNT * 100) / 100) * -1;
|
||
}
|
||
});
|
||
// _this.pageMsg.getAmount = Math.round(getAmount * 100) / 100
|
||
// _this.pageMsg.useAmount = Math.round(useAmount * 100) / 100
|
||
|
||
_this.loadingType = 0;
|
||
});
|
||
},
|
||
getToday() {
|
||
let _this = this;
|
||
_this.searchTime[0] = _this.$utils.cutDate(new Date(), "YYYY-MM-DD");
|
||
_this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY-MM-DD");
|
||
_this.getConsuptionRecord();
|
||
},
|
||
getWeek() {
|
||
let _this = this;
|
||
_this.searchTime[0] = _this.$utils.cutDate(
|
||
new Date(),
|
||
"YYYY-MM-DD",
|
||
-(new Date().getDay() - 1)
|
||
);
|
||
_this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY-MM-DD");
|
||
_this.getConsuptionRecord();
|
||
},
|
||
getMonth() {
|
||
let _this = this;
|
||
_this.searchTime[0] = _this.$utils.cutDate(
|
||
new Date(),
|
||
"YYYY-MM-DD",
|
||
-(new Date().getDate() - 1)
|
||
);
|
||
_this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY-MM-DD");
|
||
_this.getConsuptionRecord();
|
||
},
|
||
onShowDatePicker(f) {
|
||
// 显示
|
||
this.showPicker = true;
|
||
this.timeFlag = f;
|
||
},
|
||
onSelected(data) {
|
||
// 选择
|
||
this.searchTime[this.timeFlag] = data.value;
|
||
},
|
||
},
|
||
onUnload() {
|
||
this.pageMsg.isScreen = false;
|
||
},
|
||
onLoad() {
|
||
this.loadingType = 1; // 正在在加载
|
||
this.pageMsg.screenName = "本月";
|
||
this.getMonth();
|
||
this.$utils.addUserBehaviorNew();
|
||
// this.getMemberInfo()
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.consumption {
|
||
background: #fff;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
// .consumption-amount
|
||
// font-size 32rpx
|
||
// text-align center
|
||
// width 100%
|
||
// height 332rpx
|
||
// // background url("https://eshangtech.com/ShopICO/consumption/consumption-bg.png") no-repeat center
|
||
// background-size contain
|
||
// box-sizing border-box
|
||
// padding-top 16rpx
|
||
.consumption-card {
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
width: 100%;
|
||
height: 284rpx;
|
||
background: url('https://eshangtech.com/ShopICO/consumption/c-bg.png') no-repeat center;
|
||
background-size: contain;
|
||
box-sizing: border-box;
|
||
padding: 68rpx 50rpx 68rpx 80rpx;
|
||
}
|
||
|
||
.card-block {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.amount {
|
||
color: #fff;
|
||
text-align: left;
|
||
font-size: 60rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.jump-btn {
|
||
background: url('https://eshangtech.com/ShopICO/consumption/c-btn.png') no-repeat center;
|
||
width: 190rpx;
|
||
height: 68rpx;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-size: contain;
|
||
border-radius: 34rpx;
|
||
justify-content: center;
|
||
}
|
||
|
||
.consumption-history {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.consumption-history>div {
|
||
width: 50%;
|
||
text-align: center;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.consumption-history>div:first-child {
|
||
border-right: 2px solid #fff;
|
||
}
|
||
|
||
.consumption-history>div span {
|
||
display: block;
|
||
}
|
||
|
||
.consumption-btn-box {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 40rpx 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.consumption-btn {
|
||
width: 210rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
background-color: #4aa3f5;
|
||
box-shadow: 0 0 8rpx #4aa3f5;
|
||
}
|
||
|
||
.consumption-search-box {
|
||
background-color: #fff;
|
||
border-top: 1rpx solid #eee;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.search-by-date {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #333;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.ico-timer {
|
||
/* background url(../../../static/img/zq.png) no-repeat center */
|
||
background-size: contain;
|
||
height: 45rpx;
|
||
width: 45rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.search-content-unit {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 80rpx;
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.search-content-unit + .search-content-unit {
|
||
border-top: 1rpx solid #eee;
|
||
}
|
||
|
||
.date-color {
|
||
color: #4aa3f5;
|
||
}
|
||
|
||
.consumption-title {
|
||
padding: 0 32rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bolder;
|
||
margin-top: 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.consumption-title-des {
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
position: relative;
|
||
color: #999999;
|
||
}
|
||
|
||
.sreen-box { //
|
||
position: absolute;
|
||
padding: 20rpx 32rpx;
|
||
width: 215rpx;
|
||
right: -12rpx;
|
||
border-radius: 16rpx;
|
||
background: url('https://eshangtech.com/ShopICO/consumption/consumption-screen-bg.png') no-repeat center;
|
||
background-size: contain;
|
||
box-sizing: border-box;
|
||
height: 288rpx;
|
||
z-index: 1;
|
||
top: 59rpx;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.sreen-unit {
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
font-size: 24rpx;
|
||
color: #454545;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.sreen-unit+.sreen-unit {
|
||
border-top: 1rpx solid #ededed;
|
||
}
|
||
|
||
.screen-ico {
|
||
background: #fff url('https://eshangtech.com/ShopICO/consumption/consumption-screen.png') no-repeat center;
|
||
background-size: contain;
|
||
height: 27rpx;
|
||
width: 31rpx;
|
||
// display inline-block
|
||
// vertical-align middle
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.searchTime-tag {
|
||
background: #f2f1f1;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
font-size: 24rpx;
|
||
width: 176rpx;
|
||
color: #999;
|
||
padding: 0;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
}
|
||
|
||
.consumption-content {
|
||
/* background-color #fff */
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.consumption-content-date {
|
||
color: #999;
|
||
font-size: 12px;
|
||
padding-bottom: 10rpx;
|
||
padding-left: 40rpx;
|
||
}
|
||
|
||
.consumption-content-unit {
|
||
display: flex;
|
||
padding: 0 32rpx;
|
||
line-height: 42rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.ico-shop {
|
||
/* background url(../../../static/img/xiaofei_shop.png) no-repeat center */
|
||
background-size: contain;
|
||
height: 70rpx;
|
||
width: 70rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.ico-hym {
|
||
background: url('https://eshangtech.com/ShopICO/consumption/hymxf.png') no-repeat center; // eshangtech.com/ShopICO/consumption/hymxf.png) no-repeat center
|
||
}
|
||
|
||
.ico-md {
|
||
background: url('https://eshangtech.com/ShopICO/consumption/mdxf.png') no-repeat center; // eshangtech.com/ShopICO/consumption/mdxf.png) no-repeat center
|
||
}
|
||
|
||
.ico-hy {
|
||
background: url('https://eshangtech.com/ShopICO/consumption/hyxf.png') no-repeat center; // eshangtech.com/ShopICO/consumption/hyxf.png) no-repeat center
|
||
}
|
||
|
||
.ico-shop {
|
||
background-size: contain;
|
||
height: 72rpx;
|
||
width: 72rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.cp-u-left {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.cp-u-title {
|
||
font-size: 28rpx;
|
||
color: #494949;
|
||
}
|
||
|
||
.cp-u-type {
|
||
font-size: 24rpx;
|
||
color: #939393;
|
||
}
|
||
|
||
.colorOr {
|
||
color: #D86E35;
|
||
}
|
||
|
||
.colorGr {
|
||
color: #45AB58;
|
||
}
|
||
|
||
.cp-u-price {
|
||
text-align: right;
|
||
font-size: 32rpx;
|
||
}
|
||
</style>
|