商品分享图

src/pages/goods/detail.vue

@@ -291,6 +291,38 @@
                     </li>
                 </ul>
             </div>
+            
+            <div class="explain">
+                <ul class="explain-list">
+                    <li class="item">
+                        <div class="ex-des bold">
+                            划线价格
+                        </div>
+                        <div class="ex-des">
+                            商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，<span class="bold">并非原价</span>，仅供参考。
+                        </div>
+                    </li>
+                    <li class="item">
+                        <div class="ex-des bold">
+                            未划线价格
+                        </div>
+                        <div class="ex-des">
+                            商品的<span class="bold">实时标价</span>，不因标书的差异改变性质，集体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。
+                        </div>
+                    </li>
+                    <li class="item">
+                        <div class="ex-des">
+                            商家详情页（含主图）以图片或文字标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格，集体轻易结算页面的标价、优惠条件活动规则为准。
+                        </div>
+                    </li>
+                    <li class="item">
+                        <div class="ex-des">
+                            此说明仅当价格出现比较时有效。
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
         </scroll-view>
         <img
             class="live"
@@ -418,6 +450,11 @@
         </div>
         <my-share ref="share" @share="saveImage"></my-share>
         <!-- <g-coupon ref="coupon" :goods-id="goodsId"></g-coupon> -->
+        <canvas
+            class="canvas__forward"
+            canvas-id="canvas2"
+            :disable-scroll="true"
+        ></canvas>
     </div>
 </template>
 
@@ -454,6 +491,8 @@ export default {
             layout: null,
 
             triggered: false,
+
+            canvasforwardPath: "",
         };
     },
 
@@ -495,7 +534,7 @@ export default {
         return {
             title: title,
             path: self.router.getPath(self.$mp.page.route, obj),
-            imageUrl: self.goods.tradeSwiper.mainImage,
+            imageUrl: self.canvasforwardPath || self.goods.tradeSwiper.mainImage,
         };
     },
 
@@ -574,6 +613,7 @@ export default {
                             this.goods.itemDetail.detailImage = this.goods.tradeSwiper.images;
                         }
                         this.ifSpec();
+                        self.creationShare2();
                     } else {
                         self.fn
                             .showModal({
@@ -985,6 +1025,111 @@ export default {
                 });
             });
         },
+        
+        // 创建分享图
+        creationShare2() {
+            const self = this;
+            const ctx = uni.createCanvasContext("canvas2", self);
+
+            return new Promise((resolve) => {
+                self.router.getScene(self.$mp.query).then((res) => {
+                    res.uid = self.user.id;
+                    res.shopId = self.activeShop.id;
+
+                    Promise.all([
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_bg.jpg",
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_bg_box.png",
+                        }),
+                        uni.getImageInfo({
+                            src: self.goods.tradeSwiper.mainImage,
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_tag1.jpg",
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_tag2.png",
+                        }),
+                    ]).then((res) => {
+                        // 背景
+                        ctx.drawImage(res[0][1].path, 0, 0, 500, 400);
+
+                        // 标题
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("厂商直邮", 205, 40);
+                        ctx.stroke();
+
+                        ctx.setFontSize(24);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("免费包邮，厂商快递直邮到家", 100, 75);
+                        ctx.stroke();
+
+                        // 背景box
+                        ctx.drawImage(res[1][1].path, 10, 92, 477, 292);
+
+                        // // 商品图片
+                        ctx.drawImage(res[2][1].path, 20, 100, 275, 275);
+
+                        // 特惠商品
+                        ctx.drawImage(res[3][1].path, 310, 110, 157, 46);
+
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("特惠商品", 330, 144);
+
+                        // 价格
+                        let itemPrice = self.goods.priceInfo.nowPrice / 100;
+                        ctx.setFontSize(38);
+                        ctx.setFillStyle("#f00");
+                        ctx.fillText("￥" + itemPrice, 320, 220);
+                        ctx.stroke();
+
+                        // 价格2
+                        if(self.goods.priceInfo.oldPrice){
+                            let tagPrice = self.goods.priceInfo.oldPrice / 100;
+                            ctx.setFontSize(28);
+                            ctx.setFillStyle("#999");
+                            ctx.fillText("￥" + tagPrice, 325, 265);
+                            ctx.fillRect(
+                                328,
+                                253,
+                                (String(tagPrice).length + 1) * 20,
+                                2
+                            );
+                            ctx.stroke();
+                        }
+
+                        // buy
+                        ctx.drawImage(res[4][1].path, 307, 300, 170, 70);
+
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("立即购买", 335, 345);
+
+                        ctx.draw();
+
+                        setTimeout(() => {
+                            // 生成临时路径
+                            uni.canvasToTempFilePath({
+                                canvasId: "canvas2",
+                                fileType: "jpg",
+                                success: function (res) {
+                                    // self.canvasShow = false
+                                    self.canvasforwardPath = res.tempFilePath;
+                                },
+                            });
+                        }, 100);
+                    });
+                });
+            });
+        },
         viewImg() {
             let self = this;
             //查看图片
@@ -1940,4 +2085,42 @@ page {
         padding-top: px(20);
     }
 }
+.canvas__forward {
+    width: 500px;
+    height: 400px;
+    background-color: #fff;
+    visibility: hidden;
+    opacity: 0;
+}
+.explain{
+    padding: px(60) px(40);
+    background-color: #fff;
+   .item{
+       margin-bottom: px(30);
+       line-height: 1.4;
+       font-size: px(38);
+       color: #666;
+   } 
+   .ex-des:first-child{
+       position: relative;
+       &::after{
+           content: "";
+           display: block;
+           width: px(14);
+           height: px(14);
+           border-radius: 50%;
+           position: absolute;
+           top: px(23);
+           left: px(-20);
+           z-index: 10;
+           background-color: rgb(152, 81, 84);
+       }
+   }
+   .ex-des~.ex-des{
+       margin-top: px(10);
+   }
+}
+.bold{
+    font-weight: bold;;
+}
 </style>

src/pages/goods/index.vue

@@ -187,7 +187,7 @@ export default {
             categoryDis: true,
             index: 1,
             loginAfter: false,
-            curTab: "1",
+            curTab: "0",
             cateId: "",
             productCount: {
                 selfProductCount: "",

src/pages/recommend/detail.vue

@@ -57,7 +57,7 @@
                 </div>
                 <div class="info__bottom">
                     <div class="info__title info__deliveryDesc">
-                        发货：{{activityData.deliveryDesc}}
+                        发货：{{ activityData.deliveryDesc }}
                     </div>
                 </div>
                 <div
@@ -212,9 +212,33 @@
                 ></my-image>
             </div>
 
-            <!-- 装修 -->
-            <div v-if="layout">
-                <m-custom :layout="layout"></m-custom>
+            <div class="explain">
+                <ul class="explain-list">
+                    <li class="item">
+                        <div class="ex-des bold">划线价格</div>
+                        <div class="ex-des">
+                            商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，<span
+                                class="bold"
+                                >并非原价</span
+                            >，仅供参考。
+                        </div>
+                    </li>
+                    <li class="item">
+                        <div class="ex-des bold">未划线价格</div>
+                        <div class="ex-des">
+                            商品的<span class="bold">实时标价</span
+                            >，不因标书的差异改变性质，集体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。
+                        </div>
+                    </li>
+                    <li class="item">
+                        <div class="ex-des">
+                            商家详情页（含主图）以图片或文字标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格，集体轻易结算页面的标价、优惠条件活动规则为准。
+                        </div>
+                    </li>
+                    <li class="item">
+                        <div class="ex-des">此说明仅当价格出现比较时有效。</div>
+                    </li>
+                </ul>
             </div>
         </scroll-view>
 
@@ -298,7 +322,7 @@
                 </div>
             </div>
         </div>
-                <div
+        <div
             class="canvas"
             v-show="canvasShow"
             @touchmove.stop=""
@@ -323,6 +347,11 @@
         <my-share ref="share" @share="saveImage" :hideMany="true"></my-share>
         <g-spec ref="spec" :goods="goods" :spec.sync="spec"></g-spec>
         <!-- <g-coupon ref="coupon" :goods-id="goodsId"></g-coupon> -->
+        <canvas
+            class="canvas__forward"
+            canvas-id="canvas2"
+            :disable-scroll="true"
+        ></canvas>
     </div>
 </template>
 
@@ -358,6 +387,8 @@ export default {
 
             triggered: false,
             activityData: {},
+
+            canvasforwardPath: "",
         };
     },
 
@@ -394,7 +425,7 @@ export default {
         return {
             title: title,
             path: self.router.getPath(self.$mp.page.route, obj),
-            imageUrl: self.goods.pictureUrls[0],
+            imageUrl: self.canvasforwardPath || self.goods.pictureUrls[0],
         };
     },
 
@@ -433,6 +464,7 @@ export default {
                         self.getActivity(data.activityNo);
                         self.fn.setTitle(data.name);
                         console.log(self.goods);
+                        self.creationShare2();
                     } else {
                         self.fn
                             .showModal({
@@ -688,7 +720,6 @@ export default {
             }
         },
 
-        
         // 保存图片到相册
         async saveImage(type) {
             const self = this;
@@ -736,7 +767,6 @@ export default {
             }
         },
 
-        
         // 创建分享图
         creationShare() {
             const self = this;
@@ -747,7 +777,6 @@ export default {
             });
             return new Promise((resolve) => {
                 self.router.getScene(self.$mp.query).then((res) => {
-                    
                     res.uid = self.user.id;
                     res.shopId = self.activeShop.id;
 
@@ -931,6 +960,111 @@ export default {
                 });
             });
         },
+
+        // 创建分享图
+        creationShare2() {
+            const self = this;
+            const ctx = uni.createCanvasContext("canvas2", self);
+
+            return new Promise((resolve) => {
+                self.router.getScene(self.$mp.query).then((res) => {
+                    res.uid = self.user.id;
+                    res.shopId = self.activeShop.id;
+
+                    Promise.all([
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_bg.jpg",
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_bg_box.png",
+                        }),
+                        uni.getImageInfo({
+                            src: self.goods.pictureUrls[0],
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_tag1.jpg",
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_tag2.png",
+                        }),
+                    ]).then((res) => {
+                        // 背景
+                        ctx.drawImage(res[0][1].path, 0, 0, 500, 400);
+
+                        // 标题
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("厂商直邮", 205, 40);
+                        ctx.stroke();
+
+                        ctx.setFontSize(24);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("免费包邮，厂商快递直邮到家", 100, 75);
+                        ctx.stroke();
+
+                        // 背景box
+                        ctx.drawImage(res[1][1].path, 10, 92, 477, 292);
+
+                        // // 商品图片
+                        ctx.drawImage(res[2][1].path, 20, 100, 275, 275);
+
+                        // 特惠商品
+                        ctx.drawImage(res[3][1].path, 310, 110, 157, 46);
+
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("特惠商品", 330, 144);
+
+                        // 价格
+                        let itemPrice = self.goods.itemPrice / 100;
+                        ctx.setFontSize(38);
+                        ctx.setFillStyle("#f00");
+                        ctx.fillText("￥" + itemPrice, 320, 220);
+                        ctx.stroke();
+
+                        // 价格2
+                        if (self.goods.tagPrice) {
+                            let tagPrice = self.goods.tagPrice / 100;
+                            ctx.setFontSize(28);
+                            ctx.setFillStyle("#999");
+                            ctx.fillText("￥" + tagPrice, 325, 265);
+                            ctx.fillRect(
+                                328,
+                                253,
+                                (String(tagPrice).length + 1) * 20,
+                                2
+                            );
+                            ctx.stroke();
+                        }
+
+                        // buy
+                        ctx.drawImage(res[4][1].path, 307, 300, 170, 70);
+
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("立即购买", 335, 345);
+
+                        ctx.draw();
+
+                        setTimeout(() => {
+                            // 生成临时路径
+                            uni.canvasToTempFilePath({
+                                canvasId: "canvas2",
+                                fileType: "jpg",
+                                success: function (res) {
+                                    // self.canvasShow = false
+                                    self.canvasforwardPath = res.tempFilePath;
+                                },
+                            });
+                        }, 100);
+                    });
+                });
+            });
+        },
     },
 
     // 数据计算
@@ -1436,8 +1570,16 @@ page {
         width: px(920);
         height: px(1483);
         background-color: #fff;
+        display: none;
     }
 }
+.canvas__forward {
+    width: 500px;
+    height: 400px;
+    background-color: #fff;
+    visibility: hidden;
+    opacity: 0;
+}
 
 .shop-recommend {
     margin-top: px(30);
@@ -1715,9 +1857,40 @@ page {
         }
     }
 }
-.info__deliveryDesc{
+.info__deliveryDesc {
     font-size: px(42);
     color: #666;
     display: block;
 }
+.explain {
+    padding: px(60) px(40);
+    background-color: #fff;
+    .item {
+        margin-bottom: px(30);
+        line-height: 1.4;
+        font-size: px(38);
+        color: #666;
+    }
+    .ex-des:first-child {
+        position: relative;
+        &::after {
+            content: "";
+            display: block;
+            width: px(14);
+            height: px(14);
+            border-radius: 50%;
+            position: absolute;
+            top: px(23);
+            left: px(-20);
+            z-index: 10;
+            background-color: rgb(152, 81, 84);
+        }
+    }
+    .ex-des ~ .ex-des {
+        margin-top: px(10);
+    }
+}
+.bold {
+    font-weight: bold;
+}
 </style>

src/pages/user/index.vue

@@ -279,7 +279,7 @@
         </div>
 
         <div class="web-support">
-            <p class="text">0.0.88</p>
+            <p class="text">0.0.89</p>
             <!-- <div class="num" @click="makeCall">400-629-6782</div> -->
         </div>
     </div>