<template> <view class="page"> <u-navbar title="账户充值" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' title-size='36' height='40' id="navbar"> </u-navbar> <image src="https://api.ccttiot.com/smartmeter/img/static/uTDP47Cowrvt1ZnhBEv8" mode="" class="imgbj"></image> <view class="topyue"> <image src="https://api.ccttiot.com/smartmeter/img/static/uzZg6YljFqKFxiNaigKV" class="imgpic" mode=""></image> <view class="top"> 账户余额(元) </view> <view class="price"> 2568.00 </view> <view class="mingxi" @click="btnmx"> 消费明细 <image src="https://api.ccttiot.com/smartmeter/img/static/uXWltzqFG5ZoTU0aiguI" mode=""></image> </view> </view> <view class="bd"> <view class="bdbox"> <view class="cxprice"> 充值金额 </view> <view class="list"> <view class="list_item" v-for="(item,index) in 5" :id="tabindex == index ? 'active' : ''" @click="btntab(index)" :key="index"> <text class="one" :id="tabindex == index ? 'active' : ''">¥300</text> <text :id="tabindex == index ? 'active' : ''">到账450</text> </view> </view> <view class="cxprice" style="margin-top: 64rpx;margin-bottom: 28rpx;"> 充值说明: </view> <view class="tishi"> 1、充值余额永久有效,不支持退款; </view> <view class="tishi"> 2、充值余额可用于门店的预定、订单续单; </view> <view class="tishi"> 3、充值余额支持购买套餐; </view> <view class="tishi" style="display: flex;align-items: center;"> 4、充值余额仅限指定门店使用 <view @click="btnmd">查看可用门店 <image src="https://api.ccttiot.com/smartmeter/img/static/ugiD72nWCEkSrO71mrBP" mode=""></image> </view> </view> </view> </view> <view class="chadianp" v-if="mendianflag"> <image src="https://api.ccttiot.com/smartmeter/img/static/uQ9Lap86n7hzNGtzAVIV" mode=""></image> <view class="name"> 余额适用门店 </view> <view class="list"> <view class="list_item" v-for="(item,inde) in 10" :key="index"> 【宁德-某某路店】 </view> </view> <view class="anniu" @click="mendianflag = false"> 我知道了 </view> </view> <view class="mask" v-if="mendianflag"></view> <view class="anniu"> 立即充值 </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "", }, tabindex:-1, mendianflag:false } }, onLoad() { }, methods: { // 点击切换充值金额 btntab(index){ this.tabindex = index }, // 点击查看门店 btnmd(){ this.mendianflag = true }, // 点击跳转到余额使用明细页 btnmx(){ uni.navigateTo({ url:'/page_user/pricemx' }) } } } </script> <style lang="scss"> .mask{ width: 100%; height: 100vh; background-color: #000; opacity: .5; position: fixed; top: 0; left: 0; z-index: 8; } #active{ background: #48893B !important; color: #fff !important; } page { background: #fff; .chadianp{ width: 674rpx; height: 880rpx; background: linear-gradient( 180deg, #DEF1DA 18%, #FFFFFF 20%, #FFFFFF 100%); border-radius: 36rpx 36rpx 36rpx 36rpx; position: fixed; top: 352rpx; left: 50%; transform: translateX(-50%); z-index: 9; padding: 0 40rpx; box-sizing: border-box; .name{ font-weight: 600; font-size: 48rpx; color: #48893B; height: 164rpx; line-height: 164rpx; } .anniu{ width: 406rpx; height: 86rpx; line-height: 86rpx; background: #48893B; border-radius: 43rpx 43rpx 43rpx 43rpx; position: fixed; left: 50%; transform: translateX(-50%); bottom: 54rpx; } image{ width: 166rpx; height: 164rpx; position: fixed; top: 0; right: 0; } .list{ width: 100%; height: 520rpx; overflow: scroll; .list_item{ margin-top: 40rpx; font-weight: 600; font-size: 36rpx; color: #3D3D3D; } } } .anniu{ width: 674rpx; height: 96rpx; background: #48893B; border-radius: 53rpx 53rpx 53rpx 53rpx; text-align: center; line-height: 96rpx; font-weight: 600; font-size: 40rpx; color: #FFFFFF; position: fixed; left: 50%; bottom: 106rpx; transform: translateX(-50%); } .bd{ position: relative; .bdbox{ .list{ display: flex; flex-wrap: wrap; margin-top: 32rpx; .list_item{ margin: 6rpx; width: 214rpx; height: 124rpx; border-radius: 8rpx 8rpx 8rpx 8rpx; border: 2rpx solid #7C7C7C; text-align: center; padding-top: 20rpx; box-sizing: border-box; text{ font-size: 24rpx; color: #3D3D3D; display: block; } .one{ font-weight: 600; font-size: 32rpx; color: #3D3D3D; } } } position: absolute; top: 0; left: 0; width: 750rpx; height: 1145rpx; background: #FFFFFF; border-radius: 30rpx 30rpx 0 0; padding: 44rpx 38rpx; box-sizing: border-box; .cxprice{ font-weight: 600; font-size: 36rpx; color: #3D3D3D; } .tishi{ font-size: 26rpx; color: #3D3D3D; margin-bottom: 14rpx; view{ color: #48893B; display: flex; align-items: center; margin-left: 6rpx; image{ margin-left: 10rpx; width: 14rpx; height: 36rpx; } } } } } .topyue{ position: relative; padding: 34rpx 74rpx; box-sizing: border-box; margin-top: 26rpx; .top{ font-weight: 600; font-size: 32rpx; color: #48893B; } .price{ font-weight: 600; font-size: 72rpx; color: #48893B; margin-top: 14rpx; } .mingxi{ font-size: 28rpx; color: #48893B; display: flex; align-items: center; margin-top: 26rpx; image{ width: 14rpx; height: 36rpx; margin-left: 4rpx; margin-top: 4rpx; } } .imgpic{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 674rpx; height: 336rpx; z-index: -1; } } .imgbj{ width: 750rpx; height: 572rpx; position: fixed; top: 0; left: 0; z-index: -1; } } </style>