zh-wx/components/productWindow/index.vue

<template>
	<view :style="colorStyle">
		<view class="product-window"
			:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt ? 'join' : '') + ' ' + (iScart ? 'joinCart' : '')">
			<view class="textpic acea-row row-between-wrapper">
				<view class="pictrue" @click="showImg()">
					<image :src="attr.productSelect.goodsCover"></image>
				</view>
				<view class="text">
					<view class="line1">
						{{ attr.productSelect.goodsName }}
					</view>
					<view class="money font-color">
						<view class="acea-row row-middle">
							{{ $t(`￥`) }}<text class="num">{{ attr.productSelect.salePrice - 0 }}</text>
							<text class='vip-money' v-if="is_vip > 0 && attr.productSelect.vip_price">{{ $t(`￥`) }}{{
									attr.productSelect.vip_price
							}}</text>
							<view class="vipImg" v-if="is_vip > 0 && attr.productSelect.vip_price">
								<image src="../../static/images/svip.gif"></image>
							</view>
						</view>
						<text class="stock" v-if='isShow'>{{ $t(`库存`) }}: {{ attr.productSelect.totalStock }}</text>
						<text class='stock' v-if="limitNum">{{ type ? $t(`库存`) : $t(`限量`) }}:
							{{ attr.productSelect.quota }}</text>
					</view>
				</view>
				<view class="iconfont icon-guanbi" @click="closeAttr"></view>
			</view>
			<view class="rollTop">
				<view class="productWinList">
					<view class="item">
						<view class="title">选择规格</view>
						<view class="listn acea-row row-middle">
							<view class="itemn" :class="attr.attrValueId === itemn.id ? 'on' : ''"
								v-for="(itemn, indexn) in attr.productAttr" @click="tapAttr(itemn, indexn)"
								:key="indexn">
								<text>{{ itemn.spceName }}</text>
								<text style="margin-left: 10px;" v-if="!itemn.canSale">缺货</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cart acea-row row-between-wrapper" v-if="!is_virtual == 0">
					<view class="title">{{ $t(`数量`) }}</view>
					<view class="carnum acea-row row-left">
						<view class="item reduce acea-row row-center-wrapper"
							:class="attr.productSelect.totalSales <= 1 ? 'on' : ''"
							v-if="attr.productSelect.totalSales <= 1">
							<text class="iconfont icon-shangpinshuliang-jian"></text>
						</view>

						<view class="item reduce acea-row row-center-wrapper"
							:class="attr.productSelect.totalSales <= 1 ? 'on' : ''" @click="CartNumDes" v-else>
							<text class="iconfont icon-shangpinshuliang-jian"></text>
						</view>
						<view class='item num acea-row row-middle'>
							<input type="number" v-model="attr.productSelect.totalSales"
								:disabled="attr.productSelect.zoneType == 8" data-name="productSelect.totalSales"
								@input="bindCode(attr.productSelect.totalSales)" />
						</view>
						<view v-if="iSplus">
							<view v-if="attr.productSelect.zoneType != 8" class="item plus acea-row row-center-wrapper"
								:class="
									attr.productSelect.totalSales >= attr.productSelect.totalStock
										? 'on'
										: ''
								" @click="CartNumAdd">
								<text class="iconfont icon-shangpinshuliang-jia"></text>
							</view>
							<view v-else class="item plus acea-row row-center-wrapper on">
								<text class="iconfont icon-shangpinshuliang-jia"></text>
							</view>
						</view>
						<view v-else class='item plus'
							:class='attr.productSelect.totalSales >= attr.productSelect.totalStock ? "on" : ""'
							@click='CartNumAdd'>+</view>
					</view>
				</view>
			</view>
			<view class="joinBnt bg-color"
				v-if="iSbnt && attr.productSelect.product_stock > 0 && attr.productSelect.quota > 0" @click="goCat">
				{{ $t(`我要参团`) }}
			</view>
			<view class="joinBnt on"
				v-else-if="(iSbnt && attr.productSelect.quota <= 0) || (iSbnt && attr.productSelect.product_stock <= 0)">
				{{ $t(`已售罄`) }}
			</view>
			<view class="joinBnt bg-color" v-if="iScart && attr.productSelect.stock" @click="goCat">{{ $t(`确定`) }}
			</view>
			<view class="joinBnt on" v-else-if="iScart && !attr.productSelect.stock">{{ $t(`已售罄`) }}</view>
		</view>
		<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
	</view>
</template>

<script>
import colors from "@/mixins/color";
export default {
	mixins: [colors],
	props: {
		attr: {
			type: Object,
			default: () => { }
		},
		limitNum: {
			type: Number,
			value: 0
		},
		isShow: {
			type: Number,
			value: 0
		},
		iSbnt: {
			type: Number,
			value: 0
		},
		iSplus: {
			type: Number,
			value: 0
		},
		iScart: {
			type: Number,
			value: 0
		},
		is_vip: {
			type: Number,
			value: 0
		},
		is_virtual: {
			type: Number,
			value: 0
		},
		type: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
			new_cart_num: 1
		};
	},
	mounted() {
		console.log(this.attr);
	},
	methods: {
		getpreviewImage: function () {
			uni.previewImage({
				urls: this.attr.productSelect.slideshowList,
				current: this.attr.productSelect.slideshowList[0]
			});
		},
		goCat: function () {
			this.$emit('goCat');
		},
		/**
		 * 购物车手动输入数量
		 * 
		 */
		bindCode: function (e) {
			if (e > this.attr.productSelect.totalStock) {
				this.$util.Tips({
					title: this.$t(`数量大于库存，请重新输入`),
					success: () => {

					},
				});
			} else {
				this.$emit('iptCartNum', e);
			}
		},
		closeAttr: function () {
			this.$emit('myevent');
		},
		CartNumDes: function () {
			this.$emit('ChangeCartNum', false);
		},
		CartNumAdd: function () {
			this.$emit('ChangeCartNum', true);
		},
		tapAttr: function (item, indexn) {
			let that = this;
			if (item.canSale) {
				that.$emit("ChangeAttr", item);
			}
		},
		//获取被选中属性；
		getCheckedValue: function () {
			let productAttr = this.attr.productAttr;
			let value = [];
			for (let i = 0; i < productAttr.length; i++) {
				for (let j = 0; j < productAttr[i].attr_values.length; j++) {
					if (productAttr[i].index === productAttr[i].attr_values[j]) {
						value.push(productAttr[i].attr_values[j]);
					}
				}
			}
			return value;
		},
		showImg() {
			this.$emit('getImg');
		},
	}
}
</script>

<style scoped lang="scss">
.vip-money {
	color: #282828;
	font-size: 28rpx;
	font-weight: 700;
	margin-left: 6rpx;
}

.vipImg {
	width: 68rpx;
	height: 27rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.product-window {
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	background-color: #fff;
	z-index: 100;
	border-radius: 16rpx 16rpx 0 0;
	transform: translate3d(0, 100%, 0);
	transition: all .3s cubic-bezier(.25, .5, .5, .9);
	padding-bottom: 140rpx;
	padding-bottom: calc(140rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
	padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}

.product-window.on {
	transform: translate3d(0, 0, 0);
}

.product-window.join {
	padding-bottom: 30rpx;
}

.product-window.joinCart {
	padding-bottom: 30rpx;
	z-index: 10000;
}

.product-window .textpic {
	padding: 0 130rpx 0 30rpx;
	margin-top: 29rpx;
	position: relative;
}

.product-window .textpic .pictrue {
	width: 150rpx;
	height: 150rpx;
}

.product-window .textpic .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}

.product-window .textpic .text {
	width: 410rpx;
	font-size: 32rpx;
	color: #202020;
}

.product-window .textpic .text .money {
	font-size: 24rpx;
	margin-top: 40rpx;
}

.product-window .textpic .text .money .num {
	font-size: 36rpx;
}

.product-window .textpic .text .money .stock {
	color: #999;
	margin-left: 6rpx;
}

.product-window .textpic .iconfont {
	position: absolute;
	right: 30rpx;
	top: -5rpx;
	font-size: 35rpx;
	color: #8a8a8a;
}

.product-window .rollTop {
	max-height: 500rpx;
	overflow: auto;
	margin-top: 36rpx;
}

.product-window .productWinList .item~.item {
	margin-top: 36rpx;
}

.product-window .productWinList .item .title {
	font-size: 30rpx;
	color: #999;
	padding: 0 30rpx;
}

.product-window .productWinList .item .listn {
	padding: 0 30rpx 0 16rpx;
}

.product-window .productWinList .item .listn .itemn {
	border: 1px solid #F2F2F2;
	font-size: 26rpx;
	color: #282828;
	padding: 7rpx 33rpx;
	border-radius: 25rpx;
	margin: 20rpx 0 0 14rpx;
	background-color: #F2F2F2;
}

.product-window .productWinList .item .listn .itemn.on {
	color: var(--view-theme);
	background: var(--view-minorColorT);
	border-color: var(--view-theme);
}

.product-window .productWinList .item .listn .itemn.limit {
	color: #999;
	text-decoration: line-through;
}

.product-window .cart {
	margin-top: 36rpx;
	padding: 0 30rpx;
}

.product-window .cart .title {
	font-size: 30rpx;
	color: #999;
}

.product-window .cart .carnum {
	height: 54rpx;
	margin-top: 24rpx;
}

.product-window .cart .carnum .iconfont {
	font-size: 25rpx;
}

.product-window .cart .carnum view {
	// border: 1px solid #a4a4a4;
	width: 84rpx;
	text-align: center;
	height: 100%;
	line-height: 54rpx;
	color: #282828;
	font-size: 45rpx;
}

.product-window .cart .carnum .reduce {
	border-right: 0;
	border-radius: 6rpx 0 0 6rpx;
	line-height: 48rpx;
	font-size: 60rpx;
}

.product-window .cart .carnum .reduce.on {
	// border-color: #e3e3e3;
	color: #DEDEDE;
}

.product-window .cart .carnum .plus {
	border-left: 0;
	border-radius: 0 6rpx 6rpx 0;
	line-height: 46rpx;
}

.product-window .cart .carnum .plus.on {
	// border-color: #e3e3e3;
	color: #dedede;
}

.product-window .cart .carnum .num {
	background: rgba(242, 242, 242, 1);
	color: #282828;
	font-size: 28rpx;
}

.product-window .joinBnt {
	font-size: 30rpx;
	width: 620rpx;
	height: 86rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 86rpx;
	color: #fff;
	margin: 21rpx auto 0 auto;
}

.product-window .joinBnt.on {
	background-color: #bbb;
	color: #fff;
}
</style>