|
|
@@ -0,0 +1,248 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+ <view class="lottery-box">
|
|
|
+ <navigator class="my-list" url="/cloud/winningNews/index">
|
|
|
+ 我的奖品
|
|
|
+ </navigator>
|
|
|
+ <image class="bg-image"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716860202553Be55ba55.webp" />
|
|
|
+ <view class="lottery">
|
|
|
+ <view>
|
|
|
+ <LuckyGrid ref="myLucky" width="590rpx" height="590rpx" :prizes="prizes" :buttons="buttons"
|
|
|
+ :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="winners-list">
|
|
|
+ <image class="image"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716863577428B1faf5081.webp"
|
|
|
+ mode="widthFix" />
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">
|
|
|
+ <view class="text">
|
|
|
+ 抽奖名单
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <swiper class="swiper" autoplay easing-function="linear" interval="1000" duration="1000" circular vertical
|
|
|
+ display-multiple-items="7">
|
|
|
+ <swiper-item v-for="(item, index) in 20" :key="index">
|
|
|
+ <view class="swiper-item u-line-2">
|
|
|
+ {{ item }}df sdf 、
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid'
|
|
|
+export default {
|
|
|
+ components: { LuckyGrid },
|
|
|
+ props: {
|
|
|
+ sa_awardid: {
|
|
|
+ type: [Number || String]
|
|
|
+ },
|
|
|
+ shareuserid: {
|
|
|
+ type: [Number || String]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ prizes: [
|
|
|
+ { x: 0, y: 0, borderRadius: '20rpx' },
|
|
|
+ { x: 2, y: 0, borderRadius: '20rpx' },
|
|
|
+ { x: 0, y: 2, borderRadius: '20rpx' },
|
|
|
+ { x: 2, y: 2, borderRadius: '20rpx' },
|
|
|
+ { x: 1, y: 0, borderRadius: '20rpx' },
|
|
|
+ { x: 2, y: 1, borderRadius: '20rpx' },
|
|
|
+ { x: 1, y: 2, borderRadius: '20rpx' },
|
|
|
+ { x: 0, y: 1, borderRadius: '20rpx' },
|
|
|
+ ],
|
|
|
+ buttons: [{
|
|
|
+ background: 'rgba(0,0,0,0)',
|
|
|
+ x: 1, y: 1,
|
|
|
+ imgs: [{
|
|
|
+ src: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716861339513B3a575413.webp',
|
|
|
+ width: '183.34rpx',
|
|
|
+ height: '183.34rpx',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ defaultStyle: {
|
|
|
+ background: '#FFFFFF',
|
|
|
+ width: '183.34rpx',
|
|
|
+ height: '183.34rpx',
|
|
|
+ },
|
|
|
+ usableCount: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ console.log("this.sa_awardid", this.sa_awardid)
|
|
|
+ this.$Http.basic({
|
|
|
+ "id": 20240514131402,
|
|
|
+ content: {
|
|
|
+ "sa_awardid": this.sa_awardid,
|
|
|
+ "where": {
|
|
|
+ "condition": "",
|
|
|
+ "type": ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log("奖品列表", res)
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$Http.basic({
|
|
|
+ "classname": "sysmanage.develop.datafunction.datafunction",
|
|
|
+ "method": "execute",
|
|
|
+ "content": {
|
|
|
+ "functionname": "queryAwardCount",
|
|
|
+ "parameter": {
|
|
|
+ "sa_awardid": this.sa_awardid
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log("抽奖可用次数", res)
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ this.usableCount = res.data.length ? res.data[0].count : 0;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ startCallBack() {
|
|
|
+ console.log("开始抽奖")
|
|
|
+ this.$refs.myLucky.play()
|
|
|
+ setTimeout(() => {
|
|
|
+ // 假设后端返回的中奖索引是0
|
|
|
+ const index = 0
|
|
|
+ // 调用stop停止旋转并传递中奖索引
|
|
|
+ this.$refs.myLucky.stop(index)
|
|
|
+ }, 3000)
|
|
|
+ },
|
|
|
+ endCallBack(prize) {
|
|
|
+ console.log("抽到的奖品", prize)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.box {
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: linear-gradient(90deg, #FE5A46 0%, #F11F46 100%);
|
|
|
+
|
|
|
+ .lottery-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 511px;
|
|
|
+
|
|
|
+ .my-list {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 0;
|
|
|
+ width: 86px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(180deg, #FAD96D 0%, #FFC300 4%, #FFCD2B 16%, #FFDF77 42%, #FFD241 70%, #FFC300 94%, #FC9228 100%);
|
|
|
+ border-radius: 0px 20px 20px 0px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #C30D23;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-image {
|
|
|
+ position: absolute;
|
|
|
+ width: 100vw;
|
|
|
+ height: 511px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .lottery {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 2;
|
|
|
+ top: 140px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .winners-list {
|
|
|
+ width: 100vw;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 20px;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 355px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+ height: 29px;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0;
|
|
|
+ width: 80px;
|
|
|
+ line-height: 29px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333333;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0;
|
|
|
+ width: 80px;
|
|
|
+ height: 8px;
|
|
|
+ background: #FAD96D;
|
|
|
+ border-radius: 5px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 15px 20px;
|
|
|
+ width: 669.7672675rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
