shop4.3.57/components/page-component/goods/u-attr.vue

<template>
	<view class="u-attr">
		<view @click="turnOn">
			<slot name="btn"></slot>
		</view>
		<u-popup v-model="newValue" mode="bottom" border-radius="14" :safeAreaInsetBottom="true" @close="close">
			<view class="u-model" @touchmove.stop.prevent>
				<view class="u-top dir-left-nowrap u-border-box">
					<view class="u-pic u-border-box" @click="clickImg(imgUrl)">
						<image class="u-img" :src="imgUrl"></image>
					</view>
					<view class="u-info">
						<view :class="['cross-center', 'dir-left-nowrap', themeObject.color]">
							<view class="dir-left-nowrap">
								<slot name="priceBefore"></slot>
								<view class="u-price">
									<app-price v-if="is_show_price" :theme="themeObject.theme" :userTheme="themeObject.userTheme" :sign="sign"
									 :price="sellPrice" :default-price="goods.price"></app-price>
								</view>
							</view>
							<app-member-mark v-if="goods.level_show === 1" :theme="themeObject"></app-member-mark>
						</view>
						<view class="u-stock">库存：{{stock}}</view>
					</view>
					<view class="u-close-image" @click="close">
						<image class="bd-close-image u-border-box" src="/static/image/icon/icon-close.png"></image>
					</view>
				</view>
				<view class="u-center">
					<scroll-view class="u-scroll-view" scroll-y="true">
						<slot name="extra"></slot>
						<view v-if="goods.type === 'goods'" class="u-attr-group u-border-box" v-for="(item, index) in newGroup" :key="index">
							<view class="u-group-name u-text">{{item.attr_group_name}}</view>
							<view class="dir-left-wrap">
								<view :class="['u-group-item', attr.select ? 'u-checked ' + themeObject.back : 'u-unchecked', attr.num_0 ? 'u-attr_num_0' : '']"
								 @click="storeAttr(attr.attr_id, item.attr_group_id, attr.num_0)" v-for="(attr, key) in item.attr_list" :key="key">
									{{attr.attr_name}}
								</view>
							</view>
						</view>
						<view class="u-number dir-left-nowrap main-between cross-center">
							<view class="u-text">数量</view>
							<view class="dir-left-nowrap u-input-box">
								<view @click.stop="numberSub" :class="[number <=1 ? 'u-reduced-1' : 'u-reduced-0', 'u-number-btn']"></view>
								<input @blur="numberBlur" type="number" class="u-input" v-model="number">
								<view @click.stop="numberAdd" class="u-number-btn u-added-1"></view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="u-bottom dir-left-nowrap">
					<view style="background: linear-gradient(to right, #A494F6, #BC8AE7, #E674B2);color: #fff;" v-if="is_show_left && (goods.type === 'goods' || is_must_left)" class="box-grow-1 borderwithe" :class="cartClass" @click="leftSubmit">
						<slot name="left_slot"></slot>
						<template v-if="!$slots.left_slot">{{leftText}}</template>
					</view>
					<view style="background: linear-gradient(to right, #E674B2, #FE3666);color: #fff;" v-if="is_show_right" class="box-grow-1" @click="rightSubmit" :class="[!$slots.right_slot ? themeObject.back + ' u-btn u-btn-color' : '']">
						<slot name="right_slot"></slot>
						<template v-if="!$slots.right_slot">{{rightText}}</template>
					</view>
					<template v-if="$slots.right">
						<slot name="right"></slot>
					</template>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uPopup from '../../basic-component/u-popup/u-popup.vue';
	import appPrice from "../goods/app-price.vue";
	import appMemberMark from "../app-member-mark/app-member-mark.vue";

	export default {
		name: "u-attr",
		props: {
			value: {
				type: Boolean
			},
			goods: {
				type: Object
			},
			themeObject: {
				type: Object
			},
			checked: {
				type: Object
			},
			is_show_price: {
				type: Boolean,
				default: true
			},
			is_show_left: {
				type: Boolean,
				default: true
			},
			is_must_left: {
				type: Boolean,
				default: true
			},
			is_show_right: {
				type: Boolean,
				default: true
			},
			leftText: {
				type: String,
				default: '加入购物车'
			},
			rightText: {
				type: String,
				default: '立即购买'
			},
			leftFunc: {
				type: Boolean
			},
			rightFunc: {
				type: Boolean
			},
			sign: {
				type: String
			},
			again: {
				type: Number
			}
		},
		data() {
			return {
				newValue: false,
				picUrl: null,
				newGroup: [],
				number: 1
			}
		},
		methods: {
			close: function() {
				this.$emit('input', false);
			},
			turnOn: function() {
				this.$emit('input', true);
			},
			inArray: function(newVal, arr) {
				return arr.some(v => {
					return newVal === v;
				});
			},
			identifier: function(copyGroup, attrNum_0, select) {
				copyGroup.forEach(f => {
					f.attr_list.forEach(c => {
						let param = `${f.attr_group_id}-${c.attr_id}`;
						this.inArray(param, attrNum_0) && !this.inArray(param, select) ? c.num_0 = true : c.num_0 = false;
					});
				});
			},
			selectCheck: function(copyAttr, attrNum_0, select) {
				copyAttr.forEach(f => {
					let arr = [];
					let sign = 0;
					f.attr_list.forEach(c => {
						let param = `${c.attr_group_id}-${c.attr_id}`;
						if (!this.inArray(param, select)) {
							sign += 1;
							arr.push(param);
						}
					});
					if (f.stock === 0 && sign <= 1) Array.prototype.push.apply(attrNum_0, arr);

					if (sign === 0) {
						this.$emit('check', f, 1);
					}
				});
			},
			storeAttr: function(attr_id, group_id, num_0) {
				if (num_0 === true) return;
				let newGroup = this.newGroup;
				let copyAttr = this.copyAttr;
				let select = [];
				newGroup.forEach((i, index) => {
					let attr_list = i.attr_list;
					attr_list.forEach((k) => {
						if (i.attr_group_id === group_id) {
							if (k.attr_id === attr_id) {
								if (k.select === true) {
									k.select = false;
								} else {
									k.select = true;
								}
							} else {
								k.select = false;
							}
							// k.attr_id === attr_id ? k.select = true : k.select = false;
						}
						if (k.select === true) {
							select.push(`${i.attr_group_id}-${k.attr_id}`);
							if (index === 0) this.picUrl = k.pic_url;
						}
					});
				});
				let attrNum_0 = [];
				this.selectCheck(copyAttr, attrNum_0, select);
				this.$nextTick(() => {
					if (this.number > this.stock) this.number = this.stock;
				});
				this.identifier(newGroup, attrNum_0, select);
				if (select.length !== newGroup.length) {
					this.$emit('check', null, 1);
				}
			},
			firstSelect: function() {
				if (!this.copyGroup || !this.copyAttr) return;
				let copyGroup = this.copyGroup;
				let copyAttr = this.copyAttr;
				let groupLength = copyGroup.length;
				let select = [];
				copyAttr.forEach(i => {
					let attr_list = i.attr_list;
					attr_list.forEach(j => {
						let attr_group_id = j.attr_group_id;
						copyGroup.forEach(k => {
							if (attr_group_id === k.attr_group_id) {
								let groups_attr_list = k.attr_list;
								groups_attr_list.forEach(g => {
									if (g.attr_id === j.attr_id) {
										if (i.stock > 0) {
											if (groupLength > 0) {
												g.select = true;
												select.push(`${k.attr_group_id}-${g.attr_id}`);
												if (groupLength === copyGroup.length) {
													this.picUrl = g.pic_url;
												}
												groupLength--;
											}
										}
									}
								});
							}
						});
					});
				});
				let attrNum_0 = [];
				this.selectCheck(copyAttr, attrNum_0, select);
				this.identifier(copyGroup, attrNum_0, select);
				this.newGroup = copyGroup;
			},
			numberBlur: function(e) {
				let value = parseInt(e.detail.value);
				if (!value) value = 1;
				if (value > this.stock) {
					value = this.stock;
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
				}
				this.number = value;
			},
			numberSub: function() {
				let value = this.number;
				if (value > 1) {
					value--;
					this.number = value;
				}
			},
			numberAdd: function() {
				let value = this.number;
				value++;
				if (value > this.stock) {
					value = this.stock;
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
				}
				this.number = value;
			},
			leftSubmit: function() {
				if (this.leftFunc === true) {
					this.$emit('leftFunc', this.number);
				} else {
					this.cart();
				}
				this.close();
			},
			rightSubmit: function() {
				let attrs = [];
				if (!this.checked) {
					uni.showToast({
						title: '请先选规格',
						icon: 'none'
					});
					return false;
				}
				this.checked.attr_list.forEach(item => {
					attrs.push({
						attr_id: item.attr_id,
						attr_group_id: item.attr_group_id
					});
				});
				let goods = {
					mch_id: this.goods.mch_id ? this.goods.mch_id : 0,
					goods_list: [{
						id: this.goods.id,
						attrs,
						num: this.number,
						cat_id: 0,
						goods_attr_id: this.checked.id
					}]
				}
				if (this.rightFunc === true) {
					this.$emit('rightFunc', goods);
				} else {
					this.shop(goods);
				}
				this.close();
			},
			shop: function(goods) {
				uni.navigateTo({
					url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify([goods])}`
				});
			},
			cart: function() {
				if (!this.checked) {
					uni.showToast({
						title: '请先选规格',
						icon: 'none'
					});
					return false;
				}
				if (this.goods.type === 'ecard') return;
				this.$request({
					url: this.$api.cart.add,
					method: 'post',
					data: {
						goods_id: this.checked.goods_id,
						attr: this.checked.id,
						num: this.number
					}
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.$emit('cart', this.checked, this.number);
						this.close();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2500
						});
					}
				});
			},
			clickImg(src) {
				uni.previewImage({
					current: 0,
					urls: [src]
				});
			}
		},
		components: {
			uPopup,
			appPrice,
			appMemberMark
		},
		computed: {
			imgUrl: function() {
				if (this.picUrl) {
					return this.picUrl;
				} else if (this.goods) {
					return this.goods.cover_pic;
				} else {
					return '';
				}
			},
			stock: function() {
				if (!this.$validation.isEmpty(this.checked)) {
					return this.checked.stock;
				} else if (!this.$validation.isEmpty(this.goods)) {
					return this.goods.goods_num;
				}
			},
			sellPrice: function() {
				if (!this.$validation.isEmpty(this.checked)) {
					return this.goods.level_show === 1 ? this.checked.price_member : this.checked.price;
				} else if (!this.$validation.isEmpty(this.goods)) {
					return this.goods.hasOwnProperty('price_min') ? this.goods.price_min : this.goods.price;
				}
			},
			copyGroup: function() {
				if (!this.goods) return;
				let group = this.$utils.deepClone(this.goods.attr_groups);
				for (let i = 0; i < group.length; i++) {
					group[i].attr_list.forEach(item => {
						item.select = false;
						item.num_0 = false;
					});
				}
				return group;
			},
			copyAttr: function() {
				if (!this.goods) return;
				return this.$utils.deepClone(this.goods.attr);
			},
			cartClass: function() {
				if (!this.$slots.left_slot) {
					if (this.themeObject.theme === 'a' || this.themeObject.theme === 'b' || this.themeObject.theme === 'f') {
						return this.themeObject.sBack + ' u-btn u-btn-color ';
					} else {
						return this.themeObject.sBack + ' u-btn ' + this.themeObject.color;
					}
				} else {
					return '';
				}
			}
		},
		watch: {
			value: {
				handler(newVal) {
					this.newValue = newVal;
					if (newVal === false) return;
					if (this.$validation.isEmpty(this.checked)) this.$utils.throttle(this.firstSelect, 800);
				},
				immediate: true
			},
			number: {
				handler(newVal) {
					this.$emit('check', this.checked, newVal);
				}
			},
			again: {
				handler() {
					this.firstSelect();
				}
			}
		}
	}
</script>

<style scoped>
	.u-model {
		width: 750upx;
	}
	.borderwithe{
		position: relative;
	}
	.borderwithe::after{
		content: "";
		position: absolute;
		right: 0;
		height: 60%;
		background: #ffffff;
		width: 1px;
		top: 50%;
		transform: translateY(-50%);
	}
	.u-top {
		margin: 0 24upx;
		border-bottom: 1upx solid #e2e2e2;
		height: 140upx;
	}

	.u-close-image {
		width: 54upx;
		height: 78upx;
		padding: 24upx 0 24rpx 24rpx;
		margin-left: 24rpx;
	}

	.bd-close-image {
		width: 30upx;
		height: 30upx;
	}

	.u-pic {
		width: 200rpx;
		height: 200rpx;
		padding: 4upx;
		border-radius: 8rpx;
		position: relative;
		top: -64upx;
		background-color: #ffffff;
	}

	.u-img {
		width: 192rpx;
		height: 192rpx;
		background-color: #ffffff;
	}

	.u-info {
		width: 424upx;
		height: 136upx;
		padding: 45upx 0 0 24upx;
	}

	.u-scroll-view {
		width: 100%;
		max-height: calc(80vh - 154upx);
	}

	.u-attr-group {
		margin: 24upx 32upx 0 32upx;
		border-bottom: 1upx solid #e2e2e2;
	}

	.u-number {
		height: 124upx;
		margin: 0 32upx;
	}

	.u-group-name {
		margin-bottom: 20upx;
	}

	.u-group-item {
		padding: 15upx 24upx;
		border-radius: 8upx;
		margin: 0 20upx 20upx 0;
		font-size: 26upx;
	}

	.u-checked {
		color: #ffffff;
	}

	.u-unchecked {
		background-color: #f2f2f2;
		color: #353535;
	}

	.u-attr_num_0 {
		background-color: #f7f7f7;
		color: #cdcdcd;
	}

	.u-stock {
		font-size: 24upx;
		color: #999999;
	}

	.u-price {
		margin-right: 12upx;
	}

	.u-input {
		width: 88upx;
		height: 60upx;
		background-color: #f7f7f7;
		font-size: 20upx;
		color: #353535;
		text-align: center;
	}

	.u-input-box {
		width: 218upx;
	}

	.u-number-btn {
		height: 60upx;
		width: 60upx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
	}

	.u-number-btn:first-child {
		margin-right: 5upx;
	}

	.u-number-btn:last-child {
		margin-left: 5upx;
	}

	.u-reduced-1 {
		background-image: url("../../../static/image/icon/can-be-reduced.png");
	}

	.u-reduced-0 {
		background-image: url("../../../static/image/cart/can-be-reduced.png");
	}

	.u-added-1 {
		background-image: url("../../../static/image/cart/can-be-added.png");
	}

	.u-text {
		font-size: 26upx;
		color: #666666;
	}

	.u-bottom {
		height: 110upx;
	}

	.u-btn {
		text-align: center;
		line-height: 110upx;
	}

	.u-btn-color {
		color: #ffffff;
	}
</style>