shop4.3.57/pages/poster/goods.vue

<template>
    <view class="app-layout">
        <app-layout>
            <view class="poster-goods dir-top-nowrap" v-if="loadShow">
                <view id="head" class="head box-grow-1 main-center">
                    <block v-if="selectForm.style == styleList[0].value">
                        <app-goods-poster-one :info="info" :form="selectForm"
                                              :multiple="multiple"></app-goods-poster-one>
                    </block>
                    <block v-if="selectForm.style == styleList[1].value">
                        <app-goods-poster-two :info="info" :form="selectForm"
                                              :multiple="multiple"></app-goods-poster-two>
                    </block>
                    <block v-if="selectForm.style == styleList[2].value">
                        <app-goods-poster-three :info="info" :form="selectForm"
                                                :multiple="multiple"></app-goods-poster-three>
                    </block>
                    <block v-if="selectForm.style == styleList[3].value">
                        <app-goods-poster-four :info="info" :form="selectForm"
                                               :multiple="multiple"></app-goods-poster-four>
                    </block>
                </view>
                <view class="setting box-grow-0">
                    <view class="dir-left-nowrap line">
                        <view class="box-grow-0 main-center cross-center label">
                            <icon :class="getTheme + '-m-back ' + getTheme"></icon>
                            <text>样式</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1" :class="getTheme">
                            <view v-for="(item,key) in styleList" :key="key"
                                  @click="changeStyle(item.value)"
                                  v-if="config.poster_style.indexOf(item.value.toString()) !== -1"
                                  :class="item.value == selectForm.style ? 'active ' + getTheme + '-m-border ' + getTheme : ''"
                                  class="style-input main-center cross-center"
                            >
                                <text>{{item.label}}</text>
                                <icon
                                    v-if="item.value == selectForm.style"
                                    :class="getTheme + '-m-back icon-active ' + getTheme"></icon>
                            </view>
                        </view>
                    </view>
                    <view class="dir-left-nowrap line choose-images" v-if="isChooseImages">
                        <view class="box-grow-0 main-center cross-center label">
                            <icon :class="getTheme + '-m-back ' + getTheme"></icon>
                            <text>选择图片(最多{{chooseImagesLen}}张)</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1">
                            <scroll-view scroll-x class="images-group" enable-flex="true">
                                <image v-for="(item,key) in info.multi_map" :key="key"
                                       mode="aspectFill"
                                       :src="item" @click.stop="selectImages(key)"
                                       :class="chooseImages.indexOf(key)!=-1?'active '+ getTheme + '-m-border':''">
                                </image>
                            </scroll-view>
                        </view>

                            <!--<view class="dir-left-wrap box-grow-1 images-group">
                                <view v-for="(item,key) in info.multi_map" :key="key">
                                    <image :src="item"></image>
                                </view>
                                &lt;!&ndash;<image v-for="(item,key) in info.multi_map" :key="key"
                                       mode="aspectFill"
                                       :src="item" @click.stop="selectImages(key)"
                                       :class="chooseImages.indexOf(key)!=-1?'active '+ getTheme + '-m-border':''">
                                </image>&ndash;&gt;
                            </view>-->
                    </view>
                    <view class="dir-left-nowrap line" v-else>
                        <view class="box-grow-0 main-center cross-center label">
                            <icon :class="getTheme + '-m-back ' + getTheme"></icon>
                            <text>排版</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1" :class="getTheme">
                            <view v-for="(item,key) in typesettingList" :key="key"
                                  @click="changeTypeSetting(item.value)"
                                  v-if="config.image_style.indexOf(item.value.toString()) !== -1"
                                  :class="item.value == selectForm.typesetting ? 'active ' + getTheme + '-m-border ' + getTheme : ''"
                                  class="line-input dir-left-nowrap main-center cross-center"
                            >
                                <img :src="item.pic_url" class="icon-square"
                                     :style="{'background-image': `url(${item.pic_url})`}"></img>
                                <text>{{item.label}}</text>
                                <icon v-if="item.value == selectForm.typesetting"
                                      :class="getTheme + '-m-back icon-active ' + getTheme"></icon>
                            </view>
                        </view>
                    </view>


                    <view class="dir-left-nowrap line" style="margin-bottom:5rpx">
                        <view class="box-grow-0 main-center cross-center label">
                            <icon :class="getTheme + '-m-back ' + getTheme"></icon>
                            <text>类型</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1" :class="getTheme">
                            <view v-for="(item,key) in typeList" :key="key"
                                  @click="changeType(item.value)"
                                  :class="item.value == selectForm.type ? 'active ' + getTheme + '-m-border ' + getTheme : ''"
                                  class="style-input dir-left-nowrap main-center cross-center"
                            >
                                <view v-if="item.value === 1" class="type-pure"></view>
                                <view v-if="item.value === 2" class="type-gradient"></view>
                                <text>{{item.label}}</text>
                                <icon v-if="item.value == selectForm.type"
                                      :class="getTheme + '-m-back icon-active ' + getTheme"></icon>
                            </view>
                        </view>
                    </view>

                    <view class="dir-left-nowrap line">
                        <view class="box-grow-0 main-center cross-center label" style="margin-top: 19rpx">
                            <icon :class="getTheme + '-m-back ' + getTheme"></icon>
                            <text>颜色</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1">
                            <scroll-view scroll-x class="app-scroll" enable-flex="true">
                                <view v-for="(color,key) in config.color" :key="key"
                                      @click="changeColor(color)"
                                      class="color-bg"
                                      :style="{'background': `${color}`}">
                                    <icon v-if="color == selectForm.color"
                                          :class="getTheme + '-m-back icon-active ' + getTheme"></icon>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                    <view @click="submitSave" :class="getTheme + '-m-back button main-center cross-center ' + getTheme">保存图片
                    </view>
                </view>
            </view>
        </app-layout>
    </view>
</template>

<script>
    import AppGoodsPosterOne from '../../components/page-component/app-goods-poster/app-goods-poster-one.vue';
    import AppGoodsPosterTwo from '../../components/page-component/app-goods-poster/app-goods-poster-two.vue';
    import AppGoodsPosterThree from '../../components/page-component/app-goods-poster/app-goods-poster-three.vue';
    import AppGoodsPosterFour from '../../components/page-component/app-goods-poster/app-goods-poster-four.vue';
    import {mapGetters} from "vuex";

    export default {
        name: "goods",
        components: {AppGoodsPosterOne, AppGoodsPosterTwo, AppGoodsPosterThree, AppGoodsPosterFour},
        data() {
            return {
                loadShow: false,
                styleList: [{
                    label: '样式一',
                    value: 1
                }, {
                    label: '样式二',
                    value: 2
                }, {
                    label: '样式三',
                    value: 3
                }, {
                    label: '样式四',
                    value: 4
                }],
                typesettingList: [{
                    label: '1张图',
                    value: 1,
                    pic_url: '../../static/image/poster/pic-one.png'
                }, {
                    label: '2张图',
                    value: 2,
                    pic_url: '../../static/image/poster/pic-two.png'
                }, {
                    label: '3张图',
                    value: 3,
                    pic_url: '../../static/image/poster/pic-three.png'
                }, {
                    label: '4张图',
                    value: 4,
                    pic_url: '../../static/image/poster/pic-four.png'
                }, {
                    label: '5张图',
                    value: 5,
                    pic_url: '../../static/image/poster/pic-five.png'
                }],
                typeList: [],
                colorList: [],
                selectForm: null,
                config: {
                    color: [],
                    image_style: [],
                    poster_style: []
                },
                multiple: 0,
                info: {},

                posterConfig: '',
                posterGenerate: '',
                chooseImages: [],
                isChooseImages: true, // 是否选择图片
                chooseImagesLen: 5, // 最多能选择几张
            }
        },
        onLoad(options) {
            let { poster_config, poster_generate } = options;
            if (poster_config && poster_generate) {
                this.posterConfig = unescape(poster_config);
                this.posterGenerate = unescape(poster_generate);
            } else {
                return;
            }
            this.loadData();
        },

        methods: {
            calcMultiple() {
                let query = null;

                // #ifdef MP-ALIPAY
                query = uni.createSelectorQuery();
                // #endif

                // #ifndef MP-ALIPAY
                query = uni.createSelectorQuery().in(this);
                // #endif

                query.select('#head').boundingClientRect(item => {

                    // #ifndef  MP-TOUTIAO || MP-ALIPAY
                    this.multiple = (item.height * (750 / uni.getSystemInfoSync().screenWidth) - 24 - 24) / 1334;
                    // #endif

                    // #ifdef  MP-TOUTIAO || MP-ALIPAY
                    this.multiple = 0.455;
                    // #endif

                }).exec();
            },
            loadData() {
                this.$request({
                    url: this.posterConfig,
                }).then(info => {
                    this.$hideLoading();
                    this.loadShow = true;
                    let { code, data, msg }  = info;
                    if (code === 0) {
                        this.config = data.config;
                        this.info = data.info;
                        this.info.chooseImages = [];
                        if(this.info.multi_map){
                            this.info.chooseImages.push(this.info.multi_map[0]);
                            this.chooseImages.push(0);
                        }

                        this.typeList = [{label: '纯色', value: 1}, {label: '渐变', value: 2}];
                        this.selectForm = {
                            color: this.config['color'][0],
                            style: this.config['poster_style'][0],
                            typesetting: this.config['image_style'][0],
                            type: 1
                        }
                        setTimeout(() => {
                            this.calcMultiple();
                        });
                    } else {
                        uni.showToast({title: msg,icon: 'none'});
                    }
                })
            },
            changeStyle(value) {
                this.selectForm.style = value;
            },
            changeTypeSetting(value) {
                this.selectForm.typesetting = value;
            },
            changeType(value) {
                this.selectForm.type = value;
            },
            changeColor(value) {
                this.selectForm.color = value;
            },
            submitSave() {
                this.$showLoading({text: '生成中'});
                this.$request({
                    url: this.posterGenerate,
                    data: this.selectForm,
                }).then(info => {
                    this.$hideLoading();
                    let { code, data, msg } = info;
                    if (code === 0) {
                        const pic_url = data.pic_url;
                        this.$utils.batchSave(pic_url, 'image').then(() => {
                            uni.showToast({title: '保存成功'});
                        });
                    } else {
                        uni.showToast({title: msg, icon: 'none'});
                    }
                }).catch(() => {
                    this.$hideLoading();
                })
            },
            selectImages(index){
                let findIndex = this.chooseImages.indexOf(index);
               /* let findIndex = this.info.chooseImages.findIndex(item => {
                    return item == this.info.multi_map[index]
                });*/
                if(findIndex != -1){
                    if(this.info.chooseImages.length > 1){
                        this.chooseImages.splice(this.chooseImages.indexOf(index), 1)
                        this.info.chooseImages.splice(findIndex,1)
                    }
                }else{
                    if(this.chooseImagesLen == this.info.chooseImages.length){
                        uni.showToast({title: `最多只能选择${this.chooseImagesLen}张图片`, icon: 'none'});
                        return true;
                    }
                    this.chooseImages.push(index)
                    this.info.chooseImages.push(this.info.multi_map[index])
                }

                let length = this.info.chooseImages.length;
                this.selectForm.typesetting = this.typesettingList[length-1].value;
                this.selectForm.chooseImages = this.chooseImages;
            }
        },
        computed: {
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme'
            })
        },
    }
</script>

<style scoped lang="scss">
    $box: #f7f7f7;
    .app-layout /deep/ .app-layout {
        overflow-y: auto;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }

    .app-scroll {
        width: 100%;
        white-space: nowrap;
        padding: 0 #{14rpx};
    }

    .poster-goods {
        height: 100vh;

        .head {
            height: #{600rpx};
            width: 100%;
        }

        .setting {
            padding-top: #{20rpx};
            font-size: #{24rpx};
            color: #353535;
            background: #FFFFFF;
            padding-bottom: #{48rpx};

            .line {
                margin-bottom: #{24rpx};

                .label {
                    height: #{56rpx};

                    icon {
                        background-image: url("../../static/image/poster/mark.png");
                        background-size: 100% 100%;
                        height: #{21rpx};
                        width: #{21rpx};
                        background-repeat: no-repeat;
                        margin-left: #{24rpx};
                        border-radius: 50%;
                    }

                    text {
                        line-height: 1;
                        padding-left: #{12rpx};
                        padding-right: #{26rpx - 14rpx};
                    }
                }

                .style-input {
                    position: relative;
                    height: #{56rpx};
                    width: #{120rpx};
                    background: $box;
                    border-radius: #{5rpx};
                    margin: 0 #{14rpx};

                    .type-pure {
                        height: #{32rpx};
                        width: #{32rpx};
                        margin-right: #{10rpx};
                        background: #d8d8d8;
                    }

                    .type-gradient {
                        height: #{32rpx};
                        width: #{32rpx};
                        margin-right: #{10rpx};
                        background: linear-gradient(#d8d8d8, #FFFFFF);
                    }

                }
            }

            .active {
                border-width: #{3rpx};
                border-style: solid;
                background: #FFFFFF !important;
            }

            .icon-active {
                background-image: url("../../static/image/poster/input-active.png");
                height: #{38rpx};
                width: #{38rpx};
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: #{-19rpx};
                right: #{-19rpx};
                z-index: 10;
                border-radius: 50%;
            }

            .line-input {
                position: relative;
                border-radius: #{5rpx};
                margin: 0 #{14rpx} #{14rpx};
                background: $box;
                width: #{140rpx};
                height: #{56rpx};

                .icon-square {
                    background-size: 100% 100%;
                    height: #{32rpx};
                    width: #{32rpx};
                    background-repeat: no-repeat;
                }

                text {
                    margin-left: #{10rpx};
                }
            }

            .color-bg {
                position: relative;
                display: inline-block;
                height: #{60rpx};
                width: #{60rpx};
                border-radius: #{5rpx};
                border: 1px solid #e5e5e5;
                margin-right: #{26rpx};
                margin-top: #{19rpx};
            }
        }

        .button {
            font-size: #{32rpx};
            border-radius: #{40rpx};
            height: #{68rpx};
            margin: #{34rpx} auto 0;
            color: #ffffff;
            width: #{500rpx};
        }
        .choose-images{
            flex-direction: column;
            >view{
                justify-content: start;
            }
            .images-group{
                padding: 0 24rpx;
                width: 100%;
                white-space: nowrap;
                image{
                    width: 150rpx;
                    height: 120rpx;
                    margin-right: 10rpx;
                    filter: grayscale(1);
                    border: 1px solid #ddd;
                    &.active{
                        filter: grayscale(.0);
                        border: 1px solid #ff0000;
                    }
                }
            }
        }
    }
</style>