This commit is contained in:
xvv 2024-09-13 17:20:35 +08:00
parent 763db17eda
commit b0413006cd
5 changed files with 220 additions and 140 deletions

View File

@ -3,7 +3,7 @@
"@dcloudio/uni-ui": "^1.4.28", "@dcloudio/uni-ui": "^1.4.28",
"bignumber.js": "^9.1.2", "bignumber.js": "^9.1.2",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"uview-ui": "^2.0.36", "uview-ui": "^2.0.37",
"weixin-js-sdk": "^1.6.5" "weixin-js-sdk": "^1.6.5"
}, },
"devDependencies": { "devDependencies": {

View File

@ -50,6 +50,13 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{
"path": "cardDetails/index",
"style": {
"navigationBarTitleText": "卡包详情"
// "navigationStyle": "custom"
}
},
{ {
"path": "memberRecharge/index", "path": "memberRecharge/index",
"style": { "style": {
@ -145,8 +152,8 @@
{ {
"path": "MyCard/MyCard", "path": "MyCard/MyCard",
"style": { "style": {
"navigationBarTitleText": "卡包", "navigationBarTitleText": "卡包"
"navigationStyle": "custom"
} }
} }
] ]

View File

@ -102,16 +102,34 @@
<view style="width: 100%; height: 68px; "></view> <view style="width: 100%; height: 68px; "></view>
<u-picker :columns="columns" @confirm="confirm" :show="show" @cancel="show = false" <u-picker :columns="columns" @confirm="confirm" :show="show" @cancel="show = false"
keyName="label"></u-picker> keyName="label"></u-picker>
<!-- <u-popup :show="ruleShow" mode="bottom" @close="close" @open="open"> <u-popup :show="ruleShow" :closeable="true" :round="10" mode="bottom" @close="close">
<view class="_tbox"> <view class="_tbox">
<view class="_btop">百业兴加油站申请</view> <view class="_btop">百业兴加油站申请</view>
<view class=""> <view class="_bbox">
<view class="">获取您的位置信息</view> <view class="b_title">获取您的位置信息</view>
<view class="">我们将获取您的当前位置信息以便精准推荐</view> <view class="">我们将获取您的当前位置信息以便精准推荐离您最近
的店铺信息</view>
</view>
<view class="b-cen">
<view class="_d_anniu" @click="ruleShow = false">拒绝</view>
<view class="_s_anniu" @click="ruleShow = false">允许</view>
</view> </view>
<view class="b-cen"></view>
</view> </view>
</u-popup> --> </u-popup>
<u-popup :show="empowerShow" :closeable="true" :round="10" mode="bottom" @close="empowerclose">
<view class="_tbox">
<view class="_btop">第三方用户信息授权说明</view>
<view class="_bbox">
<view class="">您授权后小程序开发者将收集您的位置信息为您提 供智能推荐服务开发者严格按照钜油惠百业兴小程 序隐私保护指引处理您的个人信息如您发现开发者
不当处理您的个人信息可进行投诉</view>
</view>
<view class="b-cen">
<view class="_d_anniu" @click="empowerShow = false">拒绝</view>
<view class="_s_anniu" @click="empowerShow = false">允许</view>
</view>
</view>
</u-popup>
<!--外层结束 --> <!--外层结束 -->
<tabbar :msg="msg"></tabbar> <tabbar :msg="msg"></tabbar>
</view> </view>
@ -130,6 +148,7 @@
data() { data() {
return { return {
ruleShow: false, ruleShow: false,
empowerShow: false,
isOpen: false, isOpen: false,
chainStoreId: '', chainStoreId: '',
indicatorDots: true, indicatorDots: true,
@ -251,6 +270,12 @@
tabbar tabbar
}, },
methods: { methods: {
close() {
this.ruleShow = false
},
empowerclose() {
this.empowerShow = false
},
goMemberRecharge() { goMemberRecharge() {
uni.navigateTo({ uni.navigateTo({
url: '/pagesHome/memberRecharge/index' url: '/pagesHome/memberRecharge/index'
@ -1103,13 +1128,63 @@
border-radius: 10px; border-radius: 10px;
background: #fff; background: #fff;
width: 100%; width: 100%;
height: 100px;
} }
._btop {
box-sizing: border-box;
padding: 15px;
border-bottom: 1px solid #EEEEEE;
text-align: center;
font-weight: 600;
font-size: 14px;
color: #333333;
}
._bbox {
box-sizing: border-box;
padding: 15px;
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 18px;
}
.b_title {
font-weight: bold;
}
.b-cen { .b-cen {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
._d_anniu {
width: 90px;
height: 30px;
border-radius: 15px;
border: 1px solid #FF9655;
display: flex;
align-items: center;
justify-content: center;
color: #FF9655;
margin-right: 20px;
}
._s_anniu {
width: 90px;
height: 30px;
border-radius: 15px;
border: 1px solid #FF9655;
background: #FF9655;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
} }
</style> </style>

View File

@ -1,113 +1,55 @@
<template> <template>
<view class="content"> <view class="content">
<view class="container"> <view class="card_" @click="goDetails()">
<view class="my-header"> <view class="top_card">
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view> <view class="">储值卡</view>
<view class="my-text">卡包</view> <view class="">
<view class="my-icons"></view> <image src="../../static/new/rwm.png" style="width: 25px; height: 25px; "></image>
</view>
<!-- 顶部区域 -->
<!-- 储值卡 -->
<view class="xyihang">
<view class="title-hei">电子储值卡</view>
</view>
<view class="card-cz">
<view class="card-top">
<view class="cardimg">
<image src="../../static/imgs/jyz.png" mode="aspectFit"></image>
</view>
<!-- <text>油站名称</text> -->
</view>
<view class="dis-but">
<view class="bai-box">
<view class="">通用余额</view>
<view class=""> <text style="font-weight: bold;font-size: 26px;">{{cardBalance || '0'}}</text>
</view>
</view>
<view class="anniu-cz" @click="gocard(0)">
<text>立即充值</text>
</view>
</view>
</view>
<!-- 囤油卡 -->
<view class="xyihang">
<view class="title-hei">电子囤油卡</view>
<view class="d_dis">
<view class="" @click="s_()">
<text>上一张</text>
<uni-icons type="reload" color="#2979ff" size="20"></uni-icons>
</view>
<view class="" @click="x_()">
<text>下一张</text>
<uni-icons type="refreshempty" color="#2979ff" size="20"></uni-icons>
</view>
</view> </view>
</view> </view>
<view class="card-ty"> <view class="card-b">
<view class="card-top"> 储值卡余额
<view class="cardimg">
<image src="../../static/imgs/jyzb.png" mode="aspectFit"></image>
</view>
<!-- <text style="color: #ffffff;">油站名称</text> -->
</view>
<view style="width: 100%;display: flex;align-items: center;justify-content: space-between; ">
<view class="bai-box">
<view class="title-card">电子囤油卡</view>
<!-- <view class="">{{cardsList[cardsIndex].type || '暂无囤油'}}:{{cardsList[cardsIndex].refuelMoney || '0'}}L
</view>
<view>剩余油量{{cardsList[cardsIndex].refuelMoney || '0'}}L</view> -->
<!-- <view style="lins"> **** **** **** 970 </view> -->
</view>
<!-- <view class="">
<uni-icons type="eye-slash-filled" color="#ffffff" size="30"
style="margin-right: 15px;"></uni-icons>
</view> -->
</view>
<view class="z_yw">
<view class="anniu-cz" @click="gocard(1)">
<text>立即充值</text>
</view>
</view>
</view> </view>
<!-- 礼品卡 --> <view class="card-num">
<view class="xyihang"> ¥123456.98
<view class="title-hei">礼品卡</view>
<!-- <view class="">
<text>下一张</text>
<uni-icons type="refreshempty" color="#2979ff" size="20"></uni-icons>
</view> -->
</view> </view>
<view class="card-lp"> <view class="r-box">
<view class="card-top"> NO.xxxxxxxxxxxxxxxxxx
<view class="cardimg"> </view>
<image src="../../static/imgs/jyzb.png" mode="aspectFit"></image> </view>
</view> <view class="card_1">
<!-- <text style="color: #ffffff;">油站名称</text> --> <view class="top_card">
</view> <view class="">囤油卡</view>
<view class="">
<view style="width: 100%;display: flex;align-items: center;justify-content: space-between; "> <image src="../../static/new/rwm.png" style="width: 25px; height: 25px; "></image>
<view class="bai-box">
<view class="title-card">礼品卡</view>
<view class="">卡号: **** **** **** ****</view>
<view style="lins"> 卡密: **** **** **** **** </view>
</view>
<view class="">
<!-- <uni-icons type="eye-slash-filled" color="#ffffff" size="30"
style="margin-right: 15px;"></uni-icons> -->
</view>
</view>
<view class="z_yw">
<view class="anniu-cz" @click="gocard(2)">
<text>立即兑换</text>
</view>
</view> </view>
</view> </view>
<view class="card-b">
剩余油量
</view>
<view class="card-num">
123.98L
</view>
<view class="r-box">
NO.xxxxxxxxxxxxxxxxxx
</view>
</view>
<view class="card_2">
<view class="top_card">
<view class="">礼品卡</view>
<view class="">
面值 1000
</view>
</view>
<view class="card-b">
卡号xxxxxxxxxxxxxxxxx
</view>
<view class="card-b">
卡密xxxxxxxxxxxxxxxxx
</view>
<view class="r-box">
NO.xxxxxxxxxxxxxxxxxx
</view>
</view> </view>
</view> </view>
</template> </template>
@ -145,6 +87,11 @@
url: '/pagesHome/oilRecharge/oilRecharge?id=' + id url: '/pagesHome/oilRecharge/oilRecharge?id=' + id
}) })
}, },
goDetails() {
uni.navigateTo({
url: '/pagesHome/cardDetails/index'
})
},
s_() { s_() {
if (this.cardsIndex == 0) { if (this.cardsIndex == 0) {
uni.showToast({ uni.showToast({
@ -210,35 +157,12 @@
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
background: #f4f5f6; background: #f4f5f6;
}
.container {
width: 100%;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
padding-top: 88px; padding-top: 1px;
} }
.my-header {
width: 100%;
height: 88px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
color: #000;
box-sizing: border-box;
padding: 0px 15px;
padding-top: 40px;
.my-icons {
width: 20px;
}
position: fixed;
top: 0px;
}
.d_dis { .d_dis {
display: flex; display: flex;
@ -358,4 +282,74 @@
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.card_ {
width: 95%;
margin: 15px auto;
height: 135px;
background: url('../../static/new/czk.png') no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 10px;
color: #fff;
}
.top_card {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
margin-bottom: 15px;
}
.card-b {
font-size: 14px;
color: #FFFFFF;
margin-bottom: 5px;
}
.card_1 {
width: 95%;
margin: 15px auto;
height: 135px;
background: url('../../static/new/tyk.png') no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 10px;
color: #fff;
}
.card_2 {
width: 95%;
margin: 15px auto;
height: 135px;
background: url('../../static/new/lpk.png') no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 10px;
color: #fff;
}
.card_1 {
width: 95%;
margin: 15px auto;
height: 135px;
background: url('http://47.94.122.58:83/oilBg.png') no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 10px;
color: #fff;
}
.card-num {
font-size: 20px;
color: #FFFFFF;
}
.r-box {
width: 100%;
text-align: right;
}
</style> </style>

View File

@ -1,7 +1,7 @@
<template> <template>
<view class="centenr"> <view class="centenr">
<view class="vip-top"> <view class="vip-top">
<view class="t-right">储值卡</view> <view class="t-right">储值卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </view>
<view class="t-title">当前余额</view> <view class="t-title">当前余额</view>
<view class="t-num">123456.98</view> <view class="t-num">123456.98</view>
</view> </view>
@ -27,11 +27,15 @@
</view> </view>
<view class="input-box"> <view class="input-box">
<view class="i-title">赠送金额</view> <view class="i-title">赠送金额</view>
<view class="n_input"></view> <view class="n_input">
<input type="text">
</view>
</view> </view>
<view class="input-box"> <view class="input-box">
<view class="i-title">充值备注</view> <view class="i-title">充值备注</view>
<view class="b_input"></view> <view class="b_input">
<input type="text">
</view>
</view> </view>
<view class="title-box"> <view class="title-box">
<view class="i-title">充值备注</view> <view class="i-title">充值备注</view>