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.
301 lines
7.2 KiB
301 lines
7.2 KiB
<template>
|
|
<view>
|
|
<view class="home-pages">
|
|
<view style="position: absolute;top: 0; left: 0; height: 188rpx; width: 100%; z-index: 100; background-color: #FFFFFF; box-shadow: 0px 15px 10px -15px #E8E8E8;">
|
|
<view style="margin: 28rpx 24rpx; display: flex;" @click="newDetail()">
|
|
<image :showLoading="true" :src="userInfo?userInfo.headImage : morenSrc" style="width: 148rpx;height: 148rpx;border-radius: 50%;"></image>
|
|
<view style="padding: 28rpx;">
|
|
<view style="font-size: 32rpx;font-weight: 600">{{userInfo?userInfo.nickName: '点击登录'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="home-content">
|
|
<view class="pay-btn-2" @click="seeDetail()">
|
|
刊物介绍
|
|
</view>
|
|
<view style="margin: 10rpx; font-weight: 200;">
|
|
<span >订阅申请</span>
|
|
</view>
|
|
|
|
<view class="from">
|
|
|
|
<view class="from-line">
|
|
<span class="label-class">姓名:</span>
|
|
<view><input v-model="release.name" placeholder="请输入学生姓名"/></view>
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">电话:</span>
|
|
<view><input v-model="release.address" placeholder="请输入手机号码"/></view>
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">地区:</span>
|
|
<view class="uni-list-cell-left">
|
|
<picker @change="selectedVs" @columnchange="selectedVs" mode="multiSelector" :range="vsc">
|
|
<input v-model="release.vsClass" placeholder="请选择地区"/>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">学历:</span>
|
|
<view class="uni-list-cell-left">
|
|
<picker @change="selectedXl" :range="xls">
|
|
<input v-model="release.xl" placeholder="请选择学历"/>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">学校:</span>
|
|
<view><input v-model="release.unit" placeholder="请选择学校"/></view>
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">年级:</span>
|
|
<view><input v-model="release.unit" placeholder="请选择年级"/></view>
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">班级:</span>
|
|
<view><input v-model="release.unit" placeholder="请选择班级"/></view>
|
|
</view>
|
|
|
|
<view class="home-modal" v-show="showj">
|
|
<view class="title">订阅项目</view>
|
|
<view @click='clickLable(0)' class="label-class" :class="{'active': release.topid === 0}"> ￥43.88 语文 </view>
|
|
<view @click='clickLable(1)' class="label-class" :class="{'active': release.topid === 1}"> ￥43.88 数学 </view>
|
|
<view @click='clickLable(2)' class="label-class" :class="{'active': release.topid === 2}"> ￥43.88 英语 </view>
|
|
<view @click='clickLable(3)' class="label-class" :class="{'active': release.topid === 3}"> ￥43.88 化学 </view>
|
|
<view @click='clickLable(4)' class="label-class" :class="{'active': release.topid === 4}"> ￥43.88 物理 </view>
|
|
<view @click='clickLable(5)' class="label-class" :class="{'active': release.topid === 5}"> ￥43.88 历史 </view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="pay-btn" @click="fabujianzhi()">
|
|
提交申请
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
isChecked:false,
|
|
morenSrc:require('@/static/img/logon-icon.png'),
|
|
userInfo:null,
|
|
showj: false,
|
|
xls: ['小学','初中','高中'],
|
|
vsc: [['广东省','湖南省'], ['怀山区','广州区']],
|
|
release:{
|
|
name:"",
|
|
address:"",
|
|
vsClass:"",
|
|
money:"",
|
|
unit:"",
|
|
startTime:"",
|
|
endTime:"",
|
|
phone:"",
|
|
wx:"",
|
|
myValue:"",
|
|
xl:"",
|
|
topid: ""
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onReady() {
|
|
this.$com.displayNav()
|
|
},
|
|
methods:{
|
|
checkboxChange(e) {
|
|
let values = e.detail.value;
|
|
if (values[0] == 1) {
|
|
this.isChecked = true;
|
|
} else {
|
|
this.isChecked = false;
|
|
}
|
|
},
|
|
|
|
getmyInfo(){
|
|
this.$api('myInfo')
|
|
.then(res=>{
|
|
if(res.code == 200){
|
|
this.role = res.result.role;
|
|
this.userInfo = res.result;
|
|
this.$store.commit('set_userInfo',res.result)
|
|
}else{
|
|
this.userInfo = null
|
|
}
|
|
})
|
|
},
|
|
//跳转刊物介绍
|
|
seeDetail(){
|
|
uni.navigateTo({
|
|
url:`/pages/my/kanwus`
|
|
})
|
|
},
|
|
//跳转订阅记录
|
|
newDetail(){
|
|
uni.navigateTo({
|
|
url:`/pages/my/orders`
|
|
})
|
|
},
|
|
lower(){
|
|
|
|
},
|
|
selectedXl(event){
|
|
if(event.detail.value){
|
|
this.release.xl = this.xls[event.detail.value]
|
|
if(this.release.xl === '高中'){
|
|
this.showj = true
|
|
}
|
|
}
|
|
},
|
|
selectedVs(event){
|
|
if(event.type === 'columnchange'){
|
|
if(event.detail.column === 0){
|
|
const value = this.vsc[event.detail.column][event.detail.value];
|
|
console.log("选中：" + value);
|
|
if(1 === event.detail.value){
|
|
this.vsc[1] = ["永州教育区","长沙教育区"]
|
|
}
|
|
}
|
|
} else {
|
|
if(event.detail){
|
|
this.release.vsClass = ""
|
|
event.detail.value.forEach((v,k) => {
|
|
this.release.vsClass += (this.vsc[k][v] + " ");
|
|
})
|
|
}
|
|
}
|
|
},
|
|
clickLable(id){
|
|
this.release.topid = id
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-content {
|
|
.from {
|
|
margin-top: 20rpx;
|
|
background-color: #F7F7F7;
|
|
}
|
|
.from-line {
|
|
height: 108rpx;
|
|
display: flex;
|
|
background-color: #FFFFFF;
|
|
.label-class{
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
line-height: 68rpx;
|
|
width: 88rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
input{
|
|
padding-left: 10rpx;
|
|
height: 68rpx;
|
|
}
|
|
}
|
|
.from-line-box {
|
|
background-color: #FFFFFF;
|
|
height: 328rpx;
|
|
margin-right: 50rpx;
|
|
display: flex;
|
|
.label-class{
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
line-height: 128rpx;
|
|
width: 128rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
input{
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
.pay-btn{
|
|
text-align: center;
|
|
border-radius: 12rpx;
|
|
line-height: 78rpx;
|
|
background-color: #00CCCC;
|
|
color: #FFFFFF;
|
|
}
|
|
.pay-btn-2{
|
|
margin:10rpx auto;
|
|
text-align: center;
|
|
border-radius: 12rpx;
|
|
height: 78rpx;
|
|
line-height: 78rpx;
|
|
font-size: 48;
|
|
background-color: #FFFFFF;
|
|
}
|
|
}
|
|
.home-pages {
|
|
padding: 188rpx 10rpx 0;
|
|
background-color: #F7F7F7;
|
|
.scroll-Y {
|
|
height: calc(100vh - 200rpx);
|
|
padding-top: 20rpx;
|
|
}
|
|
}
|
|
.home-modal {
|
|
width: 100vw;
|
|
min-height: 20vh;
|
|
|
|
.title {
|
|
line-height: 100rpx;
|
|
margin-top: 40rpx;
|
|
background-color: #FFF;
|
|
}
|
|
|
|
.label-class {
|
|
line-height: 100rpx;
|
|
padding: 0 26rpx;
|
|
background-color: #FFF;
|
|
position: relative;
|
|
}
|
|
|
|
.label-class::after {
|
|
content: " ";
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 50%;
|
|
border: 1rpx solid #888;
|
|
|
|
position: absolute;
|
|
right: 36rpx;
|
|
top: calc((100rpx - 32rpx) / 2);
|
|
}
|
|
|
|
.label-class.active::after {
|
|
background-color: #544AFF;
|
|
border-color: #544AFF;
|
|
}
|
|
|
|
.label-class.active::before {
|
|
background-color: #FFF;
|
|
border: none;
|
|
content: ' ';
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
|
|
position: absolute;
|
|
top: calc((100rpx - 12rpx) / 2);
|
|
right: 46rpx;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|