hxj/src/components/basic-component/app-goods/app-goods.vue

<template>
	<view :style="marginStyle" ref="goods" v-if="goods">
		<view class="app-goods" :class="appGoodsClass" :style="appGoodsStyle">
			<slot name="extra"></slot>
			<!-- 商品角标 -->
			<image @click="toDetail" v-if="showGoodsTag" :src="goodsTagPicUrl" :style="{'border-top-left-radius': c_border_top + 'rpx'}" class="goods-tag"></image>
			<!-- 套餐组合商品图 -->
			<view @click="toDetail" v-if="goods.composition_id > 0"
				 :style="compositionStyle">
				<app-diy-composition-image
					:mode="fill === 1 ? 'aspectFill' : 'aspectFit'"
					:image-list="goods.cover_pic_list"></app-diy-composition-image>
			</view>
			<!-- 商品图 -->
			<view @click="toDetail" v-else>
				<app-image :borderRadius="coverRadius" :img-src="goods.cover_pic?goods.cover_pic:goods.picUrl" :width="listStyle == -1 ? coverHeight : '100%'" :height="coverHeight" :mode="fill === 1 ? 'aspectFill' : 'aspectFit'"></app-image>
			</view>
			<view @click="toDetail" :style="coverStyle" class="out-dialog goods-cover" v-if="(goods.goods_num == 0 || goods.goods_stock == 0) && appSetting.is_show_stock == '1'">
				<image :style="coverStyle" :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
			</view>
			<!-- 一行一个活动倒计时 -->
			<view @click="toDetail" class="activity-info" :style="{'background-color': themeColor.background}" v-if="(sec > 0 || min > 0 || hour > 0) && listStyle == 1">
				<image :src="activityImage"></image>
				<view class="countdown dir-right-nowrap cross-center">
					<view class="timing">{{sec}}</view>
					<view>:</view>
					<view class="timing">{{min}}</view>
					<view>:</view>
					<view class="timing">{{hour}}</view>
					<view class="title">距结束</view>
				</view>
			</view>
			<!-- 活动倒计时 -->
			<view @click="toDetail" class="countdown-info main-between cross-center" :class="listStyle == 2 ? 'big':'small'" v-if="(sec > 0 || min > 0 || hour > 0) && listStyle != 1 && listStyle != -1">
				<view>距结束</view>
				<view class="countdown dir-right-nowrap cross-center">
					<view class="timing">{{sec}}</view>
					<view>:</view>
					<view class="timing">{{min}}</view>
					<view>:</view>
					<view class="timing">{{hour}}</view>
				</view>
			</view>
			<!-- 活动结束图 -->
			<image class="end-info" v-if="endImage && listStyle != -1" :style="{'height': endHeight + 'rpx'}" :src="endImage"></image>
			<!-- 商品 -->
			<view @click="toDetail" class="goods-info dir-top-nowrap main-between box-grow-1" :class="[textStyle == 2 ? 'main-center' :'',showTag && pluginTag ? '' : 'no-tag']" v-if="showGoodsName || isUnderLinePrice || showGoodsPrice">
				<view class="goods-top">
					<view v-if="showGoodsName" class="goods-name t-omit" :style="{textAlign: textStyle == 2 ? 'center' : 'left'}">
						<text v-if="showTag && pluginTag" :style="{'background-color': themeColor.background}" class="tag">{{pluginTag}}</text>
						<text>{{goods.name || goods.goods_name}}</text>
					</view>
					<slot name="name-end"></slot>
					<view class="main-between cross-bottom" v-if="listStyle == -1 && goods.sign != 'flash_sale' && !endImage">
						<!-- 列表活动倒计时 -->
						<view class="list-countdown dir-left-nowrap cross-center" v-if="sec > 0 || min > 0 || hour > 0">
							<slot name="timing-before"></slot>
							<view>距结束</view>
							<view class="timing">{{hour}}</view>
							<view>:</view>
							<view class="timing">{{min}}</view>
							<view>:</view>
							<view class="timing">{{sec}}</view>
						</view>
						<!-- 超级会员卡 -->
						<template v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount && ['advance','miaosha'].indexOf(goods.sign) !== -1">
							<app-sup-vip :new_icon="true" :discount="goods.vip_card_appoint.discount" :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user" :margin="listSvipMargin"></app-sup-vip>
						</template>

					</view>
					<!-- 列表活动结束 -->
					<view class="list-countdown main-between cross-center" v-if="endImage && listStyle == -1">
						<view>已结束</view>
						<!-- 超级会员卡 -->
						<template v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount">
							<app-sup-vip :new_icon="true" :discount="goods.vip_card_appoint.discount" :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user" :margin="listSvipMargin"></app-sup-vip>
						</template>
					</view>
					<!-- 额外信息 -->
					<view class="goods-extra" v-if="['weekly_buy','pintuan','advance', 'flash_sale', 'pick'].indexOf(goods.sign) !== -1 || extra || (goods.vip_card_appoint && goods.vip_card_appoint.discount && !(listStyle == -1 && ['advance', 'flash_sale','miaosha'].indexOf(goods.sign) !== -1))" :class="[scrollWidth > 208 ? 'center-bottom' : listStyle == 0 || listStyle == 3 || goods.sign == 'flash_sale'  ? 'dir-top-nowrap' : 'cross-center', textStyle == 2 ? 'main-center cross-center' :'main-between',listStyle == -1 && goods.sign == 'advance' ? 'small-margin': '']">
						<view v-if="extra" class="extra-info">{{extra}}</view>
						<view v-else-if="goods.sign == 'weekly_buy' && !no_extra" class="extra-info">{{goods.type_name}}</view>
						<view v-else-if="goods.sign == 'pintuan' && !no_extra" class="extra-info">{{goods.people_num}}人团</view>
						<view v-else-if="goods.sign == 'advance' && !no_extra" class="sales-info" :class="goods.vip_card_appoint && goods.vip_card_appoint.discount && goods.vip_card_appoint.discount != 0 ? '' : 'all'">
							<view :style="{'color': themeColor.color,'border-color': themeColor.border}">定金{{ Number(goods.deposit) }}抵{{ Number(goods.swell_deposit) }}</view>
						</view>
						<view v-else-if="goods.sign == 'pick' && !no_extra" class="sales-info" :class="goods.vip_card_appoint && goods.vip_card_appoint.discount && goods.vip_card_appoint.discount != 0 ? '' : 'all'">
							<view :style="{'color': themeColor.color,'border-color': themeColor.border}">{{ Number(goods.rule_price) }}元任选{{ Number(goods.rule_num) }}{{goods.unit ? goods.unit : goods.goodsWarehouse ? goods.goodsWarehouse.unit : '件'}}</view>
						</view>
						<view v-else-if="goods.sign == 'flash_sale' && !(listStyle == 0 &&(!isIndex || scrollWidth > 208))" class="sales-progress" :class="showProgressBar ? 'line' : ''">
							<view v-if="showProgressBar" class="progress main-center cross-center" :class="listStyle == -1 ? 'short': ''" :style="{'color': themeColor.color,'border-color': themeColor.background}">
								<view :style="{'width': rate, 'background-color': themeColor.background}" class="rate"></view>
								<view v-if="listStyle != 0 && listStyle != 3" class="main-center cross-center" style="flex-shrink: 0;white-space: nowrap;">
									<i class="iconfont">&#xe6e7;</i>
									<text style="display: block;" v-if="goods.discount_type === 1">{{goods.min_discount}}折</text>
									<text style="display: block;" v-if="goods.discount_type === 2">减{{goods.min_discount}}元</text>
								</view>
								<view :style="{'background-color': themeColor.background}" v-if="listStyle != 0 && listStyle != 3" class="line"></view>
								<view class="t-omit">已抢购{{goods.sales}}{{goods.unit ? goods.unit : goods.goodsWarehouse ? goods.goodsWarehouse.unit : '件'}}</view>
							</view>
							<view v-if="!showProgressBar || (showProgressBar && (listStyle == 0 || listStyle == 3))" class="show-sale dir-left-nowrap cross-center" :style="{'font-size': !showProgressBar ? '24rpx' : '20rpx','color': themeColor.color, 'margin-top': showProgressBar && (listStyle == 0 || listStyle == 3) ? '10rpx' : '0'}" :class="textStyle == 2 ? 'main-center' : 'dir-left-nowrap'">
								<i class="iconfont" :style="{'font-size': !showProgressBar ? '22rpx' : '20rpx'}">&#xe6e7;</i>
								<text v-if="goods.discount_type === 1">{{goods.min_discount}}折</text>
								<text v-if="goods.discount_type === 2">减{{goods.min_discount}}元</text>
							</view>
						</view>
						<!-- 超级会员卡 -->
						<template v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount && !(listStyle == -1 && ['advance', 'flash_sale','miaosha'].indexOf(goods.sign) !== -1)">
							<app-sup-vip :discount="goods.vip_card_appoint.discount" :new_icon="true" :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user" :margin="svipMargin"></app-sup-vip>
						</template>
					</view>
					<view class="main-between cross-center" v-if="listStyle == -1 && goods.sign == 'flash_sale'">
						<!-- 列表活动倒计时 -->
						<view class="list-countdown dir-left-nowrap cross-center" v-if="sec > 0 || min > 0 || hour > 0">
							<slot name="timing-before"></slot>
							<view>距结束</view>
							<view class="timing">{{hour}}</view>
							<view>:</view>
							<view class="timing">{{min}}</view>
							<view>:</view>
							<view class="timing">{{sec}}</view>
						</view>
						<!-- 超级会员卡 -->
						<app-sup-vip :discount="goods.vip_card_appoint.discount" :new_icon="true" :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user" v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount" :margin="listSvipMargin"></app-sup-vip>
					</view>
				</view>
				<view class="box-grow-1 cross-bottom" :class="[listStyle == 0 && show_sale ? 'dir-bottom-nowrap':'',textStyle == 2 ? 'main-center' :'main-between']">
					<view class="sales" style='width: 100%;' v-if="show_sale && listStyle == 0">{{goods.sales}}</view>
					<view class="price-content dir-bottom-nowrap box-grow-1">
						<view class="sales" v-if="show_sale && listStyle == -1">{{goods.sales}}</view>
						<view v-if="goods.sign == 'flash_sale' && scrollWidth > 208 && showProgressBar" class="sales-progress line bottom">
							<view class="progress main-center cross-center" :class="listStyle == -1 ? 'short': ''" :style="{'color': themeColor.color,'border-color': themeColor.background}">
								<view :style="{'width': rate, 'background-color': themeColor.background}" class="rate"></view>
								<view class="main-center cross-center" style="flex-shrink: 0;white-space: nowrap;">
									<i class="iconfont">&#xe6e7;</i>
									<text style="display: block" v-if="goods.discount_type === 1">{{goods.min_discount}}折</text>
									<text style="display: block" v-if="goods.discount_type === 2">减{{goods.min_discount}}元</text>
								</view>
								<view class="line" :style="{'background-color': themeColor.background}"></view>
								<view class="t-omit">已抢购{{goods.sales}}{{goods.unit ? goods.unit : goods.goodsWarehouse ? goods.goodsWarehouse.unit : '件'}}</view>
							</view>
						</view>
						<view :class="priceFlex">
							<view class="goods-price" v-if="priceFlex  != 'dir-bottom-nowrap' && showGoodsPrice" :class="listStyle == 0 || listStyle == 3 ? 'small': ''" :style="{'color': themeColor.color, 'margin-right': '10rpx','line-height': '1','margin-top': '8rpx'}">
								<text v-if="price_extra" style="margin-right: 5rpx;display: inline-block;vertical-align: top;margin-top: 8rpx;" class="price-float">{{price_extra}}</text>
								<text class="price-float">{{price.priceInt > 0 || price.priceInt == 0 ? '￥' :''}}</text>
								<text class="price-int" :class="price.priceInt > 0 || price.priceInt == 0 ? '' : 'text'">{{price.priceInt}}</text>
								<text class="price-float">{{price.priceFloat}}</text>
							</view>
							<view class="original-price" :class="listStyle == -1 || (listStyle == 1 && textStyle == 1) ? 'overflow' :''" v-if="isUnderLinePrice && goods.original_price && !(showMemberPrice && showGoodsPrice) && goods.is_negotiable != 1">
								￥{{ goods.original_price }}
							</view>
							<view class="box-grow-1" style="height: 28rpx;line-height: 1" v-if="showMemberPrice && showGoodsPrice">
								<view :style="{'color':themeColor.color,'background-color': themeColor.background_o}" class="goods-member-price">会员价{{goods.level_price == 0 ? ' 免费': '￥' + memberPrice.priceInt + memberPrice.priceFloat}}</view>
							</view>
							<view class="goods-price overflow" v-if="priceFlex  == 'dir-bottom-nowrap' && showGoodsPrice" :class="listStyle == 0 || listStyle == 3 ? 'small': ''" :style="{'color': themeColor.color}">
								<template v-if="goods.sign == 'integral_mall'">
									<text class="price-int list-style-string">{{Number(goods.integral)}}</text>
									<text class="price-string">积分{{goods.price > 0 ? '+':''}}</text>
									<text v-if="goods.price > 0" class="price-int list-style-string">{{goods.price}}</text>
									<text v-if="goods.price > 0" class="price-string">元</text>
								</template>
								<template v-else-if="goods.sign == 'step'">
									<text class="price-int list-style-string">{{Number(goods.currency)}}</text>
									<text class="price-string">{{goods.currency_name ? goods.currency_name : '活力币'}}{{goods.price > 0 ? '+':''}}</text>
									<text v-if="goods.price > 0" class="price-int list-style-string">{{goods.price}}</text>
									<text v-if="goods.price > 0" class="price-string">元</text>
								</template>
								<template v-else>
									<text class="price-float">{{price.priceInt > 0 || price.priceInt == 0 ? '￥' :''}}</text>
									<text class="price-int" :class="price.priceInt > 0 || price.priceInt == 0 ? '' : 'text'">{{price.priceInt}}</text>
									<text class="price-float">{{price.priceFloat}}</text>
								</template>
							</view>
							<slot name="price-after"></slot>
						</view>
					</view>
					<!--购物车-->
					<view v-if="showBtn" @click.stop="clickBtn" :style="btnStyle" class="buy-btn-class main-center cross-center" :class="listStyle == 1 ? 'big-btn' : ''">{{buyBtnText}}</view>
					<!--购物车-->
					<view v-if="showBuyBtn && buyBtnImage && textStyle == 1 && goods.is_negotiable != 1" @click.stop="clickBtn" :style="btnImageStyle">{{buyBtnText}}</view>
					<view class="sales" v-else-if="show_sale && listStyle > 0">{{goods.sales}}</view>
				</view>
			</view>
			<u-attr
				v-if="attrGoods.attrShow || attrGoods.goods"
				v-model="attrGoods.attrShow"
				:checked="attrGoods.select"
				:goods="attrGoods.goods"
				:theme="themeColor"
				@check="checkClick"
				@cart="cartResult"
			></u-attr>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters} from "vuex";
	import appDiyCompositionImage from '../../page-component/app-diy-goods-list/app-diy-composition-image';
	import uAttr from '../../page-component/goods/u-attr.vue';
	export default {
		name: "app-goods",
		components: {
			uAttr,
			appDiyCompositionImage
		},
		data() {
			return {
				attrGoods: {
					goods: null,
					attrShow: 0,
					select: null,
					disable: 'disable'
				},
				rate: 0,
				endHeight: 56,
				endImage: '',
				time: 0,
				countdown: null,
				hour: '00',
				min: '00',
				sec: '00',
				activityImage: '',
				itemWidth: 0,
				price: {
					priceFloat: '',
					priceInt: '',
				},
				memberPrice: {
					priceFloat: '',
					priceInt: '',
				}
			}
		},
		props: {
			price_extra: String, // 价格额外字段
			click: { // 自定义点击事件
				type: Boolean,
				default() {
					return false
				}
			},
			click_btn: { // 自定义点击购买按钮事件
				type: Boolean,
				default() {
					return false
				}
			},
			index: Number, // 下标
			showTag: {   // 显示商品插件名
				type: [Number, Boolean],
				default() {
					return true
				}
			},
			padding: Number, // 边距
			extra: String, // 额外信息
			theme: Object,  // 主题色
			goods: Object,  // 商品
			buttonColor: String,  // 按钮颜色
			listStyle: { // 列表样式
				type: Number,
				default() {
					return -1
				}
			},
			fill: {   //  商品图片显示样式
				type: Number,
				default() {
					return 1
				}
			},
			goodsCoverProportion: { // 商品封面图比例
				type: String,
				default() {
					return '1:1'
				}
			},
			goodsStyle: { // 商品样式
				type: Number,
				default() {
					return -1
				}
			},
			showGoodsName: {  // 是否显示商品名
				type: [Number, Boolean],
				default() {
					return true
				}
			},
			showGoodsPrice: { // 是否显示商品价格
				type: [Number, Boolean],
				default() {
					return true
				}
			},
			textStyle: {  // 价格文字样式
				type: Number,
				default() {
					return 1
				}
			},
			showBuyBtn: {  // 是否显示购买按钮
				type: [Number, Boolean],
				default() {
					return true
				}
			},
			showProgressBar: { // 是否显示进度条
				type: [Number, Boolean],
				default() {
					return false
				}
			},
			buyBtnStyle: {  // 购买按钮样式
				type: Number,
				default() {
					return 1
				}
			},
			buyBtnImage: { // 购买按钮图片
				type: String,
				default() {
					return ''
				}
			},
			btnSize: Number, // 购买按钮图片尺寸
			buyBtnText: String,  // 购买按钮文字
			showGoodsTag: {  // 显示商品角标
				type: [Number, Boolean],
				default() {
					return false
				}
			},
			goodsTagPicUrl: String,   // 商品角标图片
			isUnderLinePrice: {    // 是否显示划线价
				type: [Number, Boolean],
				default() {
					return false
				}
			},
			no_extra: {      //  是否没有额外信息
				type: [Number, Boolean],
				default() {
					return false
				}
			},
			buy: {    //  是否激活购买事件
				type: [Number, Boolean],
				default() {
					return false
				}
			},
			c_border_top: Number,    // 上圆角尺寸
			c_border_bottom: Number,    // 下圆角尺寸
			scrollWidth: {    // 滚动模式下元素宽度
				type: Number,
				default() {
					return 208
				}
			},
			show_time: {    // 是否显示倒计时
				type: [Number, Boolean],
				default() {
					return true
				}
			},
			goodsEndColor: {      // 商品背景颜色
				type: String,
				default() {
					return "#FFFFFF"
				}
			},
			goodsBorderColor: String,    // 商品边框颜色
			show_sale: {    // 是否显示销量
				type: [Number, Boolean],
				default() {
					return false
				}
			},
			isIndex: {    // 是否为首页显示
				type: [Number, Boolean],
				default() {
					return false
				}
			},
		},
		created() {
			let that = this;
			that.activityImage = that.diyImg[that.goods.sign];
			if(that.goods.is_negotiable != 1) {
				that.price = that.handlePrice(that.price_extra ? that.goods.min_price : that.goods.price ? that.goods.price : that.goods.goods.price);
			}else {
				that.price = that.handlePrice(that.appSetting.negotiable_text);
			}
			if(that.showMemberPrice) {
				that.memberPrice = that.handlePrice(that.goods.level_price);
			}
			if(that.goods.sign == 'flash_sale') {
				that.rate = that.goods.sales / (+that.goods.sales + +that.goods.goods_stock) * 100 + '%'
			}
			if(that.goods.end_prepayment_time > 0) {
				that.time = that.goods.end_prepayment_time;
			}
			if(that.goods.end_prepayment_time < 0) {
				that.countTime();
			}
			if(that.time > 0 && !that.isIndex && that.show_time) {
				that.countdown = setInterval(function() {
					that.getTime(that.time);
				}, 1000)
			}
		},
		computed: {
			...mapState({
				diyImg: state => state.mallConfig.__wxapp_img.diy,
				appImg: state => state.mallConfig.__wxapp_img.mall,
				appSetting: state => state.mallConfig.mall.setting,
			}),
			...mapGetters('mallConfig', {
				getVideo: 'getVideo',
	            getTheme: 'getTheme',
	        }),
	        themeColor() {
	        	return this.theme ? this.theme : this.getTheme
	        },
			showMemberPrice() {
				return this.goods.is_level == 1 && this.goods.is_negotiable != 1 && (this.goods.level_price > 0 || this.goods.level_price == 0)
			},
			showBtn() {
				return this.showBuyBtn && this.goods.is_negotiable != 1 && this.textStyle == 1 && this.listStyle != 0 && this.listStyle != 3 && this.buyBtnImage == ''
			},
			extraMsg() {
				return (['weekly_buy','pintuan','advance', 'flash_sale', 'pick'].indexOf(this.goods.sign) !== -1 || this.listStyle != 1) && ['step','integral_mall'].indexOf(this.goods.sign) == -1
			},
			pluginTag() {
				if(this.goods.composition_id > 0) {
					return this.goods.tag
				}else if(this.goods.sign) {
					switch (this.goods.sign) {
						case 'pintuan':
							return '拼团';
						case 'miaosha':
							return '秒杀';
						case 'pick':
							return 'N元任选';
						case 'advance':
							return '预售';
						case 'bargain':
							return '砍价';
						case 'gift':
							return '社交送礼';
						case 'flash_sale':
							return '限时抢购';
						case 'exchange':
							return '礼品卡';
						case 'wholesale':
							return '商品批发';
						case 'step':
							return '步数宝';
						case 'weekly_buy':
							return '周期购';
						case 'lottery':
							return '抽奖';
						case 'booking':
							return '预约';
					}
				}else {
					return ''
				}
			},
			appGoodsClass() {
				let className = ''
				if(this.listStyle == -1) {
					className += 'list dir-left-nowrap cross-center'
					if(this.goods.sign == 'flash-sale' || this.goods.sign == 'advance') {
						className += ' long'
					}
				}else if(this.listStyle == 0) {
					className += 'scroll dir-top-nowrap'
				}else if(this.listStyle == 3) {
					className += 'third dir-top-nowrap'
				}else {
					className += 'dir-top-nowrap'
				}
				if(this.isIndex) {
					className += ' is-index'
				}
				return className
			},
			svipMargin() {
				let style = "0 0 0 20rpx"
				if((this.listStyle == 0 && this.scrollWidth < 304) || this.listStyle == 3 || this.goods.sign == 'flash_sale' && !this.isIndex) {
					style = style.replace('0', '8rpx');
				}
				if(!(this.textStyle == 2 && !(this.listStyle == 0 && this.scrollWidth < 304) && this.listStyle != 3 && (this.extra || ['weekly_buy','pintuan','advance', 'pick'].indexOf(this.goods.sign) !== -1 ))) {
					style = style.replace('20rpx', '0');
				}
				return style
			},
			listSvipMargin() {
				let style = "0 0 0 20rpx"
				if((this.listStyle == 0 && this.scrollWidth < 304) || this.listStyle == 3 || this.goods.sign == 'flash_sale') {
					style = style.replace('0', '8rpx');
				}
				if(!(this.textStyle == 2 && this.extraMsg )) {
					style = style.replace('20rpx', '0');
				}
				return style
			},
			btnImageStyle() {
				let style = `background-color: ${this.themeColor.background};width: ${this.btnSize}rpx;height: ${this.btnSize}rpx;flex-shrink:0;background-image: url(${this.buyBtnImage});background-repeat: no-repeat;background-size: 100% 100%;border: 0;border-radius: 50%;margin-left: 12rpx;`
				return style;
			},
			coverRadius() {
				let radius = '';
				if(this.isIndex) {
					radius = `${this.c_border_top}rpx`
				}else {
					radius = `${this.c_border_top}rpx ${this.c_border_top}rpx 0 0`
					if(this.listStyle == -1) {
						radius = `${this.c_border_top}rpx 0 0 ${this.c_border_bottom}rpx`
					}
				}
				return radius;
			},
			coverHeight() {
				let height = 256
				if(this.listStyle > 0) {
					if(this.goodsCoverProportion == '3-2' && this.listStyle == 1) {
						height = `${this.itemWidth / 3 * 2}`
					}else {
						height = `${this.itemWidth}`
					}
				}else {
					height = ['flash_sale','miaosha'].indexOf(this.goods.sign) !== -1 && this.showTag ? 276 : 256
					if(this.goodsStyle == 2) {
						height = height - 4;
					}
				}
				if(this.listStyle == 0) {
					height = `${this.scrollWidth}`
				}
				return height + 'rpx';
			},
			coverStyle() {
				let style = `height: ${this.coverHeight > 0 ? this.coverHeight : this.listStyle == 0 ? this.scrollWidth : this.listStyle == -1 ? 256 : this.itemWidth}rpx;border-radius: ${this.coverRadius}`;
				return style;
			},
			priceFlex() {
				if(this.price_extra) {
					return ''
				}else if(((this.listStyle == -1 && (this.goods.sign == 'advance' || this.goods.sign == 'flash_sale')) || (this.listStyle == 1 && this.textStyle == 1) || (this.listStyle == 0 && this.scrollWidth > 208 && !this.isIndex)) && this.goods.sign != 'integral_mall' && this.goods.sign != 'step') {
					return 'dir-left-nowrap cross-bottom'
				}else {
					return 'dir-bottom-nowrap'
				}
			},
			// },
			marginStyle() {
	            // #ifdef MP-ALIPAY || H5
				let style = '';
	            // #endif
	            // #ifndef MP-ALIPAY || H5
				let style = 'height: 100%;';
	            // #endif
				this.itemWidth = 750 - this.padding*2;
				if(this.listStyle != 0) {
					if(this.listStyle == 2) {
						this.itemWidth = (750 - this.padding*2 - 20) / 2;
					}else if(this.listStyle == 3) {
						this.itemWidth = (750 - this.padding*2 - 32) / 3;
					}
					if(this.index % 3 == 1 && this.listStyle == 3) {
						style += `padding: 20rpx 16rpx 0;width: ${this.itemWidth + 32}rpx;`
					}else {
						style += `width: ${this.itemWidth}rpx;`
					}
				}
				if(this.index == 0 || (this.index == 1 && this.listStyle != -1 && this.listStyle != 1) || (this.index == 2 && this.listStyle != -1 && this.listStyle != 1 && this.listStyle != 2) || this.listStyle == 0) {
					style += `padding-top: 0;`
				}else {
					style += `padding-top: 20rpx;`
				}
				return style
			},
			appGoodsStyle() {
				let style = `width: 100%;border-radius: ${this.c_border_top}rpx ${this.c_border_top}rpx ${this.c_border_bottom}rpx ${this.c_border_bottom}rpx;background-color: ${this.goodsEndColor};`;
				if(this.listStyle == 0) {
					style += `width: ${this.scrollWidth}rpx;`
				}
				if(this.goodsStyle == 2) {
					style += `border: 2rpx solid #CCCCCC;`
				}else if(this.goodsBorderColor){
					style += `border: 2rpx solid ${this.goodsBorderColor};`
				}
				if(this.index == 0 && this.listStyle == 0) {
					style += `margin-left: 0;`
				}
				if(this.listStyle == -1 && ['flash_sale','miaosha'].indexOf(this.goods.sign) !== -1) {
					style += `height: 276rpx;`
				}
				return style;
			},
			btnStyle() {
				let style = '';
				if(this.buyBtnStyle > 2) {
					style += `border-radius: 24rpx;`
				}
				if(this.buyBtnStyle % 2 == 1) {
					style += `background-color: ${this.buttonColor ? this.buttonColor : this.themeColor.color};`
				}else if(this.buyBtnStyle % 2 == 0) {
					style += `color: ${this.buttonColor};border: 2rpx solid ${this.buttonColor}`
				}
				return style;
			},
			compositionStyle() {
				let style = `border-top-left-radius: ${this.c_border_top}rpx;overflow: hidden;flex-shrink: 0;`;
				if(this.listStyle == -1) {
					style += `width: 342rpx;height: 100%;border-bottom-left-radius: ${this.c_border_bottom}rpx;`
				}else if(this.listStyle == 1) {
					style += `width: 100%;height: 452rpx;border-top-right-radius: ${this.c_border_top}rpx;`
				}else if(this.listStyle == 2) {
					style += `width: 100%;height: 220rpx;border-top-right-radius: ${this.c_border_top}rpx;`
				}
				return style;
			}
		},
		destroyed() {
			clearTimeout(this.countdown)
		},
		watch: {
			'attrGoods.attrShow': {
				handler(nVal) {
					this.$emit('show',nVal)
	            },
	            deep: true,
	            immediate: true
			}
		},
		methods: {
			getTime() {
				this.time = this.time  - 1;
				let dd = 0;
				let hh = parseInt(this.time / 3600);
				let h = this.time % 3600;
				let mm = parseInt(h / 60);
				let ss = h % 60
				this.hour = hh < 10 ? '0' + hh.toString() : hh;
				this.min = mm < 10 ? '0' + mm.toString() : mm;
				this.sec = ss < 10 ? '0' + ss.toString() : ss;
				if(this.time < 1) {
					this.countTime();
					clearTimeout(this.countdown)
				}
			},
			countTime() {
				this.endHeight = 52
				if(this.listStyle == 2) {
					this.endImage = this.diyImg.small_end;
					this.endHeight = 56
				}else if(this.listStyle == 3) {
					this.endImage = this.diyImg.middle_end;
				}else if(this.listStyle == 0) {
					this.endImage = this.diyImg.big_end;
				}else {
					this.endImage = this.diyImg[this.goods.sign + '_end'];
					this.endHeight = 80
				}
			},
			route_go(e) {
				// #ifndef MP-BAIDU
				if (e.video_url && this.getVideo == 1) {
					// #ifdef MP
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${e.id}&sign=${e.sign}`
					});
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url: e.page_url
					});
					// #endif
				} else {
					uni.navigateTo({
						url: e.page_url
					});
				}
				// #endif

				// #ifdef MP-BAIDU
				uni.navigateTo({
					url: e.page_url
				});
				// #endif
			},
			clickBtn() {
				if(this.buy) {
					this.specification(this.goods)
					this.$emit('click', this.goods)
				}else if(this.click_btn || this.click) {
					this.$emit('click', this.goods)
				}else {
					this.route_go(this.goods);
				}
			},
			toDetail() {
				if(this.click) {
					this.$emit('click', this.goods)
				}else {
					this.route_go(this.goods);
				}
			},
			specification(goods) {
				this.attrGoods.select = null;
				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) {
						this.attrGoods.goods = Object.assign(goods, e.data);
						this.$emit('show',true)
						this.attrGoods.attrShow = true;
					} else {
						uni.showToast({
							title: e.msg,
							icon: 'none'
						})
					}
				})
			},
			checkClick({item}) {
				this.attrGoods.select = item;
			},
			cartResult({checked}) {
				this.$emit('cart',checked)
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-goods {
		background-color: #FFFFFF;
		flex-shrink: 0;
		font-size: 28rpx;
		position: relative;
		height: 100%;
		.goods-tag {
			position: absolute;
			top: 0;
			left: 0;
			width: 64rpx;
			height: 64rpx;
			z-index: 10;
		}
		.out-dialog {
			background-color: rgba(0,0,0,.5);
			position: absolute;
			top: 0;
			left: 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.timing {
			font-size: 32rpx;
			margin: 0 6rpx;
			padding: 0 8rpx;
			height: 52rpx;
			line-height: 52rpx;
			border-radius: 4rpx;
			background-color: #333333;
			color: #FFFFFF;
			font-weight: 500;
		}
		.countdown-info {
			background: linear-gradient(135deg, #FFE3D6 0%, #FFEADA 43%, #FFF0E8 61%, #FFD0B7 100%);
			&.big {
				height: 56rpx;
				font-size: 24rpx;
				padding: 0 20rpx;
				padding-right: 16rpx;
				.timing {
					padding: 0 4rpx;
					height: 40rpx;
					line-height: 40rpx;
					margin: 0 4rpx;
					font-size: 24rpx;
				}
			}
			&.small {
				height: 52rpx;
				font-size: 20rpx;
				padding: 0 10rpx;
				padding-right: 8rpx;
				.timing {
					padding: 0 2rpx;
					height: 32rpx;
					line-height: 32rpx;
					margin: 0 2rpx;
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}
		.activity-info {
			position: relative;
			height: 80rpx;
			width: 100%;
			image {
				width: 100%;
				height: 100%;
			}
			.countdown {
				position: absolute;
				right: 14rpx;
				top: 0;
				height: 80rpx;
				font-size: 28rpx;
				.title {
					margin-right: 14rpx;
				}
			}
		}
		.end-info {
			width: 100%;
			display: block;
		}
		&.list {
			width: 100%;
			height: 256rpx;
			&.long {
				height: 276rpx;
			}
			.goods-cover {
				flex-shrink: 0;
				height: 100%;
				width: 256rpx;
			}
			.goods-info {
				height: 100%;
				&.no-tag {
					padding: 16rpx 20rpx;
				}
			}
		}
		&.scroll {
			width: 208rpx;
			
			margin-left: 16rpx;
			&.is-index {
				margin-left: 20rpx;
				.goods-info {
					padding: 16rpx 10rpx;
				}
			}
			.goods-info {
				padding: 16rpx;
				.goods-top {
					.goods-extra {
						.sales-info {
							max-width: 100%;
							view {
								max-width: 100%;
								display: inline-block;
							}
						}
					}
				}
			}
			.goods-cover {
				height: 208rpx;
			}
		}
		&.third {
			.goods-info {
				padding: 16rpx;
				.goods-top {
					.goods-extra {
						.sales-info {
							max-width: 100%;
							view {
								display: inline-block;
							}
						}
					}
				}
			}
		}
		.goods-cover {
			width: 100%;
			display: block;
		}
		.goods-info {
			padding: 20rpx;
			&.main-center {
				text-align: center;
			}
			.goods-top {
				.list-countdown {
					height: 36rpx;
					color: #999999;
					font-size: 24rpx;
					margin-top: 10rpx;
					.timing {
						height: 36rpx;
						font-size: 24rpx;
						line-height: 36rpx;
						padding: 0 4rpx;
						background-color: #F3F3F3;
						color: #999999;
						font-weight: 400;
					}
					&+.goods-extra {
						padding: 10rpx 0 16rpx;
					}
				}
				.goods-name {
					word-break: break-all;
					text-align: left;
					line-height: 36rpx;
				}
				.tag {
					display: inline-block;
					margin-right: 20rpx;
					padding: 0 12rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 8rpx;
					color: #FFFFFF;
					font-size: 24rpx;
				}
				.goods-extra {
					width: 100%;
					padding-top: 16rpx;
					font-size: 22rpx;
					color: #999999;
					&.small-margin{
						padding: 10rpx 0;
					}
					&.dir-top-nowrap {
						padding: 6rpx 0;
					}
					.extra-info {
						font-size: 24rpx;
						color: #999999;   
					}
					.sales-info {
						max-width: 50%;
						&.all {
							max-width: 100%;
						}
						view {
							color: #FF812D;
							height: 30rpx;
							line-height: 26rpx;
							border-radius: 15rpx;
							border: 2rpx solid #FF812D;
							padding: 0 8rpx;
							font-size: 20rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
			.price-content {
				.sales {
					margin-top: 6rpx;
				}
				.goods-price {
					font-family: Alibaba;
					&.overflow {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					.price-int {
						font-size: #{40rpx};
						font-weight: 500;
						white-space: nowrap;
						&.text {
							font-size: 34rpx;
						}
						&.list-style-string {
							font-size: 36rpx;
						}
					}
					.price-float {
						font-size: #{28rpx};
						white-space: nowrap;
					}
					.price-string {
						white-space: nowrap;
						margin: 0 5rpx;
						font-size: #{28rpx};
					}
					&.small {
						.price-int {
							font-size: #{32rpx};
							&.text {
								font-size: 30rpx;
							}
							&.list-style-string {
								font-size: 28rpx;
							}
						}
						.price-float {
							font-size: #{24rpx};
						}
						.price-string {
							margin: 0 3rpx;
							font-size: #{20rpx};
						}
					}
				}
				.original-price {
					font-size: 24rpx;
					color: #999999;
					text-decoration: line-through;
					&.overflow {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.goods-member-price {
					font-size: 20rpx;
					height: 28rpx;
					line-height: 28rpx;
					padding: 0 10rpx;
					background-color: rgba(255, 69, 68, 0.1);
					margin-top: -3rpx;
					border-radius: 4rpx;
					display: inline-block;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					max-width: 100%;
				}
			}
			.sales {
				color: #999999;
				font-size: 24rpx;
			}
			.sales-progress {
				flex-shrink: 0;
				&.line {
					width: 100%;
				}
				&.bottom {
					margin: 20rpx 0;
				}
				i {
					font-size: 22rpx;
					margin-right: 6rpx;
				}
				.show-sale {
					height: 28rpx;
					font-size: 20rpx;
					line-height: 26rpx;
					color: #ff4544;
					font-weight: 600;
				}
				.progress {
					height: 28rpx;
					line-height: 24rpx;
					text-align: center;
					border-radius: 14rpx;
					border: 2rpx solid #ff4544;
					font-size: 20rpx;
					color: #ff4544;
					position: relative;
					&.short {
						width: 284rpx;
					}
					.line {
						height: 16rpx;
						width: 2rpx;
						background-color: #ff4544;
						margin: 0 6rpx;
					}
					>view:first-of-type {
						font-weight: 600;
					}
					.rate {
						position: absolute;
						top: 0;
						left: 0;
						min-width: 26rpx;
						height: 26rpx;
						background: #FF4544;
						border-radius: 13rpx;
						opacity: 0.25;
					}
				}
			}
			.buy-btn-class {
				color: #FFFFFF;
				height: 48rpx;
				width: 120rpx;
				border-radius: 4rpx;
				font-size: 24rpx;
				flex-shrink: 0;
				&.big-btn {
					width: 136rpx;
					height: 52rpx;
					font-size: 28rpx;
				}
			}
		}
	}
    //#ifdef MP-BAIDU || MP-TOUTIAO
    @font-face {
      font-family: 'iconfont';  /* Project id 1819490 */
      src: url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.woff2?t=1628318185237') format('woff2'),
           url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.woff?t=1628318185237') format('woff'),
           url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.ttf?t=1628318185237') format('truetype');
    }
    .iconfont{
        font-family:"iconfont" !important;
        font-size:12px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
    //#endif
</style>