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="service"
							v-if="enable_screen&&service_screen&&service_screen.screenList&&service_screen.screenList.length>0&&!is_gift">
							<view class="service_title">全优汇服务</view>
							<view class="service_item">
								<image style="width: 26upx;height:26upx;"
									src="https://t12.9026.com/web/statics/icon1/sp.png"> </image>

								<view>
									<view style="float: left;">碎屏险</view>
									<view class="slh">{{screenDescription}}</view>
								</view>

								<view style="color: red;" @click="gotoSpDetail">服务说明
									<image style="width: 26upx;height:26upx;"
										src="https://t12.9026.com/web/statics/icon1/问号.png"> </image>
								</view>
								<!-- 	<view>{{service_screen.screenList.intro}}</view> -->
							</view>
							<view class="service_value">
								<view class="service_block" v-for="(item,index) of service_screen.screenList"
									:class="{service_block_active:index == serviceId}" @click="select_service(index)">
									{{item.name}} ￥{{item.price}}
								</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 v-if="is_show_left && (goods.type === 'goods' || is_must_left)" class="box-grow-1"
						:class="cartClass" @click="leftSubmit">
						<slot name="left_slot"></slot>
						<template v-if="!$slots.left_slot">{{leftText}}</template>
					</view>
					<view 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 {
		mapState
	} from 'vuex'
	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
			},
			enable_screen: {
				type: Boolean,
				default: true
			},
			leftText: {
				type: String,
				default: '加入购物车'
			},
			rightText: {
				type: String,
				default: '立即购买'
			},
			leftFunc: {
				type: Boolean
			},
			rightFunc: {
				type: Boolean
			},
			sign: {
				type: String
			},
			again: {
				type: Number
			},
			is_gift: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				newValue: false,
				picUrl: null,
				newGroup: [],
				number: 1,
				service_screen: null, //碎屏险
				service_label: null, //当前对屏对象
				serviceId: null, //碎屏险ID
				card_id: null,
				screenDescription: ''
			}
		},
		methods: {
			gotoSpDetail() {
				uni.navigateTo({
					url: "/pages/goods/spDetail"
				})
			},
			select_service(index) {
				if (this.serviceId == index) {
					this.serviceId = null
					this.screenDescription = ""
					this.service_label = null
					this.card_id = null
				} else {
					this.serviceId = index
					this.screenDescription = this.service_screen.screenList[index]['description'] || ''
					this.service_label = this.service_screen.screenList[index]
					this.card_id = this.service_screen.screenList['card_id']

				}
				this.checked.service_label = this.service_label;
				this.checked.card_id = this.card_id;
				this.checked.hasScreen = this.hasCurrentServiceData();
				this.$emit('check', this.checked, this.number);
				// 	if(this.serviceId || this.serviceId===0){
				// 		this.service_screen.screenList.forEach((item,index)=>{

				// 			this.screenDescription=this.service_screen.screenList[index]['description']||''


				// 		})
				// 	}else{
				// 		this.service_label = null
				// 	}
			},
			getservice(copyGroup, attrNum_0, select) {
				console.log('getservice,164')
				console.log(copyGroup, attrNum_0, select)
				console.log(this.goods.attr)
				console.log(select)
				let select_val = []
				this.goods.attr.forEach((item, index) => {
					console.log(item)
					let select_item_list = []
					let select_item_value = ''
					let attrList = item.attr_list || [];
					attrList.forEach((value, key) => {
						select_item_value = value.attr_group_id + '-' + value.attr_id
						select_item_list.push(select_item_value)
					})
					if (JSON.stringify(select) == JSON.stringify(select_item_list)) {
						this.service_screen = item
					}

				})


			},
			getserviceByAttrId() {
				let that = this;
				this.goods.attr.forEach((item, index) => {

					if (item.id == this.checked.id) {
						that.service_screen = item
						that.select_service(0);

					}

				})
			},
			hasCurrentServiceData() {
				let that = this;
				let result = 0;
				console.log(this.service_screen)
				if (this.enable_screen && this.service_screen && this.service_screen.screenList &&
					this.service_screen.screenList.length > 0) {

					result = 1;

				} else
					result = 0;
				return result;
			},
			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) {
				console.log('identifier,175')
				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;
					let attrList = f.attr_list || []
					attrList.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);
					console.log("eeeeeeeeeeeeeeeee")
					console.log(f)
					f.service_label = this.service_label;
					f.card_id = this.card_id;
					f.hasScreen = this.hasCurrentServiceData();
					if (sign === 0) {
						this.$emit('check', f, 1);
					}
				});
			},
			storeAttr: function(attr_id, group_id, num_0) {
				console.log(201)
				if (num_0 === true) return;
				let newGroup = this.newGroup;
				let copyAttr = this.copyAttr;
				let select = [];
				console.log(newGroup)
				console.log(attr_id)
				console.log(group_id)
				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 = [];
				console.log(230)
				console.log(copyAttr)
				console.log(attrNum_0)
				console.log(select)
				this.selectCheck(copyAttr, attrNum_0, select);

				this.$nextTick(() => {
					if (this.number > this.stock) this.number = this.stock;
				});
				this.identifier(newGroup, attrNum_0, select);
				this.getservice(newGroup, attrNum_0, select)
				if (select.length !== newGroup.length) {
					this.$emit('check', null, 1);
				}
			},
			firstSelect: function() {
				console.log("ddddd")
				console.log(this.copyAttr)
				console.log(this.copyGroup)
				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.getservice(copyGroup, attrNum_0, select); //getservice
				this.newGroup = copyGroup;
				console.log(this.newGroup)
			},
			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 _this = this
				if (!this.checked) {
					uni.showToast({
						title: '请先选规格',
						icon: 'none'
					});
					return false;
				}


				// if (!this.service_label) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '确定不需要碎屏险吗？',
				// 		success: function (res) {
				// 			if (res.confirm) {
				// 				_this.submit()
				// 			} else if (res.cancel) {
				// 				return false
				// 			}
				// 		}
				// 	});
				// }else{
				// 	this.submit()
				// } 
				this.submit()
			},
			submit() {
				if (this.$user.isLogin() && this.$store.state.user.info) {
					let member_level = this.$store.state.user.info.identity.member_level;
					if (member_level < this.goods.member_level) {
						uni.showModal({
							title: "提示",
							content: "需达到" + this.goods.member_name + "会员才可购买",
							showCancel: true,
							buttonText: '升级',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										// url:"/pages/member/index/index",
										url: '/pages/member/upgrade/upgrade?level=' + member_level +
											'&other=' + this.goods.member_level
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}

							}
						})
						return;
					}

				}
				let attrs = [];
				let _this = this
				let attrList = _this.checked.attr_list || [];
				attrList.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,
					hasScreen: _this.hasCurrentServiceData(),
					goods_list: [{
						id: _this.goods.id,
						attrs,
						num: _this.number,
						cat_id: 0,
						card_id: _this.card_id,
						goods_attr_id: _this.checked.id,
						service_label: _this.service_label
					}]
				}
				if (_this.rightFunc === true) {
					console.log(333)
					_this.$emit('rightFunc', goods);
				} else {
					console.log(336)
					_this.shop(goods);
				}
				if (_this.service_label['id'] || 0)
					_this.close();
			},
			shop: function(goods) {
				console.log(342)
				console.log(goods)
				let hasScreen = this.hasCurrentServiceData();
				uni.navigateTo({
					url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify([goods])}&hasScreen=${hasScreen}`
				});
			},
			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.checked.first) this.$utils.throttle(this
						.firstSelect, 800);
				},
				immediate: true
			},
			number: {
				handler(newVal) {
					this.checked.service_label = this.service_label;
					this.checked.card_id = this.card_id;
					this.checked.hasScreen = this.hasCurrentServiceData();
					this.$emit('check', this.checked, newVal);
				}
			},
			again: {
				handler() {
					// this.firstSelect();
				}
			}
		}
	}
</script>

<style scoped>
	.u-model {
		width: 750upx;
	}

	.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;
	}

	.service_title {
		padding-top: 10px;
		margin: 14px 10px 10px;
		font-weight: 700;
		font-size: 13px;
	}

	.service_item {
		margin: 14px 10px 0px;
		font-size: 26rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
	}

	.service_value {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 10px;
	}

	.service_block {
		min-width: 46%;
		height: 28px;
		line-height: 26px;
		border: 1px solid #f5f5f5;
		border-radius: 16px;
		text-align: center;
		margin-right: 10px;
		margin-top: 10px;
		font-size: 12px;
		background-color: #f5f5f5;
		position: relative;
	}

	.service_block_active {
		color: #f21c1c;
		border: 1px solid #f21c1c;
	}

	.slh {
		margin-left: 5upx;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 460upx;
		white-space: nowrap;
		float: left;
		/* 	  display: -webkit-box;
		  -webkit-line-clamp: 1;
		  -webkit-box-orient: vertical; */
	}
</style>