Skip to content

E
educationStu
Commit e298b48c authored by 罗超's avatar 罗超
Browse files
Options

2

parent ca53f6d4
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 13 deletions
src/components/bottom.vue 0 → 100644
View file @ e298b48c
<template>
<view class="bottom">
<image src="../static/image/bottomlogo.png" mode="" class="img" />
</view>
</template>
<style scoped>
.bottom {
width: 100vw;
height: 130rpx;
display: flex;
justify-content: center;
align-items: center;
}
.img {
width: 165rpx;
height: 55rpx;
}
</style>
src/pages.json
View file @ e298b48c
......@@ -30,7 +30,8 @@
"path": "pages/person/person",
"style":{
"navigationBarTitleText":"个人中心",
"backgroundColor":"#f5f5f5"
"backgroundColor":"#f5f5f5",
"navigationBarBackgroundColor":"#f5f5f5"
}
}],
"subPackages": [{
......
src/pages/person/person.vue
View file @ e298b48c
......@@ -12,7 +12,8 @@
:src="pageData.StuIcon"
mode="aspectFill"
style="width:100%;height:100%;border-radius: 50%;"
></image>
>
</image>
</view>
</view>
<view class="orderInfo flex_between_center">
......@@ -23,8 +24,8 @@
src="../../static/image/person/order1.png"
mode="aspectFill"
class="orderIcon"
></image
></view>
></image>
</view>
<view class="orderName">
语培订单
</view>
......@@ -36,8 +37,8 @@
src="../../static/image/person/order2.png"
mode="aspectFill"
class="orderIcon"
></image
></view>
></image>
</view>
<view class="orderName">
留学订单
</view>
......@@ -46,11 +47,11 @@
<view class=" flex_between_center" style="width:100%">
<view class="orderNum">{{ pageData.ContractNum }}</view>
<image
src="../../static/image/person/order1.png"
src="../../static/image/person/order3.png"
mode="aspectFill"
class="orderIcon"
></image
></view>
></image>
</view>
<view class="orderName">
合同信息
</view>
......@@ -89,10 +90,67 @@
</view>
</view>
<view class="courseBox">
<view class="left"></view>
<view class="right"> </view>
<view class="left">
<image
:src="pageData.CourseInfo.B2BIcon"
mode="aspectFill"
style="width:100%;height:100%;border-radius: 30rpx;"
></image>
</view>
<view class="right">
<view class="className one_line">{{
pageData.CourseInfo.CourseName
}}</view>
<view class="Grade" style="margin-bottom:20rpx">{{
pageData.CourseInfo.ClassName
}}</view>
<view class="Grade">等级：{{ pageData.CourseInfo.CourseRate }}</view>
<view
><text class="Grade">状态：</text>
<text class="StatusName">{{
pageData.CourseInfo.ClassStatusName
}}</text>
</view>
</view>
</view>
</view>
<view class="serve">
<view class="serveSubTitle">随时电话联系哟</view>
<view class="serveTitle">服务人员信息</view>
<view v-for="(item,index) in AssistList" :key="index" class="serviceItem">
<view class="headimg">
<image
:src="item.UserIcon"
mode="aspectFill"
style="width:100%;height:100%;border-radius: 24rpx;"
v-if="item.UserIcon"
/>
<view
class="flex_center_center"
style="width:100%;height:100%;border-radius: 24rpx;font-size: 46rpx;font-weight: bold;color: #FFFFFF;background-color: #4c50e7;"
v-else
>{{ item.EmployeeName.slice(0, 1) }}</view
>
</view>
<view class="serviceInfo flex_between_center">
<view class="flex_start_around" style="width:380rpx;height:100%">
<view class="flex_start_center" style="height:32rpx">
<text class="EmployeeName">{{ item.EmployeeName }}</text
><text class="AssistTypeName">{{ item.AssistTypeName }}</text>
</view>
<view class="Mobile" >{{item.Mobile }}</view>
</view>
<view style="width:60rpx;height:40rpx;" @click="callphone(item.Mobile)">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/callphone.png"
mode="aspectFit"
style="width:100%;height:100%"
/>
</view>
</view>
</view>
</view>
<bottom />
</view>
</template>
......@@ -108,11 +166,35 @@ import {
onMounted,
inject,
} from "vue";
import bottom from "../../components/bottom";
export default {
components: {
bottom,
},
setup(props, context) {
let { proxy } = getCurrentInstance();
let data = reactive({
pageData: {},
AssistList: [
{
AssistTypeName: "市场经理",
EmployeeName: "阿里粑粑",
UserIcon: "",
Mobile: "18011251414",
},
{
AssistTypeName: "市场经理",
EmployeeName: "阿里粑粑",
UserIcon: "",
Mobile: "18011251414",
},
{
AssistTypeName: "市场经理",
EmployeeName: "阿里粑粑",
UserIcon: "",
Mobile: "18011251414",
},
],
});
const methods = {
async getData() {
......@@ -121,6 +203,11 @@ export default {
console.log(431, data.pageData);
});
},
callphone(num) {
uni.makePhoneCall({
phoneNumber: num,
});
},
};
onMounted(() => {
......@@ -129,6 +216,7 @@ export default {
let that = methods;
return {
...toRefs(data),
...methods
};
},
};
......@@ -136,7 +224,7 @@ export default {
<style scoped>
.person {
height: 100vh;
min-height: 100vh;
background-color: #f5f5f5;
}
......@@ -188,38 +276,46 @@ export default {
flex-wrap: wrap;
align-content: space-between;
}
.orderItem .orderNum {
font-size: 46rpx;
font-weight: 800;
font-style: italic;
color: #111111;
}
.orderItem .orderIcon {
width: 65rpx;
height: 65rpx;
background-color: #fff;
}
.orderItem .orderName {
font-size: 24rpx;
font-weight: 500;
color: #666666;
}
.courseInfo {
height: 535rpx;
/* height: 535rpx; */
background-color: #ebebeb;
padding: 35rpx;
margin-bottom: 50rpx;
}
.courseInfo .title {
font-size: 28rpx;
font-weight: bold;
color: #111111;
margin-bottom: 30rpx;
}
.statistic {
/* height: 70rpx; */
display: flex;
margin-bottom: 50rpx;
}
.statisticItem {
min-width: 80rpx;
/* height: 70rpx; */
......@@ -228,6 +324,7 @@ export default {
align-content: space-between;
margin-right: 100rpx;
}
.statisticItem .time {
width: 100%;
font-size: 46rpx;
......@@ -236,6 +333,7 @@ export default {
font-style: italic;
color: #111111;
}
.statisticItem .unit {
font-size: 20rpx;
font-weight: 500;
......@@ -243,19 +341,119 @@ export default {
font-style: normal;
margin-left: 10rpx;
}
.statisticName {
font-size: 20rpx;
font-weight: 500;
color: #666666;
white-space: nowrap;
}
.courseBox {
display: flex;
}
.courseBox .left {
width: 215rpx;
height: 275rpx;
background: #d5f3e9;
border-radius: 30rpx;
margin-right: 40rpx;
}
.courseBox .right {
width: 420rpx;
padding-top: 25rpx;
}
.courseBox .className {
font-size: 36rpx;
font-weight: bold;
color: #111111;
}
.courseBox .Grade {
font-size: 22rpx;
font-weight: 500;
color: #666666;
margin: 10rpx 0;
}
.courseBox .StatusName {
/* height: 30rpx; */
line-height: 30rpx;
font-size: 22rpx;
font-weight: 500;
color: #333333;
background-color: #5de3a6;
box-sizing: border-box;
border-radius: 4rpx;
padding: 5rpx 10rpx;
}
.serve {
padding: 0 35rpx;
background-color: #f5f5f5;
}
.serveTitle {
font-size: 46rpx;
font-weight: bold;
color: #111111;
}
.serveSubTitle {
font-size: 28rpx;
font-weight: 500;
color: #666666;
margin-bottom: 20rpx;
}
.serviceItem {
box-sizing: border-box;
width: 680rpx;
height: 185rpx;
background-color: #ffffff;
border-radius: 24rpx;
margin-top: 30rpx;
display: flex;
/* justify-content: space-between; */
align-items: center;
padding: 25rpx;
}
.serviceItem .headimg {
width: 130rpx;
height: 130rpx;
border-radius: 24rpx;
margin-right: 30rpx;
}
.serviceInfo {
width: 435rpx;
height: 100%;
}
.EmployeeName {
font-size: 34rpx;
font-weight: bold;
color: #111111;
}
.AssistTypeName {
height: 26rpx;
background-color: #fa9717;
border-radius: 6rpx;
font-size: 20rpx;
font-weight: 500;
color: #ffffff;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15rpx;
padding: 3rpx 6rpx;
}
.Mobile {
font-size: 28rpx;
font-weight: 500;
color: #111111;
}
</style>
src/static/css/common.css
View file @ e298b48c
......@@ -12,6 +12,7 @@
}
.flex_center_center {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap
......@@ -35,6 +36,7 @@
}
.flex_start_center {
display: flex;
justify-content: flex-start;
align-items: center;
}
......@@ -64,6 +66,12 @@
justify-content: flex-start;
align-content: space-between;
}
.flex_start_around {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-around;
}
.flex_direction {
flex-direction: column;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment