Browse Source

添加复制提示

DaMowang 2 years ago
parent
commit
c48b2b9275
4 changed files with 227 additions and 375 deletions
  1. 3 3
      src/app.scss
  2. 2 1
      src/pages.json
  3. 221 371
      src/pages/invi-img/index.vue
  4. 1 0
      src/pagesB/directCharge/orderDetail.vue

+ 3 - 3
src/app.scss

@@ -46,9 +46,9 @@ view,text,div {
 /* 在线链接服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
     font-family: 'iconfont';  /* Project id 3748689 */
-    src: url('//at.alicdn.com/t/c/font_3748689_egbygrkz29u.woff2?t=1686722700642') format('woff2'),
-         url('//at.alicdn.com/t/c/font_3748689_egbygrkz29u.woff?t=1686722700642') format('woff'),
-         url('//at.alicdn.com/t/c/font_3748689_egbygrkz29u.ttf?t=1686722700642') format('truetype');
+    src: url('//at.alicdn.com/t/c/font_3748689_1e2ueg3k0fi.woff2?t=1688545388819') format('woff2'),
+         url('//at.alicdn.com/t/c/font_3748689_1e2ueg3k0fi.woff?t=1688545388819') format('woff'),
+         url('//at.alicdn.com/t/c/font_3748689_1e2ueg3k0fi.ttf?t=1688545388819') format('truetype');
   }
 
 .iconfont {

+ 2 - 1
src/pages.json

@@ -77,7 +77,8 @@
 		{
 			"path": "pages/invi-img/index",
 			"style": {
-				"navigationBarTitleText": "邀请好友"
+				"navigationBarTitleText": "邀请好友",
+				"navigationStyle": "custom"
 			}
 		},
 		{

+ 221 - 371
src/pages/invi-img/index.vue

@@ -1,436 +1,286 @@
 <template>
-  <!--pages/invi-img/index.wxml-->
-  <view class="container">
-    <view class="invi_img">
-      <swiper
-        class="swiper_box"
-        circular="true"
-        duration="1000"
-        indicator-dots="true"
-        indicator-color="rgba(255, 255, 255, .3)"
-        indicator-active-color="#d7a54c"
-        @change="swiperchange"
-      >
-        <block>
-          <swiper-item v-for="(item, index) in bgImgList" :key="index">
-            <image
-              :src="item"
-              v-if="item && item != ''"
-              class="slide-image"
-              mode="widthFix"
-              lazy-load
-            />
-          </swiper-item>
-        </block>
-      </swiper>
+    <view class="container">
+        <div @click="gomy" class="iconfont fanhui" :style="{top:topHight+'px'}">&#xe633;</div>
+        <view class="invi_img">
+            <swiper class="swiper_box" circular="true" duration="1000" indicator-dots="true" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#d7a54c" @change="swiperchange">
+                <block>
+                    <swiper-item v-for="(item, index) in bgImgList" :key="index">
+                        <image :src="item" v-if="item && item != ''" class="slide-image" mode="widthFix" lazy-load />
+                    </swiper-item>
+                </block>
+            </swiper>
+        </view>
+        <view class="invi_tops"><text space="nbsp">新用户扫二维码识别小程序 / 授权登录即可成功绑定关系</text></view>
+        <view class="btn_group disFlex_goodsBox flex_hor_between" v-if="bgImgList && bgImgList.length > 0">
+            <view class="btn_tab" @tap="getImg" v-if="flag">生成专属海报</view>
+        </view>
+        <canvas class="myCanvas" canvas-id="myCanvas" :style="'width:' + WIDTH + 'px;height:' + HEIGHT + 'px;'"></canvas>
     </view>
-    <view class="invi_tops"
-      ><text space="nbsp"
-        >新用户扫二维码识别小程序 / 授权登录即可成功绑定关系</text
-      ></view
-    >
-    <view
-      class="btn_group disFlex_goodsBox flex_hor_between"
-      v-if="bgImgList && bgImgList.length > 0"
-    >
-      <view class="btn_tab" @tap="getImg" v-if="flag">生成专属海报</view>
-      <view class="btn_tab" v-else>
-        <button
-          open-type="openSetting"
-          class="button"
-          plain
-          @getuserinfo="onGotUserInfo"
-        >
-          生成专属海报
-        </button>
-      </view>
-      <!-- <view class='btn_tab' bindtap='getImg' data-type='sy' wx:if="{{flag}}">生成收益海报</view>
-	        <view class='btn_tab' wx:else>
-	            <button open-type="openSetting" class='button' plain bindgetuserinfo="onGotUserInfo">生成收益海报</button>
-	        </view> -->
-    </view>
-    <canvas
-      class="myCanvas"
-      canvas-id="myCanvas"
-      :style="'width:' + WIDTH + 'px;height:' + HEIGHT + 'px;'"
-    ></canvas>
-  </view>
 </template>
 <script>
 let app = getApp();
 var appEv = app.$vm.$options;
-var util = require("@/utils/utils.js");
 import { post } from "@/request/api.js";
-// import { ReqApi } from "@/utils/reqTools.js";
-// var reqApi = new ReqApi();
-// import { base64ToPath } from "@/js_sdk/image-tools.js";
 
 export default {
-  data() {
-    return {
-      WIDTH: 1080,
-      HEIGHT: 1848,
-      E_WIDTH: 290,
-      flag: true,
-      imgUrl: "",
-      bgImgList: [],
-      bgSrc: "",
-      sybgSrc: "",
-      type: "",
-      userInfo: {},
-      Url: "",
-      userImg: "",
-    };
-  },
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-    this.loadData();
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {},
-  methods: {
-    loadData() {
-      uni.showLoading({ mask: true });
-      post("v1/user/xcxqrcode").then((res) => {
-        uni.hideLoading();
-        if (res.code === 0) {
-          this.bgImgList = res.data.data.list;
-          this.bgSrc = this.bgImgList[0];
-          this.userImg = res.data.data.userImg;
-        } else {
-          appEv.errTips(res.msg || "");
-        }
-      });
-    },
-    swiperchange: function (e) {
-      var current = e.detail.current || 0;
-      this.bgSrc = this.bgImgList[current];
-    },
-    onGotUserInfo(e) {
-      console.log(e);
+    data() {
+        return {
+            WIDTH: 1080,
+            HEIGHT: 1848,
+            E_WIDTH: 290,
+            flag: true,
+            imgUrl: "",
+            bgImgList: [],
+            bgSrc: "",
+            sybgSrc: "",
+            userInfo: {},
+            Url: "",
+            userImg: "",
+            topHight: 50,
+        };
     },
-    getImg(e) {
-      uni.showLoading({
-        title: "图片保存中...",
-      });
-      // 判断是否为生成收益海报
-      if (
-        e.currentTarget.dataset.type &&
-        e.currentTarget.dataset.type == "sy"
-      ) {
-        this.type = e.currentTarget.dataset.type;
-        this.HEIGHT = 1920;
-        this.getSyImg();
-      } else {
-        this.type = "";
-        this.HEIGHT = 1848;
-        this.getZsImg();
-      }
+    onLoad: function(options) {
+        this.loadData();
     },
-    // 专属海报接口
-    getZsImg() {
-      this.save();
+    onShow: function() {
+        let menuButtonObject = uni.getMenuButtonBoundingClientRect();
+        this.topHight = menuButtonObject.top;
+        // let app = uni.getSystemInfoSync()
+        // let topHight = app.statusBarHeight
+        // let navHeight = menuButtonObject.height + (menuButtonObject.top - topHight) * 2;
+        // this.topHight = topHight;
+        // console.log(menuButtonObject);
+        // console.log('顶部安全距离',topHight)
+        // console.log('按钮高度',navHeight)
     },
-    // 收益海报接口
-    getSyImg() {
-      this.save();
-    },
-
-    save() {
-      var bgSrc = this.type == "sy" ? this.sybgSrc : this.bgSrc,
-        userInfo = this.userInfo,
-        that = this;
-      uni.getImageInfo({
-        src: bgSrc,
-        success: function (ret) {
-          var path = ret.path;
-          if (that.type == "sy") {
-            uni.downloadFile({
-              url: this.userImg,
-              success(res) {
-                if (res.tempFilePath) {
-                  that.createImg(path, res.tempFilePath);
+    methods: {
+        loadData() {
+            uni.showLoading({ mask: true });
+            post("v1/user/xcxqrcode").then((res) => {
+                uni.hideLoading();
+                if (res.code === 0) {
+                    this.bgImgList = res.data.data.list;
+                    this.bgSrc = this.bgImgList[0];
+                    this.userImg = res.data.data.userImg;
                 } else {
-                  appEv.errTips("头像下载失败");
+                    appEv.errTips(res.msg || "");
                 }
-              },
-              fail() {
-                appEv.errTips("头像下载失败");
-              },
             });
-          } else {
-            that.createImg(path);
-          }
         },
-        fail: (err) => {
-          console.log(err);
+        swiperchange: function(e) {
+            var current = e.detail.current || 0;
+            this.bgSrc = this.bgImgList[current];
         },
-      });
-    },
-
-    createImg(bgSrc, avatar) {
-      let imgUrl = this.userImg,
-        WIDTH = this.WIDTH,
-        HEIGHT = this.HEIGHT,
-        E_WIDTH = this.E_WIDTH,
-        that = this;
-      var path;
-      uni.getImageInfo({
-        src: imgUrl,
-        success: function (ret) {
-          path = ret.path;
-
-          // let aBuffer = await base64ToPath(imgUrl);
-          // path = aBuffer;
-
-          const ctx = uni.createCanvasContext("myCanvas");
-          let EWM_Y =
-            that.type == "sy"
-              ? HEIGHT - E_WIDTH - 15 - 90
-              : HEIGHT - E_WIDTH - 15 - 128;
-
-          ctx.save();
-          ctx.drawImage(bgSrc, 0, 0, WIDTH, HEIGHT);
-          ctx.drawImage(path, (WIDTH - E_WIDTH) / 2, EWM_Y, E_WIDTH, E_WIDTH);
-          ctx.restore();
-
-          if (that.type == "sy") {
-            var userInfo = that.userInfo;
-
-            // 昵称
-            ctx.save();
-            ctx.setTextBaseline("top");
-            ctx.setTextAlign("left");
-            ctx.setFillStyle("#1b2028");
-            ctx.setFontSize(44);
-            ctx.fillText(
-              util.transformContentToMultiLineText(
-                ctx,
-                util.emoji_uncodeUtf16(userInfo.name),
-                190,
-                1
-              ),
-              520,
-              284,
-              230
-            );
-
-            // id
-            ctx.setFontSize(28);
-            ctx.fillText(userInfo.id, 632, 365, 230);
-
-            // 总佣金
-            ctx.setTextAlign("center");
-            ctx.setFillStyle("#f8233b");
-            ctx.setFontSize(84);
-            ctx.fillText(userInfo.money + "元", WIDTH / 2, 520);
-
-            // 时间
-            ctx.setFillStyle("#f5e3cd");
-            ctx.setFontSize(28);
-            ctx.fillText(
-              util.formatDateTime(new Date(), "hzhm") + "数据",
-              WIDTH / 2,
-              868
-            );
-
-            // 阶段佣金
-            ctx.setTextAlign("center");
-            ctx.setFillStyle("#fd513b");
-            ctx.setFontSize(38);
-            ctx.fillText(userInfo.todayMoney, WIDTH / 2 - 204, 1028);
-
-            ctx.fillText(userInfo.todayCount, WIDTH / 2 + 206, 1028);
-
-            ctx.fillText(userInfo.yesterDayMoney, WIDTH / 2 - 204, 1150);
-
-            ctx.fillText(userInfo.yesterDayCount, WIDTH / 2 + 206, 1150);
-
-            ctx.fillText(userInfo.monthMoney, WIDTH / 2 - 204, 1272);
-
-            ctx.fillText(userInfo.monthCount, WIDTH / 2 + 206, 1272);
-
-            ctx.fillText(userInfo.lastMonthMoney, WIDTH / 2 - 204, 1394);
-
-            ctx.fillText(userInfo.lastMonthCount, WIDTH / 2 + 206, 1394);
-            ctx.restore();
-
-            // 头像
-            ctx.save();
-            ctx.beginPath();
-            ctx.arc(426, 340, 66, 0, 2 * Math.PI);
-            ctx.clip();
-            ctx.drawImage(avatar, 360, 274, 132, 132);
-            ctx.restore();
-          }
-
-          ctx.draw(false, function (e) {
-            // 保存到本地
-            uni.canvasToTempFilePath({
-              canvasId: "myCanvas",
-              quality: 1,
-              fileType: "jpg",
-              success: function (res) {
-                let pic = res.tempFilePath;
-                that.saveImage(pic);
-              },
+        getImg(e) {
+            uni.showLoading({
+                title: "图片保存中...",
             });
-          });
+            this.save();
         },
-        fail: (err) => {
-          console.log(err);
+
+        save() {
+            var bgSrc = this.bgSrc,
+                that = this;
+            uni.getImageInfo({
+                src: bgSrc,
+                success: function(ret) {
+                    var path = ret.path;
+					that.createImg(path);
+                },
+                fail: (err) => {
+                    console.log(err);
+                },
+            });
         },
-      });
-    },
 
-    saveImage(path = appEv.parameter("path")) {
-      var that = this;
-      uni.getSetting({
-        success: (res) => {
-          //如果没有相册权限
-          console.log(res.authSetting); //授权信息
-          if (!res.authSetting["scope.writePhotosAlbum"]) {
-            console.log("没有授权,调用授权!");
-            //向用户发起授权请求
-            uni.authorize({
-              scope: "scope.writePhotosAlbum",
-              success: () => {
-                console.log("授权成功!");
-                that.savefun(path);
-              },
-              fail: (res) => {},
+        createImg(bgSrc, avatar) {
+            let imgUrl = this.userImg,
+                WIDTH = this.WIDTH,
+                HEIGHT = this.HEIGHT,
+                E_WIDTH = this.E_WIDTH,
+                that = this;
+            var path;
+            uni.getImageInfo({
+                src: imgUrl,
+                success: function(ret) {
+                    path = ret.path;
+                    const ctx = uni.createCanvasContext("myCanvas");
+                    let EWM_Y = HEIGHT - E_WIDTH - 15 - 128;
+
+                    ctx.save();
+                    ctx.drawImage(bgSrc, 0, 0, WIDTH, HEIGHT);
+                    ctx.drawImage(path, (WIDTH - E_WIDTH) / 2, EWM_Y, E_WIDTH, E_WIDTH);
+                    ctx.restore();
+
+                    ctx.draw(false, function(e) {
+                        // 保存到本地
+                        uni.canvasToTempFilePath({
+                            canvasId: "myCanvas",
+                            quality: 1,
+                            fileType: "jpg",
+                            success: function(res) {
+                                let pic = res.tempFilePath;
+                                that.saveImage(pic);
+                            },
+                        });
+                    });
+                },
+                fail: (err) => {
+                    console.log(err);
+                },
             });
-          } else {
-            console.log("已授权。直接保存");
-            that.savefun(path);
-          }
         },
-        fail: (res) => {},
-      });
-    },
 
-    savefun(path) {
-      uni.saveImageToPhotosAlbum({
-        filePath: path,
-        success(result) {
-          uni.showToast({
-            title: "保存成功",
-            icon: "success",
-            duration: 1200,
-          });
-          // 预览图片
-          uni.previewImage({
-            current: path, // 当前显示图片的http链接
-            urls: [path], // 需要预览的图片http链接列表
-          });
+        saveImage(path = appEv.parameter("path")) {
+            var that = this;
+            uni.getSetting({
+                success: (res) => {
+                    //如果没有相册权限
+                    console.log(res.authSetting); //授权信息
+                    if (!res.authSetting["scope.writePhotosAlbum"]) {
+                        console.log("没有授权,调用授权!");
+                        //向用户发起授权请求
+                        uni.authorize({
+                            scope: "scope.writePhotosAlbum",
+                            success: () => {
+                                console.log("授权成功!");
+                                that.savefun(path);
+                            },
+                            fail: (res) => {},
+                        });
+                    } else {
+                        console.log("已授权。直接保存");
+                        that.savefun(path);
+                    }
+                },
+                fail: (res) => {},
+            });
         },
-        fail(result) {
-          this.flag = false;
-          appEv.errTips("保存失败");
+
+        savefun(path) {
+            uni.saveImageToPhotosAlbum({
+                filePath: path,
+                success(result) {
+                    uni.showToast({
+                        title: "保存成功",
+                        icon: "success",
+                        duration: 1200,
+                    });
+                    // 预览图片
+                    uni.previewImage({
+                        current: path, // 当前显示图片的http链接
+                        urls: [path], // 需要预览的图片http链接列表
+                    });
+                },
+                fail(result) {
+                    this.flag = false;
+                    appEv.errTips("保存失败");
+                },
+            });
         },
-      });
+
+        gomy(){
+            uni.switchTab({ url: "/pages/my/index" });
+        }
     },
-  },
 };
 </script>
 <style lang="scss">
-/* pages/invi-img/index.wxss */
 page {
-  background-color: #2f323b;
-  color: #fff;
+    background-color: #2f323b;
+    color: #fff;
+}
+.fanhui{
+    position: absolute;
+    left: 0;
+    top: 100rpx;
+    color: #fff;
+    font-size: 66rpx;
 }
 
 .container {
-  width: 600rpx;
-  margin: 0 auto;
-  overflow: hidden;
-  position: relative;
+    width: 600rpx;
+    margin: 0 auto;
+    overflow: hidden;
+    position: relative;
+	padding-top: 190rpx;
 }
 
 .myCanvas {
-  position: absolute;
-  top: 150%;
-  left: 50%;
-  right: 0;
-  bottom: 0;
-  opacity: 0;
-  transform: translate(-50%, 50%);
+    position: absolute;
+    top: 150%;
+    left: 50%;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transform: translate(-50%, 50%);
 }
 
 .invi_img {
-  margin: 5% 0 24rpx;
-  overflow: hidden;
-  border: 16rpx solid #fff;
+    margin: 5% 0 24rpx;
+    overflow: hidden;
+    border: 16rpx solid #fff;
 }
 
 .invi_img .image {
-  width: 100%;
-  display: block;
+    width: 100%;
+    display: block;
 }
 
 .invi_img .swiper_box,
 .invi_img .slide-image {
-  width: 100%;
-  height: 970rpx !important;
-  overflow: hidden;
+    width: 100%;
+    height: 970rpx !important;
+    overflow: hidden;
 }
 
 .invi_tops {
-  list-style: 1.2;
-  font-size: 24rpx;
-  opacity: 0.8;
-  text-align: center;
-  width: 640rpx;
-  margin-left: -20rpx;
-  transform: scale(0.9);
-  -webkit-transform: scale(0.9);
-  -moz-transform: scale(0.9);
-  -o-transform: scale(0.9);
-  -ms-transform: scale(0.9);
-  transform-origin: top center;
-  -webkit-transform-origin: top center;
-  -moz-transform-origin: top center;
-  -o-transform-origin: top center;
-  -ms-transform-origin: top center;
+    list-style: 1.2;
+    font-size: 24rpx;
+    opacity: 0.8;
+    text-align: center;
+    width: 640rpx;
+    margin-left: -20rpx;
+    transform: scale(0.9);
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    transform-origin: top center;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -o-transform-origin: top center;
+    -ms-transform-origin: top center;
 }
 
 .btn_group {
-  padding-top: 6rpx;
-  padding-bottom: 42rpx;
+    padding-top: 6rpx;
+    padding-bottom: 42rpx;
 }
 
 .btn_group .btn_tab {
-  /* min-width: calc((100% - 32rpx) / 2); */
-  min-width: 100%;
-  border-radius: 8rpx;
-  box-sizing: border-box;
-  padding: 20rpx;
-  text-align: center;
-  color: #fff;
-  background-color: #c9ab79;
-  margin-top: 32rpx;
-  /* width: 100%; */
+    /* min-width: calc((100% - 32rpx) / 2); */
+    min-width: 100%;
+    border-radius: 8rpx;
+    box-sizing: border-box;
+    padding: 20rpx;
+    text-align: center;
+    color: #fff;
+    background-color: #c9ab79;
+    margin-top: 32rpx;
+    /* width: 100%; */
 }
 
 .btn_group .btn_tab .button {
-  border: 0;
-  padding: 0;
-  margin: 0;
+    border: 0;
+    padding: 0;
+    margin: 0;
 }
 
 .btn_group .btn_tab,
 .btn_group .btn_tab .button {
-  color: #fff;
-  line-height: 1.4;
-  font-size: 28rpx;
-}
-
-.codeimg {
-  // display: none;
+    color: #fff;
+    line-height: 1.4;
+    font-size: 28rpx;
 }
 </style>

+ 1 - 0
src/pagesB/directCharge/orderDetail.vue

@@ -54,6 +54,7 @@ let toPayOpre = new ToPayOpre();
 import Uqrcode from '@/components/uqrcode/uqrcode';
 import tkiBarcode  from "@/pagesB/components/tki-barcode/tkiBarcode.vue";
 import { post } from "@/request/api.js";
+import uniCopy from "@/utils/copy";
 export default {
     name: "orderDetail",
     props: {},