high-mini/components/cart-choose/cart-choose.vue

<template>
	
	<!-- v-if="specificationList.length>0" -->

		<view class="choose-detail" >
			<view class="choose-top" >
				<view class="marRight10">
					<image  v-if="specificationList[chooseIndex].showImg" :src="imageUrl+specificationList[chooseIndex].showImg" @click="perImage(chooseIndex,[imageUrl+specificationList[chooseIndex].showImg])"  class="img choose-img " mode="aspectFill"></image>
				</view>
				<view class="choose-price  marRight10">
					<text class="" style="text-decoration: line-through;">原价¥{{specificationList[chooseIndex].originalPrice}}</text>
				</view>
				<view class="choose-less-price fontwig6 ">
					<text class="">现价 ¥{{specificationList[chooseIndex].price}}</text>
				</view>
			</view>
			
			<!-- 地址 -->
			<!-- <view class="select-address  width100 mart10 " @click="goAddress">
				<view v-if="true" class="address-left font14">
					<view class=" " >
						重庆市渝中区不是的聚钓具偶家
					</view>
					<view class="color999 mart3" >
						<text class="address-name">明明</text>
						<text class="address-phone margle10">13563256324</text>
					</view>
				</view>
				
				<view v-else class="address-left font14">
					<view class="paddtop10 color999 paddbotm10">
						请选择地址
					</view>
				</view>
				
				<view class="icon-ymt to-right"></view>	
			</view> -->
			
			<!-- 选分类 -->
			<view class="choose-bottom marb10">
				<!-- 类型分类 -->
				<view class="choose-bottom-title fontwig6 font14 mart10">
					选择规格 
				</view>
				<view class="choose-select">
					<view v-for="(item,index) in specificationList" :key="index" :data-index="index"  :class="'choose-item padleft10 mart10 '+ (chooseIndex == index ? 'choose-active':'')" @click="select(index)">
						<image v-if="item.showImg" :src="imageUrl+item.showImg" @click.stop="perImage(0,[imageUrl+item.showImg])" class="img "></image>
						<view class="padleft15 paddtright15  font13"> {{item.name}}</view>
						<view class="padleft15 paddtright5 fontwig6 font13 fcor999">￥{{item.price}}</view>
						<view class="padleft15 paddtright5  font13 ">库存{{item.stock}}</view>
						<view v-if="item.stock==0" class="qh failureColor" style="">缺货</view>
					</view>
					
					
				</view>
				
				<!-- 数量分类 -->
				<view class="choose-bottom-title  paddbotm10 fontwig6 font14  mart15 choose-num">
					<view class="">购买数量</view> 
					<uni-number-box  v-model="chooseNumber" :disabled="specificationList[chooseIndex].stock==0" :min="1" :max="specificationList[chooseIndex].stock || 9999999"  @noMoreLess="noMoreLess" @noMore="noMore" @change="changeNumValue" />
				</view>
			</view>
			
			
			<view class="choose-cart" v-if="specificationList[chooseIndex].stock==0">
				<view class="choose-way" >
					<view class="fcorfff way1 bgcolor-qh" @click="noStock">
						暂无库存
					</view>
				</view>
			</view>
			<view class="choose-cart" v-else>
				
				<view class="choose-way" v-if="status == 1">
					<view class="fcorfff way bgcolor-left" @click="toCart">
						加入购物车
					</view>
					<view class="fcorfff way bgcolor-ri" @click="toBuy">
						立即购买
					</view>
				</view>
				<view class="choose-way" v-if="status == 0">
					<view class="fcorfff way1 bgcolor-left" @click="toCart">
						加入购物车
					</view>
				</view>
				<view class="choose-way" v-if="status == 2">
					<view class="fcorfff way1 bgcolor-left" @click="toBuy">
						立即购买
					</view>
				</view>
			</view>
			
			
		</view>
	
</template>

<script>
	import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue'
	import {insertShoppingCart,getShoppingCartList} from '@/Utils/physicalObject.js'
	const app = getApp();
	export default {
		data(){
			return{
				imageUrl: app.globalData.imgUrl,//图片地址
				
				chooseIndex:0,
				
				chooseNumber:1,//数量选择
				// imgList:[],
			}
		},
		props:{
			specificationList:{
				type:Array,
				default() {
					return []
				},
			},
			// 0,加入购物车。1，加入购物车，领券购买
			status:{
				type:Number,
				default:0,
			},
			goodsDetail:{
				type:Object,
				default() {
					return {}
				}
			}
		},
		watch:{
			specificationList:{
				handler(n,o){
					this.chooseNumber = 1;
					this.chooseIndex = 0;
					for(let i=0;i<n.length;i++){
						if(n[i].stock>0){
							this.chooseIndex = i;
							// console.log(this.chooseIndex,"this.chooseIndex")
							return
						}		
					}
					
					if(this.specificationList.length>0&&this.specificationList[this.chooseIndex].stock==0){
						this.chooseNumber = 0;
					}else{
						this.chooseNumber = 1;
					}
	
				},
				deep:true,
				immediate: true, // 初始化监听
			}
		},
		components:{
			"uni-number-box":uniNumberBox
		},
		computed:{
			imgList(){
				
				if(this.specificationList.length>0){
					let arr =[];
					this.specificationList.map(item=>{
						
						arr.push(this.imageUrl+item.showImg)
					})
					
					return arr;
				}else{
					return []
				}
			}
		},
		methods:{
			
			//查看大图
			perImage(index,imgList) {
				
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			/* 暂无库存 */
			noStock(){
				uni.showToast({
				  title:'暂无库存哟,看看别的吧!',
				  icon: 'none'
				})
			},
			
			changeNumValue(v){
				this.chooseNumber = v;
			},
			noMoreLess(){
				uni.showToast({
				    icon: 'none',
				    title: "低于最少购买数量",
				    duration: 1000
				});
			},
			noMore(){
				uni.showToast({
				    icon: 'none',
				    title: "超出最大购买数量",
				    duration: 1000
				});
			},
			//加入购物车
			toCart(){
				let params={
					goodsId:this.specificationList[this.chooseIndex].goodsId,
					num:this.chooseNumber,
					sku:this.specificationList[this.chooseIndex].id,
					whetherCheck:false
				}
				
				insertShoppingCart(params).then(async res=>{
					let title ;
					if (res.return_code == '000000') {
						title = "加入购物车成功";	
						this.$emit("refreshCartNum")
							
					}else{
						title = res.return_msg;
					}
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 2000
					})		
					
					this.chooseNumber = 1;
					
					this.$emit("close")
					
				})
				
				
			},
			
			//立即购买
			toBuy(){
				
				console.log(this.specificationList[this.chooseIndex],this.goodsDetail)
				
			let _this = this	
			let obj =[{	
				goodsId:_this.specificationList[this.chooseIndex].goodsId,
				img: _this.specificationList[this.chooseIndex].showImg,
				num: _this.chooseNumber,
				price: _this.specificationList[this.chooseIndex].price,
				sku: _this.specificationList[this.chooseIndex].id,
				skuName: _this.specificationList[this.chooseIndex].name,
				title: _this.goodsDetail.name,
				originalPrice:_this.specificationList[this.chooseIndex].originalPrice
				}]
				obj = JSON.stringify(obj)
				
				uni.navigateTo({
					url: '/physical-merchants/settleAccounts/settleAccounts?goodsList='+obj
				})
				
				// this.$emit("close")
			},
			//选择商品规格change事件
			select(index){
				this.chooseIndex = index;
				if(this.specificationList[this.chooseIndex].stock==0){
					this.chooseNumber = 0;
				}else{
					this.chooseNumber = 1;
				}
			},
			
			// 去地址页
			goAddress(){
				uni.navigateTo({
					url:"/physical-merchants/address/address"
				})
			},
			
			
		}
		
	}
</script>

<style lang="scss" scoped>

// 失效
.failureColor{
	color: #c5c5c5;
}

/* 缺货 */
.qh{
	position: absolute;
	top: -15rpx;
	right: -30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	width: 60rpx;
	height:30rpx;
	line-height:30rpx ;
	font-size: 20rpx;
}

// //地址
 .select-address{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
 }
	
	
	
.br{
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 20rpx;
}
.bg-white{
	background-color: #fff;
}

.price-tag{
	font-family:Arial;
	font-weight: bold;
}
	
	
	
	
	
.choose-detail {
	position: relative;
	padding: 20rpx 20rpx 100rpx 20rpx;
	//选择
	.choose-top {
		display: flex;
		align-items: center;
		height: 160rpx;
		color: #666666;
		.choose-img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
			
		}
		.choose-price {
			
		}
		.choose-less-price {
			display: inline-block;
			height: 50rpx;
			line-height: 50rpx;
			padding: 10rpx 20rpx;
			color: white;
			background-color: #F95100;
			border-radius: 45rpx;
		}
	}
	
	
	.choose-bottom {
		.choose-bottom-title{
			
		}
		.choose-select {
			.choose-item{
				position: relative;
				display: flex;
				align-items: center;
				height: 60rpx;
				border-radius: 20rpx;
				// overflow: hidden;
				background-color:#F6F6F6;
				border:1px solid transparent;
				width: fit-content;
				.img{
					width: 60rpx;
					height: 60rpx;
					border-radius: 20rpx;
				}
			}
			.choose-active{
				border-color: #F95100;
			}
		}
		
		.choose-num{
			display: flex;
			height: 60rpx;
			justify-content: space-between;
			align-items: center;
			
			.choose-change{
				width: 240rpx;
				background-color:#F4F4F4;	
				height: 100%;
				border-radius: 30rpx;
				display: flex;
				.number{
					// width: 80rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #333333;
					font-size: 30rpx;
				}
				.width140{
					width: 120rpx !important;
				}
				.wid25{
					width: 60rpx !important;
					background-color:#f8f8f8 ;
					border-radius: 30rpx;
				}
				
			}
		}
	}
	
	.choose-cart{
		position: fixed;
		bottom: 0;
		width: calc(100% - 40rpx);
		padding-bottom: 20rpx;
		.choose-way{
			height: 80rpx;
			width: 100%;
			border-radius: 40rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			
			
			.way{
				width: 50%;
				height:80rpx;
				line-height:80rpx;
				text-align: center;
			}
			
			.way1{
				width: 100% ;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
			
			.bgcolor-ri{
				background-color:  #FD5100;
			}
			.bgcolor-left{
				background-color:  #FF8E01;
			}
			.bgcolor-qh{
				background-color: #c5c5c5;
			}
		}
	}
	
}
</style>