high-mini/member-Recharge/rec-confirmation/rec-confirmation.vue

<template>
	<view>
		<view class="concont width94 mart10 backcorfff height45 alijusstart paddtop5 paddbotm5">
			<input class="width100 padleft15 " placeholder="请输入充值手机号" />
		</view>
		<view class="concont width94 mart10 backcorfff">
			<view class="width94 paddtop10 font14 fcor333">
				充值详情
			</view>
			<view class="width100 bor-botm1 mart10 marb10"></view>
			<view class="width100 ">
				<view class="width100 alijusstart paddbotm15 mart10 bor-botm1">
					<view class="width10">
					</view>
					<view class="width50 font14 fcor333 fontwig6">腾讯一月会员</view>
					<view class="width20 font12 fcor999">x1</view>
					<view class="width20">
						<view class="width100 fcor333 font13">¥16.8</view>
						<view class="width100 fcor999 font13" style="text-decoration: line-through;">¥17.8</view>
					</view>
				</view>
				<view class="width90 fotrt height50 font13 fcor999">
					共 <text class="fcor333 fontwig6" style="margin: 0px 5px;"> 1 </text> 件 小计:
					<text class="font16 colorc3 fontwig6 margle"> ¥16.8</text>
				</view>
			</view>
		</view>
		<view class="width94 concont mart10 backcorfff">
			<view class="width92 alijusstart paddtop20">
				<view class="width30 fcor333 fontwig6 font16">
					积分抵扣
				</view>
				<view class="cj-slider">
					<view class="flleft fotct font14 fcor666" style="width: 15%;">0</view>
					<cj-slider style="width: 60%; float:left;" v-model="priceValue" :min="0" :max="availIntegal"
						:step="1" :blockWidth="40" @end="blockEnd" />
					<view class="flright fotrt font14 fcor666" style="width: 25%;">{{availIntegal}}</view>
				</view>
			</view>
			<view class="width94 line1 mart15 marb5"></view>
			<view class="height50 width100 backcorfff">
				<view class="width70 flleft fcor666 font16 text1" style="padding-left: 4%;">
					抵扣金额
				</view>
				<view class="width20 flright fotrt paddtright10 font15 fcor666 alijun" style="align-items: center;">
					¥{{priceValue[1] / 100}}
				</view>
			</view>
			<view class="height50 width100">
				<view class="width100 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
					支付方式
					<!-- : 
					<text class="jfrecharge" style="background-color: #c72a20;" v-if="typeid == 1" @click="jumpdeposits">积分充值</text>
					<text class="jfrecharge backcorf2f6" v-if="typeid == 2" @click="jumpdeposits">积分充值</text> -->
				</view>
			</view>
			<view class="height50 width100" @tap="paytype='weixin'">
				<view class="width50 flleft fcor333 font16" style="padding-left: 4%;">
					微信支付
				</view>
				<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
					style="align-items: center;">
					<radio :checked="paytype=='weixin'" color="#c72a20" />
				</view>
			</view>
			<view class="height50 width100" @tap="paytype='gonghuika'">
				<view class="width70 flleft fcor333 font16 text1" style="padding-left: 4%;">
					汇联通工会卡<text class="font14 fcor666 margle">可用余额: 13.1元</text>
				</view>
				<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
					style="align-items: center;">
					<radio :checked="paytype=='gonghuika'" @click="changeRiado()" color="#c72a20" />
				</view>
			</view>
		</view>
		<!-- 		<view class="concont width94 mart10 backcorfff">
			<view class="width94 alijusstart paddtop10 font14 fcor666">
				<view class="width40">联系电话</view>
				<input class="width60 fotrt" placeholder="请输入联系人手机号"/>
			</view>
			<view class="width94 font12 fcor999 mart5 paddbotm10">经用于接收取餐码,请正确填写</view>
		</view>
	 -->

		<view class="footbtn width100 height50 backcor33">
			<view class="width94 alijusstart">
				<view class="width70 fcorfff">
					合计: ¥<text class="font16 fontwig6" style="margin: 0px 6px;">16.8</text> <text class="font12">已省¥1.7</text>
				</view>
				<view class="width30 fotrt">
					<view class="btnpay fotct font13 fcorfff" style="background-color: #c72a20;">去支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cjSlider from '@/components/cj-slider/cj-slider.vue';
	let app = getApp();
	export default {
		components: {
			cjSlider
		},
		data() {
			return {
				orderList: [1, 2, 3, 4, 5],
				sttypeid: 1,
				paytype: '', //支付方式
				priceValue: [0, 2000], // 积分可以指定默认值
				availIntegal: '2000', // 可用积分
			}
		},
		methods: {
			//选择方式
			changedissr(item) {
				this.sttypeid = item;
			},
			//滑动结束
			blockEnd() {
				this.payPrice = this.priceValue[1];
				if (this.payPrice == 0) {
					this.isUse = false;
					this.paytype = '';
				} else {
					this.isUse = true;
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.headsbg {
		border-radius: 0 0 30px 30px;
	}

	.concont {
		border-radius: 12px;
	}

	.jfrecharge {
		padding: 3px 20rpx;
		color: #fff;
		margin-left: 50%;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		border-radius: 40rpx;
	}

	.footbtn {
		bottom: 0px;
		position: fixed;
	}

	.btnpay {
		width: 90px;
		border-radius: 22px;
		height: 36px;
		line-height: 36px;
	}

	.takemode {
		width: 48%;
		border-radius: 5px;
		border: 1px solid #999999;
	}

	.aftermode {
		background-color: #faf1f1;
		color: #c72a20;
	}

	.cj-slider {
		width: 100%;
		align-items: center;
		display: flex;
	}
</style>