分享功能

虚拟产品购买提示

src/components/qiqb-share/notice-share.vue

@@ -0,0 +1,372 @@
+<template>
+  <view class="qiqb-ctx" v-bind:class="{ on: show == true }">
+    <view class="qiqb-ctx-box">
+      <text @click="close"></text>
+      <canvas
+        canvas-id="ctx"
+        style="width: 230px; height: 380px"
+        v-show="img_show"
+      ></canvas>
+    </view>
+    <view class="qiqb-ctx-btns u-border-bottom">
+      <view>点击下方按钮保存至相册</view>
+      <view></view>
+      <view>
+        <!-- <text @click="shareFriend">微信好友</text> -->
+        <!-- <text @click="shareTimeline">分享朋友圈</text> -->
+        <text @click="down">保存图片</text></view
+      >
+    </view>
+    <view class="qiqb-ctx-close" @click="close">取消</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "share",
+  data() {
+    return {
+      show: false,
+      img_show: true,
+      mode: "img",
+      opt: {
+        qrcode: "",
+        detail: {},
+        type: "",
+      },
+      userinfo: uni.getStorageSync("userinfo"),
+    };
+  },
+  methods: {
+    init(opt) {
+      console.log(opt, "===");
+      this.opt = opt;
+      let ctx = uni.createCanvasContext("ctx", this);
+
+      // 绘制背景
+      this.drawBg(ctx, 230, 380, 1, "#fff");
+
+      // 下载图片（⚠️ 注意：域名要在小程序后台配置 downloadFile 合法域名）
+      uni.downloadFile({
+        url: opt.detail.thumb,
+        success: (res1) => {
+          let img = res1.tempFilePath;
+          uni.downloadFile({
+            url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/static/home.png",
+            success: (res2) => {
+              let photo = res2.tempFilePath;
+              uni.downloadFile({
+                url: opt.qrcode,
+                success: (res3) => {
+                  let qrcode = res3.tempFilePath;
+
+                  // 绘制图片
+                  this.drawImg(ctx, photo, 10, 8, 30, 30, 0);
+                  this.drawImg(ctx, img, 0, 45, 230, 172, 0);
+                  this.drawImg(ctx, qrcode, 80, 292, 65, 65, 0);
+
+                  // 绘制文字
+                  // this.drawTxtOne(ctx, '茶付宝', 60, 24, 80, '#222', 13, true)
+                  this.drawTxtOne(
+                    ctx,
+                    "推荐一个好文给你，请查收",
+                    45,
+                    28,
+                    200,
+                    "#666",
+                    12,
+                    false
+                  );
+                  this.drawTxtTwo(
+                    ctx,
+                    opt.detail.title,
+                    15,
+                    250,
+                    190,
+                    20,
+                    "#000",
+                    12
+                  );
+
+                  // 必须调用 draw 才能生效
+                  ctx.draw(false, () => {
+                    this.show = true;
+                    this.img_show = true;
+                    uni.hideLoading()
+                  });
+                },
+              });
+            },
+          });
+        },
+      });
+    },
+    close() {
+      this.show = false;
+      this.img_show = false;
+    },
+    down() {
+      uni.showLoading({ title: "生成中" });
+      uni.canvasToTempFilePath(
+        {
+          canvasId: "ctx",
+          quality: 1,
+          success: (res) => {
+            uni.hideLoading();
+            console.log(res);
+            this.$emit("down", res);
+            this.show = false;
+            this.img_show = false;
+            // 保存到相册 自定义实现
+            uni.saveImageToPhotosAlbum({
+              filePath: res.tempFilePath,
+              success: () => {
+                uni.hideLoading();
+                uni.showToast({
+                  title: "已保存到相册",
+                  icon: "success",
+                });
+              },
+              fail: (err) => {
+                console.error("保存失败", err);
+                uni.hideLoading();
+                uni.showToast({
+                  title: "保存失败",
+                  icon: "none",
+                });
+              },
+            });
+          },
+          fail: (err) => {
+            console.error("生成失败", err);
+          },
+        },
+        this
+      );
+    },
+    // 绘制背景 宽度 高度 圆角 颜色
+    drawBg(ctx, w, h, r, color) {
+      let x = 0;
+      let y = 0;
+      ctx.setFillStyle(color);
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+      ctx.fill();
+    },
+    // 绘制图片 图片地址 距离左边 距离上边 宽度 高度 圆角
+    drawImg(ctx, img, x, y, w, h, r) {
+      let self = this;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+      ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
+      ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
+      ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
+      ctx.clip();
+      ctx.drawImage(img, x, y, w, h);
+      ctx.restore();
+    },
+    // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
+    drawTxtOne(ctx, text, x, y, maxWidth, color, size, bold) {
+      ctx.save();
+      ctx.beginPath();
+      let chr = text.split("");
+      let temp = "";
+      let row = [];
+      ctx.setFontSize(size);
+      ctx.setFillStyle(color);
+      for (let a = 0; a < chr.length; a++) {
+        if (ctx.measureText(temp).width < maxWidth) {
+          temp += chr[a];
+        }
+      }
+      row.push(temp);
+      if (ctx.measureText(temp).width > maxWidth) row[0] = row[0] + "...";
+
+      for (var b = 0; b < row.length; b++) {
+        ctx.fillStyle = color;
+        if (bold) {
+          ctx.font = "normal bold " + size + "px sans-serif";
+        } else {
+          ctx.font = "normal " + size + "px sans-serif";
+        }
+        ctx.fillText(row[b], x, y);
+      }
+    },
+    // 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
+    drawTxtTwo(ctx, text, x, y, maxWidth, lineHeight, color, size) {
+      ctx.save();
+      ctx.beginPath();
+      let chr = text.split("");
+      let temp = "";
+      let row = [];
+      ctx.setFontSize(size);
+      ctx.setFillStyle(color);
+      for (let a = 0; a < chr.length; a++) {
+        if (ctx.measureText(temp).width < maxWidth) {
+          temp += chr[a];
+        } else {
+          a--;
+          row.push(temp);
+          temp = "";
+        }
+      }
+      row.push(temp);
+      if (row.length > 2) {
+        let rowCut = row.slice(0, 2);
+        let rowPart = rowCut[1];
+        let test = "";
+        let empty = [];
+        for (var a = 0; a < rowPart.length; a++) {
+          if (ctx.measureText(test).width < maxWidth) {
+            test += rowPart[a];
+          } else {
+            break;
+          }
+        }
+        empty.push(test);
+        var group = empty[0] + "...";
+        rowCut.splice(1, 1, group);
+        row = rowCut;
+      }
+      for (var b = 0; b < row.length; b++) {
+        ctx.fillStyle = color;
+        ctx.font = "normal " + size + "px sans-serif";
+        ctx.fillText(row[b], x, y + b * lineHeight, 300);
+      }
+    },
+    // 绘制删除线文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
+    drawTxtDel(ctx, txt, x, y, h, color, size) {
+      ctx.fillStyle = color;
+      ctx.font = "normal " + size + "px sans-serif";
+      ctx.fillText(txt, x, y);
+
+      ctx.beginPath();
+      let width = ctx.measureText(txt).width;
+      ctx.rect(x, y - h, width, 1);
+      ctx.fillStyle = color;
+      ctx.fill();
+    },
+  },
+};
+</script>
+
+<style>
+.qiqb-ctx {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  display: flex;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: all 0.3s;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+.qiqb-ctx.on {
+  z-index: 2000;
+  opacity: 1;
+}
+.qiqb-ctx-box {
+  position: relative;
+  display: flex;
+  padding: 30upx 0 40upx;
+  width: 750upx;
+  justify-content: center;
+}
+.qiqb-ctx-box text {
+  position: absolute;
+  top: -40upx;
+  right: 145upx;
+  display: inline-flex;
+  width: 47upx;
+  height: 47upx;
+  background: url(https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/close.png);
+  background-size: 100% 100%;
+}
+.qiqb-ctx-btns {
+  display: flex;
+  width: 750upx;
+  height: 280upx;
+  border-radius: 20upx 20upx 0 0;
+  background: #fff;
+  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
+}
+.qiqb-ctx-btns view:nth-child(1) {
+  display: flex;
+  padding-top: 10upx;
+  height: 80upx;
+  font-weight: 700;
+  font-size: 30upx;
+  align-items: center;
+}
+.qiqb-ctx-btns view:nth-child(2) {
+  height: 80upx;
+  color: #666;
+  font-size: 24upx;
+}
+.qiqb-ctx-btns view:nth-child(3) {
+  display: flex;
+  padding-bottom: 30upx;
+  font-size: 26upx;
+  flex-direction: row;
+  align-items: center;
+}
+.qiqb-ctx-btns view:nth-child(3) text {
+  display: flex;
+  width: 250upx;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.qiqb-ctx-btns view:nth-child(3) text:nth-child(1)::before {
+  display: inline-flex;
+  margin-bottom: 20upx;
+  width: 86upx;
+  height: 86upx;
+  background: url(https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/3.png);
+  background-size: 100% 100%;
+  content: "";
+}
+.qiqb-ctx-btns view:nth-child(3) text:nth-child(2)::before {
+  display: inline-flex;
+  margin-bottom: 20upx;
+  width: 86upx;
+  height: 86upx;
+  background: url(https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/3.png);
+  background-size: 100% 100%;
+  content: "";
+}
+.qiqb-ctx-btns view:nth-child(3) text:nth-child(3)::before {
+  display: inline-flex;
+  margin-bottom: 20upx;
+  width: 86upx;
+  height: 86upx;
+  background: url(https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/3.png);
+  background-size: 100% 100%;
+  content: "";
+}
+.qiqb-ctx-close {
+  display: flex;
+  padding-bottom: 50upx;
+  width: 100%;
+  height: 150upx;
+  background: #fff;
+  font-size: 32upx;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/components/qiqb-share/qiqb-share.vue

@@ -0,0 +1,393 @@
+<template>
+  <view class="qiqb-ctx" v-bind:class="{ on: show == true }">
+    <view class="qiqb-ctx-box">
+      <text @click="close"></text>
+      <canvas
+        canvas-id="ctx"
+        style="width: 230px; height: 430px"
+        v-show="img_show"
+      ></canvas>
+    </view>
+    <view class="qiqb-ctx-btns u-border-bottom">
+      <view>点击下方按钮保存至相册</view>
+      <view></view>
+      <view>
+        <!-- <text @click="shareFriend">微信好友</text> -->
+        <!-- <text @click="shareTimeline">分享朋友圈</text> -->
+        <text @click="down">保存图片</text></view
+      >
+    </view>
+    <view class="qiqb-ctx-close" @click="close">取消</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "share",
+  data() {
+    return {
+      show: false,
+      img_show: true,
+      mode: "img",
+      opt: {
+        qrcode: "",
+        goods: {},
+        type: "",
+      },
+      userinfo: uni.getStorageSync("userinfo"),
+    };
+  },
+  methods: {
+    init(opt) {
+      console.log(opt, "===");
+      this.opt = opt;
+      let ctx = uni.createCanvasContext("ctx", this);
+
+      // 绘制背景
+      this.drawBg(ctx, 230, 430, 1, "#fff");
+
+      // 下载图片（⚠️ 注意：域名要在小程序后台配置 downloadFile 合法域名）
+      uni.downloadFile({
+        url: opt.goods.original_img,
+        success: (res1) => {
+          let img = res1.tempFilePath;
+          uni.downloadFile({
+            url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/static/home.png",
+            success: (res2) => {
+              let photo = res2.tempFilePath;
+              uni.downloadFile({
+                url: opt.qrcode,
+                success: (res3) => {
+                  let qrcode = res3.tempFilePath;
+
+                  // 绘制图片
+                  this.drawImg(ctx, photo, 10, 8, 30, 30, 0);
+                  this.drawImg(ctx, img, 0, 45, 230, 230, 0);
+                  this.drawImg(ctx, qrcode, 80, 358, 65, 65, 0);
+
+                  // 绘制文字
+                  // this.drawTxtOne(ctx, '茶付宝', 60, 24, 80, '#222', 13, true)
+                  this.drawTxtOne(
+                    ctx,
+                    "推荐一个好物给你，请查收",
+                    45,
+                    28,
+                    200,
+                    "#666",
+                    12,
+                    false
+                  );
+                  this.drawTxtOne(ctx, "￥", 15, 295, 11, "#ED3327", 11, false);
+                  this.drawTxtOne(
+                    ctx,
+                    opt.goods.cost_price,
+                    25,
+                    295,
+                    200,
+                    "#ED3327",
+                    16,
+                    true
+                  );
+                  this.drawTxtOne(
+                    ctx,
+                    "价格具有时效性，具体请以商详为主",
+                    15,
+                    313,
+                    200,
+                    "#666",
+                    11,
+                    false
+                  );
+                  this.drawTxtTwo(
+                    ctx,
+                    opt.goods.goods_name,
+                    15,
+                    330,
+                    190,
+                    20,
+                    "#000",
+                    12
+                  );
+
+                  // 必须调用 draw 才能生效
+                  ctx.draw(false, () => {
+                    this.show = true;
+                    this.img_show = true;
+                    uni.hideLoading();
+                  });
+                },
+              });
+            },
+          });
+        },
+      });
+    },
+    close() {
+      this.show = false;
+      this.img_show = false;
+    },
+    down() {
+      uni.showLoading({ title: "生成中" });
+      uni.canvasToTempFilePath(
+        {
+          canvasId: "ctx",
+          quality: 1,
+          success: (res) => {
+            uni.hideLoading();
+            console.log(res);
+            this.$emit("down", res);
+            this.show = false;
+            this.img_show = false;
+            // 保存到相册 自定义实现
+            uni.saveImageToPhotosAlbum({
+              filePath: res.tempFilePath,
+              success: () => {
+                uni.hideLoading();
+                uni.showToast({
+                  title: "已保存到相册",
+                  icon: "success",
+                });
+              },
+              fail: (err) => {
+                console.error("保存失败", err);
+                uni.hideLoading();
+                uni.showToast({
+                  title: "保存失败",
+                  icon: "none",
+                });
+              },
+            });
+          },
+          fail: (err) => {
+            console.error("生成失败", err);
+          },
+        },
+        this
+      );
+    },
+    // 绘制背景 宽度 高度 圆角 颜色
+    drawBg(ctx, w, h, r, color) {
+      let x = 0;
+      let y = 0;
+      ctx.setFillStyle(color);
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+      ctx.fill();
+    },
+    // 绘制图片 图片地址 距离左边 距离上边 宽度 高度 圆角
+    drawImg(ctx, img, x, y, w, h, r) {
+      let self = this;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+      ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
+      ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
+      ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
+      ctx.clip();
+      ctx.drawImage(img, x, y, w, h);
+      ctx.restore();
+    },
+    // 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
+    drawTxtOne(ctx, text, x, y, maxWidth, color, size, bold) {
+      ctx.save();
+      ctx.beginPath();
+      let chr = text.split("");
+      let temp = "";
+      let row = [];
+      ctx.setFontSize(size);
+      ctx.setFillStyle(color);
+      for (let a = 0; a < chr.length; a++) {
+        if (ctx.measureText(temp).width < maxWidth) {
+          temp += chr[a];
+        }
+      }
+      row.push(temp);
+      if (ctx.measureText(temp).width > maxWidth) row[0] = row[0] + "...";
+
+      for (var b = 0; b < row.length; b++) {
+        ctx.fillStyle = color;
+        if (bold) {
+          ctx.font = "normal bold " + size + "px sans-serif";
+        } else {
+          ctx.font = "normal " + size + "px sans-serif";
+        }
+        ctx.fillText(row[b], x, y);
+      }
+    },
+    // 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
+    drawTxtTwo(ctx, text, x, y, maxWidth, lineHeight, color, size) {
+      ctx.save();
+      ctx.beginPath();
+      let chr = text.split("");
+      let temp = "";
+      let row = [];
+      ctx.setFontSize(size);
+      ctx.setFillStyle(color);
+      for (let a = 0; a < chr.length; a++) {
+        if (ctx.measureText(temp).width < maxWidth) {
+          temp += chr[a];
+        } else {
+          a--;
+          row.push(temp);
+          temp = "";
+        }
+      }
+      row.push(temp);
+      if (row.length > 2) {
+        let rowCut = row.slice(0, 2);
+        let rowPart = rowCut[1];
+        let test = "";
+        let empty = [];
+        for (var a = 0; a < rowPart.length; a++) {
+          if (ctx.measureText(test).width < maxWidth) {
+            test += rowPart[a];
+          } else {
+            break;
+          }
+        }
+        empty.push(test);
+        var group = empty[0] + "...";
+        rowCut.splice(1, 1, group);
+        row = rowCut;
+      }
+      for (var b = 0; b < row.length; b++) {
+        ctx.fillStyle = color;
+        ctx.font = "normal " + size + "px sans-serif";
+        ctx.fillText(row[b], x, y + b * lineHeight, 300);
+      }
+    },
+    // 绘制删除线文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
+    drawTxtDel(ctx, txt, x, y, h, color, size) {
+      ctx.fillStyle = color;
+      ctx.font = "normal " + size + "px sans-serif";
+      ctx.fillText(txt, x, y);
+
+      ctx.beginPath();
+      let width = ctx.measureText(txt).width;
+      ctx.rect(x, y - h, width, 1);
+      ctx.fillStyle = color;
+      ctx.fill();
+    },
+  },
+};
+</script>
+
+<style>
+.qiqb-ctx {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  display: flex;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: all 0.3s;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+.qiqb-ctx.on {
+  z-index: 2000;
+  opacity: 99999999;
+}
+.qiqb-ctx-box {
+  position: relative;
+  display: flex;
+  padding: 30upx 0 40upx;
+  width: 750upx;
+  justify-content: center;
+}
+.qiqb-ctx-box text {
+  position: absolute;
+  top: -40upx;
+  right: 145upx;
+  display: inline-flex;
+  width: 47upx;
+  height: 47upx;
+  background: url(https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/close.png);
+  background-size: 100% 100%;
+}
+.qiqb-ctx-btns {
+  display: flex;
+  width: 750upx;
+  height: 280upx;
+  border-radius: 20upx 20upx 0 0;
+  background: #fff;
+  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
+}
+.qiqb-ctx-btns view:nth-child(1) {
+  display: flex;
+  padding-top: 10upx;
+  height: 80upx;
+  font-weight: 700;
+  font-size: 30upx;
+  align-items: center;
+}
+.qiqb-ctx-btns view:nth-child(2) {
+  height: 80upx;
+  color: #666;
+  font-size: 24upx;
+}
+.qiqb-ctx-btns view:nth-child(3) {
+  display: flex;
+  padding-bottom: 30upx;
+  font-size: 26upx;
+  flex-direction: row;
+  align-items: center;
+}
+.qiqb-ctx-btns view:nth-child(3) text {
+  display: flex;
+  width: 250upx;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.qiqb-ctx-btns view:nth-child(3) text:nth-child(1)::before {
+  display: inline-flex;
+  margin-bottom: 20upx;
+  width: 86upx;
+  height: 86upx;
+  background: url(https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/3.png);
+  background-size: 100% 100%;
+  content: "";
+}
+.qiqb-ctx-btns view:nth-child(3) text:nth-child(2)::before {
+  display: inline-flex;
+  margin-bottom: 20upx;
+  width: 86upx;
+  height: 86upx;
+  background: url(https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/3.png);
+  background-size: 100% 100%;
+  content: "";
+}
+.qiqb-ctx-btns view:nth-child(3) text:nth-child(3)::before {
+  display: inline-flex;
+  margin-bottom: 20upx;
+  width: 86upx;
+  height: 86upx;
+  background: url(https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/3.png);
+  background-size: 100% 100%;
+  content: "";
+}
+.qiqb-ctx-close {
+  display: flex;
+  padding-bottom: 50upx;
+  width: 100%;
+  height: 150upx;
+  background: #fff;
+  font-size: 32upx;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/pages/notice/detail.vue

@@ -1,6 +1,13 @@
 <template>
   <view class="container">
     <!-- 公告详情 -->
+     <view class="nav-right" @click="shareFn">
+          <image
+          src="https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/create.png"
+          class="icon"
+          mode="widthFix"
+          ></image>
+      </view>
     <view class="title">{{ noticeDetail.title }}</view>
     <view class="time" v-if="noticeDetail">
         <span>
@@ -12,21 +19,39 @@
     >
     <mp-html :content="noticeDetail.content" class="mar_t50"></mp-html>
     <!-- 公告详情-end -->
+    <notice-share ref="shareImg" @down="down"></notice-share>
   </view>
 </template>
 
 <script>
 import { post } from "@/request/api.js";
 import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue"
+import noticeShare from "@/components/qiqb-share/notice-share";
 export default {
   data() {
     return {
       content: "",
       noticeDetail: {},
+      userinfo: uni.getStorageSync("userinfo"),
     };
   },
   onLoad(da) {
-    this.loadData(da.id)
+    if (da.scene) {
+      // 1. 解码
+      const decoded = decodeURIComponent(data.scene); 
+      // "id=17&type=4&invite=6N8Z7UBT"
+      // 2. 转对象
+      const obj = {};
+      decoded.split('&').forEach(pair => {
+      const [key, value] = pair.split('=');
+      obj[key] = value;
+      });
+      console.log(obj);
+      if(obj.invite) uni.setStorageSync("inviteCode", obj.invite);
+      this.loadData(obj.id);
+    } else {
+      this.loadData(da.id)
+    }
   },
   methods: {
     loadData(id) {
@@ -39,9 +64,30 @@ export default {
         }
       });
     },
+    shareFn() {
+        let _this = this
+        uni.showLoading()
+        post("v1/goods/shareCode", {
+          page: "pages/notice/detail",
+          scene: `id=${this.noticeDetail.article_id}&invite=${this.userinfo.invite}`,
+        }).then((res) => {
+          if (res.code === 0) {
+            if (res.data) {
+              _this.$refs.shareImg.init({
+                detail: _this.noticeDetail,
+                qrcode: res.data,
+              });
+            }
+          }
+        });
+    },
+    down() {
+        console.log("点击了保存")
+    },
   },
   components: {
     mpHtml,
+    noticeShare,
   },
 };
 </script>
@@ -65,4 +111,16 @@ export default {
   }
 }
 // 用户须知-end
+
+.nav-right {
+    position: fixed;
+    top: 20rpx;
+    right: 20rpx;
+    z-index: 99;
+
+    .icon {
+        width: 50rpx;
+        height: 50rpx;
+    }
+}
 </style>

src/pages/product/p_details.vue

@@ -1,5 +1,12 @@
 <template>
     <view class="container">
+        <view class="nav-right" @click="shareFn">
+            <image
+            src="https://teaclub.oss-cn-chengdu.aliyuncs.com/img/icon_917/create.png"
+            class="icon"
+            mode="widthFix"
+            ></image>
+        </view>
         <!-- 轮播图 -->
         <swiper-banner imgScale="1:1" :imgArr="detail.goods_img" :duration="1000" :interval="5000" :circular="true" :autoplay="true" :indicator-dots="true" indicator-active-color="#12B280" indicator-color="rgba(255, 255, 255, .82)"></swiper-banner>
         <!-- 轮播图-end -->
@@ -170,6 +177,7 @@
         <!-- 授权 -->
         <!-- <authorize-module ref="autho" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" /> -->
         <!-- 授权-end -->
+        <qiqb-share ref="shareImg" @down="down"></qiqb-share>
     </view>
 </template>
 <script>
@@ -259,9 +267,28 @@ export default {
     onLoad: function(e) {
         this.userinfo = uni.getStorageSync("userinfo");
         let token = uni.getStorageSync("token");
-        this.type = e.type;
-        this.goodsDa = e;
-        this.loadData(e);
+        if (e.scene) {
+            // 1. 解码
+            const decoded = decodeURIComponent(data.scene); 
+            // "id=17&type=4&invite=6N8Z7UBT"
+            // 2. 转对象
+            const obj = {};
+            decoded.split('&').forEach(pair => {
+            const [key, value] = pair.split('=');
+            obj[key] = value;
+            });
+
+            console.log(obj);
+            // { id: "17", type: "4", invite: "6N8Z7UBT" }
+            if(obj.invite) uni.setStorageSync("inviteCode", obj.invite);
+            this.type = obj.type;
+            this.goodsDa = obj;
+            this.loadData(obj);
+        } else {
+            this.type = e.type;
+            this.goodsDa = e;
+            this.loadData(e);
+        }
 
         if (!token) this.login();
     },
@@ -446,7 +473,28 @@ export default {
                 }
             });
             
-        }
+        },
+        shareFn() {
+            let _this = this
+            uni.showLoading()
+            post("v1/goods/shareCode", {
+                page: "pages/product/p_details",
+                scene: `id=${this.goodsDa.id}&type=${this.type}&invite=${this.userinfo.invite}`
+            }).then((res) => {
+                if (res.code === 0) {
+                    if(res.data){
+                        _this.$refs.shareImg.init({
+                            goods: _this.detail,
+                            qrcode: res.data,
+                            type: _this.type
+                        })
+                    }
+                }
+            });
+        },
+        down() {
+            console.log("点击了保存")
+        },
     },
     onShareAppMessage() {
         let userinfo = uni.getStorageSync("userinfo");
@@ -834,4 +882,17 @@ page {
 // ::v-deep .uni-numbox--disabled{
 //     color: #cecece !important;
 // }
+
+
+.nav-right {
+    position: fixed;
+    top: 20rpx;
+    right: 20rpx;
+    z-index: 99;
+
+    .icon {
+        width: 50rpx;
+        height: 50rpx;
+    }
+}
 </style>

src/pages/shoppingMall/index.vue

@@ -837,7 +837,7 @@ export default {
             if (res.code === 0) {
                 let obj = res.data.data.data;
                 console.log(obj);
-                if (page <= 1) that.goods = [];
+                // if (page <= 1) that.goods = [];
                 if (obj.length > 0) {
                     // obj.forEach((e) => {
                     //     that.goods.push(e);

src/pages/to-pay-list/index.vue

@@ -428,10 +428,10 @@ export default {
         // 支付
         payment() {
             let that = this
-            if (that.obligation == 0) {
+            if (this.goodsInfo.goods_type) {
                 uni.showModal({
                     title: "温馨提示",
-                    content: "你将支付该订单，请确认。",
+                    content: "确认购买支付后即刻完成订单",
                     showCancel: true,
                     confirmText: "确认",
                     confirmColor: "#f02f2f",
@@ -442,7 +442,22 @@ export default {
                     },
                 });
             } else {
-                that.Pay();
+                if (that.obligation == 0) {
+                    uni.showModal({
+                        title: "温馨提示",
+                        content: "你将支付该订单，请确认。",
+                        showCancel: true,
+                        confirmText: "确认",
+                        confirmColor: "#f02f2f",
+                        success(res) {
+                            if (res.confirm) {
+                                that.Pay();
+                            }
+                        },
+                    });
+                } else {
+                    that.Pay();
+                }
             }
         },
         async Pay() {