会员中心页面修改，余额明细调整，开通会员页面调整
This commit is contained in:
@@ -23,76 +23,265 @@
|
||||
</view>
|
||||
<view class="btm-wrap">
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="u-flex u-flex-between">
|
||||
<view class="u-flex ">
|
||||
<image src="/static/vip/money.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
|
||||
<text class="u-m-l-24 color-333 font-16 font-700">立即充值</text>
|
||||
</view>
|
||||
<view class="font-12 color-999">
|
||||
<text>充值代表接受</text>
|
||||
<text style="color: #ECB592;">《用户隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list u-m-t-40">
|
||||
<view class="item color1" @click="sel=index" v-for="(item,index) in list" :key="index"
|
||||
:class="{active:sel==index}">
|
||||
<view class="">
|
||||
<text>￥</text>
|
||||
<text class="font-700" style="font-size: 48rpx;"
|
||||
:class="{color2:sel==index}">{{item.amount}}</text>
|
||||
</view>
|
||||
<view class="font-12" v-if="item.rewardAmount" :class="{color2:sel==index}">
|
||||
<text>赠</text>
|
||||
<text>￥</text>
|
||||
<text class="font-14">{{item.rewardAmount}}</text>
|
||||
</view>
|
||||
<view class="font-12" v-if="item.rewardPoints">
|
||||
<text>送</text>
|
||||
<text>￥</text>
|
||||
<text class="font-14">{{item.rewardPoints}}</text>
|
||||
</view>
|
||||
<view class="font-12 color-666" v-if="item.couponInfoList.length">
|
||||
<text>送</text>
|
||||
<text>{{item.couponInfoList.length}}</text>
|
||||
<text>张券</text>
|
||||
<text class="color2 u-m-l-8" v-if="sel==index">查看</text>
|
||||
</view>
|
||||
|
||||
<view class="sel u-flex" v-if="sel==index">
|
||||
<image class="image" src="/static/vip/sel.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex other flex-center">
|
||||
<text class="font-14 color-333 font-700 u-m-r-28">其他金额</text>
|
||||
<up-input v-model="money" type="number" placeholder="请输入充值金额" border="none"
|
||||
placeholder-style="font-size:14px;"></up-input>
|
||||
</view>
|
||||
<view class="color-999 font-12 u-m-t-4">自定义金额充值时，不享受任何优惠赠送</view>
|
||||
<button class="buy-btn" @click="buy">
|
||||
<text class="font-16 ">￥{{charge_money}}</text>
|
||||
<text class="font-14 u-m-l-24">立即充值</text>
|
||||
</button>
|
||||
<view class="u-m-t-36 color-999 font-12">
|
||||
<view>充值说明</view>
|
||||
<view class="u-m-t-16">
|
||||
<text>适用门店</text>
|
||||
<text class="color2 u-m-l-28">全国门店通用 > </text>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<text>有效期限</text>
|
||||
<text class=" u-m-l-28">永久有效 </text>
|
||||
</view>
|
||||
<view class="u-m-t-16 u-flex u-flex-y-center">
|
||||
<text class="no-wrap">注意事项</text>
|
||||
<view class="u-m-l-28">
|
||||
<view>1.储值完成后不支持自助退款，可联系商家处理</view>
|
||||
<view> 2.余额不支持转赠，不可提现，长期有效</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-16 u-flex u-flex-y-center">
|
||||
<text class="no-wrap">充值说明</text>
|
||||
<view class="u-m-l-28">
|
||||
此处显示内容:管理端配置，读取智慧充值中《充值说明》字段内容
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
function back() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
import * as vipApi from '@/common/api/market/recharge.js'
|
||||
import {joinMember} from '@/common/api/order/index.js'
|
||||
import {
|
||||
ref,onMounted,computed
|
||||
} from 'vue'
|
||||
|
||||
async function buy(){
|
||||
const res=await joinMember()
|
||||
}
|
||||
function back() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
const list = ref([])
|
||||
const sel = ref(0)
|
||||
const money = ref(null);
|
||||
async function init(){
|
||||
const res=await vipApi.config()
|
||||
if(res){
|
||||
list.value=res.rechargeDetailList
|
||||
}
|
||||
}
|
||||
const charge_money=computed(()=>{
|
||||
const item= list.value[sel.value]
|
||||
if(item){
|
||||
return item.amount
|
||||
}
|
||||
return ''
|
||||
})
|
||||
onMounted(init)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-wrap {
|
||||
width: 100%;
|
||||
height: 600upx;
|
||||
padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
|
||||
position: relative;
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.color1 {
|
||||
color: #5F2E0F;
|
||||
}
|
||||
.select-shop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.color2 {
|
||||
color: #FF6300;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
margin-top: 28rpx;
|
||||
padding: 32rpx 32rpx;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 80rpx;
|
||||
line-height: 1;
|
||||
background: linear-gradient(98deg, #fe6d1100 40.64%, #FFD1B4 105.2%), linear-gradient(259deg, #FE6D11 50.14%, #FFD1B4 114.93%);
|
||||
box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
|
||||
}
|
||||
|
||||
.other {
|
||||
background: #F6F6F6;
|
||||
padding: 24rpx 16rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
width: 100%;
|
||||
height: 530rpx;
|
||||
box-sizing: border-box;
|
||||
padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
|
||||
position: relative;
|
||||
.select-btn {
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.select-shop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12upx;
|
||||
.t {
|
||||
color: #333;
|
||||
position: relative;
|
||||
|
||||
.select-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12upx;
|
||||
|
||||
.t {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding-top: 40upx;
|
||||
|
||||
.left {
|
||||
.balance-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.t {
|
||||
color: #5e3110;
|
||||
&.i {
|
||||
position: relative;
|
||||
top: 10upx;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding-top: 40upx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t {
|
||||
color: #5e3110;
|
||||
|
||||
&.i {
|
||||
position: relative;
|
||||
top: 10upx;
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
&.n {
|
||||
font-size: 64upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12upx;
|
||||
|
||||
.t {
|
||||
color: #86491d;
|
||||
font-size: 28upx;
|
||||
}
|
||||
&.n {
|
||||
font-size: 64upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12upx;
|
||||
.t {
|
||||
color: #86491d;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.bottom {
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
padding: 40rpx 28rpx 0 28rpx;
|
||||
transform: translateY(-140rpx);
|
||||
border-radius: 74rpx 74rpx 0 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
column-gap: 20rpx;
|
||||
row-gap: 22rpx;
|
||||
|
||||
.item {
|
||||
padding: 36rpx 22rpx;
|
||||
border-radius: 42rpx;
|
||||
background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 140.47%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 6rpx solid transparent;
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(180deg, #FFC29A -26.17%, #FFF 64.06%);
|
||||
border: 6rpx solid #FE6C0E;
|
||||
box-shadow: 0 0 31rpx 2rpx #fe8b435e;
|
||||
}
|
||||
|
||||
.sel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
|
||||
transform: translateX(-50%) translateY(21rpx);
|
||||
|
||||
.image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user