You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
8.5 KiB
322 lines
8.5 KiB
<template> |
|
<view class="content my-bg"> |
|
<cu-custom class="main-topbar bg-main-oil" bgColor="bg-main-oil"> |
|
<block slot="content">星油加油站</block> |
|
</cu-custom> |
|
<view class="main-money"> |
|
<view class="padding-xs flex align-center"> |
|
<view class="flex-sub text-center padding-top-lg"> |
|
<view class="txet-xxs"> |
|
<text class="text-white">今日收款(元)</text> |
|
</view> |
|
<view class=" text-sl padding padding-top-xs"><text class="text-white">8450.50</text></view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="bg-main-oil bg-main-color main-money"> |
|
|
|
</view> |
|
<view class="bg-white radius margin-left margin-right to-top"> |
|
<view class=" flex "> |
|
<view class="padding text-center flex-sub"> |
|
<text>今日消费笔数</text> |
|
<view class="padding-sm"> |
|
89 |
|
</view> |
|
<button @tap="routerTo('/pages/wallet/record/record')" class="cu-btn bg-main-oil text-white text-sm "> |
|
查看明细 |
|
</button> |
|
</view> |
|
<view class="padding text-center flex-sub"> |
|
<text>账户余额(元)</text> |
|
<view class="padding-sm"> |
|
1899.50 |
|
</view> |
|
<button @tap="routerTo('/pages/wallet/record/record')" class="cu-btn bg-main-oil text-white text-sm "> |
|
查看明细 |
|
</button> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-list grid col-3 no-border margin radius "> |
|
<view class="cu-item" @tap="routerTo('../station-info/station-info')"> |
|
<view :class="['cuIcon-' + cuIconList[0].cuIcon, 'text-' + cuIconList[0].color]" class="text-sl"> |
|
<view class="cu-tag badge" v-if="cuIconList[0].badge != 0"> |
|
<block v-if="cuIconList[0].badge != 1">{{ cuIconList[0].badge > 99 ? '99+' : cuIconList[0].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[0].name }}</text> |
|
</view> |
|
<view class="cu-item" @tap="routerTo('/pages/orderList/orderList')"> |
|
<view :class="['cuIcon-' + cuIconList[1].cuIcon, 'text-' + cuIconList[1].color]" class="text-sl"> |
|
<view class="cu-tag badge" v-if="cuIconList[1].badge != 0"> |
|
<block v-if="cuIconList[1].badge != 1">{{ cuIconList[1].badge > 99 ? '99+' : cuIconList[1].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[1].name }}</text> |
|
</view> |
|
<view class="cu-item" @tap="routerTo('../stationList/stationList')"> |
|
<view :class="['cuIcon-' + cuIconList[2].cuIcon, 'text-' + cuIconList[2].color]" class="text-sl"> |
|
<view class="cu-tag badge" v-if="cuIconList[2].badge != 0"> |
|
<block v-if="cuIconList[2].badge != 1">{{ cuIconList[2].badge > 99 ? '99+' : cuIconList[2].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[2].name }}</text> |
|
</view> |
|
<view class="cu-item" @tap="scanQr"> |
|
<view :class="['cuIcon-' + cuIconList[3].cuIcon, 'text-' + cuIconList[3].color]" class="text-sl"> |
|
<view class="cu-tag badge" v-if="cuIconList[3].badge != 0"> |
|
<block v-if="cuIconList[3].badge != 1">{{ cuIconList[3].badge > 99 ? '99+' : cuIconList[3].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[3].name }}</text> |
|
</view> |
|
<view class="cu-item"> |
|
<view :class="['cuIcon-' + cuIconList[4].cuIcon, 'text-' + cuIconList[4].color]" class="text-sl"> |
|
<view class="cu-tag badge" v-if="cuIconList[4].badge != 0"> |
|
<block v-if="cuIconList[4].badge != 1">{{ cuIconList[4].badge > 99 ? '99+' : cuIconList[4].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[4].name }}</text> |
|
</view> |
|
<view class="cu-item"> |
|
<view :class="['cuIcon-' + cuIconList[5].cuIcon, 'text-' + cuIconList[5].color]" class="text-sl"> |
|
<view class="cu-tag badge" v-if="cuIconList[5].badge != 0"> |
|
<block v-if="cuIconList[5].badge != 1">{{ cuIconList[5].badge > 99 ? '99+' : cuIconList[5].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[5].name }}</text> |
|
</view> |
|
<!-- <view class="cu-item"> |
|
<view :class="['cuIcon-' + cuIconList[6].cuIcon, 'text-' + cuIconList[6].color]"> |
|
<view class="cu-tag badge" v-if="cuIconList[6].badge != 0"> |
|
<block v-if="cuIconList[6].badge != 1">{{ cuIconList[6].badge > 99 ? '99+' : cuIconList[6].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[6].name }}</text> |
|
</view> |
|
<view class="cu-item"> |
|
<view :class="['cuIcon-' + cuIconList[7].cuIcon, 'text-' + cuIconList[7].color]"> |
|
<view class="cu-tag badge" v-if="cuIconList[7].badge != 0"> |
|
<block v-if="cuIconList[7].badge != 1">{{ cuIconList[7].badge > 99 ? '99+' : cuIconList[7].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[7].name }}</text> |
|
</view> |
|
<view class="cu-item" @tap="makeCall"> |
|
<view :class="['cuIcon-' + cuIconList[8].cuIcon, 'text-' + cuIconList[8].color]"> |
|
<view class="cu-tag badge" v-if="cuIconList[8].badge != 0"> |
|
<block v-if="cuIconList[8].badge != 1">{{ cuIconList[8].badge > 99 ? '99+' : cuIconList[8].badge }}</block> |
|
</view> |
|
</view> |
|
<text>{{ cuIconList[8].name }}</text> |
|
</view> --> |
|
<view class="padding-bottom-xl"> |
|
|
|
</view> |
|
</view> |
|
<!-- <view class="padding-top radius shadow bottom-bar-fixed"> |
|
<view class="cu-bar tabbar bg-white"> |
|
<view class="action text-gray" @tap="routerTo('../stationList/stationList')"> |
|
<view class="cuIcon-homefill"></view> |
|
加油站 |
|
</view> |
|
|
|
<view class="action text-gray add-action" @tap="toQrcode"> |
|
<button class="cu-btn cuIcon-qr_code bg-main-oil shadow"></button> |
|
加油码 |
|
</view> |
|
|
|
<view class="action text-gray" @tap="routerTo('/pages/userPage/userPage')"> |
|
<view class="cuIcon-my"></view> |
|
我的 |
|
</view> |
|
</view> |
|
</view> --> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
title: 'Hello', |
|
cuIconList: [{ |
|
cuIcon: 'location', |
|
color: 'red', |
|
badge: 120, |
|
name: '加油信息' |
|
}, |
|
{ |
|
cuIcon: 'form', |
|
color: 'orange', |
|
badge: 0, |
|
name: '加油订单' |
|
}, |
|
{ |
|
cuIcon: 'new', |
|
color: 'yellow', |
|
badge: 0, |
|
name: '经营分析' |
|
}, |
|
{ |
|
cuIcon: 'scan', |
|
color: 'olive', |
|
badge: 0, |
|
name: '扫码加油' |
|
}, |
|
{ |
|
cuIcon: 'qr_code', |
|
color: 'cyan', |
|
badge: 0, |
|
name: '油站二维码' |
|
}, |
|
{ |
|
cuIcon: 'expressman', |
|
color: 'red', |
|
badge: 0, |
|
name: '员工管理' |
|
} |
|
|
|
] |
|
}; |
|
}, |
|
onLoad() {}, |
|
methods: { |
|
thirdAdd(){ |
|
uni.chooseAddress({ |
|
success(res) { |
|
console.log(res.userName) |
|
console.log(res.postalCode) |
|
console.log(res.provinceName) |
|
console.log(res.cityName) |
|
console.log(res.countyName) |
|
console.log(res.detailInfo) |
|
console.log(res.nationalCode) |
|
console.log(res.telNumber) |
|
} |
|
}) |
|
}, |
|
scanQr(){ |
|
uni.scanCode({ |
|
onlyFromCamera: true, |
|
success: function(res) { |
|
console.log('条码类型:' + res.scanType); |
|
console.log('条码内容:' + res.result); |
|
uni.vibrate({ |
|
success: function() { |
|
console.log('success'); |
|
} |
|
}) |
|
} |
|
}) |
|
}, |
|
copy() { |
|
uni.setClipboardData({ |
|
data: 'lallalala', |
|
success() { |
|
uni.showToast({ |
|
title: '复制成功', |
|
position: 'bottom', |
|
icon: 'none' |
|
}) |
|
} |
|
}) |
|
}, |
|
toAuth() { |
|
uni.navigateTo({ |
|
url: '/pages/authentication/authForm/authForm' |
|
}) |
|
}, |
|
toQrcode() { |
|
uni.navigateTo({ |
|
url: '/pages/qrcode/qrcodeList/qrcodeList' |
|
}); |
|
}, |
|
routerTo(url) { |
|
uni.navigateTo({ |
|
url: url |
|
}); |
|
}, |
|
toLogin() { |
|
uni.navigateTo({ |
|
url: 'pages/login/login' |
|
}); |
|
}, |
|
// 拨打电话 |
|
makeCall() { |
|
uni.makePhoneCall({ |
|
phoneNumber: '4008-56-5355' //仅为示例 |
|
}) |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style> |
|
.content { |
|
height: 100%; |
|
} |
|
|
|
.bottom-bar { |
|
position: relative; |
|
padding-top: 50px; |
|
margin-bottom: 0; |
|
margin-top: 0; |
|
} |
|
|
|
.main-topbar>>>.cu-bar { |
|
height: 380rpx !important; |
|
z-index: 0 !important; |
|
} |
|
|
|
.main-topbar>>>.cu-bar .content { |
|
padding-bottom: 300rpx; |
|
} |
|
|
|
.bottom-bar-fixed { |
|
position: fixed; |
|
bottom: 0; |
|
padding-top: 70rpx; |
|
width: 100%; |
|
} |
|
|
|
.main-money { |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
.van-tag { |
|
display: inline-block; |
|
padding: 0.3rem 0.4rem; |
|
position: absolute; |
|
right: 1px; |
|
font-size: 12px; |
|
top: 25%; |
|
background-color: #b9ffca; |
|
border-radius: 10rem 0 0 10rem; |
|
border-color: transparent; |
|
} |
|
|
|
.bg-main-color { |
|
min-height: 160rpx; |
|
} |
|
|
|
.to-top { |
|
position: relative; |
|
top: -140rpx; |
|
z-index: 1; |
|
} |
|
|
|
.cu-list { |
|
position: relative; |
|
top: -140rpx; |
|
z-index: 1; |
|
} |
|
|
|
.cu-list.grid>.cu-item [class*=cuIcon] { |
|
font-size: 75rpx; |
|
} |
|
</style>
|
|
|