微信小程序canvas type=2d生成海报保存到相册、文字换行溢出显示...、文字删除线、分享面板

D_evin_2023-08-22 20:40

一、简介

**做个简单的生成二维码海报分享，****我做的时候也找简单的方法看能不能实现页面直接截图那种生成图片，原生小程序不支持，**不多介绍下面有全部代码有注释、参数自行替换运行看看，还有需要优化的地方，有问题可以咨询我，我写的已经上线

如图：

二、 js:

javascript 复制代码 
// 产品详情
import {
  getProductDetails,
  getDataList,
  getShareData,
  getUnlimitedQRCode
} from "../../../../../api/dsxapi";
const ui = require("../../../../../utils/ui");

Page({
  data: {
    id: null, //跳转传过来的产品id
    datas: null, //详情数据
    images: null, //轮播图
    current: 0,
    proTags: null, //产品标签
    images2: null, //详情图片
    routeId: null, //哪里打开的
    show: false, //遮罩层
    showShare: false, //分享面板
    shareImg: false, //控制分享图标
    options: [{
        name: '微信',
        icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
        openType: 'share'
      },
      {
        name: '生成分享图',
        icon: 'https://wx.applet.style.51dsx.cn/img/share_button_fxt.png'
      },
    ],
    posterDatas: {
      width: 281, //画布宽度
      height: 460, //画布高度
      // 缓冲区，无需手动设定
      pic: null,
      buttonType: 1,
      show: false, // 显示隐藏跳转设置
      success: false, // 是否成功生成过海报
      canvas: null, // 画布的节点
      ctx: null, // 画布的上下文
      dpr: 1, // 设备的像素比
    },
    QRcodeImg: null, //小程序二维码
    photoWidth: null //产品图片宽度
  },

  onLoad(options) {
    this.getlength()
    this.setData({
      id: options.id
    })
    if (options.routeId) {
      this.setData({
        routeId: options.routeId
      })
    }
    if (options.scene) { //扫二维码进来的
      this.setData({
        id: decodeURIComponent(options.scene).split('id=')[1].split('&')[0],
        routeId: decodeURIComponent(options.scene).split('routeId=')[1]
      })
    }
    let that = this;
    //生成海报初始化
    let posterDatas = that.data.posterDatas
    const query = wx.createSelectorQuery()
    query.select('#firstCanvas').fields({
        node: true,
        size: true
      },
      function (res) {
        const canvas = res.node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = posterDatas.width * dpr
        canvas.height = posterDatas.height * dpr
        ctx.scale(dpr, dpr)
        posterDatas.canvas = canvas
        posterDatas.ctx = ctx
        posterDatas.dpr = dpr
        //存储
        that.setData({
          posterDatas
        })
      }).exec()
    this._getProductDetails(this.data.id)
  },
  onShow() {
    // 判断分享打开并且没登录的跳转登录
    if (this.data.routeId) {
      if (wx.getStorageSync("appuser") == undefined || wx.getStorageSync("appuser") == '') {
        wx.navigateTo({
          url: "/subPackag/pages/me_jump/login/login",
        });
      }
    }
    this.getlength()
    this._getProductDetails(this.data.id)
    this.setData({
      show: false
    })
  },

  //自定义导航栏计算
  getlength() {
    let windowWidth = wx.getSystemInfoSync().windowWidth;
    const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
    const menuButton = wx.getMenuButtonBoundingClientRect();
    let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
    let statusBarTop = statusBarHeight * (750 / windowWidth);
    this.setData({
      navHeight: navHeight + statusBarTop,
      statusBarTop: menuButton.top,
    })
  },
  //自定义返回按钮
  onBack() {
    if (this.data.routeId && this.data.routeId == 5 || this.data.routeId == 797 || this.data.routeId == 6) { //5好友里打开797朋友圈打开1未登录点击登录后大师兄页面返回
      // wx.navigateTo({
      //   url: `/subPackag/pages/consult_jump/EnterprisePiece/market/market`,
      // });
      // 判断从分享和扫码打开点击为关闭小程序
      wx.exitMiniProgram({
        success: function () {},
        fail: function () {}
      })
    } else {
      wx.navigateBack();
    }
  },

  //跳转企业/园区详情
  goEnterprise(event) {
    if (this.data.datas.type == 2) {
      //园区
      wx.navigateTo({
        url: `/subPackag/pages/consult_jump/EnterprisePiece/park/park?id=${event.currentTarget.dataset.id}`,
      });
    } else {
      //企业
      wx.navigateTo({
        url: `/subPackag/pages/consult_jump/EnterprisePiece/enterprise/enterprise?id=${event.currentTarget.dataset.id}`,
      });
    }
  },
  //跳转案例详情
  goCase(event) {
    let params = {
      type: 4,
      id: event.currentTarget.dataset.id,
    };
    getShareData(params)
      .then((res) => {
        wx.navigateTo({
          url: `/sDsxPackag/pages/webview/webview?url=${res.data.shareUrl}&title=${res.data.shareTitle}`
        })
      })
  },

  //跳转大师兄详情
  goDSXdetails(event) {
    getDataList({
      brotherName: event.currentTarget.dataset.item.realName,
      current: 1,
      size: 10
    }).then((res) => {
      console.log(1111111111111, res);
      const nowdata = {
        item: res.data.records[0],
      };
      console.log(111, nowdata);
      var queryBean = JSON.stringify(nowdata);
      if (wx.getStorageSync('queryBean') !== undefined) {
        let qb = wx.getStorageSync("queryBean");
        qb = queryBean;
        wx.setStorageSync("queryBean", qb);
      } else {
        wx.setStorageSync("queryBean", queryBean);
      }
      wx.navigateTo({
        url: `/sDsxPackag/pages/dsx/dsxcard/dsxcard?queryBean=${encodeURIComponent(
            queryBean
          )}`,
      });
    });
  },

  //产品详情
  _getProductDetails(id) {
    let params = {
      id: id
    };
    getProductDetails(params).then((res) => {
      this.setData({
        datas: res.data,
        images: res.data.proImgs.split(","),
        proTags: res.data.proTags.split(","),
        images2: res.data.proDetailsImgs.split(","),
        shareImg: true
      });
    }).catch(function (imError) {
      console.log(imError);
    })
  },

  //客服电话
  servicePhone() {
    if (this.data.datas.phone) {
      wx.makePhoneCall({
        phoneNumber: this.data.datas.phone
      })
    } else {
      wx.makePhoneCall({
        phoneNumber: '4001512051'
      })
    }
  },

  //轮播图预览
  tapAvatar(event) {
    console.log(event);
    wx.previewImage({
      current: event.currentTarget.dataset.item,
      urls: this.data.images,
    })
    console.log(event);
  },

  //轮播数字指示
  swiperChange(e) {
    var that = this;
    if (e.detail.source == 'touch') {
      that.setData({
        current: e.detail.current
      })
    }
  },
  //获取二维码
  //产品详情
  _getUnlimitedQRCode() {
    let params = {
      id: this.data.id,
      type: 1,
      envVersion: 'release' //正式版为 "release"，体验版为 "trial"，开发版为 "develop
    };
    getUnlimitedQRCode(params).then((res) => {
      const base64 = res.data.qrcode;
      const time = new Date().getTime();
      //USER_DATA_PATH：文件系统中的用户目录路径 (本地路径)
      const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "" + ".png";
      const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
      const file = wx.getFileSystemManager();
      file.writeFileSync(imgPath, imageData, "base64");
      console.log(imgPath);
      this.setData({
        QRcodeImg: imgPath,
      });
    }).catch(function (imError) {
      console.log(imError);
    })
  },

  //引导打开相册权限取消按钮
  onClickHide1() {
    let posterDatas = this.data.posterDatas;
    posterDatas["buttonType"] = 1;
    this.setData({
      show: false,
      showShare: false,
      posterDatas,
      options: [{
          name: '微信',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
          openType: 'share'
        },
        {
          name: '生成分享图',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_fxt.png'
        },
      ],
    });
  },

  //分享按钮
  onClick(event) {
    if (!this.data.QRcodeImg) {
      //获取二维码
      this._getUnlimitedQRCode()
    }

    //获取产品图片宽度
    wx.getImageInfo({
      src: this.data.datas.proCover,
      success: res => {
        this.setData({
          photoWidth: res.width
        })
      }
    })
    this.setData({
      showShare: true,
      options2: [{
          name: '微信',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
          openType: 'share'
        },
        {
          name: '生成分享图',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_fxt.png'
        },
      ],
    });
  },

  //隐藏分享面板
  onClose() {
    this.onIsCanvas()
    this.data.posterDatas["buttonType"] = 1;
    this.setData({
      showShare: false,
      options: [{
          name: '微信',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
          openType: 'share'
        },
        {
          name: '生成分享图',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_fxt.png'
        },
      ],
    });
  },

  //分享面板里面的点击事件
  onSelect(event) {
    console.log(event);
    if (event.detail.index == 0) {
      this.setData({
        showShare: false
      })
      this.onIsCanvas()
    } else if (event.detail.index == 1) {
      if (this.data.posterDatas.buttonType == 1) {
        if (this.data.QRcodeImg) {
          this.data.posterDatas["buttonType"] = 2;
          this.onBuildPosterSaveAlbum()
          this.setData({
            options: [{
                name: '微信',
                icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
                openType: 'share'
              },
              {
                name: '保存到相册',
                icon: 'https://wx.applet.style.51dsx.cn/img/share_button_down.png'
              },
            ]
          })
        }
      } else if (this.data.posterDatas.buttonType == 2) {
        this.onDownloadImges()
        this.setData({
          options: [{
              name: '微信',
              icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
              openType: 'share'
            },
            {
              name: '保存到相册',
              icon: 'https://wx.applet.style.51dsx.cn/img/share_button_down.png'
            },
          ]
        });
      } else if (this.data.posterDatas.buttonType == 3) {
        let posterDatas = this.data.posterDatas;
        posterDatas["show"] = false;
        this.setData({
          posterDatas,
          show: true
        })
      }
    }
  },
  //海报生成
  onBuildPosterSaveAlbum() {
    let that = this;
    let posterDatas = that.data.posterDatas
    let canvas = posterDatas.canvas
    let ctx = posterDatas.ctx
    //已生成过海报的直接显示弹窗
    if (posterDatas.success) {
      posterDatas["show"] = true;
      that.setData({
        posterDatas
      })
      return;
    }
    posterDatas.show = true;
    that.setData({
      posterDatas
    })
    wx.showLoading({
      title: '海报生成中',
      mask: true
    });
    //二维码
    let promise1 = new Promise(function (resolve, reject) {
      const photo = canvas.createImage();
      photo.src = that.data.QRcodeImg;
      photo.onload = (e) => {
        resolve(photo);
      }
    });
    // 背景图
    let promise2 = new Promise(function (resolve, reject) {
      const photo = canvas.createImage();
      photo.src = "https://wx.applet.style.51dsx.cn/img/share_ig_bg.png";
      photo.onload = (e) => {
        resolve(photo);
      }
    });
    // 产品图
    let promise3 = new Promise(function (resolve, reject) {
      const photo = canvas.createImage();
      photo.src = that.data.datas.proCover;
      photo.onload = (e) => {
        resolve(photo);
      }
    });
    //获取图片信息
    Promise.all(
      [promise1, promise2, promise3]
    ).then(res => {
      //背景图
      ctx.drawImage(res[1], 0, 0, posterDatas.width, posterDatas.height);
      // 产品图
      // ctx.drawImage(res[2], 18, 18, posterDatas.width-36, 245);
      ctx.drawImage(res[2], 0, 0, that.data.photoWidth, that.data.photoWidth, 18, 18, posterDatas.width - 36, posterDatas.width - 36);
      //二维码
      ctx.drawImage(res[0], posterDatas.width - 82, posterDatas.height - 82, 64, 64);
      if (that.data.datas.payType == 2) {
        //面议
        ctx.font = "bold 20px sans-serif";
        ctx.fillStyle = "#EF3822";
        ctx.fillText('面议', 18, 290);
        ctx.fill();
      } else {
        //现价
        ctx.font = "14px"; //字体大小
        ctx.fillStyle = "#EF3822"; //字体颜色
        ctx.fillText('¥', 18, 290);
        ctx.font = "bold 20px sans-serif";
        ctx.fillStyle = "#EF3822";
        const proPrice = ctx.measureText(that.data.datas.proPrice)
        ctx.fillText(that.data.datas.proPrice, 26, 290);
        ctx.fill();
        // 原价
        let text = '¥' + that.data.datas.proOriginalPrice
        ctx.font = "10px sans-serif";
        ctx.fillStyle = "#9A9A9A";
        ctx.fillText(text, proPrice.width + 32, 290);
        ctx.fillStyle = '#9A9A9A';
        ctx.beginPath();
        const textWidth = ctx.measureText(text).width;
        ctx.rect(proPrice.width + 32, 286, textWidth, 1);
        ctx.fill();
      }
      //地区
      ctx.font = "10px sans-serif";
      ctx.fillStyle = "#9A9A9A";
      //画布宽度减去文字长度
      ctx.fillText(that.data.datas.serviceAreaText, posterDatas.width - ctx.measureText(that.data.datas.serviceAreaText).width - 18, 290);
      ctx.fill();
      //标题
      ctx.fillStyle = "#333333";
      ctx.font = "bold 14px sans-serif";
      // ctx.fillText('专精特新企业股权融资方案设计', 18, 310);
      that.toFormateStr(ctx, that.data.datas.proName, 245, 1, 18, 312, 16, 1) // 绘制文字并换行
      ctx.fill();
      //板块
      ctx.font = "11px sans-serif";
      ctx.fillStyle = "#646464";
      ctx.fillText(that.data.datas.proDesc, 18, 332);
      ctx.fill();
      //机构信息
      ctx.font = "11px";
      ctx.fillStyle = "#9D9D9D";
      ctx.fillText('机构信息：' + that.data.datas.institutionName, 18, 352);
      ctx.fill();
      //线条
      ctx.save();
      ctx.rect(18, 390, 140, 0.5);
      ctx.strokeStyle = "#9A9A9A"
      ctx.fill();

      ctx.font = "10px";
      ctx.fillStyle = "#9D9D9D";
      ctx.fillText('实际价格以扫码页面展示为准', 18, 410);
      ctx.fill();
      ctx.font = "10px";
      ctx.fillStyle = "#9D9D9D";
      ctx.fillText('长按识别查看、联系', 18, 426);
      ctx.fill();
      // 关闭loading
      wx.hideLoading();
      //显示海报
      posterDatas.success = true;
      that.setData({
        posterDatas
      })
    }).catch(err => {
      console.log(err)
      wx.hideLoading();
      wx.showToast({
        icon: 'none',
        title: '海报生成失败,请稍后再试.',
      })
    })
  },

  // 文字换行
  toFormateStr(ctx, str, draw_width, lineNum, startX, startY, steps, number) {
    //ctx：canvas的 2d 对象，str：绘制的文字，startX,startY:文字坐标，draw_width：文字最大宽度，lineNum：需要的行数，steps：行高,number:减少最后几个字变成...
    let strWidth = ctx.measureText(str).width; // 测量文本源尺寸信息（宽度）
    let startpoint = startY,
      keyStr = '',
      sreLN = strWidth / draw_width; // 文本长度除以换行的宽 得到一共生成多少行
    let liner = Math.ceil(sreLN); // 计算文本源一共能生成多少行
    let strlen = parseInt(str.length / sreLN); // 等比缩放测量一行文本显示多少个字符
    // 若文本不足一行，则直接绘制，反之大于传入的最多行数（lineNum）以省略号（...）代替
    if (strWidth < draw_width) {
      ctx.fillText(str, startX, startpoint);
    } else {
      for (let i = 1; i < liner + 1; i++) {
        let startPoint = strlen * (i - 1);
        if (i < lineNum || lineNum == -1) {
          keyStr = str.substr(startPoint, strlen);
          ctx.fillText(keyStr, startX, startpoint);
        } else {
          keyStr = str.substr(startPoint, strlen - number) + '...';
          ctx.fillText(keyStr, startX, startpoint);
          break;
        }
        startpoint = startpoint + steps;
      }
    }
  },

  //画布转图片
  onCanvasBuildImges() {
    let that = this;
    let posterDatas = that.data.posterDatas;
    wx.canvasToTempFilePath({
      canvas: posterDatas.canvas,
      width: posterDatas.width,
      height: posterDatas.height,
      // destWidth: posterDatas.width * 3,
      // destHeight: posterDatas.height * 3,
      quality: 1,
      success: function success(res) {
        posterDatas["pic"] = res.tempFilePath;
        that.setData({
          posterDatas
        })
        that.onDownloadImges();
      },
      fail: function complete(e) {
        wx.hideLoading();
        wx.showToast({
          icon: 'none',
          title: 'sorry 保存失败,请稍后再试.',
        })
        return;
      }
    });
  },

  //下载图片
  onDownloadImges() {
    wx.showLoading({
      title: '保存中',
      mask: true
    });
    let that = this;
    let posterDatas = that.data.posterDatas;
    if (!posterDatas.pic) {
      that.onCanvasBuildImges();
      return;
    }
    wx.saveImageToPhotosAlbum({
      filePath: posterDatas.pic,
      success(res) {
        wx.hideLoading();
        wx.showToast({
          icon: 'none',
          title: '已保存到相册',
        })
        that.onIsCanvas()
        posterDatas["buttonType"] = 1;
        that.setData({
          showShare: false,
          posterDatas
        })
      },
      fail: function (res) {
        wx.hideLoading();
        wx.showToast({
          icon: 'none',
          title: '已取消',
        })
        posterDatas["buttonType"] = 3;
        that.setData({
          posterDatas
        })
        return;
      }
    })
  },

  //在打开授权设置页后回调
  onBindOpenSetting() {
    let that = this;
    let posterDatas = that.data.posterDatas;
    posterDatas["buttonType"] = 1;
    that.setData({
      posterDatas
    })
  },

  //隐藏海报
  onIsCanvas() {
    let that = this;
    let posterDatas = that.data.posterDatas;
    posterDatas["buttonType"] = 1;
    posterDatas["show"] = false;
    that.setData({
      posterDatas
    })
  },

  onShareAppMessage: function (res) { //分享给好友
    var that = this
    return {
      title: that.data.datas.proName + '---产品详情',
      path: 'subPackag/pages/consult_jump/EnterprisePiece/product/product?id=' + that.data.datas.id + '&routeId=' + 5,
      imageUrl: '',
      success: function (res) {
        console.log(res);
        wx.showToast({
          title: '分享成功',
          icon: "none"
        });
      },
      fail: function (res) {
        wx.showToast({
          title: '分享失败',
          icon: "none"
        })
      }
    }
  },
  onShareTimeline: function () { //分享朋友圈
    var tha = this
    return {
      title: tha.data.datas.proName + '---产品详情',
      query: 'id=' + tha.data.datas.id + '&routeId=' + 797,
      imageUrl: tha.data.datas.proCover,
      success: function (res) {
        wx.showToast({
          title: '分享成功',
          icon: "none"
        });
      },
      fail: function (res) {
        wx.showToast({
          title: '分享失败',
          icon: "none"
        })
      }
    }
  },
})

三、 wxml:

html 复制代码 
<!-- 自定义导航 -->
<view class="nav-back" style="height: {{navHeight}}rpx;">
  <image class="imgbackw" style="margin-top: {{statusBarTop}}px" src="https://wx.applet.style.51dsx.cn/img/icon_navigation_return.png" catchtap="onBack" />
  <view class="nav-name" style="margin-top: {{statusBarTop}}px">产品详情</view>
</view>

<view class="product" wx:if="{{datas}}" style="margin-top: {{navHeight}}rpx;">
  <!-- 轮播 -->
  <view wx:if="{{images[0]!==''}}" class="swiper1" style="overflow: hidden;">
    <swiper bindchange="swiperChange" class="swiper" indicator-active-color="white" current="0" indicator-color="#fff6" display-multiple-items circular="{{true}}">
      <swiper-item wx:for="{{images}}" wx:key="index">
        <image data-item="{{item}}" bindtap="tapAvatar" src="{{item}}" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <view class="imageCount" wx:if="{{images.length>1}}">{{current+1}}/{{images.length}}</view>
  </view>
  <view class="middle">
    <view class="price">
      <view class="price-div">
      <!-- 价钱、地区 -->
        <view style="display: inline-block;">
          {{ datas.payType == 2 ? "" : "¥"
          }}<span class="item1">{{
            datas.payType == 2 ? "面议" : datas.proPrice
            }}</span>
          <span class="item3">{{
            datas.payType == 2 || datas.proOriginalPrice == 0
            ? ""
            : "¥" + datas.proOriginalPrice
            }}</span>
        </view>
        <view class="area">
          {{datas.serviceAreaText}}
        </view>
      </view>
      <view class="info">
        <!-- 标题、板块、标签 -->
        <view class="item1">{{ datas.proName }}</view>
        <view class="item2" wx:if="{{datas.proDesc}}">{{ datas.proDesc }}</view>
        <view wx:if="{{proTags[0]!==''}}">
          <view class="item3" wx:for="{{proTags}}" wx:key="index">
            {{item}}
          </view>
        </view>
      </view>
    </view>
    <view class="institution">
      <view class="title">机构信息</view>
      <!-- 机构信息 -->
      <view class="info2" data-id="{{datas.companyId}}" bindtap="goEnterprise">
        <image src="{{datas.institutionLogo}}" class="img1" mode="aspectFit" />
        <view class="right">
          <view class="item1">
            {{ datas.institutionName }}
          </view>
          <view class="item2">
            {{ datas.institutionAddress }}
          </view>
        </view>
      </view>
      <view wx:if="{{datas.userNames.length > 0}}">
      <!-- 大师兄左右滑动列表 -->
        <van-divider customStyle="margin:0;" />
        <view class="BigMasterBox">
          <view class="BigMasterItem" data-item="{{item}}" bindtap="goDSXdetails" wx:for="{{datas.userNames}}" wx:key="index">
            <image src="{{item.photo}}" class="img" mode="aspectFill"/>
            <view class="right">
              <view class="item1">
                {{ item.realName }}
              </view>
              <view class="{{item.online == 1 ? 'item2' : 'red'}}">
                {{
                item.online == 1
                ? "可咨询"
                : "可预约"
                }}
              </view>
              <view class="item3">
                {{ item.roleName }} |
                {{ item.unitStartTimeText }}
              </view>
            </view>
          </view>
        </view>
        <view class="prompt">
          以上大师兄由产品方所列，由用户自主选择
        </view>
      </view>
    </view>
    <view class="case" wx:if="{{datas.serviceNames.length > 0}}">
      <view class="title">服务案例</view>
      <view class="caseBox">
        <view class="caseItem" data-id="{{item.id}}" bindtap="goCase" wx:for="{{datas.serviceNames}}" wx:key="index">
          <!-- 案例左右滑动列表 -->
          <image src="https://wx.applet.style.51dsx.cn/img/store_icon_fwal.png" class="img" mode='widthFix' />
          <view class="right">
            <view class="item1">
              {{ item.customerName }}
            </view>
            <view class="item2">
              {{ item.sectionText }}
            </view>
            <view class="item2">
              {{ item.serviceTime }}年
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="details">
      <view class="median"></view>
      <span> 产品详情 </span>
      <view class="median"></view>
    </view>
  </view>
  <!-- 产品介绍长图列 -->
  <view class="introduce">
    {{ datas.proDetails }}
  </view>
  <image wx:if="{{images2[0]!==''}}" class="img3" wx:for="{{images2}}" wx:key="index" src="{{item}}" mode='widthFix' />
  <view class="bottomBox">
    <view class="FixedBottom">
      <view>
        <!-- <view class="item1" bindtap="servicePhone">
          <image class="img" src="https://image-cos.51dsx.cn/images/2023-05-08/store_button_service.png" />
          <view class="text">客服</view>
        </view> -->
        <view class="item2" data-id="{{datas.companyId}}" bindtap="goEnterprise">
          <image class="img" src="https://image-cos.51dsx.cn/images/2023-05-08/store_button_store.png" />
          <view class="text">店铺</view>
        </view>
      </view>
      <view class="item3" bindtap="servicePhone">
        联系机构
      </view>
    </view>
  </view>
</view>
<!-- 海报 -->
<view class="canvasMain" hidden="{{!posterDatas.show}}">
  <canvas type="2d" id="firstCanvas" class="firstCanvas" style="width:{{posterDatas.width}}px;height:{{posterDatas.height}}px;"></canvas>
</view>
<!-- 分享图标 -->
<image wx:if="{{shareImg}}" class="shareImg" bindtap="onClick" src="https://wx.applet.style.51dsx.cn/img/xiangqing_button_share.png" mode="aspectFill" />
<!-- 弹窗去打开相册权限 -->
<van-overlay z-index="999999" show="{{ show }}">
  <view class="wrapper">
    <view class="block" catch:tap="noop">
      <view class="popup-box">
        <view class="telephone">进入设置页，开启"保存到相册"</view>
        <van-divider customStyle="margin:0;" />
        <view class="ncontent">
          <button class='button' bindtap='onClickHide1'>取消</button>
          <button class='button' open-type='openSetting' bindopensetting='onBindOpenSetting'>确定</button>
        </view>
      </view>
    </view>
  </view>
</van-overlay>
<!-- 分享面板 -->
<van-share-sheet show="{{ showShare }}" title="" options="{{ options }}" bind:select="onSelect" bind:close="onClose" />

四、wxss:

css 复制代码 
.nav-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  text-align: center;
  background: #fff;
  z-index: 9999999;
}

.nav-back .nav-name {
  font-size: 32rpx;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 40rpx;
  width: 100%;
  color: #000;
  height: 60rpx;
  line-height: 60rpx;
}

.imgbackw {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  left: 0rpx;
  z-index: 100;
}

.imageCount {
  padding: 4rpx 20rpx;
  font-size: 24rpx;
  border-radius: 40rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color:#fff;
  position:absolute;
  right:16rpx;
  bottom:16rpx;
}
.swiper1 {
  width: 100vw;
  height: 100vw;
  transform: translateY(0);
}

/* 广告轮播图 */
.swiper {
  /*再设置个transform的属性*/
  transform: translateY(0);

}

.swiper image,
.swiper {
  width: 100vw;
  height: 100vw;
}

.swiper swiper-item {
  position: relative;
}
.product {
  padding-bottom: 164rpx;
  width: 100%;
  height: auto;
}

.product .FixedBottom .item3 {
  /* width: 2.47rpx; */
  /* width: 70%; */
  width: 88%;
  height: 88rpx;
  background: linear-gradient(138deg, #5092f7 0%, #3171e8 100%);
  border-radius: 80rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}

.product .FixedBottom .img {
  width: 48rpx;
  height: 48rpx;
}

.product .FixedBottom .text {
  font-size: 24rpx;
  font-weight: 400;
  color: #000000;
  line-height: 36rpx;
}

.product .FixedBottom .item1,
.product .FixedBottom .item2 {
  font-size: 24rpx;
  color: #000000;
  line-height: 36rpx;
}

.product .FixedBottom .item1,
.product .FixedBottom .item2,
.product .FixedBottom .item3 {
  display: inline-block;
  text-align: center;
}

.product .bottomBox {
  width: 100%;
  background: #fff;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  padding: 20rpx 0rpx 52rpx 0rpx;
  border-top: 1px solid rgb(247, 246, 246);
}

.product .FixedBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx 0rpx 40rpx;
  /* margin: 0 auto; */
}

.product .img3 {
  width: 100vw;
}

.product .introduce {
  padding: 20rpx;
  font-size: 28rpx;
  color: #444444;
  line-height: 42rpx;
}

/* 内容 价钱信息、机构、案例 */
.middle .details span {
  margin: 0 20rpx;
}

.middle .details .median {
  display: inline-block;
  width: 96rpx;
  border-bottom: #d8d8d8 2rpx solid;
}

.middle .details {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}

.middle .case .caseBox .caseItem .right .item2 {
  font-size: 24rpx;
  color: #6f6f6f;
  line-height: 36rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.middle .case .caseBox .caseItem .right .item1 {
  font-size: 28rpx;
  font-weight: 600;
  color: #000000;
  line-height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.middle .case .caseBox .caseItem .right {
  margin-left: 20rpx;
}

.middle .case .caseBox .caseItem .img {
  width: 112rpx;
  min-width: 112rpx;
  height: 112rpx;
  border-radius: 12rpx;
}

.middle .case .caseBox .caseItem {
  display: flex;
  align-items: center;
  margin-right: 16rpx;
  flex-shrink: 0;
  background: #f6f6f6;
  border-radius: 8rpx;
  height: 160rpx;
  padding: 0rpx 20rpx;
  min-width: 400rpx;
  max-width: 400rpx;
}

.middle .case .caseBox .caseItem:last-child {
  margin-right: 0 !important;
}

.middle .case .caseBox {
  border-radius: 12rpx;
  /* padding: 0.12rpx 0.1rpx; */
  /* 设置超出滚动 */
  overflow-x: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.product .middle .case {
  margin-top: 16rpx;
  padding: 28rpx 20rpx 20rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  border: 2rpx solid #ffffff;
}

::-webkit-scrollbar {
  /* 隐藏滚动条 */
  display: none;
}

.BigMasterItem .right {
  display: inline-block;
  font-size: 24rpx;
  color: #000000;
  line-height: 32rpx;
  margin-left: 8rpx;

}

.product .middle .institution .BigMasterBox .BigMasterItem .img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  object-fit: cover;
}

.product .middle .institution .prompt {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #9a9a9a;
  line-height: 36rpx;
}

.product .middle .institution .BigMasterBox .BigMasterItem:last-child {
  margin-right: 0 !important;
}

.product .middle .institution .BigMasterBox .BigMasterItem .item1 {
  display: inline-block;
  font-size: 28rpx;
  font-weight: 600;
  color: #444444;
  line-height: 36rpx;
}

.product .middle .institution .BigMasterBox .BigMasterItem .red {
  margin-left: 8rpx;
  display: inline-block;
  padding: 0 8rpx;
  height: 32rpx;
  background: #3a89ff;
  color: #fff;
  font-size: 24rpx;
  line-height: 32rpx;
  border-radius: 8rpx;
}

.product .middle .institution .BigMasterBox .BigMasterItem .item2 {
  margin-left: 8rpx;
  display: inline-block;
  padding: 0 8rpx;
  height: 32rpx;
  background: #4dc741;
  color: #fff;
  font-size: 24rpx;
  line-height: 32rpx;
  border-radius: 8rpx;
}

.product .middle .institution .BigMasterBox .BigMasterItem .item3 {
  margin-top: 4rpx;
  font-size: 24rpx;
  color: #9a9a9a;
  line-height: 28rpx;
}

.BigMasterItem {
  display: flex;
  align-items: center;
  margin-right: 16rpx;
  flex-shrink: 0;
  background: #f3f8ff;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
}

.BigMasterBox {
  /* 设置超出滚动 */
  overflow-x: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

::v-deep .el-divider--horizontal {
  margin: 0;
  background-color: #e5e5e5 !important;
}

.product .middle .institution .info2 {
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.product .middle .institution .img1 {
  display: inline-block;
  width: 88rpx;
  min-width: 88rpx;
  max-height: 88rpx;
  border-radius: 12rpx;
  border: 1rpx solid #ededed;
}

.product .middle .institution .info2 .right {
  margin-left: 16rpx;
  display: inline-block;
}

.product .middle .institution .info2 .right .item1 {
  font-size: 32rpx;
  font-weight: 600;
  color: #000000;
  line-height: 40rpx;
}

.product .middle .institution .info2 .right .item2 {
  margin-top: 6rpx;
  font-size: 26rpx;
  color: #9a9a9a;
  line-height: 36rpx;
  min-height: 36rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.product .middle .institution {
  margin-top: 16rpx;
  padding: 28rpx 20rpx 20rpx 20rpx;
  background: linear-gradient(180deg, #e0edff 0%, #ffffff 23%, #ffffff 100%);
  border-radius: 20rpx;
  border: 2rpx solid #ffffff;
}

.product .middle .institution .title,
.product .middle .case .title {
  font-size: 30rpx;
  font-weight: 600;
  color: #000000;
  line-height: 40rpx;
}

.product .middle .info .item1 {
  width: 100%;
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  line-height: 48rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product .middle .info .item2 {
  width: 100%;
  font-size: 26rpx;
  color: #868686;
  line-height: 40rpx;
  margin-top: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 8rpx;
}

.product .middle .info .item3 {
  display: inline-block;
  height: 32rpx;
  font-size: 24rpx;
  color: #9a9a9a;
  line-height: 32rpx;
  background: #f7f7f7;
  border-radius: 4rpx;
  padding: 0 12rpx;
  margin-right: 20rpx;
}

.product .middle .info .item3:last-child {
  margin-right: 0 !important;
}

.custom-indicator {
  position: absolute;
  right: 16rpx;
  bottom: 16rpx;
  padding: 4rpx 20rpx;
  font-size: 24rpx;
  border-radius: 40rpx;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.swipeItem {
  height: 100vw;
  width: 100%;
}

.itemImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: #f2f2f2;
}

.product .middle {
  padding: 16rpx 12rpx 24rpx;
  background: #f7f7f7;
}

.product .middle .price {
  background: #fff1f1;
  border-radius: 20rpx;
  padding: 16rpx 0 0;
}

.product .middle .info {
  padding: 28rpx 20rpx 32rpx 20rpx;
  border-radius: 20rpx;
  background: #fff;
}

.middle .price .price-div {
  margin-bottom: 12rpx;
  margin-left: 20rpx;
  color: #ef3822;
  font-size: 28rpx;
  position: relative;
}

.middle .price .price-div .area {
  font-size: 26rpx;
  color: #808080;
  display: inline-block;
  position: absolute;
  right: 20rpx;
  top:50%;
  transform:translate(0,-50%);
  line-height: 80rpx;
}

.middle .price .price-div .item1 {
  color: #ef3822;
  font-size: 44rpx;
  font-weight: 600;
}

.middle .price .price-div .item2 {
  color: #ef3822;
  font-size: 24rpx;
}

.middle .price .price-div .item3 {
  text-decoration: line-through;
  margin-left: 20rpx;
  color: #9a9a9a;
  font-size: 24rpx;
}

/* 生成海报 */
.shareImg{
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  right: 14rpx;
  top: 80%;
  z-index: 99;
}
.popup-box {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform:translate(-50%,-50%);
  width: 62vw;
  background:#fff;
  border-radius: 16rpx;
  opacity: 1;
  margin: auto;
  text-align: center;
  padding: 34rpx 32rpx 36rpx;
}
.telephone{
  margin-bottom: 20rpx;
}
.canvasMain{
  position: fixed;
  top: 8vh;
  width: 100vw;
  z-index: 999999 !important;
}
.firstCanvas{
  margin: 5vh auto 0;
  z-index: 9999 !important;
}
.ncontent{
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}

.van-share-sheet__cancel {
  font-size: 32rpx !important;
}

.van-share-sheet__name{
  font-size: 26rpx !important;
  color: #333333 !important;
}
.van-share-sheet__header, .van-share-sheet__options{
  background: #F5F5F5;
}
.van-share-sheet__icon {
  width: 128rpx !important;
  height: 128rpx !important;
}
.van-share-sheet__cancel:before{
  background-color: #F5F5F5 !important;
}
相关推荐
dccose2 分钟前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
尘浮生6 小时前
Java项目实战II基于微信小程序的校运会管理系统（开发文档+数据库+源码）
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生10 小时前
Java项目实战II基于微信小程序的电影院买票选座系统（开发文档+数据库+源码）
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen12 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
webmote15 小时前
做一个FabricJS.cc的中文文档网站——面向markdown编程
canvas·fabric·使用手册·中文·fabricjs
耶啵奶膘17 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡19 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼1 天前
微信小程序-prettier 格式化
微信小程序·小程序
qq_17448285751 天前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇