运行样子：
过程原理：
点击不同的页面，跳转同一个弹窗，但是是不同的状态，比如1页面是对象的颜色是绿色，那么弹窗对象颜色也是绿色，同理2页面3页面分别对象是黄色和蓝色，那么弹窗对象颜色也是黄色和蓝色
由于源码比较多，所以我只针对这个功能实现对应的代码，
1、假设三个页面分别是charge和gold和gambridge，自定义组件是typeexre
然后在charge和gold和gambridge文件中定义一个点击按钮触发的方法，例如typepires方法
2、在template中按钮上绑定这个方法：
只需要看红线部分就可以了，其他的不用管。然后每个页面绑定不同的值：
charge绑定这activeTab的值是0：
gold绑定的activeTab的值是1
gambridge绑定的activeTab的值是2
然后再三个页面的template中，选中activeTab变量
3、在自定义组件typeexre中，接受传递过来的activetab值，并且将其保存在data中：
注意：为了区分传过来的值和接受的值，传过来的值是activeTab，接收的值是activeTap
这样就完成了父传子数据的操作了，后面是源码：
charge：
<template>
<view>
<view class="Classify">
<view :class="[activeTab === 0 ? 'Expenditurelv':'Expenditure']" @click="expendituer(0)">支出</view>
<view :class="[activeTab === 1 ? 'ExpenditureH':'Expenditure']" @click="expendituer(1)">入账</view>
<view :class="[activeTab === 2 ? 'ExpenditureL': 'Expenditure']" @click="expendituer(2)">不计入收支</view>
<view class="Expendituretime" :style="timeColor" @click="time()">
<view style="width: auto;height: 60rpx; ">
<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick"
@change="change" />
</view>
<view
style=" width: auto; height: 60rpx; display: flex; justify-content: center; align-items: center; ">
<image src="/static/image/downward.png" mode="aspectFit"
style="width: 30rpx; height: 30rpx;margin: 7rpx 0 0 4rpx"></image>
</view>
</view>
</view>
<view v-show="activeTab == 0">
<view class="money-input">
<view class="input-container" @click="toggleBox">
<view class="input-wrapper">
<view class="input-iconone">
<image src="/static/Tall-Book-Images/rmb.png" mode="aspectFit"
style="width: 60rpx; height: 60rpx;"></image>
</view>
<view
style="width: auto; height: 100%;line-height: 156rpx; padding-left: 80rpx; font-size: 80rpx; color: #333;">
{{nums}}
</view>
<view class="input-icon" :class="{active: showBox}"></view>
</view>
</view>
</view>
<view class="Type">
<view class="Type-box" v-for="(item,index) in box " :key="index" @click="select(index)"
:style="iphone(index)">
<view class="inctiveclass" :class="{activeclass: activeIndex === index}">
<image :src="item.showimg ? item.imgs : item.img" mode="aspectFit"
style="width: 50rpx; height: 50rpx;"></image>
</view>
<view class="box-text" :class="[item.showimg? 'box-ative': 'box-text']">
<view>{{item.name}}</view>
</view>
</view>
<view class="Type-box" :class="{Typeboxactive: activeIndextype === true}">
<view class="inctiveclass" :class="{activeclass: activeIndextype === true}" :style="styletype"
@click="typepires">
<image :src="imgsrc" mode="aspectFit" style="width: 50rpx; height: 50rpx;"></image>
</view>
<view
style=" display: flex; color: #66789f; justify-content: flex-end; align-items: center; width: 100%; margin-top: 10rpx; height: 40rpx; text-align: center; font-size: 24rpx;">
<view>分类管理</view>
<image src="/static/Tall-Book-Images/exitone.png" mode="aspectFit"
style="width: 20rpx; height: 20rpx;"></image>
</view>
</view>
</view>
<view class="remark">
<view class="remarks" @click="remark()" :style="styleremark">
添加备注
</view>
</view>
<view class="numbers">
<view
style=" display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; width: 72%; height: auto;">
<view @click="changeNums(item,index)" :class="item.class" :style="getListitemstyle(index)"
v-for="(item,index) in numbers">
{{item.text}}
</view>
</view>
<view style="width: 28%; height: auto; display: flex; flex-flow: column wrap; ">
<view @click="jianshao()" class="oner" :style="styleos">
<image src="/static/Tall-Book-Images/qc.png" mode="aspectFit"
style="width: 50rpx; height: 50rpx;"></image>
</view>
<view class="onerplus" @click="ok()" :style="stylelv">
确认
</view>
</view>
</view>
</view>
<!-- <view >
{{showset}}
</view> -->
<view v-show="activeTab == 1">
<gold></gold>
</view>
<view v-show="activeTab == 2">
<gambridge></gambridge>
</view>
<u-popup :show="showtype" mode="right" @close="closeyoushow"><!--分类管理弹窗-->
<typeexre :activeTab="activeTab" @updateList="updateList" @close="closeyoushow" ></typeexre>
</u-popup>
<u-popup round="10" :show="showremark" mode="bottom" @close="closeremark"><!--备注弹窗-->
<view style="width: 100%; height: 650rpx; ">
<view class="top">
<view class="window" @click="close()">
<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit"
style="width: 40rpx; height: 40rpx;"></image>
</view>
<view
style=" font-size: 20px; text-align: center; line-height: 80rpx; width: 220rpx; height: 80rpx; position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
添加备注
</view>
</view>
<view class="center">
<uni-easyinputs v-model="valuemark" maxlength="30" @input="input" placeholder="输入备注内容"></uni-easyinputs>
<view class="Record-remarks-number-of-words" :style="{color: isimit ? '#c90003' : '#c9c9c9'}" >
{{showCharacterCount}}
</view>
</view>
<view class="bottom">
<button class="comfors" :style="active" @click="comfors">确定</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import typeexre from '@/components/typeexre/typeexre.vue'
import {BillList,BillListInsert} from '@/api/bill.js' //这里是用来接收typeexre页面获取它增删改查的数据
export default {
props:{
showset:{
type:Boolean,
default:false
}
},
components:{
typeexre
},
data() {
return {
active: {
background: ' #f2f2f2',
color: '#d4d4d4'
},//这是确定按钮的样式
styletype: {
background: '' //这是分类管理初始颜色
},
styleremark: {
background: '' //这是备注初始颜色
},
styleos: {
background: '#ffffff'//这是确认的初始颜色
},
stylelv: {
background: '#9cd7b7' //确认按钮颜色初始
},
activeTab:0,//传值传入到typeexre页面中
single: '',
nums: '',
times:'',//事实时间
imgsrc: '/static/Tall-Book-Images/slh.png', //分类管理图片
isimit:false,//判断备注是否超过了最大限制标志位
showBox: false, //是否显示‘|’
activeIndextype: false, //这是判断是否改变分类管理圆中的样式
showtime: false, //日历弹窗
value: 0, //支出、入账、不计入收支改变颜色的初始值
showCode: true, //支出分类
showCodeR: false, //入账分类
showCodeL: false, //不计入收支
activeIndex: 0, //默认选中索引
sumindex: -1, //数字键盘索引
showtype: false, //分类管理弹窗开关
showremark: false,//备注弹窗
// showset:false,//测试
valuemark:'',//备注输入框
timeColor: {
background: '#f7f7f7' //记一笔时间点击前颜色
},
box: [{
name: '餐饮',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/cy.png',
imgs: '/static/Tall-Book-Images/cy1.png',
class: 'Clicre',//背景绿色样式
showimg: true,
background: '',
},
{
name: '交通',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/jt.png',
imgs: '/static/Tall-Book-Images/jt1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '服饰',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yf.png',
imgs: '/static/Tall-Book-Images/yf1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '购物',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/gw.png',
imgs: '/static/Tall-Book-Images/gw1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '服务',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/sd.png',
imgs: '/static/Tall-Book-Images/sd1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '教育',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/jy.png',
imgs: '/static/Tall-Book-Images/jy1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '娱乐',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/ht.png',
imgs: '/static/Tall-Book-Images/ht1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '运动',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/lq.png',
imgs: '/static/Tall-Book-Images/lq1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '生活缴费',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/fz.png',
imgs: '/static/Tall-Book-Images/fz1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '旅行',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/lx.png',
imgs: '/static/Tall-Book-Images/lx1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '宠物',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/cw.png',
imgs: '/static/Tall-Book-Images/cw1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: ''
},
{
name: '医疗',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yl.png',
imgs: '/static/Tall-Book-Images/yl1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '保险',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/bxs.png',
imgs: '/static/Tall-Book-Images/bx1s.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '公益',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/xin.png',
imgs: '/static/Tall-Book-Images/xin1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '发红包',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/hb.png',
imgs: '/static/Tall-Book-Images/hb1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '转账',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/zz.png',
imgs: '/static/Tall-Book-Images/zz1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '亲属卡',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yhk.png',
imgs: '/static/Tall-Book-Images/yhk1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '其他人情',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/qtrq.png',
imgs: '/static/Tall-Book-Images/qtrq1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '其他',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/qt.png',
imgs: '/static/Tall-Book-Images/qt1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '退还',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/thsh.png',
imgs: '/static/Tall-Book-Images/thsh1.png',
class: 'Clicre',//背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
}
],
numbers: [
{
text: '1',
class: 'oner',
background: '#ffffff'
},
{
text: '2',
class: 'oner',
background: '#ffffff'
},
{
text: '3',
class: 'oner',
background: '#ffffff'
},
{
text: '4',
class: 'oner',
background: '#ffffff'
},
{
text: '5',
class: 'oner',
background: '#ffffff'
},
{
text: '6',
class: 'oner',
background: '#ffffff'
},
{
text: '7',
class: 'oner',
background: '#ffffff'
},
{
text: '8',
class: 'oner',
background: '#ffffff'
},
{
text: '9',
class: 'oner',
background: '#ffffff'
},
{
text: '0',
class: 'big',
background: '#ffffff'
},
{
text: '.',
class: 'oner',
background: '#ffffff'
},
]
}
},
computed:{
showCharacterCount(){//添加中备注字数限制
const count = this.valuemark.length;
this.isimit = count >=30
return `${count}/${30}`
console.log('this.isimit',this.isimit)
}
},
created(){
this.BillList() //这里是用来接收typeexre页面获取它增删改查的数据
// this.BillListOne()
},
methods: {
async BillList() { //获取列表账单的数据
const data = await BillList()
console.log('data', data)
},
// async BillListOne() {
// const dataOne= await BillListOne()
// console.log('dataOne',dataOne)
// },
comfors() {
if (this.valuemark) {
this.active.background = "#33955f"
setTimeout(() => {
this.active.background = "#3eb575"
this.showremark= false
}, 150)
}
},
input(e) {
console.log('输入内容：', e);
// console.log('this.index.lenth', this.value.length)
this.valuemark = e
if (this.valuemark) {
this.active.background = '#3eb575'
this.active.color = '#ffffff'
} else {
this.active.background = '#f2f2f2'
this.active.color = '#d4d4d4'
}
},
ok() {
this.times = new Date().toLocaleDateString()//获取实时时间
let activeBox = this.box[this.activeIndex || 0]
let obj = {
amount: this.nums,
log_type:this.activeTab,
item_id:activeBox.name,
icon:activeBox.imgs,
source:'手动记账',
calendar:this.times,
place: this.valuemark,
...this.box[this.activeIndex || 0]//将数值传入到主页
}
this.stylelv.background = '#3bab6f'
setTimeout(() => {
this.stylelv.background = '#9cd7b7'
}, 150)
console.log('obj', obj)
if(this.nums !== ''){ //判断是否为空输入的金额
this.$emit('handleSubmit',obj)
this.$emit('close')//关闭弹窗
}
if(this.nums !== '' && this.showset){
this.$emit('handleSubmitset',obj)
this.$emit('close')
this.showset = false
}
},
jianshao() {
this.styleos.background = '#f7f7f7'
setTimeout(() => {
this.styleos.background = '#ffffff'
}, 150)
if (this.nums) {
this.nums = this.nums.substring(0, this.nums.length - 1)
}
},
changeNums(item, index) {
this.numbers.forEach((item, idx) => {
if (idx === index) {
item.background = '#f7f7f7';
setTimeout(() => {
item.background = '#ffffff';
}, 150)
}
});
this.sumindex = index
// console.log('this.sumindex', this.sumindex)
if (item.text == '.') {
console.log(this.nums.indexOf(".") != -1)
if (this.nums.indexOf(".") != -1 || this.nums.length==0) {
return false
}
}
if (this.nums.split('.') && this.nums.split('.')[1]) {
if (this.nums.split('.')[1].length >= 2) {
return false
}
}
this.nums = this.nums + item.text
},
getListitemstyle(index) {
return {
background: this.numbers[index].background
};
},
close() {
this[`show${this.showtime}`] = false
this.showremark = false
},
confirm(e) {
console.log(e);
this.showtime = false
},
remark() {//点击备注改变颜色打开弹窗
this.styleremark.background = '#cecece'
setTimeout(() => {
this.styleremark.background = '#ffffff'
this.showremark = true
}, 150)
},
select(index) {//支出的选项实现的方法比如：保险、公益、发红包
this.activeIndex = index
console.log(index)
this.box.forEach((item, i) => {
if (i === index) {
item.background = '#e5e5e5';
setTimeout(() => {
item.background = '';
}, 150)
item.showimg = true;
} else {
item.background = '';
item.showimg = false;
}
});
},
iphone(index) {
return {
background: this.box[index].background
};
},
time() {
this.timeColor.background = '#dedede' //点击中记一笔时间的颜色
setTimeout(() => {
this.timeColor.background = '#f7f7f7' //点击后记一笔时间的颜色
}, 200)
this.showtime = true
},
expendituer(tab) { //点击支出
this.activeTab = tab
},
toggleBox() {
this.showBox = true //点击后输入框出现“|”每隔一段时间闪动
},
maskClick(e) {
console.log('maskClick事件:', e);
},
change(e) {
this.single = e;
console.log("-change事件:", e);
},
closeyoushow() {
this.showtype = false
}, //关闭分类弹窗
closeremark() {
this.showremark = false
},
async updateList(val) {
console.log('valcharge',val)
let valchargePort ={
title: val.name,
ico: val.imgs,
rank:val.rank,
log_type:val.log_type
}
this.box.push(val)
await BillListInsert(valchargePort)
this.BillList()
// this.$refs.popup.close()
// this.showtype = Boolean(!val)
//关闭分类管理弹窗
},
remarks(val) {
console.log('com', val)
this.showremark = Boolean(!val)
console.log('this.showremark', this.show)
},
typepires() {
this.activeIndextype = true
this.showtype = true
this.$emit('activeTab',this.activeTab)//测试
this.imgsrc = '/static/Tall-Book-Images/slh1.png'
setTimeout(() => {
this.imgsrc = '/static/Tall-Book-Images/slh.png'
this.activeIndextype = false
}, 1000)
}
},
}
</script>
<style lang="scss" scoped>
.Classify {
width: 100%;
display: flex;
height: 120rpx;
margin-top: 10rpx;
padding-left: 20rpx;
padding-right: 30rpx;
align-items: center;
margin-bottom: -12rpx;
justify-self: flex-start;
}
.Expenditure {
width: auto;
height: 60rpx;
color: #c7c7c7;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f7f7f7;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.Expendituretime {
width: auto;
color: black;
display: flex;
height: 60rpx;
font-size: 30rpx;
line-height: 60rpx;
margin-left: 32rpx;
align-items: center;
border-radius: 10rpx;
background-color: #f7f7f7;
justify-content: space-evenly;
padding: 0rpx 15rpx 0rpx 20rpx;
}
.Expenditurelv {
width: auto;
height: 60rpx;
color: #3eb575;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #ebf7f1;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureH {
width: auto;
height: 60rpx;
color: #f5c53a;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #fdf8eb;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureL {
width: auto;
height: 60rpx;
color: #8c8bc3;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f1f3f6;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.money-input {
width: 100%;
height: 150rpx;
padding: 0 40rpx 0 40rpx;
}
.Type {
width: 100%;
height: 154px;
display: flex;
margin-top: 20rpx;
align-items: center;
flex-flow: row wrap;
justify-content: flex-start;
overflow-y: auto;
}
.Type-box {
display: flex;
width: 120rpx;
height: 140rpx;
align-items: center;
flex-flow: column wrap;
justify-content: center;
margin: 0 0rpx 10rpx 5rpx;
}
.Typeboxactive {
display: flex;
width: 120rpx;
height: 140rpx;
align-items: center;
flex-flow: column wrap;
justify-content: center;
margin: 0 0rpx 10rpx 5rpx;
background-color: #cbcbcb;
}
.inctiveclass {
width: 80rpx;
display: flex;
height: 80rpx;
font-size: 22rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #f7f7f7;
}
.activeclass {
width: 80rpx;
display: flex;
height: 80rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #3eb575;
}
.numbers {
width: 100%;
display: flex;
height: 480rpx;
margin-top: 10rpx;
background-color: #fafafa;
justify-content: flex-start;
}
.remark {
width: 100%;
color: #50648a;
height: 100rpx;
font-size: 32rpx;
padding: 20rpx 0 0 30rpx;
}
.oner {
display: flex;
width: 165rpx;
height: 100rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
justify-content: center;
margin: 15rpx auto 5rpx;
background-color: #ffffff;
}
.onerplus {
display: flex;
width: 165rpx;
color: #ffffff;
height: 338rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
justify-content: center;
margin: 15rpx auto 5rpx;
background-color: #9cd7b7;
}
.big {
display: flex;
width: 342rpx;
height: 100rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
margin: 15rpx auto 5rpx;
justify-content: center;
background-color: #ffffff;
}
.input-container {
position: relative;
width: 100%;
height: 156rpx;
display: flex;
}
.input-wrapper {
position: relative;
width: 100%;
height: 100%;
border-bottom: 1px solid #ccc;
padding: 0 20rpx;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
.input-icon {
height: 106rpx;
width: 5rpx;
background-color: #cbcbcb;
display: none;
}
.active {
display: block;
animation: blink 1s infinite; //点击后|出现
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.input-iconone {
position: absolute;
top: 50%;
left: 2rpx;
transform: translateY(-50%);
color: #666;
}
.input-field {
width: 100%;
height: 100%;
line-height: 156rpx;
padding-left: 80rpx;
font-size: 80rpx;
color: #333;
}
.remarks {
width: 68px;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.box-text {
display: flex;
justify-content: center;
color: #c7c7c7;
align-items: center;
width: 100%;
margin-top: 10rpx;
height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.box-ative{
display: flex;
justify-content: center;
color: #000000;
align-items: center;
width: 100%;
margin-top: 10rpx;
height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.top {
position: relative;
width: 100%;
height: 30%;
}
.window {
width: 100rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.center {
position: relative;
width: 100%;
height: 30%;
display: flex;
padding: 0 30rpx 0 30rpx;
justify-content: center;
align-items: center;
}
.bottom {
width: 100%;
height: 40%;
position: relative;
}
.comfors {
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 380rpx;
height: 100rpx;
border-radius: 10rpx;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
color: #d4d4d4;
border: 1rpx solid #f2f2f2;
}
.Record-remarks-number-of-words{
position: absolute;
left: 30rpx;
bottom: -20rpx;
color: #d4d4d4;
}
</style>gold：
<template>
<view>
<view class="money-input">
<view class="input-container" @click="toggleBox">
<view class="input-wrapper">
<view class="input-iconone">
<image src="/static/Tall-Book-Images/rmb.png" mode="aspectFit"
style="width: 60rpx; height: 60rpx;"></image>
</view>
<view
style="width: auto; height: 100%;line-height: 156rpx; padding-left: 80rpx; font-size: 80rpx; color: #333;">
{{nums}}
</view>
<view class="input-icon" :class="{active: showBox}"></view>
</view>
</view>
</view>
<view class="Type">
<view class="Type-box" v-for="(item,index) in box " :key="index" @click="select(index)"
:style="iphone(index)">
<view class="inctiveclass" :class="{activeclass: activeIndex === index}">
<image :src="item.showimg ? item.imgs : item.img" mode="aspectFit"
style="width: 50rpx; height: 50rpx;"></image>
</view>
<view class="box-text" :class="[item.showimg? 'box-ative': 'box-text']">
<view>{{item.name}}</view>
</view>
</view>
<view class="Type-box" :class="{Typeboxactive: activeIndextype === true}">
<view class="inctiveclass" :class="{activeclass: activeIndextype === true}" :style="styletype"
@click="typepires">
<image :src="imgsrc" mode="aspectFit" style="width: 50rpx; height: 50rpx;"></image>
</view>
<view
style=" display: flex; color: #66789f; justify-content: flex-end; align-items: center; width: 100%; margin-top: 10rpx; height: 40rpx; text-align: center; font-size: 24rpx;">
<view>分类管理</view>
<image src="/static/Tall-Book-Images/exitone.png" mode="aspectFit"
style="width: 20rpx; height: 20rpx;"></image>
</view>
</view>
</view>
<view class="remark">
<view class="remarks" @click="remark()" :style="styleremark">
添加备注
</view>
</view>
<view class="numbers">
<view
style=" display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; width: 72%; height: auto;">
<view @click="changeNums(item,index)" :class="item.class" :style="getListitemstyle(index)"
v-for="(item,index) in numbers">
{{item.text}}
</view>
</view>
<view style="width: 28%; height: auto; display: flex; flex-flow: column wrap; ">
<view @click="jianshao()" class="oner" :style="styleos">
<image src="/static/Tall-Book-Images/qc.png" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view class="onerplus" @click="ok()" :style="stylelv">
确认
</view>
</view>
</view>
<u-popup :show="showtype" mode="right" @close="closeyoushow"><!--分类管理弹窗-->
<typeexre :activeTab="activeTab" @updateListOne="updateListOne" @close="closeyoushow"></typeexre>
</u-popup>
<u-popup round="10" :show="showremark" mode="bottom" @close="closeremark"><!--备注弹窗-->
<view style="width: 100%; height: 650rpx; ">
<view class="top">
<view class="window" @click="close()">
<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit"
style="width: 40rpx; height: 40rpx;"></image>
</view>
<view
style=" font-size: 20px; text-align: center; line-height: 80rpx; width: 220rpx; height: 80rpx; position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
添加备注
</view>
</view>
<view class="center">
<uni-easyinputs v-model="valuemark" maxlength="30" @input="input"
placeholder="输入备注内容"></uni-easyinputs>
<view class="Record-remarks-number-of-words" :style="{color: isimit ? '#c90003' : '#c9c9c9'}">
{{showCharacterCount}}
</view>
</view>
<view class="bottom">
<button class="comfors" :style="active" @click="comfors">确定</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import typeexre from '@/components/typeexre/typeexre.vue'
import {BillList,BillListInsert} from '@/api/bill.js'
export default {
components:{
typeexre
},
data() {
return {
active: {
background: ' #f2f2f2',
color: '#d4d4d4'
}, //这是确定按钮的样式
styletype: {
background: '' //这是分类管理初始颜色
},
styleremark: {
background: '' //这是备注初始颜色
},
styleos: {
background: '#ffffff' //这是确认的初始颜色
},
stylelv: {
background: '#f0b73a' //确认按钮颜色初始
},
single: '',
nums: '',
times:'',//实时时间
imgsrc: '/static/Tall-Book-Images/slh.png', //分类管理图片
isimit: false, //判断备注是否超过了最大限制标志位
showBox: false, //是否显示‘|’
activeIndextype: false, //这是判断是否改变分类管理圆中的样式
showtime: false, //日历弹窗
activeTab: 1, //支出、入账、不计入收支改变颜色的初始值
showCode: true, //支出分类
showCodeR: false, //入账分类
showCodeL: false, //不计入收支
activeIndex: 0, //默认选中索引
sumindex: -1, //数字键盘索引
showtype: false, //分类管理弹窗开关
showremark: false, //备注弹窗
valuemark: '', //备注输入框
timeColor: {
background: '#f7f7f7' //记一笔时间点击前颜色
},
box: [{
name: '餐饮',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/cy.png',
imgs: '/static/Tall-Book-Images/cy1.png',
class: 'Clicre', //背景绿色样式
showimg: true,
background: '',
},
{
name: '交通',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/jt.png',
imgs: '/static/Tall-Book-Images/jt1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '服饰',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yf.png',
imgs: '/static/Tall-Book-Images/yf1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '购物',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/gw.png',
imgs: '/static/Tall-Book-Images/gw1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '服务',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/sd.png',
imgs: '/static/Tall-Book-Images/sd1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '教育',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/jy.png',
imgs: '/static/Tall-Book-Images/jy1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '娱乐',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/ht.png',
imgs: '/static/Tall-Book-Images/ht1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '运动',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/lq.png',
imgs: '/static/Tall-Book-Images/lq1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '生活缴费',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/fz.png',
imgs: '/static/Tall-Book-Images/fz1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '旅行',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/lx.png',
imgs: '/static/Tall-Book-Images/lx1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '宠物',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/cw.png',
imgs: '/static/Tall-Book-Images/cw1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '医疗',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yl.png',
imgs: '/static/Tall-Book-Images/yl1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '保险',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/bxs.png',
imgs: '/static/Tall-Book-Images/bx1s.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '公益',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/xin.png',
imgs: '/static/Tall-Book-Images/xin1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '发红包',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/hb.png',
imgs: '/static/Tall-Book-Images/hb1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '转账',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/zz.png',
imgs: '/static/Tall-Book-Images/zz1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '亲属卡',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yhk.png',
imgs: '/static/Tall-Book-Images/yhk1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '其他人情',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/qtrq.png',
imgs: '/static/Tall-Book-Images/qtrq1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '其他',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/qt.png',
imgs: '/static/Tall-Book-Images/qt1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '退还',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/thsh.png',
imgs: '/static/Tall-Book-Images/thsh1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
}
],
numbers: [
{
text: '1',
class: 'oner',
background: '#ffffff'
},
{
text: '2',
class: 'oner',
background: '#ffffff'
},
{
text: '3',
class: 'oner',
background: '#ffffff'
},
{
text: '4',
class: 'oner',
background: '#ffffff'
},
{
text: '5',
class: 'oner',
background: '#ffffff'
},
{
text: '6',
class: 'oner',
background: '#ffffff'
},
{
text: '7',
class: 'oner',
background: '#ffffff'
},
{
text: '8',
class: 'oner',
background: '#ffffff'
},
{
text: '9',
class: 'oner',
background: '#ffffff'
},
{
text: '0',
class: 'big',
background: '#ffffff'
},
{
text: '.',
class: 'oner',
background: '#ffffff'
},
]
}
},
computed: {
showCharacterCount() { //添加中备注字数限制
const count = this.valuemark.length;
this.isimit = count >= 30
return `${count}/${30}`
console.log('this.isimit', this.isimit)
}
},
created() {
this.BillList()
},
methods: {
async BillList() {
const data = await BillList()
console.log('datagold',data)
},
comfors() {
if (this.valuemark) {
this.active.background = "#33955f"
setTimeout(() => {
this.active.background = "#3eb575"
this.showremark = false
}, 150)
// const newItem = {
// name: this.value,
// class: 'Clicre',//背景绿色样式
// img:'/static/Tall-Book-Images/hb.png',
// imgs: '/static/Tall-Book-Images/hb1.png',
// }
// this.showaddition = false
// this.classify.push(newItem)
// console.log('classify',this.classify)
// this.$emit('updateList',newItem)
// console.log()
}
},
input(e) {
console.log('输入内容：', e);
// console.log('this.index.lenth', this.value.length)
this.valuemark = e
if (this.valuemark) {
this.active.background = '#3eb575'
this.active.color = '#ffffff'
} else {
this.active.background = '#f2f2f2'
this.active.color = '#d4d4d4'
}
},
ok() {
this.times = new Date().toLocaleDateString()//获取实时时间
let activeBox = this.box[this.activeIndex || 0]
let obj = {
amount: this.nums,
log_type:this.activeTab,
item_id:activeBox.name,
icon:activeBox.imgs,
source:'手动记账',
calendar:this.times,
place: this.valuemark,
...this.box[this.activeIndex || 0]//将数值传入到主页
}
this.stylelv.background = '#daa634'
setTimeout(() => {
this.stylelv.background = '#f0b73a'
}, 150)
console.log('obj', obj)
if (this.nums !== '') { //判断是否为空输入的金额
this.$emit('handleSubmit', obj)
this.$emit('close') //关闭弹窗
}
// uni.setStorageSync('aaa', obj)
// uni.getStorageSync('aaa')
// console.log(uni.getStorageSync('aaa'))
},
jianshao() {
this.styleos.background = '#f7f7f7'
setTimeout(() => {
this.styleos.background = '#ffffff'
}, 150)
if (this.nums) {
this.nums = this.nums.substring(0, this.nums.length - 1)
}
},
changeNums(item, index) {
this.numbers.forEach((item, idx) => {
if (idx === index) {
item.background = '#f7f7f7';
setTimeout(() => {
item.background = '#ffffff';
}, 150)
}
});
this.sumindex = index
// console.log('this.sumindex', this.sumindex)
if (item.text == '.') {
console.log(this.nums.indexOf(".") != -1)
if (this.nums.indexOf(".") != -1 || this.nums.length == 0) {
return false
}
}
if (this.nums.split('.') && this.nums.split('.')[1]) {
if (this.nums.split('.')[1].length >= 2) {
return false
}
}
this.nums = this.nums + item.text
},
getListitemstyle(index) {
return {
background: this.numbers[index].background
};
},
close() {
this[`show${this.showtime}`] = false
this.showremark = false
},
confirm(e) {
console.log(e);
this.showtime = false
},
remark() { //点击备注改变颜色打开弹窗
this.styleremark.background = '#cecece'
setTimeout(() => {
this.styleremark.background = '#ffffff'
this.showremark = true
}, 150)
},
select(index) { //支出的选项实现的方法比如：保险、公益、发红包
this.activeIndex = index
console.log(index)
this.box.forEach((item, i) => {
if (i === index) {
item.background = '#e5e5e5';
setTimeout(() => {
item.background = '';
}, 150)
item.showimg = true;
} else {
item.background = '';
item.showimg = false;
}
});
},
iphone(index) {
return {
background: this.box[index].background
};
},
time() {
this.timeColor.background = '#dedede' //点击中记一笔时间的颜色
setTimeout(() => {
this.timeColor.background = '#f7f7f7' //点击后记一笔时间的颜色
}, 200)
this.showtime = true
},
toggleBox() {
this.showBox = true //点击后输入框出现“|”每隔一段时间闪动
},
maskClick(e) {
console.log('maskClick事件:', e);
},
change(e) {
this.single = e;
console.log("-change事件:", e);
},
closeyoushow() {
this.showtype = false
}, //关闭分类弹窗
closeremark() {
this.showremark = false
},
async updateListOne(val){
console.log('updateListOne', val)
let gold = {
title: val.name,
ico:val.imgs,
rank:val.rank,
log_type:val.log_type
}
await BillListInsert(gold)
this.BillList()
this.box.push(val)
},
remarks(val) {
console.log('com', val)
this.showremark = Boolean(!val)
console.log('this.showremark', this.show)
},
typepires() {
this.activeIndextype = true
this.showtype = true
this.$emit('activeTab',this.activeTab)//测试
this.imgsrc = '/static/Tall-Book-Images/slh1.png'
setTimeout(() => {
this.imgsrc = '/static/Tall-Book-Images/slh.png'
this.activeIndextype = false
}, 1000)
}
},
}
</script>
<style lang="scss" scoped>
.Classify {
width: 100%;
display: flex;
height: 120rpx;
margin-top: 10rpx;
padding-left: 20rpx;
padding-right: 30rpx;
align-items: center;
margin-bottom: -12rpx;
justify-self: flex-start;
}
.Expenditure {
width: auto;
height: 60rpx;
color: #c7c7c7;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f7f7f7;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.Expendituretime {
width: auto;
color: black;
display: flex;
height: 60rpx;
font-size: 30rpx;
line-height: 60rpx;
margin-left: 32rpx;
align-items: center;
border-radius: 10rpx;
background-color: #f7f7f7;
justify-content: space-evenly;
padding: 0rpx 15rpx 0rpx 20rpx;
}
.Expenditurelv {
width: auto;
height: 60rpx;
color: #3eb575;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #ebf7f1;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureH {
width: auto;
height: 60rpx;
color: #f5c53a;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #fdf8eb;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureL {
width: auto;
height: 60rpx;
color: #8c8bc3;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f1f3f6;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.money-input {
width: 100%;
height: 150rpx;
padding: 0 40rpx 0 40rpx;
}
.Type {
width: 100%;
height: 154px;
display: flex;
margin-top: 20rpx;
align-items: center;
flex-flow: row wrap;
justify-content: flex-start;
overflow-y: auto;
}
.Type-box {
display: flex;
width: 120rpx;
height: 140rpx;
align-items: center;
flex-flow: column wrap;
justify-content: center;
margin: 0 0rpx 10rpx 5rpx;
}
.Typeboxactive {
display: flex;
width: 120rpx;
height: 140rpx;
align-items: center;
flex-flow: column wrap;
justify-content: center;
margin: 0 0rpx 10rpx 5rpx;
background-color: #cbcbcb;
}
.inctiveclass {
width: 80rpx;
display: flex;
height: 80rpx;
font-size: 22rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #f7f7f7;
}
.activeclass {
width: 80rpx;
display: flex;
height: 80rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #f0b73a;
}
.numbers {
width: 100%;
display: flex;
height: 480rpx;
margin-top: 10rpx;
background-color: #fafafa;
justify-content: flex-start;
}
.remark {
width: 100%;
color: #50648a;
height: 100rpx;
font-size: 32rpx;
padding: 20rpx 0 0 30rpx;
}
.oner {
display: flex;
width: 165rpx;
height: 100rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
justify-content: center;
margin: 15rpx auto 5rpx;
background-color: #ffffff;
}
.onerplus {
display: flex;
width: 165rpx;
color: #ffffff;
height: 338rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
justify-content: center;
margin: 15rpx auto 5rpx;
background-color: #9cd7b7;
}
.big {
display: flex;
width: 342rpx;
height: 100rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
margin: 15rpx auto 5rpx;
justify-content: center;
background-color: #ffffff;
}
.input-container {
position: relative;
width: 100%;
height: 156rpx;
display: flex;
}
.input-wrapper {
position: relative;
width: 100%;
height: 100%;
border-bottom: 1px solid #ccc;
padding: 0 20rpx;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
.input-icon {
height: 106rpx;
width: 5rpx;
background-color: #cbcbcb;
display: none;
}
.active {
display: block;
animation: blink 1s infinite; //点击后|出现
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.input-iconone {
position: absolute;
top: 50%;
left: 2rpx;
transform: translateY(-50%);
color: #666;
}
.input-field {
width: 100%;
height: 100%;
line-height: 156rpx;
padding-left: 80rpx;
font-size: 80rpx;
color: #333;
}
.remarks {
width: 68px;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.box-text {
display: flex;
justify-content: center;
color: #c7c7c7;
align-items: center;
width: 100%;
margin-top: 10rpx;
height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.box-ative {
display: flex;
justify-content: center;
color: #000000;
align-items: center;
width: 100%;
margin-top: 10rpx;
height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.top {
position: relative;
width: 100%;
height: 30%;
}
.window {
width: 100rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.center {
position: relative;
width: 100%;
height: 30%;
display: flex;
padding: 0 30rpx 0 30rpx;
justify-content: center;
align-items: center;
}
.bottom {
width: 100%;
height: 40%;
position: relative;
}
.comfors {
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 380rpx;
height: 100rpx;
border-radius: 10rpx;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
color: #d4d4d4;
border: 1rpx solid #f2f2f2;
}
.Record-remarks-number-of-words {
position: absolute;
left: 30rpx;
bottom: -20rpx;
color: #d4d4d4;
}
</style>gambridge：
<template>
<view>
<view class="money-input">
<view class="input-container" @click="toggleBox">
<view class="input-wrapper">
<view class="input-iconone">
<image src="/static/Tall-Book-Images/rmb.png" mode="aspectFit"
style="width: 60rpx; height: 60rpx;"></image>
</view>
<view
style="width: auto; height: 100%;line-height: 156rpx; padding-left: 80rpx; font-size: 80rpx; color: #333;">
{{nums}}
</view>
<view class="input-icon" :class="{active: showBox}"></view>
</view>
</view>
</view>
<view class="Type">
<view class="Type-box" v-for="(item,index) in box " :key="index" @click="select(index)"
:style="iphone(index)">
<view class="inctiveclass" :class="{activeclass: activeIndex === index}">
<image :src="item.showimg ? item.imgs : item.img" mode="aspectFit"
style="width: 50rpx; height: 50rpx;"></image>
</view>
<view class="box-text" :class="[item.showimg? 'box-ative': 'box-text']">
<view>{{item.name}}</view>
</view>
</view>
<view class="Type-box" :class="{Typeboxactive: activeIndextype === true}">
<view class="inctiveclass" :class="{activeclass: activeIndextype === true}" :style="styletype"
@click="typepires">
<image :src="imgsrc" mode="aspectFit" style="width: 50rpx; height: 50rpx;"></image>
</view>
<view
style=" display: flex; color: #66789f; justify-content: flex-end; align-items: center; width: 100%; margin-top: 10rpx; height: 40rpx; text-align: center; font-size: 24rpx;">
<view>分类管理</view>
<image src="/static/Tall-Book-Images/exitone.png" mode="aspectFit"
style="width: 20rpx; height: 20rpx;"></image>
</view>
</view>
</view>
<view class="remark">
<view class="remarks" @click="remark()" :style="styleremark">
添加备注
</view>
</view>
<view class="numbers">
<view
style=" display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; width: 72%; height: auto;">
<view @click="changeNums(item,index)" :class="item.class" :style="getListitemstyle(index)"
v-for="(item,index) in numbers">
{{item.text}}
</view>
</view>
<view style="width: 28%; height: auto; display: flex; flex-flow: column wrap; ">
<view @click="jianshao()" class="oner" :style="styleos">
<image src="/static/Tall-Book-Images/qc.png" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view class="onerplus" @click="ok()" :style="stylelv">
确认
</view>
</view>
</view>
<u-popup :show="showtype" mode="right" @close="closeyoushow"><!--分类管理弹窗-->
<typeexre :activeTab="activeTab" @updateListTwo="updateListTwo" @close="closeyoushow"></typeexre>
</u-popup>
<u-popup round="10" :show="showremark" mode="bottom" @close="closeremark"><!--备注弹窗-->
<view style="width: 100%; height: 650rpx; ">
<view class="top">
<view class="window" @click="close()">
<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit"
style="width: 40rpx; height: 40rpx;"></image>
</view>
<view
style=" font-size: 20px; text-align: center; line-height: 80rpx; width: 220rpx; height: 80rpx; position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
添加备注
</view>
</view>
<view class="center">
<uni-easyinputs v-model="valuemark" maxlength="30" @input="input"
placeholder="输入备注内容"></uni-easyinputs>
<view class="Record-remarks-number-of-words" :style="{color: isimit ? '#c90003' : '#c9c9c9'}">
{{showCharacterCount}}
</view>
</view>
<view class="bottom">
<button class="comfors" :style="active" @click="comfors">确定</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import typeexre from '@/components/typeexre/typeexre.vue'
import {BillList,BillListInsert} from '@/api/bill.js'
export default {
components:{
typeexre
},
data() {
return {
active: {
background: ' #f2f2f2',
color: '#d4d4d4'
}, //这是确定按钮的样式
styletype: {
background: '' //这是分类管理初始颜色
},
styleremark: {
background: '' //这是备注初始颜色
},
styleos: {
background: '#ffffff' //这是确认的初始颜色
},
stylelv: {
background: '#b9c1d2' //确认按钮颜色初始
},
single: '',
nums: '',
imgsrc: '/static/Tall-Book-Images/slh.png', //分类管理图片
isimit: false, //判断备注是否超过了最大限制标志位
showBox: false, //是否显示‘|’
activeIndextype: false, //这是判断是否改变分类管理圆中的样式
activeIndex: 0, //默认选中索引
showtime: false, //日历弹窗
activeTab: 2, //默认选中索引
sumindex: -1, //数字键盘索引
showtype: false, //分类管理弹窗开关
showremark: false, //备注弹窗
valuemark: '', //备注输入框
timeColor: {
background: '#f7f7f7' //记一笔时间点击前颜色
},
box: [{
name: '餐饮',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/cy.png',
imgs: '/static/Tall-Book-Images/cy1.png',
class: 'Clicre', //背景绿色样式
showimg: true,
background: '',
},
{
name: '交通',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/jt.png',
imgs: '/static/Tall-Book-Images/jt1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '服饰',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yf.png',
imgs: '/static/Tall-Book-Images/yf1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '购物',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/gw.png',
imgs: '/static/Tall-Book-Images/gw1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '服务',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/sd.png',
imgs: '/static/Tall-Book-Images/sd1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '教育',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/jy.png',
imgs: '/static/Tall-Book-Images/jy1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '娱乐',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/ht.png',
imgs: '/static/Tall-Book-Images/ht1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '运动',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/lq.png',
imgs: '/static/Tall-Book-Images/lq1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '生活缴费',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/fz.png',
imgs: '/static/Tall-Book-Images/fz1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '旅行',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/lx.png',
imgs: '/static/Tall-Book-Images/lx1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '宠物',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/cw.png',
imgs: '/static/Tall-Book-Images/cw1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: ''
},
{
name: '医疗',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yl.png',
imgs: '/static/Tall-Book-Images/yl1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '保险',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/bxs.png',
imgs: '/static/Tall-Book-Images/bx1s.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '公益',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/xin.png',
imgs: '/static/Tall-Book-Images/xin1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '发红包',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/hb.png',
imgs: '/static/Tall-Book-Images/hb1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '转账',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/zz.png',
imgs: '/static/Tall-Book-Images/zz1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '亲属卡',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/yhk.png',
imgs: '/static/Tall-Book-Images/yhk1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '其他人情',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/qtrq.png',
imgs: '/static/Tall-Book-Images/qtrq1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '其他',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/qt.png',
imgs: '/static/Tall-Book-Images/qt1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
},
{
name: '退还',
avtive: 'activeclass',
inctive: 'inctiveclass',
img: '/static/Tall-Book-Images/thsh.png',
imgs: '/static/Tall-Book-Images/thsh1.png',
class: 'Clicre', //背景绿色样式
showimg: false,
background: '',
url: '/pages/Tall-Book/type/type'
}
],
numbers: [
{
text: '1',
class: 'oner',
background: '#ffffff'
},
{
text: '2',
class: 'oner',
background: '#ffffff'
},
{
text: '3',
class: 'oner',
background: '#ffffff'
},
{
text: '4',
class: 'oner',
background: '#ffffff'
},
{
text: '5',
class: 'oner',
background: '#ffffff'
},
{
text: '6',
class: 'oner',
background: '#ffffff'
},
{
text: '7',
class: 'oner',
background: '#ffffff'
},
{
text: '8',
class: 'oner',
background: '#ffffff'
},
{
text: '9',
class: 'oner',
background: '#ffffff'
},
{
text: '0',
class: 'big',
background: '#ffffff'
},
{
text: '.',
class: 'oner',
background: '#ffffff'
},
]
}
},
computed: {
showCharacterCount() { //添加中备注字数限制
const count = this.valuemark.length;
this.isimit = count >= 30
return `${count}/${30}`
console.log('this.isimit', this.isimit)
}
},
created() {
this.BillList()
},
methods: {
async BillList() { //获取列表账单的数据
const datagambridge = await BillList()
console.log('datagambridge',datagambridge)
},
comfors() {
if (this.valuemark) {
this.active.background = "#33955f"
setTimeout(() => {
this.active.background = "#3eb575"
this.showremark = false
}, 150)
}
},
input(e) {
console.log('输入内容：', e);
// console.log('this.index.lenth', this.value.length)
this.valuemark = e
if (this.valuemark) {
this.active.background = '#3eb575'
this.active.color = '#ffffff'
} else {
this.active.background = '#f2f2f2'
this.active.color = '#d4d4d4'
}
},
ok() {
let obj = {
money: "-" + this.nums,
source: '手动记账',
calendar: '2023年9月23日',
time: '14:32',
place: this.valuemark,
...this.box[this.activeIndex || 0] //将数值传入到主页
}
this.stylelv.background = '#a0a7b5'
setTimeout(() => {
this.stylelv.background = '#b9c1d2'
}, 150)
console.log('obj', obj)
if (this.nums !== '') { //判断是否为空输入的金额
this.$emit('handleSubmit', obj)
this.$emit('close') //关闭弹窗
}
},
jianshao() {
this.styleos.background = '#f7f7f7'
setTimeout(() => {
this.styleos.background = '#ffffff'
}, 150)
if (this.nums) {
this.nums = this.nums.substring(0, this.nums.length - 1)
}
},
changeNums(item, index) {
this.numbers.forEach((item, idx) => {
if (idx === index) {
item.background = '#f7f7f7';
setTimeout(() => {
item.background = '#ffffff';
}, 150)
}
});
this.sumindex = index
// console.log('this.sumindex', this.sumindex)
if (item.text == '.') {
console.log(this.nums.indexOf(".") != -1)
if (this.nums.indexOf(".") != -1 || this.nums.length == 0) {
return false
}
}
if (this.nums.split('.') && this.nums.split('.')[1]) {
if (this.nums.split('.')[1].length >= 2) {
return false
}
}
this.nums = this.nums + item.text
},
getListitemstyle(index) {
return {
background: this.numbers[index].background
};
},
close() {
this[`show${this.showtime}`] = false
this.showremark = false
},
confirm(e) {
console.log(e);
this.showtime = false
},
remark() { //点击备注改变颜色打开弹窗
this.styleremark.background = '#cecece'
setTimeout(() => {
this.styleremark.background = '#ffffff'
this.showremark = true
}, 150)
},
select(index) { //支出的选项实现的方法比如：保险、公益、发红包
this.activeIndex = index
console.log(index)
this.box.forEach((item, i) => {
if (i === index) {
item.background = '#e5e5e5';
setTimeout(() => {
item.background = '';
}, 150)
item.showimg = true;
} else {
item.background = '';
item.showimg = false;
}
});
},
iphone(index) {
return {
background: this.box[index].background
};
},
time() {
this.timeColor.background = '#dedede' //点击中记一笔时间的颜色
setTimeout(() => {
this.timeColor.background = '#f7f7f7' //点击后记一笔时间的颜色
}, 200)
this.showtime = true
},
toggleBox() {
this.showBox = true //点击后输入框出现“|”每隔一段时间闪动
},
maskClick(e) {
console.log('maskClick事件:', e);
},
change(e) {
this.single = e;
console.log("-change事件:", e);
},
closeyoushow() {
this.showtype = false
}, //关闭分类弹窗
closeremark() {
this.showremark = false
},
async updateListTwo(val){
let gambridge = {
title: val.name,
ico:val.imgs,
rank:val.rank,
log_type:val.log_type
}
await BillListInsert(gold)
this.BillList()
this.box.push(val)
console.log('updateListTwo', val)
},
remarks(val) {
console.log('com', val)
this.showremark = Boolean(!val)
console.log('this.showremark', this.show)
},
typepires() {
this.activeIndextype = true
this.showtype = true
this.imgsrc = '/static/Tall-Book-Images/slh1.png'
setTimeout(() => {
this.imgsrc = '/static/Tall-Book-Images/slh.png'
this.activeIndextype = false
}, 1000)
this.$emit('activeTab',this.activeTab)//测试
}
},
}
</script>
<style lang="scss" scoped>
.Classify {
width: 100%;
display: flex;
height: 120rpx;
margin-top: 10rpx;
padding-left: 20rpx;
padding-right: 30rpx;
align-items: center;
margin-bottom: -12rpx;
justify-self: flex-start;
}
.Expenditure {
width: auto;
height: 60rpx;
color: #c7c7c7;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f7f7f7;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.Expendituretime {
width: auto;
color: black;
display: flex;
height: 60rpx;
font-size: 30rpx;
line-height: 60rpx;
margin-left: 32rpx;
align-items: center;
border-radius: 10rpx;
background-color: #f7f7f7;
justify-content: space-evenly;
padding: 0rpx 15rpx 0rpx 20rpx;
}
.Expenditurelv {
width: auto;
height: 60rpx;
color: #3eb575;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #ebf7f1;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureH {
width: auto;
height: 60rpx;
color: #f5c53a;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #fdf8eb;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureL {
width: auto;
height: 60rpx;
color: #8c8bc3;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f1f3f6;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.money-input {
width: 100%;
height: 150rpx;
padding: 0 40rpx 0 40rpx;
}
.Type {
width: 100%;
height: 154px;
display: flex;
margin-top: 20rpx;
align-items: center;
flex-flow: row wrap;
justify-content: flex-start;
overflow-y: auto;
}
.Type-box {
display: flex;
width: 120rpx;
height: 140rpx;
align-items: center;
flex-flow: column wrap;
justify-content: center;
margin: 0 0rpx 10rpx 5rpx;
}
.Typeboxactive {
display: flex;
width: 120rpx;
height: 140rpx;
align-items: center;
flex-flow: column wrap;
justify-content: center;
margin: 0 0rpx 10rpx 5rpx;
background-color: #cbcbcb;
}
.inctiveclass {
width: 80rpx;
display: flex;
height: 80rpx;
font-size: 22rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #f7f7f7;
}
.activeclass {
width: 80rpx;
display: flex;
height: 80rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #7888aa;
}
.numbers {
width: 100%;
display: flex;
height: 480rpx;
margin-top: 10rpx;
background-color: #fafafa;
justify-content: flex-start;
}
.remark {
width: 100%;
color: #50648a;
height: 100rpx;
font-size: 32rpx;
padding: 20rpx 0 0 30rpx;
}
.oner {
display: flex;
width: 165rpx;
height: 100rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
justify-content: center;
margin: 15rpx auto 5rpx;
background-color: #ffffff;
}
.onerplus {
display: flex;
width: 165rpx;
color: #ffffff;
height: 338rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
justify-content: center;
margin: 15rpx auto 5rpx;
background-color: #b9c1d2;
}
.big {
display: flex;
width: 342rpx;
height: 100rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
margin: 15rpx auto 5rpx;
justify-content: center;
background-color: #ffffff;
}
.input-container {
position: relative;
width: 100%;
height: 156rpx;
display: flex;
}
.input-wrapper {
position: relative;
width: 100%;
height: 100%;
border-bottom: 1px solid #ccc;
padding: 0 20rpx;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
.input-icon {
height: 106rpx;
width: 5rpx;
background-color: #cbcbcb;
display: none;
}
.active {
display: block;
animation: blink 1s infinite; //点击后|出现
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.input-iconone {
position: absolute;
top: 50%;
left: 2rpx;
transform: translateY(-50%);
color: #666;
}
.input-field {
width: 100%;
height: 100%;
line-height: 156rpx;
padding-left: 80rpx;
font-size: 80rpx;
color: #333;
}
.remarks {
width: 68px;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.box-text {
display: flex;
justify-content: center;
color: #c7c7c7;
align-items: center;
width: 100%;
margin-top: 10rpx;
height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.box-ative {
display: flex;
justify-content: center;
color: #000000;
align-items: center;
width: 100%;
margin-top: 10rpx;
height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.top {
position: relative;
width: 100%;
height: 30%;
}
.window {
width: 100rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.center {
position: relative;
width: 100%;
height: 30%;
display: flex;
padding: 0 30rpx 0 30rpx;
justify-content: center;
align-items: center;
}
.bottom {
width: 100%;
height: 40%;
position: relative;
}
.comfors {
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 380rpx;
height: 100rpx;
border-radius: 10rpx;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
color: #d4d4d4;
border: 1rpx solid #f2f2f2;
}
.Record-remarks-number-of-words {
position: absolute;
left: 30rpx;
bottom: -20rpx;
color: #d4d4d4;
}
</style>自定义组件typeexre：
<template>
<view class="content">
<view @click="consoles" class="samsung">
<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit" style="width: 50rpx; height: 50rpx; ">
</image>
</view>
<view class="tilte">
<view class="title-top">分类管理</view>
<view class="title-bottom">长按拖动分类可排序，轻触你添加的分类可编辑。</view>
</view>
<view class="Classify">
<view :class="[activeTap === 0 ? 'Expenditurelv':'Expenditure']" @click="expendituer(0)">支出</view>
<view :class="[activeTap === 1 ? 'ExpenditureH':'Expenditure']" @click="expendituer(1)">入账</view>
<view :class="[activeTap === 2 ? 'ExpenditureL': 'Expenditure']" @click="expendituer(2)">不计入收支</view>
</view>
<view class="box" v-show="activeTap ===0">
<view v-for="(item,index) in classify" :key="index">
<view class="box-mini" v-if="index<= 19">
<view class="img-box">
<image :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view style="font-size: 28rpx;">{{item.name}}</view>
</view>
<view v-else class="box-mini" @click="deletes(index)">
<view class="img-box">
<image :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view style="font-size: 28rpx;">{{item.name}}</view>
<view style="color: #cccccc;">轻触编辑</view>
</view>
</view>
<view class="box-mini" :style="styleactive" @click="last"> <!-- 添加-->
<view class="img-boxone">
<image src="/static/Tall-Book-Images/tianjia.png" mode="aspectFit"
style="width: 80rpx; height: 80rpx;">
</image>
</view>
<view style="font-size: 28rpx;">添加</view>
</view>
</view>
<view class="box" v-show="activeTap === 1">
<view v-for="(item,index) in classifyH" :key="index">
<view class="box-mini" v-if="index<= 19">
<view class="img-boxH">
<image :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view style="font-size: 28rpx;">{{item.name}}</view>
</view>
<view v-else class="box-mini" @click="deletes(index)">
<view class="img-boxH">
<image :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view style="font-size: 28rpx;">{{item.name}}</view>
<view style="color: #cccccc;">轻触编辑</view>
</view>
</view>
<view class="box-mini" :style="styleactive" @click="last"> <!-- 添加-->
<view class="img-boxone">
<image src="/static/Tall-Book-Images/tianjia.png" mode="aspectFit"
style="width: 80rpx; height: 80rpx;">
</image>
</view>
<view style="font-size: 28rpx;">添加</view>
</view>
</view>
<view class="box" v-show="activeTap === 2">
<view v-for="(item,index) in classifyL" :key="index">
<view class="box-mini" v-if="index<= 19">
<view class="img-boxL">
<image :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view style="font-size: 28rpx;">{{item.name}}</view>
</view>
<view v-else class="box-mini" @click="deletes(index)">
<view class="img-boxL">
<image :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view style="font-size: 28rpx;">{{item.name}}</view>
<view style="color: #cccccc;">轻触编辑</view>
</view>
</view>
<view class="box-mini" :style="styleactive" @click="last"> <!-- 添加-->
<view class="img-boxone">
<image src="/static/Tall-Book-Images/tianjia.png" mode="aspectFit"
style="width: 80rpx; height: 80rpx;">
</image>
</view>
<view style="font-size: 28rpx;">添加</view>
</view>
</view>
<view>{{activeTap}}</view>
<u-popup :show="showaddition" mode="bottom" @close="close" @open="openss" round="10">
<view style="width: 100%; height: 650rpx; ">
<view class="top">
<view class="window" @click="close()">
<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit"
style="width: 40rpx; height: 40rpx;"></image>
</view>
<view
style=" font-size: 20px; text-align: center; line-height: 80rpx; width: 220rpx; height: 80rpx; position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
添加分类
</view>
</view>
<view class="center">
<uni-easyinputs v-model="value" maxlength="4" @input="input"
placeholder="不能与已有类型名重复"></uni-easyinputs>
<view class="hint" :style="{color: isimit ? '#c90003' : '#c9c9c9'}">
{{showCharacterCount}}
</view>
</view>
<view class="bottom">
<button class="comfors" :style="active" @click="comfors">确定</button>
</view>
</view>
</u-popup>
<u-popup :show="showdelete" mode="bottom" @close="close" round="10"> <!--轻触编辑窗口-->
<view class="delete-box">
<view class="delete" @click="objectdelete">删除</view>
<view class="modification" @click="modification">修改</view>
<view class="cancel" @click="cancel">取消</view>
</view>
</u-popup>
<u-popup :show="ShowdeleteEmphasize" mode="bottom" @close="close" round="10"><!--强调是否确认窗口-->
<view class="delete-box">
<view class="delete-text">删除后。“私消”分类下的内容将归类为“其他”分类</view>
<view class="delete-Emphasize" @click="Emphasize">删除</view>
<view class="cancel" @click="cancel">取消</view>
</view>
</u-popup>
</view>
</template>
<script>
import {BillList,BillListInsert} from '@/api/bill.js'
export default {
props:{
activeTab:{
type:Number,
default: 0
}
},
data() {
return {
styleactive: { //添加
background: '',
},
active: {
background: ' #f2f2f2',
color: '#d4d4d4'
},
value: '', //输入框的值
isimit: false, //是否超过了最大限制标志位
activeTap: this.activeTab,//tap切换
// activeindex: -1,
showaddition: false, //点开添加
showdelete: false, //删除弹窗
deleteobj: -1, //删除索引用来确定删除操作的下标将index赋值给它
ShowdeleteEmphasize: false, //强调是否删除窗口
transfer: false, //判断是不是从删除弹窗中修改页面传送到添加弹窗修改名字的
classify: [{
name: '餐饮',
imgs: '/static/Tall-Book-Images/cy1.png'
},
{
name: '交通',
imgs: '/static/Tall-Book-Images/jt1.png'
},
{
name: '服饰',
imgs: '/static/Tall-Book-Images/yf1.png'
},
{
name: '购物',
imgs: '/static/Tall-Book-Images/gw1.png'
},
{
name: '服务',
imgs: '/static/Tall-Book-Images/sd1.png'
},
{
name: '教育',
imgs: '/static/Tall-Book-Images/jy1.png'
},
{
name: '娱乐',
imgs: '/static/Tall-Book-Images/ht1.png'
},
{
name: '运动',
imgs: '/static/Tall-Book-Images/lq1.png'
},
{
name: '生活缴费',
imgs: '/static/Tall-Book-Images/fz1.png'
},
{
name: '旅行',
imgs: '/static/Tall-Book-Images/lx1.png'
},
{
name: '宠物',
imgs: '/static/Tall-Book-Images/cw1.png'
},
{
name: '医疗',
imgs: '/static/Tall-Book-Images/yl1.png'
},
{
name: '保险',
imgs: '/static/Tall-Book-Images/bx1s.png'
},
{
name: '公益',
imgs: '/static/Tall-Book-Images/xin1.png'
},
{
name: '发红包',
imgs: '/static/Tall-Book-Images/hb1.png'
},
{
name: '转账',
imgs: '/static/Tall-Book-Images/zz1.png'
},
{
name: '亲属卡',
imgs: '/static/Tall-Book-Images/yhk1.png'
},
{
name: '其他人情',
imgs: '/static/Tall-Book-Images/qtrq1.png'
},
{
name: '其他',
imgs: '/static/Tall-Book-Images/qt1.png'
},
{
name: '退还',
imgs: '/static/Tall-Book-Images/thsh1.png'
}
],
classifyH: [{
name: '餐饮',
imgs: '/static/Tall-Book-Images/cy1.png'
},
{
name: '交通',
imgs: '/static/Tall-Book-Images/jt1.png'
},
{
name: '服饰',
imgs: '/static/Tall-Book-Images/yf1.png'
},
{
name: '购物',
imgs: '/static/Tall-Book-Images/gw1.png'
},
{
name: '服务',
imgs: '/static/Tall-Book-Images/sd1.png'
},
{
name: '教育',
imgs: '/static/Tall-Book-Images/jy1.png'
},
{
name: '娱乐',
imgs: '/static/Tall-Book-Images/ht1.png'
},
{
name: '运动',
imgs: '/static/Tall-Book-Images/lq1.png'
},
{
name: '生活缴费',
imgs: '/static/Tall-Book-Images/fz1.png'
},
{
name: '旅行',
imgs: '/static/Tall-Book-Images/lx1.png'
},
{
name: '宠物',
imgs: '/static/Tall-Book-Images/cw1.png'
},
{
name: '医疗',
imgs: '/static/Tall-Book-Images/yl1.png'
},
{
name: '保险',
imgs: '/static/Tall-Book-Images/bx1s.png'
},
{
name: '公益',
imgs: '/static/Tall-Book-Images/xin1.png'
},
{
name: '发红包',
imgs: '/static/Tall-Book-Images/hb1.png'
},
{
name: '转账',
imgs: '/static/Tall-Book-Images/zz1.png'
},
{
name: '亲属卡',
imgs: '/static/Tall-Book-Images/yhk1.png'
},
{
name: '其他人情',
imgs: '/static/Tall-Book-Images/qtrq1.png'
},
{
name: '其他',
imgs: '/static/Tall-Book-Images/qt1.png'
},
{
name: '退还',
imgs: '/static/Tall-Book-Images/thsh1.png'
}
],
classifyL: [{
name: '餐饮',
imgs: '/static/Tall-Book-Images/cy1.png'
},
{
name: '交通',
imgs: '/static/Tall-Book-Images/jt1.png'
},
{
name: '服饰',
imgs: '/static/Tall-Book-Images/yf1.png'
},
{
name: '购物',
imgs: '/static/Tall-Book-Images/gw1.png'
},
{
name: '服务',
imgs: '/static/Tall-Book-Images/sd1.png'
},
{
name: '教育',
imgs: '/static/Tall-Book-Images/jy1.png'
},
{
name: '娱乐',
imgs: '/static/Tall-Book-Images/ht1.png'
},
{
name: '运动',
imgs: '/static/Tall-Book-Images/lq1.png'
},
{
name: '生活缴费',
imgs: '/static/Tall-Book-Images/fz1.png'
},
{
name: '旅行',
imgs: '/static/Tall-Book-Images/lx1.png'
},
{
name: '宠物',
imgs: '/static/Tall-Book-Images/cw1.png'
},
{
name: '医疗',
imgs: '/static/Tall-Book-Images/yl1.png'
},
{
name: '保险',
imgs: '/static/Tall-Book-Images/bx1s.png'
},
{
name: '公益',
imgs: '/static/Tall-Book-Images/xin1.png'
},
{
name: '发红包',
imgs: '/static/Tall-Book-Images/hb1.png'
},
{
name: '转账',
imgs: '/static/Tall-Book-Images/zz1.png'
},
{
name: '亲属卡',
imgs: '/static/Tall-Book-Images/yhk1.png'
},
{
name: '其他人情',
imgs: '/static/Tall-Book-Images/qtrq1.png'
},
{
name: '其他',
imgs: '/static/Tall-Book-Images/qt1.png'
},
{
name: '退还',
imgs: '/static/Tall-Book-Images/thsh1.png'
}
],
}
},
computed: {
showCharacterCount() { //添加中备注字数限制
const count = this.value.length;
this.isimit = count > 3
return `${count}/${4}`
},
},
created() {
this.BillList()//列表
// this.activeTap = value
},
methods: {
async BillList() {
const data = await BillList()
console.log('data',data)
},
input(e) {
console.log('输入内容：', e);
// console.log('this.index.lenth', this.value.length)
this.value = e
if (this.value) {
this.active.background = '#3eb575'
this.active.color = '#ffffff'
} else {
this.active.background = '#f2f2f2'
this.active.color = '#d4d4d4'
}
},
consoles() {
console.log('consoles')
this.$emit('close')
},
expendituer(e) { //点击支出
this.activeTap = e
},
close() {
this.showaddition = false //关闭添加分类弹窗
this.showdelete = false //关闭删除弹窗
this.ShowdeleteEmphasize = false //关闭强调删除窗口
},
openss() {
//弹出层退出
},
last() { //添加功能
this.styleactive.background = "#dfdfdf"
this.showaddition = true //打开弹窗
setTimeout(() => {
this.styleactive.background = "#ffffff" //样式改变后立马还原
}, 150)
},
comfors() {
if (this.transfer) {//判断是不是修改内容弹窗过来的，过来的就只改名字
if(this.activeTap === 0)
{
if (this.value) {
this.active.background = "#33955f"
setTimeout(() => {
this.active.background = "#3eb575"
}, 150)
// this.classify[this.deleteobj].name = this.value //将新改的名字传入新增的对象
const duplicate = this.classify.some(item => item.name === this.value) //查询是否有重复的名字
if(duplicate){
uni.showToast({
title:'名字重复，请重新输入',
icon:'none'
});
return;
}else{
this.classify[this.deleteobj].name = this.value //将新改的名字传入新增的对象
}
this.showaddition = false //关闭添加弹窗
this.transfer = false //关闭判断
}
} else if(this.activeTap === 1){
if (this.value) {
this.active.background = "#33955f"
setTimeout(() => {
this.active.background = "#3eb575"
}, 150)
this.classifyH[this.deleteobj].name = this.value //将新改的名字传入新增的对象
this.showaddition = false //关闭添加弹窗
this.transfer = false //关闭判断
}
} else if(this.activeTap === 2){
if (this.value) {
this.active.background = "#33955f"
setTimeout(() => {
this.active.background = "#3eb575"
}, 150)
this.classifyL[this.deleteobj].name = this.value //将新改的名字传入新增的对象
this.showaddition = false //关闭添加弹窗
this.transfer = false //关闭判断
}
}
} else {
if (this.value) {//修改文字
this.active.background = "#33955f"
setTimeout(() => {
this.active.background = "#3eb575"
}, 150)
const newItem = {
name: this.value,
// class: 'Clicre', //背景绿色样式
img: '/static/Tall-Book-Images/hb.png',
imgs: '/static/Tall-Book-Images/hb1.png',
rank:this.classify.length + 1,
log_type: this.activeTap
}
const newItemPort = { //接口使用的数据
name: this.value,
// class: 'Clicre', //背景绿色样式
img: '/static/Tall-Book-Images/hb.png',
imgs: '/static/Tall-Book-Images/hb1.png',
rank:this.classify.length + 1,
log_type: this.activeTap
}
if (this.activeTap === 0) { //支出添加新数组
const duplicate = this.classify.some(item => item.name === this.value)//查询是否有重复名字
if(duplicate){//如果重复
uni.showToast({
title:'名字重复，请重新输入',
icon:'none'
});
return;
}else{
this.classify.push(newItem)//插入数组
// console.log('classify', this.classify)
console.log('newItem',newItem)
this.$emit('updateList', newItem)//把数据传给父页面
this.showaddition = false//关闭弹窗
}
} else if (this.activeTap === 1) { //入账添加新数组
const duplicateone = this.classifyH.some(item => item.name === this.value)//查询是否有重复名字
if(duplicateone){//如果重复
uni.showToast({
title:'名字重复，请重新输入',
icon:'none'
});
return;
}else{
this.classifyH.push(newItem)
this.$emit('updateListOne',newItem)
this.showaddition = false//关闭弹窗
}
} else if (this.activeTap === 2) { //不计入收支新数组
const duplicatetwo = this.classifyL.some(item => item.name === this.value)//查询是否有重复名字
if(duplicatetwo){//如果重复
uni.showToast({
title:'名字重复，请重新输入',
icon:'none'
});
return;
}else{
this.classifyL.push(newItem)
this.$emit('updateListTwo', newItem)
this.showaddition = false//关闭弹窗
}
}
}
}
},
deletes(index) { //删除功能
this.deleteobj = index
this.showdelete = true
console.log('deleteobj', this.deleteobj)
},
objectdelete() { //确认删除？
this.showdelete = false //关闭删除弹窗
this.ShowdeleteEmphasize = true //开启强调弹窗
},
Emphasize() { //在次强调
if(this.showCode)
{
this.classify.splice(this.deleteobj,1)
}else if(this.showCodeR)
{
this.classifyH.splice(this.deleteobj,1)
}else if(this.showCodeL){
this.classifyL.splice(this.deleteobj,1)
}
// this.classify.splice(this.deleteobj, 1) //删除操作
this.ShowdeleteEmphasize = false //关闭强调弹窗
},
cancel() { //关闭删除弹窗
this.showdelete = false
this.ShowdeleteEmphasize = false
},
modification() { //修改内容
this.showdelete = false //关闭删除弹窗
this.showaddition = true //开启添加弹窗
this.transfer = true
}
}
}
</script>
<style lang="scss" scoped>
.Classify {
width: 100%;
display: flex;
height: 120rpx;
margin-top: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
align-items: center;
margin-bottom: -12rpx;
justify-content: flex-start;
}
.content {
position: relative;
width: 100%;
height: 100%;
}
.samsung {
position: absolute;
width: auto;
height: auto;
top: 40rpx;
left: 30rpx;
}
.tilte {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
white-space: pre-wrap; //换行保留空格
width: 90%;
height: 350rpx;
margin: 100rpx auto 0;
// background-color: #c9c9c9;
}
.title-top {
font-size: 42rpx;
font-weight: bold;
margin-bottom: 40rpx;
}
.title-bottom {
font-size: 34rpx;
text-align: center;
letter-spacing: 0.1em;
line-height: 1.5em;
}
.Expenditurelv {
width: auto;
height: 60rpx;
color: #3eb575;
font-size: 32rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #ebf7f1;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureH {
width: auto;
height: 60rpx;
color: #f5c53a;
font-size: 32rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #fdf8eb;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureL {
width: auto;
height: 60rpx;
color: #8c8bc3;
font-size: 32rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f1f3f6;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.Expenditure {
width: auto;
height: 60rpx;
color: #7d7d7d;
font-size: 32rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #fafafa;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.box {
width: 100%;
height: 500px;
margin-top: 50rpx;
display: flex;
flex-wrap: wrap;
overflow-y: auto;
}
.box-mini {
display: flex;
width: 120rpx;
height: 172rpx;
align-items: center;
flex-flow: column wrap;
justify-content: space-evenly;
margin: 0 0rpx 20rpx 52rpx;
}
.activebox {
background-color: #d4d4d4;
}
.img-box {
width: 80rpx;
height: 80rpx;
display: flex;
background: #3eb575;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.img-boxH {
width: 80rpx;
height: 80rpx;
display: flex;
background: #f0b73a;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.img-boxL {
width: 80rpx;
height: 80rpx;
display: flex;
background: #7888aa;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.img-boxone {
width: 80rpx;
height: 80rpx;
display: flex;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.top {
position: relative;
width: 100%;
height: 30%;
}
.center {
width: 100%;
height: 30%;
display: flex;
padding: 0 30rpx 0 30rpx;
justify-content: center;
align-items: center;
}
.hint {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 35px;
width: 80rpx;
height: 80rpx;
}
.bottom {
width: 100%;
height: 40%;
position: relative;
}
.window {
width: 100rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.comfors {
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 380rpx;
height: 100rpx;
border-radius: 10rpx;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
color: #d4d4d4;
}
.delete-box {
width: 100%;
display: flex;
height: 400rpx;
border-radius: 20px;
flex-flow: column wrap;
background-color: #fafafa;
}
.delete-text {
width: 100%;
height: 35%;
display: flex;
color: #c7c7c2;
font-size: 28rpx;
align-items: center;
justify-content: center;
border-bottom: 1rpx solid #eaeaea;
}
.delete {
width: 100%;
height: 38%;
display: flex;
color: #fa519a;
font-size: 36rpx;
align-items: center;
justify-content: center;
border-bottom: 1rpx solid #dddddd;
}
.delete-Emphasize {
width: 100%;
height: 35%;
display: flex;
color: #fa519a;
font-size: 36rpx;
align-items: center;
justify-content: center;
border-bottom: 20rpx solid #eaeaea;
}
.modification {
width: 100%;
height: 35%;
display: flex;
font-size: 36rpx;
align-items: center;
justify-content: center;
border-bottom: 20rpx solid #eaeaea;
}
.cancel {
width: 100%;
height: 25%;
display: flex;
font-size: 36rpx;
align-items: center;
justify-content: center;
}
</style>
3031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
