jhlapp/pagesT/account/AccountDetails.vue

<template>
	<view class="detail-view">
		<view class="top-view clearfix">
			<view class="float_left">
				<text v-if="order_detail.enableStatus === 5" class="status-text">启用</text>
				<text v-else class="status-text">禁用</text>
			</view>
		</view>
		<view class="detail-cont">
			<view class="info-li clearfix">
				<view class="label">账户名称</view>
				<view class="value">{{ order_detail.name }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">账户号</view>
				<view class="value">{{ order_detail.accountNumber }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">制单时间</view>
				<view class="value">{{ $u.timeFormat(order_detail.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">期初余额</view>
				<view class="value">{{ $utils.formattedNumber(order_detail.money) }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">所属店铺</view>
				<view class="value">{{order_detail.shopName }}</view>
			</view>
			<view class="info-li clearfix">
				<!-- <u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.name">
						{{item.name}}
					</u-radio>
				</u-radio-group> -->
				<!-- <view class="label">禁用/启用</view>
				<view class="remark">
					<u-switch v-model="checked"  inactive-color="#eee"></u-switch>
				</view> -->

			</view>
			<view class="remark-li">
				<view class="label">备注</view>
				<view class="remark">
					<text>{{ order_detail.remark || '无' }}</text>
				</view>
			</view>
		</view>
		<view class="detail-bottom">
			<view v-if="$accessCheck($Access.AccountListDelAccount)&&order_detail.enableStatus === 4" class="handel-btn info-btn"
				@click="openModel('请确认是否要删除？', '删除')">删除</view>
			<view v-if="$accessCheck($Access.AccountListEditAccount)&&order_detail.enableStatus === 4" class="handel-btn"
				@click="goPage('/pagesT/account/AddAcount?id=' + order_id)">编辑</view>
			<view v-if="$accessCheck($Access.PurchaseOrderUpdateAuditStatus)" class="handel-btn"
				@click="openModel(1, '启用')">{{order_detail.enableStatus === 4?'启用':'禁用'}}</view>
		</view>
		<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="modelConfirm">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				list: [{
						name: '禁用',
						audito: 4
					},
					{
						name: '启用',
						audito: 5
					},
				],
				model_tag: '',
				model_show: false,
				model_content: '',
				order_id: 0,
				order_detail: {}
			};
		},
		onPullDownRefresh() {
			this.getAccountInfo();
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			},
		},
		onLoad(options) {
			this.order_id = options.id;
		},
		onShow() {
			this.getAccountInfo();
		},
		methods: {
			radioGroupChange(e) {
				console.log(e)
			},
			// 详情
			getAccountInfo() {
				this.$u.api
					.getAccountInfo(this.order_id)
					.then(res => {
						uni.stopPullDownRefresh();
						this.order_detail = res.data;
						console.log(res.data)
					})
					.catch(err => {
						uni.stopPullDownRefresh();
					});
			},
			// 打开提示框
			openModel(content, tag) {
				if(content===1){
					if(this.order_detail.enableStatus===4){
						this.model_content='您是否要启用'
						this.model_show = true;
						this.model_tag = tag;
						// this.order_detail.enableStatus=5
					}else{
						this.model_content='您是否要禁用'
						this.model_show = true;
						this.model_tag = tag;
						// this.order_detail.enableStatus=4
					}					
				}else{
					this.model_content = content;
					this.model_show = true;
					this.model_tag = tag;
				}
				
			},
			// 审核
			modelConfirm() {
				if(this.order_detail.enableStatus===4){					
					this.order_detail.enableStatus=5
				}else{					
					this.order_detail.enableStatus=4
				}		
				switch (this.model_tag) {
					case '启用':
						this.updateAuditStatusPurchase();
						break;
					case '删除':
						this.delPurchase(this.order_id);
						break;
				}
			},
			// 审核订单
			updateAuditStatusPurchase() {
				this.$u.api
					.updateAccountStatus( {
						id: this.order_id,
						enableStatus: this.order_detail.enableStatus,
					})
					.then(res => {						
						this.$u.toast('操作成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);						
					});
			},
			// 删除账户
			delPurchase() {
				this.$u.api.delAccount(this.order_id).then(res => {
					this.$u.toast('已删除');
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detail-view {
		padding-bottom: 100rpx;
	}

	.top-view {
		background-color: $uni-color-primary;
		height: 200rpx;
		padding: 0 30rpx;
		color: #ffffff;
		font-size: 40rpx;
		line-height: 100rpx;

		.status-text {
			margin-right: 10rpx;
		}

		.float_right {
			font-size: 28rpx;
		}
	}

	.detail-cont {
		width: 710rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx 0;
		overflow: hidden;
		transform: translateY(-80rpx);

		.info-li {
			padding: 0 30rpx;
			line-height: 80rpx;

			.label {
				float: left;
				color: #6c6c6c;
			}

			.value {
				float: right;
			}

			.money-label {
				font-weight: bold;
			}

			.money-value {
				font-weight: bold;
				font-size: 30rpx;
			}
		}

		.remark-li {
			padding: 0 30rpx;

			.label {
				color: #6c6c6c;
				line-height: 60rpx;
			}
		}

		.b-b {
			border-bottom: 1px solid #eeeeee;
		}

		.goods-title {
			background-color: #5e6a84;
			line-height: 72rpx;
			width: 644rpx;
			margin: 30rpx auto 0;
			color: #ffffff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 0 24rpx;
			position: relative;
			z-index: 1;
		}

		.goods-ul {
			padding: 0 30rpx 30rpx;
			box-shadow: 0px -3px 12rpx 0px #e4eaf5;
			border-bottom: 1px solid #eeeeee;

			.goods-li {
				padding-top: 24rpx;

				.goods-img {
					margin-right: 20rpx;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 8rpx;
						display: block;
					}
				}

				.info {
					.goods-name {
						width: 470rpx;
						height: 34rpx;
						line-height: 34rpx;
					}

					.goods-code {
						font-size: 24rpx;
						padding-top: 10rpx;
					}

					.goods-num {
						padding-top: 10rpx;
						font-size: 24rpx;

						.price {
							font-size: 28rpx;
							font-weight: bold;
							color: $uni-color-error;
						}
					}
				}
			}
		}
	}
</style>