Skip to content

T
thinkApp
Commit aaad6eaa authored by youjie's avatar youjie
Browse files
Options

no message

parent 16f20264
Hide whitespace changes
Inline Side-by-side
Showing with 334 additions and 45 deletions
src/pages.json
View file @ aaad6eaa
......@@ -135,7 +135,17 @@
{
"root": "pages/MyChild", //我的小孩
"pages": [{
"path": "index" //电子合同
"path": "index",
"style": {
"navigationBarTitleText": "我的小孩",
"backgroundColor": "#F6F6F6"
}
},{
"path": "addChild",
"style": {
"navigationBarTitleText": "添加小孩信息",
"backgroundColor": "#F6F6F6"
}
}]
}
],
......
src/pages/MyChild/addChild.vue 0 → 100644
View file @ aaad6eaa
<style scoped>
.addChild-header{
flex-direction: column;
align-items: center;
}
.addChild-header image{
padding: 74rpx 0 31rpx 0;
}
.addChild-header text{
font-size: 34rpx;
font-weight: 800;
color: #111111;
}
.header-text{
padding: 22rpx 0 37rpx 0;
font-size: 26rpx;
font-weight: 500;
color: #BEBEBE;
}
.header-input {
width: 100%;
box-sizing: border-box;
vertical-align: middle;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 51rpx;
margin-bottom: 51rpx;
}
/deep/.van-cell {
line-height: 120rpx;
border-radius: 40rpx;
border: 4rpx solid red;
}
.addChild-buttom{
background: #C91727;
border-radius: 44px;
position: fixed;
left: 50rpx;
right: 50rpx;
bottom: 34rpx;
line-height: 88rpx;
color: #ffffff;
font-weight: 500;
font-size: 30rpx;
z-index: 999;
text-align: center;
}
.addChild-buttom.active{
background: rgba(201, 23, 39, .5);
}
.addChild .user-item{
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 36rpx;
background: #FFFFFF;
border-radius: 40px;
margin: 0 50rpx;
}
.addChild .user-item .avatar{
width: 100rpx;
height: 100rpx;
background: rgba(252, 238, 239, 1);
border-radius: 40rpx;
font-size: 46rpx;
font-weight: 500;
color: rgba(206, 128, 134, 1);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.addChild .user-item .uname{
font-size: 28rpx;
margin-left: 32rpx;
font-weight: 500;
color: #000000;
width:1px;
flex: 1;
}
.addChild .user-item .check{
color: #000000;
font-size: 36rpx;
}
</style>
<template>
<view class="addChild">
<scroll-view scroll-y="true" style="width:100%;height: 100%;margin-bottom: 70rpx;">
<view class="addChild-header flex">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1664160541000_21.png"
style="width: 352rpx;height: 218rpx;"></image>
<text>请输入手机号</text>
<view class="header-text">输入该账号注册的手机号</view>
<view class="header-input">
<van-cell-group>
<van-field :value="Account" placeholder="输入手机号" clearable input-align="center" @input="usernameInput">
</van-field>
</van-cell-group>
</view>
</view>
<view>
<view class="user-item">
<view class="avatar">黎</view>
<view class="uname">
黎明
</view>
<view class="check">
<van-icon name="success" />
</view>
</view>
<van-empty description="暂无小孩" v-if="dataList.length === 0" />
<view v-if="dataList.length > 0">
<Loadmore :state="pageState" />
</view>
</view>
</scroll-view>
<view v-if="loading" class="addChild-buttom" @click="addChild">
已选2个，确认添加
</view>
<view v-else class="addChild-buttom active">
已选2个，确认添加
</view>
</view>
</template>
<script>
import {
ref,
reactive,
toRefs,
toRef,
getCurrentInstance,
watch,
computed,
onMounted,
inject,
} from "vue";
import Loadmore from "../../components/loadmore.vue";
import bottom from "../../components/bottom";
import {
GetOrderPage
} from "../../api/erp";
export default {
components: {
bottom,
Loadmore,
},
setup(props, context) {
let {
proxy
} = getCurrentInstance();
let data = reactive({
loading:true,
Account:'',
msg: {
pageIndex: 1,
pageSize: 10,
OrderType: 1
},
pageCount: 0,
dataList: [],
pageState: "more",
timer: null, //防抖
imgUrlG:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663930765000_891.png',
imgUrlR:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663930765000_218.png',
imgBoy:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663932008000_116.png',
imgGirl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663931928000_154.png'
});
const methods = {
usernameInput(val) {
data.Account = val.detail;
},
addChild(){
data.loading = false
setTimeout(()=>{
data.loading = true
uni.navigateBack({
delta: 1
});
},2000)
},
onClose(event) {
const { position, instance } = event.detail;
switch (position) {
case 'left':
case 'cell':
case 'right':
instance.close();
break;
}
},
jumpPage(url) {
uni.navigateTo({
url: url,
});
},
async getData() {
let res = await GetOrderPage(data.msg);
if (res) {
if (data.timer) data.timer = null;
if (data.msg.pageIndex === 1) {
data.dataList = res.Data.PageData;
} else {
data.dataList = [...data.dataList, ...res.Data.PageData];
}
data.pageCount = res.Data.PageCount
if (data.msg.pageIndex >= res.Data.PageCount) {
data.pageState = "none";
} else {
data.pageState = "more";
}
}
},
};
let that = methods;
return {
...toRefs(data),
...methods
};
},
onLoad(options) {
this.msg.OrderType = options.type
this.getData();
},
onReachBottom() {
if (this.msg.pageIndex < this.pageCount) {
data.pageState = "loading";
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.msg.pageIndex++;
that.getList();
}, 1000);
} else {
this.pageState = "none";
}
}
};
</script>
src/pages/MyChild/index.vue
View file @ aaad6eaa
......@@ -36,35 +36,81 @@
color: #BEBEBE;
}
.dataList-box{
border-radius: 50rpx;overflow: hidden;
box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
margin-bottom: 40rpx;
}
.dataList-form{
height: 204rpx;
flex-grow: 1;
position: relative;
padding: 31rpx 40rpx 0 22rpx;
}
.left-image{
position: relative;
}
.image-bj{
.dataList-image{
width: 177rpx;
height: 204rpx;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663932626000_693.png');
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 0;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image-bjB{
width: 177rpx;
height: 204rpx;
.dataList-form.active .dataList-image{
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663932626000_675.png');
background-size: 100% 100%;
}
.dataList-image text{
margin-top: 17rpx;
font-size: 24rpx;
font-weight: 500;
color: #ffffff;
}
.dataList-center{
background-color: #ffffff;
position: absolute;
left: 177rpx;
bottom: 0;
right: 0;
border-radius: 0 50rpx 50rpx 0;
padding: 33rpx 48rpx;
box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
}
.dataList-left{
flex-direction: column;
}
.van-swipe-cell__right {
.left-text{
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #111111;
margin-bottom: 32rpx;
}
.left-phone{
font-size: 24rpx;
color: #919191;
}
.left-phone text{
margin-left: 10rpx;
}
.dataList-right{
flex-direction: column;
justify-content: center;
align-items: center;
}
.dataList-right text{
font-size: 22rpx;
font-weight: 500;
color: #50D487;
margin-top: 15rpx;
}
.van-swipe-cell__left,
.van-swipe-cell__right {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
right: -111rpx;
width:232px;
right: -0rpx;
width:199rpx;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
......@@ -72,7 +118,7 @@
<template>
<view class="dataList">
<view class="dataList-header">
<view>
<view @click="addChild">
<van-icon name="plus" />
<text>添加小孩信息</text>
</view>
......@@ -80,47 +126,41 @@
<view class="dataList-content">
<view class="title">在读小孩列表</view>
<view class="text">左滑可删除小孩信息</view>
<view class="dataList-box">
<view class="dataList-box" style="overflow: hidden;">
<van-swipe-cell
id="swipe-cell"
:right-width="116"
async-close
:disabled="true"
@close="onClose">
<view class="dataList-form">
<view class="dataList-form active">
<view class="dataList-image flex">
<image :src="imgBoy?imgBoy:imgGirl"
mode="aspectFill" style="width:101rpx;height:101rpx;">
</image>
<text>周启明</text>
</view>
<view class="dataList-center active flex_between_center">
<view class="dataList-left">
<view class="left-image">
<view class="image-bj"></view>
<image :src="imgBoy"
mode="aspectFill" style="width:50rpx;height:50rpx;">
</image>
<text>周启明</text>
</view>
<view class="left-image">
<text>武侯校区</text>
<view>
<van-icon name="phone"></van-icon>
<text>18226665548</text>
</view>
<view class="dataList-left flex">
<text class="left-text">武侯校区</text>
<view class="left-phone">
<van-icon name="phone" color="#919191"></van-icon>
<text>18226665548</text>
</view>
</view>
<view>
<image :src="imgUrlG" style="width: 24rpx;height: 24rpx;"></image>
<text>学习中</text>
<view class="dataList-right flex">
<image :src="imgUrlG?imgUrlG:imgUrlR" style="width: 24rpx;height: 24rpx;"></image>
<text>学习中/休学</text>
</view>
</view>
<view slot="right" class="van-swipe-cell__right">
<van-button square type="danger" custom-style="height:100%;">删除</van-button>
<van-icon name="cross" color="#BCBCBC"></van-icon>
</view>
</view>
</van-swipe-cell>
</view>
<van-empty description="暂无数据" v-if="dataList.length === 0" />
<van-empty description="暂无小孩" v-if="dataList.length === 0" />
<view v-if="dataList.length > 0">
<Loadmore :state="pageState" />
</view>
</view>
......@@ -155,7 +195,6 @@
proxy
} = getCurrentInstance();
let data = reactive({
pageTitle: "我的小孩",
msg: {
pageIndex: 1,
pageSize: 10,
......@@ -171,6 +210,11 @@
imgGirl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663931928000_154.png'
});
const methods = {
addChild(){
uni.navigateTo({
url: '/pages/MyChild/addChild',
});
},
onClose(event) {
const { position, instance } = event.detail;
switch (position) {
......@@ -213,11 +257,6 @@
onLoad(options) {
this.msg.OrderType = options.type
this.getData();
if (options.type == 1) {
this.pageTitle = '语培订单'
} else if (options.type == 2) {
this.pageTitle = '留学订单'
}
uni.setNavigationBarTitle({
title: this.pageTitle
});
......
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