recruitment-wechat-uniapp-241012/pages/index/keepAccounts.vue

<template>
	<view class="page">
		<navbar title="记工记账" />
		<view class="page-tag">
			<uv-tabs :list="tabs" 
			@click="clickTabsType"
			lineWidth="55" 
			lineHeight="8" :activeStyle="{
				color: '#3796F8',
			}" :inactiveStyle="{
				color: '#999999',
			}" itemStyle="padding:60rpx 20rpx 20rpx 20rpx;width: 44%;"></uv-tabs>
		</view>

		<view class="page-picture">
			<view class="page-picture-img">
				<view class="page-picture-group" @click="show = true">
					<image src="../../static/image/keepAccounts/artisan.png" mode="aspectFit" />
					<view>
						新建账本
					</view>
				</view>
			</view>
			<view class="page-picture-img" 
			@click="$utils.navigateTo('/pages_order/kepp/AnnualExpenditure')">
				<view class="page-picture-group">
					<image src="../../static/image/keepAccounts/wallet.png" mode="aspectFit" />
					<view>全年收支</view>
				</view>
			</view>
			<view class="page-picture-img" @click="$utils.navigateTo('/pages_order/kepp/MechanicProblem')">
				<view class="page-picture-group">
					<image src="../../static/image/keepAccounts/accountBook.png" mode="aspectFit" />
					<view>
						技工问题
					</view>
				</view>
			</view>
		</view>
		<view style="font-weight: 500; margin-top: 20rpx;">
			<uv-tabs :list="tabsSatus" 
			@click="clickTabsStatus"
			lineWidth="0" lineHeight="0" :activeStyle="{
				color: '#3796F8',
			}"></uv-tabs>
		</view>
		
		<view class="list">
			<view class="item"
			v-for="(item,index) in list"
			@click="$utils.navigateTo('/pages_order/kepp/keepAccountsDetail?id=' + item.id)"
			:key="index">
				<view class="top">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="date">
						{{ item.createTime }}
					</view>
				</view>
				<view class="btn">
					<view class="left"
					@click.stop="openUpdate(item)">
						<uv-icon
						name="setting"
						size="40rpx"></uv-icon>
						设置
					</view>
					<view class="right">
						<view class="b1">
							记工
						</view>
						<view class="b2">
							记账
						</view>
					</view>
				</view>
			</view>
		</view>

		<uv-overlay :show="show">
			<view class="warp">
				<view class="rect">
					<view class="warp-top">
						{{ addOrUpdate ? '编辑项目' : '新建项目'}}
					</view>
					<view class="rect-two">
						<view class="designation">项目名称：</view>
						<view class="wire" />
						<!-- <view class="description">请输入项目名称：</view> -->
						<input class="rect-input" 
						v-model="form.title"
						placeholder="请输入项目名称"/>
						<!-- <view class="option">
							<select class="select">
								<option value="option1">收入 </option>
							</select>
						</view> -->
						<!-- <view class="introduce">
							项目金额：1314元
						</view> -->
						<view class="">
							<uv-radio-group v-model="form.status">
								<view style="display: flex;">
									<uv-radio
										:customStyle="{margin: '8px'}" 
										v-for="(item, index) in statusList" 
										:key="index" 
										iconSize="30rpx"
										size="40rpx"
										labelSize="26rpx"
										:label="item.name" 
										:name="item.value">
									</uv-radio>
								</view>
							</uv-radio-group>
						</view>
						<view class="button">
							<view @click="show = false">取消</view>
							<view @click="submit">确定</view>
						</view>
					</view>
				</view>

			</view>
		</uv-overlay>


		<tabber select="1" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import mixinList from '@/mixins/list.js'
	export default {
		mixins : [mixinList],
		components: {
			tabber,
		},
		data() {
			return {
				tabs: [
					{
						name: '个人记工',
					}, 
					{
						name: '班组记工',
					},
				],
				tabsSatus : [
					{
						name: '在建项目',
					}, 
					{
						name: '结束项目',
					},
				],
				statusList : [
					{
						name : '在建',
						value : 0,
					},
					{
						name : '结束',
						value : 1,
					},
				],
				show: false,
				mixinsListApi : 'commonQueryNotebookList',
				addOrUpdate : false,
				form : {
					title : '',
					status : 0,
				},
			}
		},
		computed: {

		},
		onLoad() {
			this.queryParams.status = 0
			this.queryParams.type = 0
		},
		methods: {
			clickTabsType({index}){
				this.queryParams.type = index
				this.getData()
			},
			clickTabsStatus({index}){
				this.queryParams.status = index
				this.getData()
			},
			submit(){
				
				if(this.$utils.verificationAll(this.form, {
					title : '请输入项目名称',//
				})){
					return
				}
				
				this.form.type = this.queryParams.type
				
				this.$api('commonAddBill', this.form, res => {
					if(res.code == 200){
						this.show = false
						this.form = {
							title : '',
							status : 0,
						}
						this.getData()
					}
				})
			},
			openUpdate(item){
				this.form = {
					id : item.id,
					title : item.title,
					status : item.status,
					status : item.status,
				}
				this.addOrUpdate = true
				this.show = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.page-tag {
			font-weight: 600;
		}

		.page-picture {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-around;

			.page-picture-img {
				width: 220rpx;
				height: 220rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				border-radius: 10rpx;

				.page-picture-group {
					height: 80rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
		.list{
			.item{
				margin: 30rpx;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				.top{
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
					.title{
						font-weight: 900;
					}
					.date{
						
					}
				}
				.btn{
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
					.left{
						display: flex;
						align-items: center;
					}
					.right{
						display: flex;
						view{
							padding: 15rpx 40rpx;
							margin: 0 10rpx;
							border-radius: 10rpx;
						}
						.b1{
							border: 1px solid #FFA011;
							color: #FFA011;
						}
						.b2{
							background: $uni-color;
							color: #fff;
						}
					}
				}
			}
		}

		.warp {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;

			.rect {
				width: 90%;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;

				.warp-top {
					text-align: center;
					font-size: 24rpx;
					padding: 15rpx 0;
					color: #FFFFFF;
					background-color: #3796F8;
				}

				.rect-two {
					width: 90%;
					margin-left: 5%;
					font-size: 28rpx;

					.designation {
						padding: 20rpx 0;
						color: #333;
						font-weight: 600;
					}
				}

				.wire {
					border-bottom: 4rpx dashed rgb(168, 197, 255);
				}

				.description {
					padding: 20rpx 0;
					color: #666666;
				}

				.rect-input {
					height: 40rpx;
					background-color: #EBF0FC;
					border: 2rpx solid #4280FD;
					border-radius: 14rpx;
					padding: 10rpx 20rpx;
				}

				.option {
					padding: 40rpx 40rpx 40rpx 0rpx;

					.select {
						background-color: #EBF0FC;
						padding: 10rpx 20rpx;
						color: #4280FD;
						border: 2rpx solid #4280FD;
						border-radius: 5rpx;
					}
				}

				.introduce {
					text-align: center;
					background-color: #EBF0FC;
					padding: 20rpx 0;
					color: #4280FD;
				}

				.button {
					display: flex;
					justify-content: space-around;
					text-align: center;
					align-content: center;
					margin: 50rpx 0;

					view:nth-child(1) {
						color: #575757;
						border: 2rpx solid #C7C7C7;
					}

					view:nth-child(2) {
						color: #FFFFFF;
						background-color: #3796F8;
					}

					view {
						width: 45%;
						padding: 15rpx 0;
						border-radius: 32rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>