Refactor(ALL):Vue3同步调整为Vue2

pkg-video/views/lottery.vue

@@ -16,14 +16,17 @@
         <view class="btn-close" @click="onlyClose"/>
         <view class="img-box flex flex-col ai-center" v-if="diceResult['prizeImage']">
           <image style="width: 240rpx;height: 240rpx" :src="diceResult['prizeImage']" mode="scaleToFill"/>
-          <image style="width: 80rpx;height: 80rpx;margin-top: 40rpx;" :src="diceResult['diceImage']"
+          <image style="width: 80rpx;height: 80rpx;margin-top: 34rpx;" :src="diceResult['diceImage']"
                  mode="scaleToFill"/>
-          <view class="one-t bold" style="width:300rpx;margin-top: 40rpx;color:#F7E7B2">
+          <view class="one-t bold tc" style="width:300rpx;margin-top: 46rpx;color:#F7E7B2;font-size: 30rpx"
+                v-if="diceResult['isHit']===0">感谢您的参与
+          </view>
+          <view class="one-t bold tc" style="width:320rpx;margin-top: 46rpx;color:#F7E7B2;font-size: 30rpx" v-else>
             获得{{ diceResult['prizeName'] }}一份
           </view>
         </view>
         <image class="btn-result" style="width: 240rpx;height: 68rpx" :src="webUrl+'/20240125205521152611.png'"
-               mode="scaleToFill" @click="closeResultModel"/>
+               mode="scaleToFill" @click="closeResultModel" v-if="diceResult['isHit']!==0"/>
       </view>
 
       <view class="dialog-take flex jc-center" :style="{'backgroundImage':`url(${webUrl}/20240124210904824337.png)`}"
@@ -43,13 +46,19 @@
     <view class="btn-submit" @click="onSubmit"/>
     <view class="today-limit">{{ lotteryDetail.todayLimit }}</view>
 
-    <scroll-view class="prize-list flex" scroll-x="true" enable-flex="true">
-      <view class="item flex flex-0 jc-center ai-center"
-            :style="{'backgroundImage':`url(${webUrl}/20240122212856857899.png)`}"
-            v-for="(item,index) in lotteryDetail.prizeList" :key="index">
-        <image style="width: 120rpx;height: 120rpx" :src="item['prizeImage']" mode="scaleToFill"/>
-      </view>
-    </scroll-view>
+    <view class="prize-list">
+      <!-- mould 图文 模式 left -->
+      <gbro-marquee broadcastType='mould' @changeEvent='navToCoupons' direction="left" :viewHeight="300"
+                    :broadcastIconIsDisplay="!true" :touchEvent="true" :imgdata='imgData'
+                    :broadcastStyle='broadcastStyle2' style="width: 100%;margin-top: 20rpx;">
+        <block v-for="c in 2" :key="c">  <!--在小程序里遇到一个坑不能使用两个slot 所有统一复制一份做衔接 -->
+          <view class="flex flex-0 jc-center ai-center" style="width: 164rpx;height: 164rpx;background-size: 164rpx 164rpx;background-repeat: no-repeat;" :style="{'backgroundImage':`url(${webUrl}/20240122212856857899.png)`}" v-for="(item,index) in imgData" :key="index">
+            <image style="width: 120rpx;height: 120rpx" :src="item" mode="scaleToFill"></image>
+          </view>
+        </block>
+      </gbro-marquee>
+
+    </view>
 
     <view class="hit-box flex" @click="navToCoupons">
       <view class="img-first flex jc-center ai-center"
@@ -63,111 +72,136 @@
   </view>
 </template>
 
-<script setup>
-import {onMounted, ref} from '@vue/composition-api'
-import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
+<script>
 import {getDetail, getPrize, takePrize} from "@/api/lottery";
+import gbroMarquee from "@/components/gbro-marquee/marquee.vue";
 
-onMounted(() => {
-  init()
-})
+export default {
+  components: {gbroMarquee},
+  data() {
+    return {
+      ready: false,
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      lotteryDetail: {
+        diceConfig: {},
+        prizeList: [],
+        todayHitPrizeList: [],
+        todayLimit: 0
+      },
+      diceImg: '',
+      diceResult: {
+        prizeName: '',
+        prizeImage: '',
+        diceImage: '',
+        diceValue: 0
+      },
+      showDialog: false,
+      showRules: false,
+      showResult: false,
+      showTake: false,
+      broadcastStyle2: {
+        speed: 20,
+        font_size: "32", //字体大小(rpx)
+        text_color: "#333", //字体颜色
+        back_color: "red", //背景色
+      },
+      imgData: []
+    }
+  },
+  computed: {
+    moveDistance: function () {
+      const elWidth = this.lotteryDetail['prizeList'].length * 164
+      const diff = elWidth > 576 ? elWidth - 576 : 0
+      return uni.$u.getPx(diff + 'rpx')
+    }
+  },
+  onLoad() {
+    this.init()
+  },
+  methods: {
+    init() {
+      getDetail().then(res => {
+        if (res.success) {
+          this.lotteryDetail = res.data
+          this.diceImg = this.lotteryDetail.diceConfig['diceDefaultImage']
+          this.ready = true
+          setTimeout(()=>{
+            this.imgData = res.data['prizeList']?.map(item => item['prizeImage'])
+          },1000)
+        }
+      })
+    },
 
-const showDialog = ref(false)
-const showRules = ref(false)
-const showResult = ref(false)
-const showTake = ref(false)
+    onSubmit() {
+      getPrize().then(res => {
+        if (res.success) {
+          this.diceResult = res.data
+          const diceIndex = this.lotteryDetail.diceConfig['diceValues'].findIndex(item => item['diceValue'] === this.diceResult.diceValue)
+          this.diceImg = this.lotteryDetail.diceConfig['diceValues'][diceIndex]['diceValueGif']
+          setTimeout(() => {
+            this.showDialog = true
+            this.showResult = true
+            this.diceImg = this.lotteryDetail.diceConfig['diceValues'][diceIndex]['diceValueImage']
+            setTimeout(() => {
+              this.init()
+            }, 1000)
+          }, 2800)
+        }
+      })
+    },
 
-const ready = ref(false)
-const lotteryDetail = ref({
-  diceConfig: {},
-  prizeList: [],
-  todayHitPrizeList: [],
-  todayLimit: 0
-})
+    navToLog() {
+      uni.navigateTo({url: './lottery-log'})
+    },
 
-const navToLog = () => {
-  uni.navigateTo({url: './lottery-log'})
-}
+    navToCoupons() {
+      uni.navigateTo({url: '/pkg_user/views/myCoupons'})
+    },
 
+    openRulesModel() {
+      this.showDialog = true
+      this.showRules = true
+    },
 
-const openRulesModel = () => {
-  showDialog.value = true
-  showRules.value = true
-}
-const closeRulesModel = () => {
-  showDialog.value = false
-  showRules.value = false
-}
+    closeRulesModel() {
+      this.showDialog = false
+      this.showRules = false
+    },
 
-const init = async () => {
-  const res = await getDetail()
-  if (res.success) {
-    lotteryDetail.value = res.data
-    diceImg.value = lotteryDetail.value.diceConfig['diceDefaultImage']
-    ready.value = true
+    onlyClose() {
+      this.showResult = false
+      this.showDialog = false
+    },
+
+    closeResultModel() {
+      if (this.diceResult['prizeType'] === 4) {
+        this.showResult = false
+        this.showDialog = false
+        return
+      }
+      if (this.diceResult['prizeType'] === 1) {
+        this.showResult = false
+        this.showDialog = false
+        uni.navigateTo({
+          url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + this.diceResult['id']
+        })
+        return
+      }
+
+      takePrize(this.diceResult.id).then(res => {
+        if (res.success) {
+          this.showResult = false
+          this.showTake = true
+        }
+      })
+    },
+
+    closeTakeModel() {
+      this.showTake = false
+      this.showDialog = false
+    }
   }
 }
-
-const diceIndex = ref(0)
-const diceImg = ref('')
-const onSubmit = async () => {
-  const res = await getPrize()
-  if (res.success) diceResult.value = res.data
-
-  diceIndex.value = lotteryDetail.value.diceConfig['diceValues'].findIndex(item => item['diceValue'] === diceResult.value.diceValue)
-  diceImg.value = lotteryDetail.value.diceConfig['diceValues'][diceIndex.value]['diceValueGif']
-  setTimeout(() => {
-    diceImg.value = lotteryDetail.value.diceConfig['diceValues'][diceIndex.value]['diceValueImage']
-    setTimeout(() => {
-      init()
-      showDialog.value = true
-      showResult.value = true
-    }, 1000)
-  }, 3000)
-}
-
-const diceResult = ref({
-  prizeName: '',
-  prizeImage: '',
-  diceImage: '',
-  diceValue: 0
-})
-
-const navToCoupons = () => {
-  uni.navigateTo({url: '/pkg_user/views/myCoupons'})
-}
-
-const onlyClose = () => {
-  showResult.value = false
-  showDialog.value = false
-}
-
-const closeResultModel = async () => {
-  if (diceResult.value['prizeType'] === 4) {
-    showResult.value = false
-    showDialog.value = false
-    return
-  }
-  if (diceResult.value['prizeType'] === 1) {
-    showResult.value = false
-    showDialog.value = false
-    uni.navigateTo({
-      url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + diceResult.value['id']
-    })
-    return
-  }
-
-  const res = await takePrize(diceResult.value.id)
-  if (res.success) {
-    showResult.value = false
-    showTake.value = true
-  }
-}
-
-const closeTakeModel = () => {
-  showTake.value = false
-  showDialog.value = false
-}
 </script>
 
 <style scoped lang="less">
@@ -232,8 +266,8 @@ image {
 .dialog-result {
   position: fixed;
   left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  top: 200rpx;
+  transform: translate(-50%, 0);
   width: 476rpx;
   height: 856rpx;
   box-sizing: border-box;
@@ -252,7 +286,7 @@ image {
   .img-box {
     position: absolute;
     left: 50%;
-    top: 345rpx;
+    top: 344rpx;
     transform: translate(-50%, 0);
   }
 
@@ -314,13 +348,7 @@ image {
   top: 888rpx;
   width: 576rpx;
   height: 164rpx;
-
-  .item {
-    width: 164rpx;
-    height: 164rpx;
-    background-size: 164rpx 164rpx;
-    background-repeat: no-repeat;
-  }
+  overflow: hidden;
 }
 
 .hit-box {