提交

pages/goods/list.vue

@@ -0,0 +1,414 @@
+<template>
+	<view class="container all-type-list-wrapper">
+		<product-list ref="productList" @operationConfim="hanldOperationConfim"></product-list>
+		<!--底部选择模态层弹窗组件 -->
+		<view class="popup spec" :class="specClass"  @touchmove.stop.prevent="discard" @tap="hideSpec">
+			<!-- 遮罩层 -->
+			<view class="mask"></view>
+			<view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-332rpx' : '-294rpx'}">
+				<view class="content">
+					<view class="layer-smimg">
+						<image :src="handleData.mainImage" mode=""></image>
+					</view>
+					<view class="layer-nunbox">
+						<view class="layer-nunbox-t">
+							<view class="layer-nunbox-text">数量:</view>
+							<view class="number-box">
+								<view  class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
+								<input class="btn-input" type="number" v-model="number" maxlength='4'  @blur="changeNumber($event)">
+								<view  class="iconfont icon-jiahao"  :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
+							</view>
+						</view>
+						<view class="layer-nunbox-b">
+							<view class="text">单价:
+								<text class="p sm">￥</text>
+								<text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="btn">
+					<view class="button buy" @click="toConfirmation">立即购买</view>
+					<view class="button add" @click="getAddProductCart">加入购物车</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import productList from '@/components/cm-module/listTemplate/productList'
+	export default{
+		components:{
+			productList
+		},
+		data(){
+			return{
+				userID: '',
+				serverUrl: '',
+				emptyText: '',
+				lastPageType: '',
+				lastPageVal: '',
+				isIphoneX:this.$store.state.isIphoneX,
+				specClass: '',//规格弹窗css类，控制开关动画
+				handleData:{},
+				isQuantity:false,
+				isStock:false,
+				minBuyNumber:0,
+				number:0,
+				buyRetailPrice:0,
+				buyRetailPriceStep:1,
+			}
+		},
+		onLoad() {
+
+		},
+		methods:{
+			hanldOperationConfim(data){//显示选择数量确认弹窗
+				this.specClass = 'show'
+				this.handleData = data
+				this.minBuyNumber = data.minBuyNumber
+				this.buyRetailPrice = data.retailPrice
+				this.buyRetailPriceStep = data.step
+				if(this.handleData.ladderPriceFlag == '1'){
+					this.number = data.maxBuyNumber
+				}else{
+					this.number = data.minBuyNumber
+				}
+			},
+			hideSpec() {//关闭选择数量确认弹窗
+				this.specClass = 'hide';
+				setTimeout(() => {
+					this.specClass = 'none';
+				}, 200);
+			},
+			changeCountAdd(){//popup弹窗数量增加按钮
+				if(this.buyRetailPriceStep == 2){
+					this.number += this.minBuyNumber
+				}else{
+					this.number++
+				}
+				this.calculatPerice()
+			},
+			changeCountSub(){//popup弹窗数量减按钮
+				if(this.number<=this.minBuyNumber){
+					this.number= this.minBuyNumber
+					this.isQuantity =true
+					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
+					return
+				}else{
+					if(this.buyRetailPriceStep == 2){
+						this.number-=this.minBuyNumber
+					}else{
+						this.number--
+					}
+					this.calculatPerice()
+					this.isQuantity =false
+				}
+			 },
+			changeNumber(e){
+				let _value = e.detail.value;
+				if(!this.$api.isNumber(_value)){
+					this.number = this.minBuyNumber
+				}else if(_value < this.minBuyNumber){	
+					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
+					this.number = this.minBuyNumber
+				}else if( _value % this.minBuyNumber !=0 ){
+					this.$util.msg(`购买量必须为起订量的整数倍`,2000);
+					this.number = this.minBuyNumber
+				}else{
+					this.number = e.detail.value
+					this.calculatPerice()
+				}
+			},
+			calculatPerice(){//判断是否为阶梯价然后做计算价格处理
+				if(this.handleData.ladderPriceFlag == '1'){
+					this.handleData.ladderPriceList.forEach((item,index)=>{
+						if(this.number>=item.buyNum){
+							this.buyRetailPrice = item.buyPrice
+						}
+					})
+				}
+			},
+			toConfirmation(){//跳转确认订单页面
+				this.specClass = 'hide';
+				let productStp ={
+						allPrice:this.number*this.buyRetailPrice,
+						allCount:this.number,
+						productID:this.handleData.productID,
+						productCount:this.number
+				}	
+				this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
+				setTimeout(() => {
+					this.specClass = 'none';
+				}, 200);
+			},
+			getAddProductCart(){//增加购物车成功和toast弹窗提示成功
+				this.ProductService.shoppingAddCart({productID:this.handleData.productID,userID:this.userID,productCount:this.number}).then(response => {
+					this.specClass = 'hide';
+					this.$util.msg(response.msg,1500,true,'success')
+					setTimeout(() => {this.specClass = 'none'}, 200)
+					this.$refs.productList.cartQuantity = response.data
+				}).catch(error =>{
+					this.$util.msg(error.msg,2000);
+				})
+			},
+			discard(){
+				//丢弃
+			}
+		},
+		onShow() {
+			let pages = getCurrentPages(),thisPage = pages[pages.length - 1];
+			this.$api.getStorage().then((resolve) =>{
+				this.userID = resolve.userID
+			})
+		},
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: $sub-bg-color;
+		.all-type-list-wrapper {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+	/* 加入购物模态层*/
+	@keyframes showPopup {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+	@keyframes hidePopup {
+		0% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+	@keyframes showLayer {
+		0% {
+			transform: translateY(0);
+		}
+		100% {
+			transform: translateY(-100%);
+		}
+	}
+	@keyframes hideLayer {
+		0% {
+			transform: translateY(-100%);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+	@keyframes showAmnation {
+		0% {
+			top: -12rpx;
+			opacity: 0;
+		}
+		50% {
+			top: -60rpx;
+			opacity: 1;
+		}
+		100% {
+			top: -100rpx;
+			opacity: 0;
+		}
+	}
+	@keyframes hideAmnation {
+		0% {
+			top: -100rpx;
+			opacity: 0;
+		}
+		100% {
+			top: -12rpx;
+			opacity: 0;
+		}
+	}
+	.popup {
+		position: fixed;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 999;
+		display: none;
+		.mask{
+			position: fixed;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 21;
+			background-color: rgba(0, 0, 0, 0.6);
+		}
+		.layer {
+			position: fixed;
+			z-index: 22;
+			bottom: -294rpx;
+			width: 702rpx;
+			padding: 24rpx 24rpx 36rpx 24rpx;
+			height: 236rpx;
+			border-radius: 20rpx 20rpx 0 0;
+			background-color: #fff;
+			display: flex;
+			flex-wrap: wrap;
+			align-content: space-between;
+			.content {
+				width: 100%;
+			}
+			.btn {
+				width: 100%;
+				height: 88rpx;
+				display: flex;
+				.button {
+					width: 340rpx;
+					height: 88rpx;
+					color: #fff;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: $font-size-28;
+					border-radius: 44rpx;
+					&.buy{
+						background: $btn-confirm;
+					}
+					&.add{
+						background: rgba(239, 175, 0, 1);
+						margin-left: 20rpx;
+					}
+				}
+			}
+		}
+		
+		&.show {
+			display: block;
+			.mask{
+				animation: showPopup 0.2s linear both;
+			}
+			.layer {
+				animation: showLayer 0.2s linear both;
+			}
+		}
+		&.hide {
+			display: block;
+			.mask{
+				animation: hidePopup 0.2s linear both;
+			}
+			
+			.layer {
+				animation: hideLayer 0.2s linear both;
+			}
+		}
+		&.none {
+			display: none;
+		}
+		&.service {
+			.row {
+				margin: 30upx 0;
+				.title {
+					font-size: 30upx;
+					margin: 10upx 0;
+				}
+				.description {
+					font-size: 28upx;
+					color: #999;
+				}
+			}
+		}
+		.layer-smimg{
+			width: 114rpx;
+			height: 114rpx;
+			float: left;
+			border-radius: 10rpx;
+			margin-right: 24rpx;
+			image{
+				width: 114rpx;
+				height: 114rpx;	
+				border-radius: 10rpx;
+			}
+		}
+		.layer-nunbox{
+			justify-content: space-between;
+			align-items: center;
+			width: 536rpx;
+			height: 88rpx;
+			padding: 13rpx 0 0 0;
+			float: left;
+			.layer-nunbox-t{
+				width: 100%;
+				height:44rpx;
+				position:relative;
+				display: flex;
+				.layer-nunbox-text{
+					line-height: 44rpx;
+					font-size: $font-size-28;
+				}
+				.number-box{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					border: 2rpx solid #e1e1e1;
+					border-radius: 30rpx;
+					height: 48rpx;
+					.iconfont{
+						font-size: $font-size-24;
+						padding:0 18rpx;
+						color: #333333;
+						text-align: center;
+						line-height: 48rpx;
+						font-weight: bold;
+						background: #FFFFFF;
+						&.icon-jianhao{
+							border-radius: 30rpx 0 0 30rpx;
+						}
+						&.icon-jiahao{
+							border-radius: 0 30rpx 30rpx 0;
+						}
+					}
+					.btn-input{
+						width: 62rpx;
+						height: 44rpx;
+						line-height: 44rpx;
+						border-radius: 4rpx;
+						text-align: center;
+						font-size: $font-size-24;
+						border-bottom: 2rpx solid #e1e1e1;
+						border-top: 2rpx solid #e1e1e1;
+						color: #333333;
+						background-color: #f7f7f7;
+					}
+				}
+				.product-step{
+					position: absolute;
+					left: 45rpx;
+					bottom: 0;
+					height: 44rpx;
+					background: #FFFFFF;
+				}
+			}
+			.layer-nunbox-b{
+				width: 100%;
+				height:44rpx;
+				margin-top: 13rpx;
+			}
+			.text{
+				line-height: 44rpx;
+				font-size: $font-size-28;
+				.p{
+					color: #FF2A2A;
+				}
+				.p:first-child{
+					margin-left: 30rpx;
+				}
+				.p.sm{
+					font-size: $font-size-24;
+				}
+			}
+		}
+	}	
+</style>