modify: 优惠券条形码自适应

src/pages/couponDetail/couponDetail.js

@@ -25,7 +25,7 @@ wxService.page({
     })
     this.getCouponDetail(cardno)
     // 条形码
-    wxbarcode.barcode('barcode',cardno, 550, 150);
+    wxbarcode.barcode('barcode', cardno, 600, 180);
   },
 
   //  查询单个优惠券

src/pages/couponDetail/couponDetail.wxml

 <!--pages/userCenter.wxml-->
-<view class='page-couponDetail'>
+<!--<view class='page-couponDetail'>
   <view class='coupon-detail-content'>
     <view class='coupon-detail-header'>
       <view class='avatar-img'>
@@ -11,11 +11,28 @@
       <image src='/assets/imgs/line.png'></image>
     </view>
     <view class='qr-code'>
-     <!-- <view class='top-code'>987876786</view>-->
       <view class='code-img'>
         <canvas canvas-id="barcode" />
       </view>
       <view class='bottom-code'>{{cardno}}</view>
     </view>
   </view>
+</view>-->
+
+<view class="container-coupon page">
+  <view class="panel">
+    <view class="qrcode">
+      <view class='avatar-img'>
+        <image src='/assets/imgs/avatar.png'></image>
+      </view>
+      <view class='title fs-36'>{{couponDetailTitle}}</view>
+    </view>
+     <view class='line'>
+      <image src='/assets/imgs/line.png'></image>
+    </view>
+    <view class="barcode">
+      <canvas canvas-id="barcode" />
+    </view>
+    <view class='bottom-code'>{{cardno}}</view>
+  </view>
 </view>
\ No newline at end of file

src/pages/couponDetail/couponDetail.wxss

 /* pages/couponDetail/couponDetail.wxss */
-canvas{
-  height: 80px!important;
+@import './../../base/base.wxss';
+page {
+  background-color: #fff;
 }
-.coupon-detail-content{
-  width: 642rpx;
-  margin: 52rpx auto;
-  text-align: center;
-  box-shadow: 0 0 30rpx 10rpx rgba(0,0,0,0.1);
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
-.avatar-img image{
-  width: 81rpx;
-  height: 81rpx;
-  margin-top: 58rpx;
+
+.container-coupon {
+  padding-bottom: 10rpx;
 }
-.title{
-  color: #333333;
-  margin-top: 66rpx;
+
+.panel {
+  width:642rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+  margin: 52rpx 60rpx;
+  box-sizing: border-box;
+  border-radius: 10rpx;
+  background-color: #fff;
+  box-shadow: 0 0 30rpx 10rpx rgba(0,0,0,0.1);
 }
-.line image{
-  width: 642rpx;
-  height: 42rpx;
-  margin: 80rpx 0;
+
+.barcode {
+  display: flex;
+  height: 320rpx;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding:0 20rpx;
+  box-sizing: border-box;
 }
-.top-code{
-  font-size: 24rpx;
-  color: #999999;
+
+.barnum {
+  width: 670rpx;
+  height: 100rpx;
+  line-height: 100rpx;
+  font-size: 38rpx;
+  font-weight: bold;
+  text-align: center;
+  letter-spacing: 10rpx;
+  white-space: nowrap;
 }
-.code-img image{
+
+.barcode > canvas {
   width: 600rpx;
-  height: 150rpx;
+  height: 200rpx;  
 }
-.code-img{
-  margin-top: 30rpx;
-  margin-left: 10px;
+
+.qrcode {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
 }
+
 .bottom-code{
   font-size: 40rpx;
   color: #05c35b;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
   margin-top: 30rpx;
+  padding-bottom: 140rpx;
+}
+.avatar-img image{
+  width: 81rpx;
+  height: 81rpx;
+  margin-top: 58rpx;
 }
-.qr-code{
-  padding-bottom: 150rpx;
+.title{
+  color: #333333;
+  margin-top: 66rpx;
+}
+.line image{
+  width: 100%;
+  height: 42rpx;
+  margin: 40rpx 0;
 }

src/pages/userCenter/userCenter.js

@@ -60,6 +60,7 @@ wxService.page({
     this.getMemberPointInfo()
     // 优惠券数量
     this.getMemberCouponInfo()
+   
   },
   // 查询积分信息
   getMemberPointInfo(){

src/project.config.json

-
 {
 	"description": "项目配置文件",
 	"packOptions": {
@@ -15,8 +14,8 @@
 	"compileType": "miniprogram",
 	"libVersion": "2.6.6",
 	"appid": "wxc3b64b09b1d3dfc2",
-  "tempappid_wx":"wxc3b64b09b1d3dfc2",
-  "tempappid_711":"wx358b56af62edbde1",
+	"tempappid_wx": "wxc3b64b09b1d3dfc2",
+	"tempappid_711": "wx358b56af62edbde1",
 	"projectname": "7-Eleven",
 	"debugOptions": {
 		"hidedInDevtools": []
@@ -40,7 +39,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 12,
+			"current": 3,
 			"list": [
 				{
 					"id": -1,
@@ -61,10 +60,10 @@
 					"query": ""
 				},
 				{
-					"id": 6,
+					"id": 3,
 					"name": "券码详情页",
 					"pathName": "pages/couponDetail/couponDetail",
-					"query": ""
+					"query": "cardno=24390355190533807720&title=新券"
 				},
 				{
 					"id": 7,

src/utils/util.js

@@ -47,7 +47,7 @@ function getAccountInfo() {
   return accountInfo
 }
 
-/***
+/**
  * 判断用户滑动
  * 左滑还是右滑
  */
@@ -62,6 +62,26 @@ function getTouchData(endX, endY, startX, startY) {
 }
 
 /** 
+ * 全面屏
+*/
+function aspectRatio(h,w) {
+  let viewStyle = {}
+  let originalScale = h/w // view宽高比
+  wxService.getSystemInfo().then(res=>{
+    let windowscale = res.windowHeight/res.windowWidth
+    if(originalScale < windowscale){
+      viewStyle.width = res.windowWidth
+      viewStyle.height = (res.windowWidth * h) / w;
+    } else {
+      viewStyle.width = (res.windowHeight * w) / h
+      viewStyle.height = res.windowHeight
+    }
+  })
+  return viewStyle;
+}
+
+
+/** 
  * 解析 url 参数
 */
 function parseUrl(query){
@@ -241,5 +261,6 @@ module.exports = {
   formatNumber: formatNumber,
   logger: new Logger(),
   getTouchData,
-  getAccountInfo
+  getAccountInfo,
+  aspectRatio
 }