123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395 |
- <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" v-if="prizes.length && showPrizes">
- <view>
- <LuckyGrid ref="myLucky" width="590rpx" height="590rpx" :prizes="prizes" :buttons="buttons"
- :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
- </view>
- </view>
- <view class="usable-count">
- 您还有<text class="count">{{ usableCount }}</text>抽奖机会
- </view>
- </view>
- <view class="winners-list" v-if="winningList.length">
- <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 in winningList" :key="item.sa_awardmxid">
- <view v-if="item.createuserid" class="swiper-item u-line-2">
- {{ item.name ? item.name : '用户' + item.createuserid }} <text
- style="padding: 0 5px;">抽中了</text>{{ item.awardname }}
- </view>
- <view v-else></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: [],
- 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,
- loading: false,
- winningList: [],
- tips: '',
- showPrizes: true,
- }
- },
- methods: {
- init() {
- console.log("this.sa_awardid", this.sa_awardid)
- try {
- 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;
- let prizes = [
- { index: 0, x: 0, y: 0 },
- { index: 2, x: 2, y: 0 },
- { index: 6, x: 0, y: 2 },
- { index: 4, x: 2, y: 2 },
- { index: 1, x: 1, y: 0 },
- { index: 3, x: 2, y: 1 },
- { index: 5, x: 1, y: 2 },
- { index: 7, x: 0, y: 1 },
- ].map(v => {
- v.borderRadius = '20rpx';
- v.imgs = [{
- src: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405291716965428111B4602d616.webp',
- width: '50%',
- top: '20%'
- }]
- return v
- })
- res.data.forEach((v, i) => {
- v.imgs = v.attinfos.map(img => {
- return {
- src: img.url,
- width: '50%',
- top: '25%'
- }
- })
- prizes[i] = Object.assign(prizes[i], v);
- });
- this.prizes = prizes.sort((a, b) => {
- return a.index - b.index
- });
- })
- } catch (error) { }
- this.queryAwardCount();
- this.getWinningList();
- },
- startCallBack() {
- let that = this;
- if (this.tips) return uni.showToast({
- title: this.tips,
- icon: 'none',
- duration: 1500,
- });
- if (this.loading || this.usableCount == 0) return;
- this.loading = true;
- this.$refs.myLucky.play()
- that.$Http.basic({
- "content": {
- "sa_awardid": that.sa_awardid,
- "shareuserid": that.shareuserid,
- },
- "id": 20240514134002,
- }).then(res => {
- console.log('抽奖结果', res)
- if (this.cutoff(res.msg)) {
- this.showPrizes = false;
- setTimeout(() => {
- this.showPrizes = true;
- })
- that.queryAwardCount();
- that.getWinningList();
- return
- };
- const index = that.prizes.findIndex(v => v.sa_awarditemsid == res.data.sa_awarditemsid);
- that.$refs.myLucky.stop(index)
- that.queryAwardCount();
- that.getWinningList();
- setTimeout(() => {
- that.loading = false;
- that.showWinningResult(res.data, index);
- }, 5000);
- })
- },
- showWinningResult(data, index) {
- console.log("中奖结果", data)
- let that = this;
- uni.showModal({
- title: '恭喜您抽中',
- content: data.awardname,
- showCancel: false,
- confirmText: '选择地址',
- success: function ({ confirm }) {
- if (confirm) {
- uni.navigateTo({
- url: '/store/deliveryAddress/index'
- })
- that.$Http.selectAddress = (item) => {
- uni.showModal({
- title: '提示',
- content: `是否确定选择“${item.address}”作为收货地址?`,
- success: (success) => {
- if (success.confirm) that.$Http.basic({
- id: "2024052910464202",
- content: {
- sa_awardmxid: data.sa_awardmxid,
- name: item.name,
- phonenumber: item.phonenumber,
- province: item.province,
- city: item.city,
- county: item.county,
- address: item.address,
- }
- }).then(s => {
- if (that.cutoff(s.msg, '设置成功', true, '1000')) return;
- })
- },
- })
- }
- }
- },
- fail: (err) => {
- console.log(err)
- }
- });
- },
- getWinningList() {
- this.$Http.basic({
- "content": {
- "sa_awardid": this.sa_awardid,
- "pageNumber": 1,
- "pageSize": 20
- },
- "id": 20240514133902
- }).then(res => {
- console.log("中奖人员", res)
- if (this.cutoff(res.msg)) return;
- if (res.data.length < 7) {
- let len = res.data.length;
- for (let index = 0; index < (7 - len); index++) {
- res.data.push({})
- }
- }
- this.winningList = res.data;
- })
- },
- queryAwardCount() {
- if (uni.getStorageSync('userMsg').usertype == 99) {
- 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;
- })
- } else {
- this.tips = '内部人员不可参与抽奖';
- }
- },
- 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;
- }
- .usable-count {
- position: absolute;
- bottom: 15px;
- width: 100vw;
- text-align: center;
- font-family: Source Han Sans SC, Source Han Sans SC;
- font-weight: bold;
- font-size: 14px;
- color: #FFFFFF;
- .count {
- height: 29px;
- font-family: Source Han Sans SC, Source Han Sans SC;
- font-weight: 800;
- font-size: 20px;
- color: #FAD96D;
- padding: 0 10px;
- }
- }
- }
- .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>
|