Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
b3a2f8d4 by simon
Options

默认提交

1 parent 144dc2de
Inline Side-by-side
Showing 25 changed files with 250 additions and 452 deletions
......@@ -50,13 +50,13 @@
"pagePath": "pages/index/index",
"iconPath": "image/tabbar/scan-bar.png",
"selectedIconPath": "image/tabbar/scan-bar-selected.png",
"text": "扫码得奖金"
"text": "首页"
},
{
"pagePath": "pages/gift-shop/gift-shop",
"iconPath": "image/tabbar/gift-bar.png",
"selectedIconPath": "image/tabbar/gift-bar-selected.png",
"text": "礼物兑换"
"text": "奖金兑换"
},
{
"pagePath": "pages/user-center/user-center",
......
......@@ -2,7 +2,7 @@ let ENV_CONFIG = require('./env/index');
const APPID = ''
/** ====每次发布版本记得修改此环境配置==== */
const ENV = 'Prod'; // Dev Prod
const ENV = 'Dev'; // Dev Prod
const NET_CONFIG = ENV_CONFIG[ENV];
const MOCKAPI = ENV_CONFIG.mockApi;
......

38.6 KB | W: | H:

49.7 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -8,7 +8,8 @@ Page({
authorizeVisible: false,
contactInfo: {},
// qrcodeUrl:"https://kd.cdn.xyiyang.com/weapp/zhiliang-light/qrcode/qrcode-focus.png",
qrcodeUrl: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/weapp/zhiliang-light/qrcode/qrcode-focus.png",
qrcodeUrlPublic: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/weapp/zhiliang-light/qrcode/qrcode-public.png",
qrcodeUrlContact: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/weapp/zhiliang-light/qrcode/qrcode-contact.png",
},
onShareAppMessage() {},
showAuth() {
......@@ -40,7 +41,8 @@ Page({
* 图片查看
*/
onPreviewImageHandler(evt) {
let current = this.data.qrcodeUrl;
let current = getBindtapData(evt);
// let current = this.data.qrcodeUrl;
let urls = [current];
wx.previewImage({
current: current,
......
......@@ -68,9 +68,19 @@ $contentWidth:690px;
// 关注
.focus {
text-align: center;
display: flex;
justify-content: center;
font-size: 26px;
&-item {
margin: 0 12px;
.t1{
margin-top: -12px;
}
}
.qrcode {
margin-top: 16px;
width: 280px;
}
......
......@@ -41,8 +41,15 @@
</view>
<!-- 关注 -->
<view class="border focus">
<image bindtap="onPreviewImageHandler" class="qrcode" mode="widthFix" src="{{qrcodeUrl}}" />
<view class="tips">更多讯息，欢迎关注我们的公众号</view>
<view class="focus-item">
<image bindtap="onPreviewImageHandler" data-data="{{qrcodeUrlPublic}}" class="qrcode" mode="widthFix" src="{{qrcodeUrlPublic}}" />
<view class="t1">微信公众号</view>
</view>
<view class="focus-item">
<image bindtap="onPreviewImageHandler" data-data="{{qrcodeUrlContact}}" class="qrcode" mode="widthFix" src="{{qrcodeUrlContact}}" />
<view class="t1">客服微信</view>
</view>
<!-- <view class="tips">更多讯息，欢迎关注我们的公众号</view> -->
<!-- <view bindtap="onPreviewImageHandler" class="btn">一键关注</view> -->
</view>
<!-- 一键关注 -->
......
......@@ -15,7 +15,7 @@ Page({
productList: [], // 产品列表
curProductDetail: {}, // 选中的产品详情
qrCodeCode: "",
userInfo: {}, //用户信息
userInfo: null, //用户信息
code: "", // 手输入码 / 扫出的奖金码
memberCode: "", // 扫出的用户码
isVerify: true, // 是否已经认证
......@@ -28,6 +28,7 @@ Page({
},
onLoad(options) {
let q = decodeURIComponent(options.q);
// 获取会员码
let m = getQueryByUrl("m", q);
// 获取奖金码
......@@ -157,6 +158,43 @@ Page({
})
},
/**
* 我的二维码
*/
onMyQrcodeHandler(evt) {
app.router.push({
path: "myQrcode"
})
},
/**
* 排行榜
*/
onRankHandler(evt) {
console.log("rank");
app.router.push({
path: "rank"
})
},
/**
* 点击拍卖
*/
onAuctionHandler(evt) {
app.router.push({
path: "auctionList"
})
},
/**
* 点击秒杀
*/
onSeckillHandler(evt) {
app.router.push({
path: "seckillList"
})
},
/**
* 请求产品
......@@ -211,6 +249,7 @@ Page({
this.setData({
userInfo: result
})
app.globalData.userInfo = result;
resolve(result);
})
});
......
......@@ -21,29 +21,74 @@ $contentWidth:670px;
&-bg {
position: absolute;
width: 750px;
height: 300px;
height: 360px;
}
.space1 {
height: 222px;
height: 12px;
}
.scan {
position: relative;
text-align: center;
color: #ffffff;
font-size: 26px;
&-icon {
width: 108px;
}
&-t1 {
margin-top: 12px;
}
}
.data {
width: 730px;
margin: 0 auto;
position: relative;
display: flex;
justify-content: space-between;
text-align: center;
color: #ffffff;
&-item {
width: 320px;
// background-color: wheat;
&-t1 {
font-size: 50px;
}
&-t2 {
font-size: 24px;
color: rgba(255, 255, 255, 0.7);
}
}
}
.search {
position: relative;
width: $contentWidth;
height: 100px;
// height: 100px;
width: 621px;
height: 84px;
border-radius: 42px;
box-shadow: 0px 6px 23.5px 1.5px rgba(112, 168, 239, 0.17);
background-color: #ffffff;
background: #FFFFFF;
@extend .shadow;
// margin: 222px auto 0;
margin: 0 auto 0;
margin: 16px auto 0;
display: flex;
justify-content: space-between;
// justify-content: space-between;
align-items: center;
&-ipt-wrap {
@extend .bb;
padding-left: 30px;
width: 320px;
// padding-left: 30px;
// width: 320px;
flex: 1;
.ipt {
font-size: 28px;
......@@ -58,9 +103,11 @@ $contentWidth:670px;
}
&-scan {
@extend .bb;
@extend .fcc;
width: 100px;
height: 100px;
padding-left: 24px;
.icon {
width: 40px;
......@@ -96,8 +143,7 @@ $contentWidth:670px;
}
.top-space {
// height: 362px;
height: 80px;
height: 64px;
}
.content {
......@@ -105,11 +151,33 @@ $contentWidth:670px;
width: $contentWidth;
margin: 0 auto;
// 导航
.nav {
@extend .bb;
display: flex;
justify-content: space-between;
// width: 100%;
padding: 0 12px;
&-item {
text-align: center;
.icon {
width: 86px;
}
.t1 {
color: #333333;
font-size: 26px;
}
}
}
// banner
.banner {
width: $contentWidth;
height: 250px;
margin: 0 auto;
margin: 42px auto 0;
.swiper {
width: $contentWidth;
......
<wxs module="filter" src="../../utils/utilswxs.wxs"></wxs>
<view class="page">
<view class="app__bgc bgc"></view>
<view class="app__bg bg"></view>
......@@ -6,23 +7,55 @@
<view class="top">
<image class="top-bg" mode="widthFix" src="../../image/index/index-c1.png" />
<view class="space1"></view>
<view class="search">
<view class="search-ipt-wrap">
<input value="{{code}}" bindinput="bindCodeInput" class="ipt" placeholder="请输入串码" />
<view class="scan">
<image bindtap="onScanHandler" mode="widthFix" class="scan-icon" src="../../image/index/icon-scan.png" />
<view class="icon-t1">点击扫码</view>
</view>
<view class="data">
<view class="data-item">
<view class="data-item-t1">
{{userInfo&&userInfo.memberPoints ? filter.Fen2Yuan(userInfo.memberPoints) + '元' : '-' }}
</view>
<view class="data-item-t2">我的奖金</view>
</view>
<view class="data-item">
<view class="data-item-t1">{{userInfo ? userInfo.promotionNum + '人' : '-' }}</view>
<view class="data-item-t2">推广人数</view>
</view>
</view>
<view class="search">
<view bindtap="onSearchHandler" class="search-scan">
<image class="icon icon-search" mode="aspectFit" src="../../image/icon/icon-search.png" />
</view>
<view class="search-line"></view>
<!-- 隐藏扫描二维码 -->
<view bindtap="onScanHandler" class="search-scan search-scan2">
<text class="t1">扫码得奖金</text>
<image class="icon icon2" mode="aspectFit" src="../../image/icon/icon-scan.png" />
<view class="search-ipt-wrap">
<input value="{{code}}" bindinput="bindCodeInput" class="ipt" placeholder="请输入串码" />
</view>
</view>
</view>
<view class="top-space"></view>
<view class="content">
<view class="nav">
<view bindtap="onMyQrcodeHandler" class="nav-item">
<image class="icon" mode="widthFix" src="../../image/index/icon-qrcode.png" />
<view class="t1">二维码</view>
</view>
<view bindtap="toVipLoginHandler" class="nav-item">
<image class="icon" mode="widthFix" src="../../image/index/icon-verify.png" />
<view class="t1">去认证</view>
</view>
<view bindtap="onRankHandler" class="nav-item">
<image class="icon" mode="widthFix" src="../../image/index/icon-rank.png" />
<view class="t1">排行榜</view>
</view>
<view bindtap="onAuctionHandler" class="nav-item">
<image class="icon" mode="widthFix" src="../../image/index/icon-seckill.png" />
<view class="t1">秒杀</view>
</view>
<view bindtap="onAuctionHandler" class="nav-item">
<image class="icon" mode="widthFix" src="../../image/index/icon-auction.png" />
<view class="t1">拍卖</view>
</view>
</view>
<!-- 轮播 banner -->
<view class="banner">
<swiper class="swiper" indicator-color="rgba(0,0,0,.3)" indicator-active-color="rgba(255,255,255,1)" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
......
import QR from '../../utils/qrcode'
import Poster from '../../miniprogram_dist/poster/poster';
let app = getApp();
Page({
data: {
authorizeVisible: false,
userInfo: {},
qrImagePath: "",
imageUrl: "",
},
onShareAppMessage() {},
showAuth() {
this.setData({
authorizeVisible: true
})
},
onLoad(options) {
this.initData();
},
initData() {
// 获取用户信息 小程序码
this.queryMember().then((result) => {
wx.showLoading({
title: '二维码生成中···',
});
// 获取海报数据
let posterData = this.getPosterConfig();
// 绘制设置海报
this.onCreatePoster(posterData);
});
},
onPosterSuccess(e) {
wx.hideLoading();
const {
detail
} = e;
console.log("detail:", detail)
this.setData({
imageUrl: detail
})
},
onPosterFail(err) {
wx.hideLoading();
console.error(err);
},
/**
* 异步生成海报
*/
onCreatePoster(posterConfig) {
console.log("posterConfig:", posterConfig);
this.setData({
posterConfig: posterConfig
}, () => {
Poster.create(true); // 入参：true为抹掉重新生成
});
},
// 获取海报数据
getPosterConfig() {
// 合成图片需要的数据
let {
userInfo
} = this.data;
let blocks = [{
x: 0,
y: 0,
width: 690,
height: 900,
backgroundColor: "#ffffff",
borderRadius: 10,
}];
let images = [{
x: 286,
y: 30,
width: 120,
height: 120,
borderRadius: 120,
zIndex: 11,
url: userInfo.avatar,
}, {
x: 126,
y: 220,
width: 440,
height: 440,
zIndex: 11,
url: userInfo.memberUrl,
}];
let lines = [];
let texts = [{
x: 690 / 2,
y: 192,
width: 690,
fontSize: 36,
color: "#3680EB",
textAlign: "center",
zIndex: 11,
text: userInfo.nickname,
},
{
x: 690 / 2,
y: 640,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: userInfo.memberCode,
},
{
x: 690 / 2,
y: 740,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: "深士照明",
}, {
x: 690 / 2,
y: 800,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: "扫码即获专属奖金，兑换超值奖品",
}
];
let posterData = {
width: 690,
height: 900,
debug: false,
blocks: blocks,
images: images,
lines: lines,
texts: texts,
}
return posterData;
},
/**
* 获取会员信息
*/
queryMember() {
let _this = this;
return new Promise((resolve, reject) => {
app.post({
url: app.api.member,
data: {}
}).then((result) => {
let userInfo = result
_this.setData({
userInfo: userInfo,
qrImagePath: userInfo.memberUrl,
})
resolve();
})
});
},
/**
* 图片查看
*/
onPreviewImageHandler(evt) {
// let curItem = getBindtapData(evt);
// let index = getBindtapData(evt, "index");
// let current = curItem[index] || '';
console.log("onPreviewImageHandler")
let current = this.data.imageUrl;
let urls = [current];
wx.previewImage({
current: current,
urls: urls
})
},
/**
* 保存图片到本地
*/
saveImageToPhotosAlbum() {
let _this = this;
if (!_this.data.imageUrl) {
wx.showToast({
title: "图片加载中,请重试",
icon: "none"
})
return;
}
wx.saveImageToPhotosAlbum({
filePath: _this.data.imageUrl,
success(res) {
wx.showToast({
title: '保存成功',
icon: 'success'
});
},
fail(err) {
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.writePhotosAlbum']) {
// 未授权
wx.showModal({
title: '提示',
content: '小程序请求访问相册权限',
confirmText: '前往授权',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {}
})
} else if (res.cancel) {}
}
})
}
}
})
}
})
},
// 创建二维码
createQrCode(content, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
QR.api.draw(content, canvasId, cavW, cavH);
this.canvasToTempImage(canvasId);
},
//获取临时缓存图片路径，存入data中
canvasToTempImage(canvasId) {
let that = this;
wx.canvasToTempFilePath({
canvasId, // 这里canvasId即之前创建的canvas-id
success: function (res) {
let tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
qrImagePath: tempFilePath,
});
},
fail: function (res) {
console.log(res);
}
});
},
//适配不同屏幕大小的canvas
setCanvasSize(sz) {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
var width = res.windowWidth / scale;
var height = width; //canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
// 隐藏蒙层
hideMask() {
this.setData({
authorizeVisible: false,
})
},
// 子组件事件
evtcomp(evt) {
let {
name,
data
} = evt.detail;
switch (name) {
// 隐藏弹窗
case "_evt_hide_mask":
this.hideMask();
break;
default:
break;
}
},
})
{
"usingComponents": {
"poster": "/miniprogram_dist/poster/index"
},
"navigationBarTitleText": "我的二维码"
}
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
$contentWidth:690px;
.page {
padding-bottom: $pageBottom;
.bgc {
background: #3680EB;
}
.bg {}
.main {
font-size: 28px;
.top-space {
height: 40px;
}
.content {
position: relative;
.card {
margin: 0 auto;
// padding: 20px 0 74px;
width: $contentWidth;
// background: #FFFFFF;
// box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10);
border-radius: 10px;
text-align: center;
font-size: 32px;
.my-card {
width: 690px;
height: 900px;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 120px;
}
.nickname {
margin: 8px 0 0;
font-size: 36px;
color: #3680EB;
}
.qrcode {
margin-top: 24px;
width: 440px;
height: 440px;
}
.t1 {
margin-top: 20px;
color: #666666;
}
.t2 {
margin-top: 40px;
}
}
.tips {
margin: 20px auto 0;
color: #FFFFFF;
text-align: center;
}
.btn-wrap {
margin-top: 40px;
.btn {
margin: 0 auto;
@include btc(320px, 84px);
border-radius: 8px;
background: #FFFFFF;
color: #3680EB;
font-size: 32px;
}
}
}
}
}
<poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
<view class="page">
<view class="app__bgc bgc"></view>
<view class="app__bg bg"></view>
<view class="app__content main">
<view class="top-space"></view>
<view class="content">
<view class="card">
<image bindtap="onPreviewImageHandler" class="my-card" mode="widthFix" src="{{imageUrl}}" />
</view>
<view class="tips">分享邀请好友加入，赢取推广奖金</view>
<view class="btn-wrap">
<view bindtap="saveImageToPhotosAlbum" class="btn">保存图片</view>
</view>
</view>
</view>
</view>
<van-popup show="{{ authorizeVisible }}">
<authorize-comp bind:evtcomp="evtcomp"></authorize-comp>
</van-popup>
......@@ -191,11 +191,14 @@ Page({
})
return;
}
wx.setClipboardData({
data: '「深士照明」50万电工奖\n分享二维码：邀请好友就获奖\n好友购买：再获105返现奖金',
success(res) {
wx.saveImageToPhotosAlbum({
filePath: _this.data.imageUrl,
success(res) {
wx.showToast({
title: '保存成功',
title: '操作成功',
icon: 'success'
});
},
......@@ -221,6 +224,42 @@ Page({
})
}
})
}
})
// wx.saveImageToPhotosAlbum({
// filePath: _this.data.imageUrl,
// success(res) {
// wx.showToast({
// title: '保存成功',
// icon: 'success'
// });
// },
// fail(err) {
// wx.getSetting({
// success: (res) => {
// if (!res.authSetting['scope.writePhotosAlbum']) {
// // 未授权
// wx.showModal({
// title: '提示',
// content: '小程序请求访问相册权限',
// confirmText: '前往授权',
// success(res) {
// if (res.confirm) {
// wx.openSetting({
// success(res) {}
// })
// } else if (res.cancel) {}
// }
// })
// }
// }
// })
// }
// })
},
......
......@@ -9,10 +9,10 @@
<image bindtap="onPreviewImageHandler" class="my-card" mode="widthFix" src="{{imageUrl}}" />
</view>
<view class="tips">
<text>保存分享朋友圈，邀请好友赢奖金\n好友购买产品，再获10%奖金</text>
<text>「深士照明」50万电工奖\n分享二维码：邀请好友就获奖\n好友购买：再获105返现奖金</text>
</view>
<view class="btn-wrap">
<view bindtap="saveImageToPhotosAlbum" class="btn">保存图片</view>
<view bindtap="saveImageToPhotosAlbum" class="btn">保存照片|复制文字</view>
</view>
</view>
</view>
......
......@@ -282,7 +282,9 @@ $contentWidth: 690px;
}
&-wrap {
margin: 40px auto 4px;
@extend .bb;
padding: 0 48px;
margin: 4px auto 4px;
display: flex;
justify-content: space-between;
......
......@@ -64,18 +64,18 @@
</view>
<!-- 功能区 -->
<view class="border func">
<view bindtap="onMyQrcodeHandler" class="my-qrcode">
<!-- <view bindtap="onMyQrcodeHandler" class="my-qrcode">
<image class="qrcode" mode="widthFix" src="../../image/icon/icon-qrcode.png" />
<view class="t1">我的二维码</view>
</view>
</view> -->
<!-- 功能区 -->
<view class="func-wrap">
<view bindtap="onRankHandler" class="func-wrap-item">
<!-- <view bindtap="onRankHandler" class="func-wrap-item">
<view class="icon-wrap">
<image class="icon" mode="aspectFit" src="../../image/icon/icon-integral-rank.png" />
</view>
<view class="txt">奖金排行</view>
</view>
</view> -->
<view bindtap="onAddressHandler" class="func-wrap-item">
<view class="icon-wrap">
<image class="icon" mode="aspectFit" src="../../image/icon/icon-my-address.png" />
......@@ -98,7 +98,7 @@
</view>
</view>
<!-- 活动区 拍卖和秒杀 -->
<view class="border active" wx:if="{{1>0}}">
<view class="border active" wx:if="{{1>10}}">
<view bindtap="onAuctionHandler" data-index="0" class="active-item">
<view class="icon-wrap">
<span class="iconfont iconpaimai icon"></span>
......
......@@ -229,9 +229,9 @@ Page({
} else if (!verifyCode) {
this.showTips("请输入验证码");
reject();
} else if (pics.length <= 0) {
this.showTips("请上传身份证或电工证");
reject();
// } else if (pics.length <= 0) {
// this.showTips("请上传身份证或电工证");
// reject();
} else {
resolve();
}
......
......@@ -11,10 +11,6 @@
<view class="label">真实姓名</view>
<input disabled="{{isModify}}" class="cont {{isModify ? 'modify' :''}}" value="{{name}}" bindinput="bindNameInput" placeholder="请输入" />
</view>
<view class="form-item">
<view class="label">店名</view>
<input disabled="{{isModify}}" class="cont {{isModify ? 'modify' :''}}" value="{{shopName}}" bindinput="bindShopNameInput" placeholder="选填" />
</view>
<picker disabled="{{isModify}}" value="{{membersShipIndex}}" range="{{membersShipList}}" range-key="memberTypeName" bindchange="bindMembersShipChange">
<view class="form-item">
<view class="label">会员身份</view>
......@@ -25,6 +21,10 @@
</view>
</picker>
<view class="form-item">
<view class="label">店名</view>
<input disabled="{{isModify}}" class="cont {{isModify ? 'modify' :''}}" value="{{shopName}}" bindinput="bindShopNameInput" placeholder="选填" />
</view>
<view class="form-item">
<view class="label">销售区域</view>
<view class="cont address">
<picker disabled="{{isModify}}" class="area {{isModify ? 'modify' :''}}" bindchange="bindPickerChangeProvince" value="{{provinceIndex}}" range="{{provinceList}}" range-key="areaName">
......@@ -53,7 +53,7 @@
<!-- 上传 -->
<view class="upload">
<!-- <view class="upload-tit">请上传身份证或电工证，审核后，可签到及兑换奖金</view> -->
<view class="upload-wrap">
<!-- <view class="upload-wrap">
<view class="upload-wrap-item">
<image class="image" bindtap="onUploadHandler" mode="aspectFit" src="{{files[0] && files[0].path?files[0].path:'../../image/icon/icon-plus.png'}}" />
<view class="tips">身份证正面</view>
......@@ -62,13 +62,16 @@
<image class="image" mode="aspectFit" src="../../image/icon/icon-id-card.png" />
<view class="tips">示例</view>
</view>
</view>
<view class="submit-tips">
</view> -->
<!-- <view class="submit-tips">
<text class="text">五金分销商请填写店名，提交营业执照或名片\n其他用户请上传电工证或身份证\n认证后可参与签到及兑换奖金</text>
</view>
</view> -->
</view>
<!-- 提交按钮 -->
<view class="submit-btn" bindtap="onSubmitHandler">确认提交</view>
<view class="submit-tips">
<text class="text">预计一个工作日内完成认证\n请正确填写信息</text>
</view>
</view>
</view>
</view>
......