education_mp/pages/score/product.vue

<template>
<!-- 	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')" ></page-meta>
	<view>
		<view class="product_image_box">
			<image class="product_image" :src="productInfo.thumb" mode="heightFix"></image>
		</view>
		<view class="product_info">
			<view class="stock_price">
				<view class="product_price">
					<text>￥{{productInfo.score}} </text>
				</view>
				<view class="product_stock">剩{{productInfo.stock}}个</view>
			</view>
			<view class="product_name">{{productInfo.name}}</view>
			<view class="product_spec">{{productInfo.spec}}</view>
		</view>
		<view class="product_description">
			<rich-text :nodes="productInfo.description"></rich-text>
		</view>
		<view class="order_car">
			<button class="show_order" data-eventsync="true" @click="showSpecPopup(1)" >立即兑换</button>
		</view>
		<view class="to_bottom"> --- 到底了 --- </view>
		<uni-popup ref="specPopup" :show="true" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
			<view class="order_info">
				<view class="custom_addr" @click="showAddrPopup()">
					<view class="contact_user">
						<text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
						<text class="contact_name" >{{checkedAddr.contact_name}}</text>
						<text class="contact_phone" >{{checkedAddr.contact_phone}}</text>
						<text class="contact_more"> &gt;</text>
					</view>
					<view class="contact_addr">
						{{checkedAddr.contact_province}} {{checkedAddr.contact_city}} {{checkedAddr.contact_area}} {{checkedAddr.contact_addr}}
					</view>
				</view>
				<view class="car_item" >
					<view class="box_left">
						<image class="car_image" :src="productInfo.thumb" mode=""></image>
					</view>
					<view class="box_right">
						<view class="car_name">{{productInfo.name}}</view>
						<view class="stock_price">
							<view class="product_price">
								<text>{{productInfo.score}} 积分</text>
							</view>
							<view class="product_quantity_box">
								<button class="product_quantity_sub" @click="changeQuantity(-1)" data-eventsync="true">
									<image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
								</button>
								<input type="number" class="product_quantity" placeholder="数量" v-model="quantity" @blur="changeQuantity(0)" ></input>
								<button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
									<image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
								</button>
							</view>
						</view>
						<view class="product_stock">剩{{productInfo.stock}}个</view>
					</view>
				</view>
				<!-- 购物车增加两个撑高度
				<view class="to_select_coupon" ></view>
				<view class="to_select_coupon" ></view>
				<view class="order_price" >合计： {{priceTotal}} 积分</view>
				<view class="order_btn">
					<button class="to_order" @click="createOrder()"  data-eventsync="true" >兑换</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF" >
			<view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator> </view>
			<view class="addr_list">
				<view class="addr_item" v-for="(item,index) in addrList" :key="index" @click="checkedAddrItem(item)">
					<view class="radio_label">
						<image class="radio_icon" :src="item.id == checkedAddr.id? '../../static/icon/radioed.png' : '../../static/icon/radio.png'" ></image>
					</view>
					<view class="contact_user">
						<text class="contact_name">{{item.contact_name}}</text>
						<text class="contact_phone">{{item.contact_phone}}</text>
						<text class="contact_default" v-if="item.is_default">默认</text>
					</view>
					<view class="contact_addr">
						{{item.contact_province}} {{item.contact_city}} {{item.contact_area}} {{item.contact_addr}}
					</view>
				</view>
			</view>
			<view class="create_box">
				<navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr"  >新建收货地址</navigator>
			</view>
		</uni-popup>
	</view> -->
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')" ></page-meta>
		<view>
			<view class="goback" :style="{top:StatusBarHeight+ 'px'}" @click="goBack">
				<uni-icons type="back" color="#fff" size="20"></uni-icons>
			</view>
			<view class="product_image_box">
				<image class="product_image" :src="productInfo.thumb" mode="heightFix"></image>
			</view>
			<view class="product_info">
				<view class="product_title_info">
					<view class="product_title">
						<text>{{productInfo.name}}</text>
					</view>
					<view class="product_subtitle">
						<text>我是副标题</text>
					</view>
					<view class="product_spec">
						<view class="spec_name">{{productInfo.score}}积分</view>
						<view class="product_stock">库存{{productInfo.stock}}个</view>
					</view>
				</view>
			</view>
      <view class="product_description">
        <rich-text :nodes="productInfo.description"></rich-text>
      </view>
<!-- 			<view class="product_comment">
				<view class="comment_num">
					<view class="comment_num_title">
						评论区(6000+)
					</view>
					<view class="comment_num_icon">
						>
					</view>
				</view>
				<view class="comment_list">
					<view class="comment_left">
						<view class="user_order_info">
							<text class="user_name">Raindfa</text>
							<text>黑色大款/XXL</text>
						</view>
						<view class="user_comment">
							这个课程真不错这个课程真不错这个课程真不错
						</view>
					</view>
					<view class="comment_right">
						<image src="" mode=""></image>
					</view>
				</view>
			</view> -->
			<view class="order_car">
				<navigator url="/pages/index/index" open-type="switchTab" class="to_car" >
					<image src="../../static/tabbar/score.png" class="car_icon" ></image>
					<view class="text">
						首页
					</view>
				</navigator>
<!--				<navigator url="/pagesA/user/favorites" open-type="switchTab" class="to_car" >
					<image src="../../static/user_icon/user_favo.png" class="car_icon" ></image>
					<view class="text">
						收藏
					</view>
				</navigator>
				<navigator url="/pages/car/index" open-type="switchTab" class="to_car" >
					<image src="../../static/icon/car.png" class="car_icon" ></image>
					<view class="shop_cat_text">
						购物车
					</view>
				</navigator>-->
				<button class="show_car" data-eventsync="true" @click="showSpecPopup(2)" >立即兑换</button>
			</view>
			<view class="to_bottom"> --- 到底了 --- </view>
			<uni-popup ref="specPopup" :show="true" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
				<view class="order_info">
					<view class="custom_addr" @click="showAddrPopup()">
						<view class="contact_user">
							<text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
							<text class="contact_name" >{{checkedAddr.contact_name}}</text>
							<text class="contact_phone" >{{checkedAddr.contact_phone}}</text>
							<text class="contact_more"> &gt;</text>
						</view>
						<view class="contact_addr">
							{{checkedAddr.contact_province}} {{checkedAddr.contact_city}} {{checkedAddr.contact_area}} {{checkedAddr.contact_addr}}
						</view>
					</view>
					<view class="car_item" >
						<view class="box_left">
							<image class="car_image" :src="productInfo.thumb" mode=""></image>
						</view>
						<view class="box_right">
							<view class="car_name">{{productInfo.name}}</view>
							<view class="stock_price">
								<view class="product_price">
									<text>{{productInfo.score}} 积分</text>
								</view>
								<view class="product_quantity_box">
									<button class="product_quantity_sub" @click="changeQuantity(-1)" data-eventsync="true">
										<image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
									</button>
									<input type="number" class="product_quantity" placeholder="数量" v-model="quantity" @blur="changeQuantity(0)" ></input>
									<button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
										<image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
									</button>
								</view>
							</view>
							<view class="product_stock">剩{{productInfo.stock}}个</view>
						</view>
					</view>
					<!-- 购物车增加两个撑高度 -->
					<view class="to_select_coupon" ></view>
					<view class="to_select_coupon" ></view>
					<view class="order_price" >合计： {{priceTotal}} 积分</view>
					<view class="order_btn">
						<button class="to_order" @click="createOrder()"  data-eventsync="true" >兑换</button>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF" >
				<view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator> </view>
				<view class="addr_list">
					<view class="addr_item" v-for="(item,index) in addrList" :key="index" @click="checkedAddrItem(item)">
						<view class="radio_label">
							<image class="radio_icon" :src="item.id == checkedAddr.id? '../../static/icon/radioed.png' : '../../static/icon/radio.png'" ></image>
						</view>
						<view class="contact_user">
							<text class="contact_name">{{item.contact_name}}</text>
							<text class="contact_phone">{{item.contact_phone}}</text>
							<text class="contact_default" v-if="item.is_default">默认</text>
						</view>
						<view class="contact_addr">
							{{item.contact_province}} {{item.contact_city}} {{item.contact_area}} {{item.contact_addr}}
						</view>
					</view>
				</view>
				<view class="create_box">
					<navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr"  >新建收货地址</navigator>
				</view>
			</uni-popup>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false, // 使用Popup组件时,阻止禁止滚动穿透
				productInfo:{
					id:0,
					name:"",
					score:0,
					spec:"",
					stock:0,
					thumb:"",
					description:"",
				},
				requestParam:{
					id:0,
				},
				// 数量
				quantity:1,
				// 总价
				priceTotal:'0.00',
				// 规格选择按钮类型
				specBtnType: 1, // 1预约。2购物车
				// 地址列表
				addrList:[],
				// 已选地址
				checkedAddr:{
					id:0,
					contact_name:"",
					contact_phone:"",
					contact_province:"",
					contact_city:"",
					contact_area:"",
					contact_addr:"",
					is_default:0,
				},
				//获取微信小程序分享按钮的信息
				StatusBarHeight:0,
			}
		},
		onLoad(param) {
			// 接受路由参数，产品ID
			this.requestParam.id = param.id;
			var that = this;
			// 监听地址变动
			uni.$on('addr_list_change',function(data){
				// 地址列表
				that.addrList = data.list;
			})
		},
		onShow() {
			// 如果存在产品ID的话
			if( this.requestParam.id > 0) {
				// 请求详情
				this.$http.request('api/score_product/get_detail',this.requestParam).then((re)=>{
					// 成功渲染数据
					if( re.code == 'success' ) {
						// 刷新数据
						this.productInfo = re.data;
					}
				});
			};
			this.getStatusBarHeight();
		},
		methods: {
			// 地址弹出层
			showAddrPopup(){
				// 显示下单弹出层
				this.$refs.addrPopup.open('bottom');
			},
			// 规格弹出层
			showSpecPopup(type){
				// 登录提示
				// if( !this.$checkAccess.alterLogin()) return ;
				// 显示下单弹出层
				this.$refs.specPopup.open('bottom');
				// 地址列表
				this.getAddrList();
				// 计算价格
				this.priceHandler();
			},
			// 数量调整
			changeQuantity(number){
				// 如果不是0.表示两侧按钮点击，0表示输入的修改
				if( number != 0 ) {
					// 计算个数
					this.quantity 		= this.quantity + number;
				}
				// 如果大于库存设置为库存
				if( this.quantity > this.productInfo.stock ) {
					this.quantity = this.productInfo.stock;
					uni.showToast({
						title:"库存不足",
						icon:"none"
					})
				}
				// 如果小于1.设置为1
				if( this.quantity < 1 )		{
					this.quantity = 1;
					uni.showToast({title:"数量不可以小于0",icon:"none"})
				}
				// 计算价格
				this.priceHandler();
			},
			// 创建订单
			createOrder(){
				// 不可预约
				if( !this.$checkAccess.alertCity() ) return;
				// 下单数量小于0
				if( this.quantity < 1 ) {
					uni.showToast({
						title:"至少兑换1个"
					})
					return;
				}
				// 如果大于库存设置为库存
				if( this.productInfo.stock < 1 ) {
					uni.showToast({
						title:"库存不足",
						icon:"none"
					})
					return;
				}
				// 地址未填
				if( !this.checkedAddr.id ) {
					uni.showToast({
						title:"请选择收货地址",
						icon:"none"
					})
					return;
				}

				//需要下单的产品信息参数传给completion页面
				let productInfo = [{name:this.productInfo.name}]
				//转成json字符串
				productInfo = JSON.stringify(productInfo);
				//加密json格式成编码数组
				let encodedArray = encodeURIComponent(productInfo);

				// 请求接口
				this.$http.request('api/score_orders/create',{"product_id":this.productInfo.id,'buy_num':this.quantity,'addr_id':this.checkedAddr.id},'post').then((re)=>{
					// 判断结果
					if( re.code == 'success' ) {
						// 处理结果
						this.productInfo.stock = this.productInfo.stock - this.quantity;
						// 关闭弹窗
						this.$refs.specPopup.close();
						// 跳转到兑换成功页
						uni.navigateTo({url:`/pages/score/completion?params=${encodedArray}`});
						return ;
					}else{
						uni.showModal({title:re.msg,showCancel:false});
					}
				});
			},
			// 计算价格
			priceHandler(){
				// 小数点保留
				this.priceTotal = this.productInfo.score * this.quantity;
			},
			popupChange(e){
				// 禁止滚动穿透
				this.show = e.show
			},
			// 选择地址
			checkedAddrItem(item){
				this.checkedAddr = item;
				this.$refs.addrPopup.close();
			},
			getAddrList(){
				// 判断数据
				this.$http.request('api/custom_addr/get_list').then((callback)=>{
					// 获取成功
					if( callback.code == 'success' ){
						this.addrList  = callback.data;
						// 如果有的话
						if( this.addrList.length ){
							// 获取默认的
							for (let i in this.addrList) {
								// 如果是默认的
								if( this.addrList[i].is_default ) this.checkedAddr = this.addrList[i];
							}
							// 如果没有默认的话
							if( !this.checkedAddr.id ){
								this.checkedAddr = this.addrList[this.addrList.length-1];
							}
						}
					}
				});
			},
			getStatusBarHeight(){
				let SYSTEM_INFO = uni.getSystemInfoSync();
				this.StatusBarHeight =  SYSTEM_INFO.statusBarHeight || 10;
			},
			goBack(){
				uni.navigateBack({
					success: () => {

					},
					fail: (err) => {
						uni.reLaunch({
							url:"/pages/index/index"
						})
					}
				});
			}
		}
	}
</script>

<style lang="less">
	// .product_image_box{
	// 	display: block;
	// 	overflow: hidden;
	// 	background: #FFFFFF;
	// 	margin: 10rpx auto;
	// 	.product_image{
	// 		display: block;
	// 		margin: 0 auto;
	// 		width: 750rpx;
	// 		height: 750rpx;
	// 	}
	// }
	// .product_info{
	// 	display: block;
	// 	background: #FFFFFF;
	// 	margin: 10rpx 0rpx;
	// 	padding: 10px 10px;
	// 	.product_name{
	// 		max-height: 80rpx;
	// 		font-size: 30rpx;
	// 		line-height: 40rpx;
	// 		overflow: hidden;
	// 		padding: 10rpx 0rpx;
	// 	}
	// 	.product_spec{
	// 		color: #999999;
	// 		font-size: 24rpx;
	// 		line-height: 30rpx;
	// 	}
	// 	.stock_price{
	// 		font-size: 20rpx;
	// 		overflow: hidden;
	// 		margin-top: 10rpx;
	// 		line-height: 30rpx;
	// 		.product_price{
	// 			float: left;
	// 			color: red;
	// 			font-size: 38rpx;
	// 			line-height: 60rpx;
	// 			.product_market{
	// 				font-size: 24rpx;
	// 				color: #999999;
	// 				line-height: 30rpx;
	// 				margin-left: 10rpx;
	// 				text-decoration: line-through;
	// 			}
	// 		}
	// 		.product_stock{
	// 			color: #333333;
	// 			float: right;
	// 			font-size: 20rpx;
	// 			line-height: 60rpx;
	// 		}
	// 	}
	// }

	.goback{
		position: fixed;
		width: 38px;
		height: 38px;
		background: rgba(0, 0, 0, 0.5);
		left: 30rpx;
		margin-left: 0;
		border-radius: 100px;
		top: 0;
		backdrop-filter: blur(10rpx);
		border:1rpx solid rgba(255,255,255,0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.product_image_box{
		display: block;
		overflow: hidden;
		background: #FFFFFF;
		margin: 10rpx auto;
		.product_image{
			display: block;
			margin: 0 auto;
			width: 750rpx;
			height: 750rpx;
		}
	}
	.product_info{
		display: block;
		background: #FFFFFF;
		margin: 10rpx 0rpx;
		padding: 10px 10px;
		.product_name{
			max-height: 80rpx;
			font-size: 30rpx;
			line-height: 40rpx;
			overflow: hidden;
			padding: 10rpx 0rpx;
		}
		.product_title_info{
			.product_title{
				font-size: 30rpx;
				line-height: 40rpx;
			}
			.product_subtitle{
				color: #999999;
				line-height: 40rpx;
				font-size: 24rpx;
			}
		}
		.product_spec{
			color: #999999;
			font-size: 24rpx;
			line-height: 30rpx;
			overflow: hidden;
			margin-top: 20rpx;
			.spec_name{
				float: left;
				color: red;
				font-size: 38rpx;
				line-height: 60rpx;
			}
			.product_stock{
				float: right;
				line-height: 60rpx;
			}
		}
		.product_coupon{
			font-size: 30rpx;
			line-height: 30rpx;
			overflow: hidden;
			.coupon_text{
				float: left;
				line-height: 30rpx;
			}
			.coupon_info{
				float: right;
				line-height: 30rpx;
				overflow: hidden;
				padding: 0rpx 40rpx;
				.text{
					float: left;
					margin-right: 30rpx;
				}
				.icon{
					float: right;
					font-size: 30rpx;
					color: #999999;
				}
			}
		}
	}


	// 描述简介
	// .product_business{
	// 	display: block;
	// 	overflow: hidden;
	// 	padding: 20rpx 20rpx;
	// 	margin: 10rpx auto;
	// 	background: #FFFFFF;
	// 	.logopic{
	// 		float: left;
	// 		width: 80rpx;
	// 		height: 80rpx;
	// 		border-radius: 50%;
	// 		margin-right: 20rpx;
	// 	}
	// 	.business_info{
	// 		float: left;
	// 		width: 600rpx;
	// 		overflow: hidden;
	// 		.business_name{
	// 			font-size: 26rpx;
	// 			line-height: 40rpx;
	// 		}
	// 		.business_desc{
	// 			color: #999999;
	// 			font-size: 24rpx;
	// 			line-height: 40rpx;
	// 		}
	// 	}
	// }
	 .product_description{
	 	width: 700rpx;
	 	display: block;
	 	overflow: hidden;
	 	background: #FFFFFF;
	 	min-height: 300rpx;
	 	font-size: 26rpx;
	 	margin: 0rpx auto;
	 	line-height: 50rpx;
	 	padding: 10rpx 25rpx;
	 	[alt]{ //web_view图片
	 		max-width: 100%;  // 避免图片超宽
	 		vertical-align: bottom; // 避免图片之间间隙
	 	}
	 }
	.product_poster{
		display: block;
		overflow: hidden;
		padding: 10rpx 0rpx;
		margin: 10rpx auto;
		background: #FFFFFF;
		.product_image{
			width: 750rpx;
			display: block;
		}
	}

	.product_comment{
		display: block;
		background: #FFFFFF;
		margin: 10rpx 0rpx;
		padding: 10px 10px;
		background: #FFFFFF;
		.comment_num{
			overflow: hidden;
			line-height: 30rpx;
			.comment_num_title{
				float: left;
				line-height: 30rpx;
			}
			.comment_num_icon{
				float: right;
				line-height: 1.5;
				margin-right: 40rpx;
			}
		}
		.comment_list{
			overflow: hidden;
			.comment_left{
				float: left;
				width: 400rpx;
				.user_order_info{
					color: #999999;
					margin-top: 20rpx;
					.user_name{
						color: #000000;
						margin-right: 20rpx;
					}
				}
				.user_comment{
					margin-top: 20rpx;
					font-size: 30rpx;
					line-height: 50rpx;
				}
			}
			.comment_right{
				float: right;
				width: 200rpx;
				height: 200rpx;
				background-color: aqua;
				border-radius: 20rpx;
			}
		}
	}

	// .order_car{
	// 	left: 0rpx;
	// 	width: 750rpx;
	// 	height: 140rpx;
	// 	display: block;
	// 	position: fixed;
	// 	padding-top: 20rpx;
	// 	background: #FFFFFF;
	// 	bottom: var(--window-bottom);
	// 	border-top: 2rpx solid #DDDDDD;
	// 	.show_order{
	// 		width: 700rpx;
	// 		height: 80rpx;
	// 		display: block;
	// 		color: #FFFFFF;
	// 		font-size: 30rpx;
	// 		overflow: hidden;
	// 		line-height: 80rpx;
	// 		padding: 0rpx 0rpx;
	// 		text-align: center;
	// 		margin: 0rpx auto;
	// 		border-radius: 40rpx;
	// 		background-color: #E03519;
	// 	}
	// }
	.order_car{
		left: 0rpx;
		width: 750rpx;
		height: 160rpx;
		display: block;
		position: fixed;
		padding-top: 20rpx;
		background: #FFFFFF;
		bottom: var(--window-bottom);
		border-top: 2rpx solid #DDDDDD;
		.show_car{
			float: right;
			width: 550rpx;
			height: 90rpx;
			display: block;
			color: #FFFFFF;
			font-size: 30rpx;
			overflow: hidden;
			line-height: 90rpx;
			padding: 0rpx 0rpx;
			text-align: center;
		 	background-color: #ff5900;
			border-radius: 20rpx;
		}
		.to_car{
			float: left;
			width: 100rpx;
			height: 90rpx;
			display: block;
			text-align: center;
			margin-left: 20rpx;
			.car_icon{
				text-align: center;
				float: left;
				width: 60rpx;
				height: 60rpx;
				display: block;
			}
			.text{
				float: left;
				padding-left: 8rpx;
				text-align: center;
				line-height: 30rpx;
				font-size: 24rpx;
			}
			.shop_cat_text{
				float: left;
				text-align: center;
				line-height: 30rpx;
				font-size: 24rpx;
			}
		}
	}
	.popup{
		overflow: hidden;
		.popup_title{
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			font-size: 36rpx;
			height: 120rpx;
			line-height: 120rpx;
			padding: 0rpx 20rpx;
			border-bottom: 10rpx solid #F8F8F8;
			.to_addr_page{
				float: right;
				color: #F59A23;
				display: block;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 26rpx;
				padding: 0rpx 10rpx;
			}
		}
		.order_info{
			overflow: hidden;
			background: #FFFFFF;
			.custom_addr{
				width: 680rpx;
				display: block;
				font-size: 24rpx;
				overflow: hidden;
				margin: 0rpx auto;
				line-height: 40rpx;
				padding: 20rpx 35rpx;
				background-color: #FFFFFF;
				border-bottom: 2rpx solid #dddddd;
				.contact_user{
					display: block;
					font-size: 24rpx;
					line-height: 50rpx;
					.contact_none{
						color: #E03519;
						font-size: 26rpx;
						font-weight: bold;
					}
					.contact_name{
						font-size: 26rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}
					.contact_more{
						float: right;
						font-size: 40rpx;
						font-weight: bold;
					}
				}
				.contact_addr{
					width: 620rpx;
					display: block;
					font-size: 24rpx;
					line-height: 30rpx;
					padding: 10rpx 5rpx;
				}
			}
			.min600{
				min-height: 600rpx;
			}
			.car_item{
				height: 200rpx;
				display: block;
				background: #FFFFFF;
				margin: 20rpx auto;
				.box_left{
					float: left;
					width: 160rpx;
					height: 200rpx;
					margin-left: 35rpx;
					.car_image{
						width: 160rpx;
						height: 160rpx;
						margin: 20rpx 0rpx;
						border-radius: 5rpx;
					}
				}
				.box_right{
					float: left;
					width: 485rpx;
					margin-left: 35rpx;
					padding-top: 20rpx;
					.car_name{
						max-height: 80rpx;
						font-size: 30rpx;
						line-height: 40rpx;
						overflow: hidden;
						padding: 0rpx 0rpx;
					}
					.car_spec{
						color: #999999;
						font-size: 24rpx;
						line-height: 30rpx;
						padding: 0rpx 0rpx;
					}
					.stock_price{
						width: 485rpx;
						color: #dddddd;
						font-size: 20rpx;
						overflow: hidden;
						margin-top: 10rpx;
						line-height: 30rpx;
						.product_price{
							float: left;
							color: red;
							font-size: 30rpx;
							line-height: 60rpx;
							.car_market{
								font-size: 24rpx;
								color: #999999;
								line-height: 30rpx;
								vertical-align: middle;
								text-decoration: line-through;
							}
						}
						.product_quantity_box{
							float: right;
							color: #333333;
							overflow: hidden;
							font-size: 24rpx;
							margin-top: 10rpx;
							text-align: center;
							.product_quantity_sub{
								float: left;
								border: none;
								height: 36rpx;
								background: none;
								text-align: center;
								line-height: 36rpx;
								padding: 10rpx 10rpx;
								.sub_icon{
									width: 22rpx;
									height: 22rpx;
									display: block;
								}
							}
							.product_quantity_sub::after{
								border: none;
								background: none;
							}
							.product_quantity{
								float: left;
								width: 100rpx;
								height: 36rpx;
								font-size: 24rpx;
								min-height: 36rpx;
								line-height: 36rpx;
								padding: 0rpx 0rpx;
								border-radius: 8rpx;
								border: 2rpx solid #dddddd;
							}
							.product_quantity_add{
								float: left;
								border: none;
								height: 36rpx;
								background: none;
								text-align: center;
								padding: 10rpx 10rpx;
								line-height: 36rpx;
								.add_icon{
									width: 22rpx;
									height: 22rpx;
									display: block;
								}
							}
							.product_quantity_add::after{
								border: none;
								background: none;
							}
						}
					}
					.product_stock{
						font-size: 20rpx;
						line-height: 60rpx;
					}
				}
			}
			.to_select_coupon{
				font-size: 28rpx;
				padding: 30rpx 35rpx;
				margin-bottom: 20rpx;
				.coupon_deduction{
					color: red;
					float: right;
				}
			}
			.order_price{
				font-size: 28rpx;
				text-align: right;
				margin: 0rpx 35rpx;
				padding: 20rpx 0rpx;
				border-top: 2rpx solid #DDDDDD;
				.coupon_deduction{
					color: red;
					float: right;
				}
			}
			.order_btn{
				width: 700rpx;
				height: 100rpx;
				display: block;
				margin: 0 auto;
				margin-top: 70rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 30rpx;
				.to_car{
					color: #FFFFFF;
					float: right;
					width: 700rpx;
					height: 80rpx;
					display: block;
					overflow: hidden;
					font-size: 30rpx;
					line-height: 80rpx;
					padding: 0rpx 0rpx;
					border-radius: 40rpx;
					border: 0rpx solid transparent;
					background-color: #F59A23;
				}
				.to_car::after{
					border: 0rpx solid transparent;
				}
				.to_order{
					color: #FFFFFF;
					float: right;
					width: 700rpx;
					height: 80rpx;
					display: block;
					font-size: 30rpx;
					overflow: hidden;
					line-height: 80rpx;
					padding: 0rpx 0rpx;
					border-radius: 40rpx;
					background-color: #E03519;
					border: 0rpx solid transparent;
				}
				.to_order::after{
					border: 0rpx solid transparent;
				}
			}
		}
		.coupon_list{
			display: block;
			overflow: hidden;
			min-height: 600rpx;
			margin: 10rpx auto;
			background: #FFFFFF;
			padding-bottom: 50rpx;
			.coupon_item{
				height: 200rpx;
				display: block;
				margin: 10rpx auto;
				border-bottom: 2rpx solid #DDDDDD;
				.box_left{
					float: left;
					width: 160rpx;
					height: 160rpx;
					font-size: 20rpx;
					text-align: center;
					margin-left: 35rpx;
					line-height: 60rpx;
					margin-top: 20rpx;
					background: pink;
					.rebate{
						width: 120rpx;
						height: 60rpx;
						margin: 0rpx auto;
						line-height: 60rpx;
						margin-top: 20rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.box_right{
					float: left;
					width: 485rpx;
					margin-left: 35rpx;
					padding-top: 20rpx;
					.coupon_title{
						width: 485rpx;
						max-height: 80rpx;
						font-size: 30rpx;
						overflow: hidden;
						line-height: 40rpx;
						padding: 0rpx 0rpx;
						.coupon_name{
							float: left;
							height: 40rpx;
							width: 380rpx;
						}
						.coupon_status{
							width: 85rpx;
							float: right;
							color: #999999;
							font-size: 24rpx;
						}
					}
					.product_scope{
						width: 485rpx;
						height: 80rpx;
						color: #999999;
						font-size: 24rpx;
						overflow: hidden;
						line-height: 80rpx;
						.check_label{
							float: right;
							display: block;
							overflow: hidden;
							padding: 20rpx 20rpx;
							.isstd{
								line-height: 40rpx;
							}
							.checkbox{
								float: right;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
					.coupon_info{
						width: 485rpx;
						max-height: 80rpx;
						font-size: 30rpx;
						overflow: hidden;
						line-height: 40rpx;
						padding: 0rpx 0rpx;
						.coupon_exp{
							float: left;
							font-size: 20rpx;
						}
					}
				}
			}
			.coupon_item:last-child{
				border-bottom: none;
			}
		}
		.addr_list{
			width: 730rpx;
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			min-height: 500rpx;
			.addr_item{
				display: block;
				font-size: 24rpx;
				overflow: hidden;
				line-height: 40rpx;
				padding: 15rpx 10rpx;
				border-radius: 15rpx;
				border-bottom: 2rpx solid #dddddd;
				.radio_label{
					width: 40rpx;
					float: left;
					height: 50rpx;
					padding-top: 30rpx;
					margin-right: 20rpx;
					.radio_icon{
						float: left;
						width: 40rpx;
						height: 40rpx;
					}
				}
				.contact_user{
					float: left;
					width: 640rpx;
					display: block;
					height: 50rpx;
					font-size: 24rpx;
					line-height: 50rpx;
					.contact_name{
						font-size: 26rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}
					.contact_default{
						color: #F59A23;
						font-size: 20rpx;
						margin-left: 16rpx;
						border: 1rpx solid #F59A23;
					}
				}
				.contact_addr{
					float: left;
					width: 640rpx;
					display: block;
					font-size: 24rpx;
					line-height: 30rpx;
					padding: 10rpx 5rpx;
				}
			}
		}
		.create_box{
			height: 140rpx;
			display: block;
			.create_addr{
				width: 700rpx;
				height: 80rpx;
				display: block;
				color: #FFFFFF;
				font-size: 30rpx;
				overflow: hidden;
				line-height: 80rpx;
				padding: 0rpx 0rpx;
				text-align: center;
				margin: 0rpx auto;
				margin-top: 20rpx;
				border-radius: 40rpx;
				background-color: #E03519;
			}
		}
	}
</style>