qimall/addons/Store/backend/views/components/diy/store-commodity-classify-group/preview.php

<template id="store-commodity-classify-group-preview">
    <div class="store-commodity-classify-group-preview" :style="{background: computedStyle.searchBox }">
        <!-- 默认数据 -->
        <div class="flex-wrap" :style="{flexWrap: flexWrap}" v-if="showDefaultData">
            <div :class="[styleTypeClassArr, zoomComputed(index)]" v-for="(item,index) in defaultList" :key="index">
                <div class="diy-goods-basic" :style="goodsStyle">
                    <div class="diy-goods-image">
                        <el-image  :src="item.cover_pic ||　default_src"></el-image>
                    </div>
                    <div class="goods-info">
                        <div class="goods-name over2">'这是商品标题'</div>
                        <div class="goods-price" flex>
                            <div class="left" flex>
                                <div class="price">
                                    <span class="size1">￥</span>
                                    <span class="size2">25</span>
                                </div>
                                <div class="origin-price">￥ 30</div>
                            </div>
                            <div class="store-address">56.975km</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 有数据 -->
        <div class="flex-wrap" :style="{flexWrap: flexWrap}" v-else>
            <div :class="[styleTypeClassArr, zoomComputed(index)]" v-for="(item,index) in goodsList" :key="index">
                <div class="diy-goods-basic" :style="goodsStyle">
                    <div class="diy-goods-image">
                        <el-image  :src="item.cover_pic ||　default_src"></el-image>
                    </div>
                    <div class="goods-info">
                        <div class="goods-name over2">{{item.goods_name }}</div>
                        <div class="goods-price" flex>
                            <div class="left" flex>
                                <div class="price">
                                    <span class="size1">￥</span>
                                    <span class="size2">{{item.price}}</span>
                                </div>
                                <div class="origin-price">￥{{item.original_price }}</div>
                            </div>
                            <div class="store-address">56.975km</div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</template>
<script>
    Vue.component('store-commodity-classify-group-preview', {
        name: "store-commodity-classify-group-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#store-commodity-classify-group-preview',
        computed: {
            showDefaultData() {
                var boo = true
                if (this.activeItem.data.chooseGoods != 2) {
                    boo = false
                    if (!this.goodsList.length) {
                        boo = true
                    }
                }
                return boo
            },
            flexWrap() {
                let acceptArr = [6, 7]
                return acceptArr.indexOf(this.activeItem.data.style) != -1 ? 'nowrap' : ''
            },
            default_src() { // 默认图片
                var type = this.activeItem.data.style || 1
                return type == 1 ? 'resources/img/decorate/default_img.png' : 'resources/img/decorate/default_picture.png'
            },
            contianStyle() {
                var style = this.filterKey(this.computedStyle.searchIpts, ["margin"])
                if (!style.margin) {
                    style.margin = "10px"
                }
                return style
            },
            goodsStyle() {
                let tabItem = this.computedStyle.tabItem
                let other = this.filterKey(this.computedStyle.searchIpts, ["border"])
                let style = {
                    'background': this.computedStyle.iptBg,
                    ...other
                }
                if (tabItem && tabItem.value == 'border') style.border = '1px solid ' + (tabItem ? tabItem.color : 'transparent')
                if (tabItem && tabItem.value == 'shandow') style.boxShadow = tabItem ? '0 0 10px ' + tabItem.color : '0 0 10px rgba(226, 231, 244, 0.7)'
                return style
            },
            styleTypeClassArr() {
                var type = this.activeItem.data.style || 1
                var contentClass = []
                var result = {
                    1: 'diy-goods-contain-full',
                    2: 'diy-goods-contain',
                    3: 'diy-goods-contain1',
                    4: 'diy-goods-contain2',
                    5: 'diy-goods-contain3',
                    6: 'diy-goods-contain4',
                    7: 'diy-goods-contain5'
                }
                return contentClass.concat(result[type])
            },
            computedStyle() {
                return this.activeItem.computedStyle
            },
            searchData() {
                return this.activeItem.data
            },
            // 角标
            isShowHot() {
                var angleMark = this.activeItem.data.angleMark || null
                return angleMark && angleMark.label != 1
            },
            hotStyle() {
                var angleMark = this.activeItem.data.angleMark || null
                if (angleMark.label == 3 && angleMark.customImgUrl) {
                    return {
                        width: "76px",
                        height: "76px",
                        background: `url(${angleMark.customImgUrl}) no-repeat`,
                        backgroundSize: "76px"
                    }
                }
                return {}
            },
            hotClass() {
                var angleMark = this.activeItem.data.angleMark || null
                var obj = ["diy-goods-hot"]
                if (angleMark) {
                    var name = ["", "diy-goods-hot3", "diy-goods-hot2", "diy-goods-hot1"]
                    if (angleMark.label == 2 && angleMark.angleMarkStyle) {
                        var key = name[angleMark.angleMarkStyle.label]
                        obj.push(key)
                    }
                }
                return obj
            },
            hotName() {
                var angleMark = this.activeItem.data.angleMark || null
                if (angleMark && !angleMark.angleMarkText && angleMark.label == 2) {
                    return "热卖"
                }
                return angleMark.angleMarkText
            },
            // 购物车
            isShowGoodsBuy() { // 是否显示购物车按钮
                var showShopCart = this.activeItem.data.showShopCart
                var type = this.activeItem.data.style || 1
                if (type == 6) {
                    return false
                }
                return !(showShopCart == 2)
            },
            goodsBuySrc() {
                var shopCartData = this.activeItem.data.shopCartStyle || {}
                var imgUrl = shopCartData.src
                if (shopCartData.label == 3 || shopCartData.label == 4) {
                    return imgUrl
                }
                return ""
            },
            goodsBuyStyle() {
                var shopCartStyle = this.activeItem.computedStyle.shopCartStyle || {}
                var shopCartData = this.activeItem.data.shopCartStyle || {}
                // 类型1尺寸
                var size = ["", "3px 7px", "6px 10px", "10px 16px"]
                var small = size[shopCartStyle.sizeType] || size[1]
                // 类型2/3/4尺寸
                var size1 = ["", "22px", "28px", " 36px"]
                var small1 = size1[shopCartStyle.sizeType] || size1[1]
                var imgUrl = shopCartData.src

                // 1 2 3 4
                var handleList = [{}, {
                    borderRadius: `${shopCartStyle.borderReduis || 0}px`,
                    backgroundColor: `${shopCartStyle.backgroundColor || '#fd463e'}`,
                    color: `${shopCartStyle.color || '#fff'}`,
                    border: `1px solid ${shopCartStyle.borderColor}`,
                    padding: small
                }, {
                    borderRadius: `50%`,
                    backgroundColor: `${shopCartStyle.backgroundColor || '#fd463e'}`,
                    color: `${shopCartStyle.color || '#fff'}`,
                    border: `1px solid ${shopCartStyle.borderColor}`,
                    width: small1,
                    height: small1,
                    lineHeight: small1
                }, ]
                if (shopCartData.label == 3 || shopCartData.label == 4) {
                    return {
                        width: small1,
                        height: small1,
                        lineHeight: small1
                    }
                }
                var result = handleList[shopCartData.label || 1]
                return result
            },
            goodsBuyText() {
                var shopCartStyle = this.activeItem.data.shopCartStyle || {}
                if (shopCartStyle.label == 2) {
                    return '+'
                } else if (shopCartStyle.label == 3 || shopCartStyle.label == 4) {
                    return ""
                }
                return shopCartStyle.text || "购买"
            },
            // 几种类型变化样式
            // 权限列表
            permession() {
                var obj = {
                    showTitle: {
                        show: true,
                        color: ""
                    },
                    showSubTitle: {
                        show: true,
                        color: ""
                    },
                    goodsPrice: {
                        show: true,
                        color: ""
                    },
                    originalPrice: {
                        show: true,
                        color: ""
                    },
                    goodsSales_num: {
                        show: true,
                        color: ""
                    },
                    memberPrice: {
                        // show: false,
                        show: true,
                        color: ""
                    },
                }
                var data = this.activeItem.data.showContent || []
                var style = this.activeItem.data.style
                if (data.length) {
                    for (const key in obj) {
                        obj[key].show = false
                    }
                }
                data.map(item => {
                    var keyObj = {
                        1: {
                            key: 'showTitle',
                            filter: [1, 2, 3, 4, 5, 6, 7] // style支持的权限标识
                        },
                        2: {
                            key: 'showSubTitle',
                            filter: [1, 2]
                        },
                        3: {
                            key: 'goodsPrice',
                            filter: [1, 2, 3, 4, 5, 6, 7]
                        },
                        4: {
                            key: 'originalPrice',
                            filter: [1, 2, 3]
                        },
                        5: {
                            key: 'goodsSales_num',
                            filter: [1, 2, 3]
                        },
                        6: {
                            key: 'memberPrice',
                            filter: [1, 2, 3]
                        },
                    }
                    var target = keyObj[item.label]
                    // 存在选中 - 继续style判断是否支持
                    if (style) {
                        if (target.filter.indexOf(style) != -1) {
                            obj[target.key].show = true
                            obj[target.key].color = item.color
                        }
                    }
                })
                return obj
            }
        },
        watch: {
            "activeItem.data.goods": {
                handler(newVal, oldVal) {
                    if (newVal && !deepEqual(newVal, oldVal)) {
                        const ids = newVal.map(item => {
                            return item.params.id
                        })
                        this.getGoodsList(ids)
                    } 
                },
                immediate: true
            },
            'activeItem.data': {
                handler(newVal, oldVal) {
                    if (!newVal) {
                        return false
                    }
                    var newCommCate = newVal && newVal.commCate
                    var oldCommCate = oldVal && oldVal.commCate
                    if (newVal.chooseGoods == 2 && newCommCate) {
                        let { commCate } = newVal,count = 10;
                        if(commCate){
                            if(Array.isArray(commCate)){
                                count = newVal.cateNum
                            }else { //兼容原有逻辑
                                count = newCommCate.count
                            } 
                        }
                        this.defaultList = new Array(count).fill({})
                        console.log('this.defaultList11111',this.defaultList)
                    } else {
                        this.defaultList = [{}]
                    }

                    // 会抛出警告
                    // if (newCommCate && newCommCate.count && (newCommCate.count == oldCommCate.count)) return false
                    // if (newCommCate && newCommCate.count) {
                    //     this.defaultList = new Array(newCommCate.count).fill({})
                    // } else {
                    //     this.defaultList = [{}]
                    // }
                },
                immediate: true
            }
        },
        data() {
            return {
                defaultList: [
					{
						cover_pic:"https://shuzixiangdao.oss-cn-guangzhou.aliyuncs.com//images/2022/05/24/image_1653384878_YONsS7q4.png",
						goods_name:'【广东省东莞市-蛋糕】198元起抢购麦莎蒂斯烘焙套餐，口感细腻，造型精致，型精致',
						discount:2,
						original_price:30,
						price:28,
						sales_num:89
					}
				],
                goodsList: [],
				goodsList1:[]
            }
        },
        methods: {
            getGoodsList(ids) {
				request({
				    params: {
				        r: '/store/diy/good-list',
				        good_ids:ids,
				    },
				    method: 'get'
				}).then(res => {
				    this.goodsList = res.data.data
				})
            },
            zoomComputed(index) {
                const type = this.activeItem.data.style
                if (type == 6) {
                    if (index % 2 == 0) {
                        return "zoom"
                    }
                }
                return ""
            },
            showDetail(index) {
                const type = this.activeItem.data.style
                return !(type == 6 && index > 2)
            },
            filterKey(obj, keys) {
                var result = {}
                keys.forEach(key => {
                    for (const k in obj) {
                        if (k.indexOf(key) != -1) {
                            result[k] = obj[k]
                        }
                    }
                })
                return result
            },
        }
    });
</script>

<style lang="scss" scoped>
   .store-commodity-classify-group-preview {
	.flex-wrap {
		display: flex;
		flex-wrap: wrap;
		overflow-y: auto;
	}
	.diy-goods-contain-full {
		width: 100%;
		margin: 0;
		border-radius: 10px;
		background-color: #FFF;
		padding: 12px;
	}
    .diy-goods-contain-full+.diy-goods-contain-full {
        margin-top: 9px;
    }
	.diy-goods-basic {
		display: flex;
		margin: 0;
		.diy-goods-image {
			position: relative;
			width: 80px;
			height: 80px;
            border-radius: 10px;
            overflow: hidden;
           

		}
	}
	.goods-info {
		display: flex;
		flex: 1;
		justify-content: space-between;
		flex-direction: column;
		padding-right: 0;
		padding-left: 12px;

		.goods-name {
			font-size: 14px;
			font-weight: bold;
		}

		.goods-price {
			padding: 0;
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			color: #DB0505;

			.left {
				display: flex;
				align-items: baseline;
			}

			.price {
				font-weight: bold;
			}

			.size1 {
				font-size: 11px;
			}

			.size2 {
				font-size: 20px;
			}
		}

		.origin-price {
			text-decoration: line-through;
			color: #9a9a9a;
			font-size: 11px;
			padding-left: 6px;
		}

		.store-address {
			color: #a7a7a7;
			font-size: 11px;
		}
	}
}
</style>