first commit
This commit is contained in:
PC-202306242200\Administrator
100
pages/mine/car/add.vue
Normal file
100
pages/mine/car/add.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="container_block">
|
||||
<view class="vehicle-status">
|
||||
<view class="status-item">
|
||||
<image src="/static/icon/mine/parking.png" mode="aspectFit" />
|
||||
<text>停车定位</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<image src="/static/icon/mine/charging.png" mode="aspectFit" />
|
||||
<text>充电状态</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<image src="/static/icon/mine/location.png" mode="aspectFit" />
|
||||
<text>精确定位</text>
|
||||
</view>
|
||||
</view>
|
||||
<car-number-input @numberInputResult="numberInputResult"></car-number-input>
|
||||
<view style="color: #6fa256; font-size: 24rpx; margin-top: 40rpx">绑定车牌后，在指定充电站可享减免停车费或免费停车</view>
|
||||
</view>
|
||||
<button class="confirm-button" @click="submit">确定</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { carAdd } from '@/api/api.js';
|
||||
|
||||
let formData = ref({
|
||||
licensePlate: '',
|
||||
isDefault: 0
|
||||
});
|
||||
|
||||
const numberInputResult = (e) => {
|
||||
formData.value.licensePlate = e;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
carAdd(formData.value).then((res) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '添加成功',
|
||||
showCancel: false,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateBack();
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 30rpx;
|
||||
|
||||
&_block {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
padding: 28rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
width: 488rpx;
|
||||
height: 86rpx;
|
||||
background: #6fa256;
|
||||
border-radius: 44rpx 44rpx 44rpx 44rpx;
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 332rpx;
|
||||
}
|
||||
|
||||
.vehicle-status {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 25rpx;
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
pages/mine/car/car.vue
Normal file
144
pages/mine/car/car.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<view class="car-list">
|
||||
<view class="car-item" v-for="(car, index) in cars" :key="index">
|
||||
<view class="car-number">
|
||||
<view>NO{{ index + 1 }}.</view>
|
||||
<image @click="delCar(car)" src="/static/image/cardel.png" style="width: 40rpx; height: 40rpx"></image>
|
||||
</view>
|
||||
<view class="car-info">
|
||||
<view>
|
||||
<view class="car-default">
|
||||
<view>默认车辆</view>
|
||||
</view>
|
||||
|
||||
<view class="car-plate">
|
||||
<image style="width: 198rpx; height: 56rpx; position: absolute; top: 0; left: 0" src="/static/image/carNum.png"></image>
|
||||
<text>{{ car.licensePlate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<image :src="car.image" class="car-image" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="add-car">
|
||||
<view class="add-car-jia">+</view>
|
||||
<view @click="navTo('/pages/mine/car/add')">添加我的爱车</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useNav } from '@/hooks/useNav.js';
|
||||
import { carList, carDel } from '@/api/api.js';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
const { navTo } = useNav();
|
||||
const cars = ref([]);
|
||||
|
||||
onLoad(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const getList = () => {
|
||||
carList().then((res) => {
|
||||
cars.value = res.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
image: '/static/image/car-image.png'
|
||||
};
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delCar = (item) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除该车辆信息？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
carDel(item.id).then((res) => {
|
||||
getList();
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.car-list {
|
||||
padding: 30rpx;
|
||||
}
|
||||
.car-item {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
.car-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
}
|
||||
.car-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.car-default {
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 45rpx;
|
||||
}
|
||||
|
||||
.car-plate {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 198rpx;
|
||||
height: 56rpx;
|
||||
text {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
.car-image {
|
||||
width: 336rpx;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.add-car {
|
||||
width: 690rpx;
|
||||
height: 176rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #232323;
|
||||
}
|
||||
.add-car-jia {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
background: rgba(111, 162, 86, 0.1);
|
||||
border-radius: 50%;
|
||||
font-weight: 500;
|
||||
color: rgba(111, 162, 86, 1);
|
||||
font-size: 70rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin-right: 25rpx;
|
||||
}
|
||||
</style>
|
||||
96
pages/mine/card.vue
Normal file
96
pages/mine/card.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view class="earnings p30">
|
||||
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
|
||||
<view style="margin-bottom: 30rpx" @click="toCrud(item)" class="mt30 wallet_list" v-for="(item, index) in dataList" :key="index">
|
||||
<view style="color: #fff">
|
||||
<view style="font-weight: bold; font-size: 32rpx; margin-bottom: 18rpx">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view style="margin-bottom: 12rpx; font-size: 28rpx; color: #eee">
|
||||
卡号：{{ item.cardNo }}
|
||||
</view>
|
||||
<view style="margin-bottom: 12rpx; font-size: 28rpx; color: #eee">
|
||||
电站：{{ item.stationName }}
|
||||
</view>
|
||||
<view style="font-size: 28rpx; color: #eee">
|
||||
商户：{{ item.merchantName }}
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex; flex-direction: column; align-items: center; color: #fff; font-weight: bold; font-size: 26rpx">
|
||||
<view style="font-size: 55rpx; margin-bottom: 30rpx">{{ item.balance }}</view>
|
||||
<view style="font-weight: 500">余额</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed } from 'vue';
|
||||
import { onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { timeFormat } from '@/uni_modules/uview-plus';
|
||||
import { userCardList } from '@/api/api.js';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { useNav } from '@/hooks/useNav.js';
|
||||
|
||||
const changeSele = (e) => {
|
||||
paging.value.reload();
|
||||
};
|
||||
|
||||
const { nav, navTo } = useNav();
|
||||
let getInfo = ref({});
|
||||
const paging = ref(null);
|
||||
let dataList = ref([]);
|
||||
|
||||
let isPagingRefNotFound = () => {
|
||||
return !paging.value;
|
||||
};
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.reload().catch(() => {});
|
||||
});
|
||||
|
||||
onPageScroll((e) => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.updatePageScrollTop(e.scrollTop);
|
||||
e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.pageReachBottom();
|
||||
});
|
||||
|
||||
const queryList = (pageNo, pageSize) => {
|
||||
const params = {
|
||||
current: pageNo,
|
||||
pageSize: pageSize
|
||||
};
|
||||
|
||||
userCardList(params)
|
||||
.then((res) => {
|
||||
paging.value.complete(res);
|
||||
})
|
||||
.catch((res) => {
|
||||
paging.value.complete(false);
|
||||
});
|
||||
};
|
||||
|
||||
let toCrud = ()=>{
|
||||
uni.navigateTo({
|
||||
url:'./cardList?id=' + e.id
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wallet_list {
|
||||
border-radius: 15rpx;
|
||||
background-color: #4879e6;
|
||||
padding: 35rpx 50rpx 35rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
151
pages/mine/cardList.vue
Normal file
151
pages/mine/cardList.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<view class="earnings p30">
|
||||
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
|
||||
<view style="margin-bottom: 30rpx" class="mt30 wallet_list" v-for="(item, index) in dataList" :key="index">
|
||||
<view class="wallet_list_left">
|
||||
<view>{{ item.recordName || '-' }}</view>
|
||||
<view>{{ item.createTime }}</view>
|
||||
</view>
|
||||
<view class="wallet_list_right" style="display: flex; flex-direction: column; align-items: flex-end">
|
||||
<!-- <view style="margin-bottom: 10rpx; width: 75rpx">
|
||||
<view></view>
|
||||
<up-tag v-if="item.pointType == 2" size="mini" text="余额" type="warning" plain plainFill></up-tag>
|
||||
<up-tag v-if="item.pointType == 1" size="mini" text="收益" plain plainFill></up-tag>
|
||||
</view> -->
|
||||
<view>{{ item.amount }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed } from 'vue';
|
||||
import { onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { timeFormat } from '@/uni_modules/uview-plus';
|
||||
import { userCardRecord } from '@/api/api.js';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { useNav } from '@/hooks/useNav.js';
|
||||
|
||||
let id = ref('');
|
||||
|
||||
const changeSele = (e) => {
|
||||
paging.value.reload();
|
||||
};
|
||||
|
||||
const { nav, navTo } = useNav();
|
||||
let getInfo = ref({});
|
||||
const paging = ref(null);
|
||||
let dataList = ref([]);
|
||||
|
||||
let isPagingRefNotFound = () => {
|
||||
return !paging.value;
|
||||
};
|
||||
|
||||
onLoad((options) => {
|
||||
id.value = options.id;
|
||||
});
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.reload().catch(() => {});
|
||||
});
|
||||
|
||||
onPageScroll((e) => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.updatePageScrollTop(e.scrollTop);
|
||||
e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.pageReachBottom();
|
||||
});
|
||||
|
||||
const queryList = (pageNo, pageSize) => {
|
||||
const params = {
|
||||
current: pageNo,
|
||||
pageSize: pageSize,
|
||||
id: id.value
|
||||
};
|
||||
|
||||
userCardRecord(params)
|
||||
.then((res) => {
|
||||
paging.value.complete(res);
|
||||
})
|
||||
.catch((res) => {
|
||||
paging.value.complete(false);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wallet_pall {
|
||||
width: 690rpx;
|
||||
height: 272rpx;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 40rpx;
|
||||
background: #ffffff;
|
||||
&_header {
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #002ea4;
|
||||
}
|
||||
&_ye {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 70%;
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 68rpx;
|
||||
color: #002ea4;
|
||||
}
|
||||
view:nth-child(2) {
|
||||
width: 128rpx;
|
||||
height: 58rpx;
|
||||
background: rgba(0, 46, 164, 0.07);
|
||||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #002ea4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wallet_list {
|
||||
width: 690rpx;
|
||||
// height: 120rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
padding: 15rpx 30rpx;
|
||||
@include flex($space: space-between);
|
||||
&_left {
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #232323;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
view:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
}
|
||||
view:nth-child(3) {
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
}
|
||||
view:nth-child(4) {
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
&_right {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #ff2727;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
18
pages/mine/earnings.vue
Normal file
18
pages/mine/earnings.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<view class="earnings">
|
||||
<up-cell-group>
|
||||
<up-cell icon="integral-fill" title="会员等级" value="新版本"></up-cell>
|
||||
</up-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
225
pages/mine/incomeList.vue
Normal file
225
pages/mine/incomeList.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="balance-section text-center">
|
||||
<view class="grey-text mb12">总余额（元）</view>
|
||||
<view class="amount">{{ info.balance || 0 }}</view>
|
||||
<view class="details">
|
||||
<view class="detail-item right-border">
|
||||
<view class="grey-text mb12">可提取金额</view>
|
||||
<view class="text-40-bold">{{ userInfo.balance || 0 }}</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="grey-text mb12">冻结金额</view>
|
||||
<view class="text-40-bold">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="transaction-section">
|
||||
<view class="transaction-date">
|
||||
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||||
<text>{{ date }}</text>
|
||||
<image src="/static/icon/xai.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="text-24-bold mx-24">充值￥{{ statistics.inMoney }} 提现/支出人民币{{ statistics.outMoney }}</view>
|
||||
<z-paging ref="paging" v-model="recordData" use-page-scroll @query="queryList">
|
||||
<view class="transaction-list">
|
||||
<view class="transaction-item" v-for="(item, index) in recordData" :key="index">
|
||||
<text class="text-24-bold" :class="[getItemColor(item.sourceType)]">
|
||||
{{item.recordName}}{{item.amount}}
|
||||
</text>
|
||||
<view class="line"></view>
|
||||
<text class="text-24-bold">{{item.createTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
|
||||
<view class="button-section">
|
||||
<!-- <button class="withdraw-button">提现</button> -->
|
||||
<button class="recharge-button" @click="navTo('/pages/money/recharge')">充值</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { userInfo, walletRecord } from '@/api/api.js';
|
||||
import { useNav } from '@/hooks/useNav.js';
|
||||
const { navTo } = useNav();
|
||||
|
||||
const info = ref({});
|
||||
const date = ref()
|
||||
const statistics = reactive({
|
||||
outMoney: 0,
|
||||
inMoney: 0,
|
||||
})
|
||||
const paging = ref()
|
||||
|
||||
const currentDate = new Date();
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth() + 1;
|
||||
date.value = year + "-" + (month < 10 ? "0" + month : month);
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await userInfo();
|
||||
info.value = res;
|
||||
});
|
||||
|
||||
const recordData = ref()
|
||||
const getItemColor = v => {
|
||||
if (v == 11) {
|
||||
return "text-green-dark"
|
||||
} else if(v == 21) {
|
||||
return "text-red"
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
const queryList = async (pageNo, pageSize) => {
|
||||
walletRecord({
|
||||
current: pageNo,
|
||||
pageSize,
|
||||
time: date.value
|
||||
})
|
||||
.then((res) => {
|
||||
statistics.inMoney = res.inMoney;
|
||||
statistics.outMoney = res.outMoney;
|
||||
paging.value.complete(res.record);
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch((res) => {
|
||||
paging.value.complete(false);
|
||||
uni.hideLoading();
|
||||
});
|
||||
};
|
||||
const bindDateChange = e => {
|
||||
date.value = e.detail.value;
|
||||
paging.value.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
// padding: 36rpx 30rpx;
|
||||
.balance-section {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
margin: 36rpx 30rpx;
|
||||
padding: 36rpx 48rpx;
|
||||
.grey-text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
}
|
||||
.amount {
|
||||
font-weight: bold;
|
||||
font-size: 54rpx;
|
||||
color: #232323;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
.details {
|
||||
border-top: 2rpx solid #EEEEEE;
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
.detail-item {
|
||||
width: 50%;
|
||||
}
|
||||
.right-border {
|
||||
border-right: 2rpx solid #EEEEEE;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-40-bold {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #232323;
|
||||
}
|
||||
.text-24-bold {
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
}
|
||||
.mb12 {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.transaction-section {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
margin: 36rpx 30rpx;
|
||||
.transaction-date {
|
||||
font-family: DIN, DIN;
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #232323;
|
||||
padding: 24rpx 24rpx 14rpx;
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
.mx-24 {
|
||||
margin-left: 24rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
.transaction-list {
|
||||
padding: 36rpx 24rpx;
|
||||
.transaction-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
.line {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
border-top: 2rpx dashed #999999;
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-green-dark {
|
||||
color: #6FA256;
|
||||
}
|
||||
.text-green-bright {
|
||||
color: #3BCF73;
|
||||
}
|
||||
.text-red {
|
||||
color: #FF2C2C;
|
||||
}
|
||||
.button-section {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
left: 0;
|
||||
bottom: 76rpx;
|
||||
.withdraw-button, .recharge-button {
|
||||
width: 330rpx;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
border-radius: 46rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
.withdraw-button::after, .recharge-button::after {
|
||||
border-width: 0;
|
||||
}
|
||||
.withdraw-button {
|
||||
background: #eaf1e7;
|
||||
color: #77B658;
|
||||
}
|
||||
.recharge-button {
|
||||
background: #77B658;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
322
pages/mine/mine.vue
Normal file
322
pages/mine/mine.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<view class="mine">
|
||||
<!-- 头部个人信息 -->
|
||||
<view class="header">
|
||||
<view class="user-info" @click="navTo('/pages/mine/sett')">
|
||||
<up-avatar size="120rpx" :src="user.avatar" />
|
||||
<view class="user-detail" v-if="user.nickName || user.username">
|
||||
<text class="nickname">{{ user.nickName || user.username }}</text>
|
||||
<text class="phone">{{ user.phone || user.mobile }}</text>
|
||||
</view>
|
||||
<view class="user-detail" v-else>
|
||||
<text class="nickname">您还未登录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qr-code" v-if="isInvest">
|
||||
<image @click="lookImg([user.qrcode])" :src="user.qrcode" mode="aspectFit" />
|
||||
<text>邀请码</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 余额积分 -->
|
||||
<view class="balance-wrap">
|
||||
<view class="balance-item" @click="">
|
||||
<text class="amount">{{ user.balance || '0' }}</text>
|
||||
<text class="label">余额</text>
|
||||
</view>
|
||||
<view v-if="!isInvest" class="balance-item" @click="navTo('/pages/mine/signIn')">
|
||||
<text class="amount">{{ user.points || '0' }}</text>
|
||||
<text class="label">积分</text>
|
||||
</view>
|
||||
<view v-else class="balance-item" @click="navTo('/pageInvest/facility/facility')">
|
||||
<text class="amount">{{ user.deviceNum || '0' }}</text>
|
||||
<text class="label">充电桩</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的爱车 -->
|
||||
<view class="vehicle-section" v-if="!isInvest">
|
||||
<view class="section-header">
|
||||
<text style="font-weight: bold">我的爱车</text>
|
||||
<text class="more" @click="navTo('/pages/mine/car/car')">全部车辆 ></text>
|
||||
</view>
|
||||
|
||||
<view class="car-plate" v-if="user.licensePlate" @click="navTo('/pages/mine/car/car')">
|
||||
<image style="width: 198rpx; height: 56rpx; position: absolute; top: 0; left: 0" src="/static/image/carNum.png"></image>
|
||||
<text>{{ user.licensePlate }}</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="add-vehicle" @click="navTo('/pages/mine/car/add')">
|
||||
<view class="add-btn">
|
||||
<image src="/static/icon/add.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text>添加我的爱车</text>
|
||||
</view>
|
||||
<view class="vehicle-status">
|
||||
<view class="status-item">
|
||||
<image src="/static/icon/mine/parking.png" mode="aspectFit" />
|
||||
<text>停车定位</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<image src="/static/icon/mine/charging.png" mode="aspectFit" />
|
||||
<text>充电状态</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<image src="/static/icon/mine/location.png" mode="aspectFit" />
|
||||
<text>精确定位</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 投资者功能菜单 -->
|
||||
<view class="menu-grid" v-if="isInvest">
|
||||
<view class="menu-item" v-for="(item, index) in menuItemsIsInvest" :key="index" @click="handleMenuClick(item)">
|
||||
<image :src="item.icon" mode="aspectFit" />
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="menu-grid">
|
||||
<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
|
||||
<image :src="item.icon" mode="aspectFit" />
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cc-myTabbar :tabBarShow="4" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { userInfo } from '@/api/api.js';
|
||||
import { useNav } from '@/hooks/useNav.js';
|
||||
import { userHook } from '@/hooks/userInfo.js';
|
||||
import { lookImg } from '@/utils/fun.js';
|
||||
|
||||
const { navTo } = useNav();
|
||||
const { user, isInvest } = userHook();
|
||||
|
||||
const menuItemsIsInvest = ref([
|
||||
{ name: '我的订单', icon: '/static/icon/mine/order.png', path: '/pages/order/order' },
|
||||
{ name: '商城', icon: '/static/icon/mine/shop.png', path: '/pageInvest/shop/shop' },
|
||||
{ name: '我的银行卡', icon: '/static/icon/mine/travel.png', path: '/pages/bank/bank' },
|
||||
{ name: '切换账号', icon: '/static/icon/mine/switch.png', path: '/pageInvest/login/login' }
|
||||
]);
|
||||
|
||||
const menuItems = ref([
|
||||
{ name: '我的订单', icon: '/static/icon/mine/order.png', path: '/pages/order/order' },
|
||||
{ name: '收藏电站', icon: '/static/icon/mine/station.png', path: '/pages/station/favorite' },
|
||||
{ name: '客服中心', icon: '/static/icon/mine/service.png', path: '/pages/service/index' },
|
||||
{ name: '一号多充', icon: '/static/icon/mine/multi.png', path: '/pages/mine/multipleNumbers' },
|
||||
{ name: '隐私', icon: '/static/icon/mine/privacy.png', path: '/pages/privacy/index' },
|
||||
{ name: '我的银行卡', icon: '/static/icon/mine/travel.png', path: '/pages/bank/bank' },
|
||||
{ name: '投资者平台', icon: '/static/icon/mine/switch.png', path: '/pageInvest/login/login' },
|
||||
{ name: '退出登录', icon: '/static/icon/mine/logout.png', path: '/pages/account/logout' }
|
||||
]);
|
||||
|
||||
const handleMenuClick = (item) => {
|
||||
if (item.path) {
|
||||
navTo(item.path);
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {});
|
||||
|
||||
onShow(async () => {
|
||||
isInvest.value = uni.getStorageSync('isInvest') || false;
|
||||
if (isInvest.value) {
|
||||
menuItems.value[6].name = '充电模式';
|
||||
} else {
|
||||
menuItems.value[6].name = '投资者平台';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
.header {
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.user-detail {
|
||||
.nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.phone {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.balance-wrap {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
padding: 0rpx 0 30rpx;
|
||||
|
||||
.balance-item {
|
||||
text-align: center;
|
||||
.amount {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vehicle-section {
|
||||
margin: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.more {
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.add-vehicle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.add-btn {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.vehicle-status {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-top: 1rpx solid #f7f7f7;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
margin: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 30rpx;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.car-plate {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 198rpx;
|
||||
height: 56rpx;
|
||||
margin: 20rpx;
|
||||
text {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
41
pages/mine/multipleNumbers.vue
Normal file
41
pages/mine/multipleNumbers.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view class="p30" style="padding: 30rpx">
|
||||
<view class="multipleNumbers_1">
|
||||
<view class="multipleNumbers_1_info" style="width: 330rpx">
|
||||
<view style="font-weight: bold; font-size: 40rpx; color: #232323; margin-bottom: 36rpx">开通一号多充</view>
|
||||
<view style="font-weight: 400; font-size: 24rpx; color: #333333; text-align: left">
|
||||
开通后，可以让您使用同一个 账号，同时给多辆车进行充电。 你可以按需调整同时充电的数量
|
||||
</view>
|
||||
</view>
|
||||
<image style="width: 330rpx" mode="widthFix" src="/static/image/Multiple_numbers.png"></image>
|
||||
</view>
|
||||
<view style="height: 30rpx"></view>
|
||||
<view class="multipleNumbers_1">
|
||||
<view style="font-weight: bold; font-size: 32rpx; color: #232323">开通一号多充</view>
|
||||
<view style="display: flex; align-items: center">
|
||||
<view>1</view>
|
||||
<image src="/static/icon/youjin.png" style="width: 28rpx; margin-left: 15rpx" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.multipleNumbers_1 {
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
padding: 25rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
84
pages/mine/sett.vue
Normal file
84
pages/mine/sett.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view class="p30">
|
||||
<view style="background-color: #fff; border-radius: 15rpx">
|
||||
<up-cell-group :border="false">
|
||||
<button style="all: unset" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
|
||||
<up-cell title="头像" :isLink="true" size="min">
|
||||
<template #value>
|
||||
<up-avatar :src="user.avatarUrl || user.avatar"></up-avatar>
|
||||
</template>
|
||||
</up-cell>
|
||||
</button>
|
||||
<up-cell title="昵称" :isLink="true" size="min" @click="upNickName">
|
||||
<template #value>
|
||||
<text class="u-slot-value">{{ user.nickname || user.nickName }}</text>
|
||||
</template>
|
||||
</up-cell>
|
||||
<up-cell title="手机号" size="min" :border="false">
|
||||
<template #value>
|
||||
<text class="u-slot-value">{{ user.mobile || user.phone || '-' }}</text>
|
||||
</template>
|
||||
</up-cell>
|
||||
</up-cell-group>
|
||||
</view>
|
||||
<view style="height: 100rpx"></view>
|
||||
<up-button type="error" text="退出登录" @click="outLogin"></up-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { investUserModify, updateNickName, updateAvatar } from '@/api/api.js';
|
||||
import { ref } from 'vue';
|
||||
import { uploadFiles } from '@/utils/fun.js';
|
||||
import { userHook } from '@/hooks/userInfo.js';
|
||||
const { user, isInvest, fetchUserData } = userHook();
|
||||
|
||||
const chooseAvatar = async (e) => {
|
||||
let img = await uploadFiles(e.detail.avatarUrl);
|
||||
console.log(img);
|
||||
isInvest.value ? await investUserModify({ ...user, avatarUrl: img }) : await updateAvatar({ avatar: img });
|
||||
fetchUserData();
|
||||
};
|
||||
|
||||
const upNickName = () => {
|
||||
uni.showModal({
|
||||
title: '修改昵称',
|
||||
content: user.nickname || user.nickName || "",
|
||||
editable: true,
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
isInvest.value ? await investUserModify({ ...user, nickname: res.content }) : await updateNickName({ nickName: res.content });
|
||||
fetchUserData()
|
||||
console.log(res);
|
||||
console.log('用户点击确定');
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const outLogin = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否确认退出登录？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.clearStorageSync();
|
||||
uni.reLaunch({
|
||||
url: '/pages/home/home'
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
button::after {
|
||||
all: unset;
|
||||
}
|
||||
</style>
|
||||
109
pages/mine/signIn.vue
Normal file
109
pages/mine/signIn.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view>
|
||||
<gb-qiandao
|
||||
:days="dayInfo.day"
|
||||
:taskList="dayInfo.taskStatusParams"
|
||||
:completeDay="dayInfo.day"
|
||||
:dayList="dayList"
|
||||
:taskStatus="dayInfo.isSignInToday"
|
||||
@receiveMoney="receiveMoney"
|
||||
@listTab="listTab"
|
||||
></gb-qiandao>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findSignInRecord, signIn, shareMiniProgram } from '@/api/api.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 签到天数
|
||||
days: 0,
|
||||
// 签到任务第一个
|
||||
play_number: 0,
|
||||
// 签到任务第二个
|
||||
search_number: 0,
|
||||
// 签到任务第三个
|
||||
full_ad: 0,
|
||||
// 已完成天数
|
||||
completeDay: 0,
|
||||
// 签到状态 0.代表未签到 1.代表已签到
|
||||
taskStatus: 0,
|
||||
// 签到规则
|
||||
rule: '这里是签到规则，你可以任意编辑',
|
||||
// 签到任务奖励数组
|
||||
dayList: [1, 1, 2, 3, 5, 6, 7],
|
||||
// 签到任务
|
||||
taskList: [
|
||||
{
|
||||
title: '试玩游戏',
|
||||
img: '../../static/yx.png',
|
||||
number: 1,
|
||||
dec: '完成游戏赚相关游戏'
|
||||
},
|
||||
{
|
||||
title: '试玩应用',
|
||||
img: '../../static/zl.png',
|
||||
number: 1,
|
||||
dec: '完成应用赚相关任务'
|
||||
},
|
||||
{
|
||||
title: '观看广告',
|
||||
img: '../../static/kgg.png',
|
||||
number: 10,
|
||||
dec: '观看广告赚相关广告'
|
||||
}
|
||||
],
|
||||
dayInfo: {}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
// 获取用户签到得相关信息，自己写接口获取即可
|
||||
getData() {
|
||||
findSignInRecord().then((res) => {
|
||||
this.dayInfo = res;
|
||||
});
|
||||
},
|
||||
// 签到并领取奖励
|
||||
receiveMoney() {
|
||||
signIn().then((res) => {
|
||||
uni.showToast({
|
||||
title: '签到成功',
|
||||
icon: 'none',
|
||||
position: 'bottom'
|
||||
});
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
|
||||
// 签到任务完成
|
||||
listTab(i) {
|
||||
if (i == 0) {
|
||||
uni.showToast({
|
||||
title: '跳转第一个任务',
|
||||
icon: 'none',
|
||||
position: 'bottom'
|
||||
});
|
||||
}
|
||||
if (i == 1) {
|
||||
uni.showToast({
|
||||
title: '跳转第二个任务',
|
||||
icon: 'none',
|
||||
position: 'bottom'
|
||||
});
|
||||
}
|
||||
if (i == 2) {
|
||||
shareMiniProgram().then((res) => {
|
||||
this.getData();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user