完善也买你
This commit is contained in:
135
bundle/pages/points/points.vue
Normal file
135
bundle/pages/points/points.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<view class="index home-bg" :style="[navBackground]">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
|
||||
<u-navbar
|
||||
:border-bottom="false"
|
||||
:is-fixed="false"
|
||||
custom-class="home-bg"
|
||||
:background="navBackground"
|
||||
:is-back="true"
|
||||
:backText="backText"
|
||||
:title="title"
|
||||
title-color="#fff"
|
||||
backIconColor="#fff"
|
||||
>
|
||||
</u-navbar>
|
||||
</u-sticky>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="row-center balance u-relative" :style="{paddingTop: topSpace + 'px'}">
|
||||
<view class="u-text-center w-full">
|
||||
<view class="text-fff" style="font-size: 96rpx;">0</view>
|
||||
<view class="text-fff nr">积分</view>
|
||||
</view>
|
||||
|
||||
<view class="u-absolute right-0">
|
||||
<view class="excharge row-center text-default">
|
||||
<text class="xs">兑换商品</text>
|
||||
<u-icon name="arrow-right" size="22" :color="themeColor" class="u-m-l-10"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-b-40" style="margin-top: 132rpx;">
|
||||
<view class="list bg-white br16 u-p-32">
|
||||
<view class="lg">积分明细</view>
|
||||
<view class="u-m-t-16">
|
||||
<view class="u-m-b-16">
|
||||
<view class="nr row-between">
|
||||
<view>积分</view>
|
||||
<view class="deduct">-2000</view>
|
||||
</view>
|
||||
<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '积分',
|
||||
statusBarHeight: 0, // 状态栏高度
|
||||
bgImageHeight: 244 ,// 背景图高度，单位px，根据实际情况调整
|
||||
selectIndex: 0,
|
||||
backText: '',
|
||||
topSpace: 0
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = systemInfo.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.topSpace = (80 - this.statusBarHeight)
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.topSpace = (80 + 44)
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 跳转个人信息
|
||||
toProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/profile'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转我的钱包
|
||||
toWallet() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/wallet'
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navBackground() {
|
||||
return {
|
||||
'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.index {
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 22rpx 34rpx;
|
||||
height: 962rpx;
|
||||
box-shadow: 0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
.excharge {
|
||||
width: 180rpx;
|
||||
height: 56rpx;
|
||||
background-color: #DBE7F6;
|
||||
border-top-left-radius: 100rpx;
|
||||
border-bottom-left-radius: 100rpx;
|
||||
}
|
||||
</style>
|
||||
95
bundle/pages/points/points_store.vue
Normal file
95
bundle/pages/points/points_store.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<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="list" :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="(itme, index) in 10">
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/banner.png'" width="180" height="180" border-radius="20"></u-image>
|
||||
</view>
|
||||
|
||||
<view class="u-m-l-18 w-full">
|
||||
<view>小熊早餐必备煮蛋器</view>
|
||||
<view class="u-m-t-4 text-7c">兑换66人</view>
|
||||
<view class="u-m-t-42 row-between">
|
||||
<view>
|
||||
<text class="primary">100.00</text>
|
||||
<text class="text-7c">积分+</text>
|
||||
<text class="primary">100.00</text>
|
||||
<text class="text-7c">元</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-button @click="mpLogin" 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 {
|
||||
list: [
|
||||
{
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
name: '热门推荐'
|
||||
}
|
||||
],
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(index) {
|
||||
this.current = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user