新增页面
This commit is contained in:
@@ -3,18 +3,18 @@
|
||||
<view class='user-info-view'>
|
||||
<image
|
||||
class='image-bg'
|
||||
:src="assetsUrl+'test_bg.png'"
|
||||
:src=" assetsUrl('test_bg.png')"
|
||||
/>
|
||||
|
||||
<view class='top-row'>
|
||||
<image :src='assetsUrl+"ic_coupon.png"' />
|
||||
<image :src=' assetsUrl("ic_coupon.png")' />
|
||||
|
||||
<view class='u-flex-column'>
|
||||
<text>设计小仙女</text>
|
||||
<text>15542535625</text>
|
||||
</view>
|
||||
|
||||
<image :src='assetsUrl+"ic_qrcode_white.png"' />
|
||||
<image :src=' assetsUrl("ic_qrcode_white.png")' />
|
||||
</view>
|
||||
|
||||
<view class='bottom-row'>
|
||||
@@ -22,11 +22,11 @@
|
||||
<text>100</text>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
<view>
|
||||
<view @click.stop='goPath("/pages/mine/subs/recharge/index")'>
|
||||
<text>255.00</text>
|
||||
<text>余额</text>
|
||||
</view>
|
||||
<view>
|
||||
<view @click.stop='goPath("/pages/mine/subs/coupon/coupon-list")'>
|
||||
<text>3</text>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
@@ -36,14 +36,14 @@
|
||||
<view class='integral-add-view'>
|
||||
<text>将会员卡放入微信卡包，及时了解积分变动</text>
|
||||
<text>去添加</text>
|
||||
<image :src='assetsUrl+"ic_arrow_right_yellow.png"' />
|
||||
<image :src=' assetsUrl("ic_arrow_right_yellow.png")' />
|
||||
</view>
|
||||
|
||||
<text class='title-view'>
|
||||
我的订单
|
||||
</text>
|
||||
<view class='card-order-view'>
|
||||
<view v-for='(item,index) in orderActionList' :key='index'>
|
||||
<view v-for='(item,index) in orderActionList' :key='index' @click.stop='goPath(item.path)'>
|
||||
<image :src='item.icon' />
|
||||
<text>{{ item.title }}</text>
|
||||
<text v-if='item.amount>0'>{{ item.amount }}</text>
|
||||
@@ -55,7 +55,7 @@
|
||||
</text>
|
||||
|
||||
<view class='card-service-view'>
|
||||
<view v-for='(item,index) in serviceList' :key='index'>
|
||||
<view v-for='(item,index) in serviceList' :key='index' @click.stop='goPath(item.path)'>
|
||||
<image :src='item.icon' />
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
@@ -66,47 +66,48 @@
|
||||
<script setup lang='ts'>
|
||||
import { useUserStore } from '@/store';
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { goPath } from '@/utils';
|
||||
|
||||
const orderActionList = ref([{
|
||||
title: '进行中',
|
||||
icon: assetsUrl + 'ic_order_progressing.png',
|
||||
path: '',
|
||||
icon: assetsUrl('ic_order_progressing.png'),
|
||||
path: '/pages/mine/subs/order/order-list',
|
||||
amount: 10
|
||||
}, {
|
||||
title: '已结束',
|
||||
icon: assetsUrl + 'ic_order_finish.png',
|
||||
path: '',
|
||||
icon: assetsUrl('ic_order_finish.png'),
|
||||
path: '/pages/mine/subs/order/order-list?index=1',
|
||||
amount: 0
|
||||
}, {
|
||||
title: '全部订单',
|
||||
icon: assetsUrl + 'ic_order_all.png',
|
||||
path: '',
|
||||
icon: assetsUrl('ic_order_all.png'),
|
||||
path: '/pages/mine/subs/order/order-list?index=2',
|
||||
amount: 0
|
||||
}]);
|
||||
|
||||
const serviceList = [
|
||||
{
|
||||
title: '会员信息',
|
||||
icon: assetsUrl + 'ic_member_service_info.png',
|
||||
path: ''
|
||||
icon: assetsUrl('ic_member_service_info.png'),
|
||||
path: '/pages/mine/subs/profile/index'
|
||||
},
|
||||
{
|
||||
title: '消费记录',
|
||||
icon: assetsUrl + 'ic_member_service_record.png',
|
||||
icon: assetsUrl('ic_member_service_record.png'),
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
title: '关注公众号',
|
||||
icon: assetsUrl + 'ic_member_service_follow.png',
|
||||
icon: assetsUrl('ic_member_service_follow.png'),
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
title: '收货地址',
|
||||
icon: assetsUrl + 'ic_member_service_address.png',
|
||||
path: ''
|
||||
icon: assetsUrl('ic_member_service_address.png'),
|
||||
path: '/pages/mine/subs/address/address-list'
|
||||
}, {
|
||||
title: '联系商家',
|
||||
icon: assetsUrl + 'ic_member_service_contact.png',
|
||||
icon: assetsUrl('ic_member_service_contact.png'),
|
||||
path: ''
|
||||
}
|
||||
// ,{
|
||||
@@ -288,6 +289,7 @@ console.log('store.user_name', store.user_name);
|
||||
min-width: 40rpx;
|
||||
min-height: 35rpx;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
justify-content: center;
|
||||
background: #F32B2B;
|
||||
border-radius: 50%;
|
||||
@@ -309,6 +311,7 @@ console.log('store.user_name', store.user_name);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
|
||||
11
src/pages/mine/subs/address/add-address.vue
Normal file
11
src/pages/mine/subs/address/add-address.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
35
src/pages/mine/subs/address/address-list.vue
Normal file
35
src/pages/mine/subs/address/address-list.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<scroll-view :scroll-y='true'>
|
||||
<address-item v-for='(item,index) in addressList' :key='index' :item='item' />
|
||||
</scroll-view>
|
||||
|
||||
<view class='bottom-button-view'>
|
||||
<button class='primary-button' @click.stop='goPath("add-address")'>+新增地址</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import AddressItem from './components/address-item.vue';
|
||||
import { goPath } from '@/utils';
|
||||
|
||||
const addressList = ref<{
|
||||
name: string,
|
||||
mobile: string,
|
||||
address: string,
|
||||
status: number
|
||||
}[]>([{
|
||||
name: '黄先生',
|
||||
mobile: '13xxxxxx8900',
|
||||
status: 1
|
||||
}, {
|
||||
name: '李先生',
|
||||
mobile: '13xxxxxx8900',
|
||||
status: 0
|
||||
}]);
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
92
src/pages/mine/subs/address/components/address-item.vue
Normal file
92
src/pages/mine/subs/address/components/address-item.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<view class='card-view'>
|
||||
<view class='c-flex-row'>
|
||||
<text>默认</text>
|
||||
<text>
|
||||
黄先生
|
||||
<!-- {{ item.name }}-->
|
||||
</text>
|
||||
<text>
|
||||
13xxxxxx8900
|
||||
<!-- {{ item.mobile }}-->
|
||||
</text>
|
||||
</view>
|
||||
<text class='address'>
|
||||
湖南省 长沙市 雨花区 地址地址地址
|
||||
{{ item.address }}
|
||||
</text>
|
||||
|
||||
<view class='btn-view c-flex-row'>
|
||||
<text>编辑</text>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
defineProps({
|
||||
item: <any>[]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.card-view {
|
||||
margin: 20rpx 30rpx;
|
||||
padding: 38rpx 30rpx 30rpx 34rpx;
|
||||
|
||||
view:nth-of-type(1) {
|
||||
text:nth-of-type(1) {
|
||||
border-radius: 5rpx;
|
||||
border: 1rpx solid #F32B2B;
|
||||
color: #F32B2B;
|
||||
font-size: 24prx;
|
||||
padding: 1rpx 8rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 10rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-of-type(3) {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
margin-top: 10rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
align-items: center;
|
||||
|
||||
text:nth-of-type(n+1) {
|
||||
display: flex;
|
||||
width: 84rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 1rpx solid #F32B2B;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #F32B2B;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
border: 1rpx solid #DDDDDD;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
src/pages/mine/subs/coupon/components/coupon-item.vue
Normal file
122
src/pages/mine/subs/coupon/components/coupon-item.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class='coupon-content'>
|
||||
<image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
|
||||
<image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
|
||||
<view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
|
||||
<text>{{ item.price }}</text>
|
||||
<text>满{{ item.threshold }}元可用</text>
|
||||
</view>
|
||||
|
||||
<view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
|
||||
<text>{{ item?.title }}</text>
|
||||
<text>有效期至{{ item.useTime }}</text>
|
||||
<text class='btn-text' :class='{"btn-text-disabled": item.status==1}'>
|
||||
立即使用
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
defineProps({
|
||||
item: Object
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.coupon-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
margin: 30rpx 30rpx 10rpx 30rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 50rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 55rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
text:nth-of-type(1):after {
|
||||
content: '元';
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.left-content-disabled {
|
||||
@extend .left-content;
|
||||
color: #C2C2C2;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
margin-left: 100rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 26rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
display: flex;
|
||||
width: 146rpx;
|
||||
height: 55rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 28rpx;
|
||||
border: #F32B2B solid 2rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #F32B2B;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
}
|
||||
|
||||
.btn-text-disabled {
|
||||
@extend .btn-text;
|
||||
color: #C2C2C2;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.right-content-disabled {
|
||||
@extend .right-content;
|
||||
color: #C2C2C2;
|
||||
text:nth-of-type(2) {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
68
src/pages/mine/subs/coupon/coupon-list.vue
Normal file
68
src/pages/mine/subs/coupon/coupon-list.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<tabbar :titles='["全部","未使用","已使用"]' :indicator-color='"#D95554"' @change='args => {}' />
|
||||
<scroll-view :scroll-y='true' class='content'>
|
||||
<coupon-item v-for='item in coupons' :item='item' />
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import CouponItem from './components/coupon-item.vue';
|
||||
|
||||
const coupons = [{
|
||||
id: 1,
|
||||
title: '优惠券',
|
||||
desc: '满100减10',
|
||||
price: 100,
|
||||
threshold: 10,
|
||||
priceDesc: '满100减10',
|
||||
useTime: '2021-12-31',
|
||||
status: 1,
|
||||
useStatus: '未使用'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '优惠券',
|
||||
desc: '满100减10',
|
||||
price: 200,
|
||||
threshold: 80,
|
||||
priceDesc: '满100减10',
|
||||
useTime: '2021-01-01',
|
||||
status: 1,
|
||||
useStatus: '未使用'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '优惠券',
|
||||
desc: '满100减10',
|
||||
price: 300,
|
||||
threshold: 60,
|
||||
priceDesc: '满100减10',
|
||||
useTime: '2023-12-31',
|
||||
status: '0',
|
||||
useStatus: '未使用'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '优惠券',
|
||||
desc: '满100减10',
|
||||
price: 50,
|
||||
threshold: 50,
|
||||
priceDesc: '满100减10',
|
||||
useTime: '2021-10-31',
|
||||
status: 0,
|
||||
useStatus: '未使用'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '优惠券',
|
||||
desc: '满1000减30',
|
||||
price: 200,
|
||||
threshold: 30,
|
||||
priceDesc: '满100减10',
|
||||
useTime: '2024-12-31',
|
||||
status: 0,
|
||||
useStatus: '未使用'
|
||||
}];
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
11
src/pages/mine/subs/order/components/order-item.vue
Normal file
11
src/pages/mine/subs/order/components/order-item.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
11
src/pages/mine/subs/order/order-detail.vue
Normal file
11
src/pages/mine/subs/order/order-detail.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
11
src/pages/mine/subs/order/order-list.vue
Normal file
11
src/pages/mine/subs/order/order-list.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<tabbar :titles="['全部', '进行中', '已结束']" @change='args => {}' />
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
173
src/pages/mine/subs/profile/index.vue
Normal file
173
src/pages/mine/subs/profile/index.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='top-card-view'>
|
||||
<image class='bg-image' :src='assetsUrl("test_bg.png")' />
|
||||
<image class='avatar-image' :src='assetsUrl("test_bg.png")' />
|
||||
<text>设计小仙女</text>
|
||||
<text>会员卡</text>
|
||||
</view>
|
||||
|
||||
<view class='basic-info-view c-flex-column'>
|
||||
<view class='c-flex-row'>
|
||||
<text>头像</text>
|
||||
<view class='avatar-view'>
|
||||
<image class='avatar-image' :src='assetsUrl("test_bg.png")' />
|
||||
<button class='avatar-btn' open-type='chooseAvatar' />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='c-flex-row'>
|
||||
<text class='nickname'>姓名</text>
|
||||
<input placeholder='请输入姓名' type='nickname' />
|
||||
</view>
|
||||
|
||||
<view class='divider' />
|
||||
<view class='c-flex-row'>
|
||||
<text>手机号</text>
|
||||
<input placeholder='15523653265' />
|
||||
</view>
|
||||
|
||||
<view class='divider' />
|
||||
<view class='c-flex-row'>
|
||||
<text>性别</text>
|
||||
<view class='c-flex-row' @click.stop='changeGender(0)'>
|
||||
<image class='gender-image'
|
||||
:src='assetsUrl(currentGender==0?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
|
||||
<text class='gender-text'>男</text>
|
||||
</view>
|
||||
<view class='c-flex-row' @click.stop='changeGender(1)'>
|
||||
<image class='gender-image'
|
||||
:src='assetsUrl(currentGender==1?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
|
||||
<text class='gender-text'>女</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='divider' />
|
||||
<view class='c-flex-row'>
|
||||
<text>生日</text>
|
||||
<picker mode='date' @change='changeDate'>
|
||||
<text>请选择生日</text>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class='primary-button'>保存</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const currentGender = ref<number>(0);
|
||||
|
||||
const changeGender = (index: number) => {
|
||||
currentGender.value = index;
|
||||
};
|
||||
|
||||
const changeDate = (e: any) => {
|
||||
console.log(e);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.top-card-view {
|
||||
display: flex;
|
||||
height: 338rpx;
|
||||
position: relative;
|
||||
margin: 30rpx;
|
||||
|
||||
.bg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 30rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 95rpx;
|
||||
height: 95rpx;
|
||||
margin-left: 36rpx;
|
||||
margin-top: 60rpx;
|
||||
background: #FFFFFF;
|
||||
border: 1rpx solid #707070;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 64rpx;
|
||||
left: 158rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 116rpx;
|
||||
left: 158rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.basic-info-view {
|
||||
margin: 0 30rpx 30rpx 30rpx;
|
||||
|
||||
.avatar-view {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.avatar-image {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-btn {
|
||||
@extend .avatar-image;
|
||||
position: absolute;
|
||||
border: none;
|
||||
background: #00000000;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
view:not(.divider):nth-of-type(n+1) {
|
||||
padding: 0 20rpx;
|
||||
height: 120rpx;
|
||||
|
||||
.gender-image {
|
||||
width: 37rpx;
|
||||
height: 37rpx;
|
||||
}
|
||||
|
||||
.gender-text {
|
||||
width: 80rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
text:not(.gender-text):nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
width: 120rpx;
|
||||
font-weight: 400;
|
||||
color: #7E7E7E;
|
||||
}
|
||||
|
||||
.nickname:before {
|
||||
content: '*';
|
||||
color: #F32B2B;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
146
src/pages/mine/subs/recharge/index.vue
Normal file
146
src/pages/mine/subs/recharge/index.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='balance-view'>
|
||||
<image :src='assetsUrl("bg_member_recharge.png")' />
|
||||
<view class='balance-content'>
|
||||
<text>累计余额（元）</text>
|
||||
<text>￥1</text>
|
||||
</view>
|
||||
<view class='balance-content'>
|
||||
<text>当前余额（元）</text>
|
||||
<text class='accent-text-color'>￥1</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='recharge-option-card'>
|
||||
<text>充值金额</text>
|
||||
<tabbar :titles='rechargeItems?.map(res=>res.title)' @change='change' />
|
||||
<view class='divider' />
|
||||
<view class='option-item'>
|
||||
<image :src='assetsUrl("bg_member_recharge_item.png")' />
|
||||
<text>充值{{ rechargeItems[currentIndex].title }}送{{ rechargeItems[currentIndex].price / 10 }}元</text>
|
||||
<text class='accent-text-color'>
|
||||
实得{{ rechargeItems[currentIndex].price + (rechargeItems[currentIndex].price / 10) }}元
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='bottom-button-view'>
|
||||
<button class='primary-button'>充值</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const rechargeItems = ref([
|
||||
{
|
||||
title: '100元',
|
||||
price: 100
|
||||
},
|
||||
{
|
||||
title: '200元',
|
||||
price: 200
|
||||
},
|
||||
{
|
||||
title: '500元',
|
||||
price: 500
|
||||
}, {
|
||||
title: '1000元',
|
||||
price: 1000
|
||||
}]);
|
||||
const currentIndex = ref<number>(0);
|
||||
|
||||
const change = (index: number) => {
|
||||
currentIndex.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.balance-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 280rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.balance-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
color: white;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recharge-option-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
position: relative;
|
||||
margin-top: -25rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-top: 20rpx;
|
||||
margin-left: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: 36rpx 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 167rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 27rpx;
|
||||
margin-left: 30rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
margin-top: 85rpx;
|
||||
margin-left: 30rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 185rpx;
|
||||
height: 50rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 25rpx;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user