shenzeeUniApp/packageB/pages/remote/updatePayment.vue

<template>
	<view>
		<view class="search">
			<view class="search-title">
				{{$t('dosugar.equipmentClientID')}}
			</view>
			<view class="search-input">
				<input type="text" :placeholder="$t('dosugar.placeholder')" v-model="searchClientId" />
			</view>
			<view class="search-button">
				<button type="primary" size="mini" class="" @click="search()">
					<p class="">{{$t('dosugar.search')}}</P>
				</button>
			</view>
		</view>
		<view class="td-right">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						{{$t('dosugar.chooseEquipment')}}
					</view>
					<view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
						<picker @change="changeEquipment" :value="index" :range="equipmentNameList">
							<view class="uni-input">{{equipmentNameList[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="paymentType" v-for="(item,index) in payments" :key="index">
			<P class="paymentTypeName">{{item.value}}: </P>
			<radio-group @change="changeShow(item.key, $event)">
				<label>
					<radio :checked='item.status== 1' :value="onStatus.toString()">{{$t('payment.on')}}</radio>
				</label>
				<label>
					<radio :checked='item.status==null || item.status==0' :value="offStatus.toString()">
						{{$t('payment.off')}}
					</radio>
				</label>
			</radio-group>
		</view>
		<view class="tr">
			<button type="primary" formType="submit" @click="updatePaymentType()" class="button">
				{{$t('flowers.submit')}}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				globalUser: {},
				index: null,
				index2: null,
				equipmentName: null,
				equipmentNameList: [],
				// Nayax信用卡器支付、WMDB信用卡支付以及混合支付
				payments: [],
				paymentList: [], //支付方式数组
				paymentType: null, //支付方式提交数据
				productName: null,
				equipmentId: null,
				searchClientId: null,
				showType: 0,
				defaultPayment: [{
						key: 'Z1',
						value: 'Nayax payment',
						status: 0
					},
					{
						key: 'Z2',
						value: 'WMDB payment',
						status: 0
					},
					{
						key: 'Z3',
						value: 'Mixed payment',
						status: 0
					},
				], //默认支付方式列表
				onStatus: 1,
				offStatus: 0,
			}
		},
		onShow() {
			this.globalUser = uni.getStorageSync("globalUser");
			var token = uni.getStorageSync("token");
			uni.setNavigationBarTitle({
				title: this.$t('remoteList.payment')
			});
			if (token.length > 1) {
				this.getEquipmentListData();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}

		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser']),
			getEquipmentListData() {
				this.getEquipmentListByUser(this.globalUser)
					.then(data => {
						this.merchantList = data;
						var listName = data[0].equipmentList;
						var equipmentNameList = [];
						for (var i = 0; i < listName.length; i++) {
							equipmentNameList.push(this.$t('common.name') + listName[i].name + ' , '+ this.$t('common.ID') + listName[i].clientId.substring(
								listName[i].clientId.length - 6, listName[i].clientId.length));
						}
						this.equipmentNameList = equipmentNameList;
						var listId = data[0].id;
						if (listId != null && listId != '1') {
							uni.setStorageSync("listName", listName);
						}
						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			// 根据编号搜索机器
			search() {
				var clientId = this.searchClientId;
				var list = uni.getStorageSync("listName");
				var n = 0;
				for (var i = 0; i < list.length; i++) {
					var code = list[i].clientId.substring(list[i].clientId.length - 6, list[i].clientId.length);
					if (code == clientId) {
						n++;
						this.index = i;
						console.log(this.index);
						var id = list[i].id;
						console.log(id);
						this.getPaymentType(this.index);
						this.equipmentId = id;
						this.productName = null;
						this.index2 = null;
						break;
					}
				}
				if (n == 0) {
					uni.showModal({
						title: "提示",
						content: "找不到该机器",
						success: (res) => {

						}
					})
				}
			},
			// 改变机器
			changeEquipment: function(e) {
				this.index = e.target.value;
				this.getPaymentType(this.index);
				this.index2 = null;
				this.searchClientId = null;
			},
			// 获取支付方式列表
			getPaymentType(index) {
				this.paymentType = null;
				this.payments = null;
				var list = uni.getStorageSync("listName");
				this.equipmentId = list[index].id;
				if (list[index].paymentType != null) {
					this.paymentType = list[index].paymentType;
				}
				if (this.paymentType == null) {
					this.payments = this.defaultPayment;
				} else {
					this.paymentList = new Map(this.paymentType.split(',').map(key => [key, true]));
					this.payments = this.defaultPayment.map(item => {
						if (this.paymentList.has(item.key)) {
							return {
								...item,
								status: 1,
							};
						} else {
							return item;
						}
					});
				}
				this.paymentList = [];
				this.productName = null;
				this.paymentType = null;
			},
			// 改变支付方式
			changeShow(key, e) {
				const status = e.target.value;
				console.log(key, status);
				if (status === '1') {
					this.payments = this.payments.map(payment => {
						if (payment.key === key) {
							payment.status = 1;
						}
						return payment;
					})
				} else {
					this.payments = this.payments.map(payment => {
						if (payment.key === key) {
							payment.status = 0;
						}
						return payment;
					})
				}
				console.log(this.payments);
			},
			// 修改支付方式
			updatePaymentType() {
				this.paymentList = [];
				for (let i = 0; i < this.payments.length; i++) {
					const item = this.payments[i]
					if (item.status === 1) {
						this.paymentList.push(item.key);
					}
				}
				this.paymentType = this.paymentList.join(',')
				uni.showModal({
					title: "提示",
					content: "是否修改？",
					success: (res) => {
						if (res.confirm) {
							var token = uni.getStorageSync("token");
							var equipmentId = this.equipmentId;
							var paymentType = this.paymentType;
							uni.request({
								url: this.serverurl + '/TEquipment/updatePaymentType',
								data: {
									"id": equipmentId,
									"paymentType": paymentType,
								},
								header: {
									'token': token
								},
								method: "POST",
								success: (res) => {
									var code = res.data.code;
									if (code == true) {
										uni.showToast({
											title: this.$t('payment.success'),
											duration: 2000
										});
									} else {
										uni.showToast({
											icon: 'error',
											title: res.data.message,
											duration: 2000
										});
									}
								},
							});
						} else if (res.cancel) {}
					}
				})
			}
		}
	}
</script>

<style>
	.search {
		width: 100%;
		padding-top: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.search-title {
		width: 28%;
		text-align: center;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
	}

	.search-input {
		width: 48%;
		height: 25px;
		text-align: center;
		font-size: 26upx;
		/* font-family: "PingFang-SC-Bold"; */
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}

	.search-button {
		width: 20%;
		padding-left: 10px;
		padding-bottom: 5px;
		text-align: center;
		height: 60upx;
		text-align: left;
	}

	.tr {
		padding-top: 20px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 48upx;
		font-family: "PingFang-SC-Bold";
		/* position: fixed; */
		bottom: 100upx;
		width: 100%;
	}

	.paymentType {
		font-family: "PingFang-SC-Bold";
		font-size: 18px;
		padding-top: 15upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.paymentTypeName {
		width: 80%;
		padding-left: 40upx;
		padding-right: 10upx;
	}

	.button {
		text-align: center;
		width: 30%;
	}

	.p2 {
		font-size: 30upx;
		/* #ifndef H5 */
		padding-top: 3upx;
		/* #endif */
		position: absolute;
		/* 水平居中 */
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.p1 {
		font-size: 48upx;
	}

	.p {
		align: right;
		color: #007AFF;
		padding-top: 30upx;
	}

	.line {
		background: #ECECEC;
		height: 20upx;
	}
</style>