kailin_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 class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
							<text v-if="checkedAddr.shop_type">({{ $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type] }})&nbsp;</text>
							{{ checkedAddr.contact_shop }}
						</view>
					</view>
					<view class="contact_addr" style="display: flex;">
						{{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 class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
							<text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text>
							{{ item.contact_shop }}
						</view>
					</view>
					<view class="contact_addr" style="display: flex;">
						{{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,
				},
			}
		},
		onLoad(param) {
			// 接受路由参数，产品ID
			this.requestParam.id = param.id;
			var that = this;
			// 监听地址变动
			uni.$on('addr_list_change',function(data){
				// 地址列表
				that.addrList = data.list;
			})
			// #ifdef MP-WEIXIN
			//分享按钮
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShareAppMessage(obj) {
			return {
				title: this.productInfo.name,
				path: '/pages/score/product?id=' + this.productInfo.id
			}
		},
		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;
					}
				});
			};
		},
		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;
				}
				// 请求接口
				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/orders"});
						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];
							}
						}
					}
				});
			}
		}
	}
</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;
			}
		}
	}
	// 描述简介
	.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: 600rpx;
		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;
		}
	}
	.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;
		}
	}
	.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_shop {
						float: right;
						font-size: 26rpx;
						margin-right: 16rpx;
					}
				}
				.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_shop {
						float: right;
						font-size: 26rpx;
					}
				}
				.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>