zhongshen_project/addon/cashier---/source/os/components/nc-member-recharge/nc-member-recharge.vue

<template>
	<view style="height: 100%;">
		<scroll-view scroll-y="true" class="info-wrap" v-if="type == 'member'">
			<view class="header">会员充值</view>
			<view class="headimg-content" v-if="memberInfo">
				<view class="headimg"><image :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.img(defaultImg.head)"></image></view>
				<view class="header-info">
					<view class="name">
						<text>{{ memberInfo.nickname }}</text>
						<text v-if="memberInfo.member_level" class="level-name">{{ memberInfo.member_level_name }}</text>
						<button type="default" @click="switchMember()" class="primary-btn">切换会员</button>
					</view>
					<view class="header-info-item">
						<view>手机号：{{ memberInfo.mobile || '--' }}</view>
					</view>
				</view>
			</view>
			<view class="headimg-content" v-else>
				<view class="headimg"><image :src="$util.img(defaultImg.head)"></image></view>
				<view class="header-info">
					<view class="name">
						<text>散客</text>
						<button type="default" @click="switchMember()" class="primary-btn">登录会员</button>
					</view>
					<view class="header-info-item"><view>手机号：--</view></view>
				</view>
			</view>
			<view class="form-box">
				<view class="form-content">
					<view class="form-item">
						<view class="form-label">
							<text class="required"></text>
							充值方式：
						</view>
						<view class="form-inline search-wrap">
							<uni-data-checkbox v-model="rechargeType" selectedColor="#8558FA" :localdata="rechargeTypeList"></uni-data-checkbox>
						</view>
					</view>

					<view class="form-item" v-if="rechargeType == 2">
						<view class="form-label">
							<text class="required">*</text>
							充值金额：
						</view>
						<view class="form-inline search-wrap"><input type="number" class="form-input" v-model="rechargeMoney" /></view>
					</view>

					<view class="form-item" v-if="rechargeType == 1">
						<view class="form-label">
							<text class="required">*</text>
							充值金额：
						</view>
						<view class="form-inline ">
							<view class="label-list">
								<view
									class="form-label"
									:class="{ active: rechargeIndex == index }"
									@click="rechargeIndex = index"
									v-for="(item, index) in memberRecharge"
									:key="index"
								>
									<view class="price">{{ item.buy_price }}元</view>
									<view class="balance">到账{{ item.face_value }}元</view>
								</view>
							</view>
						</view>
					</view>
					<view class="form-item" v-if="reward">
						<view class="form-label">
							<text class="required">*</text>
							充值优惠：
						</view>
						<view class="form-inline">
							<view class="content-box">
								<view class="content-gift" v-if="memberRecharge[rechargeIndex].growth">
									<i class="iconfont iconchengchangzhi"></i>
									赠送{{ memberRecharge[rechargeIndex].growth }}成长值
								</view>
								<view class="content-gift" v-if="memberRecharge[rechargeIndex].point">
									<i class="iconfont iconjifen"></i>
									赠送{{ memberRecharge[rechargeIndex].point }}积分
								</view>
								<view class="content-gift" v-if="memberRecharge[rechargeIndex].coupon_id">
									<i class="iconfont iconyouhuiquan1"></i>
									赠送优惠券 X{{ memberRecharge[rechargeIndex].coupon_id.split(',').length }}
								</view>
							</view>
						</view>
					</view>
					<view
						class="gift-remark"
						v-if="rechargeType == 1 && memberRecharge.length > 0 && memberRecharge[rechargeIndex] && memberRecharge[rechargeIndex].goods_data != undefined"
					>
						备注：赠送的产品需线下提货，赠送的项目可在线下进行使用
					</view>

					<view class="action-btn"><button type="primary" class="primary-btn" @click="pay()">充值</button></view>
				</view>
			</view>
		</scroll-view>

		<view class="info-wrap payment-info-wrap" v-if="type == 'pay'">
			<nc-payment ref="payment" :supportBalance="false" @cancel="cancelPayment" @success="paySuccess" @getMemberInfo="getMemberInfo" :outTradeNo="outTradeNo"></nc-payment>
		</view>
	</view>
</template>

<script>
import uniDataCheckbox from '@/components/uni-data-checkbox/uni-data-checkbox.vue';
export default {
	components: {
		uniDataCheckbox
	},
	name: 'ncMember',
	props: {},
	data() {
		return {
			type: 'member',
			memberId: 0,
			flag: false,
			//充值卡相关
			memberRecharge: [],
			rechargeMoney: 0,
			rechargeType: 1,
			rechargeIndex: 0,
			rechargeTypeList: [
				{
					text: '充值套餐',
					value: 1
				},
				{
					text: '自定义金额',
					value: 2
				}
			],
			orderData: {
				pay_money: 0,
				goods_info: null,
				remark: ''
			},
			outTradeNo: '',
			isRepeat: false,
			remark: ''
		};
	},
	created() {
		this.getMemberRechange();
		if (this.memberInfo) {
			this.memberId = this.memberInfo.member_id;
		}
	},
	methods: {
		switchMember() {
			this.$emit('switchMember');
		},

		//充值卡相关
		getMemberRechange() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/recharge/activity',
				success: res => {
					if (res.code == 0 && res.data) {
						this.memberRecharge = res.data;
						if (this.memberRecharge.length > 0) {
							for (let i in this.memberRecharge) this.memberRecharge[i]['money'] = this.memberRecharge[i]['price'];
							this.calculation();
						} else {
							this.rechargeType = 2;
							this.rechargeTypeList[0].disable = true;
						}
					}
				}
			});
		},

		getMemberInfo() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/member/info',
				data: {
					member_id: this.memberInfo.member_id
				},
				success: res => {
					if (res.code == 0 && res.data) {
						this.$store.commit('setMemberInfo', res.data);
					} else {
						this.$util.showToast({ title: '未获取到会员信息' });
					}
				}
			});
		},
		calculation() {
			let pay_money = this.rechargeType == 1 ? this.memberRecharge[this.rechargeIndex]['price'] : this.rechargeMoney;
			this.orderData.pay_money = parseFloat(pay_money);
		},
		pay() {
			if (!this.memberInfo || (this.memberInfo && !this.memberInfo.member_id)) {
				this.type = 'member';
				this.switchMember();
				return false;
			}

			if (this.rechargeType == 1 && !this.memberRecharge[this.rechargeIndex]) {
				this.$util.showToast({ title: '请选择充值套餐' });
				return;
			}
			if (this.rechargeType == 2 && (isNaN(parseInt(this.rechargeMoney)) || parseInt(this.rechargeMoney) <= 0)) {
				this.$util.showToast({ title: '请输入正确的充值金额' });
				return;
			}

			let data = {
				member_id: this.memberInfo.member_id,
				remark: this.remark
			};
			if (this.rechargeType == 1) {
				data.sku_array = [{ recharge_id: this.memberRecharge[this.rechargeIndex].recharge_id }];
			} else {
				data.sku_array = [{ money: this.rechargeMoney }];
			}
			data.sku_array = JSON.stringify(data.sku_array);

			if (this.isRepeat) return;
			this.isRepeat = true;

			this.$api.sendRequest({
				url: '/cashier/storeapi/cashierordercreate/rechargecreate',
				data: data,
				success: res => {
					this.isRepeat = false;
					if (res.code == 0) {
						this.outTradeNo = res.data.out_trade_no;
						this.type = 'pay';
					} else {
						this.$util.showToast({ title: res.message });
					}
				}
			});
		},
		cancelPayment() {
			this.type = 'member';
			this.calculation();
		},
		paySuccess() {
			let that = this;
			this.type = 'member';
			this.orderData.pay_money = 0;
			this.orderData.goods_info = null;
			this.outTradeNo = '';
			this.remark = '';
			this.calculation();
			if (this.memberInfo) this.memberId = this.memberInfo.member_id;
			this.getMemberInfo();
		}
	},
	computed: {
		reward() {
			if (this.rechargeType == 1 && this.memberRecharge.length > 0 && this.memberRecharge[this.rechargeIndex]) {
				let data = this.memberRecharge[this.rechargeIndex];
				if (data.point || data.growth || data.coupon) return true;
			}
		}
	},
	watch: {
		rechargeMoney: function(nval, oval) {
			this.calculation();
		},
		rechargeIndex: function(nval, oval) {
			this.calculation();
		},
		type: function(nval) {
			let bool = nval == 'member' ? true : false;
			this.$emit('actionBtnShwoFn', bool);
		}
	}
};
</script>

<style lang="scss">
.header {
	height: 0.66rem;
	line-height: 0.66rem;
	text-align: left;
	border-bottom: 0.01rem solid #e6e6e6;
	color: #303133;
	font-size: 0.14rem;
}

.search-wrap {
	.search-box {
		padding-top: 2rem;
		display: flex;
		align-items: center;
		height: calc(100% - 0.86rem);
		flex-direction: column;
		justify-content: center;
		.search-title {
			font-size: 0.18rem;
			color: #303133;
		}
		.search-content {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 0.3rem;
			input {
				height: 0.5rem;
				width: 60%;
				max-width: 5rem;
				background: #ffffff;
				padding-left: 0.2rem;
				border: 0.01rem solid #cccccc;
				box-sizing: border-box;
				font-size: 0.18rem;
			}
			button {
				margin: 0;
				width: 1.2rem;
				height: 0.5rem;
				font-size: 0.18rem;
				text-align: center;
				line-height: 0.5rem;
				margin-right: 0.15rem;
			}
		}
		.search-desc {
			color: #909399;
			font-size: 0.14rem;
			margin-top: 0.3rem;
		}
		.search-tips {
			color: $primary-color;
			font-size: 0.14rem;
			margin-top: 0.15rem;
		}
	}
}

.info-wrap {
	position: relative;
	height: 100%;
	&.payment-info-wrap {
		border-left: 0.01rem solid #e6e6e6;
		padding-left: 0.2rem;
	}
	.headimg-content {
		display: flex;
		align-items: center;
		margin-top: 0.2rem;
		.headimg {
			width: 0.7rem;
			height: 0.7rem;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.header-info {
			margin-left: 0.15rem;
			flex: 1;
			.name {
				display: flex;
				align-items: center;
				font-size: 0.16rem;
				color: #303133;
				.level-name {
					background: #ffffff;
					border: 0.01rem solid $primary-color;
					border-radius: 0.02rem;
					font-size: 0.12rem;
					color: $primary-color;
					margin-left: 0.15rem;
					min-width: 0.65rem;
					height: 0.22rem;
					text-align: center;
					line-height: 0.22rem;
				}
				.primary-btn {
					padding: 0 0.1rem;
					width: 0.7rem;
					font-size: $uni-font-size-sm;
					margin: 0;
					height: 0.24rem;
					line-height: 0.24rem;
					margin-left: 0.1rem;
				}
			}
			.header-info-item {
				display: flex;
				align-items: center;
				margin-top: 0.1rem;
				justify-content: space-between;
				view {
					text-align: left;
					font-size: 0.14rem;
					color: #303133;
					opacity: 0.9;
				}
			}
		}
	}

	.table-data-list {
		padding: 0 0.15rem;
		margin-top: 0.2rem;
	}
}

.form-box {
	.form-content {
		margin-top: 0.2rem;
		.gift-remark {
			margin-left: 1.3rem;
			color: #999;
			margin-bottom: 0.15rem;
		}
		.form-item {
			margin-bottom: 0.1rem;
			display: flex;

			.form-label {
				width: 1.3rem;
				text-align: right;
				padding-right: 0.1rem;
				box-sizing: border-box;
				height: 0.32rem;
				line-height: 0.32rem;
				.required {
					color: red;
					margin-right: 0.03rem;
				}
			}
			.form-inline {
				flex: 1;
				width: 0;
				line-height: 0.32rem;
				margin-right: 0.1rem;
				box-sizing: border-box;
				.form-input {
					width: 2.3rem;
					border-width: 0.01rem;
					border-style: solid;
					background-color: #fff;
					color: rgba(0, 0, 0, 0.85);
					border-radius: 0.02rem;
					padding-left: 0.1rem;
					height: 0.32rem;
					line-height: 0.32rem;
					font-size: 0.14rem;
					border-color: #e6e6e6;
					border-radius: 0.02rem;
				}
				.form-textarea {
					border-width: 0.01rem;
					border-style: solid;
					background-color: #fff;
					color: rgba(0, 0, 0, 0.85);
					border-radius: 0.02rem;
					padding-left: 0.1rem;
					line-height: 0.32rem;
					font-size: 0.14rem;
					border-color: #e6e6e6;
				}
				button {
					// width: calc(50% - 0.05rem);
					display: inline-block;
					margin-right: 0.1rem;
					&:nth-child(2) {
						margin-right: 0;
					}
				}
				.label-list {
					display: flex;
					flex-wrap: wrap;
					.form-label {
						padding: 0.05rem 0.15rem;
						border: 0.01rem solid #e6e6e6;
						display: flex;
						align-items: center;
						text-align: center;
						margin: 0 0.1rem 0.1rem 0;
						cursor: pointer;
						flex-direction: column;
						width: unset;
						height: unset;
						white-space: nowrap;
						.balance {
							color: #999;
						}
						.price {
							font-size: 0.17rem;
							font-weight: 600;
						}
						&.active {
							border-color: $primary-color;
							color: $primary-color;
							background-color: rgba(133, 88, 250, 0.1);
							.balance {
								color: $primary-color;
							}
						}
					}
				}
				.content-gift {
					background-color: #f8f8f8;
					padding: 0.04rem 0.1rem;
					margin-bottom: 0.15rem;
					font-size: 0.13rem;
					i {
						color: $primary-color;
						margin-right: 0.05rem;
					}
					text {
						color: $primary-color;
					}
				}
			}
			.search-wrap {
				position: relative;
				i {
					position: absolute;
					top: 50%;
					right: 0.1rem;
					transform: translateY(-50%);
					border-left: 0.01rem solid #e6e6e6;
					line-height: 0.3rem;
					padding-left: 0.1rem;
					cursor: pointer;
				}
			}
		}
		.action-btn {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0.15rem;
			button {
				height: 0.4rem;
				line-height: 0.4rem;
			}
		}
	}
}
</style>