166 lines
3.2 KiB
Vue
166 lines
3.2 KiB
Vue
<script setup>
|
|
/**
|
|
* 卷轴商城
|
|
*/
|
|
import api from '@/api/index.js'
|
|
import {
|
|
useStore,
|
|
} from 'vuex'
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
getCurrentInstance
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
} from '@dcloudio/uni-app'
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
// 支付密码
|
|
import payPwd from '@/components/mine/payPwd'
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
//
|
|
const store = useStore()
|
|
//我的卷轴列表
|
|
const dataList = ref([])
|
|
// 需要操作的卷轴
|
|
const scrollItem = ref({})
|
|
// 用户信息
|
|
const userinfo = computed(() => {
|
|
let result = store.state.userinfo
|
|
return result
|
|
})
|
|
|
|
onLoad(() => {
|
|
scrollList()
|
|
})
|
|
|
|
// 查看我购买的卷轴
|
|
function scrollList() {
|
|
api.intergral.scrollList({}).then(rs => {
|
|
if (rs.code == 200) {
|
|
dataList.value = rs.data
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
// 购买卷轴
|
|
function buyScroll(secondPassword) {
|
|
api.intergral.buyScroll({
|
|
query: {
|
|
// 二级密码
|
|
secondPassword: secondPassword,
|
|
},
|
|
data: {
|
|
// 卷轴id
|
|
scrollConfigId: scrollItem.value.scrollConfigInfoId,
|
|
// 付款类型
|
|
payType: 1,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code === 200) {
|
|
util.alert('购买成功')
|
|
// util.getUserinfo()
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击卷轴购买
|
|
* @param {Object} item
|
|
*/
|
|
function handleItem(item) {
|
|
scrollItem.value = item
|
|
//
|
|
proxy.$refs.payPwdRef.open()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="appbw">
|
|
<navigator url="/pages/index/integral">
|
|
<view class="board rows oh mt20 mlr30 plr30 cfff f32 br20">
|
|
<image class="image" src="/static/integral.png" mode="aspectFit" />
|
|
<view class="f1">我的卷轴</view>
|
|
<uni-icons type="right" color="#fff" size="40rpx" />
|
|
</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.scrollName}}</view>
|
|
<view class="">最多持有量: {{item.scrollLimit}}</view>
|
|
<!-- 当前持有量： 3 -->
|
|
</view>
|
|
<view class="rows mt40">
|
|
<view class="f44">{{item.scrollSeedMoney}}积分</view>
|
|
<view class="btn black f1 ml45" @click="handleItem(item)">{{item.price}}购买</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="fill" style="height: 60rpx;"></view>
|
|
</view>
|
|
|
|
<!-- 购买卷轴 -->
|
|
<payPwd ref="payPwdRef" @confirm="buyScroll" :price="scrollItem.scrollSeedMoney" unitKey="balance" />
|
|
</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> |