init
This commit is contained in:
shuhongfan
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<view class="nav-bg mnav-bg">
|
||||
<view class="headBg"></view>
|
||||
<view class="header">
|
||||
<view class="headBox">
|
||||
<view class="head"
|
||||
><icon v-if="baseData.avatar === ''"></icon
|
||||
><image :src="baseData.avatar" v-else></image
|
||||
></view>
|
||||
<view class="info">
|
||||
<view class="tit">{{ baseData.name }}</view>
|
||||
<view>{{ baseData.account }}</view>
|
||||
<view class="address">
|
||||
<icon></icon>
|
||||
{{ baseData.agencyName ? baseData.agencyName : "暂无" }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="QR" @click="handleQr"
|
||||
><image src="../../../static/qr.png"></image
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
baseData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
// ------定义方法------
|
||||
// 二维码暂时不做
|
||||
const handleQr = () => {
|
||||
// TODO暂时保留
|
||||
// uni.navigateTo({
|
||||
// url:'/pages/my/qrCode'
|
||||
// })
|
||||
uni.showToast({
|
||||
title: "程序员哥哥正在实现中",
|
||||
duration: 1000,
|
||||
icon: "none",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style src="./../index.scss" lang="scss" scoped></style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<view class="boxBg headTop">
|
||||
<view class="headItem">
|
||||
<view class="item">
|
||||
<text>我的评价</text>
|
||||
<view class="star">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
allow-half
|
||||
:value="4.5"
|
||||
active-color="#EF4F3F"
|
||||
color="#F4F4F4"
|
||||
/>
|
||||
<text>{{ 4.5 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>排班时间</text>
|
||||
<text
|
||||
v-if="
|
||||
(!baseData.startTime || baseData.startTime === '') &&
|
||||
(!baseData.endTime || baseData.endTime === '')
|
||||
"
|
||||
>无</text
|
||||
>
|
||||
<text v-else
|
||||
>{{ overTimeFormat(baseData.startTime) }}-{{
|
||||
overTimeFormat(baseData.endTime)
|
||||
}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
// 时间处理
|
||||
import { overTimeFormat } from "@/utils/index.js";
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
baseData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style src="./../index.scss" lang="scss" scoped></style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view class="boxBg">
|
||||
<view class="headItem">
|
||||
<view class="item" @click="handleHistory">
|
||||
<text>全部取派</text>
|
||||
<text><icon class="nextIcon"></icon></text>
|
||||
</view>
|
||||
<navigator url="/pages/my/map" open-type="redirect">
|
||||
<view class="item">
|
||||
<text>作业范围</text>
|
||||
<text><icon class="nextIcon"></icon></text>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "vuex";
|
||||
const store = useStore(); //vuex获取储存数据
|
||||
// ------定义方法------
|
||||
// 历史派件
|
||||
const handleHistory = () => {
|
||||
store.commit("user/setTabIndex", 0);
|
||||
store.commit("user/setTaskStatus", -1);
|
||||
uni.navigateTo({
|
||||
url: "/pages/history/index",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style src="./../index.scss" lang="scss" scoped></style>
|
||||
143
project-wl-kuaidiyuan-uniapp-vue3/pages/my/index.scss
Normal file
143
project-wl-kuaidiyuan-uniapp-vue3/pages/my/index.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
.mnav-bg{
|
||||
height: 370rpx;
|
||||
}
|
||||
.header {
|
||||
padding: 122rpx 86rpx 102rpx 64rpx;
|
||||
color: var(--neutral-color-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 40rpx;
|
||||
font-size: var(--font-size-16);
|
||||
.headBox {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
.head {
|
||||
icon{
|
||||
background: url(@/static/head.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
}
|
||||
image{
|
||||
width: 114rpx;
|
||||
height: 114rpx;
|
||||
}
|
||||
|
||||
padding-right: 26rpx;
|
||||
}
|
||||
.tit {
|
||||
padding-bottom: 2rpx;
|
||||
}
|
||||
.address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-14);
|
||||
padding-top: 8rpx;
|
||||
icon {
|
||||
background: url(@/static/address.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-16);
|
||||
}
|
||||
}
|
||||
.QR {
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.headTop {
|
||||
margin-top: -80rpx;
|
||||
}
|
||||
.headItem {
|
||||
padding: 0 34rpx;
|
||||
font-size: var(--font-size-16);
|
||||
.item {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
border-bottom: 1px solid var(--neutral-color-background);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// &:last-child {
|
||||
// border: 0 none;
|
||||
// }
|
||||
text {
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
::v-deep .uni-icons {
|
||||
font-size: 48rpx !important;
|
||||
}
|
||||
::v-deep .uni-rate__icon {
|
||||
margin-right: 6rpx !important;
|
||||
}
|
||||
// icon {
|
||||
// background: url(@/static/star.png) no-repeat;
|
||||
// background-size: contain;
|
||||
// width: 32rpx;
|
||||
// height: 32rpx;
|
||||
// margin-left: 16rpx;
|
||||
// }
|
||||
}
|
||||
.boxBg {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.qrCode {
|
||||
.boxBg {
|
||||
margin-top: 32rpx;
|
||||
text-align: center;
|
||||
padding: 52rpx 60rpx 68rpx;
|
||||
}
|
||||
.img {
|
||||
padding: 30rpx 0;
|
||||
image {
|
||||
width: 416rpx;
|
||||
height: 410rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.qrHead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 416rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
.head {
|
||||
background: url(@/static/head.png) no-repeat;
|
||||
background-size: contain;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-left:20rpx;
|
||||
}
|
||||
.star {
|
||||
font-size: 20rpx;
|
||||
::v-deep .uni-icons {
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
::v-deep .uni-rate__icon {
|
||||
margin-right: 4rpx !important;
|
||||
}
|
||||
}
|
||||
.tit{
|
||||
font-size: var(--font-size-13);
|
||||
font-weight: 600;
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
55
project-wl-kuaidiyuan-uniapp-vue3/pages/my/index.vue
Normal file
55
project-wl-kuaidiyuan-uniapp-vue3/pages/my/index.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<!-- 我的页面 -->
|
||||
<template>
|
||||
<view class="navFrame">
|
||||
<!-- 我的基本信息 -->
|
||||
<BaseInfo :baseData="baseData"></BaseInfo>
|
||||
<!-- end -->
|
||||
<!-- 我的评价、排班时间 -->
|
||||
<Evaluate :baseData="baseData"></Evaluate>
|
||||
<!-- end -->
|
||||
<!-- 历史取派、作业范围 -->
|
||||
<HistoryScope></HistoryScope>
|
||||
<!-- end -->
|
||||
</view>
|
||||
<!-- 退出按钮 -->
|
||||
<view class="footBtn">
|
||||
<view class="btnBox"
|
||||
><button class="btn-default" @click="handleOut">退出登录</button></view
|
||||
>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- footer -->
|
||||
<UniFooter :pagePath="'pages/my/index'"></UniFooter>
|
||||
<!-- end -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useStore } from "vuex";
|
||||
// 时间处理
|
||||
import { overTimeFormat } from "@/utils/index.js";
|
||||
// 导入组件
|
||||
// 底部导航
|
||||
import UniFooter from "@/components/uni-footer/index.vue";
|
||||
// 基本信息
|
||||
import BaseInfo from "./commponents/BaseInfo.vue"
|
||||
// 我的评价、排班时间
|
||||
import Evaluate from "./commponents/Evaluate.vue"
|
||||
// 历史取派、作业范围
|
||||
import HistoryScope from "./commponents/HistoryScope.vue"
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取储存数据
|
||||
let baseData = uni.getStorageSync("userInfo"); //获取登录时保存的用户信息
|
||||
// 退出
|
||||
const handleOut = () => {
|
||||
// 移除指定 token
|
||||
uni.removeStorageSync("token");
|
||||
// 清理本地数据缓存
|
||||
// uni.clearStorage();
|
||||
// 移出当前的tab触发事件index值，再次登录后底部菜单会默认选中首页
|
||||
store.commit("setFootStatus", 0);
|
||||
uni.redirectTo({
|
||||
url: "/pages/login/user",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
87
project-wl-kuaidiyuan-uniapp-vue3/pages/my/map.vue
Normal file
87
project-wl-kuaidiyuan-uniapp-vue3/pages/my/map.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<!-- 作业范围页 -->
|
||||
<template>
|
||||
<!-- 自定义头部 -->
|
||||
<UniNav :title="title" @goBack="goBack"></UniNav>
|
||||
<!-- end -->
|
||||
<view class="content"
|
||||
><map
|
||||
class="mapBox"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:polygons="polygons"
|
||||
scale="16"
|
||||
></map
|
||||
></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
// 导入组件
|
||||
// 导航组件
|
||||
import UniNav from "@/components/uni-nav/index.vue";
|
||||
// 导入接口
|
||||
import { getUserScope } from "@/pages/api/my.js";
|
||||
// ------定义变量------
|
||||
const title = ref("作业范围"); //nav标题
|
||||
const latitude = ref(39.997534); //维度
|
||||
const longitude = ref(116.475334); //经度
|
||||
const polygons = reactive([
|
||||
{
|
||||
//多边形的坐标数组
|
||||
points: [
|
||||
{
|
||||
longitude: 116.475334,
|
||||
latitude: 39.997534,
|
||||
},
|
||||
{
|
||||
longitude: 116.476627,
|
||||
latitude: 39.998315,
|
||||
},
|
||||
{
|
||||
longitude: 116.478603,
|
||||
latitude: 39.99879,
|
||||
},
|
||||
{
|
||||
longitude: 116.478529,
|
||||
latitude: 40.000296,
|
||||
},
|
||||
{
|
||||
longitude: 116.475082,
|
||||
latitude: 40.000151,
|
||||
},
|
||||
{
|
||||
longitude: 116.473421,
|
||||
latitude: 39.998717,
|
||||
},
|
||||
],
|
||||
fillColor: "#EF4F3F20", //填充颜色后两个数值是透明度
|
||||
strokeColor: "#EF4F3F", //描边颜色
|
||||
strokeWidth: 2, //描边宽度
|
||||
zIndex: 1, //层级
|
||||
dottedLine: true,
|
||||
},
|
||||
]);
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
getUserPolygon();
|
||||
});
|
||||
// ------定义方法------
|
||||
// 获取作业范围
|
||||
const getUserPolygon = async () => {
|
||||
await getUserScope().then((res) => {
|
||||
if (res.code === 200) {
|
||||
// TODO暂时保留
|
||||
// polygons[0].points=res.data.polygon
|
||||
// latitude.value=polygons[0].points[0].latitude
|
||||
// longitude.value=polygons[0].points[0].longitude
|
||||
}
|
||||
});
|
||||
};
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: "/pages/my/index",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
51
project-wl-kuaidiyuan-uniapp-vue3/pages/my/qrCode.vue
Normal file
51
project-wl-kuaidiyuan-uniapp-vue3/pages/my/qrCode.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<!-- 专属二维码页 -->
|
||||
<template>
|
||||
<!-- 自定义头部 -->
|
||||
<UniNav :title="title" @goBack="goBack"></UniNav>
|
||||
<!-- end -->
|
||||
<view class="pageBox qrCode">
|
||||
<view class="boxBg">
|
||||
<view class="qrHead">
|
||||
<view class="head"></view>
|
||||
<view class="info">
|
||||
<view class="tit">神领快递员-张全蛋</view>
|
||||
<view class="star">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
allow-half
|
||||
:value="4.5"
|
||||
active-color="#EF4F3F"
|
||||
color="#F4F4F4"
|
||||
/>
|
||||
<text>4.7</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img"><image src="../../static/scanPay.png"></image></view>
|
||||
<view>扫码快速下单</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
// 导入组件
|
||||
// 导航组件
|
||||
import UniNav from "@/components/uni-nav/index.vue";
|
||||
// 导入接口
|
||||
import { getUserScope } from "@/pages/api/my.js";
|
||||
// ------定义变量------
|
||||
const title = ref("专属二维码"); //nav标题
|
||||
|
||||
// ------生命周期------
|
||||
onMounted(() => {});
|
||||
// ------定义方法------
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: "/pages/my/index",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user