water-mall/pagesA/waterCard/waterCard.vue

867 lines
20 KiB
Vue
Raw Permalink Normal View History

2024-10-11 07:13:13 +00:00
<template>
<view class="main">
<status-nav :backgroudColor="backgroudColor" returnColor="#fff" navBarTitle="水卡管理"
titleColor="#fff"></status-nav>
<!-- 页面背景 -->
<image class="page-bg" src="/static/public/blue-bg2.jpg" mode="widthFix"></image>
<view class="user-spread content">
<view class="fs14 u-m-b-20 flex tc white" v-if="giftData.code">
<u-icon name="gift-fill" color="#fff" size="23"></u-icon>
<view class="u-m-l-10">当前充值金额 <text class="fs12 u-m-l-10"></text><text
class="fs20 bold">{{giftData.money}}</text></view>
</view>
<view class="main-boxs u-p-t-30">
<view v-if="cardList.length > 0">
<view class="user-vip" v-for="(item,index) in cardList" :key="index"
:class="item.status != 'normal' ? 'actionType' : ''">
<u-skeleton rows="1" :loading="ifLoading" :animate="true">
<view class="user-assets-box" :class="index == checked ? 'checkSe' : ''">
<view class="user-assets-header flex row-between">
<view class="flex nr bold" style="line-height: 80rpx;color: #8F430E;">
卡号
<text style="color: #FF2C3C;font-weight: bold;" class="price-format">
<text style="font-size: 30rpx;margin-right: 2rpx;">{{item.number}}</text>
</text>
</view>
<view class="white flex row-center" v-if="giftData.code">
<u-radio-group v-model="checked" placement="column" @change="groupChange">
<u-radio :name="index" activeColor="#3d9f3d" size="22" shape="circle"></u-radio>
</u-radio-group>
</view>
<view v-else>
<view hover-class="none" class="primary-btn white flex row-center fs12"
v-if="item.status == 'normal'" @tap="lossTap(index,'lost')">卡片挂失
</view>
<view hover-class="none" class="primary-btn white flex row-center fs12"
v-else-if="item.status == 'lost'" style="background: #999;">卡片已挂失
</view>
<view hover-class="none" class="primary-btn white flex row-center fs12"
v-else-if="item.status == 'cancel'" style="background: #999;">卡片已注销
</view>
</view>
</view>
<view class="user-assets-content flex flex-wrap">
<view class="user-item flex-col col-center">
<tool-tip class="m-t-20" id="today-profit" content="今日预估收益金额"
style="position: absolute;right: -66rpx;"></tool-tip>
<view class="nr user-assets-name flex" style="color: #8F430E">
当前余额
</view>
<view class="assets m-l-10">
<text style="color: #ff5200;font-weight: bold;" class="price-format">
<text style="font-size: 13px;margin-right: 2rpx;">¥</text>
<text style="font-size: 16px;margin-left: 4rpx;">{{item.value}}</text>
</text>
</view>
</view>
<view class="user-item flex-col col-center">
<view class="nr user-assets-name flex" style="color: #8F430E">
上次刷卡设备号
</view>
<view class="assets m-l-10">
<text style="color: #ff5200;font-weight: bold;" class="price-format">
<text
style="font-size: 13px;margin-right: 2rpx;">{{item.shopname || ''}}</text>
</text>
</view>
</view>
</view>
</view>
<view class="usual-tools-box" v-if="!giftData.code">
<view class="usual-content flex">
<view class="usual-item" @tap="cardTap(index,1)">
<view class="flex-col col-center">
<image src="/static/distribution/icon_yongjin.png" class="usual-item-img">
</image>
<view class="nr normal m-t-18" style="line-height: 40rpx">充值记录</view>
</view>
</view>
<view class="usual-item" @tap="cardTap(index,2)">
<view class="flex-col col-center">
<image src="/static/distribution/icon_invite.png" class="usual-item-img">
</image>
<view class="nr normal m-t-18" style="line-height: 40rpx">消费记录</view>
</view>
</view>
<view class="usual-item" @tap="cardTap(index,3)">
<view class="flex-col col-center">
<image src="/static/distribution/icon_delet.png" class="usual-item-img"></image>
<view class="nr normal m-t-18" style="line-height: 40rpx">删除</view>
</view>
</view>
</view>
</view>
</u-skeleton>
</view>
</view>
<view class="kong" v-else>
<u-empty mode="list" text="水卡是空的哟~">
<view class="mt10">
<u-button size="small" type="success" text="去添加水卡" @tap="goPage('/pagesA/addCard/addCard')">
</u-button>
</view>
</u-empty>
</view>
</view>
<view class="pl50 pr50 u-m-t-60" v-if="giftData.code">
<view v-if="!disabled">
<u-button size="large" shape="circle" text="提交充值" @click="submitForm"
color="linear-gradient(to left, #0aa00a,#11ca11)"></u-button>
</view>
<view class="op" v-else>
<u-button loadingText="加载中" shape="circle" size="large" loading loadingMode="circle" type="success"
color="linear-gradient(to left, #0aa00a,#11ca11)"></u-button>
</view>
</view>
</view>
<!-- 记录 -->
<u-popup :show="popShow" @close="close" :round="10">
<view class="record">
<view class="top_title">
<text class="text" v-if="recordValue == 1"></text>
<text class="text" v-if="recordValue == 2"></text>
<text class="num">当前卡号<text class="st">{{cardList[recordIndex].number}}</text></text>
</view>
<scroll-view :scroll-top="0" style="height: 800rpx;" scroll-y="true" @scrolltolower="scrolltolower">
<view class="pub-tableList" v-if="recordValue == 1">
<view class="a2">
<view class="boxs">
<view class="b1 b1-top">
<view class="st">充值金额</view>
<view class="st">充值时间</view>
<view class="st">实际到账</view>
<view class="st">操作人</view>
</view>
</view>
<view class="boxs">
<view class="b1" v-for="(item,index) in rechargeList" :key="index">
<view class="st">{{item.value}}</view>
<view class="st">{{item.time}}</view>
<view class="st">{{item.value_afterdiscount}}</view>
<view class="st">{{item.operater}}</view>
</view>
</view>
</view>
</view>
<view class="pub-tableList" v-if="recordValue == 2">
<view class="a2">
<view class="boxs">
<view class="b1 b1-top">
<view class="st">消费时间</view>
<view class="st">设备地址</view>
<view class="st">实际扣款</view>
<view class="st">余额</view>
</view>
</view>
<view class="boxs">
<view class="b1" v-for="(item,index) in userList" :key="index">
<view class="st">{{item.time}}</view>
<view class="st">{{item.location}}</view>
<view class="st">{{item.cost_value}}</view>
<view class="st">{{item.after_value}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</u-popup>
<!-- 删除模态框 -->
<u-modal :show="showDel" @cancel="cancelDel" :content="contentDel" :title="titleDel" @confirm="confirmDel"
ref="uModal" :asyncClose="true" :showCancelButton="true"></u-modal>
</view>
</template>
<script>
import {
getCardList,
postCardLost,
postGiftUse,
postCardDel
} from "@/api/index";
import {
getaddvalue,
getconsume,
getLossreport,
getCardinfo,
getproducts,
postAddvalue
} from "@/api/water";
export default {
data() {
return {
ifLoading: true,
baseHttps: `${getApp().globalData.hostapi}`, //接口链接
backgroudColor: 'none', //导航栏背景
popShow: false,
recordValue: 1, //1充值、2消费
recordIndex: '', //点击的第几个
otherCardList: [], //循环之后遍历的卡片列表
cardList: [], //本地存储卡片列表
rechargeList: [], //充值记录
userList: [], //消费记录
page: 1,
size: 100,
total: 0,
giftData: {
code: '',
money: '',
}, //礼品卡信息
checked: '-1',
disabled: false,
titleDel: '水卡删除',
showDel: false,
contentDel: '',
delCardIndex: '',
};
},
onPageScroll(object) {
if (object.scrollTop >= 5) {
this.backgroudColor = '#3a9e3a';
}
if (object.scrollTop <= 0) {
this.backgroudColor = 'none';
}
},
onLoad(op) {
if (op) {
this.giftData.code = op.code;
this.giftData.money = op.money;
this.getCardData();
} else {
this.getCardData();
}
},
onShow(options) {},
methods: {
close() {
this.popShow = false;
},
// 跳转页面
goPage(url){
uni.navigateTo({
url:url
})
},
// 获取卡片列表
getCardData() {
let params = {
page: this.page,
size: this.size
}
getCardList(params).then(res => {
this.total = res.data.total;
let newArray = res.data.list.map(item => ({
appid: item.appid,
user: item.saler,
card: item.number
}));
this.fetchAllDataByIds(newArray);
})
},
async fetchAllDataByIds(array) {
await array.forEach((item, index) => {
this.cardListData(item);
})
this.ifLoading = false;
console.log(this.cardList)
},
// 请求生钛圈水卡详情
cardListData(data) {
let params = {
appid: data.appid,
user: data.user,
card: data.card
}
getCardinfo(params).then(res => {
if (res.error == 0) {
let newData = {
appid: data.appid,
...res.data
}
if (this.giftData.code) {
newData.checked = false
}
this.cardList.push(newData);
//会员卡状态 normal正常 lost挂失 cancel 已注销(不能使用)
}
})
},
//1、充值记录 2、消费记录 3、删除
cardTap(index, type) {
this.recordIndex = index;
let params = {
appid: this.cardList[index].appid,
user: this.cardList[index].saler,
card: this.cardList[index].number,
}
this.recordValue = type;
if (type == 1) {
getaddvalue(params).then(res => {
if (res.error == 0) {
if (res.data.length > 0) {
this.rechargeList = res.data;
this.popShow = true;
} else {
this.$toolAll.tools.showToast('还没有充值记录~')
}
}
})
} else if (type == 2) {
getconsume(params).then(res => {
if (res.error == 0) {
if (res.data.length > 0) {
this.userList = res.data;
this.popShow = true;
} else {
this.$toolAll.tools.showToast('还没有消费记录~')
}
}
})
} else if (type == 3) {
this.delCardIndex = index;
this.contentDel = '您确定要删除' + this.cardList[index].number + '这张水卡?';
this.showDel = true;
}
},
// 取消删除
cancelDel() {
this.showDel = false;
},
// 确定删除
confirmDel() {
let paramsData = {
number: this.cardList[this.delCardIndex].number,
}
postCardDel(paramsData).then(res => {
if (res.code == 0) {
this.showDel = false;
this.$toolAll.tools.showToast('删除成功');
setTimeout(() => {
uni.redirectTo({
url: "/pagesA/waterCard/waterCard"
})
}, 1000)
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
},
// 卡片挂失
lossTap(index, type) {
let params = {
appid: this.cardList[index].appid,
saler: this.cardList[index].saler,
card: this.cardList[index].number,
action: type
}
getLossreport(params).then(res => {
if (res.code == 0) {
this.$toolAll.tools.showToast('挂失成功');
uni.redirectTo({
url:"/pagesA/waterCard/waterCard"
})
}
})
},
// 选择卡片充值
groupChange(e) {
this.checked = e;
},
// 提交充值
submitForm() {
if (this.checked >= 0) {
this.disabled = true;
setTimeout(() => {
this.disabled = false;
}, 2500)
// 充值
let params = {
appid: this.cardList[this.checked].appid,
user: this.cardList[this.checked].saler,
card: this.cardList[this.checked].number,
value: this.giftData.money,
income: this.giftData.money,
password: this.cardList[this.checked].saler,
}
postAddvalue(params).then(res => {
if (res.error == 0) {
let paramsData = {
code: this.giftData.code
}
postGiftUse(paramsData).then(resData => {
if (resData.code == 0) {
this.$toolAll.tools.showToast('充值成功');
setTimeout(() => {
uni.redirectTo({
url: "/pagesA/waterCard/waterCard"
})
}, 1200)
}
})
} else {
this.$toolAll.tools.showToast('充值失败')
}
})
} else {
this.$toolAll.tools.showToast('请选择您要充值的卡号!')
}
},
}
};
</script>
<style lang="scss" scoped>
.page-bg {
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
.user-spread {
.header {
justify-content: space-between;
.user-info {
.user-avatar {
position: relative;
width: 120rpx;
height: 120rpx;
overflow: hidden;
background-color: #ececec;
border-radius: 50%;
.image {
width: 110rpx;
}
}
.avatar-tag {
display: inline-flex;
align-items: center;
line-height: 40rpx;
}
.user-message {
.write-btn {
height: 42rpx;
width: 100rpx;
background-color: #FF838D;
}
}
}
}
.main-boxs {
.user-vip {
background: linear-gradient(90deg, #FBEFDB 0%, #FED09E 100%);
border-radius: 20rpx;
margin-bottom: 40rpx;
&.actionType {
background: #ddd;
}
.user-assets-box {
border: 1px solid transparent;
padding: 14rpx 30rpx;
border-radius: 10rpx;
&.checkSe {
border: 1px solid #f00;
}
.user-assets-header {
border-bottom: 1rpx dashed #8F430E;
padding-bottom: 4rpx;
.primary-btn {
height: 54rpx;
border-radius: 120rpx;
width: 144rpx;
background: linear-gradient(180deg, #FF3067 0%, #FF2C3C 100%);
}
}
.user-assets-content {
margin-top: 30rpx;
.user-item {
flex: 1;
position: relative;
.user-assets-name {
text-align: left;
align-self: flex-start;
}
.assets {
margin-top: 6rpx;
text-align: left;
align-self: flex-start;
}
}
}
}
.fans-msg-box {
border-radius: 10rpx;
line-height: 42rpx;
.my-fans {
height: 100rpx;
}
.line {
width: 3rpx;
height: 60rpx;
background-color: #E5E5E5;
}
.invite-fans {
height: 120rpx;
}
}
.my-invite-box {
padding: 26rpx 0 57rpx;
border-radius: 10rpx;
.invite-copy-btn {
line-height: 30rpx;
padding: 10rpx;
background: linear-gradient(90deg, #FEE4B4 0%, #FBCB96 100%);
color: #8F430E;
border-radius: 4rpx;
}
.my-promote-banner {
margin-top: 30rpx;
height: 148rpx;
width: 542rpx;
border-radius: 10rpx;
}
}
.usual-tools-box {
border-radius: 10rpx;
padding: 0 25rpx;
.usual-tools-header {
height: 100rpx;
line-height: 44rpx;
border-bottom: 1px solid #ececec;
}
.usual-content {
padding: 40rpx 0;
.usual-item {
flex: 1;
box-sizing: border-box;
.usual-item-img {
width: 44rpx;
height: 44rpx;
flex: none;
}
}
}
}
}
.user-apply-box {
.user-apply-vip {
background-color: white;
padding: 40rpx 0 0rpx;
border-radius: 20rpx;
.title {
line-height: 30rpx;
font-weight: bold;
}
.explain {
margin-top: 20rpx;
image {
width: 24rpx;
height: 24rpx;
flex: none;
}
span {
font-size: 20rpx;
line-height: 30rpx;
}
}
.vip-form {
width: 100%;
margin-top: 60rpx;
.form-item {
border: 1px solid #ececec;
margin: 0 30rpx 30rpx;
}
}
}
.apply-btn {
line-height: 30rpx;
height: 82rpx;
}
}
.user-result-box {
.user-result {
background-color: white;
padding: 36rpx 14rpx 50rpx;
border-radius: 20rpx;
.user-result-header {
.title {
line-height: 30rpx;
font-weight: bold;
}
}
.user-result-content {
padding: 60rpx 0 22rpx;
width: 100%;
border-bottom: 1px solid #ececec;
.apply-result-img {
width: 100rpx;
height: 100rpx;
}
}
.user-result-info {
margin-top: 42rpx;
width: 100%;
.info-item {
margin-left: 60rpx;
margin-bottom: 28rpx;
line-height: 30rpx;
.label {
width: 140rpx;
}
}
}
}
.apply-btn {
line-height: 30rpx;
height: 82rpx;
}
.bg-gray {
background-color: #CCCCCC;
}
}
}
}
.main .user-apply-box .apply-btn {
line-height: 30rpx;
height: 82rpx;
}
.main .user-result-box .user-result-content .apply-fail-reason {
color: #333;
line-height: 36rpx;
margin-top: 10rpx;
}
.shareEvm {
width: 300rpx;
height: 300rpx;
background-color: #ececec;
overflow: hidden;
}
.shareEvm .image {
width: 100%;
height: auto;
}
.vip-grade-rule {
padding: 30rpx 0rpx;
.title {
.line {
width: 8rpx;
height: 34rpx;
background-color: #f79c0c;
}
}
}
.price-format {
line-height: 50rpx;
}
.record {
padding: 30rpx;
.top_title {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ececec;
padding-bottom: 20rpx;
.text {
font-size: 34rpx;
font-weight: bold;
color: #3d9f3d;
}
.num {
font-size: 28rpx;
color: #ff5200;
.st {
font-size: 32rpx;
}
}
}
}
.pub-tableList {
background-color: #fff;
margin-top: 30rpx;
.a1 {
font-size: 32rpx;
color: #2ab2ee;
letter-spacing: 1px;
}
.a2 {
.boxs {
.b1 {
border-bottom: 1px solid #e8e8e8;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
.st {
font-size: 26rpx;
text-align: center;
overflow-wrap: break-word;
padding:0 6rpx;
box-sizing: border-box;
&:nth-child(1) {
width: 25%;
}
&:nth-child(2) {
width: 30%;
font-size: 24rpx;
}
&:nth-child(3) {
width: 20%;
}
&:nth-child(4) {
width: 25%;
}
}
&.b1-top {
background-image: linear-gradient(90deg, #3d9f3d, #008b00);
.st {
font-size: 28rpx;
color: #fff;
font-weight: bold;
}
}
}
.b2 {
background-color: #f1f7f7;
height: 0;
visibility: hidden;
opacity: 0;
transition: opacity .8s ease;
&.on {
height: auto;
visibility: visible;
opacity: 1;
}
.td {
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 100rpx;
color: #333;
border-bottom: 1px solid #e8e8e8;
}
.b2-top {
font-size: 24rpx;
font-weight: bold;
}
.st {
text-align: center;
flex: 1;
}
}
}
}
}
</style>