自定义分享图片

components/page-component/app-goods-poster/app-poster-image.vue

@@ -2,32 +2,32 @@
     <view class="app-poster-image">
 
         <view class="goods-one dir-left-wrap" v-if="form.typesetting==1">
-            <block v-for="(item,key) in info.multi_map" :key="key">
-                <image mode="aspectFill" v-if="key <= 0" :src="item"></image>
+            <block v-for="(item,key) in info.chooseImages" :key="key">
+                <image mode="aspectFill" :src="item"></image>
             </block>
         </view>
 
         <view class="goods-two dir-left-wrap" v-else-if="form.typesetting==2">
-            <block v-for="(item,key) in info.multi_map" :key="key">
-                <image mode="aspectFill" v-if="key <= 1" :src="item"></image>
+            <block v-for="(item,key) in info.chooseImages" :key="key">
+                <image mode="aspectFill" :src="item"></image>
             </block>
         </view>
 
         <view class="goods-three dir-left-wrap" v-else-if="form.typesetting==3">
-            <block v-for="(item,key) in info.multi_map" :key="key">
-                <image mode="aspectFill" v-if="key <= 2" :src="item"></image>
+            <block v-for="(item,key) in info.chooseImages" :key="key">
+                <image mode="aspectFill":src="item"></image>
             </block>
         </view>
 
         <view class="goods-four dir-left-wrap" v-else-if="form.typesetting==4">
-            <block v-for="(item,key) in info.multi_map" :key="key">
-                <image mode="aspectFill" v-if="key <= 3" :src="item"></image>
+            <block v-for="(item,key) in info.chooseImages" :key="key">
+                <image mode="aspectFill" :src="item"></image>
             </block>
         </view>
 
         <view class="goods-five dir-left-wrap" v-else-if="form.typesetting==5">
-            <block v-for="(item,key) in info.multi_map" :key="key">
-                <image mode="aspectFill" v-if="key <= 4" :src="item"></image>
+            <block v-for="(item,key) in info.chooseImages" :key="key">
+                <image mode="aspectFill" :src="item"></image>
             </block>
         </view>
 

pages/poster/goods.vue

@@ -40,8 +40,20 @@
                             </view>
                         </view>
                     </view>
-
-                    <view class="dir-left-nowrap line">
+                    <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 images-group">
+                                <image v-for="(item,key) in info.multi_map" :key="key"
+                                        mode="aspectFill"
+                                        :src="item" @click="selectImages(key)"
+                                        :class="chooseImages.indexOf(key)!=-1?'active '+ getTheme + '-m-border':''">
+                                </image>
+                        </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>
@@ -62,6 +74,7 @@
                         </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>
@@ -166,7 +179,10 @@
                 info: {},
 
                 posterConfig: '',
-                posterGenerate: ''
+                posterGenerate: '',
+                chooseImages: [],
+                isChooseImages: true, // 是否选择图片
+                chooseImagesLen: 5, // 最多能选择几张
             }
         },
         onLoad(options) {
@@ -214,6 +230,12 @@
                     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],
@@ -245,7 +267,7 @@
                 this.$showLoading({text: '生成中'});
                 this.$request({
                     url: this.posterGenerate,
-                    data: this.selectForm
+                    data: this.selectForm,
                 }).then(info => {
                     this.$hideLoading();
                     let { code, data, msg } = info;
@@ -260,6 +282,28 @@
                 }).catch(() => {
                     this.$hideLoading();
                 })
+            },
+            selectImages(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: {
@@ -292,7 +336,7 @@
         height: 100vh;
 
         .head {
-            height: #{655rpx};
+            height: #{600rpx};
             width: 100%;
         }
 
@@ -410,5 +454,24 @@
             color: #ffffff;
             width: #{500rpx};
         }
+        .choose-images{
+            flex-direction: column;
+            align-items: start;
+            .images-group{
+                padding: 0 24rpx;
+                image{
+                    width: 120rpx;
+                    height: 120rpx;
+                    margin-bottom: 20rpx;
+                    margin-right: 20rpx;
+                    filter: grayscale(1);
+                    border: 1px solid #ddd;
+                    &.active{
+                        filter: grayscale(.0);
+                        border: 1px solid #ff0000;
+                    }
+                }
+            }
+        }
     }
 </style>