mabao/pages/order/payment.vue

<template>
	<view>
		<!-- 弹窗  v-model双向绑定值 mode弹出位置 border-radius弹出层圆角-->
		<u-popup v-model="showservice" mode="bottom" border-radius="14" :closeable="true" :mask-close-able="false"
		 :safe-area-inset-bottom="true">
			<view class="header-Discount">
				选择服务包
			</view>
			<scroll-view scroll-y="true" style="height: 650rpx;">
				<view v-for="(item,index) in serviceList" :key="index">
					<view class="card flex justify-center">
						<view class="taocan" :data-id="item.order_pack.id" @click="details(item.order_pack)">
							<view class="tc_left">
								<text>{{item.order_pack.pack_name}}</text>
							</view>
							<view class="tc_right">
								<view style="width: 100%;">
									<view class="">{{item.order_pack.pack_intro}}</view>
									<!-- <view class="text">{{item.desc}}</view> -->
									<view class="text">
										<view class="">
											图文次数：{{item.order_pack.chat_num}}次
										</view>
										<view class="">
											电话次数：{{item.order_pack.phone_minutes}}次
										</view>
										<view class="">
											门诊次数：{{item.order_pack.appoint_num}}次
										</view>
										<!-- <text style="text-align: left;">时长:{{item.order_pack.effective_days}}天</text> -->
										<!-- <text style="float: right;color: #FF4F61;font-weight: bold;">¥{{item.order_pack.pack_price/100}}</text> -->
									</view>
								</view>
								<view class="margin-top-xs">
									剩余时长：
									<u-count-down color="#EEAA3F" separator="zh" :timestamp="item.order_pack.end_time-miao"></u-count-down>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-tabbar-height"></view>
			</scroll-view>
		</u-popup>
		<u-popup v-model="discountshow" mode="bottom" border-radius="14" safe-area-inset-bottom="true">
			<view class="header-Discount">
				优惠卷
			</view>
			<view class="body-Discount">
				<view class="collar">
					<!-- 	<view class="title-Discount">
						领券
					</view> -->
					<scroll-view scroll-y="true" style="height: 550rpx;">
						<view class="couponList">
							<view class="couponItem" v-for="(item,index) in list" :key="index">
								<view class="couponItem-subject">
									<view class="couponItem-subject-left">
										<view class="couponItem-subject-price">
											<text class="couponItem-subject-icon">{{item.type==1?'¥':''}}</text>
											<text class="couponItem-subject-price-min">{{item.type==1?item.money/100:item.discount.substring(0,item.discount.indexOf(".")+2)}}</text>
											<view class="couponItem-subject-price-reduce">{{item.name}}</view>
										</view>
									</view>
									<view class="couponItem-subject-right">
										<view class="couponItem-subject-right-header">
											<span class="couponItem-subject-right-header-icon">{{item.type==1?'满减':'折扣'}}</span>
											{{item.title}}
										</view>
										<button :data-index="index" @click="collectCoupons(item,index)" class="couponItem-subject-right-btn">使用</button>
										<view class="closing-date">
											{{item.start_time}} - {{item.end_time}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="popupShow" mode="center" border-radius="14" width="80%" height="40%" close-icon-pos="top-left"
		 :closeable="true" close-icon-color="#333333" negative-top="250">
			<view style="height: 100%;width: 100%;">
				<!-- 标题占20% -->
				<view style="height: 20%;width: auto;">
					<text style="font-size: 30rpx;font-weight: bold;display: flex;justify-content: center;align-items: flex-end;height: 100%;">熙宝健康</text>
				</view>
				<!-- 金额占30% -->
				<view style="height: 30%;width: auto;border-bottom: 1rpx solid #EFEFEF;margin-left: 20rpx;margin-right: 20rpx;">
					<text style="font-size: 78rpx;font-weight: 700;display: flex;justify-content: center;align-items: center;height: 100%;">¥{{value=='钱包余额支付'?norderAmount:'0'}}</text>
				</view>
				<!-- 支付方式占20% -->
				<view style="height: 20%;width: auto;padding-left: 40rpx;">
					<view style="font-size: 30rpx;display: flex;align-items: center;height: 100%;">
						<text v-if="value=='钱包余额支付'">余额支付 (余额¥{{info.balance/100}}元)</text>
						<text v-else>服务包抵扣</text>
						<!-- <text v-else>微信支付</text> -->
					</view>
				</view>
				<!-- 按钮占25% -->
				<!-- <view style="height: 25%;width: auto;">
					<view style="display: flex;justify-content: center;align-items: center;height: 100%;">
						<u-button type="primary" style="width: 100%;" @click="payment">确认支付</u-button>
					</view>
				</view> -->
				<u-message-input :maxlength="maxnum" :disabled-keyboard="true" :value="password" mode="bottomLine" :breathe="true"
				 :focus="true" :dot-fill="true"></u-message-input>
			</view>
		</u-popup>
		<uni-list :border="false">
			<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/caixian.png" style="width: 100%; height: 5rpx; background-color: #FFFFFF;"></image>
			<uni-list-item :border="false">
				<view slot="header" style="color:#666666 ; font-size: 28rpx;">
					<text v-if="infodata.product_type == '1' ">{{infodata.doctorname}} 电话咨询</text>
					<text v-if="infodata.product_type == '2' ">{{infodata.doctorname}} 图文咨询</text>
					<text v-if="infodata.product_type == '3' ">{{infodata.doctorname}} 门诊预约</text>
					<text v-if="infodata.product_type == '4' ">疫苗接种预约</text>
					<text v-if="infodata.product_type == '5' ">儿保预约</text>
					<text v-if="infodata.product_type == '6' ">服务包</text>
				</view>
				<view slot="footer" style="color:#FF4F61 ;font-weight: 500;">
					{{infodata.total_amount+'元'}}
				</view>
			</uni-list-item>
			<!-- 线条 -->
			<u-line color="#EFEFEF" />
			<uni-list-item :border="false" :link="true" @click="list.length==0?false: discountshow = true" v-if="paytype!=3">
				<view slot="header" style="color:#666666 ; font-size: 28rpx;">
					优惠券
				</view>
				<view slot="footer" style="font-size: 30rpx;">
					{{list.length==0?'暂无优惠卷':coupon}}
				</view>
			</uni-list-item>
		</uni-list>
		<u-gap height="20" bg-color="#F6F6F6"></u-gap>
		<uni-list :border="false">
			<uni-list-item :border="false">
				<view slot="header" style="font-size: 28rpx; font-weight: 500;color: #666666;">支付方式</view>
			</uni-list-item>
			<!-- 加一个单选 -->
			<u-radio-group v-model="value" v-for="(item, index) in paymenMethod" :key="index">
				<uni-list-item :border="false" @click="setmode(item)" :clickable="true">
					<view slot="header">
						<text style="font-size: 28rpx;font-weight: 400;color: #333333;">{{item.name}}</text>
					</view>
					<view slot="footer">
						<u-radio @change="radioChange" :key="index" :name="item.name" :disabled="item.disabled">
						</u-radio>
					</view>
				</uni-list-item>
				<u-line color="#EFEFEF" />
			</u-radio-group>
		</uni-list>
		<!-- 按钮 -->
		<view class="cu-bar bg-white tabbar border shop" style="position: fixed; bottom: 0; z-index: 99;width: 100%;">
			<view class="" style="width:75%;">
				<text style="padding-left: 30rpx;font-size: 32rpx;">合计：</text>
				<text style="padding-left: 20rpx;font-size: 36;font-weight: 500;color: #FF4F61;">{{orderAmount+'元'}}</text>
			</view>
			<view class="submit text-white" @click="confirmpay" style="background-color: rgb(11,115,186); font-size: 32rpx;">确认支付</view>
		</view>
		<u-keyboard @change="valChange" @backspace="backspace" ref="uKeyboard" mode="number" v-model="popupShow" :tooltip="false"
		 :mask="false"></u-keyboard>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import store from '@/store'
	export default {
		onLoad(op) {
			this.infodata = JSON.parse(op.data)
			this.norderAmount = this.infodata.total_amount
			if (this.infodata.product_type != 6) {
				this.paymenMethod.push({
					name: '服务包抵扣',
					disabled: false
				})
			}
			console.log(this.infodata)
		},
		onShow() {
			this.orderAmount = this.norderAmount
			this.getUserInfo()
			this.pageindex = 1
			this.pageservice = 1
			this.serviceList = []
			this.list = []
			this.getcoupon()
			this.getserviceList()
			this.miao = parseInt(new Date().getTime() / 1000)
		},
		data() {
			return {
				//秒数
				miao: "",
				//服务包弹窗
				showservice: false,
				//医生名称
				doctorName: '',
				ndoctorName: '渣渣宝',
				//订单金额
				orderAmount: '',
				norderAmount: 19.9,
				//优惠券
				coupon: '不使用优惠券',
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '钱包余额支付',
				paymenMethod: [{
					name: '钱包余额支付',
					disabled: false
				}],
				//弹出层控制
				popupShow: false,
				//订单类型
				//支付数据类型
				infodata: {},
				info: {},
				show: false,
				maxnum: 6,
				password: "",
				discountshow: false,
				list: [],
				couponid: "",
				pageindex: 1,
				pageservice: 1,
				serviceList: [],
				paytype: 2,
				serviceid: "",
				order_id: "",
				statepay: ""
			}
		},
		methods: {
			details(item) {
				this.serviceid = item.id
				this.showservice = false
				console.log(item)
			},
			getserviceList: async function() {
				let res = await this.$request.post("/api/v1/order/orderList", {
					page: this.pageservice,
					// docter_id:this.infodata.docter_id
					list_type: 1,
					product_type: 6,
					is_pack_expire: 2
				})
				console.log(res)
				if (res.status == 0) {
					if (this.pageservice > res.data.last_page) {
						uni.showToast({
							title: "没有更多了",
							icon: "none"
						})
					} else {
						this.serviceList = this.serviceList.concat(res.data.data)
						this.pageservice++
					}
				}

			},
			getcoupon: async function() {
				let res = await this.$request.post("/api/v1/coupon/userCouponList", {
					page: this.pageindex
				})
				console.log(res)
				if (res.status == 0) {
					if (this.pageindex > res.data.last_page) {
						uni.showToast({
							title: "没有更多了",
							icon: "none"
						})
					} else {
						this.list = this.list.concat(res.data.data)
						this.list.forEach(item => {
							item.start_time = this.$util.formatDate(item.start_time)
							item.end_time = this.$util.formatDate(item.end_time)
						})
						this.pageindex++
					}
				}
			},
			// 选中某个单选框时，由radio时触发
			discount() {

			},
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			//充值
			recharge(e) {

			},
			click(e) {
				console.log(e)
			},
			setmode(item) {
				this.value = item.name
				if (this.value == '服务包抵扣') {
					if (this.serviceList.length == 0) {
						uni.showToast({
							title: "暂无服务包可用",
							icon: "none"
						})
						this.value = "钱包余额支付"
						this.paytype = 2
						return false
					} else {
						this.paytype = 3
						this.showservice = true
					}

				} else if (this.value == '钱包余额支付') {
					this.paytype = 2
				}
			},
			collectCoupons(item, index) {
				let status = item.coupon_type.some((item, index) => {
					return item.product_type == this.infodata.product_type
				})
				if (!status) {
					uni.showToast({
						title: "不支持该类型产品",
						icon: "none"
					})
					return false
				}
				this.norderAmount = this.infodata.total_amount
				this.orderAmount = this.infodata.total_amount
				if (item.type == 1) {
					if (this.infodata.total_amount * 100 < item.min_consume_amount) {
						uni.showToast({
							title: "满减金额不够",
							icon: "none"
						})
						this.discountshow = false
						return false
					} else {
						this.coupon = item.name
						this.couponid = item.id
						let price = (this.norderAmount * 100) - item.money
						this.norderAmount = price / 100
						this.orderAmount = price / 100
						this.discountshow = false
						this.$forceUpdate()
					}
				} else if (item.type == 2) {
					this.coupon = item.name
					this.couponid = item.id
					let price = (this.norderAmount * 100) * ((item.discount.substring(0, item.discount.indexOf(".") + 2) - 0) / 10)
					this.norderAmount = price / 100
					this.orderAmount = price / 100
					this.discountshow = false
					this.$forceUpdate()
				}
			},
			confirmpay() {
				if (this.paytype == 3 && this.serviceid == "") {
					uni.showToast({
						title: "请选择服务包",
						icon: "none"
					})
					return false
				}
				if (this.info.balance < this.infodata.total_amount * 100) {
					uni.showModal({
						title: "错误提示",
						content: "余额不足，请先充值",
						confirmText: "去充值",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "../personal/recharge"
								})
							}
						}
					})
				} else if (this.infodata.product_type == 1) {
					uni.requestSubscribeMessage({
						tmplIds: ['M9b6PPKtD7PEqLsSnQ453iTIHtIZZpixOBjUjax8YXU'],
						success: (res) => {
							this.payment()
						},
						fail: (err) => {
							this.payment()

						}
					})
				} else if (this.infodata.product_type == 2) {
					uni.requestSubscribeMessage({
						tmplIds: ['M9b6PPKtD7PEqLsSnQ453iTIHtIZZpixOBjUjax8YXU', 'WCkfvW9NkV_oQgLsJJuwoVMF-G0ss9y4SkIgCObZwWA',
							'ZrL4Ag28cW2F1I1gWcnIk-fxNmZNhb-vNsx32j1ulG0'
						],
						success: (res) => {
							this.payment()

						},
						fail: (err) => {
							this.payment()

						}
					})
				} else if (this.infodata.product_type == 3) {
					uni.requestSubscribeMessage({
						tmplIds: ['M9b6PPKtD7PEqLsSnQ453iTIHtIZZpixOBjUjax8YXU', 'Sg0lKmOexTnxxDzy39E26aNvmc3w4qKUnxl21A9dWns',
							'phcsQ7ZbsJapfmx3NMCha0MrHCqFrgN7BWVneE5OffI'
						],
						success: (res) => {
							this.payment()

						},
						fail: (err) => {
							this.payment()

						}
					})
				} else if (this.infodata.product_type == 4 || this.infodata.product_type == 5) {
					uni.requestSubscribeMessage({
						tmplIds: ['M9b6PPKtD7PEqLsSnQ453iTIHtIZZpixOBjUjax8YXU', 'Sg0lKmOexTnxxDzy39E26aNvmc3w4qKUnxl21A9dWns',
							'phcsQ7ZbsJapfmx3NMChaxepR9tJFiqbO25P9tujErI'
						],
						success: (res) => {
							this.payment()

						},
						fail: (err) => {
							this.payment()

						}
					})
				} else if (this.infodata.product_type == 6) {
					uni.requestSubscribeMessage({
						tmplIds: ['obCFv2gAnl_RaW-OlnZkjCfi6teT3LUaHxxInUkwLbw'],
						success: (res) => {
							this.payment()

						},
						fail: (err) => {
							this.payment()

						}
					})
				} else {
					this.payment()

				}
			},
			getUserInfo: async function() {
				let res = await this.$request.post('/api/v1/user/userInfo')
				if (res.status == 0) {
					this.info = res.data
					console.log(this.info)
				}
			},
			payyuyue: async function() {
				let res = await this.$request.post("/api/v1/order/appointPlaceOrder", {
					product_type: this.infodata.product_type,
					docter_id: this.infodata.docter_id,
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					organization_id: this.infodata.organization_id,
					schedule_date: this.infodata.schedule_date,
					time_period_id: this.infodata.time_period_id,
					payment_type: this.paytype,
					pay_password: this.password,
					user_coupon_id: this.couponid,
					order_pack_id: this.serviceid
				})
				if (res.status == 0) {
					this.order_id = res.data.order_id
					return true
					console.log(res)
				} else {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "确定",
						showCancel: false,
						success: (rr) => {
							if (rr.confirm) {
								this.popupShow = false
								this.show = false
								this.password = ""
							}
						}
					})
					return false
				}
			},
			paypacks: async function() {
				let num = ""
				if (this.infodata.is_need_insurance) {
					num = 1
				} else {
					num = 0
				}
				let res = await this.$request.post("/api/v1/order/packPlaceOrder", {
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					service_pack_id: this.infodata.service_pack_id,
					is_security: this.infodata.is_security,
					guardian_name: this.infodata.guardian_name,
					relationship_type: this.infodata.relationship_type,
					payment_type: this.infodata.payment_type,
					pay_password: this.password,
					user_coupon_id: this.couponid,
					is_need_insurance: num,
					team_id: this.infodata.team_id
				})
				console.log(res)
				if (res.status == 0) {
					this.order_id = res.data.order_id
					return true
				} else {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "确定",
						showCancel: false,
						success: (rr) => {
							if (rr.confirm) {
								this.popupShow = false
								this.show = false
								this.password = ""
							}
						}
					})
					return false
				}
			},
			payphone: async function() {
				let res = await this.$request.post("/api/v1/order/consultPlaceOrder", {
					product_type: this.infodata.product_type,
					docter_id: this.infodata.docter_id,
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					phone: this.infodata.phone,
					phone_minutes: this.infodata.phone_minutes,
					payment_type: this.paytype,
					pay_password: this.password,
					user_coupon_id: this.couponid,
					order_pack_id: this.serviceid
				})
				if (res.status == 0) {
					this.order_id = res.data.order_id
					return true
				} else if (res.status == 10013) {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "确定",
						showCancel: false,
						success: (rr) => {
							if (rr.confirm) {
								uni.redirectTo({
									url: "../common_tools/my_consulting/my_consulting"
								})
							}
						}
					})
					return false
				} else {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "确定",
						showCancel: false,
						success: (rr) => {
							if (rr.confirm) {
								this.popupShow = false
								this.show = false
								this.password = ""
							}
						}
					})
					return false
				}
			},
			paychat: async function() {
				let res = await this.$request.post("/api/v1/order/consultPlaceOrder", {
					product_type: this.infodata.product_type,
					docter_id: this.infodata.docter_id,
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					symptoms: this.infodata.symptoms,
					medical_imgs: JSON.stringify(this.infodata.medical_imgs),
					payment_type: this.paytype,
					pay_password: this.password,
					user_coupon_id: this.couponid,
					order_pack_id: this.serviceid
				})
				if (res.status == 0) {
					this.order_id = res.data.order_id
					return true
				} else if (res.status == 10013) {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "确定",
						showCancel: false,
						success: (rr) => {
							if (rr.confirm) {
								uni.redirectTo({
									url: "../common_tools/my_consulting/my_consulting"
								})
							}
						}
					})
					return false
				} else {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "确定",
						showCancel: false,
						success: (rr) => {
							if (rr.confirm) {
								this.popupShow = false
								this.show = false
								this.password = ""
							}
						}
					})
					return false
				}
			},
			payvaccines: async function() {
				let res = await this.$request.post("/api/v1/order/appointPlaceOrder", {
					product_type: this.infodata.product_type,
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					organization_id: this.infodata.organization_id,
					schedule_date: this.infodata.schedule_date,
					time_period_id: this.infodata.time_period_id,
					vaccine_id: this.infodata.vaccine_id,
					payment_type: this.paytype,
					pay_password: this.password,
					user_coupon_id: this.couponid,
					order_pack_id: this.serviceid
				})
				if (res.status == 0) {
					this.order_id = res.data.order_id
					return true
				} else {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "确定",
						showCancel: false,
						success: (rr) => {
							if (rr.confirm) {
								this.popupShow = false
								this.show = false
								this.password = ""
							}
						}
					})
					return false
				}
			},
			paychildcare: async function() {
				console.log(this.infodata.nurse_ids)
				let res = await this.$request.post("/api/v1/order/appointPlaceOrder", {
					product_type: this.infodata.product_type,
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					organization_id: this.infodata.organization_id,
					schedule_date: this.infodata.schedule_date,
					time_period_id: this.infodata.time_period_id,
					nurse_ids: JSON.stringify(this.infodata.nurse_ids),
					payment_type: this.paytype,
					pay_password: this.password,
					user_coupon_id: this.couponid,
					order_pack_id: this.serviceid
				})
				console.log(res)
				if (res.status == 0) {
					this.order_id = res.data.order_id
					return true
				} else {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "确定",
						showCancel: false,
						success: (rr) => {
							if (rr.confirm) {
								this.popupShow = false
								this.show = false
								this.password = ""
							}
						}
					})
					return false
				}
			},
			//点击确认支付
			payment(e) {
				if (this.infodata.product_type == 1) {
					this.payphone().then(res => {
						if (res) {
							this.popupShow = true
							this.show = true
						}
					})
				} else if (this.infodata.product_type == 2) {
					this.paychat().then(res => {
						if (res) {
							this.popupShow = true
							this.show = true
						}
					})
				} else if (this.infodata.product_type == 6) {
					this.paypacks().then(res => {
						if (res) {
							this.popupShow = true
							this.show = true
						}
					})
				} else if (this.infodata.product_type == 3) {
					this.payyuyue().then(res => {
						if (res) {
							this.popupShow = true
							this.show = true
						}
					})
				} else if (this.infodata.product_type == 4) {
					this.payvaccines().then(res => {
						if (res) {
							this.popupShow = true
							this.show = true
						}
					})
				} else if (this.infodata.product_type == 5) {
					this.paychildcare().then(res => {
						if (res) {
							this.popupShow = true
							this.show = true
						}
					})
				}
			},
			orderPay: async function() {
				let res = await this.$request.post("/api/v1/order/orderPay", {
					order_id: this.order_id,
					pay_password: this.password
				})
				if (res.status == 0) {
					this.popupShow = false
					this.show = false
					uni.showToast({
						title: "支付成功!",
						duration: 1500
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "order?type=" + this.infodata.product_type
						})
					}, 1500)
				} else {
					if (res.message == '密码错误') {
						uni.showModal({
							title: "提示",
							content: res.message,
							confirmText: "重试",
							success: (res) => {
								if (res.confirm) {
									this.password = ""
								} else if (res.cancel) {
									this.popupShow = false
									this.show = false
									this.password = ""
								}
							},
						})
					} else if (res.message == '未设置支付密码') {
						uni.showModal({
							title: "提示",
							content: res.message,
							confirmText: "设置",
							success: (res) => {
								if (res.confirm) {
									this.password = ""
									uni.navigateTo({
										url: "../index/paypassword"
									})
								} else if (res.cancel) {
									this.popupShow = false
									this.show = false
									this.password = ""
								}
							},
						})
					} else {
						uni.showModal({
							title: "提示",
							content: res.message,
							confirmText: "确定",
							showCancel: false,
							success: (rr) => {
								if (rr.confirm) {
									this.popupShow = false
									this.show = false
									this.password = ""
								}
							}
						})
					}
				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.password += val;
				if (this.password.charAt(0) != '0') {
					if (this.password.length == 6) {
						this.orderPay()
					}
				} else {
					this.password = ''
					uni.showToast({
						title: "密码不能以0开头",
						icon: "none"
					})
				}

			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.password.length) this.password = this.password.substr(0, this.password.length - 1);
				console.log(this.password);
			}
		},
		onHide() {
			this.popupShow = false
		},
	}
</script>

<style lang="scss">
	.card {
		width: 100%;
		height: auto;
		margin-top: 20rpx;

		// background-image: url(../../static/服务包.png);
		.taocan {
			width: 710rpx;
			height: 230rpx;
			position: relative;
			display: flex;
			border-radius: 10rpx;
			background: radial-gradient(circle at right top, transparent 15rpx, #fff 0) top left / 152rpx 51% no-repeat,
				radial-gradient(circle at right bottom, transparent 15rpx, #fff 0) bottom left /152rpx 51% no-repeat,
				radial-gradient(circle at left top, transparent 15rpx, #fff 0) top right /560rpx 51% no-repeat,
				radial-gradient(circle at left bottom, transparent 15rpx, #fff 0) bottom right /560rpx 51% no-repeat;
			filter: drop-shadow(0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.04));
			box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
		}
	}

	.tc_left {
		display: flex;

		justify-content: center;
		align-items: center;
		width: 152rpx;

		text {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.tc_right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 550rpx;
		padding: 0 20rpx;
		font-size: 26rpx;

		.text {
			padding: 10rpx 0rpx;
			width: 100%;
		}
	}

	/* 支付文字 */
	.paymentText {
		height: 60rpx;
		width: auto;
		background-color: #FFFFFF;
		padding: 30rpx 0 0 30rpx;
		font-size: 24rpx;
	}

	/* 优惠券样式 */
	.discount {
		position: relative;
		display: inline-block;
		margin-right: 5px;
		margin-left: 15px;
		padding: 0 9px 0 12px;
		border-top: 1px solid rgb(11, 115, 186);
		border-bottom: 1px solid rgb(11, 115, 186);
		height: 16px;
		line-height: 16px;
		color: rgb(11, 115, 186);
		font-size: 10px;
	}

	.discount::before {
		content: "";
		left: 0;
		width: 7px;
		position: absolute;
		top: -1px;
		height: 18px;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAkCAMAAACpD3pbAAAAPFBMVEUAAAD////kOTzqaGr+9vb4zc32vL3sdXfnTE/mRUfxmpz87O3yn6HqZ2npXWDlQEP97e33xsf3xsbxl5nHV2NIAAAAAXRSTlMAQObYZgAAAJpJREFUOMvllEsSwiAQRMnjF8g/3v+uKhIrjhHK0l16B4+C7hlALS07qSyS2kVlKnHmCpqdNvwYwTdY6yKGX7AeKtb+jmN3jLuYMMEd5XYBUMZ6cO/BHHhr7ut6wizxHOhvM+kUT5S5I77ZsGWU1kbsExsmiSdMBVc3l9a0tJaDdR+CVcryWtRBFLXYkku1oae955Xnv5Y+j/UKs1MGwyraxf4AAAAASUVORK5CYII=);
		background-size: 15px 18px;
		background-repeat: no-repeat;
	}

	.discount::after {
		right: 0;
		width: 4px;
		background-position: -11px 0;
		content: "";
		position: absolute;
		top: -1px;
		height: 18px;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAkCAMAAACpD3pbAAAAPFBMVEUAAAD////kOTzqaGr+9vb4zc32vL3sdXfnTE/mRUfxmpz87O3yn6HqZ2npXWDlQEP97e33xsf3xsbxl5nHV2NIAAAAAXRSTlMAQObYZgAAAJpJREFUOMvllEsSwiAQRMnjF8g/3v+uKhIrjhHK0l16B4+C7hlALS07qSyS2kVlKnHmCpqdNvwYwTdY6yKGX7AeKtb+jmN3jLuYMMEd5XYBUMZ6cO/BHHhr7ut6wizxHOhvM+kUT5S5I77ZsGWU1kbsExsmiSdMBVc3l9a0tJaDdR+CVcryWtRBFLXYkku1oae955Xnv5Y+j/UKs1MGwyraxf4AAAAASUVORK5CYII=);
		background-size: 15px 18px;
		background-repeat: no-repeat;
	}

	/* 优惠头部 */
	.header-Discount {
		position: relative;
		height: 46px;
		line-height: 46px;
		padding-left: 10px;
		font-size: 15px;
		color: #333;
		text-align: center;
		font-weight: 700;
	}

	.body-Discount {
		padding: 0 18px;
		font-size: 13px;
		color: #333;
		margin-bottom: 50px;
	}

	.body-Discount>.collar {
		position: relative;
		padding-bottom: 9px;
	}

	.body-Discount>.collar>.title-Discount {
		height: 40px;
		line-height: 40px;
		color: #262626;
		font-weight: 700;
	}

	.body-Discount>.collar .couponList>.couponItem {
		color: rgb(11, 115, 186);
		margin-bottom: 18px;
		padding: 12px 10px;
		border-top: 6px solid currentColor;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, .1);
		border-radius: 6px;
	}

	.body-Discount>.collar .couponList>.couponItem>.couponItem-subject {
		display: flex;
		min-height: 58px;
		color: rgb(11, 115, 186);
	}

	.body-Discount>.collar .couponList>.couponItem>.couponItem-subject>.couponItem-subject-left {
		width: 220rpx;
		margin-right: 10px;
		line-height: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
	}

	.couponItem-subject-price {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1;
		text-align: center;
	}

	.couponItem-subject-icon {
		font-size: 14px;
		display: inline-block;
		vertical-align: bottom;
		margin: 0 4px 3px 0;
	}

	.couponItem-subject-price-min {
		position: relative;
		top: 1px;
		font-size: 36px;
		letter-spacing: 0;
	}

	.couponItem-subject-price-reduce {
		font-size: 14px;
		margin-top: 5px;
	}

	.couponItem-subject-right {
		flex: 1;
		position: relative;
	}

	.couponItem-subject-right-header {
		height: 36px;
		line-height: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 12px;
		color: #666;
	}

	.couponItem-subject-right-header-icon {
		background-color: rgb(11, 115, 186);
		color: #fff;
		font-size: 12px;
		display: inline-block;
		padding: 0 6px 0 12px;
		height: 14px;
		margin-right: 4px;
		line-height: 14px;
		position: relative;
		border-radius: 0 3px 3px 0;
	}

	.couponItem-subject-right-header-icon::before {
		position: absolute;
		z-index: 1;
		content: "";
		width: 0;
		top: 0;
		left: -7px;
		height: 0;
		border-top: 7px solid #fff;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #fff;
		border-left: 7px solid #fff;
	}

	.couponItem-subject-right-header-icon::after {
		content: ".";
		position: absolute;
		color: #fff;
		left: 5px;
		top: -6px;
		font-size: 20px;
	}

	.couponItem-subject-right-btn {
		background-color: rgb(11, 115, 186);
		color: #fff;
		font-size: 12px;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 68px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		border-radius: 10px;
		box-sizing: border-box;
		z-index: 2;
	}

	.desc-style {
		padding: 5px 18px 10px 18px;
		line-height: 1.3;
		position: relative;
		font-size: 12px;
		max-height: 46px;
		overflow: hidden;
		color: #666;
		background-color: white;
	}

	.closing-date {
		padding-right: 68px;
		position: absolute;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		width: 100%;
		line-height: 20px;
		font-size: 10px;
		color: #8c8c8c;
	}
</style>