high-mini/pages/classify/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,imgList)"  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  ">
					<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">
				<!-- 类型分类 -->
				<view class="choose-bottom-title fontwig6 font13 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" 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>
					
					
				</view>
				
				<!-- 数量分类 -->
				<view class="choose-bottom-title fontwig6 font13 mart20 choose-num">
					<view class="">购买数量</view> 
					<uni-number-box style="transform: scale(0.9);" v-model="chooseNumber" :min="1" :max="specificationList[chooseIndex].stock"  @noMoreLess="noMoreLess" @change="changeNumValue" />
				</view>
			</view>
			
			
			
			<view class="choose-cart">
				
				<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'
	// let listData=require("./data.json") 
	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:[],
			},
			// 0,加入购物车。1，加入购物车，领券购买
			status:{
				type:Number,
				default:0,
			},
			goodsDetail:{
				type:Object,
				default:{}
			}
		},
		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 //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			
			
			changeNumValue(v){
				this.chooseNumber = v;
			},
			noMoreLess(){
				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 = res.return_data;	
						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: '/pages/settleAccounts/settleAccounts?goodsList='+obj
				})
				
				// this.$emit("close")
			},
			//
			select(index){
				this.chooseIndex = index;
			},
			
			// 去地址页
			goAddress(){
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			
			
		}
		
	}
</script>

<style lang="scss" scoped>

// //地址
 .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;
	//选择
	.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;
			color: white;
			background-color: #F95100;
			border-radius: 45rpx;
		}
	}
	
	
	.choose-bottom {
		.choose-bottom-title{
			
		}
		.choose-select {
			.choose-item{
				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;
				}
			}
			.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: 60rpx;
			width: 100%;
			border-radius: 30rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			
			
			.way{
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
			}
			
			.way1{
				width: 100% ;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
			}
			
			.bgcolor-ri{
				background-color:  #FD5100;
			}
			.bgcolor-left{
				background-color:  #FF8E01;
			}
		}
	}
	
}
</style>