我的页面、个人资料、会员充值页面修改

This commit is contained in:
GaoHao
2024-08-08 10:48:35 +08:00
parent 3b3a08d460
commit 69b23acc73
8 changed files with 1377 additions and 314 deletions

View File

@@ -1,9 +1,30 @@
<template>
<view class="content">
<card :userInfo="userInfo"></card>
<view class="card_info flex-colum">
<view class="title">账户余额()</view>
<view class="card_info_con flex-between">
<view class="balance">{{userInfo.amount || '0.00'}}</view>
<view class="card_info_con_right flex-end">
<view class="card_info_con_right_item flex-colum" v-for="(item,index) in cardManageList" :key="index">
<image class="card_info_con_right_item_icon" :src="item.icon" mode="aspectFill"></image>
<text class="card_info_con_right_item_text">{{item.name}}</text>
</view>
</view>
</view>
</view>
<view class="therecontent">
<input type="number" v-model="amount" placeholder="自定义金额">
</view>
<view class="rechargeList">
<view class="rechargeList_f" v-for="(item,index) in listdata" :key="index">
<viwe class="rechargeList_item flex-colum">
<view class="rechargeList_item_title">充值</view>
<view class="rechargeList_item_amount"><text>{{item.minNum}}</text></view>
<view class="rechargeList_item_handsel">赠送{{item.handselNum}}</view>
</viwe>
</view>
</view>
<view class="fourcontent flex-start">
<view class="fourcontentlnage" v-for="(item,index) in listdata" :key="index">
<view class="flex-colum" :class="index == inputshow?'fourcontentitems':'fourcontentitem'"
@@ -31,7 +52,13 @@
listdata: [],
amount: '',
userInfo: {},
shopId: ''
shopId: '',
cardManageList: [
{name: "明细",icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/detail.png"},
{name: "管理",icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/manage.png"}
],
}
},
onLoad(e) {
@@ -132,8 +159,75 @@
}
.content {
padding: 0 28rpx;
padding: 0 20rpx;
.card_info{
width: 100%;
height: 182rpx;
background: linear-gradient( 132deg, #D6B68D 0%, #E6D6BC 100%);
border-radius: 12rpx;
padding: 32rpx 28rpx;
align-items: initial;
.title{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.card_info_con{
align-items: flex-end;
.balance{
font-weight: 400;
font-size: 48rpx;
color: #333333;
}
.card_info_con_right{
.card_info_con_right_item{
margin-left: 64rpx;
.card_info_con_right_item_icon{
width: 40rpx;
height: 36rpx;
margin-bottom: 5rpx;
}
.card_info_con_right_item_text{
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
}
}
}
}
.rechargeList{
display: flex;
.rechargeList_f{
width: 33.333%;
.rechargeList_item{
height: 168rpx;
background: linear-gradient( 133deg, #F9F6ED 0%, #FFFFFF 100%);
border-radius: 0rpx 48rpx 0rpx 0rpx;
border: 4rpx solid #DCC19E;
align-items: initial;
.rechargeList_item_title,.rechargeList_item_handsel{
font-weight: 400;
font-size: 20rpx;
color: #999999;
}
.rechargeList_item_amount{
font-weight: 500;
font-size: 28rpx;
color: #666666;
text{
font-size: 44rpx;
}
}
.rechargeList_item_handsel{
}
}
}
}
.towcontentitem {
width: 100%;
position: relative;