kailin_mp/pages/product/index.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"></image>
		</view>
		<view class="product_info">
			<view class="stock_price" v-if="isShowPrice">
				<view class="product_price" >
					<text>￥{{productInfo.price}} </text>
					<text class="product_market">￥{{productInfo.market_price}} </text>
				</view>
			</view>
			<view class="product_name">{{productInfo.name}}</view>
			<view class="product_spec">
				<view class="spec_name">{{productInfo.spec}}</view> 
				<view class="product_stock">剩{{productInfo.stock}}个</view>
			</view>
		</view>
		<view class="product_business" v-if="productInfo.business_info.name">
			<image class="logopic" :src="productInfo.business_info.logopic" ></image>
			<view class="business_info">
				<view class="business_name">
					{{productInfo.business_info.name}}
				</view>
				<view class="business_desc">
					{{productInfo.business_info.desc}}
				</view>
			</view>
		</view>
		<view class="product_description">
			<rich-text :nodes="productInfo.description"></rich-text>
		</view>
		<view class="product_poster" v-if="productInfo.poster" >
			<image class="product_image" :src="productInfo.poster" mode="widthFix"></image>
		</view>
		<view class="order_car">
			<navigator url="/pages/car/index" open-type="switchTab" class="to_car" >
				<image src="../../static/icon/car.png" class="car_icon" ></image>
			</navigator>
			<button class="show_order" data-eventsync="true" @click="showSpecPopup(1)" >立即预约</button>
			<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" @maskClick="onSpecPopupClose">
			<view class="order_info">
				<view class="custom_addr" v-if="specBtnType==1" @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" v-if="isShowPrice">
								<text>￥{{productInfo.price}} </text>
								<text class="car_market">￥{{productInfo.market_price}}</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="select_sku" v-if="productInfo.product_attr.length" >
						<scroll-view scroll-y="true" class="scroll_max" >
							<view class="product_attr" v-for="(spec,spec_index) in productInfo.product_attr" :key="spec_index">
								<scroll-view scroll-y="true" class="scroll_y" >
									<view class="spec_name">{{ spec.spec_name }}</view>
									<view class="arrt_list">
										<view class="arrt_option" :class="option.active?'active':''" v-for="(option,attr_index) in spec.attr_list" :key="attr_index" @click="attrChange(spec_index,attr_index)">
											{{option.name}}
										</view>
									</view>
								</scroll-view>
							</view>
						</scroll-view>
				</view>
				<!-- 选择优惠券 -->
				<view class="to_select_coupon" v-if="specBtnType==1" @click="openCoupon()">
					<text>优惠券</text>
					<view class="coupon_deduction">{{couponUsed}}</view>
				</view>
				<view class="order_price" v-if="specBtnType==1" >合计： ￥{{priceTotal}}</view>
				<view class="order_btn">
					<button class="to_order" @click="createOrder()" v-if="specBtnType==1" data-eventsync="true" >预约</button>
					<button class="to_car" @click="createCart()" v-if="specBtnType==2" data-eventsync="true" >加入购物车</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="couponPopup" type="bottom" class="popup" background-color="#FFFFFF" >
			<view class="popup_title">优惠券</view>
			<view class="coupon_list">
				<view class="coupon_item" v-for="(item,index) in couponList" @click="checkedCoupon(index)" :key="index">
					<view class="box_left">
						<view class="rebate" v-if="item.rebate_type == 1" > ￥{{item.rebate}}</view>
						<view class="rebate" v-if="item.rebate_type == 2" > 打 {{item.rebate}} 折</view>
						<view class="rebate" v-if="item.rebate_type == 3" > 赠 <text v-if="item.rebate_scope.length">
								{{item.rebate_scope[0].product_name}}
							</text> </view>
						<view class="std_pay"> 满{{item.std_pay}}</view>
					</view>
					<view class="box_right">
						<view class="coupon_title">
							<view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
							<view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
							<view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view> 
						</view>
						<view class="product_scope">
							<text class="" v-if="item.type_id == 1">限定商品可用</text>
							<text class="" v-if="item.type_id == 2">全场可用</text>
							<view class="check_label" >
								<view class="isstd" v-if="!item.is_std">不可用</view> 
								<image class="checkbox" v-if="item.is_std" :src="item.checked?'../../static/icon/checked.png':'../../static/icon/checkbox.png'"></image>
							</view>
						</view>
						<view class="coupon_info">
							<view class="coupon_exp">{{item.exp_time}} 到期</view>
						</view>
					</view>
				</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>
		<uni-popup ref="addFollow" type="center" class="center_popup" @change="popupChange">
			<view class="add_follow">
				<view class="close_area"><button class="close_btn" @click="closeAddFollow()">关闭</button></view>
				<view class="info_alter">长按识别二维码添加客服</view>
				<view class="qr_code_area">
					<image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress></image>
				</view>
				<button class="save_btn" @click="saveImage()">保存图片添加客服</button>
				<view class="rule_info">
					<view class="">报单规则：</view>
					<view class="">1、预约报单需要添加客服人员</view>
					<view class="">2、添加完客服人员后返回小程序填写商家资质</view>
					<view class="">3、开始预约报单</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false, // 使用Popup组件时,阻止禁止滚动穿透
				productInfo:{
					id:0,
					name:"",
					price:"0.00",
					market_price:"0.00",
					spec:"",
					stock:0,
					thumb:"",
					poster:"",
					description:"",
					business_info:{
						name:"",
						logopic:"",
						desc:"",
					},
					product_attr:[],
					product_sku:[],
				},
				requestParam:{
					id:0,
				},
				// 数量
				quantity:1,
				// 总价
				priceTotal:"0.00",
				// 优惠券列表
				couponList:[],
				// 总价
				priceTotal:'0.00',
				// 优惠券使用
				couponUsed:"去使用 >",
				// 扣减金额
				rebatePrice:0.00,
				// 已经选择的优惠券ID
				customCoupon: 0,
				// 规格选择按钮类型
				specBtnType: 1, // 1预约。2购物车
				// 地址列表
				addrList:[],
				// 已选地址
				checkedAddr:{
					id:0,
					contact_name:"",
					contact_phone:"",
					contact_province:"",
					contact_city:"",
					contact_area:"",
					contact_addr:"",
					is_default:0,
				},
				// 客服二维码
				followQrcode:"",
				// 是否登录状态
				isShowPrice:false,
				// 选择的skuid
				sku_id:0,
				//是否选择所有规格
				hasValidSpecSelected: false,
			}
		},
		onLoad(param) {
			// 接受路由参数，产品ID
			this.requestParam.id = param.product_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: '双十一 药优惠 得积分 兑豪礼',
			  path: '/pages/index/index'
			}
		},
		onShow() {
			// 没有添加客服就不显示
			this.isShowPrice = this.$checkAccess.checkShowPrice();
			// 如果存在产品ID的话
			if( this.requestParam.id > 0) {
				// 请求详情
				this.$http.request('api/product/get_detail',this.requestParam).then((re)=>{
					// 成功渲染数据
					if( re.code == 'success' ) {
						// 刷新数据
						this.productInfo = re.data;
						//设置默认sku
						// this.setDefaultSpec();
					}
				});		
			};
		},
		methods: {
			// 地址弹出层
			showAddrPopup(){
				// 显示下单弹出层
				this.$refs.addrPopup.open('bottom');
			},
			// 规格弹出层
			showSpecPopup(type){
				// 登录提示
				if( !this.$checkAccess.alterLogin()) return ;
				// 判断是否弹出
				// if( this.$checkAccess.getFollowQrcode() ) return this.openAddFollow();
				// 显示类型，1预约，2购物车
				this.specBtnType  = type;
				// 恢复优惠券使用按钮
				this.couponUsed   = "去使用 >";
				// 恢复扣减金额
				this.rebatePrice  = 0.00;
				// 选择优惠券重置
				this.customCoupon = 0;
				// 计算价格
				this.priceHandler();
				// 显示下单弹出层
				this.$refs.specPopup.open('bottom');
				// 结果
				this.$http.request('api/custom_coupon/get_checked',this.requestParam).then((re)=>{
					if( re.code == 'success' ){
						// 赋值
						this.couponList = re.data;
						// 优惠券是否可用
						this.checkCoupon();
					}
				});
				// 地址列表
				this.getAddrList();
				//只有一组sku时是否下架
				if(this.productInfo.product_sku.length === 1){
					this.defaultSkuStatus();
				}
				//如果当前商品没有规格，可以直接加入购物车
				if(this.productInfo.product_attr.length === 0){
					this.hasValidSpecSelected = true;
				}
			},
			// 优惠券弹出层
			openCoupon(){
				this.$refs.couponPopup.open('bottom')
			},
			// 数量调整
			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();
				// 优惠券是否可用
				this.checkCoupon();
			},
			// 创建订单
			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.productInfo.stock < this.quantity ) {
					this.quantity   = this.productInfo.stock;
					uni.showToast({
						title:"库存不足",
						icon:"none"
					})
					return;
				}
				// 地址未填
				if( !this.checkedAddr.id ) {
					uni.showToast({
						title:"请选择收货地址",
						icon:"none"
					})
					return;
				}
				//规格没有选中全
				if(!this.hasValidSpecSelected){
					uni.showToast({
						title:"请选择所有规格",
						icon:"none"
					})
					return;
				}
				//需要下单的产品信息参数传给completion页面
				let productInfo = [{name:this.productInfo.name,spec:this.productInfo.spec,price:this.productInfo.price}]
				//转成json字符串
				productInfo = JSON.stringify(productInfo);
				//加密json格式成编码数组
				let encodedArray = encodeURIComponent(productInfo);
				
				// 需要下单的产品列表
				let productList = [{product_id:this.productInfo.id,buy_num:this.quantity,product_skuid:this.sku_id}];
				// 转成json字符串传输
				productList		= JSON.stringify(productList);
				// 请求接口
				this.$http.request('api/orders/create',{"product_list":productList,"custom_coupon_id":this.customCoupon,'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/orders/completion?params=${encodedArray}`});
					}else{
						uni.showModal({title:re.msg,showCancel:false});
					}
				});
			},
			// 加入购物车
			createCart(){
				// 不可预约
				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.productInfo.stock < this.quantity ) {
					this.quantity   = this.productInfo.stock;
					uni.showToast({
						title:"库存不足",
						icon:"none"
					})
					return;
				}
					
				//规格没有选中全
				if(!this.hasValidSpecSelected){
					uni.showToast({
						title:"请选择所有规格",
						icon:"none"
					})
					return;
				}
				// 商品信息
				let data = {product_id:this.productInfo.id,buy_num:this.quantity,skuid:this.sku_id};
				// 请求接口
				this.$http.request('api/shop_cart/add',data,'post').then((re)=>{
					// 判断结果
					if( re.code == 'success' ) {
						// 跳转到订单列表
						uni.showToast({
							icon:"success",
							title:"加入购物车成功"
						})
						// 关闭结果
						this.$refs.specPopup.close();
					}else{
						// 跳转到订单列表
						uni.showToast({
							icon:"error",
							title:"加入购物车失败"
						})
					}
				});
			},
			// 检查优惠券是否可用
			checkCoupon(){
				// 如果存在的话
				if( this.couponList.length ){
					let hasIsStd = false;
					// 循环优惠券
					for (let i in this.couponList) {
						/* 商品的总价格，决定是否可用 */
						let totalPrice	 = 0.00;
						// 如果是商品券
						if( this.couponList[i].type_id == 1 ){
							// 判断商品是不是在商品范围
							let isScope = false;
							// 循环商品范围
							for (let k in this.couponList[i].product_scope) {
								// 如果存在商品范围
								if( this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
							}
							// 范围内的做计算
							if( isScope )			totalPrice = this.$decimal.add(totalPrice,this.$decimal.mul(this.productInfo.price,this.quantity));
						// 店铺券
						}else{
							// 店铺券
							totalPrice				= this.$decimal.add(totalPrice,this.$decimal.mul(this.productInfo.price,this.quantity));
						}
						// 判断价格到不到限额
						this.couponList[i].is_std	= parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay,1).toFixed());
						// 如果不可用的话，该项已选择则不选
						if( !this.couponList[i].is_std && this.couponList[i].checked )	this.checkedCoupon(i);
					}
				}
			},
			// 选择优惠券
			checkedCoupon(index){
				// 单个设置选中/未选
				this.couponList[index].checked = this.couponList[index].checked ? 0 : 1;
				// 循环处理
				for (let i in this.couponList) {
					// 有未选的就不做全选
					if( index != i ) this.couponList[i].checked = 0;
				}
				// 如果未选中，提示可用
				if( !this.couponList[index].checked ) this.couponUsed = '去使用 >';
				// 已经选择的优惠券ID
				this.customCoupon  = this.couponList[index].checked ? this.couponList[index].id : 0;
				// 计算扣减
				this.couponRebate();
				// 计算价格
				this.priceHandler();
				// 关闭弹窗
				this.$refs.couponPopup.close();
			},
			// 计算价格
			priceHandler(){
				// 总价格
				let priceTotal 	= this.$decimal.mul(this.productInfo.price,this.quantity);
				// 扣减数据
				priceTotal		= priceTotal.sub(this.rebatePrice);
				// 小数点保留
				this.priceTotal = priceTotal.toFixed(2);
			},
			// 计算优惠券扣减
			couponRebate(){
				// 默认扣减0
				this.rebatePrice 	= 0;
				// 循环优惠券
				for (let i in this.couponList) {
					// 判断是否选中
					if( this.couponList[i].id != this.customCoupon ){
						// 未选择的不管
						continue;
					}
					/* 商品的总价格，决定是否可用 */
					var totalPrice	 = 0.00;
					// 如果是商品券
					if( this.couponList[i].type_id == 1 ){
						// 判断商品是不是在商品范围
						var isScope = false;
						// 循环商品范围
						for (let k in this.couponList[i].product_scope) {
							// 如果存在商品范围
							if( this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
						}
						// 范围内的做计算
						if( isScope )  totalPrice = this.$decimal.mul(this.productInfo.price,this.quantity);
					}else{
						// 折扣券以及满减券的话，计算价格
						totalPrice				= this.$decimal.mul(this.productInfo.price,this.quantity);
					}
					// 如果是可以用的话
					if( parseFloat(totalPrice.toFixed())  >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay,1).toFixed()) ){
						// 扣减金额
						let rebatePrice = this.$decimal.mul(1,0);
						// 满减
						if( this.couponList[i].rebate_type == 1 ){
							// 计算扣减数据
							rebatePrice 	= this.$decimal.mul(this.couponList[i].rebate,1);
							// 替换文字
							this.couponUsed = "￥-" + rebatePrice.toFixed(2);
						}
						// 折扣
						if( this.couponList[i].rebate_type == 2 ){
							// 折扣
							rebatePrice 	= this.$decimal.mul(totalPrice,this.couponList[i].rebate);
							// 减数
							rebatePrice	 	= this.$decimal.sub(totalPrice,rebatePrice.mul(0.1));
							// 替换文字
							this.couponUsed = "￥-" + rebatePrice.toFixed(2);
						}
						//  赠品
						if( this.couponList[i].rebate_type == 3 ){
							// 替换文字
							this.couponUsed = "送" + ( this.couponList[i].rebate_scope.length ? this.couponList[i].rebate_scope[0].product_name: "");
						}
						// 小数点保留
						this.rebatePrice  	= rebatePrice.toFixed(2);
					}
				}
			},
			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];
							}
						}
					}
				});
			},
			// 客服显示
			openAddFollow(){
				// 返回结果
				this.followQrcode 		= this.$checkAccess.getFollowQrcode();
				// 有图才展示
				if( this.followQrcode )	this.$refs.addFollow.open('center');
			},
			closeAddFollow(){
				this.$refs.addFollow.close();
			},
			// 保存图片
			saveImage(){
				var that = this;
				// 下载远程图片后保存到相册
				uni.downloadFile({
					url: this.followQrcode,
					success:function(res) {
						if(res.statusCode == 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success:function(res) {
									uni.showToast({title:"保存成功",icon:'none'});
									that.$refs.addFollow.close();
								},
								fail:function(err){
									
								}
							});
						}
					},
				})
			},
			// 设置默认sku
			// setDefaultSpec(){
			// 	// 如果列表存在
			// 	if( this.productInfo.product_sku.length ){
			// 		//如果列表大于1
			// 		if(this.productInfo.product_sku.length > 1){
			// 			//循环sku列表
			// 			for(var k = 0 ; k < this.productInfo.product_sku.length;k++ ){
			// 				//全部规格都已经下架
			// 				if(k === this.productInfo.product_sku.length){
			// 					uni.showToast({
			// 						title:"当前商品已全部下架",
			// 						icon:"error"
			// 					})
			// 					this.productInfo.stock = 0;
			// 					return;
			// 				}
			// 				// 获取第一个没有下架的sku作为默认值
			// 				if(this.productInfo.product_sku[k].status === 0){
			// 					var attr_ids = this.productInfo.product_sku[k].attr_ids.split(",");
			// 					break;
			// 				}
			// 			}
			// 			// 循环规格列表
			// 			for ( let i in this.productInfo.product_attr ) {
			// 				// 再循环属性
			// 				for (let j in this.productInfo.product_attr[i].attr_list) {
			// 					// 如果不等于id
			// 					if( attr_ids.includes(this.productInfo.product_attr[i].attr_list[j].id + '') ){
			// 						// 设置选中
			// 						this.productInfo.product_attr[i].attr_list[j].active = 1;
			// 					}else{
			// 						this.productInfo.product_attr[i].attr_list[j].active = 0;
			// 					}
			// 				}
			// 			}
			// 			// 产品价格修改
			// 			this.productInfo.price = this.productInfo.product_sku[k].price;
			// 			// 产品规格修改
			// 			// this.productInfo.spec = this.productInfo.product_sku[k].attr_names;
			// 			// 产品库存
			// 			this.productInfo.stock = this.productInfo.product_sku[k].stock;
			// 			// 产品SKU
			// 			this.sku_id 		= this.productInfo.product_sku[k].id;
			// 			// 计算价格
			// 			this.priceHandler();
			// 			// 优惠券是否可用
			// 			this.checkCoupon();
			// 		}else{
			// 			var attr_ids = this.productInfo.product_sku[0].attr_ids.split(",");
			// 			// 循环规格列表
			// 			for ( let i in this.productInfo.product_attr ) {
			// 				// 再循环属性
			// 				for (let j in this.productInfo.product_attr[i].attr_list) {
			// 					// 如果不等于id
			// 					if( attr_ids.includes(this.productInfo.product_attr[i].attr_list[j].id + '') ){
			// 						// 设置选中
			// 						this.productInfo.product_attr[i].attr_list[j].active = 1;
			// 					}else{
			// 						this.productInfo.product_attr[i].attr_list[j].active = 0;
			// 					}
			// 				}
			// 			}
			// 			// 产品价格修改
			// 			this.productInfo.price = this.productInfo.product_sku[0].price;
			// 			// 产品规格修改
			// 			this.productInfo.spec = this.productInfo.product_sku[0].attr_names;
			// 			// 产品库存
			// 			this.productInfo.stock = this.productInfo.product_sku[0].stock;
			// 			// 产品SKU
			// 			this.sku_id = this.productInfo.product_sku[0].id;
			// 			// 计算价格
			// 			this.priceHandler();
			// 			// 优惠券是否可用
			// 			this.checkCoupon();
			// 		}
			// 	}
			// },
			// 属性变更
			attrChange(spec_index,attr_index){
				// 判断当前属性是否选择。选择的跳过
				if (this.productInfo.product_attr[spec_index].attr_list[attr_index].active) return;
				// 先记录当前规格下所有属性原来的active状态
				let originalActiveStates = {};
				for (let i in this.productInfo.product_attr[spec_index].attr_list) {
					originalActiveStates[i] = this.productInfo.product_attr[spec_index].attr_list[i].active;
				}
				//循环规格下的属性
				for ( let i in this.productInfo.product_attr[spec_index].attr_list ) {
					// 全部改为未选中
					this.productInfo.product_attr[spec_index].attr_list[i].active = 0;
				}
				//选择选项
				this.productInfo.product_attr[spec_index].attr_list[attr_index].active = 1;
				//选中的规格
				 var attr_ids = [];
				
				// 循环规格
				for ( let i in this.productInfo.product_attr ) {
					// 再循环属性
					// for (let j in this.productInfo.product_attr[i].attr_list) {
					// 	// 如果选中的
					// 	if( this.productInfo.product_attr[i].attr_list[j].active ){
					// 		this.attr_ids.push(this.productInfo.product_attr[i].attr_list[j].id);
					// 	}
					// }
					 for (let j in this.productInfo.product_attr[i].attr_list) {
						if (this.productInfo.product_attr[i].attr_list[j].active) {
							if (this.productInfo.product_attr[i].spec_id === 1) {
								attr_ids.push({ spec_id: 1, id: this.productInfo.product_attr[i].attr_list[j].id });
							} else if (this.productInfo.product_attr[i].spec_id === 2) {
								attr_ids.push({ spec_id: 2, id: this.productInfo.product_attr[i].attr_list[j].id });
							}
						}
					}
				}
				// 转成字符串
				// var attrids	= this.attr_ids.join(",");
				// 转成字符串
				let colorAttridsStr = attr_ids.filter((item) => item.spec_id === 1).map((item) => item.id).join(",");
				let sizeAttridsStr = attr_ids.filter((item) => item.spec_id === 2).map((item) => item.id).join(",");
				let	isSelectionComplete = 0;
	
				// 判断是否两个规格下的属性都已选中
				if (colorAttridsStr && colorAttridsStr.length > 0 && sizeAttridsStr && sizeAttridsStr.length > 0) {
					this.hasValidSpecSelected = true;
					isSelectionComplete = 1;
				} else {
					this.hasValidSpecSelected = false;
					isSelectionComplete = 0;
				}
				
				// 如果当前点击的属性对应的SKU状态为未下架（初始化为0）
				let currentSKUStatus = 0;
				// 匹配规格
				if( this.productInfo.product_sku.length ){
					// 是否有对应的SKU
					let  haveSku	= false;
					// 先检查colorAttridsStr和sizeAttridsStr是否都已正确生成
					if (colorAttridsStr && colorAttridsStr.length > 0 && sizeAttridsStr && sizeAttridsStr.length > 0) {
						// 循环sku
						for (let i in this.productInfo.product_sku) {
							// 如果sku不匹配
							if( this.productInfo.product_sku[i].attr_ids != colorAttridsStr + "," + sizeAttridsStr ) continue;
							// 设置有SKU
							haveSku	= 1;
							// 获取当前匹配到的SKU的状态
							currentSKUStatus = this.productInfo.product_sku[i].status;
							// 如果商品已经下架（status等于1），则恢复当前规格下所有属性原来的active状态
							if(currentSKUStatus === 1){
								uni.showToast({title:"该规格已下架",icon:"none"});
								for (let k in originalActiveStates) {
									this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
								}
								continue;
							}
							// 如果商品没有库存
							if( this.productInfo.product_sku[i].stock <= 0 ){
								uni.showToast({title:"该规格库存不足",icon:"none"});
								for (let k in originalActiveStates) {
									this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
								}
								continue;
							}
							// console.log("我怎么没有执行？");
							// 产品价格修改
							this.productInfo.price = this.productInfo.product_sku[i].price;
							// 产品规格修改
							this.productInfo.spec = this.productInfo.product_sku[i].attr_names;
							// 产品库存
							this.productInfo.stock = this.productInfo.product_sku[i].stock;
							// 产品SKU
							this.sku_id = this.productInfo.product_sku[i].id;
							// 计算价格
							this.priceHandler();
							// 优惠券是否可用
							this.checkCoupon();
						}
					}	
					// 如果没有对应的SKU
					if( !haveSku && isSelectionComplete ){
						uni.showToast({title:"该规格已下架",icon:"none"});
						for (let k in originalActiveStates) {
							this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
						}
					}
				}
			},
			//specPopup关闭时重置数据
			onSpecPopupClose(){
				let colorSpecAttrList = this.productInfo.product_attr.find((spec) => spec.spec_id === 1).attr_list;
				let sizeSpecAttrList = this.productInfo.product_attr.find((spec) => spec.spec_id === 2).attr_list;
				//重置上一次规格全部选中
				this.hasValidSpecSelected = false;
				// 恢复颜色分类规格下属性的原始active状态
				for (let i in colorSpecAttrList) {
					 colorSpecAttrList[i].active = 0;
				}
				// 恢复尺寸规格下属性的原始active状态
				for (let i in sizeSpecAttrList) {
					 sizeSpecAttrList[i].active = 0;
				}		
				this.$refs.specPopup.close()
			},
			//只有一组sku默认规格是否已下架
			defaultSkuStatus(){
				if(this.productInfo.product_sku.length){
					if(this.productInfo.product_sku[0].status === 1){
						uni.showToast({
							title:"该规格已下架",
							icon:"none",
						});
						this.productInfo.stock = 0;
						var attr_ids = this.productInfo.product_sku[0].attr_ids.split(",");
						// 循环规格列表
						for ( let i in this.productInfo.product_attr ) {
							// 再循环属性
							for (let j in this.productInfo.product_attr[i].attr_list) {
								// 如果不等于id
								if( attr_ids.includes(this.productInfo.product_attr[i].attr_list[j].id + '') ){
									// 取消选中
									this.productInfo.product_attr[i].attr_list[j].active = 0;
								}
							}
						}
						return;
					}
				}
			}
		}
	}
</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;
			overflow: hidden;
			.spec_name{
				float: left;
			}
			.product_stock{
				float: right;
			}
		}
		.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_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{
			float: right;
			width: 280rpx;
			height: 80rpx;
			display: block;
			color: #FFFFFF;
			font-size: 30rpx;
			overflow: hidden;
			line-height: 80rpx;
			padding: 0rpx 0rpx;
			text-align: center;
			margin-right: 35rpx;
			background-color: #E03519;
			border-radius: 0rpx;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}
		.show_car{
			float: right;
			width: 280rpx;
			height: 80rpx;
			display: block;
			color: #FFFFFF;
			font-size: 30rpx;
			overflow: hidden;
			line-height: 80rpx;
			padding: 0rpx 0rpx;
			text-align: center;
			background-color: #F59A23;
			border-radius: 0rpx;
			border-top-left-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
		}
		.to_car{
			float: left;
			width: 100rpx;
			height: 60rpx;
			display: block;
			text-align: center;
			margin-left: 35rpx;
			padding-top: 10rpx;
			.car_icon{
				float: left;
				width: 60rpx;
				height: 60rpx;
				display: block;
			}
		}
	}
	.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{
						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;
				}
			}
			.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;
					}
				}
			}
			.select_sku{
				font-size: 28rpx;
				padding: 20rpx 35rpx;
				margin-bottom: 20rpx;
				.scroll_max{
					height: 440rpx;
					.product_attr{
						display: block;
						overflow: hidden;
						margin-bottom: 20rpx;
						.spec_name{
							display: block;
							height: 40rpx;
							font-size: 28rpx;
							line-height: 40rpx;
						}
						.arrt_list{
							display: block;
							overflow: hidden;
							background-color: #F5F5F5;
							.arrt_option{
								float: left;
								font-size: 28rpx;
								line-height: 40rpx;
								text-align: center;
								border-radius: 6rpx;
								padding: 10rpx 20rpx;
								margin: 10rpx 0rpx;
								margin-right: 20rpx;
								background-color: #EEEEEE;
							}
							.arrt_option.active {
							  color: #FFFFFF;
							  background-color: #fE6000;
							}
						}
					}
				}
			}
			.to_select_coupon{
				font-size: 28rpx;
				padding: 10rpx 35rpx;
				margin-bottom: 20rpx;
				.coupon_deduction{
					color: red;
					float: right;
				}
			}
			.order_price{
				font-size: 28rpx;
				text-align: right;
				margin: 0rpx 35rpx;
				padding: 10rpx 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: 60rpx;
				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>