完成结算页优惠卷开发

components/OrderQrCode/index.vue

@@ -4,6 +4,9 @@
 			<view class="bigBox" :style="{'margin-top':'-20rpx'}" @touchstart="start" @touchmove.stop.prevent="move" @touchend="end" ref="op">
 				<scroll-view class="scroll-view" :scroll-y="true">
 					<div class="order_flow" >
+						<div class="close_icon" @click="close">
+							<u-icon name="close-circle" color="#666666" size="28" :top="-3"></u-icon>
+						</div>
 						<div class="code">取单码 {{ orderInfo.orderNum }}</div>
 						<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->
 						<div class="qr_code_readly" v-if="!showMask">
@@ -213,6 +216,7 @@ export default {
 .order_flow {
 	background: #FFFFFF;
 	margin: 32rpx;
+	position: relative;
 	padding-top: 54rpx;
 	padding-bottom: 62rpx;
 	.status_text {
@@ -331,6 +335,13 @@ export default {
 		}
 	}
 
+	.close_icon {
+		width: 40rpx;
+		height: 40rpx;
+		top: 0rpx;
+		right: 8rpx;
+		position: absolute
+	}
 
 
 }

components/canvas/HomeBanner.vue

 <template>
-      <!-- <canvas
+      <canvas
       :style="{ width: '100%', height: '400rpx' }"
       canvas-id="canvasId"
-    ></canvas> -->
-    <view>
+    ></canvas>
+    <!-- <view>
       <image :src="imgsrc" :style="{ width: '100%', height: '400rpx' }"></image>
-    </view>
+    </view> -->
 </template>
 
 <script>
@@ -16,20 +16,21 @@ export default {
       context: {},
       picList: [],
       imgsrc:'../../static/imgs/20220720-115535_001.png',
+      wid:0
     };
   },
   // onload生命周期
   mounted () {
     //首先获取屏幕宽度
-    // let device=this.getData();
-    // let width=device.windowWidth;
+    let device=this.getData();
+    let width=device.windowWidth;
     //然后需要确定比例，设计图一般都是750的屏幕，这里是375px
-    // let wid=width / 375
+    this.wid=width / 375
+    
     // 第一次加载的占位的图片
-    // console.log(123)
-    // this.context = uni.createCanvasContext("canvasId", this);
-    // this.context.drawImage("../../static/imgs/20220720-115535_001.png", 0, 0, 375*wid, 200*wid);
-    // this.context.draw(); 
+    this.context = uni.createCanvasContext("canvasId", this);
+    this.context.drawImage("../../static/imgs/20220720-115535_001.png", 0, 0, 375*this.wid, 200*this.wid);
+    this.context.draw(); 
     // return
     for(let i = 1;i <=37;i++){
       let src = ''
@@ -64,7 +65,10 @@ export default {
       setInterval(() => {
         if (i < 37) {
           const src = this.picList[i];
-          this.imgsrc = src
+          // this.imgsrc = src
+          this.context = uni.createCanvasContext("canvasId", this);
+          this.context.drawImage(src, 0, 0, 375*this.wid, 200*this.wid);
+          this.context.draw(); 
           i++;
         } else {
           i = 0;

orderSubPackage/pages/coupon/index.vue

 <template>
-  <view>结算页面优惠券</view>
+  <view class="bigBox">
+    <Tabs :list='list1' @changeTab="changeTab" :newIndex="current" />
+    <view class="ticketList">
+      <swiper :current="current" class="swiper" @change="swiperChange">
+        <swiper-item>
+          <view class="list">
+             <Ticket v-for="(item,index) in nouserList" :key="index" :info="item" />
+          </view>
+        </swiper-item>
+        <swiper-item>
+          <view class="list">
+            <Ticket v-for="(item,index) in nouserList" :key="index" :info="item" />
+          </view>
+        </swiper-item>
+      </swiper>
+    </view>
+    <view class="usebtn">
+      <view class="content">
+        <view class="text">已选择1张HOOLOO卷，可优惠<span class="money">￥5</span></view>
+        <view>
+          <view class="btnView">确认</view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
+import Ticket from '@/components/Ticket/index.vue'
+import Tabs from '@/components/Tabs/index.vue'
 export default {
-
-}
+  components: {Ticket,Tabs},
+  data() {
+    return {
+      list1: [
+        {
+          name: "可使用",
+        },
+        {
+          name: "不可使用",
+        },
+      ],
+      nouserList:[],
+      current: 0,
+      actionIndx:0
+    };
+  },
+  mounted(){
+    for(let i=0;i<15;i++){
+      this.nouserList.push({
+          status:1, // 0可使用 1不可使用/已过期/已失效
+          couponType:0, // 0满减 1折扣 2抵扣
+          typeDesc:'最大字数最大字', // 左上角文案描述
+          mjPrice:'30', // 满减金额
+          zkPrice:'7', // 折扣金额
+          dkPrice:'免单', // 抵扣金额
+          priceDesc:'满130可用', // 条件描述
+          checkStatus:false, // 优惠券选中状态
+          title:'最大字数最大字数最大', // 优惠券标题
+          time:['2022.07.24.17:20'], // 过期时间
+          shopList:['全门店可用'], // 可用门店
+          goodList:['全品类可用'], // 可用品类 
+          useScence:['小程序下单可用'], // 使用场景
+          useDesc:['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'], // 使用说明
+          zkRule:'整单最高抵扣50元', // 折扣规则
+          reson:'不可与已勾选券叠加使用' // 不可使用原因
+      })
+    }
+  },
+  methods: {
+    changeTab(current) {
+      this.current = current;
+    },
+    swiperChange(val){
+      this.current = val.detail.current;
+    }
+  },
+};
 </script>
 
-<style>
+<style lang="scss" scoped>
+.bigBox {
+
+  .ticketList {
+    // margin-bottom: 176rpx;
+    .swiper {
+      background: #F8F8F8;
+      height: calc(100vh - 64rpx - 176rpx);
+    .list{
+      height: 100%;
+      padding: 0rpx 32rpx;
+      overflow-y: scroll;
+    }
+  }
+  }
+
+
+  .usebtn {
+    width: 100%;
+    height: 176rpx;
+    position: fixed;
+    bottom: 0;
+    background: #FFFFFF;
 
-</style>
+    .content {
\ No newline at end of file
+      height: 100rpx;
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .text {
+        font-size: 28rpx;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        margin-left: 30rpx;
+
+        .money {
+          font-size: 28rpx;
+          font-family: Futura-Medium, Futura;
+          font-weight: 500;
+          color: #FF63BA;
+          margin-left: 4rpx;
+        }
+      }
+
+      .btnView {
+        width: 200rpx;
+        height: 100rpx;
+        line-height: 100rpx;
+        text-align: center;
+        background: #0050F6;
+        font-size: 28rpx;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 100rpx;
+      }
+    }
+  }
+}
+</style>

pages/menu/menu.vue

@@ -64,7 +64,7 @@
 import MenuAssembly from '@/components/menuAssembly'
 import ImageLoader from '@/components/ImageLoader/index.vue'
 import AreaPicker from '@/components/AreaPicker/index.vue'
-// import HomeBanner from '@/components/canvas/HomeBanner.vue'
+import HomeBanner from '@/components/canvas/HomeBanner.vue'
 import User from '@/request/user'
 import ShopCar from '../../components/shopCar/shopCar.vue'
 import Utils from '@/utils/utils'
@@ -75,7 +75,7 @@ import Order from '@/request/order'
 import OrderQrCode from '@/components/OrderQrCode'
 import QRCode from '@/utils/qrCode'
 export default {
-	components: { ShopCar, MenuAssembly, OrderQrCode, AreaPicker, ImageLoader },
+	components: { ShopCar, MenuAssembly, OrderQrCode, AreaPicker, ImageLoader, HomeBanner },
 	data() {
 		return {
 			shopInfo: { name: '请选择' },// 店铺信息
@@ -159,7 +159,7 @@ export default {
 				this.buied = true;
 				this.orderInfo = data.data
 			} else {
-				this.buied = false
+				this.buied = true
 			}
 		},
 		openQrcode() {
@@ -170,7 +170,7 @@ export default {
 			}
 
 			new QRCode('myQrcode2', {
-				text: this.orderInfo.pickCode,
+				text: 111,
 				width: 141,	//canvas 画布的宽
 				height: 141,	//canvas 画布的高
 				padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0