mz/pages/dd/dd.vue

<template>
	<view class="content">
		<view class="navbar flex">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex == index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab"
			:style="{'height': height}">
			<swiper-item v-for="navitem in navList">
				<scroll-view scroll-y="true" :style="{'height': height}" class="scoll-box"
					:class="{'fbx-scoll': tabCurrentIndex == 0 && userInfo.type == 3}">
					<empty v-if="navitem.loaded === true && navitem.orderList.length === 0"></empty>
					<view class="dd-wrap" v-for="litem in navitem.orderList">
						<view class="dd-top flex">
							<image src="../../static/icon/qianger.png" mode=""></image>
							<view class="">
								订单信息
							</view>
							<view class="dd-time">
								<text v-if="tabCurrentIndex == 0">发布时间: {{litem.add_time | showTime}}</text><text
									v-if="tabCurrentIndex == 1" style="color: #6786FB;">已接单</text>
							</view>
						</view>
						<view class="dd-info">
							<view class="flex fs">
								<view class="info-name">地区:</view>
								<view class="info-val">{{litem.province + ' ' + litem.city + ' ' + litem.district}}
								</view>
							</view>
							<view class="flex fs">
								<view class="info-name">机构名称:</view>
								<view class="info-val">{{litem.organ_name}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">服务时间:</view>
								<view class="info-val">{{litem.time_area}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">职称：</view>
								<view class="info-val">{{litem.doctor_level | showlevel}}(含)以上职称</view>
							</view>
							<view class="flex fs">
								<view class="info-name">专业：</view>
								<view class="info-val">{{litem.type}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">设备说明：</view>
								<view class="info-val">{{litem.tags.join('、')}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">劳务费用：</view>
								<view class="info-val">{{litem.brokerage}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">要求：</view>
								<view class="info-val">{{litem.content}}</view>
							</view>

						</view>
						<view class="jd-info flex" v-if="litem.doctor && litem.pay ==1">
							<view class="">
								姓名：{{litem.doctor.name}}
							</view>
							<view class="">
								电话：{{litem.doctor.mobile}}
							</view>
							<view class="">
								职称：{{litem.level}}
							</view>
							<view class="" style="width: 100%;">
								所在医院：{{litem.doctorhospital}}
							</view>
						</view>
						<!-- <view class="" @click="gozx(litem.doctor.uid)">
							咨询
						</view> -->
						
						<view class="jd-btn flex" style="justify-content: space-around;" v-if="tabCurrentIndex == 1">
							<view class="btn" v-if="tabCurrentIndex == 1 && userInfo.type == 3 && !litem.pay"
								@click.stop="gozf(litem)">
								支付订单费用
							</view>
							<view class=" btn"
								v-if="tabCurrentIndex == 1 && userInfo.type == 3 && litem.order_id && litem.pay"
								@click.stop="lxys(litem)">
								联系医生
							</view>

							<view class="btn"
								v-if="tabCurrentIndex == 1 && userInfo.type == 3 && litem.order_id && litem.pay && litem.state == 0"
								@click="wjdd(litem.order_id)">
								订单完成
							</view>
							<view class="btn"
								v-if="tabCurrentIndex == 1 && userInfo.type == 2 && litem.order_id && litem.pay"
								@click.stop="lxjg(litem)">
								联系机构
							</view>
						</view>
						
						
						<view class="jd-btn" v-if="tabCurrentIndex == 0 && userInfo.type == 2">
							<view class="btn" @click="jiedan(litem)">
								确认接单
							</view>
						</view>
					</view>
					<uni-load-more :status="navitem.loadingType"></uni-load-more>
					<!-- 底部发布新订单 -->
					<view class="fb-btn" v-if="tabCurrentIndex == 0 && userInfo.type == 3">
						<view class="new-btn" @click.stop="navto('/pages/dd/opendd')">
							发布新订单
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 支付弹出窗 -->
		<uni-popup ref="popup1" type="bottom">
			<view class="payment">
				<view class="first flex " @click="payclose()">
					<text class="word">选择支付方式</text>
					<image src="../../static/img/img25.png"></image>
				</view>
				<view class="pay-type-list">
					<view class="type-item b-b" @click="changePayType(1)">
						<view class="img">
							<image class="yue" src="../../static/img/img26.png"></image>
						</view>
						<view class="con"><text class="tit">微信支付</text></view>
						<label class="radio">
							<radio value="" color="#FC4141" :checked="payType == 1"></radio>
						</label>
					</view>
					<view class="type-item flex_item" @click="changePayType(2)">
						<view class="img">
							<image class="yue" src="../../static/img/img017.png"></image>
						</view>
						<view class="con"><text class="tit">余额支付</text></view>
						<label class="radio">
							<radio value="" color="#FC4141" :checked="payType == 2"></radio>
						</label>
					</view>
				</view>
				<view class="one"></view>
				<view class="Third flex">
					<view class="two1">
						<text class="two1-1 ">合计：</text>
						<text class="two1-2">￥</text>
						<text class="two1-2 size">{{ pay_price }}</text>
					</view>
					<view class="two2" :class="{ clickbg: payLoding }" @click.stop="!payLoding ? confirm() : ''">
						<text>立即支付</text></view>
				</view>
				<view class="" style="height: 44px;">

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// #ifdef H5
	import weixinObj from '@/libs/jweixin-module/index.js';
	// #endif
	import { weixindata } from '@/utils/wxAuthorized.js';
	import {
		patientFinish,
		patientMisson
	} from '@/api/patient.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getUserInfo
	} from '@/api/login.js';
	import {
		ddlist,
		acceptMission,
		createOrder
	} from '@/api/dd.js'
	import empty from '@/components/empty';
	export default {
		components: {
			empty,
			uniPopup
		},
		data() {
			return {
				order_id: '',
				height: '',
				tabCurrentIndex: 0,
				navList: [{
						type: 0,
						text: '待接订单',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10, //每次信息条数
						loaded: false
					},
					{
						type: 1,
						text: '已接订单',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10, //每次信息条数
						loaded: true
					}
				],
				pay_price: '', //支付费用
				payType: 1, //支付类型
				payLoding: false, //判断是否支付中
				chooseId: ''
			}
		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		onLoad(opt) {
			if(opt.tabcurrent) {
				this.tabCurrentIndex = opt.tabcurrent
			}
		},
		onShow() {
			let obj = this;
			// 判断是否已经登录
			console.log(this.hasLogin, 'user');
			this.navList = [{
					type: 0,
					text: '待接订单',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10, //每次信息条数
					loaded: false
				},
				{
					type: 1,
					text: '已接订单',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10, //每次信息条数
					loaded: true
				}
			]
			this.loadBaseData();

			getUserInfo({})
				.then(function(e) {
					// obj.userInfo = e.data;
					obj.setUserInfo(e.data)
					uni.setStorageSync('userInfo', e.data);
					if (obj.userInfo.type == 2) {
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png'
						});
						uni.setTabBarItem({
							index: 1,
							text: '我的病人',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 2,
							text: '科普学习',
							iconPath: 'static/tabBar/tab-study.png',
							selectedIconPath: 'static/tabBar/tab-study-current.png',
							visible: false
						});
						uni.setTabBarItem({
							index: 3,
							text: '接单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							visible: true
						})
						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png'
						});
					}
					if (obj.userInfo.type == 3) {
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png'
						});
						uni.setTabBarItem({
							index: 1,
							text: '咨询记录',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 2,
							text: '科普学习',
							iconPath: 'static/tabBar/tab-study.png',
							selectedIconPath: 'static/tabBar/tab-study-current.png',
							visible: false
						});
						uni.setTabBarItem({
							index: 3,
							text: '发布订单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							pagePath: '/pages/dd/dd',
							visible: true
						})

						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png'
						});
					}
					if (obj.userInfo.type == 1) {
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png'
						});
						uni.setTabBarItem({
							index: 1,
							text: '咨询记录',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 2,
							text: '科普学习',
							iconPath: 'static/tabBar/tab-study.png',
							selectedIconPath: 'static/tabBar/tab-study-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 3,
							text: '接单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							visible: false
						})
						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png'
						});
					}
				})
				.catch(function(e) {
					console.log(e);
				});

		},
		filters: {
			showlevel(val) {
				let str = '无'
				if (val) {
					if (val == 1) {
						str = '初级'
					} else if (val == 2) {
						str = '中级'
					} else if (val == 3) {
						str = '副高级'
					} else if (val == 4) {
						str = '正高级'
					}
				}
				return str
			},
			showTime(val) {
				let str = ''
				if (val) {
					var time = new Date(val * 1000);
					var y = time.getFullYear();
					var m = time.getMonth() + 1;
					var d = time.getDate();
					var h = time.getHours();
					var mm = time.getMinutes();
					var s = time.getSeconds();
					str = y + '-' + m + '-' + d
				}
				return str

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			...mapMutations(['setUserInfo', 'setOrderInfo', 'logout']),
			payclose() {
				obj.$refs.popup1.close()
			},
			wjdd(item) {
				let obj = this
				patientMisson({
						order_id: item,
						// type: 3
					})
					.then(data => {
						// obj.$api.msg(data.msg);
						// obj.loadData('Refresh');
						obj.navList = [{
								type: 0,
								text: '待接订单',
								loadingType: 'more',
								orderList: [],
								page: 1, //当前页数
								limit: 10, //每次信息条数
								loaded: false
							},
							{
								type: 1,
								text: '已接订单',
								loadingType: 'more',
								orderList: [],
								page: 1, //当前页数
								limit: 10, //每次信息条数
								loaded: true
							}
						]
						obj.loadData()
					})
					.catch(e => {
						console.log(e.message);
					});
			},
			lxys(item) {
				uni.navigateTo({
					url: '/pages/doctor/chartt?id=' + item.order_id + '&name=' + item.doctor.name + '&uid=' + item
						.doctor.uid
				});
			},
			lxjg(item) {
				//organ_uid
				uni.navigateTo({
					url: '/pages/doctor/chartt?id=' + item.order_id + '&name=' + item.organ_name + '&uid=' + item
						.organ_uid
				});
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			confirm() {
				let obj = this;
				// 支付中
				obj.payLoding = true;
				// #ifdef H5
				// 获取当前是否为微信浏览器
				obj.froms = uni.getStorageSync('weichatBrowser') || '';
				// #endif
				createOrder({
					payType: obj.payType == 1 ? 'weixin' : 'yue',
					price: obj.pay_price,
					id: obj.chooseId
				}).then(({
					data,
					status,
					msg
				}) => {
					if (obj.payType == 2) {
						if (msg == '余额支付成功') {
							obj.$api.msg(msg);
							obj.$refs.popup1.close()
							obj.payLoding = false;
							obj.navList = [{
									type: 0,
									text: '待接订单',
									loadingType: 'more',
									orderList: [],
									page: 1, //当前页数
									limit: 10, //每次信息条数
									loaded: false
								},
								{
									type: 1,
									text: '已接订单',
									loadingType: 'more',
									orderList: [],
									page: 1, //当前页数
									limit: 10, //每次信息条数
									loaded: true
								}
							]
							this.loadData()
							
						} else {
							console.log(msg, 'msg');
						}
					} else {
						obj.orderMoneyPay(data);
					}


				}).catch(err => {
					obj.payLoding = false;
				})
			},
			gozf(item) {
				this.pay_price = item.brokerage
				this.chooseId = item.id
				console.log(item)
				this.$refs.popup1.onTap();
				this.$refs.popup1.open();
			},
			gozx(id) {
				uni.navigateTo({
					url: '/pages/doctor/chartt?id=' + id
				});
			},
			// 
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				// 初始化数据列表
				this.navList[index].orderList = [];
				// 初始化翻页数
				this.navList[index].page = 1;
				// 初始化数据为未加载状态
				this.navList[index].loadingType = 'more';
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//获取navlist
			loadData(type) {
				// if(type == 'tabChange' && )
				let obj = this
				let index = obj.tabCurrentIndex
				let navitem = obj.navList[index]
				if (navitem.loadingType == 'loading' || navitem.loadingType == 'noMore') {
					return
				}
				navitem.loadingType = 'loading'
				ddlist({
					page: navitem.page,
					limit: navitem.limit,
					type: navitem.type
				}).then(res => {
					console.log(res)
					navitem.orderList = navitem.orderList.concat(res.data.list)
					console.log(navitem.orderList, 'navitem.orderList')
					navitem.page++
					if (res.data.list.length == navitem.limit) {
						navitem.loadingType = 'more'
					} else {
						navitem.loadingType = 'noMore'
					}
					navitem.loaded = true
				})
			},
			// 接单
			jiedan(item) {
				let obj = this
				console.log(item)
				acceptMission({
					id: item.id
				}).then(res => {
					let s = obj.navList[obj.tabCurrentIndex].orderList.indexOf(item)
					obj.navList[obj.tabCurrentIndex].orderList.splice(s, 1);
					uni.showToast({
						title: '接单成功',
						duration: 2000
					});
				})
			},
			// 加载初始数据
			loadBaseData() {
				let obj = this;
				getUserInfo({})
					.then(({
						data
					}) => {
						obj.setUserInfo(data);
						// obj.userInfo = data;
						console.log(obj.userInfo);
						// let arr = data.map(e => {
						// 	e.createtime = getTime(e.createtime);
						// 	return e;
						// });
						// this.getDoctor();
						this.loadData()
						if (data.ext_info.status == 2) {

							uni.showModal({
								title: '提示',
								content: '您的审核未通过: \n ' + data.ext_info.reason + ' \n 是否重新提交审核！',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										if (data.type == 2) {
											uni.navigateTo({
												url: '/pages/public/DocRegister'
											});
										}
										if (data.type == 3) {
											uni.navigateTo({
												url: '/pages/public/MecRegister'
											});
										}
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
						// 1是病人 2是医生 3是机构
						if (obj.userInfo.type == 2) {
							uni.setTabBarItem({
								index: 0,
								text: '首页',
								iconPath: 'static/tabBar/tab-home.png',
								selectedIconPath: 'static/tabBar/tab-home-current.png'
							});
							uni.setTabBarItem({
								index: 1,
								text: '我的病人',
								iconPath: 'static/tabBar/tab-cate.png',
								selectedIconPath: 'static/tabBar/tab-cate-current.png',
								visible: true
							});
							uni.setTabBarItem({
								index: 2,
								text: '科普学习',
								iconPath: 'static/tabBar/tab-study.png',
								selectedIconPath: 'static/tabBar/tab-study-current.png',
								visible: false
							});
							uni.setTabBarItem({
								index: 3,
								text: '接单',
								iconPath: 'static/tabBar/jd.png',
								selectedIconPath: 'static/tabBar/jd-act.png',
								pagePath: '/pages/dd/dd'
							})
							uni.setTabBarItem({
								index: 4,
								text: '我的',
								iconPath: 'static/tabBar/tab-my.png',
								selectedIconPath: 'static/tabBar/tab-my-current.png'
							});
						}
						if (obj.userInfo.type == 1) {
							uni.setTabBarItem({
								index: 0,
								text: '首页',
								iconPath: 'static/tabBar/tab-home.png',
								selectedIconPath: 'static/tabBar/tab-home-current.png'
							});
							uni.setTabBarItem({
								index: 1,
								text: '咨询记录',
								iconPath: 'static/tabBar/tab-cate.png',
								selectedIconPath: 'static/tabBar/tab-cate-current.png'
							});
							uni.setTabBarItem({
								index: 2,
								text: '科普学习',
								iconPath: 'static/tabBar/tab-study.png',
								selectedIconPath: 'static/tabBar/tab-study-current.png',
								visible: true
							});
							uni.setTabBarItem({
								index: 3,
								text: '发布订单',
								iconPath: 'static/tabBar/jd.png',
								selectedIconPath: 'static/tabBar/jd-act.png',
								pagePath: '/pages/dd/dd',
								visible: false
							})
							uni.setTabBarItem({
								index: 4,
								text: '我的',
								iconPath: 'static/tabBar/tab-my.png',
								selectedIconPath: 'static/tabBar/tab-my-current.png'
							});
						}
						if (obj.userInfo.type == 3) {
							uni.setTabBarItem({
								index: 0,
								text: '首页',
								iconPath: 'static/tabBar/tab-home.png',
								selectedIconPath: 'static/tabBar/tab-home-current.png'
							});
							uni.setTabBarItem({
								index: 1,
								text: '咨询记录',
								iconPath: 'static/tabBar/tab-cate.png',
								selectedIconPath: 'static/tabBar/tab-cate-current.png'
							});
							uni.setTabBarItem({
								index: 2,
								text: '科普学习',
								iconPath: 'static/tabBar/tab-study.png',
								selectedIconPath: 'static/tabBar/tab-study-current.png',
								visible: false
							});
							uni.setTabBarItem({
								index: 3,
								text: '发布订单',
								iconPath: 'static/tabBar/jd.png',
								selectedIconPath: 'static/tabBar/jd-act.png',
								pagePath: '/pages/dd/dd'
							})
							uni.setTabBarItem({
								index: 4,
								text: '我的',
								iconPath: 'static/tabBar/tab-my.png',
								selectedIconPath: 'static/tabBar/tab-my-current.png'
							});
						}

						if (obj.userInfo.type == 2 && obj.userInfo.ext_info.price == '0.00') {
							uni.showModal({
								title: '提示',
								content: '您的用户信息尚未完善，是否前去完善？',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										uni.navigateTo({
											url: '/pages/userinfo/doctor'
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					})
					.catch(e => {
						if (e.message == '请登录') {
							uni.showModal({
								title: '提示',
								content: '您未登录，是否登录？',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/public/wxLogin'
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							console.log(e.message);
						}
					});
			},
			orderMoneyPay(data) {
				// console.log(this,'this')
				let obj = this;
				let config = data.jsConfig;
				weixindata().then(e => {
					weixinObj.chooseWXPay({
						timestamp: config.timestamp,
						nonceStr: config.nonceStr,
						package: config.package,
						signType: config.signType,
						paySign: config.paySign,
						success: function(res) {
							obj.$refs.popup1.close()
							console.log(res);
							obj.$api.msg(res);
							obj.payLoding = false;
							// 支付完成事件
							obj.navList = [{
									type: 0,
									text: '待接订单',
									loadingType: 'more',
									orderList: [],
									page: 1, //当前页数
									limit: 10, //每次信息条数
									loaded: false
								},
								{
									type: 1,
									text: '已接订单',
									loadingType: 'more',
									orderList: [],
									page: 1, //当前页数
									limit: 10, //每次信息条数
									loaded: true
								}
							]
							obj.loadData()
						},
						fail: function(res) {
							console.log(res, '失败');
							uni.showModal({
								title: '错误',
								content: res.errMsg,
								showCancel: false
							});
						}
					});
				});

				// uni.showModal({
				// 	title: 'appid',
				// 	content: JSON.stringify(config),
				// 	showCancel: false,
				// 	success: res => {},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.scoll-box {
		padding-top: 20rpx;

	}

	.fbx-scoll {
		padding-bottom: 145rpx;


	}

	.fb-btn {
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		height: 145rpx;
		padding-top: 30rpx;
		z-index: 9;

		.new-btn {
			width: 560rpx;
			line-height: 80rpx;
			background: #6786fb;
			box-shadow: 0px 0px 13rpx 3rpx rgba(209, 212, 217, 0.31);
			border-radius: 40rpx;
			margin: auto;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.dd-wrap {
		width: 702rpx;
		// height: 524px;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: 0 auto 20rpx;

		.dd-top {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			padding: 24rpx;

			image {
				width: 30rpx;
				height: 35rpx;
				margin-right: 13rpx;
			}

			.dd-time {
				flex-grow: 1;
				text-align: right;
				font-size: 25rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.dd-info {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			padding: 0 24rpx 20rpx;

			.fs {
				justify-content: flex-start;
				align-items: flex-start;
				padding: 5rpx 0;
			}

			.info-name {
				flex-shrink: 0;
			}

			.info-val {
				padding-left: 10rpx;
			}
		}

		.jd-info {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			padding: 24rpx 4rpx;
			border-top: dashed 1rpx #EAECED;
			margin: auto;
			width: 662rpx;
			flex-wrap: wrap;

			view {
				width: 50%;
				padding: 5rpx 0;
			}
		}

		.jd-btn {
			height: 111rpx;
			padding-top: 26rpx;
			border-top: dashed 1rpx #EAECED;
			margin: auto;
			width: 662rpx;

			.btn {
				width: 186rpx;
				line-height: 59rpx;
				background: #6499FA;
				border-radius: 30rpx;
				text-align: center;
				font-size: 29rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto 18rpx auto auto;
			}

		}
	}

	.zfbtn {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #6786fb;
		border-radius: 0 0 20rpx 20rpx;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
	}

	.payment {
		background-color: #ffffff;
		border-radius: 15rpx 15rpx 0rpx 0rpx;

		.first {
			border-bottom: 2rpx solid $border-color-light;
			padding: 38rpx 25rpx;

			.word {
				font-size: $uni-font-size-base;
				font-weight: bold;
				color: $font-color-dark;
			}

			image {
				width: 25rpx;
				height: 25rpx;
			}
		}

		.one {
			height: 20rpx;
			background-color: #f6f6f6;
		}

		.Third {
			.two1 {
				width: 55%;
				background-color: #ffffff;
				padding-left: 25rpx;

				.two1-1 {
					font-size: $uni-font-size-base;
					font-weight: 400;
					color: $font-color-dark;
				}

				.two1-2 {
					font-size: $uni-font-size-sm;
					font-weight: bold;
					color: $color-red1;
				}

				.size {
					font-size: $uni-font-size-lg + 4rpx;
				}
			}

			.two2 {
				width: 45%;
				background: $color-red1;
				color: #ffffff;
				font-size: $uni-font-size-lg;
				font-weight: 550;
				text-align: center;
				padding: 30rpx 0rpx;
			}

			.clickbg {
				background-color: $color-gray !important;
			}
		}
	}

	.popup {
		width: 536rpx;

		.img {
			width: 100%;
		}

		.row {
			background: #ffffff;
			overflow: hidden;
			border-radius: 0 0 10rpx 10rpx;
			padding: 45rpx 45rpx;
			margin-top: -15rpx;

			.row-1 {
				font-size: $font-lg + 4rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 53rpx;
				text-align: center;
			}

			.row-2 {
				font-size: $uni-font-size-lg;
				font-weight: 500;
				color: $font-color-dark;
				line-height: 44rpx;
				text-align: center;
				margin-top: 35rpx;
			}

			.row-3 {
				width: 80%;
				height: 70rpx;
				margin: 0 auto;
				margin-top: 40rpx;
				background: linear-gradient(0deg, rgba(126, 153, 254, 1), rgba(151, 143, 250, 1));
				border-radius: 34rpx;
				justify-content: center;
				font-size: $uni-font-size-lg + 4rpx;
				font-weight: 500;
				color: #f8f9f9;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 40upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.type-item1 {
			height: 120upx;
			padding: 20upx 0;
			// display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;

			.row-1 {
				display: flex;
			}

			.row-2 {
				margin-top: 12rpx;
				font-size: 28rpx;
				color: #c0c4cc;
				text-align: center;
			}
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.img {
			color: #fe8e2e;
			width: 50rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 25rpx;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.ddwc {
		width: 40%;
		background-color: #6786fb;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}

	.lxys {
		// margin-right: 20rpx;
		border: 1px solid #6786fb;
		background-color: #fff;
		color: #6786fb;
	}
</style>