yogaApp/pages/product/order.vue

<template>
	<view class="page">
		
		<view class="oinfo">
			
			<!-- 地址信息 （商品需要选择配送地址） -->
			<!-- v-if="orderlist1&&orderlist1.length>0"  -->
			<view class="yycon">
				<view class="acon">
					<uni-icons type="location" size="30" color="#a9a9a9"></uni-icons>
					<view class="aleft" @click="getAddr">
						<view class="aname" v-if="info.address">
							{{info.username?info.username:''}}
							{{info.tel?info.tel:''}}
						</view>
						<view v-else class="aname">
							请选择收货地址
						</view>
						<view class="atxt" v-if="info.address">
							{{info.address?info.address:''}}
						</view>
						<view v-else class="atxt">
							下单前请选择您的收货地址
						</view>
					</view>
					<view class="aright"  @click="getAddr">
						<uni-icons type="arrowright" size="18" color="#a9a9a9"></uni-icons>
					</view>
					
					<view class="aline"></view>
				</view>
			</view>
			
			<!-- 商品信息 -->
			<view class="yycon" v-for="(info, index) in orderlist1" :key="index">
				<view class="olist">
					<view class="tip">
						<text style="color:#000;font-weight: 600;">包裹{{index+1}}快递发货</text>
						<text style="margin-left: 10rpx;">商家24H发货，第三方物流配送 免运费</text>
					</view>
					<view class="oscon">
						<view class="osimg imgload">
							<image class="osimg" v-if="info.pic" :src="info.pic" mode="aspectFit"></image>
						</view>
						<view class="osrcon">
							<view class="osname">
								{{info.productName?info.productName:''}}
							</view>
							<view class="oscell">
								单价：￥{{info.price}}{{info.unit?' /'+info.unit:''}}
							</view>
							<view class="oscell" v-if="info.spData">
								规格：{{ retSku(info.spData) }}
							</view>
							<view class="oscell">
								数量：{{info.quantity}}{{info.unit?info.unit:''}}
							</view>
						</view>
						<view class="osjg">
							￥{{info.price}}
						</view>
					</view>
					<view class="ostj">
						<!-- <text style="color: #747474;font-size: 24rpx;margin-right: 5rpx;">￥{{info.price}}件</text> -->
						<text style="color: #000;font-size: 24rpx;">小计：</text> 
						<text style="color:#ff3d0e;font-size: 34rpx;">￥{{parseFloat(info.price*info.quantity).toFixed(2)}}</text>
					</view>
				</view>
			</view>
			
			<!-- 课程信息 -->
			<view class="yycon" v-for="(info, index) in orderlist2" :key="'id'+index">
				<view class="olist">
					<view class="tip">
						<text style="color:#000;font-weight: 600;">{{info.storeName}}</text>
					</view>
					<view class="oscon">
						<view class="osimg imgload">
							<image class="osimg" v-if="info.pic" :src="info.pic" mode="aspectFit"></image>
						</view>
						<view class="osrcon">
							<view class="osname">
								{{info.productName?info.productName:''}}
							</view>
							<view class="oscell" v-if="info.spData">
								规格：{{ retSku(info.spData) }}
							</view>
							<view class="oscell">
								数量：{{info.quantity}}{{info.unit?info.unit:''}}
							</view>
							<view class="oscell" v-if="info.brandName">
								品牌名：{{info.brandName}}
							</view>
							<view class="oscell" v-if="info.productCategoryName">
								商品分类：{{info.productCategoryName}}
							</view>
							<!-- <view class="oscell" v-if="info.list.length>0" v-for="(cell, ii) in info.list" :key="ii">
								{{cell.name}}：{{cell.text}}
							</view> -->
						</view>
						<view class="osjg">
							￥{{info.price}}
						</view>
					</view>
					<view class="ostj">
						<!-- <text style="color: #747474;font-size: 24rpx;margin-right: 5rpx;">￥{{info.price}}件</text> -->
						<text style="color: #000;font-size: 24rpx;">小计：</text> 
						<text style="color:#ff3d0e;font-size: 34rpx;">￥{{parseFloat(info.price*info.quantity).toFixed(2)}}</text>
					</view>
				</view>
			</view>
			
			<!-- 下单备注 -->
			<!-- <view class="yycon odrcell">
				<view class="olist">
					<view class="ocell">
						<text style="margin-right: 12rpx;">
							下单备注:
						</text>
						<uni-easyinput v-model="info.note" maxlength="200" placeholder="请输入您的备注信息" />
					</view>
				</view>
			</view> -->

		</view>
		
		<!-- 提交订单 -->
		<view class="submitcon">
			<view class="ocon">
				<view class="pcon">
					<text class="hj">共{{info.nums}}件,合计</text>
					<text class="rmb">￥</text>
					<text class="zs">{{ info.sums }}</text>
				</view>
				<button type="primary" v-if="ifsubmit" class="sbtn">{{btntxt}}</button>
				<button type="primary" v-if="!ifsubmit" class="btn" @click="gotoOrder">提交订单</button>
			</view>
		</view>
		
		<!-- 支付弹框 -->
		<uni-popup ref="paypup" type="share">
			<view class="allcon">
				<view class="hcon">
					<view class="htitle">请在2小时内支付</view>
					<view class="rclose" @tap="_hide">
						<uni-icons type="closeempty" size="24" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="mcon" v-if="info">
					￥ <text class="mcost">{{info.sums}}</text>
				</view>
				<view class="selcon">
					<radio-group class="checklist-group" @change="change">
						<view class="sitem" v-for="(item,index) in paylist" :key="index">
							<view class="simg">
								<image class="img" :src="item.icon"></image>
							</view>
							<view class="conright">
								<view class="sname">
									{{item.name}}
								</view>
							</view>
							<view class="selbtn">
								<radio :value="item.id" :checked="item.isChecked" />
							</view>
						</view>
					</radio-group>
				</view>
				<button type="primary" class="paybtn" @click="paydo()">确认支付</button>
			</view>
		</uni-popup>
		
		<!-- 地址选择弹框 -->
		<uni-popup ref="adrpup" type="share">
			<view class="allcon">
				<view class="hcon">
					<view class="htitle">请点击选择收件地址</view>
					<view class="rclose" @tap="_adrhide">
						<uni-icons type="closeempty" size="24" color="#999999"></uni-icons>
					</view>
				</view> 
				<view class="selcon">
					<radio-group class="checklist-group" @change="adrchange">
						<view v-for="(item, index) in myaddresslist" :key="index" class="adrsitem">
							<view class="lcon">
								<view class="sname">
									<text>{{item.name}}</text>
									<text style="margin-left: 10rpx;margin-right: 10rpx;">{{item.phone}}</text>
									<view v-if="item.sortid==1" class="adrtip">默认</view>
								</view>
								<view class="sinfo">
									{{item.province+item.city+(item.area?item.area:'')+item.address}}
								</view>
							</view>
							<view class="opecon"> 
								<radio :value="index.toString()" :checked="item.isChecked" />
							</view>
						</view>
					</radio-group>
				</view>
				<button type="primary" class="addadrbtn" @click="addAddr()">添加收货地址</button>
			</view>
		</uni-popup>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
	</view>
</template>

<script>
	import { myCache,getcartNum} from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	export default {
		components: {
			openlogin
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				type:"cart",
				id:"",
				ifsubmit:false,//是否提交
				btntxt:"提交订单",
				orderlist1:[], // 商品列表
				orderlist2:[], // 课程列表
				info:{
					nums:0,// 合计
					sums:0.00,// 合计
				},
				paylist:[],
				payType:"2" ,// 2支付宝支付
				isChecked:false,
				myaddresslist: myCache("myaddresslist")
			};
		},
		onLoad(options) {
			if(options.type=='buy'||options.type=='cart')
			{
				this.type=options.type;
				this.getinfo(options.type);
				// 加载地址
				this.getAddrList();
			}
			else{
				uni.showModal({
					title: '提示',
					content: '订单提交异常，请返回..',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						// 返回
						uni.navigateBack({
							delta: 1
						});
					}
				});
			}
			this.paylist=[
				{
					id:"1",
					name:"微信支付",
					icon:"../../static/image/wx.png",
					isChecked:true
				},
				{
					id:"2",
					name:"支付宝支付",
					icon:"../../static/image/zfb.png",
					isChecked:true
				}
			];
			this.payType='2';
			this.platform='2';
		},
		onShow(){
			// 判断是否登录
			this.iflogin();
			if(myCache("ifaddressadd")==1){
				myCache("ifaddressadd",0);
				this.getAddrList();
			}
		},
		methods: {
			retSku(spData){
				var rets=[];
				if(spData){
					var suk= JSON.parse(spData);
					var keys=Object.keys(suk);
					keys.forEach(dd=>{
						rets.push(dd+":"+suk[dd])
					});
				}
				return rets.join(',');
			},
			// 订单提交
			async gotoOrder(){
				// 是否登录
				this.iflogin();
				if((this.orderlist1.length+this.orderlist2.length)<=0){
					uni.showModal({
						title: '提示',
						content: '提交订单商品异常..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
						}
					});
					return false;
				}
				
				// 收货地址不能为空
				if(!this.info.addressId){
					uni.showModal({
						title: '提示',
						content: '请选择收货地址..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
						}
					});
					return false;
				}
				
				// 订单提交中
				this.ifsubmit=true;
				try {
					uni.showLoading({
						title: '订单提交中...'
					});
					var skuList=[];
					// 商品
					this.orderlist1.forEach(cell=>{
						skuList.push({
							skuId:cell.skuId,
							quantity:cell.quantity,
							pic:cell.pic,
							freightAmount:0 // 运费
						});
					});
					// 课程 
					this.orderlist2.forEach(cell=>{
						skuList.push({
							skuId:cell.skuId,
							quantity:cell.quantity,
							pic:cell.pic,
							freightAmount:0 // 运费
						});
					});
					
					var params = {
						addressId: this.info.addressId,
						from:this.type,
						skuList:skuList
					};
					const {data: res} = await uni.$http.post('/api/order/add',params);
					// console.log(res)
					if (res&&res.orderId){
						// 订单提交成功
						this.ifsubmit=false;
						uni.showModal({
							title: '提示',
							content: '订单已提交！',
							showCancel: false,
							confirmText: '确定',
							success: ress => {
								var id=res.orderId+'';
								uni.redirectTo({
									url: `/pages/order/orderinfo?id=${id}`
								});
							}
						});
						
						// 清除立即购买缓存
						myCache('buycartList','');
						// 清除购物车缓存（应该删除购物车里勾选的商品??）
						this.updatecart();
					}
					else {
						this.ifsubmit=false;
						uni.showToast({
							title: res.msg? res.msg:'下单提交失败！',
							icon: 'error',
							duration: 2000
						});
					}
				}
				catch (err) {
					this.ifsubmit=false;
					uni.showToast({
						title: err.msg? err.msg:'下单提交失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			// 重新获取购物车
			async updatecart(){
				try{
					const {data: res } = await uni.$http.get('/api/cart/list');
					if (res&&res.length>0) {
						// 购物车缓存
						myCache("carts",res);
						var cartnum=getcartNum();
						if(cartnum>0){
							// 底部菜单消息角标
							uni.setTabBarBadge({
								//显示未读消息条数
							    index: 4,
							    text: cartnum+''
							});
						}
						else{
							uni.removeTabBarBadge({
								index: 4
							})
						}
					}
				}
				catch(e){
					console.log(e)
				}
			},
			// 预创建订单
			async ordercreate(){
				if((this.orderlist1.length+this.orderlist2.length)<=0){
					uni.showModal({
						title: '提示',
						content: '提交订单商品异常..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
						}
					});
					return false;
				}
				 
				try {
					var skuList=[];
					// 商品
					this.orderlist1.forEach(cell=>{
						skuList.push({
							productId:cell.productId,
							skuId:cell.skuId,
							productName:cell.productName,
							spData:cell.spData,
							quantity:cell.quantity,
							pic:cell.pic,
							price:cell.price,
							stock:cell.stock,
							spDataValue: this.retSku(cell.spData)
						})
					});
					// 课程
					this.orderlist2.forEach(cell=>{
						skuList.push({
							productId:cell.productId,
							skuId:cell.skuId,
							productName:cell.productName,
							spData:cell.spData,
							quantity:cell.quantity,
							pic:cell.pic,
							price:cell.price,
							stock:cell.stock,
							spDataValue: this.retSku(cell.spData)
						})
					});
					 
					var params = {
						productTotalAmount: this.info.sums,
						orderTotalAmount: this.info.sums,
						skuList:skuList
					};
					const {data: res} = await uni.$http.post('/api/order/addOrderCheck',params);
					if (res.code==500) {
						uni.showModal({
							title: '提示',
							content: res.msg? res.msg:'订单异常，请返回重试..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						}); 
					}
					else if (res){
						// 订单预创建成功
					}
				}
				catch (err) {
					console.log(err)
					uni.showModal({
						title: '提示',
						content: '订单异常，请返回重试..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							// 返回
							uni.navigateBack({
								delta: 1
							});
						}
					}); 
				}
			},
			async getinfo(type) {
				var _this=this;
				// 获取地址信息,地址默认
				this.myaddresslist=myCache("myaddresslist"); 
				// 默认地址
				this.myaddresslist.forEach(data=>{
					if(data.isDefault){
						// 订单收货信息
						this.info.address=data.province+data.city+data.district+data.address;
						this.info.username=data.name;
						this.info.tel=data.phone;
						this.info.addressId=data.id;
						this.$forceUpdate();
					}
				});
				
				var buys = []; 
				if(type=="buy"){
					// 立即购买
					var buy=myCache('buycartList');
					if(buy){
						buys.push(buy);
					}
				}
				else if(type=='cart'){
					// 加入购物车
					var carts=myCache('carts');
					carts.forEach(cell=>{
						cell.cartList.forEach(item=>{
							if(item.check){
								item["storeName"]=cell.storeName;
								buys.push(item);
							}
						});
					});
				}
				
				if(buys.length<1){
					uni.showModal({
						title: '提示',
						content: '订单提交异常，请返回..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							// 返回
							uni.navigateBack({
								delta: 1
							});
						}
					});
					return false;
				}
				
				// 获取订单数据
				this.orderlist1=[];
				this.orderlist2=[];
				var sums=0,nums=0;
				for(let i=0;i<buys.length;i++){
					if(type=='buy'){
						// 立即购买
						sums=sums+ 1*buys[i].price*buys[i].quantity;
						nums=nums+1*buys[i].quantity;
						if(buys[i].isCourse==1){
							this.orderlist2.push(buys[i]);
						}
						else{
							this.orderlist1.push(buys[i]);
						}
					}
					else if(type=='cart'){
						// 加入购物车
						if(buys[i]["check"]&&buys[i]["status"]==1){
							sums=sums+ 1*buys[i].price*buys[i].quantity;
							nums=nums+1*buys[i].quantity;
							if(buys[i].isCourse==1){
								this.orderlist2.push(buys[i]);
							}
							else{
								this.orderlist1.push(buys[i]);
							}
						}
					}
				}
				this.info.sums=sums.toFixed(2);
				this.info.nums=nums.toFixed(0);
				this.$forceUpdate();
				
				// 预创建订单
				this.ordercreate();
			},
		    iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.phone = user.userphone;
				this.userid = user.userid;
				if(this.userid==""||this.userid=="0"){
					// 跳转去登录
					uni.navigateTo({
						url: `/pages/login/login`
					});
				}
			},
			getAddr() {
				if(this.myaddresslist.length>0){
					this._adrshow();
					this.$forceUpdate();
				}
				else{
					uni.showModal({
						title: '提示',
						content: '暂无收件地址，去添加？',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
								uni.navigateTo({
									url: `/pages/address/add?type=add`
								});
							}
						}
					});
				}
			},
			async getAddrList() {
				var _this=this;
				const {data: res} = await uni.$http.post('/api/address/list');
				if(res&&res.data&&res.data.length>0){
					res.data.forEach((cell)=>{
						if(cell.isDefault){
							cell["isChecked"]=true;
						}
						else{
							cell["isChecked"]=false;
						}
					});
					this.myaddresslist=res.data;
					// 缓存
					myCache("myaddresslist",this.myaddresslist);
					this.$forceUpdate();
				}
				else{
					this.myaddresslist=[];
					// 缓存
					myCache("myaddresslist",[]);
					this.$forceUpdate();
				}
			},
			addAddr(){
				uni.navigateTo({
					url: `/pages/address/add?type=add`
				});
			},
			adrchange(e){
				console.log(e);
				if(e.detail.value||e.detail.value=='0'){
					var data= this.myaddresslist[parseInt(e.detail.value)];
					// 订单收货信息
					this.info.address=data.province+data.city+data.district+data.address;
					this.info.username=data.name;
					this.info.tel=data.phone;
					this.info.addressId=data.id;
					this.$forceUpdate();
					this.myaddresslist.forEach((cell,idx)=>{
						if(idx==e.detail.value){
							this.myaddresslist[idx].isChecked=true;
						}
						else{
							this.myaddresslist[idx].isChecked=false;
						}
					});
					this.$forceUpdate();
					this._adrhide();
				}
			},
			change(e){
				console.log(e);
				if(e.detail.value){
					this.payType=e.detail.value;
				}
			},
			_show() {
				this.$refs.paypup.open();
			},
			_hide() {
				this.$refs.paypup.close();
				// 关闭弹出层
				setTimeout(() => {
					uni.hideLoading();
				}, 1000);
			},
			_adrshow() {
				this.$refs.adrpup.open();
			},
			_adrhide() {
				this.$refs.adrpup.close();
				// 关闭弹出层
				setTimeout(() => {
					uni.hideLoading();
				}, 1000);
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			goback(){
				uni.navigateBack({
					delta: 1
				});
			},
			// 去购买
			gotopay(){
				this._show();
			},
			paydo(){
				// 去支付
				// 是否登录
				if(!this.iflogin()){
					return false;
				}
				// #ifdef MP-ALIPAY
				console.log("MP-ALIPAY");
				this.alipaydo();
				// #endif
				
			},
			async zfbpayFailDo(){
				// 支付失败
				uni.hideLoading(); 
				var that=this;
				uni.showModal({
					title: '提示',
					content: '支付订单失败！请重新再试！',
					showCancel: false,
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							// 提示
						}
					}
				});
			},
			async alipaydo(){
				var that = this;
				uni.showLoading({
					title: '正在支付....'
				});
				console.log("alipaydo");
				// 支付宝调起支付
				var that=this;
				console.log("支付宝发起支付");
				//申请支付 
				var param={
					"userid": myCache('userid'),
					"userId": myCache('openId'),
					"orderId": that.info.id,
				};
				// 申请支付
				uni.showLoading({
					title: '正在支付....'
				});
				const {data: ress} = await uni.$http.post("/api/alipay/trade/create", param);
				if(ress.msg=="successed"){
					console.log(ress.data);
					var orderInfo =ress.data;
					// 调起支付
					uni.getProvider({
					    service: 'payment',
					    success: function (res) {
					        console.log(res.provider,"uni.getProvider");
							
					        if (~res.provider.indexOf('alipay')) {
					            uni.requestPayment({
					                "provider": "alipay",  //固定值为"alipay"
									"orderInfo": orderInfo.TradeNo,// 交易单号
					                success: function (resr) {
										console.log("支付宝调起支付成功",resr);
										if (resr && resr.resultCode === '9000') {
											// 支付成功 执行想要的操作
											uni.showLoading({
												title: '订单支付成功！'
											});
											// 回调改订单状态
											that.wxpaySuccessDo();
										}
										else{
											uni.showModal({
												title: '提示',
												content: '请求支付失败!请重试!',
												showCancel: false,
												confirmText: '确定',
												success: ress => {
												}
											});
										}
					                },
					                fail: function (err) {
										console.log("支付宝调起支付失败",err)
					                    console.log('支付失败:' + JSON.stringify(err));
										that.zfbpayFailDo();
					                }
					            });
					        }
					    }
					});
					
				}
				else{
					// 请求支付订单失败,
					uni.showModal({
						title: '提示',
						content: '请求支付失败!订单已经关闭或异常!请返回订单重试!',
						showCancel: false,
						confirmText: '确定',
						success: ress => {
							// 返回订单全部列表
							uni.redirectTo({
								url: `/pages/order/orderlist?id=0`
							});
						}
					});
				}
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.submitcon{
		position: fixed;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
		background-color: #FFFFFF;
		.ocon{
			display: flex;
			flex-direction: row;
		}
		.pcon{
			margin-left: 20rpx;
			margin-top: 20rpx;
			height: 50rpx;
			display: flex;
			flex:1;
			justify-content: flex-start;
			align-items: baseline;
			.hj{
				color:#303133;
				font-size: 30rpx;
			}
			.rmb{
				font-size: 30rpx;
				font-family: smallYuan;
				color:#ff3d0e ;
				margin-left: 10rpx;
			}
			.zs{
				font-size: 48rpx;
				font-weight: 600;
				color:#ff3d0e ;
			} 
		}
		.sbtn{
			margin: 20rpx 45rpx 20rpx;
			width: 220rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #A0A0A0;
			border:none;
			box-shadow: 0rpx 12rpx 44rpx 2rpx rgba(186,186,188,0.4);
			border-radius: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FCFCFD;
			text-align: center;
			&::after{
				border:none;
			}
		}
		.sbtn::after{
			border:0 !important;
		}
		.btn{
			margin: 20rpx 30rpx 54rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FCFCFD;
			width: 220rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #89965f;
			box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
			border-radius: 10rpx;
			opacity: 1;
			&::after{
				border:none;
			}
		}
		.btn::after{
			border:0 !important;
		}
		.pjbtn{
			background-color: #FFFFFF !important;
			margin: 30rpx 20rpx 0 0;
			border-radius: 50rpx;
			height: 60rpx;
			line-height: 60rpx;
			width:170rpx;
			font-size: 26rpx;
			border:1rpx solid #ff3d0e;
			color:#ff3d0e;
		}
		.pjbtn::after{
			border:0 !important;
		}
	}
	.oscon{
		border-radius: 16rpx;
		padding:20rpx 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		.osimg{
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.osjg{
			color: #000;
			font-size: 34rpx;
		}
		.osrcon{
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: flex-start;
			margin-left: 20rpx;
		}
		.osname{
			line-height: 48rpx;
			font-size:30rpx;
			color:#303133;
			margin-bottom: 8rpx;
		}
		.oscell{
			font-size: 24rpx;
			color:#747474;
			line-height: 33rpx;
		}
		.pretxt{
			text-decoration:line-through;
			margin-left: 30rpx;
		}
	}
	.ostj{
		display: flex;
		justify-content: flex-end;
		padding: 0 20rpx 20rpx 20rpx;
		align-items: flex-end;
	}
	.tcon{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx;
		.tcell{
			width: 46%;
			margin: 0 2%;
			background-color: #F5F6FC;
			padding: 20rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.ticon{
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
				margin-right: 20rpx;
			}
			.tlist{
				display: flex;
				flex:1;
				flex-direction: column;
				.tname{
					color: #303133;
					font-weight: 600;
					font-size: 28rpx;
				}
				.tvalue{
					color: #656E87;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
	
	}
	
	.tip{
		padding: 30rpx 20rpx 26rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 26rpx;
		color: #303133;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.odrcell{
		border-radius: 12rpx;
		padding: 20rpx 40rpx;
	}
	.oinfo{
		padding:0 20rpx 20rpx 20rpx;
		position: relative;
		display: block;
		margin-bottom: 180rpx;
		.yycon{
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			justify-content: center;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			position: relative;
			.shsel{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				background-color: #F5F5F5;
				.shsel1{
					border-radius: 20rpx 20rpx  0 0;
					background-color: #E1F2FF;
					font-size: 26rpx;
					color:#666;
					width: 50%;
					height: 80rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
				.shsel1.current{
					border-radius: 20rpx 20rpx 0 0;
					background-color: #FFF;
					color:#303133;
					font-weight: 600;
					font-size: 28rpx;
				}
				.shsel2{
					border-radius: 20rpx 20rpx  0 0;
					background-color: #E1F2FF;
					font-size: 26rpx;
					color:#666;
					width: 50%;
					height: 80rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
				.shsel2.current{
					border-radius: 20rpx 20rpx  0 0;
					background-color: #FFF;
					font-size: 28rpx;
					color:#303133;
					font-weight: 600;
				}
			}
			.acon{
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				padding: 20rpx 0 20rpx 12rpx;
				width: 100%;
				.aleft{
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: flex-start;
					margin-left: 12rpx;
					.aname{
						padding: 5rpx 0 10rpx;
						color:#303133;
						font-size: 32rpx;
						font-weight: 600;
					}
					.atxt{
						font-size: 26rpx;
						color:#747474;
						padding: 5rpx 0;
					}
				}
				.aright{
					width: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-right: 40rpx;
				}
				.aline{
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 10rpx;
				}
			}
			.atip{
				color:#000;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}
			.olist{
				display: flex;
				flex-direction: column;
				.ocell{
					font-size: 24rpx;
					color:#747474;
					padding: 10rpx 0;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.red{
						color:#ff3d0e;
					}
				}
			}
		}
	}
	
	::v-deep .uni-easyinput__content-input{
		font-size: 36rpx !important;
	}
	
	::v-deep.uni-radio-input-checked{
		background-color: #89965f !important;
		border-color: #89965f !important;
		background-clip: content-box!important;
		box-sizing: border-box;
	}
	::v-deep.uni-radio-input-checked::before{
		display: none!important;
	}
	.allcon{
		height: 900rpx;
		background-color: #FFFFFF;
		padding: 20rpx 0;
	}
	.mtxt{
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
		padding: 20rpx;
		font-size: 30rpx;
		border-top:1rpx solid #eee;
	}
	.mref{
		margin: 0 20rpx;
	}
	.mcon{
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
		width:100%;
		padding: 20rpx 0;
		font-size: 40rpx;
		font-weight:600; 
		.mcost{
			font-size: 60rpx;
		}
	}
	.hcon{
		display: flex;
		flex-direction: row;
		padding: 20rpx;
		.htitle{
			flex:1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			text-indent: 50rpx;
		}
		.rclose{
			width: 50rpx;
			display: flex;
			justify-content: flex-start;
		}
	}
	.checklist-group{
		width: 100%;
	}
	.addadrbtn{
		background-color: #89965f  !important;
		margin: 20rpx 10%;
		border-radius: 50rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
	}
	.paybtn{
		background-color: #89965f  !important;
		margin: 20rpx 20rpx;
		border-radius: 50rpx;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 30rpx;
	}
	.selcon{
		padding: 20rpx;
		position: relative;
		display: block;
		overflow-y: auto;
		height: 660rpx;
		.adrsitem {
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			border-top: 1rpx solid #f0f0f0;
			.lcon{
				display: flex;
				flex: 1;
				flex-direction: column;
			}
			.opecon{
				width: 80rpx;
				display: flex;
				align-items: center;
			}
			.sname{
				font-size: 30rpx;
				font-weight: 600;
				color: rgb(29, 29, 29);
				padding: 24rpx;
				justify-content: flex-start;
				align-items: center;
				display: flex;
				.adrtip{
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					width: 80rpx;
					height: 48rpx;
					text-align: center;
					line-height: 50rpx;
					background: #89965f;
					border-radius: 24rpx;
					margin-left: 10rpx;
				}
			}
			.sinfo{
				padding: 0 24rpx 24rpx;
				font-size: 26rpx;
				color:rgb(116, 116, 116);
				line-height: 40rpx;
			}
		}
		.sitem {
			display: flex;
			flex-direction: row;
			flex: 1;
			background-color: #FFFFFF;
			border-top: 1rpx solid #f0f0f0;
			padding:16rpx 0;
			.conright{
				flex: 1;
				display: flex;
				flex-direction: row;
				width: 100%;
				justify-content:flex-start;
				align-items: center;
			}
			.rinfo{
				width: 100rpx;
				display: flex;
				flex-direction: column;
				justify-items: center;
				align-self: center;
				margin-right: 10rpx;
				text-align: center;
				.btn{
					padding: 0 12rpx;
					background-color: #89965f ;
					border-radius: 24rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
			.selbtn{
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.simg{
				width: 50rpx;
				height: 46rpx;
				padding: 10rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 6rpx;
				}
			}
			.sname{
				display: flex;
				flex: 1;
				justify-content: flex-start;
				font-size: 28rpx;
				font-weight: 600;
				color: rgb(29, 29, 29);
				padding: 0 10rpx 0 20rpx;
			}
		}
	}
	
</style>