mobile / yoho-miniapp-ufo · Commits

Go to a project

Authored by 肖亚东
Commit 292cdf4325f900226dcd6baa568d75a0ecb9211a 1 parent 55d044c4

商品快照分享功能 — review by 李其昌

Inline Side-by-side
Showing 11 changed files with 668 additions and 13 deletions
1 import { 1 import {
2 SHOWSIZEBOX, 2 SHOWSIZEBOX,
3 - SHOWSHARESHEET 3 + SHOWSHARESHEET,
  4 + SHOWSNAPSHOT
4 } from '../constants/productDetail' 5 } from '../constants/productDetail'
5 6
6 export const showSizeBox = (isShow) => { 7 export const showSizeBox = (isShow) => {
@@ -17,3 +18,10 @@ export const showSharesheet = (isShow) => { @@ -17,3 +18,10 @@ export const showSharesheet = (isShow) => {
17 } 18 }
18 } 19 }
19 20
  21 +export const showSnapshot = (isShow) => {
  22 + return {
  23 + isShow,
  24 + type: SHOWSNAPSHOT
  25 + }
  26 +}
  27 +
@@ -28,6 +28,8 @@ Component({ @@ -28,6 +28,8 @@ Component({
28 methods: { 28 methods: {
29 29
30 onShare: function(e) { 30 onShare: function(e) {
  31 + event.emit(SHARE_CANCEL);
  32 +
31 let type = e.currentTarget.dataset.type; 33 let type = e.currentTarget.dataset.type;
32 if (type == 'friends') {//微信好友或群 34 if (type == 'friends') {//微信好友或群
33 event.emit(SHARE_FRIENDS); 35 event.emit(SHARE_FRIENDS);
  1 +import Taro from '@tarojs/taro'
  2 +import event from '../../../utils/event.js'
  3 +import {getImgUrl} from '../../../utils';
  4 +
  5 +// 获取系统信息
  6 +let systemInfo = Taro.getSystemInfoSync();
  7 +const windowWidth = systemInfo.windowWidth;
  8 +const windowHeight = systemInfo.windowHeight;
  9 +const screenHeight = systemInfo.screenHeight;
  10 +
  11 +let scale = windowWidth / 375;
  12 +let HScale = scale
  13 +
  14 +const SHARE_CANCEL_MOMENTS = 'user-canel-share-moments';
  15 +
  16 +Component({
  17 + /**
  18 + * 组件的属性列表
  19 + */
  20 + properties: {
  21 + isShow: {
  22 + type: Boolean,
  23 + value: false,
  24 + observer: "_creatSnapshoot"
  25 + },
  26 +
  27 + sourceType: {
  28 + type: String,
  29 + value: ""
  30 + },
  31 +
  32 + shareData: {
  33 + type: Object,
  34 + value: null,
  35 + }
  36 + },
  37 +
  38 + /**
  39 + * 组件的初始数据
  40 + */
  41 + data: {
  42 + screenHeight: systemInfo.screenHeight,
  43 + windowWidth: systemInfo.windowWidth,
  44 + windowHeight: systemInfo.windowHeight,
  45 + scale,
  46 + ratio:2
  47 + },
  48 +
  49 + /**
  50 + * 组件的方法列表
  51 + */
  52 + methods: {
  53 + hidden() {
  54 + // this.triggerEvent("hiddenSnaphotSheet");
  55 +
  56 + event.emit(SHARE_CANCEL_MOMENTS);
  57 + },
  58 +
  59 + saveToAlbum() {
  60 + var that = this;
  61 + if (wx.getSetting) {
  62 + wx.getSetting({
  63 + success(res) {
  64 + if (!res.authSetting['scope.writePhotosAlbum']) {
  65 + wx.authorize({
  66 + scope: 'scope.writePhotosAlbum',
  67 + success: function (res) {
  68 + that.saveSnapShoot();
  69 + },
  70 + fail: function (error) {
  71 + if (res.authSetting['scope.writePhotosAlbum'] == false) {
  72 + wx.showModal({
  73 + title: '',
  74 + content: '需要打开小程序的设置，重新授权访问您的系统相册',
  75 + confirmText: "去开启",
  76 + confirmColor: "#000000",
  77 + success: function (res) {
  78 + if (res.confirm) {
  79 + wx.openSetting({
  80 + success: function (res) {
  81 + }
  82 + });
  83 + }
  84 + }
  85 + });
  86 + }
  87 + },
  88 + })
  89 + } else {
  90 + that.saveSnapShoot();
  91 + }
  92 + }
  93 + })
  94 + } else {
  95 + wx.showModal({
  96 + title: '提示',
  97 + content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  98 + })
  99 + }
  100 + },
  101 +
  102 + saveSnapShoot() {
  103 + var that = this;
  104 + var canvasWidth = windowWidth * that.data.ratio;
  105 + var canvasHeight = screenHeight * that.data.ratio;
  106 + var destWidth = windowWidth * 2 * that.data.ratio;
  107 + var destHeight = screenHeight * 2 * that.data.ratio;
  108 + var canvasId = 'productDetailCanvas';
  109 +
  110 + wx.canvasToTempFilePath({
  111 + x: 0,
  112 + y: 0,
  113 + width: canvasWidth,
  114 + height: canvasHeight,
  115 + destWidth: destWidth,
  116 + destHeight: destHeight,
  117 + quality: 1.0,
  118 + canvasId: canvasId,
  119 + success: function (result) {
  120 + wx.saveImageToPhotosAlbum({
  121 + filePath: result.tempFilePath,
  122 + success(res) {
  123 + wx.showToast({
  124 + title:
  125 + '保存成功',
  126 + icon:
  127 + 'success',
  128 + duration:
  129 + 2000
  130 + })
  131 + that.hidden();
  132 + },
  133 + fail: function (err) {
  134 + that.hidden();
  135 + }
  136 + }, );
  137 + },
  138 + fail: function (error) {
  139 + that.hidden();
  140 + },
  141 + complete: function (res) {
  142 + that.hidden();
  143 + }
  144 + }, this);
  145 + },
  146 +
  147 + _creatSnapshoot: function(newValue, oldValue) {
  148 + if(newValue) {
  149 + this.creatProductDetailSnapShoot();
  150 + }
  151 + },
  152 +
  153 + creatProductDetailSnapShoot() {
  154 +
  155 + var that = this;
  156 + var product = that.properties.shareData;
  157 +
  158 + console.log('====================================');
  159 + console.log(product);
  160 + console.log('====================================');
  161 +
  162 + if(!product){
  163 + return
  164 + }
  165 + let ratio = this.data.ratio
  166 + let snapWidth = this.data.windowWidth * ratio
  167 + let snapHeight = this.data.screenHeight * ratio
  168 + let middle = snapWidth / 2
  169 + scale = snapWidth / 262.5
  170 + HScale = scale
  171 + // console.log(windowWidth,screenHeight,snapWidth,snapHeight,scale)
  172 + let logoHeight = 15.4 * HScale;
  173 + let logoWidth = 78.4 * scale;
  174 + let logoTop = 25.2 * HScale;
  175 + let logoMarginBottom = 21 * HScale;
  176 + let logoLeft = (snapWidth - logoWidth) / 2 //logo左边坐标
  177 +
  178 + let imgContainerWidth = 227.5 * scale;
  179 + let imgContainerHeight = 303.1 * HScale
  180 + let imgContainerLeft = (snapWidth - imgContainerWidth) / 2 //图片容器左边位置
  181 + let imgContainerTop = logoHeight + logoTop + logoMarginBottom //图片容器顶部位置
  182 +
  183 + let namePriceBgHeight = 56 * HScale
  184 + let namePriceBgTop = imgContainerTop + (imgContainerHeight - namePriceBgHeight)
  185 +
  186 + let x = 10 * scale
  187 + let nameTop = imgContainerTop + 255*scale + x
  188 + let priceTop = imgContainerTop + 280* scale + x
  189 +
  190 + //以下为小程序码相关
  191 + let qrImgMarginTop = 21 * HScale
  192 + let qrCodeTop = imgContainerTop + imgContainerHeight + qrImgMarginTop
  193 + let qrImgWH = 56 * scale
  194 +
  195 + let tipX = 10 * scale
  196 + let tipLeft = imgContainerLeft + qrImgWH + 13.7 * scale
  197 + let tip1Top = imgContainerTop + imgContainerHeight + 34.2*scale + tipX
  198 + let tip2Top = imgContainerTop + imgContainerHeight + 52.5 * scale + tipX
  199 +
  200 + var pCtx = wx.createCanvasContext("productDetailCanvas", this);
  201 + pCtx.setFillStyle('white');
  202 + pCtx.fillRect(0, 0, snapWidth, snapHeight);
  203 + /*---------开始新的作画-----------*/
  204 + pCtx.drawImage('../../../assets/images/share-logo@2x.png',logoLeft , logoTop, logoWidth, logoHeight)//画logo
  205 + pCtx.setFillStyle('white');
  206 + pCtx.setStrokeStyle('#e0e0e0')
  207 + // pCtx.fillRect(imgContainerLeft,imgContainerTop,320*scale,430*scale)//图片容器
  208 + pCtx.strokeRect(imgContainerLeft, imgContainerTop, imgContainerWidth , imgContainerHeight)//图片容器
  209 +
  210 + var defaultImage = getImgUrl(product.default_image, imgContainerWidth, imgContainerHeight);
  211 + if (defaultImage && defaultImage.indexOf("https://") == -1) {
  212 + defaultImage = defaultImage.replace('http://', 'https://');
  213 + }
  214 + product.default_image = defaultImage;
  215 + that.setData({
  216 + shareData: product
  217 + })
  218 +
  219 + wx.getImageInfo({
  220 + src: defaultImage,
  221 + success:function(res){
  222 + pCtx.drawImage(res.path, imgContainerLeft, imgContainerTop, imgContainerWidth, imgContainerHeight)
  223 + pCtx.setFillStyle("rgba(34,34,34,0.8)");//画名称价格背景
  224 + pCtx.fillRect(imgContainerLeft, namePriceBgTop, imgContainerWidth, namePriceBgHeight)
  225 + pCtx.setFillStyle('white');
  226 + that.drawLongText(product.product_name, pCtx, middle, nameTop, 'white', 9.8, 30,1);
  227 + pCtx.setTextAlign('center');
  228 + pCtx.setFontSize(16.8 * scale);
  229 + pCtx.fillText(product.product_price, middle, priceTop);
  230 + pCtx.draw(true)
  231 + }
  232 + })
  233 + // wx.getImageInfo({
  234 + // src: product.product_qrCode,
  235 + // success:function(res){
  236 + // pCtx.drawImage(res.path, imgContainerLeft, qrCodeTop, qrImgWH, qrImgWH);//画小程序码
  237 + // pCtx.draw(true)
  238 +
  239 + // }
  240 + // })
  241 + pCtx.setFillStyle('#444444')
  242 + pCtx.setFontSize(9.8*scale)
  243 +
  244 + pCtx.fillText('长按扫码查看详情',tipLeft,tip1Top)
  245 + pCtx.setFillStyle('#b0b0b0')
  246 + pCtx.setFontSize(8.4*scale)
  247 + pCtx.fillText('实际价格以页面展示为准', tipLeft, tip2Top)
  248 + pCtx.draw()
  249 + /*---------结束新的作画-----------*/
  250 + },
  251 +
  252 + drawLongText(longtext, cxt, begin_width, begin_height, color, fontSize, numsForLine,numberOfLine,
  253 + isCenter = true,lineL = 0) {
  254 + let linelenght = lineL;//行间距
  255 + if (linelenght == 0){
  256 + linelenght = (fontSize + 2) * scale
  257 + }
  258 + if(!numberOfLine){
  259 + numberOfLine = 2;
  260 + }
  261 + var text = "";
  262 + var count = 0;
  263 + var lineNumber = 1;
  264 + var begin_width = begin_width;
  265 + var begin_height = begin_height;
  266 + var stringLenght = longtext.length;
  267 + var newtext = longtext.split("");
  268 +
  269 + cxt.setFillStyle(color);
  270 + cxt.setFontSize(fontSize * scale);
  271 + if(isCenter){
  272 + cxt.setTextAlign('center');
  273 + }
  274 +
  275 + for (var i = 0; i <= stringLenght; i++) {
  276 + if (count == numsForLine) {
  277 + if (lineNumber === numberOfLine) {
  278 + var t = text + '...';
  279 + cxt.fillText(t, begin_width, begin_height);
  280 + } else {
  281 + cxt.fillText(text, begin_width, begin_height);
  282 + }
  283 + begin_height = begin_height + linelenght;
  284 + text = "";
  285 + count = 0;
  286 + lineNumber ++;
  287 + }
  288 + if (i == stringLenght) {
  289 + cxt.fillText(text, begin_width, begin_height);
  290 + }
  291 + text = text + newtext[0];
  292 + count++;
  293 + newtext.shift();
  294 + if(lineNumber > numberOfLine){
  295 + break;
  296 + }
  297 + }
  298 + }
  299 + }
  300 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {}
  4 +}
  1 +
  2 +<view class="snapshoot-container" style="display: {{isShow ? 'block' : 'none'}}" >
  3 + <view class="snapshoot-container">
  4 + <view class="snapshoot-content">
  5 +
  6 + <!--商品详情开始 -->
  7 + <view class="snapshoot">
  8 + <image class="yoho-logo" style='margin-top:50.4rpx' src="../../../assets/images/share-logo@2x.png"></image>
  9 + <view class="snapshoot-productinfo">
  10 + <image class="product-defaultImage" src="{{shareData.default_image}}"> </image>
  11 + <view class="product-info-content">
  12 + <text class="product-name">{{shareData.product_name}}</text>
  13 + <text class="product-price">{{shareData.product_price}}</text>
  14 + </view>
  15 + </view>
  16 + <view class='product-miniqr-new'>
  17 + <image class="product-qrcode" src="{{shareData.product_qrCode}}"></image>
  18 + <view class='product-tips-new'>
  19 + <text class="snapshoot-tips-new">长按扫码查看详情</text>
  20 + <text class="product-tips-text-new" style='margin-top:10.4rpx;margin-left:0rpx'>实际价格以页面展示为准</text>
  21 + </view>
  22 + </view>
  23 + </view>
  24 + </view>
  25 +
  26 + <!--底部按钮 -->
  27 + <view class="snapshoot-bottom">
  28 + <view class="snapshoot-save" bindtap="saveToAlbum">
  29 + <!-- <image class="img" src="./images/down@2x.png"></image> -->
  30 + <text class="text">保存到相册</text>
  31 + </view>
  32 + <view class="snapshoot-cancel" bindtap="hidden">
  33 + <text class="cancel-text">取消</text>
  34 + </view>
  35 + </view>
  36 + </view>
  37 +</view>
  38 +
  39 +
  40 +<block>
  41 + <canvas canvas-id="productDetailCanvas" style="width: {{windowWidth*ratio}}px;height:{{screenHeight*ratio}}px;background-color: white;margin-top: 10000px;margin-left:10000px;position:fixed"></canvas>
  42 +</block>
  43 +
  44 +
  45 +
  46 +
  47 +
  1 +
  2 +.snapshoot-container {
  3 + position: fixed;
  4 + left: 0rpx;
  5 + top: 0rpx;
  6 + width: 750rpx;
  7 + height: 1206rpx;
  8 + background-color: rgba(0, 0, 0, 0.5);
  9 + flex-direction: column;
  10 + z-index: 9999;
  11 +}
  12 +
  13 +.snapshoot-container .snapshoot-content {
  14 + margin-top: 40rpx;
  15 + margin-left: 112.5rpx;
  16 + width: 525rpx;
  17 + height:auto;
  18 + background-color: white;
  19 + flex-direction: column;
  20 + padding-bottom: 36rpx;
  21 + /* height:960rpx */
  22 +}
  23 +
  24 +.snapshoot-container .snapshoot-content .snapshoot {
  25 + width: 100%;
  26 + height: 100%;
  27 + display: flex;
  28 + flex-direction: column;
  29 + align-items: center;
  30 +}
  31 +
  32 +.snapshoot-container .snapshoot-content .snapshoot .img-bg {
  33 + width: 100%;
  34 + height: 142rpx;
  35 +}
  36 +
  37 +.snapshoot-container .snapshoot-content .snapshoot .snapshoot-shopinfo {
  38 + margin-top: 30rpx;
  39 + width: 460rpx;
  40 + height: wrap;
  41 + background-color: white;
  42 + border: 0.5rpx solid #e5e5e5;
  43 + display: flex;
  44 + flex-direction: column;
  45 + align-items: center;
  46 + /* box-shadow:5px 5px 3px lightgray; */
  47 +}
  48 +
  49 +.snapshoot-container .snapshoot-content .snapshoot .snapshoot-shopinfo .img-logo {
  50 + margin-top: 30rpx;
  51 + width: 200rpx;
  52 + height: 168rpx;
  53 +}
  54 +
  55 +.snapshoot-container .snapshoot-content .snapshoot .snapshoot-shopinfo .shop-name {
  56 + margin-top: 35.8rpx;
  57 + font-size: 25.2rpx;
  58 + font-weight: bold;
  59 + text-align: center;
  60 + font-family: PingFang-SC-Semibold;
  61 + color: #444444
  62 +}
  63 +
  64 +.snapshoot-container .snapshoot-content .snapshoot .snapshoot-shopinfo .shop-intro {
  65 + /* margin-top: 61rpx; */
  66 + font-size: 19.6rpx;
  67 + /* font-weight: bold; */
  68 + text-align: center;
  69 + width: 399rpx;
  70 + height: wrap;
  71 + line-height:33.6rpx;
  72 + display: -webkit-box;
  73 + overflow: hidden;
  74 + text-overflow:ellipsis;
  75 + white-space: pre-wrap;
  76 + -webkit-box-orient: vertical;
  77 + -webkit-line-clamp: 5;
  78 +
  79 +}
  80 +
  81 +.yoho-logo {
  82 + width: 156.8rpx;
  83 + height: 30rpx;
  84 + margin-top: 21rpx;
  85 +}
  86 +.product-qrcode {
  87 + width: 112rpx;
  88 + height: 112rpx;
  89 +}
  90 +
  91 +.snapshoot-container .snapshoot-save {
  92 + width: 250rpx;
  93 + height: 88rpx;
  94 + background-color: red;
  95 + border-radius: 10rpx;
  96 + display: flex;
  97 + flex-direction: row;
  98 + flex-wrap: wrap;
  99 + justify-content: center;
  100 + align-items: center;
  101 +}
  102 +
  103 +.snapshoot-container .snapshoot-cancel {
  104 + margin-left: 25rpx;
  105 + width: 250rpx;
  106 + height: 88rpx;
  107 + background-color: white;
  108 + border-radius: 10rpx;
  109 + display: flex;
  110 + flex-direction: row;
  111 + flex-wrap: wrap;
  112 + justify-content: center;
  113 + align-items: center
  114 + }
  115 +
  116 +.img {
  117 + width: 41rpx;
  118 + height: 38rpx;
  119 +}
  120 +
  121 +.text {
  122 + font: 28rpx;
  123 + color: white;
  124 + text-align: center;
  125 +}
  126 +
  127 +.cancel-text {
  128 + font: 28rpx;
  129 + color: black;
  130 + text-align: center;
  131 +}
  132 +
  133 +.snapshoot-tips {
  134 + margin-top: 16rpx;
  135 + font-size: 16rpx;
  136 + color: #444444;
  137 +}
  138 +.snapshoot-tips-new{
  139 + font-family: PingFang-SC-Regular;
  140 + font-size: 20rpx;
  141 + color: #444444;
  142 + letter-spacing: 0;
  143 + text-align: center;
  144 +}
  145 +
  146 +.snapshoot-productinfo {
  147 + margin-top: 42rpx;
  148 + width: 455rpx;
  149 + height: 606.2rpx;
  150 + background-color: white;
  151 + display: flex;
  152 + flex-direction: column;
  153 + align-items: center;
  154 + border: 0rpx solid #e0e0e0;
  155 +}
  156 +
  157 +.product-defaultImage {
  158 + width: 100%;
  159 + height: 100%
  160 +}
  161 +
  162 +.product-info-content {
  163 + width: 100%;
  164 + height: 112rpx;
  165 + margin-top: -112rpx;
  166 + background-color: rgba(0, 0, 0, 0.5);
  167 + display: flex;
  168 + flex-direction: column;
  169 + align-items: center;
  170 +}
  171 +
  172 +.product-name {
  173 + width: 90%;
  174 + margin-top: 16.8rpx;
  175 + color: #FFFFFF;
  176 + text-align: center;
  177 + font-size: 20rpx;
  178 + /* margin-bottom: 20rpx; */
  179 + line-height: 32rpx;
  180 + display: -webkit-box;
  181 + overflow: hidden;
  182 + text-overflow:ellipsis;
  183 + white-space: pre-wrap;
  184 + -webkit-box-orient: vertical;
  185 + -webkit-line-clamp: 1;
  186 +}
  187 +
  188 +.product-price {
  189 + color: #FFFFFF;
  190 + text-align: center;
  191 + font-size: 30rpx;
  192 + margin-top: 10rpx;
  193 +}
  194 +
  195 +.product-tips {
  196 + display: flex;
  197 + flex-direction: row;
  198 + justify-content: center;
  199 + align-items: center;
  200 + margin-top: 10rpx;
  201 +}
  202 +
  203 +.product-tips-img {
  204 + width: 18rpx;
  205 + height: 18rpx;
  206 +}
  207 +
  208 +.product-tips-text {
  209 + font-size: 16rpx;
  210 + color: #b0b0b0;
  211 + margin-left: 10rpx;
  212 +}
  213 +.product-tips-text-new {
  214 + font-family: PingFang-SC-Regular;
  215 + font-size: 16rpx;
  216 + color: #B0B0B0;
  217 + letter-spacing: 0;
  218 +}
  219 +
  220 +.snapshoot-bottom {
  221 + margin-left: 112.5rpx;
  222 + margin-top: 25rpx;
  223 + width: 525rpx;
  224 + height: 88rpx;
  225 + display: flex;
  226 + flex-direction: row;
  227 + flex-wrap: wrap;
  228 + justify-content: center;
  229 + align-items: center;
  230 +}
  231 +
  232 +.product-miniqr-new{
  233 + height:112rpx;
  234 + margin-top:42rpx;
  235 + display: flex;
  236 + flex-direction: row;
  237 + align-items: center;
  238 + width:455rpx;
  239 + /* margin-left:112.5rpx; */
  240 +}
  241 +.product-tips-new {
  242 + margin-left:27.4rpx;
  243 + width:wrap;
  244 + display: flex;
  245 + flex-direction: column;
  246 + align-items: flex-start
  247 +}
  248 +
1 export const SHOWSIZEBOX = 'SHOWSIZEBOX' 1 export const SHOWSIZEBOX = 'SHOWSIZEBOX'
2 export const SHOWSHARESHEET = 'SHOWSHARESHEET' 2 export const SHOWSHARESHEET = 'SHOWSHARESHEET'
  3 +export const SHOWSNAPSHOT = 'SHOWSNAPSHOT'
@@ -54,9 +54,6 @@ export default class Search extends Component { @@ -54,9 +54,6 @@ export default class Search extends Component {
54 let {setFilter} = this.props; 54 let {setFilter} = this.props;
55 setFilter(filter); 55 setFilter(filter);
56 56
57 - console.log('====================================');  
58 - console.log(filter);  
59 - console.log('====================================');  
60 wx.navigateBack({ 57 wx.navigateBack({
61 delta: 1 58 delta: 1
62 }) 59 })
@@ -4,7 +4,7 @@ import {productDetail as productDetailModel} from '../../models'; @@ -4,7 +4,7 @@ import {productDetail as productDetailModel} from '../../models';
4 import {getImgUrl} from '../../utils'; 4 import {getImgUrl} from '../../utils';
5 import {ProductList, SelectSize} from '../../components'; 5 import {ProductList, SelectSize} from '../../components';
6 import { connect } from '@tarojs/redux'; 6 import { connect } from '@tarojs/redux';
7 -import { showSizeBox, showSharesheet } from '../../actions/productDetail' 7 +import { showSizeBox, showSharesheet, showSnapshot } from '../../actions/productDetail'
8 8
9 9
10 import share from '../../static/images/share.png'; 10 import share from '../../static/images/share.png';
@@ -16,6 +16,8 @@ import event from '../../utils/event' @@ -16,6 +16,8 @@ import event from '../../utils/event'
16 const SHARE_FRIENDS = 'user-share-friends'; 16 const SHARE_FRIENDS = 'user-share-friends';
17 const SHARE_MOMENTS = 'user-share-moments'; 17 const SHARE_MOMENTS = 'user-share-moments';
18 const SHARE_CANCEL = 'user-canel-share'; 18 const SHARE_CANCEL = 'user-canel-share';
  19 +const SHARE_CANCEL_MOMENTS = 'user-canel-share-moments';
  20 +
19 @connect(({ productDetail }) => ({ 21 @connect(({ productDetail }) => ({
20 productDetail 22 productDetail
21 }), (dispatch) => ({ 23 }), (dispatch) => ({
@@ -24,6 +26,9 @@ const SHARE_CANCEL = 'user-canel-share'; @@ -24,6 +26,9 @@ const SHARE_CANCEL = 'user-canel-share';
24 }, 26 },
25 showSharesheet (isShow) { 27 showSharesheet (isShow) {
26 dispatch(showSharesheet(isShow)) 28 dispatch(showSharesheet(isShow))
  29 + },
  30 + showSnapshot (isShow) {
  31 + dispatch(showSnapshot(isShow))
27 } 32 }
28 })) 33 }))
29 34
@@ -37,7 +42,7 @@ export default class ProductDetail extends Component { @@ -37,7 +42,7 @@ export default class ProductDetail extends Component {
37 recommendList: [], 42 recommendList: [],
38 collectTitle: '收藏', 43 collectTitle: '收藏',
39 isFavorite: false, 44 isFavorite: false,
40 - isShare: false, 45 + snapshootShareData: {},
41 productDec: { 46 productDec: {
42 color: { 47 color: {
43 text: '颜色', 48 text: '颜色',
@@ -65,7 +70,8 @@ export default class ProductDetail extends Component { @@ -65,7 +70,8 @@ export default class ProductDetail extends Component {
65 70
66 config = { 71 config = {
67 usingComponents: { 72 usingComponents: {
68 - 'share-sheet' : '../../components/shareSheet/shareSheet' 73 + 'share-sheet' : '../../components/shareSheet/shareSheet',
  74 + 'snapshoot-share' : '../../components/shareSheet/snapshootShare/snapshootShare'
69 } 75 }
70 } 76 }
71 componentDidMount() { 77 componentDidMount() {
@@ -85,6 +91,9 @@ export default class ProductDetail extends Component { @@ -85,6 +91,9 @@ export default class ProductDetail extends Component {
85 event.on(SHARE_MOMENTS, () => { 91 event.on(SHARE_MOMENTS, () => {
86 this.shareMomentsCallback(); 92 this.shareMomentsCallback();
87 }); 93 });
  94 + event.on(SHARE_CANCEL_MOMENTS, () => {
  95 + this.hiddenSnaphotSheet();
  96 + });
88 } 97 }
89 98
90 getProductData(id) { 99 getProductData(id) {
@@ -94,12 +103,34 @@ export default class ProductDetail extends Component { @@ -94,12 +103,34 @@ export default class ProductDetail extends Component {
94 let productInfo = data && data.product_info || {}; 103 let productInfo = data && data.product_info || {};
95 let goodsList = productInfo.goods_list && productInfo.goods_list.length > 0 && productInfo.goods_list[0] || {}; 104 let goodsList = productInfo.goods_list && productInfo.goods_list.length > 0 && productInfo.goods_list[0] || {};
96 let imageSize = goodsList.image_list.length; 105 let imageSize = goodsList.image_list.length;
  106 + let default_image = imageSize > 0 ? goodsList.image_list[0]['image_url'] : '';
  107 + var product_qrCode = ''
  108 +
  109 + // if (app.globalData.user_union_type) {
  110 +
  111 + // let page_param = {
  112 + // union_type: app.globalData.user_union_type,
  113 + // productSkn: data.data.product_id,
  114 + // }
  115 + // product_qrCode = API_HOST + '/wechat/miniapp/img-check.jpg?param=' + encodeURIComponent(JSON.stringify(page_param)) + '&miniQrType=7';
  116 + // } else {
  117 + // product_qrCode = API_HOST + '/wechat/miniapp/img-check.jpg?param=' + data.data.product_id;
  118 + // }
  119 + var shareData = {
  120 + product_name : productInfo.product_name,
  121 + product_price: '￥'+productInfo.max_price,
  122 + product_mprice: (productInfo.min_price === '0' || productInfo.max_price == productInfo.min_price ? '0' : '¥' + productInfo.min_price),
  123 + default_image,
  124 + product_qrCode,
  125 + product_skn: productInfo.product_id
  126 + }
97 127
98 this.setState({ 128 this.setState({
99 productInfo: productInfo, 129 productInfo: productInfo,
100 imageSize: imageSize, 130 imageSize: imageSize,
101 goodsList: goodsList, 131 goodsList: goodsList,
102 swiperNum: `1 | ${imageSize}`, 132 swiperNum: `1 | ${imageSize}`,
  133 + snapshootShareData: shareData,
103 productDec: [ 134 productDec: [
104 { 135 {
105 text: '颜色', 136 text: '颜色',
@@ -222,11 +253,16 @@ export default class ProductDetail extends Component { @@ -222,11 +253,16 @@ export default class ProductDetail extends Component {
222 showSharesheet(false); 253 showSharesheet(false);
223 } 254 }
224 255
225 - //点击组件的分享朋友圈回调处理 256 + //点击组件的分享朋友圈回调
226 shareMomentsCallback() { 257 shareMomentsCallback() {
227 - console.log('====================================');  
228 - console.log('分享到朋友圈');  
229 - console.log('===================================='); 258 + let {showSnapshot} = this.props;
  259 + showSnapshot(true);
  260 + }
  261 +
  262 + //取消分享朋友圈回调
  263 + hiddenSnaphotSheet() {
  264 + let {showSnapshot} = this.props;
  265 + showSnapshot(false);
230 } 266 }
231 267
232 onClickBuy() { 268 onClickBuy() {
@@ -304,6 +340,11 @@ export default class ProductDetail extends Component { @@ -304,6 +340,11 @@ export default class ProductDetail extends Component {
304 } 340 }
305 341
306 { 342 {
  343 + this.props.productDetail.showSnapshot &&
  344 + <snapshoot-share isShow={this.props.productDetail.showSnapshot} shareData={snapshootShareData} bindhiddenSnaphotSheet='hiddenSnaphotSheet'></snapshoot-share>
  345 + }
  346 +
  347 + {
307 this.props.productDetail.showSizeBox && 348 this.props.productDetail.showSizeBox &&
308 <SelectSize sizeList={goodsList.size_list} product_id={id}></SelectSize> 349 <SelectSize sizeList={goodsList.size_list} product_id={id}></SelectSize>
309 } 350 }
1 -import { SHOWSIZEBOX, SHOWSHARESHEET } from '../constants/productDetail' 1 +import { SHOWSIZEBOX, SHOWSHARESHEET, SHOWSNAPSHOT } from '../constants/productDetail'
2 2
3 const INITIAL_STATE = { 3 const INITIAL_STATE = {
4 showSizeBox: false, 4 showSizeBox: false,
5 - showSharesheet: false 5 + showSharesheet: false,
  6 + showSnapshot: false
6 } 7 }
7 8
8 export default function productDetail (state = INITIAL_STATE, action) { 9 export default function productDetail (state = INITIAL_STATE, action) {
@@ -17,6 +18,12 @@ export default function productDetail (state = INITIAL_STATE, action) { @@ -17,6 +18,12 @@ export default function productDetail (state = INITIAL_STATE, action) {
17 ...state, 18 ...state,
18 showSharesheet: action.isShow 19 showSharesheet: action.isShow
19 } 20 }
  21 + case SHOWSNAPSHOT:
  22 + return {
  23 + ...state,
  24 + showSnapshot: action.isShow
  25 + }
  26 +
20 default: 27 default:
21 return state 28 return state
22 } 29 }