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.
653 lines
18 KiB
653 lines
18 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 style="margin-top: 30rpx;font-size: 28rpx;font-weight: 500">不积跬步 无以至千里</view>
|
|
</view>
|
|
<view style="padding: 28rpx;">
|
|
<view style="font-size: 30rpx;font-weight: 500">订阅记录 ></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="home-content">
|
|
<view class="pay-btn-2" @click="seeDetail()">
|
|
<view style="margin-right: 110rpx;">刊物介绍</view>
|
|
<!-- <span ></span> -->
|
|
|
|
</view>
|
|
<view style="margin: 10rpx; font-weight: 200;">
|
|
<span>订阅申请</span>
|
|
</view>
|
|
|
|
<view class="from">
|
|
|
|
<view class="from-line">
|
|
<span class="label-class" style="margin-top: 20rpx;">姓名:</span>
|
|
<view><input style="margin-top: 20rpx;border-bottom: 1px solid #ccc;" v-model="release.userName" placeholder="请输入学生姓名" /></view>
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">电话:</span>
|
|
<view><input type="number" style="border-bottom: 1px solid #ccc;" v-model="release.mobilePhone" placeholder="请输入手机号码" /></view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="from-line" >
|
|
<span class="label-class">省份:</span>
|
|
<view class="uni-list-cell-left" >
|
|
<picker @change="selectedSf" :range="provinceNames" range-key="name" >
|
|
<!-- {{release.provinceName ? release.provinceName:"请选择省份"}} -->
|
|
<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
|
|
<spen >{{release.provinceName?release.provinceName:'请选择省份'}}</spen>
|
|
</view>
|
|
<!-- <spen :readonly="true" v-model="release.provinceName" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择省份" >
|
|
|
|
</spen> -->
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">区域:</span>
|
|
<view class="uni-list-cell-left">
|
|
<picker @change="selectedQy" :range="regionNames" range-key="name">
|
|
<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
|
|
<spen >{{release.regionName?release.regionName:'请选择区域'}}</spen>
|
|
</view>
|
|
<!-- <input :readonly="true" v-model="release.regionName" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择区域" /> -->
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="from-line">
|
|
<span class="label-class">学历:</span>
|
|
<view class="uni-list-cell-left">
|
|
<picker @change="selectedXl" :range="schoolTypes">
|
|
<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
|
|
<spen >{{release.schoolType?release.schoolType:'请选择学历'}}</spen>
|
|
</view>
|
|
<!-- <input :readonly="true" v-model="release.schoolType" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择学历" /> -->
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="from-line">
|
|
<span class="label-class">学校:</span>
|
|
<view class="uni-list-cell-left">
|
|
<picker @change="selectedXx" :range="schoolNames" range-key="name">
|
|
<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
|
|
<spen >{{release.schoolName?release.schoolName:'请选择学校'}}</spen>
|
|
</view>
|
|
<!-- <input :readonly="true" v-model="release.schoolName" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择学校" /> -->
|
|
</picker>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- <view><input v-model="release.schoolName" placeholder="请选择学校" /></view> -->
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">年级:</span>
|
|
<view class="uni-list-cell-left">
|
|
<picker @change="selectedNj" :range="gradeNames" range-key="name">
|
|
<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
|
|
<spen >{{release.gradeName?release.gradeName:'请选择年级'}}</spen>
|
|
</view>
|
|
<!-- <input :readonly="true" v-model="release.gradeName" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择年级 " /> -->
|
|
</picker>
|
|
</view>
|
|
<!-- <view><input v-model="release.gradeName" placeholder="请选择年级" /></view> -->
|
|
</view>
|
|
<view class="from-line">
|
|
<span class="label-class">班级:</span>
|
|
<view class="uni-list-cell-left">
|
|
<picker @change="selectedBj" :range="classNames" range-key="name">
|
|
<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
|
|
<spen >{{release.className?release.className:'请选择班级'}}</spen>
|
|
</view>
|
|
<!-- <input :readonly="true" v-model="release.className" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择班级" /> -->
|
|
</picker>
|
|
</view>
|
|
<!-- <view><input v-model="release.className" placeholder="请选择班级" /></view> -->
|
|
</view>
|
|
|
|
<view class="home-modal" v-show="showj == true">
|
|
<!-- :class="{'active': release.topid === item.id}" -->
|
|
<view class="title">订阅项目</view>
|
|
<view v-for="(item,index) in dianList" @click='clickLable(index)' class="label-class" :class="{'active': item.selected === true}">
|
|
￥{{item.price}} {{item.name}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="pay-btn" @click="getCreteClick()">
|
|
提交申请
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isChecked: false,
|
|
morenSrc: require('@/static/img/logon-icon.png'),
|
|
userInfo: null,
|
|
showj: false,
|
|
provinceNames:[],
|
|
regionNames:[],
|
|
schoolTypes: ['小学', '初中', '高中'],
|
|
schoolNames:[],
|
|
dianList:[],
|
|
selectId: [],
|
|
gradeNames:[],
|
|
classNames:[],
|
|
clicked:false,
|
|
|
|
|
|
|
|
vsc: [
|
|
['广东省', '湖南省'],
|
|
['怀山区', '广州区']
|
|
],
|
|
release: {
|
|
userName: "",
|
|
mobilePhone: "",
|
|
vsClass: "",
|
|
provinceName:"",
|
|
regionName:"",
|
|
schoolType: "",
|
|
schoolName: "",
|
|
gradeName: "",
|
|
className: "",
|
|
items: "",
|
|
totalPrice: 0.00,
|
|
schoolType: "",
|
|
topid: ""
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getmyInfo();
|
|
this.getProvinceNameList();
|
|
// this.getYerList();
|
|
this.getClassList();
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
// 隐藏微信h5的标题栏
|
|
onReady() {
|
|
this.$com.displayNav()
|
|
},
|
|
methods: {
|
|
// stopKeyborad () {
|
|
// this.$refs.scanTextbox.setAttribute('readonly', 'readonly');
|
|
// setTimeout(() => {
|
|
// this.$refs.scanTextbox.removeAttribute('readonly');
|
|
// }, 200);
|
|
// },
|
|
//获取省
|
|
getProvinceNameList(){
|
|
this.$api('getProvinceNameList', {}).then(res => {
|
|
if(res.code == 200){
|
|
this.provinceNames =res.result;
|
|
}
|
|
})
|
|
},
|
|
//获取区域
|
|
getRegionNameList(provinceName){
|
|
this.$api('getRegionNameList', {"provinceName":provinceName}).then(res => {
|
|
console.log("---")
|
|
console.log(res)
|
|
if(res.code == 200){
|
|
this.regionNames = res.result;
|
|
console.log("regionNames2")
|
|
console.log(this.regionNames)
|
|
}
|
|
})
|
|
console.log("regionNames")
|
|
console.log(this.regionNames)
|
|
},
|
|
//获取学校
|
|
getSchoolList(provinceName,regionName,schoolType){
|
|
this.$api('getSchoolList',
|
|
{
|
|
"provinceName":provinceName,
|
|
"regionName":regionName,
|
|
"schoolType":schoolType,
|
|
}).then(res => {
|
|
if(res.code == 200){
|
|
this.schoolNames =res.result;
|
|
}
|
|
})
|
|
},
|
|
//获取订阅信息
|
|
getDinList(provinceName,regionName,schoolType,schoolName,gradeName){
|
|
|
|
this.$api('getDinList',
|
|
{
|
|
"provinceName":provinceName,
|
|
"regionName":regionName,
|
|
"schoolType":schoolType,
|
|
"schoolName":schoolName,
|
|
"gradeName":gradeName,
|
|
}).then(res => {
|
|
if(res.code == 200){
|
|
this.dianList =res.result;
|
|
}
|
|
})
|
|
},
|
|
//获取订阅信息
|
|
getYerList(schoolType){
|
|
this.$api('getYerList',
|
|
{
|
|
"schoolType":schoolType,
|
|
}).then(res => {
|
|
if(res.code == 200){
|
|
this.gradeNames =res.result;
|
|
}
|
|
})
|
|
},
|
|
//获取订阅信息
|
|
getClassList(){
|
|
this.$api('getClassList',
|
|
{
|
|
|
|
}).then(res => {
|
|
if(res.code == 200){
|
|
this.classNames =res.result;
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
|
|
|
|
// 单个复选框事件
|
|
checkboxChange(e) {
|
|
let values = e.detail.value;
|
|
if (values[0] == 1) {
|
|
this.isChecked = true;
|
|
} else {
|
|
this.isChecked = false;
|
|
}
|
|
},
|
|
//提交创建订单
|
|
createOrder() {
|
|
|
|
},
|
|
|
|
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
|
|
}
|
|
if (!this.userInfo) {
|
|
uni.navigateTo({
|
|
url: "/pages/my/login-kehu"
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//跳转刊物介绍
|
|
seeDetail() {
|
|
if (!this.userInfo) {
|
|
uni.navigateTo({
|
|
url: "/pages/my/login-kehu"
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/pages/my/kanwus"
|
|
})
|
|
}
|
|
},
|
|
getCreteClick() {
|
|
let that = this;
|
|
if(that.clicked == true){
|
|
this.$Toast('请不要重复提交！');
|
|
setTimeout(()=>{
|
|
that.clicked = false;
|
|
},1500)
|
|
return
|
|
}
|
|
that.clicked = true;
|
|
|
|
|
|
this.$api('createShopOrder', {
|
|
"userName": this.release.userName,
|
|
"mobilePhone": this.release.mobilePhone,
|
|
"provinceName": this.release.provinceName,
|
|
"regionName": this.release.regionName,
|
|
"schoolType": this.release.schoolType,
|
|
"schoolName": this.release.schoolName,
|
|
"gradeName": this.release.gradeName,
|
|
"className": this.release.className,
|
|
"items": this.release.items,
|
|
// "totalPrice": this.release.totalPrice,
|
|
})
|
|
.then(res => {
|
|
if(res.code == 500){
|
|
this.$Toast(res.message)
|
|
}
|
|
if (res.code == 200) {
|
|
|
|
that.$api('create', {
|
|
id: res.result.id
|
|
})
|
|
.then(res => {
|
|
|
|
console.log(res)
|
|
that.$jweixin.config({
|
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
appId: 'wx77fe1fcd6471ecbe', // 必填，公众号的唯一标识
|
|
timestamp: res.result.timestamp, // 必填，生成签名的时间戳
|
|
nonceStr: res.result.noncestr, // 必填，生成签名的随机串
|
|
signature: res.result.sgture, // 必填，签名
|
|
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',
|
|
'onMenuShareTimeline', 'onMenuShareAppMessage',
|
|
'chooseWXPay'
|
|
]
|
|
});
|
|
|
|
that.$jweixin.chooseWXPay({
|
|
appId: 'wx77fe1fcd6471ecbe',
|
|
timestamp: res.result
|
|
.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
|
|
nonceStr: res.result.nonceStr, // 支付签名随机串，不长于 32 位
|
|
package: res.result
|
|
.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
|
|
signType: res.result
|
|
.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
|
|
paySign: res.result.paySign, // 支付签名
|
|
success: function(res) {
|
|
that.erop = true;
|
|
that.clicked = false;
|
|
uni.navigateTo({
|
|
url: "/pages/my/orders"
|
|
})
|
|
}
|
|
});
|
|
})
|
|
|
|
|
|
|
|
}
|
|
})
|
|
|
|
},
|
|
//跳转订阅记录
|
|
newDetail() {
|
|
console.log(":============订阅")
|
|
if (!this.userInfo) {
|
|
uni.navigateTo({
|
|
url: "/pages/my/login-kehu"
|
|
})
|
|
} else {
|
|
console.log(":============订阅订单")
|
|
uni.navigateTo({
|
|
url: "/pages/my/orders"
|
|
})
|
|
}
|
|
|
|
},
|
|
lower() {
|
|
|
|
},
|
|
|
|
//省份
|
|
selectedSf(event) {
|
|
console.log(event.detail.value)
|
|
// if (event.detail.value) {
|
|
this.release.provinceName = this.provinceNames[event.detail.value].name
|
|
// }
|
|
//清空值
|
|
this.release.regionName = "";
|
|
this.release.schoolType = "";
|
|
this.release.schoolName = "";
|
|
this.release.gradeName = "";
|
|
//得到区域
|
|
this.getRegionNameList(this.release.provinceName);
|
|
|
|
},
|
|
//区域
|
|
selectedQy(event) {
|
|
// if (event.detail.value) {
|
|
this.release.regionName = this.regionNames[event.detail.value].name
|
|
|
|
this.release.schoolType = "";
|
|
this.release.schoolName = "";
|
|
this.release.gradeName = "";
|
|
// }
|
|
},
|
|
//学历
|
|
selectedXl(event) {
|
|
// if (event.detail.value) {
|
|
this.release.schoolType = this.schoolTypes[event.detail.value]
|
|
this.getSchoolList(this.release.provinceName,this.release.regionName,this.release.schoolType);
|
|
this.getYerList(this.release.schoolType);
|
|
|
|
|
|
this.release.schoolName = "";
|
|
this.release.gradeName = "";
|
|
|
|
// }
|
|
},
|
|
//学校
|
|
selectedXx(event) {
|
|
// if (event.detail.value) {
|
|
this.release.schoolName = this.schoolNames[event.detail.value].name
|
|
// }
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
selectedNj(event) {
|
|
// if (event.detail.value) {
|
|
this.release.gradeName = this.gradeNames[event.detail.value].name
|
|
this.getDinList(this.release.provinceName,this.release.regionName,this.release.schoolType,this.release.schoolName,this.release.gradeName);
|
|
this.showj = true
|
|
// }
|
|
},
|
|
|
|
selectedBj(event) {
|
|
console.log(event.detail.value)
|
|
// if (event.detail.value) {
|
|
this.release.className = this.classNames[event.detail.value].name
|
|
// }
|
|
},
|
|
|
|
|
|
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(index) {
|
|
// this.release.topid = item.id
|
|
// this.release.subItems = item.name
|
|
// this.release.totalPrice = item.price
|
|
let ids = "";
|
|
if (this.dianList[index].selected == true) {
|
|
this.dianList[index].selected = false;
|
|
//取消选中时删除数组中的值
|
|
for (var i = 0; i < this.selectId.length; i++) {
|
|
if (this.selectId[i] === this.dianList[index].id) {
|
|
this.selectId.splice(i, 1);
|
|
|
|
}
|
|
}
|
|
console.log("选中的值", this.selectId)
|
|
} else {
|
|
this.dianList[index].selected = true;
|
|
this.selectId.push(this.dianList[index].id)
|
|
|
|
console.log("选中的值", this.selectId)
|
|
}
|
|
this.release.items = this.selectId;
|
|
}
|
|
|
|
}
|
|
}
|
|
</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: 138rpx;
|
|
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: 168rpx;
|
|
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: left;
|
|
border-radius: 12rpx;
|
|
height: 78rpx;
|
|
font-weight: 200rpx;
|
|
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>
|