新增商品详情页生成海报，秒杀列表样式优化

components/lf-seckill/lf-seckill.vue

@@ -9,10 +9,12 @@
 					<view class="goods-item" v-for="(item, index) in list" :key="index">
 						<image class="goods-img" :src="item.image || item.associate.goods.img"></image>
 						<view class="lf-line-1 goods-title">{{ item.associate.goods.name }}</view>
-						<view class="goods-price">
+						<!-- <view class="goods-price">
 							<text>¥{{ item.associate.seckill_price }}</text>
 							<text>¥{{ item.associate.goods.sell_price }}</text>
-						</view>
+						</view> -->
+						<view class="goods-price1">¥{{ item.associate.seckill_price }}</view>
+						<view class="goods-price2">¥{{ item.associate.goods.sell_price }}</view>
 					</view>
 				</view>
 			</scroll-view>
@@ -101,15 +103,25 @@
 					color: #222222;
 					margin-top: 10rpx;
 				}
-				.goods-price>text:nth-child(1n){
+				// .goods-price>text:nth-child(1n){
+				// 	font-size: 28rpx;
+				// 	color: #F63434;
+				// 	font-weight: bold;
+				// }
+				// .goods-price>text:nth-child(2n){
+				// 	font-size: 24rpx;
+				// 	color: #777777;
+				// 	margin-left: 15rpx;
+				// 	text-decoration: line-through;
+				// }
+				.goods-price1{
 					font-size: 28rpx;
 					color: #F63434;
 					font-weight: bold;
 				}
-				.goods-price>text:nth-child(2n){
+				.goods-price2{
 					font-size: 24rpx;
 					color: #777777;
-					margin-left: 15rpx;
 					text-decoration: line-through;
 				}
 			}

pages/shop/goodsdetail.vue

@@ -137,7 +137,7 @@
 								</view>
 							</view>
 							<view>
-								<button class="head-btn" @click="makePhone()">
+								<button class="head-btn" @click="makePhoneCall(brand_detail.tel)">
 									<text class="lf-iconfont icon-kefuhdpi lf-font-24"></text>
 									<text class="lf-m-l-10">客服</text>
 								</button>
@@ -178,10 +178,10 @@
 				<!-- 吸底操作按钮 -->
 				<view class="lf-row-between fixed-bottom">
 					<view class="lf-flex lf-p-t-10 lf-p-b-10">
-						<view class="lf-flex-column lf-row-center icon-item" @click="makePhone()">
+						<button class="lf-flex-column lf-row-center icon-item" open-type="contact">
 							<text class="lf-iconfont icon-pinglun- icon-img"></text>
 							<view class="lf-m-t-1">客服</view>
-						</view>
+						</button>
 						<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
 							<text class="lf-iconfont icon-shoucang2 icon-img lf-color-price" v-if="is_collect"></text>
 							<text class="lf-iconfont icon-shoucang11 icon-img" v-else></text>
@@ -208,6 +208,23 @@
 					</view>
 				</view>
 				
+				<!-- 分享生成海报时弹出 -->
+				<view class="share-img-box" :class="share_img ? 'cur' : ''">
+				    <view class="imgs-box">
+						<view class="img">
+						    <image mode="widthFix" :src="shareImg"></image>
+						</view>
+						<view class="text">
+							保存图片后，可分享到朋友圈
+						</view>
+						<view class="save" :style="'background: ' + config.mainColor" @tap="downImg">
+							保存图片
+						</view>
+				        <!-- <i class="iconfont icon-delete" @tap="changeImg"></i> -->
+						<text class="lf-iconfont icon-status-error" @tap="changeImg" ></text>
+				    </view>
+				</view>
+				
 				<!-- 加入购物车、立即购买模态框选规格 -->
 				<u-popup v-model="show_popup" mode="bottom" :round="true" borderRadius="20">
 					<view class="popup-content">
@@ -294,7 +311,11 @@
 				goods_num: 1,
 				is_date_finish: false,
 				car_num: 0,
-				goods_content: ''
+				goods_content: '',
+				shareImg: '',
+				share_img: false,
+				show_share: false,
+				config: {mainColor: '#15716e'}
 			}
 		},
 		computed: {
@@ -368,11 +389,6 @@
 				        });
 				    });
 			},
-			makePhone() {
-				uni.makePhoneCall({
-				    phoneNumber: '114' //仅为示例
-				});
-			},
 			// 切换商品收藏
 			switchCollect(){
 				if(!this.token){
@@ -574,7 +590,136 @@
 			},
 			// 点击页面分享按钮
 			shareGraphic(){
-				this.getCreateShareImg();
+				// this.getCreateShareImg();
+				this.getShearImg();
+			},
+			// 获取分享图片
+			getShearImg() {
+			  wx.showLoading({
+			    title: "生成中",
+			    mask: true
+			  });
+			  this.$http.get({
+			    api: 'api/distribution/createMiniShareImg',
+			    header: {
+			      Authorization: this.token
+			    },
+			    data: {
+			      goods_id: this.goods_id
+			    }
+			  }).then(res => {
+			    if (res.statusCode == 200) {
+			      res = res.data;
+			
+			      if (res.status) {
+			        this.setData({
+			          shareImg: res.data.image
+			        });
+			
+			        setTimeout(() => {
+			            this.changeImg();
+					}, 100)
+			      } else {
+			        wx.showModal({
+			          content: res.message || '请求失败',
+			          showCancel: false
+			        });
+			      }
+			    } else {
+			      wx.showModal({
+			        content: '请求失败',
+			        showCancel: false
+			      });
+			    }
+			
+			    wx.hideLoading();
+			    this.changeShare();
+			  }).catch(rej => {
+			    wx.showModal({
+			      content: '内部错误',
+			      showCancel: false
+			    });
+			    wx.hideLoading();
+			    this.changeShare();
+			  });
+			},
+			// 弹出图片
+			changeImg() {
+			  this.share_img = !this.share_img;
+			},
+			// 弹出分享
+			changeShare() {
+			  this.setData({
+			    show_share: !this.show_share
+			  });
+			},
+			// 下载图片
+			downImg() {
+			  if (this.shareImg) {
+			    wx.showLoading({
+			      title: '正在下载',
+			      mask: true
+			    });
+			    this.$http.dowloadFile({
+			      api: this.shareImg
+			    }).then(res => {
+			      if (res.statusCode == 200) {
+			        wx.getSetting({
+			          success: ret => {
+			            // 如果之前没有授权
+			            if (!ret.authSetting['scope.writePhotosAlbum']) {
+			              wx.authorize({
+			                scope: 'scope.writePhotosAlbum',
+			                success: rej => {
+			                  this.saveImg(res.tempFilePath);
+			                },
+			                // 用户拒绝授权
+			                fail: ret => {
+			                  // this.setData({
+			                  //   is_refused: true
+			                  // });
+			                  wx.hideLoading();
+							  uni.showModal({
+							  	title: '温馨提示',
+								content: '由于您拒绝授权，保存图片失败！',
+								showCancel: false
+							  })
+			                }
+			              });
+			            } else {
+			              this.saveImg(res.tempFilePath);
+			            }
+			          }
+			        });
+			      } else {
+			        wx.hideLoading();
+			        wx.showToast({
+			          title: '下载图片失败',
+			          icon: 'none'
+			        });
+			      }
+			    }, err => {});
+			  }
+			},
+			// 保存图片
+			saveImg(path) {
+			  wx.saveImageToPhotosAlbum({
+			    filePath: path,
+			    success: res => {
+			      wx.hideLoading();
+				  wx.showToast({
+				    title: '保存图片成功',
+				    icon: 'success'
+				  }); 
+			    },
+			    fail: rej => {
+			      wx.hideLoading();
+			      wx.showToast({
+			        title: '保存图片失败',
+			        icon: 'none'
+			      });
+			    }
+			  });
 			},
 			//请求h5的图片接口
 			getCreateShareImg(){
@@ -732,6 +877,27 @@
 				}else{
 					return null;
 				}
+			},
+			setData: function (obj) {
+			  let that = this;
+			  let keys = [];
+			  let val, data;
+			  Object.keys(obj).forEach(function (key) {
+			    keys = key.split('.');
+			    val = obj[key];
+			    data = that.$data;
+			    keys.forEach(function (key2, index) {
+			      if (index + 1 == keys.length) {
+			        that.$set(data, key2, val);
+			      } else {
+			        if (!data[key2]) {
+			          that.$set(data, key2, {});
+			        }
+			      }
+			
+			      data = data[key2];
+			    });
+			  });
 			}
 		},
 		onShareAppMessage(){
@@ -1127,4 +1293,59 @@
 			margin-top: 62rpx;
 		}
 	}
+	
+	//分享到朋友圈弹出
+	.share-img-box {
+	  background:rgba(0,0,0,.8);
+	  position: fixed;
+	  bottom: 0;
+	  width: 100%;
+	  height: 0;
+	  z-index: 50;
+	  transition:all .3s linear;
+	
+	  .imgs-box {
+	    background: #F3F3F3;
+	    border-radius: 10px;
+	    margin:20px;
+	    overflow: hidden;
+	    .img{
+	      box-shadow:0px 4px 8px 0px rgba(155,155,155,0.5);
+	      border-radius: 6px;
+	      margin: 30px;
+	      box-sizing: border-box;
+	
+	      image{
+	        display: block;
+	        width: 100%;
+	      }
+	    }
+	    .text {
+	      text-align: center;
+	      margin-top: 22px;
+	      font-size: 12px;
+	      color: #9B9B9B;
+	    }
+	    .save {
+	      background: #15716e;
+	      height: 44px;
+	      line-height: 44px;
+	      color: #ffffff;
+	      text-align: center;
+	      border-radius: 10px;
+	      margin: 10px 20px;
+	    }
+	    i{
+	      position: absolute;
+	      top: 0px;
+	      right: 0px;
+	      color: #CCCCCC;
+	      font-size: 30px;
+	    }
+	  }
+	  &.cur{
+	    height: 100%;
+	
+	  }
+	}
 </style>