bnyer
/
bnyer-cloud-tiktok
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

feat 会员list接口对接

feature-1.1
da da 3 years ago
parent
9765367638
commit
bf2b4cc291
2 changed files with 106 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      api/userInfo.js
  2. 208
      pages/userInfo/vip/vip.vue

9
api/userInfo.js
View File

@ -1,6 +1,7 @@
import request from '@/utils/request' import request from '@/utils/request'
const serviceTitle = '/img' const serviceTitle = '/img'
const prefix = '/img/mini/tiktok' const prefix = '/img/mini/tiktok'
const prefix_vip = '/img/mini/vip/'
//GET 传参需要用 params //GET 传参需要用 params
//POST 传参需要用 data //POST 传参需要用 data
@ -12,3 +13,11 @@ export function listTiktokCollection(data) {
data: data data: data
}) })
} }
//获取会员list
export function queryUserVipList() {
return request({
url: `${serviceTitle}${prefix}/queryUserVipList`,
method: 'get',
})
}

208
pages/userInfo/vip/vip.vue
View File

@ -15,47 +15,19 @@
</view> </view>
<view class="vip-box"> <view class="vip-box">
<view class="vip-box__item item-active"> <view class="vip-box__item" :class="{'item-active':active == index}" @click="change(index)" v-for="(item,index) in vipList" :key="index">
<view class="title"> <view class="title">
1年 {{item.vipName}}
</view> </view>
<view class="price"> <view class="price">
<text class="price-unit">¥</text> 189 <text class="price-unit">¥</text> {{item.price}}
</view> </view>
<view class="o-price"> <view class="o-price">
¥388 {{item.originPrice}}
</view> </view>
<view class="save-box"> <view class="save-box">
立省60元 立省{{item.originPrice - item.price}}元
</view> </view>
</view>
<view class="vip-box__item">
<view class="title">
1年
</view>
<view class="price">
<text class="price-unit">¥</text> 189
</view>
<view class="o-price">
¥388
</view>
<view class="save-box">
立省60元
</view>
</view>
<view class="vip-box__item">
<view class="title">
1年
</view>
<view class="price">
<text class="price-unit">¥</text> 189
</view>
<view class="o-price">
¥388
</view>
<view class="save-box">
立省60元
</view>
</view> </view>
</view> </view>
@ -66,30 +38,39 @@
</template> </template>
<script> <script>
import {
queryUserVipList
} from '@/api/userInfo.js'
export default { export default {
data() { data() {
return { return {
userInfo: null userInfo: null,
vipList:[],
active:0
} }
}, },
methods: { methods: {
async getVipList() {
const {data} = await queryUserVipList();
this.vipList = data.data
console.log(this.vipList)
},
change(index){
this.active = index
}
}, },
onShow() { onShow() {
this.userInfo = uni.getStorageSync('userInfo') this.userInfo = uni.getStorageSync('userInfo')
}, },
created() { created() {
if (this.userInfo) { if (!this.userInfo) {
uni.navigateTo({ uni.navigateBack()
url: url uni.showToast({
}); title: '请先登录',
} else { icon: 'none'
uni.navigateBack()
uni.showToast({
title: '请先登录',
icon: 'none'
}) })
} }
this.getVipList()
} }
} }
</script> </script>
@ -102,73 +83,78 @@
} }
.container { .container {
padding: 30rpx; padding: 30rpx;
background: #fff; background: #fff;
.vip-box { .vip-box {
margin: 30px 0; margin: 30px 0;
@include flex(center,space-between); @include flex(center, space-between);
.vip-box__item { .vip-box__item {
width: 30%; width: 30%;
height: 300rpx; height: 300rpx;
padding: 20rpx; padding: 20rpx;
@include flex; @include flex;
flex-direction: column; flex-direction: column;
color: #000; color: #000;
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 30rpx; border-radius: 30rpx;
&>view { &>view {
margin-bottom: 15rpx; margin-bottom: 15rpx;
} }
.title { .title {
font-weight: bold; font-weight: bold;
font-size: 38rpx; font-size: 30rpx;
} }
.price { .price {
font-weight: bold; font-weight: bold;
font-size: 48rpx; font-size: 48rpx;
color: #1991fd; color: #1991fd;
.price-unit{ .price-unit {
font-size: 24rpx font-size: 24rpx
} }
}
.o-price {
color: #1991fd;
font-size: 26rpx;
text-decoration: line-through;
}
.save-box {
border-radius: 30rpx;
width: 140rpx;
height: 50rpx;
background-color: #e8f4ff;
font-size: 24rpx;
color: #68c2ff;
@include flex;
}
}
.item-active {
border: none;
background: linear-gradient(to bottom right, #68c2ff, #0684fe);
.price,
.title {
color: #fff;
} }
.o-price{ .o-price{
color: #eee; color: #eee;
font-size: 26rpx;
text-decoration:line-through;
}
.save-box{
border-radius: 30rpx;
width: 140rpx;
height: 50rpx;
background-color: #e8f4ff;
font-size: 24rpx;
color: #68c2ff;
@include flex;
} }
}
.save-box {
.item-active { color: #fff;
border: none; background-color: rgba(255, 255, 255, .1);
background: linear-gradient(to bottom right, #68c2ff, #0684fe); }
.price,.title{
color: #fff;
}
.save-box{
color: #fff;
background-color: rgba(255,255,255,.1);
}
} }
} }
@ -185,18 +171,18 @@
height: 200rpx; height: 200rpx;
background-color: gray; background-color: gray;
padding: 20rpx; padding: 20rpx;
@include flex(center,space-between); @include flex(center, space-between);
border-radius: 20rpx; border-radius: 20rpx;
.vip-explan { .vip-explan {
color: #eee; color: #eee;
font-size: 24rpx; font-size: 24rpx;
@include flex(center,flex-start); @include flex(center, flex-start);
} }
.vip-info { .vip-info {
@include flex(center,flex-start); @include flex(center, flex-start);
.vip-info__avatar { .vip-info__avatar {
width: 120rpx; width: 120rpx;

Write Preview
Loading…
Cancel
Save