106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<template>
|
|
<view class="points-store u-relative">
|
|
<view class="bg-default bg u-text-center text-fff">
|
|
<view class="u-p-t-42">
|
|
<view class="sm">可用积分</view>
|
|
<view class="fraction bold-600 u-m-t-14">0.00</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="u-absolute left-0 right-0 bg-white u-p-t-34 list">
|
|
<view>
|
|
<u-tabs :list="tab" :is-scroll="true" :current="current" @change="change" inactive-color="#636363" :active-color="themeColor"></u-tabs>
|
|
</view>
|
|
<view class="u-m-l-24 u-m-r-24">
|
|
<u-line color="#EEE" />
|
|
</view>
|
|
<view class="u-m-t-32 u-m-l-24 u-m-r-24">
|
|
<view class="row-start u-col-top u-m-b-42" v-for="(item, index) in list">
|
|
<view>
|
|
<u-image :src="cloudPath + item.image" width="180" height="180" border-radius="20"></u-image>
|
|
</view>
|
|
|
|
<view class="u-m-l-18 w-full">
|
|
<view>{{item.title}}</view>
|
|
<view class="u-m-t-4 text-7c">兑换66人</view>
|
|
<view class="u-m-t-42 row-between">
|
|
<view v-if="item.needMoney">
|
|
<text class="primary">{{item.point}}</text>
|
|
<text class="text-7c">积分+</text>
|
|
<text class="primary">{{item.money}}</text>
|
|
<text class="text-7c">元</text>
|
|
</view>
|
|
<view class="flex1" style="display: flex;justify-content: flex-end;">
|
|
<u-button @click="toExchange" hover-class="none" :customStyle="{width: '145rpx', height: '61rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '31rpx'}" :hair-line="false">兑换</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tab: [
|
|
{
|
|
name: '全部'
|
|
},
|
|
{
|
|
name: '热门推荐'
|
|
}
|
|
],
|
|
current: 0,
|
|
list: [
|
|
{image: 'img/banner.png', title: '小熊早餐必备煮蛋器', needMoney: true, point: 100, money: 200},
|
|
{image: 'img/banner.png', title: '满9-2优惠券', needMoney: false, point: 0, money: 0},
|
|
{image: 'img/banner.png', title: '满15-3优惠券', needMoney: false, point: 0, money: 0},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
change(index) {
|
|
this.current = index;
|
|
},
|
|
|
|
toExchange() {
|
|
uni.navigateTo({
|
|
url: `/bundle/pages/points/points_shop`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.points-store {
|
|
.bg {
|
|
height: 420rpx
|
|
}
|
|
|
|
.fraction {
|
|
font-size: 64rpx;
|
|
}
|
|
|
|
.list {
|
|
top: 186rpx;
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 24rpx;
|
|
}
|
|
|
|
.text-46 {
|
|
color: #464646;
|
|
}
|
|
|
|
.text-7c {
|
|
color: #7C7C7C;
|
|
}
|
|
}
|
|
</style> |