购物车选规格

<template>
	<view class="diglog" v-if="shopInfo">
		<view class="canshu">
			<image :src="spec_image" style="height: 170rpx; width: 170rpx; margin-right: 10px;">
			</image>
			<view class="right">
				<view class="title">
					{{shopInfo.goods_name}}
				</view>
				<view class="yixuan">
					已选：{{skuShop}}
				</view>
				<view class="money">
					<view class="beforeMoney">
						<span>￥</span>
						{{specInfo?specInfo.goods_price:shopInfo.goods_price}}
					</view>
					<view class="afterMoney">
						￥
						{{specInfo?specInfo.line_price:shopInfo.line_price}}
					</view>
				</view>
			</view>
		</view>
		<view class="guige">
			<view v-for="(item,index) in shopInfo.spec_list" :key="index" class="item">
				<view class="title">
					{{item.spec_name}}
				</view>
				<view class="all">
					<view v-for="(ite,inde) in item.value" :key="inde" :class="sku[index]==inde?'ite ite_active':'ite'"
						@click="swSku(index,inde)">
						{{ite.spec_value}}
					</view>
				</view>
			</view>
			<view class="num">
				<view class="goumai">
					购买数量
				</view>
				<view class="right">
					<uni-number-box @change="changeValue" :min="1" :max="Number(shopInfo.stock)" />

				</view>
			</view>
		</view>
		<view class="btn">
			<view class="addCart" @click="addcart">
				加入购物车
			</view>
			<view class="mai" @click="confrim1">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodDetail,
		addCart,
		getSpecGood,
		store_cartindex,
		buyConfirm
	} from '@/assets/api/shop.js'
	export default {
		props: {
			goods_id: Number,
			store_id: String
		},
		data() {
			return {
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#666666',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#004AD3',
						color: '#fff'
					}
				],
				show: false,
				num: 1,
				shopInfo: null, //商品详情
				sku: [], //选择商品规格标识
				skuShop: '', //已选商品参数文字
				page: 1,
				skuNum: 1, //商品数量,
				spec_value_id: 0, //选择的规格id，
				specInfo: null, //规格商品详情
				spec_image: '', //选择规格商品图片
			}
		},
		created() {

			this.goodDetail()
		},
		methods: {

			// 商品详情
			async goodDetail() {
				let that = this
				let res = await goodDetail({
					goods_id: this.goods_id,
					store_id: this.store_id
				})
				if (res.data.code == 1) {
					this.shopInfo = res.data.data
					this.spec_image = res.data.data.default_spec_good.spec_image
					this.spec_value_id = res.data.data.default_spec_good.goods_spec_id
					// this.shopInfo.spec_list.forEach(item => {
					// 	that.sku.push(0)
					// })
					// this.skuCon(that.sku)
					// this.getSpecGood(that.sku)
					// console.log(this.spec_value_id)
				}

			},
			// 选择商品规格
			swSku(index, inde) {
				// 更新数组
				this.$set(this.sku, index, inde);
				this.skuCon(this.sku)
				if (this.sku.length == this.shopInfo.spec_list.length) {
					this.getSpecGood(this.sku)
				}
				// this.getSpecGood(this.sku)
			},
			// 规格商品详情
			async getSpecGood(arr) {

				let array = []
				arr.forEach((item, index) => {
					array.push(this.shopInfo.spec_list[index].value[item].id)
				})
				this.spec_value_id = array.toString().replaceAll(",", "_")
				let data = {
					goods_id: Number(this.goods_id),
					spec_value_id: this.spec_value_id
				}
				let res = await getSpecGood(data)
				if (res.data.code == 1) {
					// console.log(res.data.data)
					this.spec_value_id = res.data.data.goods_spec_id
					this.specInfo = res.data.data
				}
			},
			// 选择商品文字
			skuCon(arr) {
				let that = this
				let str = ''
				arr.forEach((item, index) => {
					str += this.shopInfo.spec_list[index].value[item].spec_value + ';'
				})
				this.skuShop = str
				this.skuShop = this.skuShop.slice(0, this.skuShop.length - 1)
				this.$emit('skuValue', this.skuShop)
			},
			// 规格加入购物车
			async addcart() {
				if (this.sku.length != this.shopInfo.spec_list.length) {
					uni.showToast({
						icon: 'none',
						title: '请选择商品规格'
					})
					return
				}
				let res = await addCart({
					store_id: this.store_id,
					goods_spec_id: this.spec_value_id,
					number: this.skuNum
				})
				if (res.data.code == 1) {
					uni.showToast({
						icon: 'none',
						title: res.data.msg,
						success: () => {
							this.$emit('skuClose', true)
							this.storeCartindex()
						}
					})
				}
			},
			// 规格立即购买
			confrim1() {
				if (this.sku.length != this.shopInfo.spec_list.length) {
					uni.showToast({
						icon: 'none',
						title: '请选择商品规格'
					})
					return
				}


				this.$emit('skuClose', true)
				uni.navigateTo({
					url: `/pages/order/confrim?ids=${this.spec_value_id}&store_id=${this.store_id}&number=${this.skuNum}&status=${1}`
				})
			},
			// 加减数量
			changeValue(e) {
				this.skuNum = e
			},
		}
	}
</script>

<style scoped lang="scss">
	.diglog {
		padding: 10px;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.canshu {
			display: flex;
			padding: 10px 0;

			// .right {
			// 	width: calc(100% - 300rpx);
			// }

			.title {
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 30rpx;

				font-weight: bold;
				color: #333333;
			}

			.yixuan {
				font-size: 26rpx;

				font-weight: 500;
				color: #999999;
			}

			.money {
				display: flex;
				margin-top: 10px;

				.beforeMoney {
					font-size: 20px;

					font-weight: bold;
					color: #FF3210;
				}

				.afterMoney {
					font-size: 24rpx;

					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
					margin-left: 10px;
				}
			}
		}

		.guige {
			margin: 10px 0;

			.item {
				margin: 10px 0;

				.title {
					width: auto;
					height: 33rpx;
					font-size: 30rpx;

					font-weight: bold;
					color: #333333;
					margin: 10px 0;
				}

				.all {
					display: flex;
					flex-wrap: wrap;

					.ite {
						min-width: 100rpx;
						height: 50rpx;
						background: #F3F4F6;
						border-radius: 40rpx;
						font-size: 28rpx;
						color: #666666;
						text-align: center;
						line-height: 50rpx;
						margin: 5px 0;
						margin-right: 20rpx;
						padding: 5rpx 10rpx;
					}

					.ite_active {
						background: #E9F1FF;
						border: 1px solid #004AD3;
						color: #004AD3;
					}
				}
			}

			.num {
				display: flex;
				justify-content: space-between;

				.goumai {
					font-size: 34rpx;

					font-weight: bold;
					color: #333333;
				}

				.right {
					display: flex;
					text-align: center;
					align-items: center;

					.add {
						width: 40rpx;
						height: 40rpx;
						background: #FFFFFF;
						border: 1px solid #004AD3;
						border-radius: 10rpx;
						line-height: 20rpx;
					}

					.shuliang {
						margin: 0 5px;
					}

					.reduce {
						width: 40rpx;
						height: 40rpx;
						background: #004AD3;
						border-radius: 10rpx;
						line-height: 46rpx;
					}
				}
			}


		}

		.btn {
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			display: flex;
			margin: 20px 0;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;

			.addCart {
				width: 345rpx;
				height: 80rpx;
				background: #666666;
				border-radius: 40rpx 0rpx 0rpx 40rpx;
			}

			.mai {
				width: 345rpx;
				height: 80rpx;
				background: #004AD3;
				border-radius: 0rpx 40rpx 40rpx 0rpx;
			}
		}

	}
</style>