shop4.3.57/components/page-component/app-goods-poster/app-goods-poster-one.vue

<template>
    <view class="app-goods-poster-one main-center">
        <view class="box" :style="{'background': `${background}`,'transform' : `scale(${multiple},${multiple})`}">
            <view class="head cross-center">
                <image :src="info.avatar"></image>
                <view class="nickname main-center cross-center">
                    {{info.nickname}}{{customize}}
                </view>
            </view>
            <view class="goods-image">
                <app-poster-image :form="form" :info="info"></app-poster-image>
            </view>
            <view class="end dir-left-nowrap">
                <view class="dir-top-nowrap goods-info">
                    <view class="goods-name t-omit-two">{{info.goods_name}}</view>
                    <view class="goods-price">
                        <app-poster-price :info="info"></app-poster-price>
                    </view>
                    <view class="goods-remark">{{info.extra_mark[0] ? info.extra_mark[0] : `长按识别小程序码进入`}}</view>
                </view>
                <view class="poster cross-center">
                    <image :src="info.qrcode_url"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import appPosterImage from "./app-poster-image.vue";
    import appPosterPrice from "./app-poster-price.vue";

    export default {
        name: "app-goods-poster-one",
        components: {
            appPosterImage,
            appPosterPrice
        },
        props: {
            multiple: Number,
            info: Object,
            form: Object
        },
        computed: {
            customize() {
                if (this.info.customize_text) {
                    return this.info.customize_text;
                } else {
                    return '向您推荐一个好物';
                }
            },
            background() {
                if (parseInt(this.form.type) === 2) {
                    return `linear-gradient(${this.form.color},${this.$utils.colorRgba(this.form.color, 0.5)})`;
                } else {
                    return this.form.color;
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    .app-goods-poster-one {
        height: 100%;
        width: 100%;
        padding: #{24rpx} 0;

        .box {
            transform: scale(0.46, 0.46);
            transform-origin: center top;
            /*zoom: 0.46;*/
            width: #{750rpx};
            height: #{1334rpx};
            padding: 0 #{24rpx};
            margin: auto;

            .head {
                padding-top: #{96rpx};
                margin-bottom: #{39rpx};
                width: 100%;

                image {
                    height: #{90rpx};
                    width: #{90rpx};
                    display: block;
                    border-radius: 50%;
                }

                .nickname {
                    line-height: #{54rpx};
                    padding: 0 #{24rpx};
                    margin-left: #{24rpx};
                    font-size: #{24rpx};
                    background: #f1f1f1;
                    color: #4b4b4b;
                    border-radius: #{30rpx};
                }
            }

            .goods-image {
                height: #{702rpx};
                width: 100%;
                border-radius: #{16rpx} #{16rpx} 0 0;
                overflow: hidden;
            }

            .end {
                background: #ffffff;
                height: #{311rpx};
                border-radius: 0 0 #{16rpx} #{16rpx};
                padding: #{28rpx};
                margin-top: -1px;

                .goods-info {
                    max-width: #{450rpx};

                    .goods-name {
                        font-size: #{34rpx};
                        color: #353535;
                    }

                    .goods-price {
                        margin-top: auto;
                        padding-bottom: #{65rpx};
                    }

                    .goods-remark {
                        line-height: 1;
                        color: #999999;
                        padding-bottom: #{40rpx - 28rpx};
                        font-size: #{28rpx};
                    }
                }

                .poster {
                    height: 100%;
                    margin-left: auto;

                    image {
                        height: #{230rpx};
                        width: #{230rpx};
                        display: block;
                    }
                }
            }
        }
    }
</style>