后端生成海报，并开始物流方式

common/apiurl.js

@@ -62,6 +62,11 @@ const apiurl = {
 		url: '/goods/memberGetById',
 		type: 'get'
 	},
+	// 商品海报
+	getPoster: {
+		url: '/goods/getPoster',
+		type: 'put'
+	},
 	// 商品评价
 	commentList: {
 		url: '/goods/commentList',

manifest.json

@@ -60,7 +60,10 @@
         "permission" : {
             "scope.userLocation" : {
                 "desc" : "你的位置信息将用于小程序位置接口的效果展示"
-            }
+            },
+			"scope.writePhotosAlbum": {
+			     "desc": "保存图片到相册"
+			}
         },
         "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],
         "lazyCodeLoading" : "requiredComponents"

shopping/productdetails.vue

@@ -136,39 +136,22 @@
 					<view class="close-wrap" @click="posterShow=false">
 						<u-icon name="close-circle" color="#fff" size="56rpx"></u-icon>
 					</view>
-					<view class="poster" :style="posterStyle" id="poster" ref="poster" >
-						<img class="posterBg" :src="staticUrl+'/img/poster-bg.png'" alt="">
-						<img class="placard" :src="details.placard" alt="">
-						<!-- <u--image  :showLoading="true" :src="details.placard" width="100%" mode="widthFix"></u--image> -->
-						<view class="bottom u-flex u-row-between">
-							<view class="left">
-								<view class="price">
-									¥<text class="num">{{details.salePrice}}</text>
-								</view>
-								<view class="goodsName ellipsis-2">{{details.goodsName}}</view>
-								<view class="slogan" v-if="details.slogan" :style="{color:details.sloganColor||'#00A447'}">{{details.slogan}}</view>
-							</view>
-							<view class="right">
-								<image :src="details.qrcodeUrl" style="width: 108rpx;height: 108rpx"></image>
-								<view class="imgTip">长按扫码购买</view>
-							</view>
-						</view>
+					<view class="poster" id="poster" ref="poster" >
+						<u--image :showLoading="true" :src="posterSrc" width="100%" height="65vh" mode="aspectFit"></u--image>
 					</view>
-					<view class="poster-btn" @click="savePoster">保存图片</view>
+					<!-- savePoster -->
+					<view class="poster-btn" @click="saveImage">保存图片</view>
 				</view>
 			</view>
 		</u-popup>
-		<xWxmlToCanvas ref="xWxmlToCanvas" :hide="true" :width="300" :height="544" :xStyle="posterStyle" :xWxml="wxml">
-		</xWxmlToCanvas>
 		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
 
 <script>
-	import xWxmlToCanvas from '@/components/x-wxml-to-canvas/x-wxml-to-canvas';
 	export default {
 		components: {
-			xWxmlToCanvas
+			
 		},
 		data() {
 			return {
@@ -183,93 +166,23 @@
 				},
 				hasAddr:false,
 				shareShow:false,
-				posterShow:true,
+				posterShow:false,
 				mode:'aspectFill',
 				wxml:'',
-				posterStyle:{
-					poster:{
-						with:300,
-						height:544,
-						position: 'relative',
-						paddingBottom: 90,
-						backgroundColor:'#fff',
-					},
-					posterBg:{
-						position: 'absolute',
-						left: 0,
-						bottom: 0,
-						right: 0,
-						width: 300,
-						height:544,
-					},
-					placard:{
-						position: 'relative',
-						with:300,
-						height:387,
-					},
-					bottom:{
-						width:320,
-						height:157,
-						position: 'relative',
-						zIndex: 20,
-						flexDirection: 'row',
-						justifyContent: 'space-between',
-					},
-					left:{
-						width:125,
-						height:157,
-						paddingLeft:20,
-						marginRight: 58,
-					},
-					price:{
-						width:125,
-						height:40,
-						marginBottom: 10,
-					},
-					rmb:{
-						fontSize: 12,
-						color: '#FF3538',
-						position:'relative',
-						top:6
-					},
-					num:{
-						fontSize: 20,
-						color: '#FF3538',
-					},
-					goodsName:{
-						width:125,
-						height:40,
-						fontSize: 30,
-						color: '#333',
-						marginBottom: 16,
-					},
-					slogan:{
-						fontSize: 26,
-						fontWeight: 600,
-						lineHeight: 37,
-					},
-					right:{
-						textAlign: 'center',
-					},
-					imgTip:{
-						width:60,
-						height:14,
-						marginTop: 12,
-						fontSize: 20,
-						fontWeight: 400,
-						color: '#333333',
-						lineHeight: 28,
-					},
-					qrcode:{
-						width: 108,
-						height:108
-					}
-				},
+				posterStyle:{},
 				posterSrc:''
 			}
 		},
 		onLoad(page) {
 			this.id = page.id;
+			if(page.goodsId){
+				this.id = page.goodsId;
+			}
+			const scene = decodeURIComponent(page.scene);
+			scene&&uni.setStorage({
+				key:'scene',
+				data:scene
+			});
 			// console.log('this.id',this.id);
 			this.getDetails(this.id);
 		},
@@ -306,30 +219,8 @@
 			getDetails(id){
 				this.$u.api.memberGoodDetails({id:id}).then(res=>{
 					this.loadingPage = false;
-					console.log('res',res.data);
+					// console.log('res',res.data);
 					this.details = res.data;
-					// <image class="posterBg" src="${this.staticUrl}/img/poster-bg.png"></image>
-					// <image class="placard" src="${this.details.placard||''}"></image>
-					this.wxml = `
-						<view class="poster" id="poster" ref="poster" >
-							<image class="posterBg" src="${this.staticUrl}/img/poster-bg.png"></image>
-							<image class="placard" src="${this.details.slideImgList[0]}"></image>
-							<view class="bottom">
-								<view class="left">
-									<view class="price">
-										<text class="rmb">¥   </text>
-										<text class="num">${this.details.salePrice}</text>
-									</view>
-									<view class="goodsName">${this.details.goodsName}</view>
-									<view class="slogan" style="color:${this.details.sloganColor||'#00A447'}">${this.details.slogan}</view>
-								</view>
-								<view class="right">
-									<image class="qrcode" src="${this.details.qrcodeUrl||''}"></image>
-									<view class="imgTip">长按扫码购买</view>
-								</view>
-							</view>
-						</view>
-					`;
 					if(!res.data.slideImgList&&res.data.mainImg){
 						this.details.slideImgList = [];
 						this.details.slideImgList.push(res.data.mainImg)
@@ -504,32 +395,81 @@
 			getPoster(){
 				this.posterShow = true;
 				this.shareShow = false;
-			},
-			savePoster(){
-				console.log('savePoster',this.wxml);
-				this.$refs.xWxmlToCanvas.renderToCanvas() //渲染至canvas
-				this.getCanvasImage();
-			},
-			canvasToTempFilePath() {//生成图片
-				this.$refs.xWxmlToCanvas.canvasToTempFilePath().then(res => {
-					this.posterSrc = res;
-				});
-			},
-			getCanvasImage() {//获取图片
-				this.$refs.xWxmlToCanvas.getCanvasImage().then(res => {
-					this.posterSrc = res;
-					console.log('posterSrc',this.posterSrc);
-					// this.saveImageToPhotosAlbum()
-				});
-			},
-			saveImageToPhotosAlbum() {//下载图片
-				if (!this.posterSrc) return uni.showToast({
-					title: '未获取路径',
-					icon: 'none'
+				this.$u.api.getPoster({goodsId:this.id}).then(res=>{
+					this.posterSrc = res.data.imageUrl;
+					// console.log('getPoster',res.data);
+				}).catch(err=>{
+					console.log('getPoster',err);
 				})
-				console.log('wxml',this.wxml);
-				this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum(this.posterSrc)
 			},
+			saveImage() {
+				let that = this;
+					uni.showLoading({
+						title: '保存中'
+					});
+			      uni.downloadFile({
+			        url: this.posterSrc,
+			        success(res) {
+			          if (res.statusCode === 200) {
+			            uni.saveImageToPhotosAlbum({
+			              filePath: res.tempFilePath,
+			              success() {
+			                uni.showToast({
+			                  title: '保存到相册成功',
+			                  icon: 'success'
+			                });
+			              },
+			              fail(err) {
+							  console.log('保存图片失败',err);
+			                if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
+								uni.getSetting({
+								  success(res) {
+									if (!res.authSetting['scope.writePhotosAlbum']) {
+									  uni.showModal({
+										title: '提示',
+										content: '您还没有授权访问相册，请前往设置页面打开权限。',
+										confirmText: '去设置',
+										success(res) {
+										  if (res.confirm) {
+											uni.openSetting();
+										  }
+										}
+									  });
+									} else {
+									  uni.showToast({
+										title: '保存图片失败',
+										icon: 'none'
+									  });
+									}
+								  }
+								});
+							  } else {
+								uni.showToast({
+								  title: '保存图片失败',
+								  icon: 'none'
+								});
+							}
+			              },
+						  complete() {
+						  	uni.hideLoading();
+							that.posterShow = false;
+						  }
+			            });
+			          } else {
+			            uni.showToast({
+			              title: '下载图片失败',
+			              icon: 'none'
+			            });
+			          }
+			        },
+			        fail() {
+			          uni.showToast({
+			            title: '下载图片失败',
+			            icon: 'none'
+			          });
+			        }
+			      });
+			    },
 			// 海报相关结束
 		}
 	}
@@ -704,8 +644,8 @@
 	}
 	.poster{
 		position: relative;
-		padding-bottom: 90rpx;
-		background-color: #fff;
+		// padding-bottom: 90rpx;
+		background-color: transparent;
 		.posterBg{
 			position: absolute;
 			left: 0;

shopping/submitorder.vue

@@ -8,6 +8,16 @@
 			 :safeAreaInsetTop="true"
 		>
 		</u-navbar>
+	<!-- 	<view class="page-wrap receive-way u-flex">
+			<view class="til">
+				提货方式
+			</view>
+			<view class="way-item u-flex" @click="selectReceiveWay(index)" :class="{select:index==selectReceiveIndex}" v-for="(item,index) in receiveWayList" :key="item">
+				<text class="icon"></text>
+				<text class="text">{{item|filterLogisticsType}}</text>
+			</view>
+		</view> -->
+		 <!-- v-if="logisticsType!=1" -->
         <view class="addr page-wrap u-flex u-row-between">
         	<view class="left">
         		<view class="top">
@@ -18,6 +28,36 @@
         	</view>
 			<u-icon name="arrow-right" color="#676767" size="20" @click="selectAddr"></u-icon>
         </view>
+		<!-- <view class="page-wrap pickup-info" v-else>
+			<view class="item u-flex u-row-between">
+				<view class="left">
+					提货人：
+					<text>张小娴</text>
+					<text>15534567778</text>
+				</view>
+				<view class="right">
+					<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
+				</view>
+			</view>
+			<view class="item u-flex u-row-between">
+				<view class="left">
+					预约提货时间：
+					<text>2023年12月23日  15:00:00</text>
+				</view>
+				<view class="right">
+					<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
+				</view>
+			</view>
+			<view class="item u-flex u-row-between">
+				<view class="left">
+					自提地点：
+					<text>贵州省贵阳市南明区河滨街道茅…：</text>
+				</view>
+				<view class="right">
+					<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
+				</view>
+			</view>
+		</view> -->
 		<!-- <view class="payway page-wrap u-flex u-row-between">
 			<view class="left">支付方式</view>
 			<view class="u-flex">
@@ -137,6 +177,10 @@
 				userTotalBalance:null,//用户总余额
 				userTotalCredit:null,//用户总积分
 				orderTotalCredit:null,//订单需要的总积分
+				receiveWayList:[],//
+				selectReceiveIndex:0,
+				logisticsType:0,//物流方式默认值
+				pickupInfo:{}
             }
         },
 		onLoad(page) {
@@ -170,6 +214,14 @@
 			}
 			// console.log('cartGoods===',this.cartGoods);
 		},
+		watch: {
+		  selectReceiveIndex: {
+		    handler: function(newValue, oldValue) {
+		      this.logisticsType = this.receiveWayList[newValue];
+		    },
+		    immediate: true
+		  }
+		},
 		computed: {
 			totalWeight() {
 			  let that = this;
@@ -260,7 +312,9 @@
 					payAmount, 
 					userTotalBalance, 
 					userTotalCredit, 
+					logisticsType,
 					orderTotalCredit } = jsonData || {};
+				this.receiveWayList = logisticsType.split(",");//支持的物流方式
 				console.log('orderTotalCredit',orderTotalCredit);
 				this.orderInfo = jsonData;
 				this.receive = receive;
@@ -278,6 +332,7 @@
 				let param = {
 					receiveId:this.receive.id,
 					distribution:this.distribution,
+					logisticsType:this.logisticsType,
 				};
 				if(this.fromPage == 'creditOrder'){
 					orderType = 2
@@ -312,6 +367,11 @@
 						})
 					},
 				});
+			},
+			selectReceiveWay(index){
+				this.selectReceiveIndex = index;
+				console.log('selectReceiveWay index',index);
+				console.log('selectReceiveWay',this.receiveWayList[index]);
 			}
         }
     }
@@ -443,4 +503,44 @@
 		}
 	}
 }
+.receive-way{
+	margin-top: 20rpx;
+	font-size: 30rpx;
+	font-weight: 400;
+	color: #333333;
+	.til{
+		
+	}
+	.way-item{
+		margin-left: 50rpx;
+		.icon{
+			width: 30rpx;
+			height: 30rpx;
+			border-radius: 50%;
+			box-sizing: border-box;
+			border: 2px solid #ccc;
+			margin-right: 10rpx;
+		}
+		&.select{
+			.icon{
+				background-color: #00A447;
+				border-color: #00A447;
+			}
+		}
+	}
+	
+}
+.pickup-info{
+	padding: 0 30rpx;
+	.item{
+		padding: 30rpx 0;
+		font-size: 30rpx;
+		font-weight: 400;
+		color: #333333;
+		line-height: 42rpx;
+		&:not(:last-of-type){
+			border-bottom: 1px solid #eee;
+		}
+	}
+}
 </style>

utils/filter.js

@@ -66,6 +66,12 @@ Vue.filter("rateText", function(val) {
 	return rateList[val-1]
 });
 
+// 支持的物流方式
+Vue.filter("filterLogisticsType", function(val) {	
+	let logisticsType = ['邮寄', '自提', '同城配送']
+	return logisticsType[val]
+});
+
 // js手机号码中间4位变星星
 Vue.filter("hidePhoneNumber", function(val) {	
 	return val.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");