149 lines
2.8 KiB
Vue
149 lines
2.8 KiB
Vue
|
<script setup>
|
||
|
|
/**
|
||
|
|
* 卷轴商城
|
||
|
|
*/
|
||
|
|
import intergralApi from '@/api/intergral.js';
|
||
|
|
import {
|
||
|
|
useStore,
|
||
|
|
} from 'vuex'
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
reactive,
|
||
|
|
computed,
|
||
|
|
} from 'vue'
|
||
|
|
import {
|
||
|
|
onLoad,
|
||
|
|
} from '@dcloudio/uni-app'
|
||
|
|
// 工具库
|
||
|
|
import util from '@/common/js/util';
|
||
|
|
//
|
||
|
|
const store = useStore()
|
||
|
|
//我的卷轴列表
|
||
|
|
const dataList = ref([])
|
||
|
|
// 用户信息
|
||
|
|
const userinfo = computed(() => {
|
||
|
|
let result = store.state.userinfo
|
||
|
|
return result
|
||
|
|
})
|
||
|
|
|
||
|
|
onLoad(() => {
|
||
|
|
scrollList()
|
||
|
|
})
|
||
|
|
|
||
|
|
// 查看我购买的卷轴
|
||
|
|
function scrollList() {
|
||
|
|
intergralApi.scrollList({}).then(rs => {
|
||
|
|
if (rs.code == 200) {
|
||
|
|
dataList.value = rs.data
|
||
|
|
return
|
||
|
|
}
|
||
|
|
util.alert({
|
||
|
|
content: rs.msg,
|
||
|
|
showCancel: false,
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 购买卷轴
|
||
|
|
function buyScroll(item) {
|
||
|
|
console.log('item', item)
|
||
|
|
//
|
||
|
|
util.alert({
|
||
|
|
content: `确认花费${item.price}购买卷轴`,
|
||
|
|
}).then(rs => {
|
||
|
|
if (rs.confirm) intergralApi.buyScroll({
|
||
|
|
query: {
|
||
|
|
// 卷轴id
|
||
|
|
scrollId: item.id,
|
||
|
|
}
|
||
|
|
}).then(rs => {
|
||
|
|
if (rs.code === 200) {
|
||
|
|
util.alert('购买成功')
|
||
|
|
util.getUserinfo()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
util.alert({
|
||
|
|
content: rs.msg,
|
||
|
|
showCancel: false,
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="appbw">
|
||
|
|
<navigator url="/pages/index/integral">
|
||
|
|
<view class="board rows oh mt20 mlr30 plr30 cfff f32 br20">
|
||
|
|
<view class="score" v-if="0">
|
||
|
|
<view class="title">待释放积分</view>
|
||
|
|
<view class="value mt5 ptb5 plr20 tac bfff br10">{{userinfo.score || '0'}}</view>
|
||
|
|
</view>
|
||
|
|
<image class="image" src="/static/integral.png" mode="aspectFit" />
|
||
|
|
<view>
|
||
|
|
<uni-icons type="right" color="#fff" size="40rpx" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</navigator>
|
||
|
|
|
||
|
|
<!-- 内容 -->
|
||
|
|
<view class="container">
|
||
|
|
|
||
|
|
<view class="list mtb20 mlr30 ptb50 plr40 br20 c333 f24" v-for="(item, index) in dataList" :key="item.id">
|
||
|
|
<view class="rows">
|
||
|
|
<view class="c333 f36">{{item.name}}</view>
|
||
|
|
<!-- <view class="">最多持有量: 6 当前持有量: 3</view> -->
|
||
|
|
</view>
|
||
|
|
<view class="rows mt40">
|
||
|
|
<view class="f44">{{item.score}}积分</view>
|
||
|
|
<view class="btn black f1 ml45" @click="buyScroll(item)">{{item.price}}购买</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="fill" style="height: 60rpx;"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
//
|
||
|
|
.board {
|
||
|
|
height: 160rpx;
|
||
|
|
background-image: linear-gradient(103deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
|
||
|
|
|
||
|
|
// 卷轴图片
|
||
|
|
.image {
|
||
|
|
width: 286.06rpx;
|
||
|
|
height: 286.22rpx;
|
||
|
|
transform: rotate(-50deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.score {
|
||
|
|
|
||
|
|
.value {
|
||
|
|
background-color: #fff;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
|
||
|
|
.list:nth-child(1) {
|
||
|
|
background-color: #F4F4F4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list:nth-child(2) {
|
||
|
|
background-color: #E4FBFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list:nth-child(3) {
|
||
|
|
background-color: #CACDFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list:nth-child(4) {
|
||
|
|
background-color: #F4CAFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|