shop4.3.57/components/page-component/app-attr/app-attr.vue

<template>
	<view class="app-attr">
		<view @click="alert">
			<slot name="button"></slot>
		</view>
		<view class="modal" v-if="display === 'block'" @click="close">
			<view class="safe-area-inset-bottom u-attr-fixed">
				<view class="content" @tap.native.stop="preventD">
					<image src="../../../static/image/icon/close.png" class="close" @click="close"></image>
					<view class="first dir-left-nowrap" :class="sign =='wholesale' ? 'no-border' : ''">
						<view class="box-grow-0 img" @click="clickImg(attrPic)">
							<app-image :img-src="attrPic" width="100%" height="100%"></app-image>
						</view>
						<view class="info">
							<view class="dir-left-nowrap cross-center" :class="priceColor">
								<view class="dir-left-nowrap cross-center">
									<view class="dir-left-nowrap cross-center" :class="theme+'-m-text ' + theme"
										v-if="selectAttr.extra || goods.extra">
										<view>{{selectAttr.extra ? selectAttr.extra.value + selectAttr.extra.name :
										   goods.extra.value + goods.extra.name}}
										</view>
										<view v-if="!(goods.sign === 'integral_mall' && attrPrice == 0)">+</view>
									</view>
									<app-price :theme="theme"
										v-if="!(goods.sign === 'integral_mall' && attrPrice == 0) && sign != 'wholesale'"
										type="text-price-all" :price="attrPrice" :default-price="goods.price">
									</app-price>
									<app-price :theme="theme" v-if="sign == 'wholesale'" type="text-price-all"
										:price="attrPrice"
										:max="goods.level_show == 1 ? goods.price_member_max : goods.price_max"
										:min="goods.level_show == 1 ? goods.price_member_min : goods.price_min">
									</app-price>
								</view>
								<view v-if="goods.level_show === 1 && (selectAttr || sign == 'wholesale')">
									<app-member-mark :theme="themeObject"></app-member-mark>
								</view>
							</view>
							<view class="stock">库存：{{attrNum}}</view>
						</view>
					</view>
					<view class="second" :class="sign =='wholesale' ? 'no-padding' : ''">
						<slot name="extra"></slot>
						<view class="wholesale" v-if="sign =='wholesale'">
							<view class="wholesale-attr-list dir-left-nowrap cross-center"
								v-if="index != goods.attr_groups.length -1" v-for="(item, index) in goods.attr_groups"
								:key="index">
								<view class="wholesale-attr-group t-omit-two">{{item.attr_group_name}}</view>
								<scroll-view @scroll="scrollGet($event,index)" :scroll-left="item.scrollLeft"
									class="wholesale-attr-item" scroll-x="true">
									<view class="attr-name" v-for="(attr, key) in item.attr_list" :key="key"
										:class="attr.active ? theme + '-m-back ' + theme : 'attr-background'"
										@click="chooseAttr(index,attr)">{{attr.attr_name}}
										<view class="attr-number" :style="{'right':`${attr.length + 'rpx'}`}"
											:class="theme + '-m-back ' + theme" v-if="index == 0 && attr.number > 0">
											{{attr.number}}</view>
									</view>
									<view class="attr-name attr-background" style="visibility: hidden">占位
									</view>
								</scroll-view>
								<view @click.stop="toBottom(index)" class="right-icon">
									<view></view>
									<image src="/static/image/icon/right.png"></image>
								</view>
							</view>
							<view class="wholesale-attr-group-list">
								<view class="wholesale-attr-group" v-for="(item, index) in goodsAttr" :key="index">
									<view class="dir-left-nowrap">
										<view class="wholesale-attr-item main-between">
											<view class="dir-top-nowrap main-center attr-name t-omit">
												<view class="t-omit">
													{{item.attr_list[item.attr_list.length - 1].attr_name}}</view>
												<view class="attr-price">
													￥{{goods.level_show === 1 ? item.price_member : item.price}}</view>
											</view>
											<view class="dir-left-nowrap wholesale-number-box cross-center">
												<image
													:src="item.number <= 0 ? '/static/image/plugins/un-low.png' : '/static/image/plugins/low.png'"
													class="block box-grow-0 cross-center main-center"
													@click="wholesaleNumberSub(index)">
												</image>
												<view
													class="wholesale-number-input box-grow-0 cross-center main-center">
													<app-input height="60" type="number" v-model="item.number"
														paddingLeft="0" :center="true" placeholder=" "
														@blur="wholesaleNumberBlur(index)" :focus="false" width="88">
													</app-input>
												</view>
												<image
													:src="item.number >= item.stock? '/static/image/plugins/un-add.png' : '/static/image/plugins/add.png'"
													class="block box-grow-0 cross-center main-center"
													@click="wholesaleNumberAdd(index)"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="attr-group" v-if="goods.type === 'goods' && sign !='wholesale'"
							v-for="(item, index) in newAttrGroupList" :key="index">
							<view class="attr-group-name">{{item.attr_group_name}}</view>
							<view class="dir-left-wrap">
								<view v-for="(attr, key) in item.attr_list" :key="key" class="attr-item"
									:class="attr.checked && sign !== 'gift' ? theme + '-m-back active ' + theme : attr.checked && sign === 'gift' ?  theme + '-background active' : 'attr-item-default' + (attr.attr_num_0 ? ' attr_num_0' : '')"
									@click="storeAttrClick(attr.attr_id, item.attr_group_id)">{{attr.attr_name}}
								</view>
							</view>
						</view>
						<view v-if="chooseNumber" class="dir-left-nowrap number-box cross-center">
							<view class="box-grow-1">数量</view>
							<image
								:src="number <= 1 ? '/static/image/icon/can-be-reduced.png' : '/static/image/cart/can-be-reduced.png'"
								class="block box-grow-0 cross-center main-center" @click="numberSub">
							</image>
							<view class="number-input box-grow-0 cross-center main-center">
								<app-input type="number" v-model="number" paddingLeft="0" :center="true" placeholder=" "
									@blur="numberBlur" :focus="false" width="88"></app-input>
							</view>
							<image src="/static/image/cart/can-be-added.png"
								class="block box-grow-0 cross-center main-center" @click="numberAdd"></image>
						</view>
					</view>
					<view v-if="sign =='wholesale'" class="total">已选<text>{{totalNumber}}</text>件
						总计<text>￥{{totalPrice > 0? totalPrice : '0.00'}}</text></view>
					<view class="three dir-left-nowrap">
						<view class="box-grow-1 main-center cross-center" v-if="cartShow"
							:class="sign === 'pick' ? theme + '-m-back ' + 'buy ' + theme : theme === 'b' || theme === 'f'  || theme === 'a' ? theme + '-s-back ' + 'buy ' + theme : theme + '-s-back ' + theme+ '-m-text ' + theme"
							@click="cart">{{addText}}
						</view>
						<view v-if="is_show_buy" class="box-grow-1 main-center cross-center buy"
							:class="sign !== 'gift' ? theme + '-m-back '+ theme : theme + '-background'" @click="buy">
							{{buyText}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	import appPrice from "../../page-component/goods/app-price.vue";
	import appImage from "../../basic-component/app-image/app-image.vue";
	import appMemberMark from '../../page-component/app-member-mark/app-member-mark.vue';
	export default {
		name: "app-attr",
		components: {
			appPrice,
			'app-image': appImage,
			appMemberMark
		},
		props: {
			goods: Object,
			attrGroupList: Array,
			attrCart: {
				type: Array,
				default () {
					return [];
				}
			},
			cartShow: {
				type: Boolean,
				default () {
					return true
				}
			},
			previewUrl: String,
			submitUrl: String,
			goodsId: {
				type: Number,
				default () {
					return 0
				}
			},
			show: Number,
			buyText: {
				type: String,
				default () {
					return '立即购买';
				}
			},
			plugin: {
				default: '',
			},
			theme: {
				type: String,
				default: 'a',
			},
			chooseNumber: {
				type: Boolean,
				default: true,
			},
			noPay: {
				type: Boolean,
				default: false,
			},
			buyClick: {
				type: Boolean,
				default: false,
			},
			addText: {
				type: String,
				default: '加入购物车',
			},
			is_show_buy: {
				type: Boolean,
				default: true,
			},
			sign: {
				type: String
			},
			totalPrice: {
				type: String,
				default: '0.00',
			},
			totalNumber: {
				type: Number,
				default: 0,
			},
			discount: {
				type: Number,
				default: 0,
			},
			wholesaleType: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				display: 'none',
				number: 1,
				selectAttr: null,
				newAttrGroupList: null,
				pic_url: null,
				// 商品批发
				activeAttr: [],
				goodsAttr: [],
				service_screen:null
			};
		},
		watch: {
			show() {
				if (this.display === 'block') {
					this.selectAttr = null;
					this.close();
				} else if (this.display === 'none') {
					this.alert();
				}
			},
			newData: {
				handler() {
					this.$emit('attr', this.newData)
				},
				immediate: true,
			},
			attrGroupList: {
				handler() {
					this.newAttrGroupList = this.attrGroupList;
					if (this.display == 'block') {
						this.alert();
					}
				},
				immediate: true
			},
			goods: {
				handler() {
					if (this.display == 'block') {
						this.alert();
					}
				},
				immediate: true
			}
		},
		mounted() {
			if (this.sign == 'wholesale') {
				this.pic_url = this.goods.attr_groups[0].attr_list[0].pic_url
				if (this.goods.attr_groups.length == 1) {
					this.goodsAttr = this.goods.attr;
				} else {
					for (let item of this.goods.attr_groups) {
						let para = {
							attr_group_name: '',
							attr_group_id: '',
							attr_id: '',
							attr_name: ''
						};
						para.attr_group_name = item.attr_group_name
						para.attr_group_id = item.attr_group_id
						para.attr_id = item.attr_list[0].attr_id
						para.attr_name = item.attr_list[0].attr_name
						this.activeAttr.push(para)
					}
					for (let item of this.goods.attr) {
						let same = true;
						for (let i = 0; i < item.attr_list.length - 1; i++) {
							let first = {
								attr_group_name: item.attr_list[i].attr_group_name,
								attr_group_id: item.attr_list[i].attr_group_id,
								attr_id: item.attr_list[i].attr_id,
								attr_name: item.attr_list[i].attr_name
							}
							if (JSON.stringify(first) != JSON.stringify(this.activeAttr[i])) {
								same = false;
							}
						}
						if (same) {
							this.goodsAttr.push(item)
						}
					}
				}
			}
		},
		methods: {
			alert() {
				
				if (this.attrGroupList.length === 0) {
					return;
				}
				if (this.sign != 'wholesale') {
					let attr_group_list = this.attrGroupList;
					let attrs = this.goods.attr;
					let select_attr = null;
					this.number = 1;
					if (attr_group_list.length === 1) {
						for (let i in attrs) {
							for (let j in attr_group_list[0].attr_list) {
								if (attr_group_list[0].attr_list[j].attr_id == attrs[i].attr_list[0].attr_id) {
									if (attrs[i].stock > 0) {
										if (attrs.length === 1) {
											attr_group_list[0].attr_list[j].checked = true;
										}
										attr_group_list[0].attr_list[j].attr_num_0 = false;
										this.pic_url = attr_group_list[0].attr_list[j].pic_url;
									} else {
										this.number = 0;
										attr_group_list[0].attr_list[j].checked = false;
										attr_group_list[0].attr_list[j].attr_num_0 = true;
									}
								}
							}
						}
						if (attrs.length === 1) {
							select_attr = attrs[0];
							this.$emit('attrtap', select_attr);
						}
					}
					this.newAttrGroupList = attr_group_list;
					if (this.goods.selectAttr) {
						this.selectAttr = this.goods.selectAttr
					} else {
						this.selectAttr = select_attr;
					}
				}
				// this.getservice()
				this.display = 'block';
			},
			getservice(select_val) {
				console.log(select_val)
				this.goods.attr.forEach((item, index) => {
					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_val) == JSON.stringify(select_item_list)) {
						console.log("进来了")
						this.service_screen = item
					}
					console.log(this.service_screen, "oooooooooooooooo")
				})
			},
			scrollGet(e, index) {
				this.goods.attr_groups[index].scrollLeft = e.detail.scrollLeft;
				this.$forceUpdate();
			},
			toBottom(index) {
				this.$nextTick().then(() => {
					this.goods.attr_groups[index].scrollLeft = 99999;
					this.$forceUpdate();
				})
			},
			chooseAttr(index, attrItem) {
				let that = this;
				for (let attr of that.goods.attr_groups[index].attr_list) {
					attr.active = false;
					if (attr.attr_id == attrItem.attr_id && attr.attr_name == attrItem.attr_name) {
						attr.active = true;
					}
				}
				if (index == 0) {
					that.pic_url = attrItem.pic_url;
				}
				that.activeAttr[index].attr_id = attrItem.attr_id
				that.activeAttr[index].attr_name = attrItem.attr_name
				that.goodsAttr = [];
				for (let item of that.goods.attr) {
					let same = true;
					for (let i = 0; i < item.attr_list.length - 1; i++) {
						let first = {
							attr_group_name: item.attr_list[i].attr_group_name,
							attr_group_id: item.attr_list[i].attr_group_id,
							attr_id: item.attr_list[i].attr_id,
							attr_name: item.attr_list[i].attr_name
						}
						if (JSON.stringify(first) != JSON.stringify(this.activeAttr[i])) {
							same = false;
						}
					}
					if (same) {
						that.goodsAttr.push(item)
					}
				}
				that.$forceUpdate();
				that.count();
			},
			wholesaleNumberSub(index) {
				if (this.goodsAttr[index].number == 0) {
					return false;
				}
				this.goodsAttr[index].number--;
				if (this.goods.attr_groups.length == 1) {
					this.pic_url = this.goodsAttr[index].pic_url;
				}
				this.count(index);
			},
			wholesaleNumberAdd(index) {
				if (this.goodsAttr[index].number > this.goodsAttr[index].stock || this.goodsAttr[index].number == this
					.goodsAttr[index].stock) {
					return false
				}
				this.goodsAttr[index].number++;
				if (this.goods.attr_groups.length == 1) {
					this.pic_url = this.goodsAttr[index].pic_url;
				}
				this.count(index);
			},
			wholesaleNumberBlur(index) {
				if (+this.goodsAttr[index].number > +this.goodsAttr[index].stock) {
					this.goodsAttr[index].number = this.goodsAttr[index].stock
				}
				if (this.goods.attr_groups.length == 1) {
					this.pic_url = this.goodsAttr[index].pic_url;
				}
				this.count(index);
			},
			count(index) {
				let that = this;
				this.$emit('attrtap', that.goods, that.goodsAttr);
				setTimeout(() => {
					that.selectAttr = that.goodsAttr[index]
				})
			},
			close() {
				this.display = 'none';
				this.$emit('close', false)
			},
			preventD() {},
			storeAttrClick(attr_id, attr_group_id) {
				let select_num = []
				let attr_group_list = JSON.parse(JSON.stringify(this.newAttrGroupList));
				let attrs = this.goods.attr;
				let checkedAttr = [];
				let attr_cart = this.attrCart;
				for (let i in attr_group_list) {
					for (let j in attr_group_list[i].attr_list) {
						let temp = attr_group_list[i].attr_list[j];
						if (parseInt(attr_group_list[i].attr_group_id) == parseInt(attr_group_id)) {
							if (parseInt(temp.attr_id) === parseInt(attr_id)) {
								
								if (temp.checked) {
									temp.checked = false;
								} else {
									temp.checked = true;
									select_num.push(
										`${attr_group_list[i].attr_group_id}-${temp.attr_id}`
									)
									this.getservice(select_num)
								}
								if (temp.attr_num_0) {
									return;
								}
							} else {
								temp.checked = false;
							}
						}
						if (temp.checked) {
							if (i == 0) {
								this.pic_url = attr_group_list[0].attr_list[j].pic_url;
							}
							checkedAttr.push(attr_group_list[i].attr_group_id + '-' + temp.attr_id);
						}
					}
				}

				function inArray(val, arr) {
					return arr.some(function(v) {
						return val == v;
					})
				}

				let attrNum_0 = [];
				let select_attr = null;
				let number = 1;
				for (let i in attrs) {
					let arr = [];
					let sign = 0;
					for (let j in attrs[i].attr_list) {
						let param = attrs[i].attr_list[j].attr_group_id + '-' + attrs[i].attr_list[j].attr_id;
						if (!inArray(param, checkedAttr)) {
							sign += 1;
							arr.push(param);
						}
					}
					if (attrs[i].stock == 0 && sign <= 1) {
						attrNum_0 = attrNum_0.concat(arr);
					}
					if (sign == 0) {
						if (!select_attr) {
							select_attr = {};
						}
						select_attr = attrs[i];
						attr_cart.forEach(item => {

							if (item.attr_id == select_attr.id) {
								number = item.num;
							}
						});
						if (select_attr.stock <= 0) {
							uni.showToast({
								title: '库存不足',
								icon: 'none'
							});
							return;
						}
						if (select_attr.stock <= number) {
							number = select_attr.stock;
						}
					}
				}
				if (checkedAttr.length == 0) {
					select_attr = null;
				}

				//库存为0的规格添加标识
				for (let i in attr_group_list) {
					for (let j in attr_group_list[i].attr_list) {
						let cAttr = attr_group_list[i].attr_list[j];
						let cParam = attr_group_list[i].attr_group_id + '-' + cAttr.attr_id;
						if (inArray(cParam, attrNum_0) && !inArray(cParam, checkedAttr)) {
							cAttr.attr_num_0 = true;
						} else {
							cAttr.attr_num_0 = false;
						}
					}
				}
				this.newAttrGroupList = attr_group_list;
				this.selectAttr = select_attr;
				this.number = number;
				this.$emit('attrtap', this.selectAttr);
			},
			numberBlur(number) {
				number = parseInt(number.value);
				if (number > this.attrNum) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
					number = this.attrNum;
				}
				this.$emit('attrtap', this.selectAttr);
				return this.number = number;
			},
			numberSub() {
				let number = this.number;
				if (number <= 1) {
					return true;
				}
				number--;
				this.number = number;
				this.$emit('attrtap', this.selectAttr);
			},
			numberAdd() {
				let number = this.number;
				number++;
				if (number > this.attrNum) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
					this.number = this.attrNum;
					return;
				}
				this.number = number;
				this.$emit('attrtap', this.selectAttr);
			},
			cart() {
				if (!this.submit()) {
					return false;
				}
				let select_attr = this.selectAttr;
				if (this.goods.sign === 'pick' || this.goods.sign === 'community') {
					this.$emit('add', select_attr, this.number);
					return;
				}
				// 普通商品
				if (this.goods.type === 'goods') {
					if (this.goods.sign === 'miaosha') {
						this.$request({
							url: this.$api.miaosha.add_cart,
							data: {
								miaosha_goods_id: select_attr.goods_id,
								attr_id: select_attr.id,
								num: this.number
							},
							method: 'post'
						}).then(e => {
							uni.showToast({
								title: e.msg,
								type: 'success'
							});
							this.display = 'none';
							this.selectAttr.number = this.number;
							this.$emit('selectNumber', this.selectAttr);
						}).catch(() => {
							this.display = 'none';
						});
					} else if (this.goods.sign === 'flash_sale') {
						this.$request({
							url: this.$api.flash_sale.add_cart,
							data: {
								flash_goods_id: select_attr.goods_id,
								attr_id: select_attr.id,
								num: this.number
							},
							method: 'post'
						}).then(e => {
							uni.showToast({
								title: e.msg,
								type: 'success'
							});
							this.display = 'none';
							this.selectAttr.number = this.number;
							this.$emit('selectNumber', this.selectAttr);
						}).catch(() => {
							this.display = 'none';
						});
					} else if (this.goods.sign == 'wholesale') {
						if (this.totalNumber < this.goods.wholesaleGoods.rise_num) {
							uni.showToast({
								title: '至少采购' + this.goods.wholesaleGoods.rise_num + this.goods.unit,
								image: '/static/image/plugins/tip.png',
								duration: 1000
							});
							return false
						}
						let para = [];
						for (let item of this.goods.attr) {
							if (item.number > 0) {
								para.push(item)
							}
						}
						this.$request({
							url: this.$api.wholesale.cart,
							data: {
								attr: JSON.stringify(para)
							},
							method: 'post'
						}).then(response => {
							this.display = 'none';
							if (response.code === 0) {
								for (let item of this.goods.attr) {
									item.number = '0'
								}
								for (let item of this.goodsAttr) {
									item.number = '0'
								}
								this.count();
								uni.hideLoading();
								uni.showToast({
									title: '添加成功',
									duration: 1000
								});
							}
						}).catch(response => {
							this.display = 'none';
						})
					} else {
						this.$request({
							url: this.$api.cart.add,
							data: {
								goods_id: select_attr.goods_id,
								attr: select_attr.id,
								num: this.number
							},
							method: 'post'
						}).then(e => {
							if (e.code === 0) {
								uni.showToast({
									title: e.msg,
									type: 'success'
								});
								this.display = 'none';
								this.selectAttr.number = this.number;
								this.$emit('selectNumber', this.selectAttr);
							} else {
								uni.showToast({
									title: e.msg,
									icon: "none",
									duration: 2500
								});
								this.display = 'none';
							}
						}).catch(() => {
							this.display = 'none';
						});
					}
					//	虚拟商品
				} else if (this.goods.type === 'ecard') {
					uni.showToast({
						title: '虚拟商品不允许加入购物车',
						icon: 'none'
					});
				}
			},
			buy() {
				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;
					}

				}
				if (!this.submit()) return false;
				if (this.noPay) {
					this.$emit('pay', this.number);
					return;
				}
				if (this.buyClick) {
					this.display = 'none';
					this.selectAttr.number = this.number;
					this.$emit('buyClick', this.selectAttr);
					return false;
				}
				if (this.goods.sign == 'wholesale') {
					if (this.totalNumber < this.goods.wholesaleGoods.rise_num) {
						uni.showToast({
							title: '至少采购' + this.goods.wholesaleGoods.rise_num + this.goods.unit,
							image: '/static/image/plugins/tip.png',
							duration: 1000
						});
						return false
					}
					let para = {};
					let mch_list = [{
						mch_id: 0,
						goods_list: []
					}];
					for (let item of this.goods.attr) {
						if (item.number > 0) {
							para = {
								id: item.goods_id,
								attr: [],
								num: item.number,
								cat_id: 0,
								goods_attr_id: item.id
							}
							for (let attr of item.attr_list) {
								let attrList = {
									attr_id: attr.attr_id,
									attr_group_id: attr.attr_group_id
								}
								para.attr.push(attrList)

							}
							mch_list[0].goods_list.push(para)
						}
					}
					let url = `/pages/order-submit/order-submit?mch_list=${JSON.stringify(mch_list)}`;
					if (this.submitUrl && this.previewUrl) {
						url +=
							`&preview_url=${encodeURIComponent(this.previewUrl)}&submit_url=${encodeURIComponent(this.submitUrl)}&plugin=${this.plugin}`;
					}
					uni.navigateTo({
						url: url
					})
				} else {
					let goods = this.goods;
					let number = this.number;
					let select_attr = this.selectAttr;
					let goods_attr_id = select_attr.id;
					let attr = [];
					for (let i in select_attr.attr_list) {
						attr.push({
							attr_id: select_attr.attr_list[i].attr_id,
							attr_group_id: select_attr.attr_list[i].attr_group_id
						});
					}
					let mch_list = [{
						mch_id: goods.mch_id ? goods.mch_id : 0,
						goods_list: [{
							id: this.goodsId ? this.goodsId : goods.id,
							attr: attr,
							num: number,
							cat_id: 0,
							goods_attr_id: goods_attr_id
						}]
					}];
					let url = `/pages/order-submit/order-submit?mch_list=${JSON.stringify(mch_list)}`;
					if (this.submitUrl && this.previewUrl) {
						url +=
							`&preview_url=${encodeURIComponent(this.previewUrl)}&submit_url=${encodeURIComponent(this.submitUrl)}&plugin=${this.plugin}`;
					}
					uni.navigateTo({
						url: url
					})
				}
			},
			submit() {
				let select_attr = this.selectAttr;
				if (this.goods.sign === 'wholesale') {
					return true;
				}
				if (!select_attr) {
					uni.showToast({
						title: '请先选规格',
						icon: 'none'
					});
					return false;
				}
				if (select_attr.stock <= 0) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
					return false;
				}
				if (this.number <= 0) {
					uni.showToast({
						title: '数量不能为0',
						icon: 'none'
					});
					return false;
				}
				if (!this.goods) {
					return false;
				}

				return true;
			},
			clickImg(src) {
				uni.previewImage({
					current: 0,
					urls: [src]
				});
			},
		},
		computed: {
			...mapState({
				gConfig: state => state.gConfig,
			}),
			attrPic() {
				if (this.pic_url) {
					return this.pic_url;
				} else if (this.goods) {
					return this.goods.cover_pic;
				} else {
					return ``;
				}
			},
			priceColor() {
				if (this.goods && this.goods.level_show === 1) {
					return `member`;
				} else {
					return this.theme + '-color';
				}
			},
			attrNum() {
				if (this.selectAttr) {
					return this.selectAttr.stock;
				} else if (this.goods) {
					return this.goods.goods_num;
				} else {
					return 0;
				}
			},
			attrPrice() {
				if (this.selectAttr) {
					let price;
					if (this.goods.level_show === 1) {
						price = this.selectAttr.price_member
					} else {
						price = this.selectAttr.price;
					}
					if (this.sign == 'wholesale') {
						if (this.selectAttr.number == 0) {
							return 'undefined'
						}
						if (this.wholesaleType == 0) {
							price = (price * (this.discount / 10)).toFixed(2);
							return price
						} else {
							price = (price - this.discount).toFixed(2);
							return price
						}
					} else {
						return price
					}
				} else if (this.sign == 'wholesale') {
					return 'undefined';
				} else if (this.goods) {
					if (this.goods.hasOwnProperty('price_min')) {
						return this.goods.price_min;
					} else {
						return this.goods.price;
					}
				} else {
					return 0;
				}
			},
			newData() {
				const {
					number,
					display,
					selectAttr
				} = this;
				return {
					number,
					display,
					selectAttr
				}
			},
			themeObject: function() {
				return {
					back: this.theme + '-m-back ' + this.theme,
					theme: this.theme,
					color: this.theme + '-m-text ' + this.theme,
					sBack: this.theme + '-s-back ' + this.theme
				}
			},
			...mapGetters('iPhoneX', {
				boolEmpty: 'getBoolEmpty'
			})
		}
	}
</script>

<style scoped lang="scss">
	.app-attr {
		background-color: #ffffff;

		.modal {
			background-color: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1603;
		}

		.content {
			width: 100%;
			background-color: #ffffff;
			border-radius: #{16rpx} #{16rpx} 0 0;

			.close {
				width: #{30rpx};
				height: #{30rpx};
				position: absolute;
				right: #{24rpx};
				top: #{24rpx};
				background-color: #ffffff;
			}

			.first {
				margin: 0 #{24rpx};
				border-bottom: #{1rpx} solid #e2e2e2;

				&.no-border {
					border-bottom: 0;
				}

				.img {
					width: #{200rpx};
					height: #{200rpx};
					border: #{4rpx} solid #ffffff;
					border-radius: #{8rpx};
					margin-top: #{-64rpx};
					display: block;
				}

				.info {
					margin: #{36rpx} 0 #{26rpx} #{24rpx};
					font-size: $uni-font-size-import-two;
					line-height: 1;

					.stock {
						font-size: $uni-font-size-weak-one;
						color: $uni-general-color-two;
						margin-top: #{18rpx};
					}

					view {
						&:first-child {
							margin-right: #{12rpx};
						}
					}

					.member {
						color: #f39800;
					}
				}
			}

			.second {
				max-height: #{650rpx};
				overflow-y: auto;
				overflow-x: hidden;
				padding: #{4rpx} #{24rpx};
				font-size: $uni-font-size-general-two;

				&.no-padding {
					padding: 0;
				}

				.attr-group {
					padding: #{32rpx} 0;
					border-bottom: #{1rpx} solid #e2e2e2;

					.attr-group-name {
						color: $uni-general-color-one;
						margin-bottom: #{20rpx};
					}

					.attr-item {
						margin-right: #{20rpx};
						padding: #{15rpx 24rpx};
						border-radius: #{8rpx};
						margin-bottom: #{20rpx};

						&.attr-item-default {
							background-color: #f2f2f2;
							color: $uni-important-color-black;
						}

						&.active {
							color: #ffffff;
						}

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

				.number-box {
					color: $uni-general-color-one;
					height: #{124rpx};

					.block {
						width: #{60rpx};
						height: #{60rpx};
						margin: 0 #{4rpx};

						&.disabled {
							background-color: #fbfbfb;
							color: $uni-general-color-two;
						}
					}

					.number-input {
						width: #{88rpx};
						height: #{60rpx};
						color: $uni-important-color-black;
						font-size: $uni-font-size-general-one;
						background-color: $uni-weak-color-two;
					}
				}
			}

			.three {
				height: #{110rpx};
				width: 100%;
				font-size: $uni-font-size-general-one;
			}
		}
	}

	.buy {
		color: #ffffff;
	}

	.wholesale {
		.wholesale-attr-list {
			height: 88rpx;
			margin: 0 24rpx;
			border-bottom: 1rpx solid #e2e2e2;
			position: relative;

			&:first-of-type {
				border-top: 1rpx solid #e2e2e2;
			}

			.wholesale-attr-group {
				max-width: 200rpx;
				flex-shrink: 0;
				margin-right: 4rpx;
				font-size: 20rpx;
				color: #666666;
			}

			.right-icon {
				position: absolute;
				right: -24rpx;
				top: 0;
				height: 84rpx;
				padding-left: 10rpx;
				width: 50rpx;
				z-index: 10000;
				background-color: #fff;

				view {
					height: 40rpx;
					width: 3rpx;
					background-color: #e2e2e2;
					position: absolute;
					left: 0;
					top: 24rpx;
				}

				image {
					margin-top: 33rpx;
					height: 22rpx;
					width: 16rpx;
				}
			}

			.wholesale-attr-item {
				height: 100%;
				white-space: nowrap;

				.attr-name {
					margin-top: 16rpx;
					color: #fff;
					padding: 0 22rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 8rpx;
					font-size: 26rpx;
					margin-left: 20rpx;
					display: inline-block;
					position: relative;

					.attr-number {
						color: #fff;
						position: absolute;
						top: -15rpx;
						height: 30rpx;
						line-height: 26rpx;
						border: 2rpx solid #fff;
						padding: 0 10rpx;
						border-radius: 15rpx;
						font-size: 20rpx;
						z-index: 100;
					}

					&.attr-background {
						background-color: #f2f2f2;
						color: #353535;
					}
				}
			}
		}

		.wholesale-attr-group-list {
			margin-top: 20rpx;

			.wholesale-attr-group {
				margin-bottom: 20rpx;

				.wholesale-attr-item {
					padding: 20rpx;
					background-color: #f7f7f7;
					width: 100%;

					.attr-name {
						width: 60%;

						.attr-price {
							color: #999999;
							font-size: 24rpx;
						}
					}

					.wholesale-number-box {
						color: $uni-general-color-one;

						.block {
							width: #{60rpx};
							height: #{60rpx};
							margin: 0 #{4rpx};

							&.disabled {
								background-color: #fbfbfb;
								color: $uni-general-color-two;
							}
						}

						.wholesale-number-input {
							width: #{88rpx};
							height: #{60rpx};
							color: $uni-important-color-black;
							font-size: $uni-font-size-general-one;
							background-color: #fff;
						}
					}
				}
			}
		}
	}

	.total {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
		padding: 0 24rpx;
		color: #353535;
		font-size: 28rpx;
		border-top: 1rpx solid #e2e2e2;

		text {
			color: #ff4544;
		}
	}

	.u-attr-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
	}
</style>