873 lines
21 KiB
Vue
873 lines
21 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="markTitle">
|
||
<view class="markLeft">
|
||
<span class="mark">{{ memberPoint || "" }}</span>
|
||
<span class="text">可用积分</span>
|
||
</view>
|
||
|
||
<view class="markRight" @click="handleMarkRule">积分规则</view>
|
||
</div>
|
||
|
||
<div class="detailBox">
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<div class="tabBox">
|
||
<div class="title">积分明细</div>
|
||
|
||
<div class="tabs">
|
||
<div
|
||
:class="
|
||
selectTab === item.value ? 'tabItem selectTab' : 'tabItem'
|
||
"
|
||
v-for="(item, index) in tabList"
|
||
:key="index"
|
||
@click="handleChangeSelectTab(item.value)"
|
||
>
|
||
{{ item.label || "" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="signIn" @click="signIn" v-if="showSgign">签到</div>
|
||
</div>
|
||
|
||
<div class="markList">
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
v-if="showList && showList.length > 0"
|
||
>
|
||
<div class="markItem" v-for="(item, index) in showList" :key="index">
|
||
<div class="itemTitle">
|
||
<image
|
||
class="titleIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/markIcon.svg"
|
||
/>
|
||
<span class="label">{{ item.label || "-" }}获取</span>
|
||
<span class="value">{{ item.obtain || "-" }}</span>
|
||
<span class="label">已使用</span>
|
||
<span class="value">{{ item.consume || "-" }}</span>
|
||
</div>
|
||
<div
|
||
class="childrenList"
|
||
v-if="item.children && item.children.length > 0"
|
||
>
|
||
<div
|
||
class="itemContent"
|
||
v-for="(subItem, subIndex) in item.children"
|
||
:key="subIndex"
|
||
>
|
||
<div class="top">
|
||
<div class="topLeft">
|
||
{{ subItem.SERVERPART_NAME + subItem.SHOPNAME }}
|
||
</div>
|
||
<div class="topRight">
|
||
<span class="unit">{{
|
||
subItem.POINT_TYPE > 0
|
||
? "+"
|
||
: subItem.POINT_TYPE < 0
|
||
? "-"
|
||
: ""
|
||
}}</span>
|
||
<span class="value">{{
|
||
subItem.CURRENT_POINT || "-"
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">{{ subItem.OPERATE_DATE || "-" }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
v-if="!(showList && showList.length > 0)"
|
||
>
|
||
<no-data :text="'您暂无积分记录'" :isShow="true" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="consumption" v-if="false">
|
||
<div class="consumption-card">
|
||
<div class="card-block">
|
||
<div>
|
||
<div>可用积分</div>
|
||
<div class="amount">{{ memberPoint }}</div>
|
||
</div>
|
||
|
||
<navigator
|
||
open-type="redirect"
|
||
url="/pages/homeFn/consumption/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-title">
|
||
<div>本月积分</div>
|
||
<div class="consumption-title-des">
|
||
获取:
|
||
<span style="margin-right: 16rpx" class="colorGr">{{
|
||
pageMsg.SumGetPoint
|
||
}}</span>
|
||
使用: <span class="colorOr">{{ pageMsg.SumUsePoint }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="consumption-content" v-if="pageMsg.List.length > 0">
|
||
<block v-for="(unit, i) in pageMsg.List" :key="i">
|
||
<!-- <p class="consumption-content-date">{{unit.date}}</p> -->
|
||
<div class="consumption-content-unit">
|
||
<div class="cp-u-left">
|
||
<!-- <i class='ico-shop'></i> -->
|
||
<div>
|
||
<p class="cp-u-title">
|
||
{{ unit.SERVERPART_NAME + unit.SHOPNAME }}
|
||
</p>
|
||
|
||
<p class="cp-u-type">{{ unit.OPERATE_DATE }}</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p
|
||
class="cp-u-price"
|
||
:class="{
|
||
colorOr: unit.POINT_TYPE < 0,
|
||
colorGr: unit.POINT_TYPE > 0,
|
||
}"
|
||
>
|
||
{{ unit.POINT_TYPE * unit.CURRENT_POINT }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
<div v-if="loadingType == 0">
|
||
<no-data :text="'您暂无积分记录'" :isShow="pageMsg.List.length > 0" />
|
||
</div>
|
||
</div>
|
||
<CustomLoading
|
||
:visible="isLoading"
|
||
v-if="isLoading"
|
||
@update:visible="(val) => (isLoading = val)"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import noData from "../../../components/noData.vue";
|
||
import { mapGetters } from "vuex";
|
||
import CustomLoading from "../../../components/customLoading.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
loadingType: 1,
|
||
searchByDate: 0,
|
||
memberPoint: 0, // 可用积分
|
||
searchTime: [],
|
||
consumptionRecord: [],
|
||
timeFlag: 0,
|
||
pageMsg: {
|
||
List: [],
|
||
pageSize: 16,
|
||
pageIndex: 1,
|
||
isLoadMore: true,
|
||
SumGetPoint: 0,
|
||
SumUsePoint: 0,
|
||
},
|
||
showPicker: false,
|
||
tabList: [
|
||
{ label: "全部", value: 0 },
|
||
{ label: "获取", value: 1 },
|
||
{ label: "消耗", value: 2 },
|
||
],
|
||
selectTab: 0,
|
||
allList: [],
|
||
showList: [],
|
||
showSgign: true,
|
||
isLoading: false,
|
||
};
|
||
},
|
||
components: {
|
||
noData,
|
||
CustomLoading,
|
||
},
|
||
computed: {
|
||
...mapGetters(["user"]),
|
||
},
|
||
methods: {
|
||
// 跳转积分规则
|
||
handleMarkRule() {
|
||
uni.navigateTo({
|
||
url: "/pages/memberBenefits/index",
|
||
});
|
||
},
|
||
// 修改选择的列表
|
||
handleChangeSelectTab(value) {
|
||
this.selectTab = value;
|
||
this.showList = this.allList[value];
|
||
console.log("this.showList", this.showList);
|
||
this.$forceUpdate;
|
||
},
|
||
getConsuptionRecord() {
|
||
let _this = this;
|
||
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "GetPointRecord",
|
||
pageSize: 999999,
|
||
pageIndex: 1,
|
||
isSum: 1,
|
||
// starDate: _this.searchTime[0],
|
||
// endDate: _this.searchTime[1]
|
||
})
|
||
.then(function (res) {
|
||
console.log("res321312", res);
|
||
// uni.hideLoading();
|
||
_this.isLoading = false;
|
||
_this.pageMsg.SumUsePoint = res.Data.SumUsePoint;
|
||
_this.pageMsg.SumGetPoint = res.Data.SumGetPoint;
|
||
_this.handleSetTypeList(res.Data.List);
|
||
|
||
// _this.pageMsg.List =
|
||
// _this.pageMsg.pageIndex === 1
|
||
// ? res.Data.List
|
||
// : _this.pageMsg.List.concat(res.Data.List);
|
||
// _this.pageMsg.SumUsePoint = res.Data.SumUsePoint;
|
||
// _this.pageMsg.SumGetPoint = res.Data.SumGetPoint;
|
||
// console.log("_this.pageMsg", _this.pageMsg);
|
||
// if (res.Data.List.length < _this.pageMsg.pageSize) {
|
||
// _this.pageMsg.isLoadMore = false;
|
||
// }
|
||
// _this.loadingType = 0;
|
||
// _this.$forceUpdate();
|
||
});
|
||
},
|
||
// 将数据按照全部、获取、消耗
|
||
handleSetTypeList(list) {
|
||
// 按顺序为全部、获取、消耗
|
||
let allList = [[], [], []];
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
allList[0].push(item);
|
||
if (item.POINT_TYPE > 0) {
|
||
allList[1].push(item);
|
||
}
|
||
if (item.POINT_TYPE < 0) {
|
||
allList[2].push(item);
|
||
}
|
||
});
|
||
}
|
||
console.log("allList", allList);
|
||
let res = [];
|
||
allList.forEach((item) => {
|
||
let newItem = this.handleListGetMonth(item);
|
||
res.push(newItem);
|
||
});
|
||
console.log("res", res);
|
||
|
||
this.allList = res;
|
||
this.showList = res[this.selectTab];
|
||
},
|
||
// 将传入的数组变成 一个月份一个月份的
|
||
handleListGetMonth(list) {
|
||
let res = [];
|
||
let monthTypeList = [];
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
const date = new Date(item.OPERATE_DATE);
|
||
let y = date.getFullYear();
|
||
let m = date.getMonth() + 1;
|
||
if (m < 10) {
|
||
m = "0" + m;
|
||
}
|
||
let time = `${y}${m}`;
|
||
if (monthTypeList.indexOf(time) === -1) {
|
||
monthTypeList.push(time);
|
||
res.push({
|
||
label: time,
|
||
children: [item],
|
||
});
|
||
} else {
|
||
let index = monthTypeList.indexOf(time);
|
||
res[index].children.push(item);
|
||
}
|
||
});
|
||
}
|
||
if (res && res.length > 0) {
|
||
res.forEach((item) => {
|
||
// 获取
|
||
let obtain = 0;
|
||
// 消耗
|
||
let consume = 0;
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((item) => {
|
||
if (item.POINT_TYPE > 0) {
|
||
obtain += item.CURRENT_POINT;
|
||
}
|
||
if (item.POINT_TYPE < 0) {
|
||
consume += item.CURRENT_POINT;
|
||
}
|
||
});
|
||
}
|
||
item.obtain = obtain;
|
||
item.consume = consume;
|
||
});
|
||
}
|
||
console.log("res3213", res);
|
||
return res;
|
||
},
|
||
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;
|
||
},
|
||
getMemberPoint() {
|
||
// 获取会员积分
|
||
let _this = this;
|
||
|
||
this.$api
|
||
.getCoop({
|
||
action_type: "GetMemberPoint",
|
||
})
|
||
.then(function (rs) {
|
||
_this.memberPoint = rs.Data.MEMBERSHIP_POINT || 0;
|
||
});
|
||
},
|
||
signIn() {
|
||
// 签到
|
||
let _this = this;
|
||
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "signIn",
|
||
})
|
||
.then((res) => {
|
||
if (res.ResultCode === "100") {
|
||
_this.BonusPoint = res.Data.Bonus_Point;
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "getConsecutiveSignIn",
|
||
})
|
||
.then((rs) => {
|
||
uni.showToast({
|
||
title: "签到成功！",
|
||
icon: "none",
|
||
});
|
||
this.getMonth();
|
||
this.getMemberPoint();
|
||
});
|
||
} else if (res.ResultCode === "101") {
|
||
// _this.isShowSign = 2;
|
||
|
||
uni.showToast({
|
||
title: "今日已签到！",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
content: res.ResultDesc,
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.isShow = true;
|
||
}
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.loadingType = 1; // 正在在加载
|
||
// uni.showLoading({ title: "加载中" });
|
||
this.isLoading = true;
|
||
this.getMonth();
|
||
this.getMemberPoint();
|
||
// this.getMemberInfo()consumption/consumption_bg.png
|
||
let signTime = uni.getStorageSync("signTime");
|
||
let signDataLine = new Date(signTime).getTime();
|
||
let nowTime = new Date().getTime();
|
||
if (nowTime < signDataLine) {
|
||
this.showSgign = false;
|
||
}
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
onShow() {
|
||
this.pageMsg.pageIndex = 1;
|
||
},
|
||
onReachBottom() {
|
||
if (this.pageMsg.isLoadMore) {
|
||
this.pageMsg.pageIndex += 1;
|
||
this.getConsuptionRecord();
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100%;
|
||
background: #f5f5f5;
|
||
|
||
.markTitle {
|
||
width: 100%;
|
||
padding: 16rpx 40rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
|
||
.markLeft {
|
||
.mark {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 72rpx;
|
||
color: #ba922f;
|
||
line-height: 84rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.text {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.markRight {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ba922f;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.detailBox {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 32rpx;
|
||
|
||
.tabBox {
|
||
padding-bottom: 34rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
|
||
.title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.tabs {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 8rpx 24rpx;
|
||
background: #f5f6f7;
|
||
border-radius: 4rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.selectTab {
|
||
color: #ffffff;
|
||
background: #ba922f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.signIn {
|
||
background: #ba922f;
|
||
border-radius: 4rpx;
|
||
padding: 8rpx 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.markList {
|
||
width: 100%;
|
||
height: calc(100% - 184rpx);
|
||
margin-top: 32rpx;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
|
||
.markItem {
|
||
width: 100%;
|
||
margin-bottom: 48rpx;
|
||
|
||
.itemTitle {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.titleIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.label {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.value {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ba922f;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 32rpx;
|
||
}
|
||
}
|
||
|
||
.childrenList {
|
||
width: 100%;
|
||
|
||
.itemContent {
|
||
box-sizing: border-box;
|
||
padding: 24rpx 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
|
||
.top {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 4rpx;
|
||
|
||
.topLeft {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 80%;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.topRight {
|
||
.unit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ba922f;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
|
||
.value {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ba922f;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #716f69;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.markList::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.consumption {
|
||
background: #f5f5f5;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.consumption-card {
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
width: 100%;
|
||
height: 284rpx;
|
||
background: url("https://eshangtech.com/ShopICO/consumption/i-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: 20rpx;
|
||
}
|
||
|
||
.jump-btn {
|
||
background: url("https://eshangtech.com/ShopICO/consumption/i-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: 48rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.consumption-title-des {
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.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: 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: #de7e42;
|
||
}
|
||
|
||
.colorGr {
|
||
color: #45ab58;
|
||
}
|
||
|
||
.cp-u-price {
|
||
text-align: right;
|
||
font-size: 32rpx;
|
||
}
|
||
</style>
|