Kaynağa Gözat

拼团分享功能开发

ZhangWenQiang 6 yıl önce
ebeveyn
işleme
4574f2e173

+ 3 - 3
pages/pt-detail/index.js

@@ -58,7 +58,7 @@ Page({
   onShareAppMessage: function() {
     return {
       title: '开心工作参团有奖',
-      path: '/pages/pt-detail/index?hpPositionGroupId=' + this.data.hpPositionGroupId,
+      path: '/pages/pt-detail/index?hpPositionGroupId=' + this.data.hpPositionGroupId + '&positionCategory=' + this.data.positionCategory + '&positionId=' + this.data.positionId,
       imageUrl: ''
     }
   },
@@ -132,9 +132,9 @@ Page({
   },
 
   //分享图片
-  toShare() {
+  makeMyPt() {
     wx.navigateTo({
-      url: '../pt-share/pt-share?hpPositionGroupId=' + this.data.hpPositionGroupId,
+      url: '../pt-share/pt-share?hpPositionGroupId=' + this.data.hpPositionGroupId + '&positionCategory=' + this.data.positionCategory + '&positionId=' + this.data.positionId,
     })
   },
 

+ 3 - 1
pages/pt-detail/index.wxml

@@ -132,7 +132,9 @@
             再邀请{{3-postitionDetail.myGroupList.length}}位伙伴,奖励增加{{postitionDetail.position.threeGroupCashback}}元;再邀请{{5-postitionDetail.myGroupList.length}}位伙伴,奖励增加{{postitionDetail.position.fiveGroupCashback}}元。
           </view>
           <view class='interview'>
-            <text bindtap=''>邀请好友一起来拼工</text>
+            <!-- <text bindtap='interviewFriend'> -->
+            <button open-type='share' class='share'>邀请好友一起来拼工</button>
+            <!-- </text> -->
           </view>
           <view class='join_1'>
             <text bindtap='makeMyPt'>生成我的拼工分享图</text>

+ 15 - 0
pages/pt-detail/index.wxss

@@ -271,6 +271,21 @@
   padding: 48rpx 100rpx 0 100rpx;
 }
 
+.panel .three .pt .interview .share {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 72rpx;
+  border: 2rpx solid rgba(255, 143, 1, 1);
+  border-radius: 36rpx;
+  font-size: 32rpx;
+  font-family: SourceHanSansCN-Regular;
+  font-weight: 400;
+  color: #ff8f01;
+  background-color: #fff;
+}
+
 .panel .three .pt .interview text {
   display: flex;
   align-items: center;

+ 79 - 193
pages/pt-share/pt-share.js

@@ -1,8 +1,17 @@
-import { imgServerUrl } from '../../config/config.js'
-import { showToast } from '../../utils/tips.js'
+import {
+  imgServerUrl
+} from '../../config/config.js'
+import {
+  showToast
+} from '../../utils/tips.js'
 import Poster from '../../components/wxa-plugin-canvas/poster/poster';
-import { shareQrCodeB, getGroupDetail } from '../../services/index.js'
-import { updataStorageData } from '../../utils/storage.js'
+import {
+  shareQrCodeB,
+  getGroupDetail
+} from '../../services/index.js'
+import {
+  updataStorageData
+} from '../../utils/storage.js'
 var app = getApp()
 
 Page({
@@ -10,213 +19,87 @@ Page({
     imgServerUrl: imgServerUrl,
     qrCode: '',
     hasAuth: true,
-    posterConfig:'',
+    posterConfig: '',
     userInfo: '',
   },
-  onLoad: function (options) {
+  onLoad: function(options) {
     this.setData({
       hpPositionGroupId: options.hpPositionGroupId,
-      userInfo: app.globalData.userInfo,
+      positionCategory: options.positionCategory,
+      positionId: options.positionId
     })
-    // this.fetchData()
-    // this.getCode()
-    Promise.all([this.fetchData(), this.getCode()]).then(data=>{
-      let posterConfig = {
-        width: 700,
-        height: 950,
-        debug: false,
-        // blocks: [
-        //   {
-        //     x: 192,
-        //     y: 600,
-        //     height: 33,
-        //     baseLine: 'middle',
-        //     paddingLeft: 15,
-        //     paddingRight: 15,
-        //     zIndex: 2,
-        //     borderRadius: 4,
-        //     backgroundColor: '#fff',
-        //     text: {
-        //       text: [
-        //         {
-        //           text: '男女不限',
-        //           fontSize: 16,
-        //           color: '#0e79d0',
-        //         },
-        //       ],
-        //       baseLine: 'middle',
-        //     }
-
-        //   },
-        // ],
-        texts: [
-          {
-            x: 90,
-            y: 250,
-            baseLine: 'middle',
-            text: '推荐奖励',
-            fontSize: 30,
-            color: '#ffffff',
-            lineHeight: 30,
-            zIndex: 2,
-          },
-          {
-            x: 472,
-            y: 250,
-            baseLine: 'middle',
-            text: '诚信企业',
-            fontSize: 30,
-            color: '#ffffff',
-            lineHeight: 30,
-            zIndex: 2,
-          },
-          {
-            x: 350,
-            y: 390,
-            baseLine: 'middle',
-            // text: '王明',
-            text: this.data.userInfo.nickName,
-            textAlign: 'center',
-            width: 700,
-            fontSize: 64,
-            color: '#ffffff',
-            lineHeight: 30,
-            zIndex: 2,
-          },
-          {
-            x: 350,
-            y: 487,
-            baseLine: 'middle',
-            text: '我在找好友一起上班',
-            textAlign: 'center',
-            fontSize: 37,
-            color: '#ffffff',
-            zIndex: 2,
-          },
-          {
-            x: 192,
-            y: 570,
-            baseLine: 'middle',
-            // text: '无锡先导自动化设备股份有限公司',
-            text: this.data.comName,
-            fontSize: 26,
-            color: '#ffffff',
-            zIndex: 2,
-          },
-          {
-            x: 70,
-            y: 791,
-            baseLine: 'middle',
-            text: '立即扫码',
-            fontSize: 30,
-            color: '#ffffff',
-            zIndex: 2,
-          },
-          {
-            x: 500,
-            y: 791,
-            baseLine: 'middle',
-            text: '开心工作',
-            fontSize: 30,
-            color: '#ffffff',
-            zIndex: 2,
-          },
-
-        ],
-        images: [
-          {
-            width: 700,
-            height: 950,
-            x: 0,
-            y: 0,
-            url: `${imgServerUrl}/images/pt/bg.png`,
-            zIndex: 1,
-          },
-          {
-            width: 222,
-            height: 222,
-            x: 230,
-            y: 102,
-            // url: `${imgServerUrl}/images/pt/bg.png`,
-            url: app.globalData.userInfo.avatarUrl,
-            borderRadius: 222,
-            zIndex: 2,
-          },
-          {
-            width: 90,
-            height: 90,
-            x: 70,
-            y: 562,
-            borderRadius: 90,
-            // url: `${imgServerUrl}/images/avatar/man.png`,
-            url: this.data.comLogo,
-            zIndex: 2,
-          },
-          {
-            width: 196,
-            height: 196,
-            x: 245,
-            y: 712,
-            // url: `${imgServerUrl}/images/temp/men.png`,
-            url: this.data.qrCode,
-            zIndex: 2,
-          },
-        ],
-      }
-      if (!this.data.comLogo){
-        posterConfig.images.splice(2,1)
-      }
-      console.log(posterConfig)
+  },
+  onShow: function() {
+    if (app.globalData.userInfo) {
+      console.log('有info===', app.globalData)
       this.setData({
-        posterConfig
+        userInfo: app.globalData.userInfo
       })
-      
-    })
-  },
-  onShow: function () {
-    this.setData({
-      hasAuth: true
-    })
+      this.fetchData()
+    } else if (this.data.canIUse) {
+      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
+      // 所以此处加入 callback 以防止这种情况
+      app.userInfoReadyCallback = res => {
+        console.log('userInfoReadyCallback===', app.globalData)
+        this.setData({
+          userInfo: app.globalData.userInfo
+        })
+        this.fetchData()
+      }
+    } else {
+      // 在没有 open-type=getUserInfo 版本的兼容处理
+      wx.getUserInfo({
+        success: res => {
+          app.globalData.userInfo = res.userInfo
+          console.log('兼容处理===', app.globalData)
+          this.setData({
+            userInfo: app.globalData.userInfo
+          })
+          this.fetchData()
+        }
+      })
+    }
   },
   //获取历史记录
   fetchData() {
-    var that = this
-    return new Promise(function (resolve,reject){
-      getGroupDetail({
-        hpPositionGroupId: that.data.hpPositionGroupId
-      }).then(data => {
-        console.log(data)
-        that.setData({
-        comLogo: data.data.comLogo,
-        comName: data.data.comName
-      })
-      resolve(true)
-    }).catch(data=>{
-        console.log(data)
-        reject(data)
+    let paramsObj = {
+      positionCategory: this.data.positionCategory,
+      positionId: this.data.positionId,
+      groupId: this.data.hpPositionGroupId,
+      user_id: app.globalData.userId,
+      user_token: app.globalData.userToken
+    }
+    Object.assign(paramsObj);
+    getGroupDetail(paramsObj).then(data => {
+      console.log("groupDetail", data)
+      var leftTime = data.data.position.groupEndTime
+      this.setData({
+        postitionDetail: data.data
       })
     })
-   
   },
+
   onPosterSuccess(e) {
     console.log(e)
-    const { detail } = e;
-    var that =this
+    const {
+      detail
+    } = e;
+    var that = this
     wx.saveImageToPhotosAlbum({
       filePath: detail,
       success(res) {
         console.log(res)
         wx.hideLoading();
-        showToast('已保存到相册,快去分享吧!','success',3000)
+        showToast('已保存到相册,快去分享吧!', 'success', 3000)
       },
-      fail(err){
+      fail(err) {
         wx.hideLoading();
         showToast('请授权保存到相册')
         that.setData({
           hasAuth: false
         })
       }
-    })    
+    })
   },
   onPosterFail(err) {
     console.error(err);
@@ -225,32 +108,35 @@ Page({
   /**
    * 异步生成海报
    */
-  onCreatePoster() {    
+  onCreatePoster() {
     Poster.create();
   },
   getCode() {
-    wx.showLoading({ title: 'loading', mask: true });
+    wx.showLoading({
+      title: 'loading',
+      mask: true
+    });
     var that = this
-    return new Promise(function (resolve,reject){
+    return new Promise(function(resolve, reject) {
       let targetUrl = 'pages/pt-detail/index?hpPositionGroupId=' + that.data.hpPositionGroupId + '&shareToken=' + updataStorageData('shareToken')
       shareQrCodeB(targetUrl).then(data => {
         that.setData({
           qrCode: data.data.imgUrl
-        })        
+        })
         resolve(true)
-      }).catch(data=>{
+      }).catch(data => {
         console.log(data)
         reject(data)
       })
-    })    
+    })
   },
-  qrcodeLoad(e){
+  qrcodeLoad(e) {
     wx.hideLoading()
   },
 
   onError(err) {
-    app.aldstat.sendEvent('报错',{
-        'err': err
+    app.aldstat.sendEvent('报错', {
+      'err': err
     });
   },
 })

+ 4 - 1
pages/pt-share/pt-share.json

@@ -1,5 +1,8 @@
 {
   "usingComponents": {
-    "poster": "/components/wxa-plugin-canvas/poster/index"
+    "poster": "/components/wxa-plugin-canvas/poster/index",
+    "i-icon": "../../ui/icon/index",
+    "i-notice-bar": "../../ui/notice-bar/index",
+    "i-tag": "../../ui/tag/index"
   }
 }

+ 67 - 42
pages/pt-share/pt-share.wxml

@@ -1,45 +1,70 @@
-<!-- <view class="banner">
-    <image class="banner-img" src="../../images/pt/banner.png" mode="widthFix"/>
-</view> -->
-<view class="container">
-    <image class="canvas-bg" src="{{imgServerUrl}}/images/pt/bg.png" />
-    <view class="bg">
-        <view class="row">
-            <text class="text-1">推荐奖励</text>
-            {{userInfo.avatarUrl}}
-                <image class="avatar" src="{{userInfo.avatarUrl}}"/>
-            <text class="text-2">诚信企业</text>
-        </view>
-        <view class="name">{{userInfo.nickName}}</view>
-        <view class="text-3">我在找好友一起上班</view>
-        <view class="company">
-            <image class="company-logo" src="{{comLogo}}" />
-            <view class="company-info">
-                <view class="company-name">{{comName}}</view>
-                <!-- <view class="company-tags">
-                    <view class="row tags-1">
-                        <text class="tag">男女不限</text>
-                        <text class="tag">18-45周岁</text>
-                        <text class="tag">初中以上</text>
-                        <text class="tag">经验3年</text>
-                    </view>
-                    <view class="row tags-2">
-                        <text class="tag">26个英文字母</text>
-                        <text class="tag">简单算术</text>
-                        <text class="tag">无纹身烟疤</text>
-                    </view>
-                </view> -->
-            </view>
-        </view>
-        <view class="footer">
-            <text class="footer-text-1">立即扫码</text>
-            <image class="code" src="{{qrCode}}" bindload="qrcodeLoad"/>
-            <text class="footer-text-2">开心工作</text>
+<!--pages/pt-share/index.wxml-->
+<wxs src="../tools.wxs" module="globalTools" />
+<view class="panel">
+  <image src="{{imgServerUrl}}/images/pt/pt-banner.jpg" class="slide-image" mode='widthFix' />
+  <view class='share'>
+    <view class='one'>
+      <view class='left'>
+        <view class='name'>{{userInfo.nickName}}</view>
+        <view class='title'>“我在找好友一起上班!”</view>
+      </view>
+      <view class='right'>
+        <image src='{{userInfo.avatarUrl}}'></image>
+      </view>
+    </view>
+    <view class='two'>
+      <view class='position'>
+        {{postitionDetail.position.positionName}}
+      </view>
+      <view class='company'>
+        {{postitionDetail.position.hpCompany.companyName}}
+      </view>
+      <view class='salary'>
+        {{postitionDetail.position.totalSalary?postitionDetail.position.totalSalary:postitionDetail.position.basicSalary}}
+      </view>
+      <view class='limit'>
+        <block wx:if="{{specialWelfare}}">
+          <i-tag wx:for="{{globalTools.splitStr1(postitionDetail.position.specialWelfare,',')}}" wx:key="*this" wx:for-item="tag" i-class="tag-class">
+            {{tag}}
+          </i-tag>
+        </block>
+        <block wx:if="{{postitionDetail.position.accommodation}}">
+          <i-tag i-class="tag-class">
+            {{postitionDetail.position.accommodation}}
+          </i-tag>
+        </block>
+        <block wx:if="{{postitionDetail.position.socialSecurity}}">
+          <i-tag i-class="tag-class">
+            {{postitionDetail.position.socialSecurity}}
+          </i-tag>
+        </block>
+        <block wx:if="{{postitionDetail.position.workDinner}}">
+          <i-tag i-class="tag-class">
+            {{postitionDetail.position.workDinner}}
+          </i-tag>
+        </block>
+        <block wx:if="{{postitionDetail.position.regularBus}}">
+          <i-tag i-class="tag-class">
+            {{postitionDetail.position.regularBus}}
+          </i-tag>
+        </block>
+      </view>
+    </view>
+    <view class='three'>
+      <view class='left'>
+        <view>
+          <image src='../../images/happyjob/logo.png'></image>
         </view>
+        <view class='kefu'>专属客服,全程服务</view>
+      </view>
+      <view class='mid'>
+        <image src='{{qrcode}}'></image>
+      </view>
+      <view class='right'>
+        <view>识别右侧二维码,</view>
+        <view>即可参与我发起的拼工!</view>
+      </view>
     </view>
+  </view>
 </view>
-
-<button class="create" bindtap='onCreatePoster' wx:if="{{hasAuth}}">生成分享图片</button>
-<button class="create" open-type="openSetting" bindopensetting="onCreatePoster" wx:else>打开授权页</button>
-<poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
-</poster>
+<button class="create" bindtap='onCreatePoster' wx:if="{{hasAuth}}">保存图片</button>

+ 177 - 134
pages/pt-share/pt-share.wxss

@@ -1,134 +1,177 @@
-page{
-    position: relative;
-    background: #f4f4f4;
-    padding: 20rpx 25rpx 0;
-    box-sizing: border-box;
-}
-/* .banner-img{
-    width: 700rpx;
-    height: 220rpx;
-} */
-.container{
-    width: 700rpx;
-    height: 950rpx;
-    margin-bottom: 65rpx;
-}
-.canvas-bg{
-    position: absolute;
-    top: 20rpx;
-    left: 25rpx;
-    width: 700rpx;
-    height: 950rpx;
-}
-.bg{
-    width:700rpx;
-    height:730rpx;
-    color: #fff;
-    font-size: 30rpx;
-}
-.avatar{
-    position: absolute;
-    top: 122rpx;
-    left: 255rpx;
-    width: 222rpx;
-    height: 222rpx;
-    border-radius: 50%;
-    overflow: hidden;
-    background: #f1f1f1;
-}
-.text-1{
-    position: absolute;
-    top: 262rpx;
-    left: 115rpx;
-	font-family: SourceHanSansCN-Light;
-	font-size: 30rpx;
-	line-height: 30rpx;
-}
-.text-2{
-    position: absolute;
-    top: 262rpx;
-    left: 497rpx;
-	font-family: SourceHanSansCN-Light;
-	font-size: 30rpx;
-	line-height: 30rpx;
-}
-.name{
-    position: absolute;
-    top: 392rpx;
-    font-size: 64rpx;
-    line-height: 30rpx;
-    text-align:center;
-    width:700rpx;
-}
-.text-3{
-    position: absolute;
-    left: 200rpx;
-    top: 487rpx;
-    font-size: 37rpx;
-}
-.company-logo{
-    position: absolute;
-    left: 95rpx;
-    top: 582rpx;
-    width: 90rpx;
-    height: 90rpx;
-    border-radius: 50%;
-    overflow: hidden;
-}
-.company-name{
-    position: absolute;
-    left: 217rpx;
-    top: 572rpx;
-    font-size: 26rpx;
-}
-.company-tags{
-    position: absolute;
-    left: 217rpx;
-    top: 618rpx;
-    color: #0e79d0;
-    font-size: 16rpx;
-}
-.tag{
-    padding: 8rpx 15rpx;
-    background: #fff;
-    border-radius: 4rpx;
-    margin-right: 7rpx;
-}
-.tags-2{
-    position: absolute;
-    top: 44rpx;
-    left: 0;
-
-}
-.footer-text-1{
-    position: absolute;
-    left: 95rpx;
-    top: 811rpx;
-    font-size: 30rpx;
-}
-.footer-text-2{
-    position: absolute;
-    left: 525rpx;
-    top: 811rpx;
-    font-size: 30rpx;
-}
-.code{
-    position: absolute;
-    left: 270rpx;
-    top:732rpx;
-    width:196rpx;
-    height: 196rpx;
-}
-.create{
-    width: 604prx;
-	height: 80rpx;
-	background-color: #37a0db;
-    border-radius: 38rpx;
-    font-size: 38rpx;
-	line-height: 80rpx;
-	letter-spacing: 4rpx;
-    color: #ffffff;
-    padding: 0;
-    margin: 0 45rpx;
-    box-sizing: border-box;
-}
+/* pages/pt-share/index.wxss */
+
+page {
+}
+
+.panel {
+  padding: 60rpx 30rpx 0 30rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.slide-image {
+  width: 100%;
+  height: 246rpx;
+  border-top-left-radius: 10rpx;
+  border-top-right-radius: 10rpx;
+}
+
+.share {
+  background: linear-gradient(45deg, rgba(129, 198, 242, 1), rgba(84, 112, 223, 1));
+  border-bottom-left-radius: 10rpx;
+  border-bottom-right-radius: 10rpx;
+  padding-bottom: 62rpx;
+}
+
+.share .one {
+  display: flex;
+  justify-content: space-between;
+}
+
+.share .one .left {
+  display: flex;
+  flex-direction: column;
+}
+
+.share .one .left .name {
+  font-size: 38rpx;
+  font-family: SourceHanSansCN-Regular;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+  padding: 35rpx 0 0 54rpx;
+}
+
+.share .one .left .title {
+  font-size: 26rpx;
+  font-family: SourceHanSansCN-Regular;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+  padding: 20rpx 0 0 54rpx;
+}
+
+.share .one .right {
+  padding-right: 70rpx;
+  margin-top: -66rpx;
+}
+
+.share .one .right image {
+  width: 194rpx;
+  height: 194rpx;
+  border-radius: 50%;
+  border: 12rpx solid #fff;
+}
+
+.share .two {
+  display: flex;
+  flex-direction: column;
+  padding-top: 80rpx;
+  align-items: center;
+}
+
+.share .two .position {
+  font-size: 38rpx;
+  font-family: SourceHanSansCN-Regular;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+
+.share .two .company {
+  font-size: 20rpx;
+  font-family: SourceHanSansCN-Regular;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+  padding-top: 12rpx;
+}
+
+.share .two .salary {
+  font-size: 50rpx;
+  font-family: Arial-BoldMT;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 1);
+  padding-top: 28rpx;
+}
+
+.share .two .limit {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 28rpx 54rpx 0 54rpx;
+  color: #5a90ca;
+  justify-content: center;
+}
+
+.share .two .limit i-tag {
+  /* margin-left: 10rpx; */
+}
+
+.tag-class {
+  background: #d7e5fc !important;
+  margin-right: 16rpx;
+  white-space: nowrap;
+  border: none !important;
+  border-radius: 19px !important;
+  padding: 10rpx;
+}
+
+.share .three {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 90rpx;
+}
+
+.share .three .left {
+  display: flex;
+  flex-direction: column;
+}
+
+.share .three .left image {
+  width: 197rpx;
+  height: 41rpx;
+}
+
+.share .three .left .kefu {
+  font-size: 20rpx;
+  font-family: SourceHanSansCN-Regular;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+  padding-top: 10rpx;
+}
+
+.share .three .mid {
+  width: 134rpx;
+  height: 134rpx;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 6rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.share .three .mid image {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 6rpx;
+}
+
+.share .three .right {
+  display: flex;
+  flex-direction: column;
+  font-size: 20rpx;
+  font-family: SourceHanSansCN-Regular;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+
+.create {
+  display: flex;
+  margin: 100rpx 20rpx 20rpx 20rpx;
+  height: 86rpx;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(90deg, rgba(59, 120, 207, 1), rgba(80, 166, 195, 1));
+  border-radius: 42rpx;
+  font-size: 38rpx;
+  font-family: SourceHanSansCN-Normal;
+  font-weight: 400;
+  color: rgba(255, 254, 254, 1);
+}