Initial commit: 积分兑换电商平台多商户版 MER-2.2
Made-with: Cursor
This commit is contained in:
apple
232
mer_uniapp/pages/member/shoppingFund_details/flowList.vue
Normal file
232
mer_uniapp/pages/member/shoppingFund_details/flowList.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<view class="borderPad">
|
||||
<view class="borRadius14">
|
||||
<!-- Tabs -->
|
||||
<view class="bg--w111-fff borders-radius-top">
|
||||
<view class="nav acea-row row-middle borders-radius-top">
|
||||
<view class="item" :class="type === item.type ? 'on' : ''" v-for="(item,index) in navList" :key="index" @click="changeType(item.type)">
|
||||
<view :class="type === item.type ? 'font-color' : ''">{{item.name}}</view>
|
||||
<view class="line" v-if="type === item.type"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- List -->
|
||||
<view class="list borRadius14">
|
||||
<view v-for="(item, index) in flowData" :key="index">
|
||||
<view class="time-header f-s-26 text-999 pl-24 pt-32 pb-24" :class="index===0?'bg--w111-fff':''">
|
||||
{{item.yearMonth}}
|
||||
</view>
|
||||
<view class="bg--w111-fff borderPad" :class="index===0?'borders-radius-bottom':'borRadius14'">
|
||||
<view :style="index===0 && subIndex === 0 ?'padding-top: 0 !important;':''" class="list-item flex justify-between align-center pt-30 pb-30" v-for="(subItem, subIndex) in item.recordList" :key="subIndex">
|
||||
<view>
|
||||
<view class="f-s-28 text-333 mb-12">{{subItem.title}}</view>
|
||||
<view class="f-s-24 text-999">{{subItem.createTime}}</view>
|
||||
</view>
|
||||
<view class="text-right flex-col flex-x-center">
|
||||
<view class="f-s-22 text-999 mb-12">本金 <text class="regular f-s-36 text-333"> {{subItem.type === 1 ? '+' : '-'}} {{subItem.rechargeAmount}}</text></view>
|
||||
<view class="f-s-22 text-999">赠送 <text class="regular f-s-36 text-333"> {{subItem.type === 1 ? '+' : '-'}} {{subItem.giftAmount}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="text-center order-list-empty" v-if="loadOptions.loaded && flowData.length && flowData.length === 1">-->
|
||||
<!-- 暂无更多～-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 空状态提示 -->
|
||||
<view v-if="!loadOptions.loading" class="bg--w111-fff borders-radius-bottom">
|
||||
<view class="text-center order-list-empty" v-if="loadOptions.loaded && flowData.length && flowData.length>1">
|
||||
暂无更多～
|
||||
</view>
|
||||
<view v-else-if="flowData.length === 0" class="nothing">
|
||||
<emptyPage title="暂无记录~" mTop="20%" :imgSrc="urlDomain+'crmebimage/presets/nodingdan.png'" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shoppingCreditsUserRecordApi } from "../memberApi";
|
||||
import emptyPage from "../../../components/emptyPage";
|
||||
|
||||
export default {
|
||||
name: "flowList",
|
||||
components: {
|
||||
emptyPage
|
||||
},
|
||||
props: {
|
||||
merId: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urlDomain: this.$Cache.get("imgHost"),
|
||||
type: 'all',
|
||||
navList:[
|
||||
{
|
||||
name: '全部',
|
||||
type: 'all'
|
||||
},
|
||||
{
|
||||
name: '消费',
|
||||
type: 'consume'
|
||||
},
|
||||
{
|
||||
name: '充值',
|
||||
type: 'recharge'
|
||||
},
|
||||
{
|
||||
name: '退款',
|
||||
type: 'refund'
|
||||
}
|
||||
],
|
||||
flowData: [],
|
||||
loadOptions: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
total: 0,
|
||||
loading: false,
|
||||
loaded: false
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted(options) {
|
||||
this.getFlowList();
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.handleResetLoadOptions()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 搜索条件
|
||||
queryParams() {
|
||||
const params = {
|
||||
merId: this.merId,
|
||||
searchType: this.type
|
||||
};
|
||||
return params;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeType(type) {
|
||||
this.type = type;
|
||||
},
|
||||
handleResetLoadOptions() {
|
||||
this.flowData = [];
|
||||
this.loadOptions.page = 1;
|
||||
this.loadOptions.total = 0;
|
||||
this.loadOptions.loaded = false;
|
||||
this.loadOptions.loading = false;
|
||||
this.getFlowList();
|
||||
},
|
||||
async getFlowList(){
|
||||
const { loading, loaded, page, limit } = this.loadOptions;
|
||||
if (loading || loaded) return;
|
||||
this.loadOptions.loading = true;
|
||||
try {
|
||||
const res = await shoppingCreditsUserRecordApi({
|
||||
...this.queryParams,
|
||||
page,
|
||||
limit
|
||||
})
|
||||
const list = res.data.list,
|
||||
loadend = res.data.totalPage <= page;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let time1 = list[i].yearMonth;
|
||||
let array1 = list[i].recordList;
|
||||
let isEquals = false;
|
||||
for (let j = 0; j < this.flowData.length; j++) {
|
||||
let time2 = this.flowData[j].yearMonth;
|
||||
let array2 = this.flowData[j].recordList;
|
||||
if (time1 == time2) {
|
||||
array2.push.apply(array2, array1);
|
||||
this.flowData[j].recordList = array2;
|
||||
isEquals = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!isEquals) {
|
||||
this.flowData.push({
|
||||
yearMonth: time1,
|
||||
recordList: array1
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$set(this, 'flowData', this.flowData);
|
||||
this.$set(this.loadOptions, 'page', this.loadOptions.page + 1);
|
||||
this.loadOptions.total = res.data.total;
|
||||
this.loadOptions.loaded = loadend
|
||||
this.loadOptions.loading = false;
|
||||
} catch (err) {
|
||||
this.$util.Tips({
|
||||
title: err,
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
this.loadOptions.loading = false;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.borders-radius-bottom{
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
}
|
||||
.borders-radius-top{
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
padding: 36rpx 24rpx 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
font-size: 30rpx;
|
||||
color: #303133;
|
||||
margin-right: 60rpx;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.on {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: -14rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
@include main_bg_color(theme);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-bottom: 30rpx;
|
||||
.list-item {
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
&:nth-last-child(1),
|
||||
&:last-child {
|
||||
border: none;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
mer_uniapp/pages/member/shoppingFund_details/index.vue
Normal file
168
mer_uniapp/pages/member/shoppingFund_details/index.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view :data-theme="theme">
|
||||
<view class='my-account mb-20 pt-28 relative'>
|
||||
<!-- #ifdef MP -->
|
||||
<view class="relative">
|
||||
<nav-bar :isBackgroundColor="false" ref="navBarRef" navTitle='购物金明细' :isShowMenu="false" :backgroundColor="backgroundColor">
|
||||
</nav-bar>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class='wrapper borderPad'>
|
||||
<view class='header borRadius14'>
|
||||
<view class='headerCon'>
|
||||
<view class="pictrue">
|
||||
<image :src="urlDomain+'crmebimage/presets/jar.png'"></image>
|
||||
</view>
|
||||
<view class='account acea-row row-top row-between'>
|
||||
<view class='assets'>
|
||||
<view>购物金余额(元)</view>
|
||||
<view class="flex align-baseline mt-22">
|
||||
<view class='money semiBold'>{{ merMemberAsset.shoppingCreditsBalance }}</view>
|
||||
<view class="f-s-24 ml-12 regular">包含赠送 {{merMemberAsset.giftAmount}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between w-full absolute bottom-40 left-0 box-border">
|
||||
<view v-for="(item,index) in detailsList" :key="index">
|
||||
<view class="f-s-24 mb-12">{{item.name}}</view>
|
||||
<view class="semiBold f-s-40">{{item.value}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<flow-list :merId="merId" ref="flowRef"></flow-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import navBar from "../../../components/navBar";
|
||||
import {setLinearThemeColor} from "../../../utils/setTheme";
|
||||
import {shoppingCreditsUserAssetApi} from "../memberApi";
|
||||
import flowList from "./flowList";
|
||||
|
||||
let app = getApp();
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
navBar,
|
||||
flowList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
merId: 0,
|
||||
merMemberAsset: {},
|
||||
detailsList: [],
|
||||
urlDomain: this.$Cache.get("imgHost"),
|
||||
theme: app.globalData.theme,
|
||||
isNoCommodity: false,
|
||||
backgroundColor: '',
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.merId = Number(options.merId)
|
||||
this.getMerMemberInfo();
|
||||
},
|
||||
methods: {
|
||||
//店铺会员信息
|
||||
async getMerMemberInfo(){
|
||||
let { data } = await shoppingCreditsUserAssetApi(this.merId)
|
||||
this.merMemberAsset = data
|
||||
this.detailsList = [
|
||||
{
|
||||
name: '累计充值(元)',
|
||||
value: data.rechargeTotalAmount
|
||||
},
|
||||
{
|
||||
name: '累计赠送(元)',
|
||||
value: data.giftTotalAmount
|
||||
},
|
||||
{
|
||||
name: '累计消费(元)',
|
||||
value: data.consumeTotalAmount
|
||||
}
|
||||
]
|
||||
},
|
||||
changeType(type) {
|
||||
this.type = type;
|
||||
// 这里可以添加重新获取列表的逻辑
|
||||
}
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll(e) {
|
||||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||||
uni.$emit('scroll');
|
||||
// #ifdef MP
|
||||
if (e.scrollTop > 50) {
|
||||
this.backgroundColor = '#fff';
|
||||
} else if (e.scrollTop < 50) {
|
||||
this.backgroundColor = '';
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onReachBottom() {
|
||||
console.log('触底')
|
||||
this.$refs.flowRef.getFlowList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-account{
|
||||
@include shallow-gradient(theme);
|
||||
}
|
||||
.box-border{
|
||||
width: 702rpx;
|
||||
height: 142rpx;
|
||||
padding: 30rpx 36rpx;
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
.wrapper .header {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 362rpx;
|
||||
@include linear-gradient(theme);
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
position: relative;
|
||||
|
||||
.money {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.headerCon{
|
||||
position: relative;
|
||||
padding: 40rpx 30rpx 64rpx 30rpx;
|
||||
.pictrue {
|
||||
width: 250rpx;
|
||||
height: 166rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 54rpx;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.align-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user