第一次提交

This commit is contained in:
caolc
2023-02-15 09:25:11 +08:00
commit ea8e9f9eb7
202 changed files with 38601 additions and 0 deletions

View File

@@ -0,0 +1,328 @@
<template>
<view>
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">油豆中心</block>
</cu-custom>
<view class="" v-show="accountStatus">
<view class="placeholder bg-main-oil">
</view>
<view class="move-top">
<view class="flex radius margin my-shadow position-re">
<view class="basis-sm text-center padding bg-gradual-black">
我的油豆
</view>
<view class="basis-lg padding bg-white">
总余额<text class="text-red">{{userTotal.oilCardTotalPrice|moneyFormat}}</text>
<text class="cu-tag yu-tag-right position-ab sm">{{cardList.length>0?cardList.length:1}}
</text>
</view>
</view>
<!-- <view class="flex radius margin my-shadow position-re">
<view class="basis-sm text-center padding bg-gradual-black">
自营公司油卡
</view>
<view class="basis-lg padding bg-white">
余额400.00
<text class="cu-tag yu-tag-right position-ab sm">1</text>
</view>
</view>
<view class="flex radius margin my-shadow position-re">
<view class="basis-sm text-center padding bg-gradual-black">
三方公司油卡
</view>
<view class="basis-lg padding bg-white">
总余额<text class="text-red">{{userTotal.oilCardTotalPrice|moneyFormat}}</text>
<text class="cu-tag yu-tag-right position-ab sm">{{cardList.length-1>0?cardList.length-1:1}}</text>
</view>
</view> -->
</view>
</view>
<view class=" margin-bottom-lg">
<swiper class="screen-swiper square-dot" @change="cardSwiper" :indicator-dots="true" :circular="true"
:autoplay="false" interval="5000" duration="500">
<swiper-item v-for="(item,index) in cardList" :key="index" :class="cardCur==index?'cur':''">
<!-- <image :src="imgURL+ (item.type=='zs'?'card-zs.png':'card-other.png')" mode="aspectFill">
</image> -->
<oil-card :card="item"></oil-card>
</swiper-item>
</swiper>
</view>
<view class="transactions padding-top solid-top margin my-shadow radius margin-top">
<view class="" v-if="cardList[cardCur].shareCompanyQuota==1">
<view class="text-center ">
<view class="text-red padding-bottom-sm text-bold text-lg">
共享企业余额
</view>
<text
class="text-grey">单日加油额度{{cardList[cardCur].orderAmountToplimit}}单日加油升数额度{{cardList[cardCur].orderVolumeToplimit}}L</text>
</view>
<view class="text-center padding">
<!-- <view class="text-red text-bold text-lg">
{{userTotal.oilCardTotalPrice|moneyFormat}}
</view> -->
<text class="">交易记录</text>
</view>
</view>
<view>
<view class="cu-list menu" v-if="historyLsit.length>0">
<view class="cu-item" v-for="detail in historyLsit" :key="detail.id">
<view class="content padding-tb-sm">
<view class="text-gray text-sm">
{{detail.createTime}}
</view>
<view>
{{detail.billTypeName + ' '}}{{ detail.occurAmount|moneyFormat}}
</view>
</view>
<view class="action">
<text class="text-black">{{detail.occurAmount|moneyFormat}}</text>
</view>
</view>
</view>
<my-empty v-else :marginTopExtra="false"></my-empty>
</view>
</view>
<view class="bg-white">
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</view>
</template>
<script>
import oilCard from '../../components/oil-card/oil-card.vue'
import accountApi from '@/api/account.js'
export default {
components: {
oilCard
},
data() {
return {
loadStatus: 'load',
userTotal: {},
historyLsit: [],
accountStatus: uni.getStorageSync('accountStatus'),
imgURL: this.global.imgURL,
cardCur: 0,
swiperList: [{
id: 0,
bgColor: 'bg-gradual-blue',
text: '油卡卡10086',
type: 'zs'
},
{
id: 1,
bgColor: 'bg-gradual-purple',
text: '油卡卡123454',
type: 'other'
},
{
id: 2,
bgColor: 'bg-gradual-green',
text: '油卡卡896671',
type: 'other'
},
{
id: 3,
bgColor: 'bg-gradual-orange',
text: '油卡卡567651',
type: 'other'
},
{
id: 4,
bgColor: 'bg-gradual-pink',
text: '油卡卡454565651',
type: 'other'
},
{
id: 5,
bgColor: 'bg-gradual-red',
text: '油卡卡154645645',
type: 'other'
},
],
dotStyle: false,
towerStart: 0,
direction: '',
cardList: [],
currentPage: 1
};
},
onLoad() {
this.getCards()
this.getTotalOilCardInfo()
this.TowerSwiper('swiperList');
// 初始化towerSwiper 传已有的数组名即可
},
onReachBottom() {
if (this.loadStatus == 'more') {
setTimeout(() => {
this.getMoneyDetail(this.cardList[0])
}, 100)
} else {
uni.showToast({
title: '到底啦',
icon: 'none'
})
}
},
methods: {
getAmount() {
accountApi.getTotalOilCardInfo().then(res => {
if (res.code == 20000) {
this.userTotal = res.data
}
})
},
getTotalOilCardInfo() {
accountApi.getTotalOilCardInfo().then(res => {
if (res.code == 20000) {
this.userTotal = res.data
}
})
},
getMoneyDetail(card) {
let data2 = {
currentPage: this.currentPage,
index: this.historyLsit.length?this.historyLsit.length:0,
pageSize: 20,
params: {
id: card.id,
oilCardType: card.oilCardType
}
}
accountApi.getOilCardRecordByPage(data2).then(res => {
if (res.code == 20000) {
if (res.data.list.length < 20) {
this.loadStatus = 'nomore'
} else {
this.loadStatus = 'more'
this.currentPage++
}
this.historyLsit = this.historyLsit.concat(res.data.list)
}
})
},
getCards() {
accountApi.getUserAccount().then(res => {
if (res.code == 20000) {
this.cardList = res.data
if (this.cardList.length > 0) {
this.getMoneyDetail(this.cardList[0])
}
}
})
},
DotStyle(e) {
this.dotStyle = e.detail.value
},
// cardSwiper
cardSwiper(e) {
this.cardCur = e.detail.current
this.getMoneyDetail(this.cardList[this.cardCur])
},
// towerSwiper
// 初始化towerSwiper
TowerSwiper(name) {
let list = this[name];
for (let i = 0; i < list.length; i++) {
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
list[i].mLeft = i - parseInt(list.length / 2)
}
this.swiperList = list
},
// towerSwiper触摸开始
TowerStart(e) {
this.towerStart = e.touches[0].pageX
},
// towerSwiper计算方向
TowerMove(e) {
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
},
// towerSwiper计算滚动
TowerEnd(e) {
let direction = this.direction;
let list = this.swiperList;
if (direction == 'right') {
let mLeft = list[0].mLeft;
let zIndex = list[0].zIndex;
for (let i = 1; i < this.swiperList.length; i++) {
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
}
this.swiperList[list.length - 1].mLeft = mLeft;
this.swiperList[list.length - 1].zIndex = zIndex;
} else {
let mLeft = list[list.length - 1].mLeft;
let zIndex = list[list.length - 1].zIndex;
for (let i = this.swiperList.length - 1; i > 0; i--) {
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
}
this.swiperList[0].mLeft = mLeft;
this.swiperList[0].zIndex = zIndex;
}
this.direction = ""
this.swiperList = this.swiperList
},
},
filters: {
moneyFormat(value) {
if (value) {
return value.toFixed(2)
} else {
return '0.00'
}
}
}
}
</script>
<style scoped>
.tower-swiper .tower-item {
transform: scale(calc(0.5 + var(--index) / 10));
margin-left: calc(var(--left) * 100upx - 150upx);
z-index: var(--index);
}
.placeholder {
width: 750upx;
min-height: 115rpx;
}
.move-top {
margin-top: -110rpx;
}
.yu-tag-right {
top: 0;
right: 0;
border-radius: 0 0 0 12px;
background-color: #FF6D6E !important;
color: #fff;
padding: 0 10px;
}
.inner-card {
height: 100%;
}
.opacity-half {
opacity: 0.2;
}
</style>

View File

@@ -0,0 +1,31 @@
<template>
<view class="page-content bg-main-oil">
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">小星加油</block>
</cu-custom>
<view class="margin-top-xl padding">
<button class="bg-white oil-main-color">转入</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
.page-content {
min-height: 100%;
}
</style>

View File

@@ -0,0 +1,132 @@
<template>
<view>
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">加油码</block>
</cu-custom>
<view class="main padding-top">
<view class="card" @tap="routerTo('xk')">
<view class="text">
<view class="">
<text class="title font-16 ">星油</text> </view> <text class="font-14">加油码</text>
<view class="tip-container font-12">支持油站星油/老吕油站</view>
</view>
<view class="qr-bg">
<image src="https://www.51xingka.net/LSMOIL/static/img/xk.png"></image>
</view>
<text color="#fff" class="opened van-tag">{{'111'}}</text>
</view>
<view class="margin-top-xs">
</view>
<view class="card margin-top" @tap="routerTo('wjy')">
<view class="text">
<view class="">
<text class="title font-16 ">万金油</text>
</view>
<text class="font-14">加油码</text>
</view>
<view class="qr-bg">
<image src="https://www.51xingka.net/LSMOIL/static/img/wjy.png"></image>
</view>
<text color="#fff" v-if="wanjinAccount" class="opened van-tag">{{'111'}}</text>
<text color="#D54C4C" v-else class="before-open van-tag">{{'111'}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
wanjinAccount: true
}
},
methods: {
routerTo(key) {
if(key==='xk'){
var url ='/pages/qrcode/QrCode_xy/QrCode_xy'
}else{
var url = '/pages/qrcode/QrCode-wjy/QrCode-wjy'
}
// console.log(url)
uni.navigateTo({
url: url,
fail:(err)=>{
// console.log('失败',url,err)
}
})
}
}
}
</script>
<style scoped>
.card {
position: relative;
width: 700upx;
margin: auto;
}
.qr-bg {
min-height: 200rpx;
text-align: center;
max-height: 300rpx;
}
.text {
position: absolute;
z-index: 1;
left: 4rem;
top: 1.2rem;
color: #fff;
}
.van-tag {
display: inline-block;
padding: 0.3rem 0.4rem;
position: absolute;
right: 1px;
font-size: 12px;
top: 15.75%;
background-color: #fff;
border-radius: 10rem 0 0 10rem;
border-color: transparent;
}
.opened {
color: #fe0505;
}
.before-open {
padding-bottom: 4px;
}
.qr-bg image {
background-size: cover;
width: 700upx;
height: 232rpx;
}
.tip-container {
margin-top: 0.5rem;
color: rgba(191, 39, 1, 1);
background: rgba(255, 255, 255, 1);
box-shadow: 6px 2px 6px 1px rgba(0, 0, 0, 0.06);
opacity: 0.71;
border-radius: 0px 20px 20px 15px;
padding: 0.3rem 0.8rem;
}
.opened {
color: #fe0505;
}
.before-open {
padding-bottom: 4px;
}
</style>

View File

@@ -0,0 +1,289 @@
<template>
<view>
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">油卡中心</block>
</cu-custom>
<view class="">
<view class="placeholder bg-main-oil">
</view>
<view class="move-top">
<view class="" v-for="item in cardList" :key="item.accountCardCode">
<oil-card :card="item"></oil-card>
</view>
</view>
</view>
<view class="g-shadow padding margin radius">
<text class=" padding-left text-df">充值金额</text>
<view class="cu-form-group">
<input type="digit" placeholder="请输入金额" v-model="reChargeMoney" name="input"></input>
<view class="text-xxl"></view>
</view>
<view class="grid col-3 padding-sm">
<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
<button class="cu-btn red lg block" :class="item.checked?'bg-blue':'line-red'" @tap="ChooseCheckbox"
:data-value="item.value"> {{item.name}}
<view class="cu-tag sm round" :class="item.checked?'bg-white text-red':'bg-blue'"
v-if="item.hot">HOT</view>
</button>
</view>
</view>
<view class="transactions margin radius">
<view class="bottom-btn padding-top-lg">
<button class="text-center bg-blue text-block" @tap="reCharge">立即充油</button>
</view>
</view>
</view>
<view class="cu-modal" :class="modalName=='success'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">充油金额到账成功</view>
<view class="action" @tap="modalName=''">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-bottom-lg">
<view class="bg-img padding-left padding-right flex align-center"
:style="'background-image: url('+imgURL+'recharge-success.png);'">
<view class="padding-xl text-left text-white">
<view class=" text-bold">
<!-- <text v-show="cardList[0].oilCardType==2">
直属油卡
</text>
<text v-show="cardList[0].oilCardType==3">
外请油卡
</text>
<text v-show="cardList[0].oilCardType==1">
个人油卡
</text> -->
</view>
<view class="padding-bottom-xs padding-top-lg card-color padding-bottom text-xxl">
{{cardList[0].accountCardCode|cardNoFormat}}
</view>
<view class="padding-bottom-xs text-sm text-black text-ABC">
<!-- {{card.companyName}} -->
Personal oil card
</view>
<view class="padding-xs text-lg">
<text class="text-sm">账户余额:</text>
<text class="text-xl text-bold padding-left-xs" v-if="cardList[0].shareCompanyQuota==1">
共享余额
</text>
<text class="text-sm padding-left-xs" v-else>
{{lastMoney|moneyFormat}}
</text>
</view>
</view>
</view>
<view class="text-center">
此时余额为 <text class="text-red padding text-lg text-bold">{{lastMoney|moneyFormat}}</text>
<view class="">
如有疑问请联系在线客服
</view>
<view class="padding margin padding-bottom-0 margin-bottom-0 padding-top-0">
<button @tap="backIndex" class=" line-red">关闭</button>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import accountApi from '@/api/account.js'
import oilCard from '../../components/oil-card/oil-card.vue'
export default {
components: {
oilCard
},
data() {
return {
cooling: false,
modalName: '',
imgURL: this.global.imgURL,
cardCur: 0,
checkbox: [{
value: 100,
name: '100元',
checked: false,
hot: false,
}, {
value: 200,
name: '200元',
checked: false,
hot: false,
}, {
value: 500,
name: '500元',
checked: false,
hot: false,
}, {
value: 1000,
name: '1000元',
checked: false,
hot: false,
}, {
value: 2000,
name: '2000元',
checked: false,
hot: false,
}, {
value: 5000,
name: '5000元',
checked: false,
hot: false,
}],
reChargeMoney: '',
cardList: [],
lastMoney: '',
outTradeNo: '' // 商户订单号
};
},
onLoad() {
this.getCards()
// 初始化towerSwiper 传已有的数组名即可
},
filters:{
moneyFormat(value) {
if (value) {
return value.toFixed(2)
} else {
return '0.00'
}
},
cardNoFormat(value) {
if (value) {
return value.replace(/(.{4})/g,'$1 ')
}
}
},
methods: {
reCharge() {
if (!this.cooling) {
this.cooling = true
let payData = {
openId: uni.getStorageSync('openid'),
unionId: uni.getStorageSync('unionid'),
appId: "wx2f203fde39b883bc",
rechargeSource: 'WECHAT_APPETS',
rechargeAmount: this.reChargeMoney + '',
createSource: 'XOIL_DRIVER_WECHAT_APPLET',
payCode: 'WECHAT_MP',
}
accountApi.getUserPayInfo(payData).then(res => {
if (res.code == 20000) {
let reqPay = res.data.baseWxOrderVo
this.outTradeNo = res.data.outTradeNo
uni.requestPayment({
provider: 'wxpay',
...reqPay,
success: (res) => {
this.getPayStatus(this.outTradeNo)
this.getLastMoney()
this.getCards()
// console.log('success:' + JSON.stringify(res));
},
fail: function(err) {
// console.log('fail:' + JSON.stringify(err));
},
complete: () => {
this.cooling = fasle
}
})
}
})
}else{
uni.showToast({
icon:'none',
title:'操作频繁'
})
}
},
backIndex() {
uni.navigateBack({
})
},
getLastMoney() {
// 查最新余额
accountApi.getCustomerAccount().then(res => {
if (res.code == 20000) {
this.lastMoney = res.data
}
})
},
getPayStatus(id) {
accountApi.pollingPayResult(id).then(res => {
if (res.code == 20000) {
// 提示到账成功
this.modalName = 'success'
}
})
},
getCards() {
accountApi.getUserAccount().then(res => {
if (res.code == 20000) {
this.cardList = res.data
}
})
},
ChooseCheckbox(e) {
let items = this.checkbox;
let values = e.currentTarget.dataset.value;
this.reChargeMoney = values
for (let i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) {
items[i].checked = !items[i].checked;
} else {
items[i].checked = false
}
}
}
}
}
</script>
<style scoped>
.tower-swiper .tower-item {
transform: scale(calc(0.5 + var(--index) / 10));
margin-left: calc(var(--left) * 100upx - 150upx);
z-index: var(--index);
}
.placeholder {
width: 750upx;
min-height: 115rpx;
}
.move-top {
margin-top: -110rpx;
}
.yu-tag-right {
top: 0;
right: 0;
border-radius: 0 0 0 12px;
background-color: #FF6D6E !important;
color: #fff;
padding: 0 10px;
}
.inner-card {
height: 100%;
}
.opacity-half {
opacity: 0.2;
}
.card-color{
color: #F5E558;
}
</style>

View File

@@ -0,0 +1,67 @@
<template>
<view class="page-content my-bg">
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">转入记录</block>
</cu-custom>
<view class="margin bg-white radius main-money ">
<view class="padding-xs flex align-center" @tap="copy">
<view class="flex-sub text-center padding-top">
<view class="text-center">星油余额</view>
<view class=" text-xxl padding-top-xs">
<text class="text-price text-red ">
80.00
</text>
</view>
</view>
</view>
<view class="padding margin-left margin-right flex flex-direction">
<button class="cu-btn bg-main-oil oil-main-btn-color oil-main-color lg">
转入
</button>
</view>
</view>
<view class="margin">
<view class="padding-top flex padding-left-xs padding-bottom">
<view class="flex-sub">
<text>最近的五笔交易</text>
</view>
<view class="flex-sub text-right padding-right-xs">
<text class="text-gray">更多</text>
<text class="cuIcon-right text-gray"></text>
</view>
</view>
<view class="cu-list menu">
<view class="cu-item">
<view class="content">
微信充值
</view>
<view class="action">
0.20
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
.page-content {
min-height: 100%;
}
</style>