|
@@ -0,0 +1,434 @@
|
|
|
+<template>
|
|
|
+ <view class="">
|
|
|
+ <view class="information">
|
|
|
+ <view class="list">
|
|
|
+ <view class="lable">{{isType?'姓名':'企业单位'}}:</view>
|
|
|
+ <view class="input">
|
|
|
+ <input type="text" v-model="list.name" :placeholder="isType?'请输入姓名':'请输入企业单位'" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="lable">{{isType?'身份证号':'企业统一代码'}}:</view>
|
|
|
+ <view class="input">
|
|
|
+ <input type="text" v-model="list.id" :placeholder="isType?'请输入身份证号':'请输入企业统一代码'" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="lable">联系方式:</view>
|
|
|
+ <view class="input">
|
|
|
+ <input type="text" v-model="list.phone" placeholder="请输入联系方式" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="lable" style="">所在地区:</view>
|
|
|
+ <view class="input" style="width: calc(100% - 240rpx);padding: 20rpx;">
|
|
|
+ <pickerAddress class="pickerAddress" :class="{pickerColor: !location}" @change="onCityClick">
|
|
|
+ {{location||'请选择地址'}}
|
|
|
+ </pickerAddress>
|
|
|
+ </view>
|
|
|
+ <view><img src="@/static/img/jt.png" v-show="!location"></view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="lable">详细地址:</view>
|
|
|
+ <view class="input">
|
|
|
+ <input type="text" v-model="list.address" placeholder="请输入详细地址" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="lable">{{isType?'职业':'主营领域'}}:</view>
|
|
|
+ <view class="input">
|
|
|
+ <input type="text" v-model="list.occupation" :placeholder="isType?'请输入职业':'请输入主营领域'" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="lable">{{isType?'职业年限':'公司年限'}}:</view>
|
|
|
+ <view class="input">
|
|
|
+ <input type="text" v-model="list.careerYears" :placeholder="isType?'请输入职业年限':'请输入公司年限'" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="lable">保荐人:</view>
|
|
|
+ <view class="input">
|
|
|
+ <input type="text" v-model="list.sponsor" placeholder="请输入保荐人" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="img">
|
|
|
+ <p>{{isType?'半身照':'品牌logo'}}:</p>
|
|
|
+ <view class="photo" @click='pic'>
|
|
|
+ <img :src="list.img" v-if="list.img" />
|
|
|
+ <img src="@/static/img/k.png" v-else>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="eject">
|
|
|
+ 提交申请
|
|
|
+ </view>
|
|
|
+ <view class="gradeList" v-if="isEject">
|
|
|
+ <view class="title">
|
|
|
+ 选择会员
|
|
|
+ </view>
|
|
|
+ <view class="grade" v-for="( g,index ) in gradeList" @click="chooseGradeList(g,index)">
|
|
|
+ <view style="width: 230rpx;">{{ g.name }}</view>
|
|
|
+ <view class="right">
|
|
|
+ {{ g.price == 0 ? '': g.price }}
|
|
|
+ <view class="border">
|
|
|
+ <view v-if="chooseGrade == index" class="xzTip"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="gradeButton" @click="type == 1?submit1():submit2()">
|
|
|
+ 确定提交
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bg" v-if="isEject" @click="isEject = false"></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ apply,
|
|
|
+ getPrice,
|
|
|
+ uploads
|
|
|
+ } from '../../api/apply.js'
|
|
|
+ import {
|
|
|
+ getUserInfo
|
|
|
+ } from '../../api/login.js'
|
|
|
+ import {
|
|
|
+ mapMutations,
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+ import {
|
|
|
+ saveUrl,
|
|
|
+ interceptor
|
|
|
+ } from '@/utils/loginUtils.js';
|
|
|
+ import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
|
|
|
+ import weixinObj from '@/plugin/jweixin-module/index.js';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ pickerAddress
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: {
|
|
|
+ name: '', // 姓名/企业单位
|
|
|
+ id: '', // 身份证号/企业统一代码
|
|
|
+ phone: '', // 联系方式
|
|
|
+ location: '', // 所在地区
|
|
|
+ address: '', // 详细地址
|
|
|
+ occupation: '', // 职业/主营领域
|
|
|
+ careerYears: '', // 职业年限/公司年限
|
|
|
+ sponsor: '', // 保荐人
|
|
|
+ img: '', // 半身照/品牌logo
|
|
|
+ pay_type: 'weixin', //weixin:微信支付,yue:余额支付
|
|
|
+ grade: '' // 等级
|
|
|
+ },
|
|
|
+ province: '', // 省
|
|
|
+ city: '', // 市
|
|
|
+ district: '', // 区
|
|
|
+ type: '', // 1代表个人会员2代表企业会员
|
|
|
+ isEject: false, //会员价格弹窗
|
|
|
+ gradeList: [],
|
|
|
+ chooseGrade: 0,
|
|
|
+ money: 0.0, //订单金额
|
|
|
+ // // #ifdef H5
|
|
|
+ // froms: '', //保存h5中数据来源对象
|
|
|
+ // // #endif
|
|
|
+ // orderKey: '',
|
|
|
+ // orderId: '', //保存订单id
|
|
|
+ payLoding: false, //判断是否在支付中
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // #ifdef H5
|
|
|
+ ...mapState(['weichatObj']),
|
|
|
+ // #endif
|
|
|
+ isType() {
|
|
|
+ return this.type == 1
|
|
|
+ },
|
|
|
+ // 所在地区
|
|
|
+ location() {
|
|
|
+ return this.province + this.city + this.district
|
|
|
+ },
|
|
|
+ ...mapState('user', ['hasLogin'])
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.price()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ location() {
|
|
|
+ this.list.location = this.location
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.type = options.type;
|
|
|
+ getUserInfo()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setInformation']),
|
|
|
+ // 选择会员价格
|
|
|
+ chooseGradeList(data, index) {
|
|
|
+ this.chooseGrade = index
|
|
|
+ this.list.grade = data.grade
|
|
|
+ this.money = data.price
|
|
|
+ console.log(this.list)
|
|
|
+ },
|
|
|
+ // 会员价格
|
|
|
+ price() {
|
|
|
+ getPrice({}, this.type).then(res => {
|
|
|
+ this.gradeList = res.data
|
|
|
+ this.list.grade = res.data[0].grade
|
|
|
+ console.log(this.list)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //会员价格选择
|
|
|
+ eject() {
|
|
|
+ this.isEject = true
|
|
|
+ },
|
|
|
+ // 个人申请提交
|
|
|
+ submit1() {
|
|
|
+ console.log('1')
|
|
|
+ const obj = this;
|
|
|
+ if (obj.payLoding) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ obj.payLoding = true;
|
|
|
+ apply(obj.list, obj.type).then(res => {
|
|
|
+ let da = res.data.result.jsConfig;
|
|
|
+ let data = {
|
|
|
+ timestamp: da.timestamp,
|
|
|
+ nonceStr: da.nonceStr,
|
|
|
+ package: da.package,
|
|
|
+ signType: da.signType,
|
|
|
+ paySign: da.paySign,
|
|
|
+ success: function(res) {
|
|
|
+ console.log(res)
|
|
|
+ obj.paySuccessToP();
|
|
|
+ obj.payLoding = false;
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ obj.payLoding = false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ weixinObj.chooseWXPay(data);
|
|
|
+ }).catch(res => {
|
|
|
+ obj.payLoding = false;
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //企业申请
|
|
|
+ submit2() {
|
|
|
+ const obj = this;
|
|
|
+ console.log('2')
|
|
|
+ apply(obj.list, obj.type).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ obj.paySuccessTo();
|
|
|
+ }).catch(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 上传图片
|
|
|
+ pic() {
|
|
|
+ console.log(this.hasLogin, '当前状态');
|
|
|
+ if (this.hasLogin) {
|
|
|
+ uploads().then(res => {
|
|
|
+ console.log(res, '返回图片');
|
|
|
+ this.list.img = res[0].url
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: "登陆",
|
|
|
+ content: '您未登录!是否马上登录?',
|
|
|
+ success: (e) => {
|
|
|
+ // 判断是否点击确认按钮
|
|
|
+ if (e.confirm) {
|
|
|
+ // 保存当前页面地址
|
|
|
+ saveUrl()
|
|
|
+ // 跳转页面
|
|
|
+ interceptor()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选中城市切换
|
|
|
+ onCityClick({ data }) {
|
|
|
+ this.province = data[0] + '/';
|
|
|
+ this.city = data[1] + '/';
|
|
|
+ this.district = data[2];
|
|
|
+ },
|
|
|
+ //提交申请成功
|
|
|
+ paySuccessTo() {
|
|
|
+ const that = this
|
|
|
+ uni.showToast({
|
|
|
+ title: '申请成功,请等待三个工作日审核',
|
|
|
+ duration: 2000,
|
|
|
+ position: 'top'
|
|
|
+ });
|
|
|
+ this.isEject = !this.isEject
|
|
|
+ },
|
|
|
+ // 个人申请提交申请成功
|
|
|
+ paySuccessToP() {
|
|
|
+ this.paySuccessTo()
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/apply/verification'
|
|
|
+ })
|
|
|
+ },500)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: solid 1rpx #f3f3f3;
|
|
|
+
|
|
|
+ .lable {
|
|
|
+ padding: 20rpx;
|
|
|
+ width: 270rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ padding-top: 26rpx;
|
|
|
+ width: 0rpx;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ input {
|
|
|
+ border: 0;
|
|
|
+ width: calc(100% - 20rpx);
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ font-size: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 0 0 20rpx 20rpx;
|
|
|
+ height: 340rpx;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ padding: 0 40rpx;
|
|
|
+
|
|
|
+ p {
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 160rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ margin: auto auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #3b66f5;
|
|
|
+ font-size: 30rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pickerAddress {}
|
|
|
+
|
|
|
+ .pickerColor {
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gradeList {
|
|
|
+ padding: 40rpx;
|
|
|
+ width: 600rpx;
|
|
|
+ left: calc(50% - 300rpx);
|
|
|
+ position: absolute;
|
|
|
+ top: 30%;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ z-index: 99;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grade {
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 40rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border {
|
|
|
+ margin: auto 15rpx;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: solid 1rpx #3b66f5;
|
|
|
+
|
|
|
+ .xzTip {
|
|
|
+ width: 12rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ margin-top: 2rpx;
|
|
|
+ margin-left: 2rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #3b66f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 98;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gradeButton {
|
|
|
+ padding: 10rpx;
|
|
|
+ background-color: #3b66f5;
|
|
|
+ color: #fff;
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+</style>
|