完成优惠券组件开发

components/canvas/HomeBanner.vue

+<template>
+      <!-- <canvas
+      :style="{ width: '100%', height: '400rpx' }"
+      canvas-id="canvasId"
+    ></canvas> -->
+    <view>
+      <image :src="imgsrc" :style="{ width: '100%', height: '400rpx' }"></image>
+    </view>
+</template>
+
+<script>
+import Utils from '@/utils/downfiles.js';
+export default {
+  data() {
+    return {
+      context: {},
+      picList: [],
+      imgsrc:'../../static/imgs/20220720-115535_001.png',
+    };
+  },
+  // onload生命周期
+  mounted () {
+    //首先获取屏幕宽度
+    // let device=this.getData();
+    // let width=device.windowWidth;
+    //然后需要确定比例，设计图一般都是750的屏幕，这里是375px
+    // let 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(); 
+    // return
+    for(let i = 1;i <=37;i++){
+      let src = ''
+      if (i < 10) {
+        src = `https://songclound.oss-cn-hongkong.aliyuncs.com/2022/07/20/20220720-115535_00${i}.png`;
+      } else if (10 <= i < 100) {
+        src = `https://songclound.oss-cn-hongkong.aliyuncs.com/2022/07/20/20220720-115535_0${i}.png`;
+      }
+      this.picList.push(src)
+    }
+
+    // return
+    Utils.downfiles(this.picList,7).then(res=>{
+      this.picList = res
+      this.startCanvas()
+    })
+  },
+  methods: {
+
+		getData(){
+			var result = 0;
+			uni.getSystemInfo({
+					success: function(res) {
+						result = res
+					}
+			});
+			return result;
+    },
+    startCanvas() {
+      console.log("图片下载完成啦！开始动画效果！");
+      let i = 0;
+      setInterval(() => {
+        if (i < 37) {
+          const src = this.picList[i];
+          this.imgsrc = src
+          i++;
+        } else {
+          i = 0;
+        }
+      }, 30);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.canva{
+  z-index: 0;
+}
+</style>
\ No newline at end of file

mineSubPackage/pages/coupon/index.vue

@@ -27,12 +27,12 @@
       <swiper :current="current" class="swiper">
         <swiper-item>
           <view class="list">
-            <Ticket />
+            <Ticket/>
           </view>
         </swiper-item>
         <swiper-item>
           <view class="list">
-            <Ticket v-for="(item,index) in nouserList" :key="index" :info="item"/>
+            <Ticket v-for="(item,index) in nouserList" :key="index" :info="item" />
           </view>
         </swiper-item>
       </swiper>
@@ -62,7 +62,7 @@ export default {
     for(let i=0;i<2;i++){
       this.nouserList.push({
           status:2, // 0可使用 1不可使用/已过期/已失效
-          couponType:2, // 0满减 1折扣 2抵扣
+          couponType:0, // 0满减 1折扣 2抵扣
           typeDesc:'最大字数最大字', // 左上角文案描述
           mjPrice:'30', // 满减金额
           zkPrice:'7', // 折扣金额

pages/menu/menu.vue

@@ -4,6 +4,7 @@
 			<image :src="img"/>
 			<!-- <ImageLoader :defaultSrc="'../../static/imgs/shouyezhanweitu.png'" :realSrc="img" width="100%" height="400rpx"/> -->
 			<!-- <video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4" /> -->
+			<!-- <HomeBanner /> -->
 			<view class="shop-info" :style="'top:100rpx'">
 				<view class="shop-box">
 					<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
@@ -63,6 +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 User from '@/request/user'
 import ShopCar from '../../components/shopCar/shopCar.vue'
 import Utils from '@/utils/utils'
@@ -286,6 +288,7 @@ export default {
 	min-height: 100vh;
 
 	.shop-info {
+		z-index: 100;
 		position: absolute;
 		left: 32rpx;
 		color: #FFFFFF;

utils/downfiles.js

+export default {
+    // imgUrls 需要下载的全部图片  num 每次同时下载张数（最大为7）
+    downfiles(imgUrls, num = 3) {
+        return new Promise((resolve, reject) => {
+            let lsit = []
+            let imgUrlsLength = imgUrls.length
+
+            let downList = []
+            let spliceIndex = 0
+            const spliceFunction = () => {
+                downList[spliceIndex] = imgUrls.splice(0, num)
+                if (imgUrls.length == 0) {
+                    return
+                } else {
+                    spliceIndex++
+                    spliceFunction()
+                }
+            }
+            // 切割url数组
+            spliceFunction()
+
+            const final = []
+            let downIndex = 0
+            const downFunction = (arr) => {
+                const list = []
+                console.log(arr[downIndex])
+                if(arr[downIndex]){
+                    arr[downIndex].map((item,index) => {
+                        uni.downloadFile({
+                            url: item,
+                            success: (res) => {
+                                list.push({url:res.tempFilePath,index:index})
+                                if (list.length === arr[downIndex].length) {
+                                    downIndex++
+                                    // 对每一批下载完成的图片进行重新排序 避免动画混乱
+                                    list.sort((a,b)=>{
+                                        return a.index - b.index
+                                    })
+                                    list.map(item=>{
+                                        final.push(item.url)
+                                    })
+                                    downFunction(downList)
+                                } else {
+                                    return
+                                }
+                            }
+                        });
+                    })
+                }
+                if(final.length===imgUrlsLength){
+                    resolve(final)
+                }
+            }
+            // 执行批量下载任务
+            downFunction(downList)
+        })
+    }
+}
\ No newline at end of file