fe / yoho-limited-sell-miniapp · Commits

Go to a project

Authored by 邱骏
Commit 5af271ecfea494ae4606a2e76923eec103d81566 2 parents d5f20697 b6fef878

限购码

Inline Side-by-side
Showing 26 changed files with 958 additions and 156 deletions
... ... @@ -6,7 +6,8 @@
"pages/account/bindMobile",
"pages/product/detail/detail",
"pages/share/share",
"pages/webview/webview"
"pages/webview/webview",
"pages/snapshootShare/snapshootShare"
],
"window": {
"backgroundTextStyle": "dark",
... ...
import api from '../../common/api';
export default {
/**
* 查询助力信息
*
* @param {*} uid
* @param {*} limitCode
* @returns
*/
getAssistInfo(uid, limitCode) {
return api.post({
url: '',
data: {
userId: uid,
limitProductCode: limitCode,
method: 'app.limitProduct.queryHelpInfo'
}
});
},
/**
* 增加助力
*
* @param {*} params
* @returns
*/
addAssist({userId, helpUserId, helpUserName, helpUserImgUrl, limitProductCode}) {
return api.post({
url: '',
data: {
method: 'app.limitProduct.addHelpUserInfo',
userId,
helpUserId,
helpUserName,
helpUserImgUrl,
limitProductCode
}
});
}
};
... ... @@ -22,4 +22,46 @@ export default {
data
});
},
/**
* 查询助力信息
*
* @param {*} uid
* @param {*} limitCode
* @returns
*/
getAssistInfo(uid, limitCode) {
return api.get({
url: '',
data: {
userId: uid,
limitProductCode: limitCode,
method: 'app.limitProduct.queryHelpInfo'
}
});
},
getQueueInfo(uid) {
},
/**
* 增加助力
*
* @param {*} params
* @returns
*/
addAssist({userId, helpUserId, helpUserName, helpUserImgUrl, limitProductCode}) {
return api.post({
url: '',
data: {
method: 'app.limitProduct.addHelpUserInfo',
userId,
helpUserId,
helpUserName,
helpUserImgUrl,
limitProductCode
}
});
}
};
... ...
... ... @@ -2,6 +2,25 @@ Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
properties: {
list: {
type: Array,
value: [],
observer: '_propertyChange'
},
num: {
type: Number,
value: 5
}
},
data: {
count: 0,
},
methods: {
_propertyChange(newVal) {
this.setData({
count: newVal.length
});
}
}
});
... ...
<view class="bottom-assis-list">
<view class="assis-title">当前已成功助力好友数：0/5</view>
<view class="assis-title">当前已成功助力好友数：{{count}}/{{num}}</view>
<view class="avatar-list">
<view class="avatar-item"></view>
<view class="avatar-item"></view>
<view class="avatar-item"></view>
<view class="avatar-item"></view>
<view class="avatar-item"></view>
<view class="avatar-item" wx:for="{{list}}">
<image class="avatar-image" src="{{item.helpUserImgUrl}}"></image>
</view>
</view>
</view>
\ No newline at end of file
... ...
... ... @@ -26,9 +26,11 @@
}
.bottom-assis-list .avatar-item {
margin-left: 10rpx;
}
.avatar-image {
width: 40rpx;
height: 40rpx;
background-color: white;
border-radius: 20rpx;
margin-left: 10rpx;
}
\ No newline at end of file
}
... ...
... ... @@ -8,6 +8,57 @@ import {
let app = getApp();
let router = global.router;
const LIMIT_TYPE = {
UNKNOWN: 0,
ASSIS: 4,
QUEUE: 5
};
const SHOW_STATUS = {
UNKONWN: 0,
SHARE: 1,
NOT_BUY_NOW: 2,
END: 3,
BUY_NOW: 4,
CODE_EMPTY: 5,
COMING_SOON: 6,
USED: 7
};
const PRODUCT_SOURCE_TYPE = {
UNKONWN: 0,
ORIGIN: 1,
SHARE: 2
};
const ASSIS_STATUS = {
UNKONWN: 0,
UN_ASSIS: 1,
ASSIS_FULL: 2,
ASSIS_ACTION: 3,
};
const QUEUE_STATUS = {
UNKONWN: 0,
UN_QUEUE: 1,
QUEUE_PROCESSING: 2,
QUEUE_END: 3,
QUEUE_ACTION: 4,
WAIT_FOR_BUY: 5
};
const ASSIS_SUCCESS = {
unknown: 0,
ok: 1,
repeat: 2
};
const QUEUE_SUCCESS = {
unknown: 0,
ok: 1,
repeat: 2
};
let {
windowHeight
} = app.getSystemInfo();
... ... @@ -22,6 +73,20 @@ Page(Object.assign({
price: '',
defaultImage: '',
productDesc: [],
snapData: {},
originUid: '',
avatarList: [],
uid: '',
limitProductType: LIMIT_TYPE.ASSIS,
showStatus: SHOW_STATUS.SHARE,
productSourceType: PRODUCT_SOURCE_TYPE.SHARE,
assisStatus: ASSIS_STATUS.UN_ASSIS,
queueStatus: QUEUE_STATUS.UN_QUEUE,
showAssisList: true,
assisLimit: 0,
assisSuccess: ASSIS_SUCCESS.unknown,
queueSuccess: QUEUE_SUCCESS.unknown,
actionSheet: {
componentId: 'shareActionSheet',
... ... @@ -42,11 +107,20 @@ Page(Object.assign({
},
onLoad: function(options) {
let limitProductCode = options.limitProductCode ? options.limitProductCode : '';
let originUid = options.originUid ? options.originUid : '';
// let uid = app.getUid();
let uid = '500027570';
this.setData({
limitProductCode
limitProductCode,
originUid,
uid,
});
this.productInfo().then(() => {
this.getAssitInfo();
});
this.productInfo();
yas = new Yas(app);
yas.pageOpenReport();
... ... @@ -97,11 +171,13 @@ Page(Object.assign({
if (index === 1) {
// 生成页面给
router.go('snapShare');
router.go('snapShare', this.snapData);
}
},
productInfo: function() {
detailModel.productInfo(app.getUid(), this.data.limitProductCode)
let uid = this.data.originUid || this.data.uid;
return detailModel.productInfo(uid, this.data.limitProductCode)
.then(res => {
if (res.code === 200) {
let defaultImage;
... ... @@ -122,33 +198,109 @@ Page(Object.assign({
}
let default_image = defaultImage;
let product_qrCode = config.domains.api + '/wechat/miniapp/img-check.jpg?param=' + res.data.product_skn; // eslint-disable-line
let product_qrCode = config.domains.api + `/wechat/miniapp/img-check.jpg?param=${res.data.product_skn}&uid=${app.getUid()}&limitProductCode=${this.data.limitProductCode}`; // eslint-disable-line
let snapData = {
product_name: res.data.product_name,
product_price: '￥' + res.data.price,
default_image,
product_qrCode,
product_skn: this.data.productSkn
};
let productSourceType = PRODUCT_SOURCE_TYPE.ORIGIN;
if (this.data.originUid) {
productSourceType = PRODUCT_SOURCE_TYPE.SHARE;
}
this.setData({
productSkn: res.data.productSkn,
productName: res.data.productName,
price: res.data.price,
saleTime: res.data.saleTime,
reminderNum: res.data.reminderNum,
limitProductTyp: res.data.limitProductType,
showStatus: res.data.showStatus,
assisLimit: res.data.helpLimit,
defaultImage,
productDesc,
snapData,
productSourceType
});
}
});
},
_dataReport: function() {
yas.report('YB_GDS_DT_BILL', {
PRD_SKN: this.data.productSkn,
RPD_SKU: this.data.selectedSKU,
PRD_ID: this.data.selectedProductId
getAssitInfo() {
let uid = this.data.originUid || this.data.uid;
if (this.data.limitProductType === LIMIT_TYPE.ASSIS) {
return detailModel.getAssistInfo(uid, this.data.limitProductCode).then(result => {
if (result.code !== 200) {
return;
}
let assisStatus = ASSIS_STATUS.SHARE;
if (this.assisLimit === result.data.length) {
assisStatus = ASSIS_STATUS.ASSIS_FULL;
} else {
if (this.originUid) {
assisStatus = ASSIS_STATUS.ASSIS_ACTION;
} else {
assisStatus = ASSIS_STATUS.UN_ASSIS;
}
}
this.setData({
avatarList: result.data,
assisStatus
});
});
} else {
return detailModel.getQueueInfo(uid).then(result => {
});
}
},
assisShare() {
this.share();
},
assisAction() {
this.setData({
assisSuccess: ASSIS_SUCCESS.ok
});
// this.setData({
// assisSuccess: ASSIS_SUCCESS.repeat
// });
},
queueAction() {
this.setData({
queueSuccess: QUEUE_SUCCESS.ok
});
// this.setData({
// queueSuccess: QUEUE_SUCCESS.repeat
// });
},
queueCancel() {
},
assisCancel() {
},
buyNow() {
},
goList() {
},
restartSelfShare() {
},
goQueueList() {
}
}, Actionsheet));
... ...
... ... @@ -30,105 +30,180 @@
</view>
<copyright></copyright>
<!-- <assis-list></assis-list> -->
<assis-list wx:if="{{showAssisList}}" list="{{avatarList}}" num="{{assisLimit}}"></assis-list>
<block wx:if="{{limitProductType === 4}}">
<block wx:if="{{showStatus === 1}}">
<block wx:if="{{productSourceType === 1}}">
<action-bar wx:if="{{assisStatus === 1}}">
<view class="bottom1-action">
<view class="action-btn" bindtap="assisShare">邀请好友助力获取限购码</view>
<view class="help">?</view>
</view>
</action-bar>
<action-bar wx:if="{{assisStatus === 2}}">
<view class="bottom1-action">
<view class="action-btn3">即将开售</view>
</view>
</action-bar>
</block>
<block wx:if="{{productSourceType === 2}}">
<action-bar wx:if="{{assisStatus === 3}}">
<view class="top-assis-action">
<view class="top-title" >你的好友邀请你为ta助力</view>
<view class="top-action">
<view class="top-ok" bindtap="assisAction">帮ta助力</view>
<view class="top-cancel" bindtap="assisCancel">取消</view>
</view>
</view>
</action-bar>
<action-bar wx:if="{{assisStatus === 2}}">
<view class="top-assis-action">
<view class="top-title">你的好友已助力成功</view>
<view class="top-ok" bindtap="rrestartSelfShare">我也要参加</view>
</view>
</action-bar>
</block>
</block>
<block wx:elif="{{showStatus === 2 || showStatus === 7}}">
<action-bar>
<view class="bottom1-action">
<view class="action-btn disable">立即购买</view>
</view>
</action-bar>
</block>
<block wx:elif="{{showStatus === 3}}">
<action-bar>
<view class="top-assis-action">
<view class="top-title" >当前活动已结束</view>
<view class="top-action1">
<view class="top-ok" bindtap="goList">查看其他活动</view>
</view>
</view>
</action-bar>
</block>
<!-- <action-bar>
<view class="bottom1-action">
<view class="action-btn" bindtap="share">邀请好友助力获取限购码</view>
<view class="help">?</view>
</view>
</action-bar> -->
<block wx:elif="{{showStatus === 4}}">
<action-bar>
<view class="bottom1-action">
<view class="action-btn ok" bindtap="buyNow">立即购买</view>
</view>
</action-bar>
</block>
<!-- <action-bar>
<view class="bottom1-action">
<view class="action-btn" bindtap="share">立刻购买</view>
<view class="help">?</view>
</view>
</action-bar> -->
<block wx:elif="{{showStatus === 5}}">
<action-bar>
<view class="bottom1-action">
<view class="action-btn2 disable">限购码已抢光</view>
</view>
</action-bar>
</block>
<!-- <action-bar>
<view class="bottom1-action">
<view class="action-btn2" bindtap="share">参加排队</view>
<view class="help">?</view>
</view>
</action-bar> -->
<!-- <action-bar>
<view class="top-assis-action">
<view class="top-title" >你的好友邀请你为ta助力</view>
<view class="top-action">
<view class="top-ok">帮ta助力</view>
<view class="top-cancel">取消</view>
</view>
</view>
</action-bar> -->
<!-- <action-bar>
<view class="top-assis-action">
<view class="top-title" >你的好友邀请你为ta助力参加排队</view>
<view class="top-action">
<view class="top-ok">帮ta助力</view>
<view class="top-cancel" ><text decode="{{true}}">&ensp;取消&ensp;</text></view>
</view>
</view>
</action-bar> -->
<block wx:elif="{{showStatus === 6}}">
<action-bar>
<view class="bottom1-action">
<view class="action-btn2 disable">即将开售</view>
</view>
</action-bar>
</block>
<block wx:else>
<action-bar>
<view class="top-assis-action">
<view class="top-title" >当前活动已结束</view>
<view class="top-action1">
<view class="top-ok" bindtap="goList">查看其他活动</view>
</view>
</view>
</action-bar>
</block>
<!-- <action-bar>
<view class="top-assis-action">
<view class="top-title" >你的好友已助力成功</view>
<view class="top-action1">
<view class="top-ok">我也要参加</view>
</view>
</view>
</action-bar> -->
</block>
<!-- <action-bar>
<view class="top-assis-action">
<view class="top-title" >当前活动已结束</view>
<view class="top-action1">
<view class="top-ok">查看其他活动</view>
</view>
</view>
</action-bar> -->
<block wx:elif="{{limitProductType === 5}}">
<block wx:if="{{productSourceType === 1}}">
<action-bar wx:if="{{queueStatus === 1}}">
<view class="bottom1-action">
<view class="action-btn" bindtap="assisShare">参加排队</view>
<view class="help">?</view>
</view>
</action-bar>
<action-bar wx:if="{{queueStatus === 2}}">
<view class="bottom1-action">
<view class="action-list">
<view class="action-btn3" bindtap="goQueueList">排队中，查看详情</view>
<view class="action-btn" bindtap="assisShare">邀请好友助力排队</view>
</view>
</view>
</action-bar>
<!-- <action-bar>
<view class="bottom1-action">
<view class="action-list">
<view class="action-btn3" bindtap="share">排队中，查看详情</view>
<view class="action-btn" bindtap="share">邀请好友助力排队</view>
</view>
<view class="help">?</view>
</view>
</action-bar> -->
<action-bar wx:if="{{queueStatus === 3}}">
<view class="bottom1-action">
<view class="action-list">
<view class="action-btn3" bindtap="goQueueList">活动结束，点击查看排队详情</view>
</view>
</view>
</action-bar>
</block>
<block wx:if="{{productSourceType === 2}}">
<action-bar>
<view class="top-assis-action">
<view class="top-title" >你的好友邀请你为ta助力参加排队</view>
<view class="top-action">
<view class="top-ok" bindtap="queueAction">帮ta助力</view>
<view class="top-cancel" bindtap="queueCancel"><text decode="{{true}}">&ensp;取消&ensp;</text></view>
</view>
</view>
</action-bar>
<action-bar>
<view class="top-assis-action">
<view class="top-title" >你的好友已助力成功</view>
<view class="top-action1">
<view class="top-ok" bindtap="restartSelfShare" >我也要参加</view>
</view>
</view>
</action-bar>
</block>
</block>
<!-- <yoho-alert>
<yoho-alert wx:if="{{assisSuccess === 1}}">
<view class="modal-content">
<view class="modal-title">
<view class="sub-title">助力成功</view>
<view class="sub-title2">帮好友助力成功，您也来参与吧～</view>
</view>
<view class="modal-ok">
<view class="modal-ok" bindtap="restartSelfShare">
我也要参加
</view>
</view>
</yoho-alert> -->
</yoho-alert>
<!-- <yoho-alert>
<yoho-alert wx:if="{{assisSuccess === 2}}">
<view class="modal-content">
<view class="modal-title">
<view class="sub-title">重复助力</view>
<view class="sub-title2">您已经助力过啦，自己也来参加吧～</view>
</view>
<view class="modal-ok">
<view class="modal-ok" bindtap="restartSelfShare">
我也要参加
</view>
</view>
</yoho-alert> -->
</yoho-alert>
<!-- <yoho-alert>
<yoho-alert wx:if="{{queueSuccess === 1}}">
<view class="modal-content">
<view class="modal-title">
<view class="sub-title">助力成功</view>
... ... @@ -139,18 +214,18 @@
</view>
<view class="modal-btn">
<view class="modal-ok">
<view class="modal-ok" bindtap="restartSelfShare">
我也要参加
</view>
<view class="modal-cancel">
<view class="modal-cancel" bindtap="goQueueList">
查看详情
</view>
</view>
</view>
</yoho-alert> -->
</yoho-alert>
<yoho-alert>
<yoho-alert wx:if="{{queueSuccess === 2}}">
<view class="modal-content">
<view class="modal-title">
<view class="sub-title">重复助力</view>
... ... @@ -161,11 +236,11 @@
</view>
<view class="modal-btn">
<view class="modal-ok">
<view class="modal-ok" bindtap="restartSelfShare">
我也要参加
</view>
<view class="modal-cancel">
<view class="modal-cancel" bindtap="goQueueList">
查看详情
</view>
</view>
... ...
... ... @@ -102,6 +102,10 @@
border-radius: 25rpx;
}
.action-btn.disable {
background-color: #444;
}
.bottom1-action .action-btn2 {
height: 50rpx;
padding-left: 20rpx;
... ... @@ -113,6 +117,10 @@
border-radius: 25rpx;
}
.action-btn2.disable {
background-color: #444;
}
.bottom1-action .action-btn3 {
height: 50rpx;
padding-left: 20rpx;
... ...
{
"navigationBarTitleText": "分享到朋友圈",
"enablePullDownRefresh": false,
"usingComponents": {
}
}
\ No newline at end of file
<view>你的好友邀你为ta助力，购买限定商</view>
\ No newline at end of file
let app = getApp();
const windowWidth = app.globalData.systemInfo.windowWidth;
const windowHeight = app.globalData.systemInfo.windowHeight;
const screenHeight = app.globalData.systemInfo.screenHeight;
const scale = windowWidth / 375;
var Point = function(x, y) {
return {
x: x,
y: y
};
};
Page({
/**
* 组件的初始数据
*/
data: {
screenHeight,
windowWidth,
windowHeight,
scale,
},
onLoad(options) {
},
saveToAlbum() {
let that = this;
if (wx.getSetting) {
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: function() {
that.saveSnapShoot();
},
fail: function(error) {
if (res.authSetting['scope.writePhotosAlbum'] === false) {
wx.showModal({
title: '',
content: '需要打开小程序的设置，重新授权访问您的系统相册',
confirmText: '去开启',
confirmColor: '#000000',
success: function(r) {
if (r.confirm) {
wx.openSetting({
success: function() {}
});
}
}
});
}
},
});
} else {
that.saveSnapShoot();
}
}
});
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
});
}
},
saveSnapShoot() {
var that = this;
var canvasId = 'productDetailCanvas';
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: windowWidth,
height: screenHeight,
destWidth: windowWidth * 2,
destHeight: screenHeight * 2,
quality: 1.0,
canvasId: canvasId,
success: function(result) {
wx.saveImageToPhotosAlbum({
filePath: result.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
that.hidden();
},
fail: function() {
that.hidden();
}
});
},
fail: function(error) {
that.hidden();
},
complete: function(res) {
that.hidden();
}
}, this);
},
creatProductDetailSnapShoot() {
let that = this;
let product = that.properties.shareData;
let pCtx = wx.createCanvasContext('productDetailCanvas', this);
pCtx.setFillStyle('white');
pCtx.fillRect(0, 0, windowWidth, screenHeight);
pCtx.drawImage('./images/snapshoot_share_bg@2x.png', 0, 0, windowWidth, 186 * scale);
pCtx.setFillStyle('white');
pCtx.setShadow(-5, -2, 40, 'darkgray');
pCtx.fillRect(27 * scale, 60 * scale, 320 * scale, 430 * scale);
let defaultImage = product.default_image;
if (defaultImage && defaultImage.indexOf('https://') === -1) {
defaultImage = defaultImage.replace('http://', 'https://');
}
wx.getImageInfo({
src: defaultImage,
success: function(res) {
pCtx.drawImage(res.path, 27 * scale, 60 * scale, 320 * scale, 430 * scale);
pCtx.setFillStyle('rgba(0,0,0,0.8)');
pCtx.fillRect(27 * scale, 370 * scale, 320 * scale, 120 * scale);
pCtx.setFillStyle('white');
that.drawLongText(product.product_name, pCtx, 187.5 * scale, 402 * scale, 'white', 14, 20);
pCtx.setTextAlign('center');
pCtx.setFontSize(18 * scale);
pCtx.fillText(product.product_price, 187.5 * scale, 458.5 * scale);
pCtx.draw(true);
}
});
pCtx.setShadow(0, 0, 0, 'white');
pCtx.drawImage('./images/share-logo@2x.png', 132 * scale, 505 * scale, 111 * scale, 20 * scale);
wx.getImageInfo({
src: product.product_qrCode,
success: function(res) {
pCtx.drawImage(res.path, 148.5 * scale, 539.5 * scale, 78 * scale, 78 * scale);
pCtx.draw(true);
}
});
pCtx.setFillStyle('black');
pCtx.setTextAlign('center');
pCtx.setFontSize(11);
pCtx.fillText('长按扫码查看详情', 187.5 * scale, 632.5 * scale);
pCtx.drawImage('./images/snapshoot_tip_ic@2x.png', 127 * scale, 645.5 * scale, 9 * scale, 9 * scale);
pCtx.setFillStyle('#b0b0b0');
pCtx.setFontSize(9);
pCtx.fillText('实际价格以页面展示为准', 187.5 * scale, 652.5 * scale);
pCtx.draw();
},
drawRoundedRect: function(rect, r, ctx) {
var ptA = Point(rect.x + r, rect.y);
var ptB = Point(rect.x + rect.width, rect.y);
var ptC = Point(rect.x + rect.width, rect.y + rect.height);
var ptD = Point(rect.x, rect.y + rect.height);
var ptE = Point(rect.x, rect.y);
ctx.setStrokeStyle('rgba(0,0,0,0)');
ctx.beginPath();
ctx.moveTo(ptA.x, ptA.y);
ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);
ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);
ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);
ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);
ctx.stroke();
},
Rect: function(x, y, w, h) {
return {
x: x,
y: y,
width: w,
height: h
};
},
drawLongText(longtext, cxt, begin_width, begin_height, color, fontSize, numsForLine) {
var linelenght = 20 * scale; // 行间距
var numberOfLine = 2;
var text = '';
var count = 0;
var lineNumber = 1;
var stringLenght = longtext.length;
var newtext = longtext.split('');
cxt.setFillStyle(color);
cxt.setFontSize(fontSize * scale);
cxt.setTextAlign('center');
for (let i = 0; i <= stringLenght; i++) {
if (count === numsForLine) {
if (lineNumber === numberOfLine) {
let t = text + '...';
cxt.fillText(t, begin_width, begin_height);
} else {
cxt.fillText(text, begin_width, begin_height);
}
begin_height = begin_height + linelenght;
text = '';
count = 0;
lineNumber++;
}
if (i === stringLenght) {
cxt.fillText(text, begin_width, begin_height);
}
text = text + newtext[0];
count++;
newtext.shift();
if (lineNumber > numberOfLine) {
break;
}
}
}
});
... ...
{
"navigationBarTitleText": "拼团详情",
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--pages/snapshootShare/snapshootShare.wxml-->
<view class="snapshoot-container" >
<view class="snapshoot-container">
<view class="snapshoot-content">
<view class="snapshoot">
<view class="snapshoot-title">
<view>你的好友邀你为ta助力，购买限定商品</view>
</view>
<view class="snapshoot-productinfo">
<image class="product-defaultImage" src="{{default_image}}"> </image>
</view>
<view class="product-info-content">
<text class="product-name">{{product_name}}</text>
</view>
<view class="product-miniqr">
<image class="yoho-logo" src="./images/share-logo@2x.png"></image>
<image class="product-qrcode" src="{{product_qrCode}}"></image>
<text class="snapshoot-tips">长按扫码查看详情</text>
<view class='product-tips'>
<image class="product-tips-img" src="./images/snapshoot_tip_ic@2x.png"></image>
<text class="product-tips-text">或者在各大应用市场搜索 Yoho!Buy有货 下载App</text>
</view>
</view>
</view>
</view>
<!--底部按钮 -->
<view class="snapshoot-bottom">
<view class="snapshoot-save" bindtap="saveToAlbum">
<!-- <image class="img" src="./images/down@2x.png"></image> -->
<text class="text">保存到相册</text>
</view>
<view class="snapshoot-cancel" bindtap="hidden">
<text class="cancel-text">取消</text>
</view>
</view>
</view>
<view class="snapshoot-canvas" style="width: {{windowWidth}}px;height:{{screenHeight}}px; background-color: white; margin-top: {{screenHeight}}px" >
<canvas canvas-id="productDetailCanvas" style="width: {{windowWidth}}px;height:{{screenHeight}}px;background-color: white"></canvas>
</view>
</view>
... ...
/* pages/snapshootShare/snapshootShare.wxss */
.snapshoot-container {
position: fixed;
left: 0rpx;
top: 0rpx;
width: 750rpx;
height: 1206rpx;
background-color: rgba(0, 0, 0, 0.5);
flex-direction: column;
z-index: 9999;
}
.snapshoot-container .snapshoot-content {
margin-top: 58rpx;
margin-left: 105rpx;
width: 540rpx;
height: 960rpx;
background-color: white;
flex-direction: column;
}
.snapshoot-container .snapshoot-content .snapshoot {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.snapshoot-container .snapshoot-content .snapshoot .img-bg {
width: 100%;
height: 168rpx;
}
.snapshoot-container .snapshoot-content .snapshoot .snapshoot-shopinfo {
margin-top: -50rpx;
width: 460rpx;
height: 460rpx;
background-color: white;
box-shadow:5px 5px 3px lightgray;
border: 0.5rpx solid #e5e5e5;
display: flex;
flex-direction: column;
align-items: center;
}
.snapshoot-container .snapshoot-content .snapshoot .snapshoot-shopinfo .img-logo {
margin-top: 30rpx;
width: 172rpx;
height: 172rpx;
}
.snapshoot-container .snapshoot-content .snapshoot .snapshoot-shopinfo .shop-name {
margin-top: 36rpx;
font-size: 28rpx;
font-weight: bold;
text-align: center;
}
.snapshoot-container .snapshoot-content .snapshoot .snapshoot-shopinfo .shop-intro {
margin-top: 61rpx;
font-size: 20rpx;
font-weight: bold;
text-align: left;
width: 401rpx;
height: 60rpx;
line-height:30rpx;
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
white-space: pre-wrap;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.snapshoot .shop-miniqr {
display: flex;
flex-direction: column;
align-items: center;
}
.yoho-logo {
width: 160rpx;
height: 29rpx;
margin-top: 21rpx;
}
.snapshoot .shop-miniqr .shop-qrcode {
width: 130rpx;
height: 130rpx;
margin-top: 90rpx;
}
.product-qrcode {
width: 130rpx;
height: 130rpx;
margin-top: 21rpx;
}
.snapshoot-container .snapshoot-save {
width: 260rpx;
height: 88rpx;
background-color: red;
border-radius: 10rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.snapshoot-container .snapshoot-cancel {
margin-left: 20rpx;
width: 260rpx;
height: 88rpx;
background-color: white;
border-radius: 10rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center
}
.img {
width: 41rpx;
height: 38rpx;
}
.text {
font: 28rpx;
color: white;
text-align: center;
}
.cancel-text {
font: 28rpx;
color: black;
text-align: center;
}
.snapshoot-tips {
margin-top: 16rpx;
font-size: 16rpx;
color: #444444;
}
.snapshoot-title {
font-size: 25rpx;
margin-top: 40rpx;
margin-bottom: 40rpx;
}
/*商品 */
.product-img-bg {
width: 100%;
height: 268rpx;
}
.snapshoot-productinfo {
width: 460rpx;
height: 400rpx;
background-color: white;
box-shadow:5px 5px 3px rgba(0, 0, 0, 0.05);
border: 0.5rpx solid #e5e5e5;
display: flex;
flex-direction: column;
align-items: center;
}
.product-defaultImage {
width: 100%;
height: 100%
}
.product-info-content {
width: 100%;
height: 180rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.product-name {
width: 80%;
margin-top: 30rpx;
color: white;
text-align: center;
font-size: 26rpx;
margin-bottom: 20rpx;
line-height: 32rpx;
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
white-space: pre-wrap;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.product-price {
color: white;
text-align: center;
font-size: 34rpx;
}
.product-tips {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10rpx;
}
.product-tips-img {
width: 18rpx;
height: 18rpx;
}
.product-tips-text {
font-size: 16rpx;
color: #b0b0b0;
margin-left: 10rpx;
}
.product-miniqr {
/* margin-top: -20; */
display: flex;
flex-direction: column;
align-items: center;
}
.snapshoot-bottom {
margin-left: 105rpx;
margin-top: 50rpx;
width: 540rpx;
height: 88rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.list-title {
width: 80%;
height: 70rpx;
margin-top: 30rpx;
color: white;
text-align: center;
font-size: 26rpx;
line-height: 35rpx;
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
white-space: pre-wrap;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.list-content {
margin-top: 20rpx;
color: white;
text-align: center;
font-size: 14rpx;
}
/* .snapshoot-container .snapshoot-content .snapshoot-canvas {
width: 750rpx;
height: 1206rpx;
background-color: white;
} */
\ No newline at end of file
... ...
... ... @@ -33,7 +33,7 @@
"list": []
},
"miniprogram": {
"current": 1,
"current": 2,
"list": [
{
"id": 0,
... ... @@ -48,15 +48,15 @@
"query": "f"
},
{
"id": 1,
"id": 2,
"name": "情详页",
"pathName": "pages/product/detail/detail",
"query": "limitProductCode=2018030117484051"
"query": "limitProductCode=2018062115403668"
},
{
"id": -1,
"id": 2,
"name": "分享页",
"pathName": "pages/share/share",
"pathName": "pages/snapshootShare/snapshootShare",
"query": ""
}
]
... ...
... ... @@ -4,5 +4,5 @@ export default {
home: {path: '/pages/index/index'},
productDetail: {path: '/pages/product/detail/detail'},
userCenter: {path: '/pages/home/index'},
snapShare: {path: '/pages/share/share'}
snapShare: {path: '/pages/snapshootShare/snapshootShare'},
};
... ...