Skip to content

7
7-Eleven
Commit fe9ed00f by 赵雅纹
Options

邀请好友保存海报

parent 9cbb7d11
Showing with 357 additions and 201 deletions
src/palette/image-example.js
......@@ -8,71 +8,30 @@ export default class ImageExample {
{
type: 'image',
url: '/palette/sky.jpg',
},
{
type: 'text',
text: '未设置height、width时',
css: {
right: '0rpx',
top: '60rpx',
fontSize: '30rpx',
},
},
{
type: 'image',
url: '/palette/sky.jpg',
css: {
width: '200rpx',
height: '200rpx',
top: '230rpx',
},
},
{
type: 'text',
text: "mode: 'aspectFill' 或 无",
css: {
left: '210rpx',
fontSize: '30rpx',
top: '290rpx',
},
css : {
width: '654rpx',
height: '1000rpx'
}
},
{
type: 'image',
url: '/palette/sky.jpg',
css: {
width: '200rpx',
height: '200rpx',
mode: 'scaleToFill',
top: '500rpx',
},
},
{
type: 'text',
text: "mode: 'scaleToFill'",
css: {
left: '210rpx',
top: '560rpx',
fontSize: '30rpx',
},
},
{
type: 'image',
url: '/palette/sky.jpg',
css: {
width: '200rpx',
height: 'auto',
top: '750rpx',
},
},
{
type: 'text',
text: '设置height为auto',
css: {
left: '210rpx',
top: '780rpx',
fontSize: '30rpx',
},
},
width: '100rpx',
height: '100rpx',
right: '28rpx',
bottom: '43rpx',
}
},
// {
// type: 'text',
// text: '设置height为auto',
// css: {
// left: '210rpx',
// top: '780rpx',
// fontSize: '30rpx',
// },
// },
],
});
}
......
src/palette/inviteFriends.js 0 → 100644
export default class InviteFriends {
palette(posterImg,qrcodeImg) {
return ({
width: '410rpx',
height: '705rpx',
background: '#eee',
views: [
{
type: 'image',
url: posterImg,
css: {
width: '410rpx',
height: '705rpx'
}
},
{
type: 'image',
url: qrcodeImg,
css: {
width: '100rpx',
height: '100rpx',
right: '28rpx',
bottom: '43rpx',
}
},
],
});
}
}
src/subPackage/page/pages/myInvite/myInvite.js
// subPackage/page/pages/myInvite/myInvite.js
Page({
const app = getApp()
const wxService = require('../../../../utils/wxService')
const utils = require('../../../../utils/util')
const { memberId } = wx.getStorageSync('_baseUserInfo')
import { Integer } from '../../../../utils/integerDigitalConvertion'
wxService.page({
/**
* 页面的初始数据
*/
data: {
currentInviteNum:'', //当前邀请人数
yesterdayInviteNum:'', //昨日邀请新增
pageNo: 1,
pageSize: 50,
inviteMemberList: [],
inviteBanner: ''
},
/**
* 生命周期函数--监听页面加载
* 生命周期函数--监听页面显示
*/
onLoad: function (options) {
onShow: function () {
this.getInviteNumber()
this.getYesterdayInviteNumber()
this.getInviteMemberList()
this.getInviteBanner()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 获取当前邀请人数
getInviteNumber(){
wxService.post(`/member/share/inviteFriends/buyer/count`,{
userId: memberId,
tentacleType: 3
}).then(res => {
const { result, data } = res.data
if (result == 0) {
this.setData({
currentInviteNum: data
})
}
}).finally(() => {
})
},
// 获取昨日邀请人数
getYesterdayInviteNumber() {
// 昨天的时间
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate() +' ' + '00:00:00';
//今天的时间
var day2 = new Date();
day2.setTime(day2.getTime());
var today = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate() + ' ' + '00:00:00';
let params = {
userId: memberId,
activateEndTime: today,
activateStartTime: yesterday,
tentacleType: 3
}
wxService.post(`/member/share/inviteFriends/buyer/count`, params).then(res => {
const { result, data } = res.data
if (result == 0) {
this.setData({
yesterdayInviteNum: data
})
}
}).finally(() => {
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 邀请会员列表
getInviteMemberList(){
let params = {
userId: memberId,
tentacleType: 3
}
wx.showLoading({
title: '加载中',
mask: true
})
wxService.post(`/member/share/inviteFriends/buyer/findPage?pageNo=${this.data.pageNo}&pageSize=${this.data.pageSize}`, params).then(res => {
if (res) {
const { result, data } = res.data
if (result == 0) {
wx.hideLoading()
this.setData({
inviteMemberList: data
}, () => {
})
}
}
})
},
// 获取邀请页面banner
getInviteBanner(){
wxService.get(`/member/share/inviteFriends/buyer/getValid`).then(res => {
if (res) {
const { result, data } = res.data
if (result == 0) {
wx.hideLoading()
this.setData({
inviteBanner: data.gradientAwardPage
}, () => {
})
}
}
})
},
/**
......@@ -50,12 +135,6 @@ Page({
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
......
src/subPackage/page/pages/myInvite/myInvite.json
{
"enablePullDownRefresh": true,
"navigationBarTitleText": "我的邀请",
"usingComponents": {}
}
\ No newline at end of file
src/subPackage/page/pages/myInvite/myInvite.wxml
......@@ -2,28 +2,33 @@
<view class="page-my-invite">
<view class="release-num weui-flex df-j--bt">
<view class="num-invite df-1 border_box">
<view class="share-number">1287</view>
<view class="share-number">{{currentInviteNum}}</view>
<view class="share-title">当前邀请人数</view>
</view>
<view class="extension-line"></view>
<view class="num-invite-yesterday df-1 border_box">
<view class="share-number">87</view>
<view class="share-number">{{yesterdayInviteNum}}</view>
<view class="share-title">昨日邀请新增</view>
</view>
</view>
<view class="invite-banner">
<image ></image>
</view>
<navigator url="/subPackage/page/pages/share/share" hover-class="none">
<view class="invite-banner">
<image src="{{inviteBanner}}"></image>
</view>
</navigator>
<view class="order-benefit-wrap">
<view class="order-benefit-list">
<view class="order-benefit-list" wx:for="{{inviteMemberList}}" wx:key="{{index}}">
<view class="top-info">
<image class="invite-avatar"></image>
<image class="invite-avatar" src="{{item.headimgurl}}"></image>
<view class="invite-phone">
<view class="order-num">18355407690</view>
<view class="order-date">2019-03-24 至 2019-06-23</view>
<view class="order-num">{{item.mobile}}</view>
<view class="order-date">{{item.activateWxCardTime}}</view>
</view>
<view class="look-benefit">
<button class="btn btn-primary btn-outline">查看收益</button>
</view>
</view>
<view class="bottom-info">
<!-- <view class="bottom-info">
<view>
<image src="/assets/imgs/7_1_0/integral-icon.png" class="integral-icon" mode="widthFix"></image>
<text class="benefit-num">100</text>
......@@ -40,7 +45,7 @@
<image src="/assets/imgs/7_1_0/share-value.png" class="share-value" mode="widthFix"></image>
<text class="benefit-num">100</text>
</view>
</view>
</view> -->
</view>
</view>
<view class="benefit-tips">
......
src/subPackage/page/pages/myInvite/myInvite.wxss
......@@ -45,13 +45,14 @@
border-radius: 10rpx;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
padding: 33rpx 20rpx 36rpx;
padding: 34rpx 20rpx;
margin-top: 20rpx;
}
.top-info{
border-bottom: 1px solid rgba(151,151,151,0.3);
padding: 0 0 15rpx 29rpx;
padding: 0 0 0 31rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.order-num{
color: #333333;
......@@ -61,34 +62,6 @@
font-size: 20rpx;
margin-top: 5rpx;
}
.bottom-info{
padding: 16rpx 60rpx 0 29rpx;
display: flex;
justify-content: space-between;
}
.integral-icon{
width: 36rpx;
vertical-align: middle;
}
.coupon-icon{
width: 29rpx;
height: 29rpx;
vertical-align: middle;
}
.experience-icon{
width: 51rpx;
vertical-align: middle;
}
.share-value{
width: 40rpx;
vertical-align: middle;
}
.benefit-num{
color: #333333;
font-size: 18rpx;
vertical-align: middle;
margin-left: 15rpx;
}
.benefit-tips{
width: 750rpx;
height: 53rpx;
......@@ -111,4 +84,15 @@
.invite-phone{
vertical-align: middle;
margin-left: 32rpx;
width: 429rpx;
}
.look-benefit{
width: 107rpx;
}
.look-benefit button{
height: 35rpx;
border-radius: 17rpx;
line-height: 35rpx;
font-size: 18rpx;
}
src/subPackage/page/pages/orderBenefit/orderBenefit.js
......@@ -76,6 +76,6 @@ wxService.page({
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/subPackage/page/pages/share/share.js
import Card from '../../../../palette/card';
import Card from '../../../../palette/inviteFriends';
var app = getApp()
const wxService = require('../../../../utils/wxService')
const utils = require('../../../../utils/util')
// src/pages/xml2can/xml2can.js
Page({
imagePath: '',
/**
* 页面的初始数据
*/
// data: {
// template: {},
// },
wxService.page({
// imagePath: '',
data: {
//轮播图
swiperCurrent: 1,
swiperCurrent: 0,
currentTab: 0,
navData: [{
label: '1'
},
{
label: '2'
},
{
label: '3'
},
{
label: '4'
},
{
label: '5'
},
{
label: '6'
},
{
label: '7'
},
{
label: '8'
},
{
label: '9'
}],
arr: [{
images: 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640'
},
{
images: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2854956166,1658664264&fm=26&gp=0.jpg'
},
{
images: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2857172539,3231616089&fm=26&gp=0.jpg'
},
{
images: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=222247294,2919493301&fm=26&gp=0.jpg'
}
],
indicatorDots: false,
autoplay: false,
interval: 2000,
......@@ -64,25 +20,113 @@ Page({
afterColor: "coral",//当前选中的指示点颜色
previousmargin: '142rpx',//前边距
nextmargin: '142rpx',//后边距
posterImgData:[],
currentPosterImg: '',
codeImg:'', //二维码
template :{},
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getShareImg()
this.getMiniCode()
},
//轮播图的切换事件
swiperChange: function (e) {
console.log(e.detail.current);
this.setData({
swiperCurrent: e.detail.current //获取当前轮播图片的下标
swiperCurrent: e.detail.current, //获取当前轮播图片的下标
currentTab: e.detail.current,
currentPosterImg: this.data.posterImgData[e.detail.current]
},() => {
this.generatePoster();
})
},
//滑动图片切换
chuangEvent: function (e) {
// 点击更换海报
switchPoster(e){
console.log(e)
this.setData({
swiperCurrent: e.currentTarget.id
currentTab: e.currentTarget.dataset.current,
swiperCurrent: e.currentTarget.dataset.current,
currentPosterImg: e.currentTarget.dataset.img
},() => {
this.generatePoster();
})
},
// onImgOK(e) {
// this.imagePath = e.detail.path;
// console.log(e);
// },
//生成海报
generatePoster(){
console.log(this.data.currentPosterImg)
console.log(this.data.codeImg)
this.setData({
template: new Card().palette(this.data.currentPosterImg, this.data.codeImg),
});
},
// 获取海报图片
getShareImg() {
wxService.get(`/member/share/inviteFriends/buyer/getValid`).then(res => {
if (res) {
const { result, data } = res.data
if (result == 0) {
wx.hideLoading()
let initiatorPage = JSON.parse(data.initiatorPage)
this.setData({
posterImgData: initiatorPage
}, () => {
})
}
}
})
},
//获取二维码
getMiniCode() {
const urls = utils.getCurrentPageUrlWithArgs()
let data = {
"autoColor": true,
"page": 'pages/userCenter/userCenter',
"scene": '123',
"width": 100
}
wxService.post(`/marketing/quickMark/getAppQrCodePicture`, data).then(res => {
const { result, data } = res.data
if (result == 0) {
this.setData({
// codeImg: app.globalData.imageUrl + data
codeImg: "https://hwimagecdn.ihotwind.cn/usr/201908/miniQrCode-f00c5051fef7479395efb193431762c4.jpg"
})
}
})
},
// 保存海报
savePoster(){
let content = {
currentPosterImg: this.data.currentPosterImg
}
let tentacleInfo = {
content: JSON.stringify(content),
contentType: 3, //内容类型 1.文章 2.商品 3.页面
title: '首页', //标题
type: 3// 1:门店,2:员工(暂时不做),3:会员,4:第三方外部渠道,5:智能营销
}
wxService.getTentacleContent(tentacleInfo).then(res => {
if (res && res.tentacleId) {
wx.saveImageToPhotosAlbum({
filePath: this.imagePath,
});
}
})
},
onImgOK(e) {
this.imagePath = e.detail.path;
},
// saveImage() {
// wx.saveImageToPhotosAlbum({
......@@ -93,9 +137,9 @@ Page({
// /**
// * 生命周期函数--监听页面初次渲染完成
// */
// onReady: function () {
// this.setData({
// template: new Card().palette(),
// });
// },
onReady: function () {
// this.setData({
// template: new Card().palette('http://testimg3.bigaka.com/group3/M00/00/1B/Cv6CBF1kypiAHc11AAAJmPBsWAo215.png', 'https://hwimagecdn.ihotwind.cn/usr/201908/miniQrCode-f00c5051fef7479395efb193431762c4.jpg'),
// });
},
});
\ No newline at end of file
src/subPackage/page/pages/share/share.wxml
......@@ -4,23 +4,24 @@
<view class="page-share">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}'
indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}'
previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange" >
<block wx:for="{{arr}}" wx:key="key">
<swiper-item class="">
<image class="slide-image {{swiperCurrent == index ? 'active' : ''}}" src="{{item.images}}"
bindchange="chuangEvent" id="{{index}}"></image>
previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange">
<block wx:for="{{posterImgData}}" wx:key="{{index}}">
<swiper-item class="swiper-item">
<image class="slide-image {{swiperCurrent == index ? 'active' : ''}}" src="{{item}}"
id="{{index}}"></image>
<image wx:if="{{swiperCurrent == index}}" class="code-img" src="{{codeImg}}"></image>
</swiper-item>
</block>
</swiper>
<view class="save-btn">
<view class="save-btn" bindtap="savePoster">
<button class="btn btn-primary ">保存海报</button>
<view class="save-tips">适用于朋友圈分享</view>
</view>
<view class="tab-sort" wx:if="{{navData}}">
<view class="tab-sort" wx:if="{{posterImgData}}">
<scroll-view scroll-x class="scroll-view_H" scroll-with-animation="{{true}}">
<block
wx:for="{{navData}}"
wx:for="{{posterImgData}}"
wx:for-index="idx"
wx:for-item="navItem"
wx:key="idx"
......@@ -29,13 +30,16 @@
<view
class="scroll-view-item {{currentTab == idx ?'poster-active':''}}"
data-current="{{idx}}"
data-startTimeStr="{{navItem.startTimeStr}}"
data-endTimeStr="{{navItem.endTimeStr}}"
data-btnText="{{navItem.buttonText}}"
data-id="{{navItem.id}}"
bindtap="switchNav"
data-img="{{navItem}}"
bindtap="switchPoster"
>
<view>{{navItem.label}}</view>
<image class="poster-img" src="{{navItem}}"></image>
<view class="select-plus" wx:if="{{idx == currentTab}}">
<view class="circle-radio theme-color">
<image class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
</view>
</view>
</block>
</scroll-view>
......@@ -44,4 +48,9 @@
<view class="poster-tips">
<image src="/assets/imgs/7_1_0/poster-tips.png" mode="widthFix"></image>
</view>
</view>
<!-- 测试 -->
<view class="test" >
<painter customStyle='margin-left:40rpx' palette="{{template}}" bind:imgOK="onImgOK" />
</view>
\ No newline at end of file
src/subPackage/page/pages/share/share.wxss
/* subPackage/page/pages/share/share.wxss */
page{
width: 100%;
}
.banner-swiper {
width: 410rpx;
height: 705rpx;
......@@ -23,6 +26,16 @@ swiper-item{
box-shadow: 0px 4rpx 17rpx 0px rgba(0, 0, 0, 0.12);
}
.swiper-item{
position: relative;
}
.code-img{
position: absolute;
width: 100rpx;
height: 100rpx;
bottom: 43rpx;
right: 50rpx;
}
.active{
margin-top:0rpx;
height:705rpx !important;
......@@ -66,6 +79,7 @@ swiper-item{
height: 215rpx;
background-color: #d8d8d8;
margin-right: 23rpx;
position: relative;
}
.poster-tips{
position: fixed;
......@@ -75,4 +89,31 @@ swiper-item{
.poster-tips image{
width: 362rpx;
}
.poster-img{
width: 100%;
}
.select-plus{
position: absolute;
top: 8rpx;
right: 8rpx;
}
.tick-success{
width: 18rpx;
}
.circle-radio{
width: 32rpx;
height: 32rpx;
border-radius: 50%;
/* border: 1rpx solid rgba(0, 0, 0, 0.2); */
line-height: 26rpx;
text-align: center;
}
/* 测试 */
.test{
position: absolute;
transform: translateX(100%);
width: 100vw;
height: 100vh;
background: #ffffff;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment