distribution-uni/package2/index/downstream.vue

<template>
	<view>
		<view class="formBox">
			<u-alert description="点击可查看对应每笔销售单" type="primary"></u-alert>
			<view>
				<view v-for="(item,index) in list" :key="index" style="display: flex;height: 160rpx;margin-top: 20rpx;background: #fff;">
					<view style="flex: 1;height: 160rpx;padding-left: 20rpx;">
						<view style="height: 80rpx;line-height: 80rpx;">
							<view>{{ item.nickname == null ?'暂无':item.nickname}}</view>
						</view>
						<view style="height: 80rpx;line-height: 80rpx;display: flex;color: red;">
							<view>欠款总金额:</view>
							<view>
								{{ item.no_earn == null ?'暂无':item.no_earn }}
							</view>
						</view>
					</view>
					<view style="flex: 1;height: 70rpx;height: 160rpx;">
						<view @tap="onItemClick(item)" style="height: 60rpx;line-height: 60rpx;width: 130rpx;background: #5fd9ee;color: #fff;border-radius: 10px;text-align: center;margin-top: 10rpx;margin: 10rpx 0 0 200rpx;">
							查看详情
						</view>
						<view @tap.stop="toggle(item)" style="height: 60rpx;line-height: 60rpx;width: 130rpx;background: #5fd9ee;color: #fff;border-radius: 10px;text-align: center;margin-top: 10rpx;margin: 20rpx 0 0 200rpx;">
							回款
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 回款金额输入框 -->
		<uni-popup ref="inputDialog" type="dialog">
			<!-- <uni-popup-dialog ref="inputClose" mode="input" inputType="digit" title="充值金额" placeholder="请输入充值金额"
				@confirm="receivePay"></uni-popup-dialog> -->
			<view style="background: #fff;width: 500rpx;height: 293rpx;border-radius: 10px;">
				<view style="text-align: center;line-height: 80rpx;font-size: 36rpx;font-weight: 500;color: #777;">
					充值金额
				</view>
				<view @tap="showPrice = true" style="width: 90%;border: 1px solid #eee;height: 70rpx;margin: 30rpx auto 0;">
					<input type="number" v-model="keyboardNum" disabled placeholder="请输入充值金额" style="width: 100%;height: 100%;padding-left:20rpx;">
				</view>
				<view style="display: flex;border-top: 1px solid #eee;margin-top: 30rpx;text-align: center;font-size: 30rpx;line-height: 80rpx;">
					<view style="flex: 1;" @tap='huicancel'>取消</view>
					<view style="flex: 1;color: blue;border-left: 1px solid #eee;" @tap="receivePay()">确定</view>
				</view>
			</view>	
		</uni-popup>
		<u-keyboard ref="uKeyboard" @confirm='keyboardConfirm' @cancel="keyCancel" @change="valChange" @backspace="backspace" :overlay='false' :closeOnClickOverlay='true' :defaultText="keyboardNum" mode="price" :show="showPrice"></u-keyboard>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'upstream',
		computed: mapState(['userId', 'shopIndex']),
		data() {
			return {
				choose: '1',
				userId:'',
				showPrice:false,
				options1: [{
					text: '编辑金额',
					style: {
						backgroundColor: '#3c9cff'
					}
				}],
				popupShow: false,
				shopName: '',
				list: [],
				keyboardNum:'',
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			keyboardConfirm(){
				this.showPrice = false
			},
			keyCancel(){
				this.showPrice = false
				this.keyboardNum = ''
			},
			// 按键被点击
			valChange(val) {
				this.keyboardNum += val
			},
			// 退格键被点击
			backspace(val) {
				this.keyboardNum = val
			},
			huicancel(){
				this.$refs.inputDialog.close()
				this.keyboardNum = ''
			},
			//回款按钮
			receivePay(e){
				this.tui.request('/app/debt/saveOrUpdateDebt', "post", {
					userId:this.userId,
					amountOwed:this.keyboardNum,
					userType:'0'
				}, false, false).then((res) => {
					if (res.code == 200) {
						this.getList()
						this.tui.toast('操作成功')
						this.keyboardNum = ''
						this.$refs.inputDialog.close()
					}else{
						this.keyboardNum = ""
						this.tui.toast(res.message)
					}
				})
			},
			//打开弹出层
			toggle(item) {
				this.userId = item.userId
				this.$refs.inputDialog.open()
			},
			getList() {
				this.tui.request("/app/customer/debt", "POST", {}, false, true).then((res) => {
					if (res.code == 200) {
						this.list = res.result.records
					} else {
						this.tui.toast(res.message)
					}

				})
			},
			onItemClick(target) {
				uni.navigateTo({
					url: `/pages/index/downarrears?userId=${target.userId}&nickname=${target.nickname}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formBox {
		.uni-data-select {
			width: 100%;
		}

		.tui-order-title {
			position: relative;
			font-size: 28upx;
			line-height: 28upx;
			padding-left: 16upx;
			box-sizing: border-box;
		}

		.tui-order-title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			border-left: 8upx solid $u-primary;
			height: 120%;
			border-radius: 4upx;
		}
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			background-color: #fff;
			margin-bottom: 25rpx;
			padding: 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&__left {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			&__right {
				display: flex;
				align-items: center;
				flex-basis: 300rpx;
				justify-content: space-between;

				&__text {
					color: firebrick;
				}

				&__money {
					flex-basis: 100rpx;
					color: red;
					text-align: right;
				}
			}

			&__text {
				padding: 12rpx 0;
				width: 100%;
			}

			&__time {
				font-size: 22rpx;
				color: #3a3a3a;
			}

			&__icon {
				flex-basis: 20rpx;
			}
		}
	}

	.edit-info {
		height: 450 rpx;
		padding: 25rpx;

		.title {
			text-align: center;
			font-size: 32rpx;
		}

		.info-name {
			display: flex;
			align-items: center;
			margin: 35rpx 0;
		}
	}
</style>
<style>
	.u-radio {
		margin: 15 upx 0;
	}
</style>