heshanApp/pages/agent/components/rewardDoctor.vue

<template>
	<!-- 打赏医生 -->
	<view class="rewardDoctorBox">
		<image class="closeIcon" src="/static/image/healthRecords/input_close_icon.png" mode="" @tap="closeFun"></image>
		<view class="rewardDoctor es-mt-40">
			<view class="rewardDoctor-title u-f-ajc u-f-jsb">
				<view class="u-f-ajc">
					<view class="u-f-ajc es-mr-24">
						<image class="es-icon-80 " src="/static/image/agent/fanghua_coin_icon.png" mode="">
						</image>
					</view>
					<view class="">
						<view class="es-c-22 es-fs-34 es-fw-600">
							健康币打赏
						</view>
						<view class="es-c-99 es-fs-26">
							可抵现金
						</view>
					</view>
				</view>
				<view class="">
					<view class="u-f-ajc">
						<view class="u-f-ajc es-mr-10">
							<image class="rewardDoctor-title-image " src="/static/image/agent/hot_selling_list_img.png"
								mode="">
							</image>
						</view>
						<view class="u-f-ajc es-mr-10 es-c-22 es-fs-48 es-fw-bold">
							{{userinfo.integral}}
						</view>
						<view class="u-f-ajc">
							<image class="rightImage rewardDoctor-title-image "
								src="/static/image/agent/hot_selling_list_img.png" mode="">
							</image>
						</view>
					</view>
					<view class="es-mt-6 es-c-99 es-fs-24">
						健康币余额
					</view>
				</view>
			</view>

			<view class="es-bc-white es-br-32 rewardDoctor-box">
				<view class="rewardDoctor-boxContent">
					<view class="rewardDoctor-boxContent-list u-f-ajc u-f-fc" v-for="(item,index) in coinArr"
						:key="index" :class="[item==active?'bgFCF0E7 colorFF5C03':'bgF5F7FA es-c-22']"
						@tap="coinChange(item)">
						<view class="es-fs-32 es-fw-500" v-if="active==coinArr">
							自定义
						</view>
						<view class="" v-else>
							<text class="es-fs-40 es-fw-600 es-mr-4">{{item}}</text>
							<text class="es-fs-32 es-fw-500">币</text>
						</view>
					</view>
					<view class="rewardDoctor-boxContent-list u-f-ajc u-f-fc"
						:class="[999==active?'bgFCF0E7 colorFF5C03':'bgF5F7FA es-c-22']" @tap="coinChange(999)">
						<view class="es-fs-32 es-fw-500" v-if="active==999">
							<input type="number" v-model="coin" class="es-fs-32 es-tc" placeholder="1-500"
								placeholder-style="{color: #CCCCCC;}" />
						</view>
						<view class="es-fs-32 es-fw-500" v-else>
							自定义
						</view>
					</view>
				</view>
				<view class="es-fs-24 es-c-99 es-mt-32">
					<text class="colorFF5C033 es-mr-12">*</text>
					<text>打赏是对医生专业服务的认可和支持，所获收益将全部归医生本人所有。请根据自身情况合理选择打赏数量。</text>
				</view>
				<view class="es-mt-32 fs-30 es-fw-500 es-c-white rewardDoctor-box-btn u-f-ajc" @tap="rewardDoctorTap">
					确认打赏
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
	} from '@/api/user'
	import {
		getDictByKey,
		rewardAiDoctor
	} from '@/api/agent.js'
	export default {
		name: "rewardDoctor",
		props: {
			rewardDoctor: {
				type: Number
			},
			doctorId: {
				type: Number
			},
		},
		data() {
			return {
				rewardShow: false,
				coinArr: [],
				active: null,
				coin: null,
				userinfo: null,
			};
		},
		created() {
			this.getDictByKeyFun()
		},
		methods: {
			closeFun() {
				this.$emit('close')
			},
			async getDictByKeyFun() {
				let info = uni.getStorageSync('userInfo')
				this.userinfo = info && JSON.parse(info)
				const res = await getDictByKey({
					key: 'ai_doctor_integral'
				})
				if (res.code == 200) {
					this.coinArr = res.data.map(item => item.dictValue)
					this.rewardShow = true
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			coinChange(e) {
				this.active = e
			},
			async rewardDoctorTap() {
				if (!this.active) {
					return uni.showToast({
						icon: 'none',
						title: '请选择打赏币！'
					})
				}
				if (this.active == 999 && !this.coin) {
					return uni.showToast({
						icon: 'none',
						title: '请填写打赏币！'
					})
				}
				if (this.active == 999 && this.coin && this.coin > 500) {
					return uni.showToast({
						icon: 'none',
						title: '打赏币请填写1-500！'
					})
				}
				if (this.active == 999 && this.coin) {
					this.active = this.coin
				}
				const res = await rewardAiDoctor({
					doctorId: this.doctorId,
					integral: this.active,
					userId: this.userinfo.userId,
					integralNum: this.userinfo.integral,
					nickName: this.userinfo.nickName,
					phone: this.userinfo.phone
				})
				if (res.code == 200) {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					const result = await getUserInfo()
					if (result.code == 200) {
						if (result.user != null) {
							uni.setStorageSync('userInfo', JSON.stringify(result.user));
							this.userinfo = result.user
						}
					}
					this.rewardShow = false
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rewardDoctorBox {
		position: relative;

		.closeIcon {
			position: absolute;
			top: -80rpx;
			right: 40rpx;
			width: 56rpx;
			height: 56rpx;
		}
	}

	// 打赏医生
	.rewardDoctor {
		background: linear-gradient(180deg, #FEFEFF 0%, #F8F9FE 100%);
		box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.8);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		border: 2rpx solid #FFFFFF;

		.rewardDoctor-title {
			padding: 32rpx;

			.rewardDoctor-title-image {
				width: 26rpx;
				height: 40rpx;
			}

			.rightImage {
				transform: scaleX(-1);
			}
		}

		.rewardDoctor-box {
			padding: 32rpx;

			.rewardDoctor-boxContent {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 16rpx;

				.rewardDoctor-boxContent-list {
					border-radius: 32rpx;
					height: 120rpx;
				}

				.bgFCF0E7 {
					background: #FCF0E7;
				}

				.colorFF5C03 {
					color: #FF5030;
				}

				.bgF5F7FA {
					background: #F5F7FA;
				}
			}

			.colorFF5C033 {
				color: rgba(255, 92, 3, 0.3);
			}

			.rewardDoctor-box-btn {
				height: 96rpx;
				background: #FF5030;
				border-radius: 48rpx;
			}
		}
	}
</style>