book-hi/pages-mall/components/goods/goods-select-sku.vue

<template>
	<u-popup v-model="show" mask mode="bottom" mask-close-able closeable border-radius="16" safe-area-inset-bottom>
		<view class="info">
			<view class="pic"><u-image :src="data.cover" width="190rpx" height="190rpx"></u-image></view>
			<view class="desc">
				<view class="price">
					<text>￥</text>
					<text>{{ selectdSku.price_selling }}</text>
				</view>
				<view class="select">
					<text>已选</text>
					<text>{{ selectdSku.difference }}</text>
				</view>
			</view>
		</view>
		<view class="sku">
			<view class="title">规格</view>
			<view class="list">
				<view class="item" :class="{ 'select': item.id == selectdSku.id,'disable':(item.stock_total<=0||Number(item.price_selling)<=0)}" v-for="(item, index) in data.sku" :key="index" @click="selectSkuFun(index)">
					{{ item.difference }}
					<span class="price">(优惠价：&yen;{{item.price_selling}})</span>
				</view>
			</view>
		</view>
		<view class="num">
			<view class="title">数量</view>
			<!-- :disabled-input="true" -->
			<!-- {{selectdSku.stock_total}} -->
			<u-number-box v-model="num" :min="1" :max="maxBuy"  @change="changeNum"></u-number-box>
		</view>
		<view class="operate">
			<view class="soldOutBtn btn shu-elip-1" v-if="selectdSku.stock_total<=0||Number(data.price_selling)<=0">已售罄</view>
			<template v-else>
				<view class="joinCartBtn btn shu-elip-1" @click="addCartHandle">加入购物车</view>
				<view class="buyBtn btn shu-elip-1" @click="bugNowHandle">立即购买</view>
			</template>
		</view>
	</u-popup>
</template>

<script>
export default {
	props:{		
		expressInfo: {
			type: Object,
			default: ()=>{
				return {max_buy_nums:-1}
			}
		}
	},
	computed:{
		maxBuy(){
			if(this.expressInfo.max_buy_nums==-1 || this.expressInfo.max_buy_nums>Number(this.selectdSku.stock_total)){
				return Number(this.selectdSku.stock_total)
			}else{
				return this.expressInfo.max_buy_nums;
			}
		}
	},
	data() {
		return {
			show: false,
			// 数据源
			data: {},
			
			// 数量
			num: 1,
			selectdSkuIndex:0,
			selectdSku:{
				id:'',
				difference:'',
				price_selling:null,
				stock_total:0,
			},
		};
	},
	methods: {
		// 打开popup
		open(data, index) {
			console.log(333);
			this.show = true;
			this.data = data;
			// this.selectSkuFun();
			// this.selectdSku = selectSku;
		},
		initSkuFun(data){
			this.data = data;
			// 默认
			this.selectdSkuIndex = this.data.sku[1]?1:0;
			if(this.data.sku[this.selectdSkuIndex].stock_total<=0&&this.data.sku.findIndex(e=>e.stock_total>0)>-1){
				this.selectdSkuIndex = this.data.sku.findIndex(e=>e.stock_total>0);
				
			}
			this.selectSkuFun(this.selectdSkuIndex);
		},
		// 切换sku
		selectSkuFun(index) {
			console.log(index);
			// if(this.data.sku[selI].stock_total<0||Number(this.data.sku[selI].price_selling)<=0){
			// 	return false;
			// }
			this.selectdSkuIndex = index;
			this.selectdSku = this.data.sku[index];
			this.$emit('change', this.selectdSku);
		},

		// 数量改变时
		changeNum(e) {},

		// 关闭
		close() {},

		// 加入购物车
		addCartHandle() {
			// uni.showToast({
			// 	title: '添加购物车成功',
			// 	icon: 'none'
			// });
			this.$u.api.addCartAjax({
				goods_id:this.data.id,
				nums: this.num,
				sku_id:this.selectdSku.id,//1是测试，应该传入skuId，外层没有返回，需要接口返回一下
			}).then(({code})=>{
				if(code==1){
					this.$u.toast('添加购物车成功');
					this.show = false;
					// setTimeout(()=>{
					// 	this.show = false;
					// },800)
				}
			})
		},

		// 立即购买
		bugNowHandle() {
			const token = uni.getStorageSync('token');
			if(!token){
				uni.navigateTo({
					url:'/pages/login/index'
				})
				return false;
			}
			// 数组形式，兼容多商品同时购买
			let orderInfo = [
				{
					id: this.data.id,
					cover: this.data.cover,
					isbn:this.data.isbn,
					price_selling:this.data.price_selling,
					publish:this.data.publish,
					title:this.data.title,
					nums:this.num,					
					selectdSku:this.selectdSku,
				}
			]
			// return;
					// expresstemplate:this.data.expresstemplate
			uni.navigateTo({
				url: '/pages-mall/pages/order/submit?orderInfo='+encodeURIComponent(JSON.stringify(orderInfo))
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.info {
	padding: 30rpx 30rpx 0 30rpx;
	display: flex;
	align-items: flex-end;
	.pic {
		margin-right: 30rpx;
	}
	.desc {
		.price {
			margin-bottom: 20rpx;
			text:nth-child(1) {
				font-size: 24rpx;
				color: $app-theme-text-money-color;
				vertical-align: bottom;
			}
			text:nth-child(2) {
				font-size: 36rpx;
				color: $app-theme-text-money-color;
				vertical-align: bottom;
			}
		}
		.select {
			text:nth-child(1) {
				font-size: 24rpx;
				color: $app-theme-card-gray-deep-color;
				margin-right: 20rpx;
			}
			text:nth-child(2) {
				font-size: 24rpx;
				color: $app-theme-text-black-color;
			}
		}
	}
}
.sku {
	padding: 30rpx 30rpx 0 30rpx;
	.title {
		font-size: 28rpx;
		color: $app-theme-text-black-color;
		margin-bottom: 16rpx;
	}
	.list {
		// display: flex;
		// justify-content: flex-start;
		// align-items: center;
		// flex-wrap: wrap;
		.item {
			height: 80rpx;
			padding: 0 30rpx;
			margin-bottom: 24rpx;
			// margin-right: 20rpx;
			// background-color: $app-theme-sku-gray-color;
			font-size: 28rpx;
			// color: $app-theme-text-black-color;
			border: 1rpx solid #eee;
			color: $app-theme-color;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 10rpx;
			&.select {
				// color: $app-theme-color;
				font-weight: bold;
				border: 1rpx solid $app-theme-color;
			}
			&.disable{
				color: #ddd;
			}
		}
	}
}
.num {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title {
		font-size: 28rpx;
		color: $app-theme-text-black-color;
	}
}
.operate {
	display: flex;
	align-items: center;
	height: 100rpx;
	padding-left: 20rpx;
	/* /deep/button {
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 0 !important;
		&::after {
			border: initial;
		}
	} */
	// .btn {
	// 	min-width: 220rpx;
	// 	line-height: 66rpx;
	// 	padding: 0 30rpx;
	// 	border-radius: 36rpx;
	// 	color: #ffffff;
	// 	margin-right: 20rpx;
	// 	text-align: center;
	// 	flex: 1;
	// 	padding: 0 30rpx;
	// }
	// .soldOutBtn{
	// 	background-color: $app-theme-nobuy-bg-color;
	// }
	// .joinCartBtn {
	// 	background-color: $app-theme-joincart-bg-color;
	// }
	// .buyBtn {
	// 	background-color: $app-theme-buybtn-bg-color;
	// }
}
</style>