shop4.3.57/components/page-component/u-goods-list/u-ordinary-list.vue

<template>
	<view class="u-list" v-show="is_show_off">
		<!--分类-->
		<template v-if="showCat && catList.length > 1">
			<scroll-view scroll-x v-bind:class="[theme, 'u-scroll-view', 'dir-left-nowrap']">
				<text v-for="(item, index) in catList" v-bind:key="index" v-bind:class="[
                        catStyle === 2 && activeCurrent === index ?
                        'u-active-current-round ' + theme + '-m-back ' + theme  :
                        catStyle === 1 && activeCurrent === index ?
                        'u-active-current '+ theme + '-m-text ' + theme + ' ' + theme+ '-m-border': 'u-default-text',
                        catStyle === 2 ? 'u-current-round' : '',
                        'u-nav-item'
                    ]" v-on:click="changeNav(index)">
					{{item.menuName}}
				</text>
			</scroll-view>
		</template>
		<!--商品列表-->
		<view v-bind:class="goodsListClass">
			<!--列表模式-->
			<template v-if="listStyle === -1 || (!listStyle && listStyle !== 0)">
				<block v-for="(goods, index) in goodsList" v-bind:key="index">
					<view v-bind:class="[goodsStyleObject, 'main-between', 'u-list-mode', 'dir-left-nowrap']"
						hover-class="goods-hover-class" v-on:click.stop="router(goods)">
						<view class="box-grow-0 u-left">
							<!-- 售罄 -->
							<view v-if="isShowStock(goods)" class="u-out-dialog">
								<image class="u-dialog-img" v-bind:src="sellOutPic"></image>
							</view>
							<!-- 角标 -->
							<image v-if="showGoodsTag" v-bind:class="[tagLeftTop, 'u-goods-tag']"
								v-bind:src="goodsTagPicUrl"></image>
							<!-- 商品封面图 -->
							<app-image borderRadius="16rpx" width="220rpx" height="220rpx"
								v-bind:img-src="goods.cover_pic" v-bind:mode="mode"></app-image>
						</view>
						<view class="box-grow-1 u-right dir-top-nowrap main-between">
							<view v-if="(isDIY && showGoodsName) || isShowGoodsName" v-bind:class="[
                                    goods.vip_card_appoint.discount || ((goods.level_show === 1 || goods.level_show === 2) && goods.is_negotiable !== 1) ? 't-omit' : 't-omit-two',
                                    'box-grow-0', 'u-goods-name'
                                ]">
								{{goods.name}}
							</view>
							<view class="box-grow-1 dir-left-nowrap cross-bottom">
								<view class="box-grow-1">
									<view v-if="isShowMemPrice(goods)" class="u-price-margin">
										<app-member-price v-bind:price="goods.level_price" :theme="themeObject">
										</app-member-price>
									</view>
									<view v-if="isShowVip(goods)" class="u-price-margin">
										<app-sup-vip v-bind:is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
											v-bind:discount="goods.vip_card_appoint.discount"></app-sup-vip>
									</view>
									<view v-if="showGoodsPrice || isShowOriginalPrice(goods)"
										v-bind:class="goods.is_sales === 1 ? 'dir-left-nowrap main-left cross-center' : 'dir-top-nowrap'">
										<text v-if="showGoodsPrice" class="u-goods-price"
											v-bind:class="[theme + '-m-text ', theme]">{{goods.price_content}}</text>
										<text v-if="isShowOriginalPrice(goods)"
											v-bind:class="[goods.is_sales === 1 ? 'u-original-margin' : '', 'u-original-price']">{{goods.original_price}}</text>
									</view>
									<view v-if="goods.is_sales === 1 && goods.is_negotiable !== 1"
										class="u-goods-sales">{{goods.sales}}</view>
								</view>
								<template
									v-if="isShowCart && goods.goods_stock !== 0 && goods.is_negotiable !== 1 || (isDIY && isShowBuyBtn(goods))">
									<view v-if="buyBtn === 'text'" v-on:click.stop="buyProduct(goods)"
										v-bind:style="btnStyle"
										v-bind:class="[buyBtnClass, 'u-text-btn', theme + '-m-back', theme]">
										{{buyBtnText}}</view>
									<view v-else v-on:click.stop="buyProduct(goods)"
										v-bind:class="['u-cart-btn-icon', 'box-grow-0', 'u-cart-btn-icon-' + buyBtn, theme + '-m-back', theme]">
									</view>
								</template>
							</view>
						</view>
					</view>
				</block>
			</template>
			<!--左右滑动-->
			<template v-else-if="listStyle === 0">
				<scroll-view scroll-x class="u-swipe-left-right ">
					<view class="dir-left-nowrap">
						<block v-for="(goods, index) in goodsList" v-bind:key="index">
							<view v-bind:class="goodsStyleObject" hover-class="goods-hover-class"
								v-on:click.stop="router(goods)" class="u-goods">
								<view class="u-top">
									<!-- 售罄 -->
									<view v-if="isShowStock(goods)" class="u-out-dialog">
										<image class="u-dialog-img" v-bind:src="sellOutPic"></image>
									</view>
									<!-- 角标 -->
									<image v-if="showGoodsTag" v-bind:class="[tagLeftTop, 'u-goods-tag']"
										v-bind:src="goodsTagPicUrl"></image>
									<!-- 商品封面图 -->
									<app-image borderRadius="16rpx 16rpx 0 0" width="200rpx" height="200rpx"
										v-bind:img-src="goods.cover_pic" v-bind:mode="mode"></app-image>
								</view>
								<view class="u-content-height dir-top-nowrap main-between">
									<view v-if="showGoodsName" v-bind:class="[textAlign, 'u-goods-name', 't-omit-two']">
										{{goods.name}}
									</view>
									<view class="u-bottom">
										<view v-if="isShowMemPrice(goods)"
											v-bind:class="[pluginAlign, 'u-member-margin']">
											<app-member-price :theme="themeObject" v-bind:price="goods.level_price">
											</app-member-price>
										</view>
										<view v-if="isShowVip(goods)" v-bind:class="[pluginAlign, 'u-member-margin']">
											<app-sup-vip
												v-bind:is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
												v-bind:discount="goods.vip_card_appoint.discount"></app-sup-vip>
										</view>
										<view v-if="showGoodsPrice || isShowOriginalPrice(goods)"
											v-bind:class="[textAlign, 'dir-top-nowrap']">
											<text v-if="showGoodsPrice" class="u-goods-price"
												v-bind:class="[theme + '-m-text', theme]">{{goods.price_content}}</text>
											<text v-if="isShowOriginalPrice(goods)"
												class="u-original-price">{{goods.original_price}}</text>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</template>
			<!--一行一个-->
			<template v-else-if="listStyle === 1">
				<block v-for="(goods, index) in goodsList" v-bind:key="index">
					<view hover-class="goods-hover-class" v-bind:class="goodsStyleObject"
						v-on:click.stop="router(goods)" class="u-one-per-line">
						<view class="u-top">
							<!-- 售罄 -->
							<view v-if="isShowStock(goods)" class="u-out-dialog">
								<image class="u-dialog-img" v-bind:src="sellOutPic"></image>
							</view>
							<!-- 角标 -->
							<image v-if="showGoodsTag" v-bind:class="[tagLeftTop, 'u-goods-tag']"
								v-bind:src="goodsTagPicUrl"></image>
							<!-- 商品封面图 -->
							<app-image width="100%" v-bind:img-src="goods.cover_pic" v-bind:height="coverPicHeight"
								v-bind:mode="mode"></app-image>
						</view>
						<view v-if="showGoodsName" v-bind:class="[textAlign, 'u-goods-name', 't-omit']">
							{{goods.name}}
						</view>
						<view class="u-bottom dir-left-nowrap cross-center">
							<view v-bind:class="[theme + '-m-text ', theme, 'box-grow-1', 'u-price']">
								<view
									v-bind:class="[textStyle === 2 ? 'main-center' : '', 'dir-left-nowrap', 'cross-center']">
									<view v-if="showGoodsPrice" class="u-goods-price">
										{{goods.price_content}}
									</view>
									<view v-if="isShowMemPrice(goods)" class="u-member-margin">
										<app-member-price :theme="themeObject" v-bind:price="goods.level_price">
										</app-member-price>
									</view>
									<view v-if="isShowVip(goods)" class="u-member-margin">
										<app-sup-vip v-bind:is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
											v-bind:discount="goods.vip_card_appoint.discount"></app-sup-vip>
									</view>
								</view>
								<view v-bind:class="[textAlign, 'u-original-price']" v-if="isShowOriginalPrice(goods)">
									￥{{goods.original_price}}
								</view>
							</view>
							<template v-if="isShowBuyBtn(goods) === 1 && textStyle !== 2">
								<view v-if="buyBtn === 'text'" v-on:click.stop="buyProduct(goods)"
									v-bind:class="[buyBtnClass, 'u-text-btn', 'box-grow-0']" v-bind:style="btnStyle">
									{{buyBtnText}}</view>
								<view v-else v-on:click.stop="buyProduct(goods)"
									v-bind:class="['u-cart-btn-icon', 'box-grow-0', 'u-cart-btn-icon-' + buyBtn, theme + '-m-back', theme]">
								</view>
							</template>
						</view>
					</view>
				</block>
			</template>
			<!--一行两个-->
			<template v-else-if="listStyle === 2">
				<block v-for="(goods, index) in goodsList" v-bind:key="index">
					<view hover-class="goods-hover-class" v-on:click.stop="router(goods)"
						v-bind:class="[goodsStyleObject, 'u-one-line-two', 'dir-top-nowrap']">
						<view class="u-top box-grow-0">
							<!-- 售罄 -->
							<view v-if="isShowStock(goods)"
								:class="goodsStyle !== 2 ? 'u-out-dialog' : 'u-border-out-dialog'">
								<image :class="goodsStyle !== 2 ? 'u-dialog-img' : 'u-border-dialog-img'"
									v-bind:src="sellOutPic"></image>
							</view>
							<!-- 角标 -->
							<image v-if="showGoodsTag" v-bind:class="[tagLeftTop, 'u-goods-tag']"
								v-bind:src="goodsTagPicUrl"></image>
							<!-- 商品封面图 -->
							<app-image borderRadius="16rpx 16rpx 0 0" :width="goodsStyle === 2 ? '344rpx': '346rpx'"
								height="346rpx" v-bind:img-src="goods.cover_pic" v-bind:mode="mode"></app-image>
						</view>
						<view
							v-bind:class="['u-bottom', 'box-grow-1', 'dir-top-nowrap', showGoodsName ? 'main-between' : 'main-right']">
							<view v-if="(isDIY && showGoodsName) || isShowGoodsName"
								v-bind:class="[textAlign, 'u-goods-name', 't-omit-two']">
								{{goods.name}}
							</view>
							<view class="box-grow-0 u-price dir-left-nowrap cross-bottom main-between">
								<view class="box-grow-1">
									<view v-if="goods.sign == 'pick' && activity"
										class="u-margin dir-left-nowrap cross-bottom">
										<text :class="[themeObject.back, 'u-des-price']">
											{{activity.rule_price}}元任选{{activity.rule_num}}件
										</text>
									</view>
									<view v-if="goods.sign === 'advance'" class="u-margin dir-left-nowrap cross-bottom">
										<text :class="[themeObject.back, 'u-des-price']">
											定金￥{{goods.deposit}}抵￥{{goods.swell_deposit}}
										</text>
									</view>
									<view v-if="goods.sign === 'flash_sale'"
										class="u-margin dir-left-nowrap cross-bottom">
										<text v-if="goods.discount_type === 1"
											:class="[themeObject.back, 'u-des-price']">{{goods.min_discount}}折
										</text>
										<text v-if="goods.discount_type === 2"
											:class="[themeObject.back, 'u-des-price']">减{{goods.min_discount}}元
										</text>
									</view>
									<view v-if="isShowMemPrice(goods)" v-bind:class="[pluginAlign, 'u-price-margin']">
										<app-member-price :theme="themeObject" v-bind:price="goods.level_price">
										</app-member-price>
									</view>
									<view v-if="isShowVip(goods)" v-bind:class="[pluginAlign, 'u-price-margin']">
										<app-sup-vip v-bind:is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
											v-bind:discount="goods.vip_card_appoint.discount"></app-sup-vip>
									</view>
									<view v-if="showGoodsPrice || isShowOriginalPrice(goods)"
										v-bind:class="[goods.is_sales === 1 ? 'dir-left-nowrap main-left cross-center' : 'dir-top-nowrap', 'u-price-margin' , goods.is_sales === 1 ? pluginAlign : null]">
										<text v-if="showGoodsPrice"
											v-bind:class="[theme + '-m-text ', theme, 't-omit', 'u-goods-price', textAlign]">
											{{goods.price_content}}
										</text>
										<text v-if="isShowOriginalPrice(goods)"
											v-bind:class="[goods.is_sales === 1 ? 'u-original-margin' : '', 'u-original-price',  textAlign]">
											￥{{goods.original_price}}
										</text>
									</view>
									<view v-if="goods.is_sales === 1 && goods.is_negotiable !== 1"
										v-bind:class="[textAlign, 'u-goods-sales', !showGoodsPrice ? 'u-price-margin' : '']">
										{{goods.sales}}</view>
								</view>
								<template
									v-if="isShowCart && goods.goods_stock !== 0 && goods.is_negotiable !== 1 || (isDIY && isShowBuyBtn(goods) === 1 && textStyle !== 2)">
									<view v-if="buyBtn === 'text'"
										v-bind:class="[buyBtnClass, 'u-text-btn', 'box-grow-0']" v-bind:style="btnStyle"
										v-on:click.stop="buyProduct(goods)">{{buyBtnText}}</view>
									<view v-else
										v-bind:class="['u-cart-btn-icon', 'box-grow-0', 'u-cart-btn-icon-' + buyBtn, theme + '-m-back', theme]"
										v-on:click.stop="buyProduct(goods)"></view>
								</template>
							</view>
						</view>
					</view>
				</block>
			</template>
			<!--一行三个-->
			<template v-else-if="listStyle === 3">
				<block v-for="(goods, index) in goodsList" v-bind:key="index">
					<view hover-class="goods-hover-class" v-on:click.stop="router(goods)"
						v-bind:class="[goodsStyleObject, 'u-one-line-three', 'dir-top-nowrap', 'box-grow-0']">
						<view class="u-top box-grow-0">
							<!-- 售罄 -->
							<view v-if="isShowStock(goods)" class="u-out-dialog">
								<image class="u-dialog-img" v-bind:src="sellOutPic"></image>
							</view>
							<!-- 角标 -->
							<image v-if="showGoodsTag" v-bind:class="[tagLeftTop, 'u-goods-tag']"
								v-bind:src="goodsTagPicUrl"></image>
							<!-- 商品封面图 -->
							<app-image borderRadius="16rpx 16rpx 0 0" :width="goodsStyle === 2 ? '222rpx' : '224rpx'"
								height="224rpx" v-bind:img-src="goods.cover_pic" v-bind:mode="mode"></app-image>
						</view>
						<view class="u-bottom box-grow-1 dir-top-nowrap main-between">
							<view v-if="(isDIY && showGoodsName) || isShowGoodsName"
								v-bind:class="[textAlign, 'box-grow-0', 'u-goods-name', 't-omit-two']">
								{{goods.name}}
							</view>
							<view class="box-grow-1 dir-top-nowrap main-right">
								<view v-if="isShowMemPrice(goods)" v-bind:class="[pluginAlign, 'u-price-margin']">
									<app-member-price :theme="themeObject" v-bind:price="goods.level_price">
									</app-member-price>
								</view>
								<view v-if="isShowVip(goods)" v-bind:class="[pluginAlign, 'u-price-margin']">
									<app-sup-vip v-bind:is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
										v-bind:discount="goods.vip_card_appoint.discount"></app-sup-vip>
								</view>
								<view class="box-grow-0 u-price-margin dir-left-nowrap cross-center"
									v-bind:class="[!showGoodsPrice && textStyle !== 2 ? 'main-right' : 'main-between', textStyle === 2 ? 'main-center' : '']">
									<view v-if="showGoodsPrice || isShowOriginalPrice(goods)"
										:class="[theme + '-m-text', theme, 'u-goods-price']">
										<view v-if="showGoodsPrice" v-bind:class="textAlign">{{goods.price_content}}
										</view>
										<view v-if="isShowOriginalPrice(goods)"
											v-bind:class="[textAlign, 'u-original-price']">￥{{goods.original_price}}
										</view>
										<view v-if="!isDIY && goods.is_sales === 1 && goods.is_negotiable !== 1"
											v-bind:class="['u-goods-sales']">{{goods.sales}}</view>
									</view>
									<view
										v-if="isShowCart && goods.goods_stock !== 0 && goods.is_negotiable !== 1 || (isDIY && isShowBuyBtn(goods) && textStyle !== 2)"
										v-on:click.stop="buyProduct(goods)"
										v-bind:class="['u-cart-btn-icon', 'box-grow-0', 'u-cart-btn-icon-' + buyBtn, theme + '-m-back', theme]">
									</view>
									<view v-if="isDIY && isShowBuyBtn(goods) === 0 && textStyle !== 2 && showBuyBtn"
										class="u-cart-btn-icon"></view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</template>
		</view>
		<!--购物车-->
		<template v-if="isShowAttr">
			<app-attr :goods="attrGoods.goods" :previewUrl="previewUrl" :submitUrl="submitUrl"
				:attrGroupList="attrGoods.goods.attr_groups" :theme="theme" :show="attrGoods.attrShow"></app-attr>
		</template>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import appAttr from "../../../components/page-component/app-attr/app-attr.vue";

	export default {
		name: "u-goods-list",
		props: {
			// 活动信息
			activity: {
				type: Object
			},
			// 是否为DIY
			isDIY: {
				type: Boolean,
				default: false
			},
			// 是否显示分类
			showCat: {
				type: Boolean
			},
			// 分裂列表
			catList: {
				type: Array
			},
			// 分类样式
			catStyle: {
				type: Number
			},
			// 主题色
			theme: {
				type: String
			},
			themeObject: {
				type: Object
			},
			// 商品列表
			list: {
				type: Array
			},
			// 列表样式 -1 列表模式 0 左右滑动 1 一行一个 2 一行两个 3 一行三个
			listStyle: {
				type: [Number, Boolean]
			},
			// 列表模式显示分割线 1 显示 0 不显示
			borderShow: {
				type: Number
			},
			// 商品样式 1 白底无边框 2 白底有边框 3 无底无边框
			goodsStyle: {
				type: Number
			},
			// 商品封面图是否填充 0 留白 1 填充
			fill: {
				type: Number,
				default: 1
			},
			// 商品右上角角标 url
			goodsTagPicUrl: {
				type: String
			},
			// 是否展示角标 0 不展示 1 展示
			showGoodsTag: {
				type: Number
			},
			// 是否展示商品名称 0 不展示 1 展示
			showGoodsName: {
				type: Number,
				default: 1
			},
			// 是否展示商品价格 0 不展示 1 展示
			showGoodsPrice: {
				type: Number,
				default: 1
			},
			// 显示购买按钮 0 不展示 1 展示
			showBuyBtn: {
				type: Number,
				default: 1
			},
			// 购买按钮样式 cart 购物车 add 加号 text 文字
			buyBtn: {
				type: String,
				default: 'cart'
			},
			// 按钮样式
			buyBtnStyle: {
				type: Number
			},
			// 按钮文案
			buyBtnText: {
				type: String
			},
			// text按钮颜色
			buttonColor: {
				type: String
			},
			// 文本对齐方式 1 左对齐 2 居中
			textStyle: {
				type: Number
			},
			// 商品封面图宽高比例 1-1 3-2
			goodsCoverProportion: {
				type: String
			},
			// 原价显示
			isUnderLinePrice: {
				type: Boolean,
				default: true
			},
			// 是否显示规格
			isShowAttr: {
				type: Boolean,
				default: false
			},
			isBuy: {
				type: Boolean,
				default: true
			},
			// 预览接口
			previewUrl: {
				type: String
			},
			// 支付接口
			submitUrl: {
				type: String
			},
			// 载入间隔
			addTime: {
				type: Number,
				default: 0
			},
			// 分页加载
			pagination: {
				type: Boolean,
				default: false
			},
			reset: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			...mapState({
				// 全局设置
				appSetting: function(state) {
					return state.mallConfig.mall.setting
				},
				// 小程序图片
				appImg: function(state) {
					return state.mallConfig.__wxapp_img.mall;
				},
				// 全局显示购物车
				isShowCart: function(state) {
					return !this.isDIY && state.mallConfig.mall.setting.is_show_cart && this.showBuyBtn;
				},
				// 全局显示商品名称
				isShowGoodsName: function(state) {
					return !this.isDIY && state.mallConfig.mall.setting.is_show_goods_name;
				}
			}),
			...mapGetters('mallConfig', {
				getVideo: 'getVideo'
			}),
			// 获取商品数组
			copyList() {
				if (!this.is_show_off) return [];
				if (this.showCat) {
					return this.catList[this.activeCurrent].goodsList;
				} else {
					return this.list;
				}
			},
			// 商品样式
			goodsStyleObject: function() {
				let str = '';
				this.goodsStyle === 2 ? str += 'u-is-border ' : '';
				this.goodsStyle !== 3 ? str += 'u-white-back' : '';
				return str;
			},
			// 商品封面图是否填充
			mode: function() {
				let str = '';
				this.fill === 1 ? str = 'aspectFill' : str = 'aspectFit';
				return str;
			},
			// 售罄图片
			sellOutPic: function() {
				return this.appSetting.is_use_stock === '1' ? this.appImg.plugins_out : this.appSetting.sell_out_pic;
			},
			// 角标弧度
			tagLeftTop: function() {
				return this.listStyle === -1 || this.listStyle === 0 || this.listStyle === 2 || this.listStyle === 3 ?
					'u-goods-tag-radius' : '';
			},
			// 文字按钮样式
			buyBtnClass: function() {
				let buyBtnClass = ``;
				if (this.buyBtnStyle == 2 || this.buyBtnStyle == 4) {
					buyBtnClass += `u-text-btn-border `;
				}
				if (this.buyBtnStyle == 4 || this.buyBtnStyle == 3) {
					buyBtnClass += `u-text-btn-radius`;
				}
				return buyBtnClass;
			},
			// 按钮样式
			btnStyle: function() {
				let btnStyle = ``;
				if (this.buyBtnStyle == 1 || this.buyBtnStyle == 3) {
					btnStyle += `background-color: ${this.buttonColor};color: #ffffff;`;
				} else {
					btnStyle += `border-color: ${this.buttonColor};color: ${this.buttonColor};`;
				}
				return btnStyle;
			},
			// 文本对齐方式
			textAlign: function() {
				return this.textStyle === 2 ? 'u-text-align' : null;
			},
			// 插件对齐方式
			pluginAlign: function() {
				return this.textStyle === 2 ? 'dir-left-nowrap main-center' : null;
			},
			// 一行一个图片高度
			coverPicHeight: function() {
				return this.goodsCoverProportion === '1-1' ? '702rpx' : '468rpx';
			},
			// 商品列表样式
			goodsListClass: function() {
				if (this.listStyle === 2) {
					return 'dir-left-wrap main-between u-goods-list';
				} else if (this.listStyle === 3) {
					return 'dir-left-wrap main-left u-one-line-three-list';
				} else if (this.listStyle === 0) {
					return 'u-swipe-left-right-list';
				} else if (this.borderShow === 1) {
					return 'u-goods-list u-bottom-border';
				} else {
					return 'u-goods-list';
				}
			}
		},
		data() {
			return {
				// 当前选中分类
				activeCurrent: 0,
				// 是否展示
				is_show_off: true,
				// 规格商品
				attrGoods: {
					goods: {},
					attrShow: 0
				},
				// 临时列表
				tempList: [],
				// 商品数组
				goodsList: []
			}
		},
		methods: {
			// 复制而不是引用对象和数组
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},
			// 循环载入
			splitData() {
				if (!this.tempList.length) return;
				let item = this.tempList[0];
				this.goodsList.push(item);
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			// 切换分类
			changeNav(index) {
				this.goodsList = [];
				this.activeCurrent = index;
				this.tempList = this.cloneData(this.copyList);
				this.splitData();
			},
			// 是否展示售罄
			isShowStock(goods) {
				return this.appSetting.is_show_stock === 1 && goods.goods_stock === 0 ? 1 : 0;
			},
			// 是否展示购物按钮
			isShowBuyBtn(goods) {
				return this.showBuyBtn && goods.goods_stock !== 0 && goods.is_negotiable !== 1 ? 1 : 0;
			},
			// 是否展示会员价
			isShowMemPrice(goods) {
				return (goods.level_show === 1 || goods.level_show === 2) && goods.is_negotiable !== 1 ? 1 : 0;
			},
			// 是否展示超级会员价
			isShowVip(goods) {
				return goods.vip_card_appoint && goods.vip_card_appoint.discount && goods.is_negotiable !== 1 ? 1 : 0;
			},
			// 是否显示原价
			isShowOriginalPrice(goods) {
				return this.isUnderLinePrice && goods.is_negotiable !== 1 ? 1 : 0;
			},
			// 购买按钮点击事件
			buyProduct(goods) {
				if (this.isBuy) {
					if (this.isShowAttr) {
						this.attrGoods.goods = goods;
						this.attrGoods.attrShow = Math.random();
					} else {
						uni.showLoading({
							text: '',
							mask: true
						});
						this.$request({
							url: this.$api.goods.attr,
							data: {
								id: goods.id,
								mch_id: goods.mch_id
							}
						}).then(e => {
							uni.hideLoading();
							if (e.code === 0) {
								let data = Object.assign(goods, e.data);
								this.$emit('buyProduct', {
									goods: data,
									attrShow: Math.random()
								});
							} else {
								uni.showToast({
									title: e.msg,
									icon: 'none'
								})
							}
						})
					}
				} else {
					this.router(goods);
				}
			},
			// 路由跳转
			router(goods) {
				// #ifdef MP-BAIDU
				uni.navigateTo({
					url: goods.page_url
				});
				// #endif
				// #ifndef MP-BAIDU
				if (goods.video_url && this.getVideo == 1 && !(goods.sign === 'lottery' || goods.sign === 'bargain' ||
						goods.sign === 'wholesale')) {
					let id = goods.id;
					if (goods.sign === 'advance') {
						id = goods.goods_id;
					} else if (goods.sign === 'gift') {
						id = id + '&is_share=1';
					}
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${id}&sign=${goods.sign}`
					});
				} else {
					uni.navigateTo({
						url: goods.page_url
					});
				}
				// #endif
			},
			empty() {
				this.goodsList = [];
			}
		},
		watch: {
			catList: {
				handler(newValue) {
					if (!this.showCat) return;
					!this.$validation.array(newValue) || this.$validation.isEmpty(newValue) ? this.is_show_off = false :
						this.is_show_off = true;
				},
				deep: true,
				immediate: true
			},
			copyList: {
				handler(nVal, oVal) {
					if (this.pagination && !this.reset) {
						let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
						this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
					} else {
						this.goodsList = [];
						this.tempList = this.cloneData(nVal);
					}
					this.splitData();
				},
				deep: true,
				immediate: true
			}
		},
		components: {
			appAttr
		}
	}
</script>

<style scoped lang="scss">
	.u-des-price {
		display: inline-block;
		font-size: 19upx;
		color: #ffffff;
		border-radius: 7upx;
		padding: 0upx 5upx;
	}

	.u-list {
		width: 750upx;
		overflow: hidden;
	}

	.u-scroll-view {
		white-space: nowrap;
		width: 750upx;
		height: 99upx;
		padding: 0 5upx;

		.u-current-round {
			height: 56upx;
			padding-left: 24upx;
			padding-right: 24upx;
			border-radius: 30upx;
			line-height: 56upx;
			margin: 21.5upx 24upx;
		}
	}

	.u-nav-item {
		display: inline-block;
		height: 97upx;
		line-height: 97upx;
		font-size: 26upx;
		margin: 0 44upx;
		white-space: nowrap;
		border-bottom: 1upx solid transparent;
	}

	.u-active-current-round {
		color: white;
	}

	.u-default-text {
		color: #666666;
	}

	.u-goods-list {
		padding: 24upx 24upx 0 24upx;

		&.u-bottom-border {
			padding: 0;
			padding-top: 24upx;

			>.u-list-mode {
				padding: 16upx 24upx;
				margin-bottom: 0;
				border-radius: 0;
				border-bottom: 1upx solid #e2e2e2;

				&:last-of-type {
					border-bottom: 0;
				}
			}
		}
	}

	.u-swipe-left-right-list {
		padding: 24upx 0 0 24upx;
	}

	.u-is-border {
		border: 1upx solid #e2e2e2;
	}

	.u-white-back {
		background-color: #ffffff;
	}

	%background-image {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.u-text-btn {
		height: 48upx;
		line-height: 48upx;
		padding: 0 20upx;
		font-size: 28upx;
	}

	.u-text-btn-radius {
		border-radius: 24upx;
	}

	.u-text-btn-border {
		border: 1upx solid;
	}

	.u-out-dialog {
		position: absolute;
		height: 100%;
		z-index: 11;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
	}

	.u-border-out-dialog {
		position: absolute;
		height: 100%;
		z-index: 11;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
	}

	.u-text-align {
		text-align: center;
	}

	.u-goods-tag {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 64upx;
		height: 64upx;
	}

	.u-goods-tag-radius {
		border-top-left-radius: 16upx;
	}

	.u-original-price {
		color: #999999;
		font-size: 22upx;
		text-decoration: line-through;
	}

	.u-goods-sales {
		color: #b5b5b5;
		font-size: 24upx;
	}

	.u-cart-btn-icon {
		width: 50upx;
		height: 50upx;
		@extend %background-image;
	}

	.u-cart-btn-icon-cart {
		background-image: url('../../../static/image/icon/cats.png');
	}

	.u-cart-btn-icon-add {
		background-image: url('../../../static/image/icon/add-to.png');
	}

	.u-goods-name {
		color: #353535;
	}

	.u-original-margin {
		margin-left: 10upx;
	}

	.u-price-margin {
		margin-top: 5upx;
		// width: 209rpx;
	}

	.u-list-mode {
		margin-bottom: 32upx;
		border-radius: 16upx;

		.u-right {
			height: 220upx;
			padding: 28upx 24upx 15upx 20upx;
		}

		.u-left {
			position: relative;
		}

		.u-out-dialog {
			width: 220upx;
			border-radius: 16upx;
		}

		.u-dialog-img {
			border-radius: 16upx;
			width: 220upx;
			height: 220upx;
		}

		.u-goods-name {
			font-size: 28upx;
			line-height: 38upx;
		}

		.u-goods-price {
			font-size: 30upx;
		}
	}

	.u-swipe-left-right {
		padding-bottom: 24upx;
		white-space: nowrap;

		.u-goods {
			display: inline-block;
			border-radius: 16upx;
			padding-bottom: 16upx;
			margin-right: 16upx;
		}

		.u-top {
			position: relative;
			margin-bottom: 8upx;
		}

		.u-out-dialog {
			width: 200upx;
			border-radius: 16upx 16upx 0 0;
			overflow: hidden;
		}

		.u-dialog-img {
			width: 200upx;
			height: 200upx;
		}

		.u-bottom {
			padding: 0 10upx;
		}

		.u-goods-name {
			font-size: 23upx;
			line-height: 33upx;
			margin-bottom: 8upx;
			padding: 0 10upx 0 10upx;
		}

		.u-goods-price {
			font-size: 23upx;
		}

		.u-member-margin {
			margin-bottom: 8upx;
		}

		.u-content-height {
			width: 200upx;
			height: calc(100% - 208upx);
		}
	}

	.u-one-per-line {
		margin-bottom: 24upx;
		border-radius: 0 0 16upx 16upx;

		.u-top {
			position: relative;
			width: 100%;
		}

		.u-out-dialog {
			width: 100%;
		}

		.u-dialog-img {
			width: 100%;
			height: 100%;
		}

		.u-bottom {
			padding: 0 24upx 21upx 24upx;
			margin-top: 16upx;
		}

		.u-goods-name {
			padding: 30upx 24upx 0 24upx;
			font-size: 28upx;
			line-height: 38upx;
		}

		.u-goods-price {
			font-size: 28upx;
		}

		.u-member-margin {
			margin-left: 10upx;
		}
	}

	.u-one-line-two {
		width: 346upx;
		margin-bottom: 25upx;
		border-radius: 16upx;

		.u-top {
			width: 346upx;
			height: 346upx;
			position: relative;
		}

		.u-out-dialog,
		.u-dialog-img {
			width: 346upx;
			height: 346upx;
			border-radius: 16upx 16upx 0 0;
		}

		.u-border-out-dialog,
		.u-border-dialog-img {
			width: 344upx;
			height: 346upx;
			border-radius: 16upx 16upx 0 0;
		}

		.u-bottom {
			padding-bottom: 15upx;
		}

		.u-goods-name {
			margin-top: 20upx;
			font-size: 28upx;
			padding: 0 24upx;
			line-height: 38upx;
		}

		.u-price {
			padding: 0 24upx;
		}

		.u-goods-price {
			font-size: 28upx;
		}
	}

	.u-one-line-three-list {
		padding: 24upx 9upx 0 24upx;
	}

	.u-one-line-three {
		width: 224upx;
		margin: 0 15upx 16upx 0;
		border-radius: 16upx;

		.u-top {
			position: relative;
		}

		.u-top,
		.u-out-dialog,
		.u-dialog-img {
			width: 224upx;
			height: 224upx;
			border-right: 16upx 16upx 0 0;
		}

		.u-goods-name {
			font-size: 26upx;
			margin-top: 10upx;
			line-height: 36upx;
		}

		.u-bottom {
			padding: 0 10upx 15upx 10upx;
		}

		.u-goods-price {
			font-size: 25upx;
		}

		.u-cart-btn-icon {
			width: 45upx;
			height: 45upx;
		}

		.u-goods-sales {
			font-size: 22upx;
		}
	}
</style>