船员公众号
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

230 lines
4.7 KiB

<template>
<view class="buyOne">
<view class="buyOne-con" v-for="(a,i) in categoryList" :key="i">
<view class="name">{{a.name}}
<view class="r" :class="a.is_buy ==1?'r-on':''" @click="a.is_buy!=0?'':openPage(1,a,1)">{{a.is_buy ==1?'已购买':'¥'+a.price}}</view>
</view>
<view class="ul" v-for="(b,idx) in a.children" :key="idx">
<view class="a">
<view class="l">
{{b.name}}
</view>
<view class="r" :class="b.is_buy ==1?'r-on':''" @click="b.is_buy!=0?'':openPage(1,a,2,idx)">{{b.is_buy ==1?'已购买':'¥'+b.price}}</view>
</view>
<view class="b">
<view class="li" v-for="(c,idx1) in b.children" :key="idx1">
<view class="l">
{{c.name}}
</view>
<view class="r" @click="c.is_buy!=0?'':openPage(1,b,3,idx,idx1)" :class="c.is_buy ==1?'r-on':''">{{c.is_buy ==1?'已购买':'¥'+c.price}}</view>
</view>
</view>
</view>
</view>
<view class="buyOne-bottom">
<image @click="openPage(2)" :src="staticUrl('/static/buy-01.png')"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
categoryList: []
};
},
onShow(o) {
this.getList();
},
methods: {
openPage(index,a,type,idx,idx1) {
if(index == 1){
if(!uni.getStorageSync("userToken")){
uni.navigateTo({
url: "/pages/login/login"
})
return ;
}
a.idx = idx
a.idx1 = idx1
a.type = type
console.log(index,a,type,idx,idx1);
uni.setStorageSync("teamInfo",a)
uni.navigateTo({
url: "/pages/question/buyTwo"
})
}else if(index == 2){
if(!uni.getStorageSync('userToken')){
uni.navigateTo({
url: "/pages/login/login"
})
return ;
}
uni.navigateTo({
url: "/pages/question/list"
})
}
},
//获取列表
async getList() {
uni.showLoading({
title: "加载中"
})
const { code, data, msg } = await this.$api.categoryTreeList({})
if (code == 200) {
uni.hideLoading();
this.categoryList =data;
} else {
uni.hideLoading()
uni.showToast({
icon: "none",
title: msg
})
}
}
}
}
</script>
<style lang="scss" scoped>
.buyOne{
width: 100%;
padding: 0 25rpx 280rpx;
overflow: hidden;
box-sizing: border-box;
&-con {
margin-top: 20rpx;
background: #FFFFFF;
border-radius: 20rpx;
box-sizing: border-box;
padding: 0 30rpx;
.name{
font-size: 34rpx;
font-weight: bold;
padding-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
.r {
font-weight: normal;
width: 100rpx;
height: 40rpx;
line-height: 40rpx;
background: #FFFFFF;
border: 1px solid #F01B1B;
border-radius: 40rpx;
font-size: 22rpx;
color: #F01B1B;
display: block;
text-align: center;
margin-left: 20rpx;
&-on {
width: 100rpx;
padding: 0;
border-color: #EAEAEA;
background: #EAEAEA;
color: #222222;
}
}
}
.a {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #EAEAEA;
padding: 20rpx 0;
.l {
display: flex;
align-items: center;
font-size: 30rpx;
font-weight: 400;
color: #222222;
line-height: 40rpx;
image {
width: 40rpx;
height: 40rpx;
margin-right: 18rpx;
}
}
.r {
height: 40rpx;
width: 100rpx;
line-height: 40rpx;
background: #FFFFFF;
border: 1px solid #F01B1B;
border-radius: 40rpx;
font-size: 22rpx;
color: #F01B1B;
display: block;
text-align: center;
margin-left: 20rpx;
&-on {
width: 100rpx;
padding: 0;
border-color: #EAEAEA;
background: #EAEAEA;
color: #222222;
}
}
}
.b {
.li{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
}
.l {
display: flex;
align-items: center;
font-size: 30rpx;
font-weight: 400;
color: #222222;
line-height: 40rpx;
image {
width: 40rpx;
height: 40rpx;
margin-right: 18rpx;
}
}
.r {
height: 40rpx;
width: 100rpx;
line-height: 40rpx;
background: #FFFFFF;
border: 1px solid #F01B1B;
border-radius: 40rpx;
font-size: 22rpx;
color: #F01B1B;
display: block;
text-align: center;
margin-left: 20rpx;
&-on {
width: 100rpx;
padding: 0;
border-color: #EAEAEA;
background: #EAEAEA;
color: #222222;
}
}
}
}
&-bottom{
position: fixed;
bottom:0;
width: 100%;
text-align: right;
image{
width: 151rpx;
height: 151rpx;
margin-right: 5%;
}
}
}
</style>