329 lines
8.4 KiB
Vue
329 lines
8.4 KiB
Vue
<template>
|
||
<view>
|
||
<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
|
||
<view style="width: 100%;height: 15px;"></view>
|
||
<scroll-view scroll-y>
|
||
<view class="content">
|
||
<view class="center">
|
||
您收藏的
|
||
</view>
|
||
<block v-if="coinList.length > 0">
|
||
<view class="center coin-title">
|
||
硬币名称：{{coinList[curSwiperIndex].name}}
|
||
</view>
|
||
<view class="center" style="font-size: 14px;font-weight: 400;">
|
||
ID：{{coinList[curSwiperIndex].id}}
|
||
</view>
|
||
|
||
<!-- 硬币swiper -->
|
||
<z-swiper ref="zSwiper" v-model="coinList" style="padding-top: 15px;height: 180px;" @swiper="swiperCoin" :options="{slidesPerView : 2,centeredSlides : true, effect: 'coverflow'}">
|
||
<z-swiper-item v-for="(item,index) in coinList" key="coin1">
|
||
<view class="coin-item">
|
||
<image :src="item.img" mode="heightFix"></image>
|
||
</view>
|
||
</z-swiper-item>
|
||
</z-swiper>
|
||
<!-- 产出地址 -->
|
||
<view class="center coin-address">
|
||
<view class="">
|
||
产出地址
|
||
</view>
|
||
<view class="">
|
||
{{coinList[curSwiperIndex].address}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的收藏 -->
|
||
<view class="collect">
|
||
<view class="collect-text">
|
||
我的收藏
|
||
</view>
|
||
<scroll-view scroll-y style="height: 165px;">
|
||
<view class="mycoin-list">
|
||
<view v-for="(item,index) in coinList" key="coin2" class="center"
|
||
style="flex-direction: column;">
|
||
<view class="mycoin-warp" :class="{'mycoin-warp-check': curCoin.id === item.id}" @click="switchCoin(index, item)">
|
||
<view class="mycoin-item">
|
||
<image :src="item.img2" mode="widthFix"></image>
|
||
</view>
|
||
<image v-if="item.pay_status === 1" class="coinstar" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/mycoin-star.png" mode="widthFix"></image>
|
||
</view>
|
||
<view style="font-size: 8px;padding-bottom: 10px;padding-top: 5px;">
|
||
{{dateFormat(item.date)}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="btm-bck">
|
||
<text v-if="JSON.stringify(curCoin) === '{}'" class="duihuan-disable">兑换奖励</text>
|
||
<text v-else-if="curCoin.apply_status === 0" class="duihuan-available" @click="duihuan">兑换奖励</text>
|
||
<text v-else class="duihuan-disable">{{curCoin.pay_status === 0 ? '已申请，审核后自动发放' : '已兑换'}}</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="null-collect center">
|
||
暂无收藏品
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
<view style="position: absolute;bottom: 0;left: 0;width: 100%;display: flex;">
|
||
<image style="width: 100%;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/bottom-bck.png" mode="widthFix"></image>
|
||
</view>
|
||
</touch-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'mycoin',
|
||
data() {
|
||
return {
|
||
curSwiperIndex: 0
|
||
}
|
||
},
|
||
methods: {
|
||
swiperCoin() {
|
||
let that = this
|
||
this.$refs.zSwiper.swiper.on("slideChange", (swiper) => {
|
||
that.curSwiperIndex = swiper.activeIndex;
|
||
})
|
||
},
|
||
slideTo(i) {
|
||
this.$refs.zSwiper.swiper.slideTo(i, 1000, false)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<script setup>
|
||
const app = getApp()
|
||
import {
|
||
ref,
|
||
defineExpose,
|
||
computed,
|
||
nextTick,
|
||
getCurrentInstance
|
||
} from 'vue'
|
||
const {ctx}=getCurrentInstance()
|
||
const popup = ref() // ref组件
|
||
|
||
const coinList = ref([]);
|
||
const curCoin = ref({});
|
||
const test = () => {
|
||
console.log('这里是setup test');
|
||
}
|
||
const switchCoin = (index, item) => {
|
||
curCoin.value = item;
|
||
ctx.slideTo(index);
|
||
}
|
||
const duihuan = () => {
|
||
if (JSON.stringify(curCoin.value) === '{}') return;
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/coin/pay',
|
||
data: {
|
||
coin_id: curCoin.value.id
|
||
},
|
||
method: 'POST',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
uni.showToast({
|
||
title: '已申请兑换奖励',
|
||
icon: 'none'
|
||
});
|
||
curCoin.value.apply_status = 1;
|
||
loadData();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const dateFormat = (val) => {
|
||
let d = new Date(val)
|
||
return `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()}`
|
||
}
|
||
const loadData = (isOpen = false) => {
|
||
if (isOpen) {
|
||
uni.showLoading();
|
||
}
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/coin/list',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
console.log(res.data)
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
let coin = res.data.data[i]
|
||
if (coin.type === 1) {
|
||
coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/gold.png'
|
||
coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/gold.png'
|
||
} else if (coin.type === 2) {
|
||
coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/silver.png'
|
||
coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/silver.png'
|
||
} else if (coin.type === 3) {
|
||
coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/copper.png'
|
||
coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/copper.png'
|
||
}
|
||
res.data.data[i] = coin
|
||
}
|
||
coinList.value = res.data.data;
|
||
if (isOpen) {
|
||
popup.value.open();
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
complete() {
|
||
if (isOpen) {
|
||
uni.hideLoading();
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const open = () => {
|
||
loadData(true);
|
||
}
|
||
defineExpose({
|
||
open
|
||
}) // 暴露方法
|
||
</script>
|
||
|
||
<style scoped>
|
||
.duihuan-available {
|
||
font-size: 13px;
|
||
margin-right: 10px;
|
||
background-image: linear-gradient(180deg, #C5FF99 0%, #3DFEB7 100%);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
.duihuan-disable {
|
||
font-size: 13px;
|
||
margin-right: 10px;
|
||
color: #FFFFFF80;
|
||
}
|
||
|
||
.coinstar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 18px !important;
|
||
height: auto;
|
||
}
|
||
.mycoin-item image {
|
||
width: 38px;
|
||
}
|
||
.mycoin-warp {
|
||
width: 58px;
|
||
height: 58px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
border-radius: 16px;
|
||
position: relative;
|
||
}
|
||
.mycoin-warp-check {
|
||
background: linear-gradient(315deg, #00EADC 0%, #75FF83 100%);;
|
||
}
|
||
.mycoin-item {
|
||
background-color: #fff;
|
||
width: 52px;
|
||
height: 52px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 14px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.mycoin-list {
|
||
padding: 5px 30px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||
}
|
||
|
||
.btm-bck {
|
||
width: 100%;
|
||
height: 32px;
|
||
background-color: #000;
|
||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/collect-bottom-bck.png') no-repeat;
|
||
background-size: 180rpx;
|
||
background-color: #000;
|
||
background-position: left 0 bottom 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.collect-text {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
padding: 10px 15px;
|
||
}
|
||
|
||
.collect {
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
margin: 0 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/collect-bck.png') no-repeat,
|
||
linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
|
||
background-size: 550rpx;
|
||
background-position: right 0 top 0;
|
||
}
|
||
|
||
.coin-address {
|
||
padding: 15px;
|
||
font-size: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.coin-item image {
|
||
height: 180px;
|
||
}
|
||
|
||
.coin-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.coin-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.content {
|
||
height: calc(100% - 45px);
|
||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/top-bck.png') no-repeat;
|
||
background-position: top;
|
||
background-size: 750rpx;
|
||
padding: 15px 0;
|
||
}
|
||
|
||
scroll-view {
|
||
height: calc(100% - 15px);
|
||
z-index: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.null-collect {
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 100%;
|
||
}
|
||
</style> |