745 lines
31 KiB
Vue
745 lines
31 KiB
Vue
<template>
|
||
<!--pages/user_spread/user_spread.wxml-->
|
||
<view class="user-spread">
|
||
<view class="explain row muted" v-if="vipState==0 || vipState==1">
|
||
<image src="/static/images/icon_warning.png"></image>
|
||
<span class="ml10">成为分销会员，推广下级可获得额外收益，推广越多收益越多</span>
|
||
</view>
|
||
<loading-view v-if="showLoading"></loading-view>
|
||
<view class="header" v-if="!showLoading">
|
||
<view class="user-info row">
|
||
<view class="user-avatar">
|
||
<custom-image width="100%" height="100%" round :src="userInfo.user.avatar" />
|
||
<view class="avatar-tag white" v-if="vipState==2">分销会员</view>
|
||
</view>
|
||
<view class="user-message-container column ml20 white">
|
||
<view class="row mb10">
|
||
<view class="xxl bold" style="line-height: 50rpx">{{userInfo.user.nickname}}</view>
|
||
<!-- <view class="xs fans-type">铁粉</view> -->
|
||
</view>
|
||
<view class="xs row" style="line-height: 30rpx;text-align: left;">
|
||
上级分销商：{{!inviteStatus ? '无' : userInfo.leader.nickname}} <view v-if="!inviteStatus" class="br60 white write-btn row-center" @tap="showInvitePop">填写</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main" v-if="!showLoading">
|
||
<!-- 填表格 -->
|
||
<view :hidden="!vipState==0" class="user-apply-box">
|
||
<form>
|
||
|
||
<view class="user-apply-vip column-center">
|
||
<view class="user-apply-header column-center">
|
||
<view class="title xxl normal">申请成为分销会员</view>
|
||
|
||
</view>
|
||
<view class="vip-form">
|
||
<view class="form-item row">
|
||
<view class="label md">真实姓名：</view>
|
||
<input class="md" name="real_name" v-model="realName" placeholder="请输入您的真实姓名"></input>
|
||
</view>
|
||
<view @click="showRegion=true">
|
||
<view class="form-item row ">
|
||
<view class="label md">现住省份：</view>
|
||
<input class="md" name="region" :value="region" disabled type="text" placeholder="请选择省、市、区"></input>
|
||
<image class="icon-sm mr10" src="/static/images/arrow_right.png" />
|
||
</view>
|
||
</view>
|
||
<view class="form-item bg-white row" style="height: 74px;padding: 24rpx 20rpx 24rpx 30rpx">
|
||
<view class="label md" style="width: 150rpx;align-self: flex-start;">申请原因：</view>
|
||
<u-input type="textarea" v-model="reason" placeholder="（选填）" :custom-style="{paddingLeft: '10rpx'}" :fixed="true" style="flex: 1" />
|
||
<!-- <textarea name="reason" style="height: 150rpx;padding-top: 30rpx;" type="textarea" fixed="true" placeholder="（必填）" border="false" title-width="150rpx" @input="textareaChange" /> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="apply-btn bg-primary white md mt10 row-center br60" @click="formSubmit">
|
||
立即申请
|
||
</button>
|
||
<view class="mt20 xxs lighter row-center">提交成功后，我们将会在1-2个工作日内给您回复</view>
|
||
</form>
|
||
</view>
|
||
<!-- 申请状态 -->
|
||
<view :hidden="vipState!=1" class="user-result-box">
|
||
<view class="user-result column-center">
|
||
<view class="user-result-header column-center">
|
||
<view class="title xxl normal">申请成为分销会员</view>
|
||
<!-- <view class="explain row muted">
|
||
<image src="/static/images/icon_warning.png"></image>
|
||
<span class="ml10">成为分销会员，推广下级可获得额外收益，推广越多收益越多</span>
|
||
</view> -->
|
||
</view>
|
||
<view class="user-result-content column-center">
|
||
<image class="apply-result-img" :src="applyObject.status == 2 ? '../../static/images/icon_payFail.png' : '/static/images/icon_paySuccess.png'" />
|
||
<view class="mt10 nr" style="line-height: 40rpx">{{applyObject.status_str}}</view>
|
||
<view class="apply-fail-reason sm" :style="applyObject == 2 ? 'visibility: none' : 'visibility: hidden'">{{applyObject.reason}}</view>
|
||
</view>
|
||
<view class="user-result-info">
|
||
<view class="info-item row nr">
|
||
<view class="label">真实姓名：</view>
|
||
<view class="info-text ml20">{{applyObject.real_name}}</view>
|
||
</view>
|
||
<view class="info-item row nr">
|
||
<view class="label">现住省份：</view>
|
||
<view class="info-text ml20">{{applyObject.province}} {{applyObject.city}} {{applyObject.district}}</view>
|
||
</view>
|
||
<view class="info-item row nr">
|
||
<view class="label">申请原因：</view>
|
||
<view class="info-text ml20">{{applyObject.reason ? applyObject.reason : '-'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view :class="'white mt20 br60 apply-btn row-center md ' + (applyObject.status == 0 ? 'bg-gray' : 'bg-primary')" @tap="reApply">重新申请</view>
|
||
<view class="mt20 xxs lighter row-center">提交成功后，我们将会在1-2个工作日内给您回复</view>
|
||
</view>
|
||
<!-- 已申请 -->
|
||
<view :hidden="vipState!=2" class="user-vip">
|
||
<view class="user-assets-box">
|
||
<view class="user-assets-header row-between">
|
||
<view class="row nr bold" style="line-height: 80rpx;color: #8F430E;">
|
||
可提现佣金：
|
||
<price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26" :secondSize="36" :price="able_withdrawal" color="#FF2C3C" />
|
||
</view>
|
||
<navigator hover-class="none" class="primary-btn white row-center" url="/bundle/pages/user_withdraw/user_withdraw">立即提现</navigator>
|
||
</view>
|
||
<view class="user-assets-content row wrap">
|
||
<view class="user-item column-center">
|
||
<tool-tip v-if="false" class="mt20" id="today-profit" content="今日预估收益金额" style="position: absolute;right: -66rpx;"></tool-tip>
|
||
<view class="nr user-assets-name row" style="color: #8F430E">
|
||
今日预估收益 <!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
|
||
</view>
|
||
<view class="assets ml20">
|
||
<price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26" :secondSize="36" :price="today_earnings" color="#FF2C3C" />
|
||
</view>
|
||
</view>
|
||
<view class="user-item column-center">
|
||
<view class="nr user-assets-name row" style="color: #8F430E">
|
||
本月预估收益
|
||
<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
|
||
</view>
|
||
<view class="assets ml20">
|
||
<price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26" :secondSize="36" :price="month_earnings" color="#FF2C3C" />
|
||
</view>
|
||
</view>
|
||
<view class="user-item column-center">
|
||
<view class="nr user-assets-name row" style="color: #8F430E">
|
||
累计获得收益<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
|
||
</view>
|
||
<view class="assets">
|
||
<price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26" :secondSize="36" :price="history_earnings" color="#FF2C3C" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt20 fans-msg-box row-center bg-white md">
|
||
<navigator url="/bundle/pages/user_fans/user_fans" hover-class="none" class="my-fans row-center normal">
|
||
我的粉丝 <span class="primary ml10">{{userFans}}</span>
|
||
<u-icon class="ml10" name="arrow-right" size="28rpx" color="#666" />
|
||
</navigator>
|
||
</view>
|
||
<view class="my-invite-box mt20 bg-white column-center">
|
||
<view class="my-invite-title sm normal">我的邀请码</view>
|
||
<view class="row bold mt20" style="font-size: 42rpx;line-height: 30rpx">
|
||
{{userInfo.user.distribution_code}} <view class="invite-copy-btn ml10 xxs" @click="onCopy">点击复制</view>
|
||
</view>
|
||
<!-- <view class="row-center my-promote-banner bg-primary white">我的推广海报</view> -->
|
||
</view>
|
||
<view class="usual-tools-box bg-white mt20">
|
||
<view class="usual-tools-header row lg bold">
|
||
常用工具
|
||
</view>
|
||
<view class="usual-content row">
|
||
<navigator hover-class="none" url="/bundle/pages/user_spread_order/user_spread_order" class="usual-item column-center">
|
||
<image src="../../static/images/icon_fenxiao.png" class="usual-item-img"></image>
|
||
<view class="nr normal mt20" style="line-height: 40rpx">分销订单</view>
|
||
</navigator>
|
||
<navigator hover-class="none" url="/bundle/pages/user_spread_month_bill/user_spread_month_bill" class="usual-item column-center">
|
||
<image src="../../static/images/icon_zhangdan.png" class="usual-item-img"></image>
|
||
<view class="nr normal mt20" style="line-height: 40rpx">月度账单</view>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-popup v-model="showPop" @close="onClose" closeable mode="center" border-radius="30">
|
||
<view class="inviteformContain column-center">
|
||
<view class="title xl">填写上级分销商</view>
|
||
<view class="input-row row">
|
||
<view style="width: 140rpx;">邀请码：</view>
|
||
<input :value="inviteCode" @input="onInput" placeholder="请输入邀请码" />
|
||
</view>
|
||
<view class="btn bg-primary white row-center" @tap="inputInviteCodeFun">确定</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="regionLists" ></u-select>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | likeshop开源商城系统
|
||
// +----------------------------------------------------------------------
|
||
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
|
||
// | gitee下载：https://gitee.com/likeshop_gitee
|
||
// | github下载：https://github.com/likeshop-github
|
||
// | 访问官网：https://www.likeshop.cn
|
||
// | 访问社区：https://home.likeshop.cn
|
||
// | 访问手册：http://doc.likeshop.cn
|
||
// | 微信公众号：likeshop技术社区
|
||
// | likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识
|
||
// | likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识
|
||
// | 禁止对系统程序代码以任何目的，任何形式的再发布
|
||
// | likeshop团队版权所有并拥有最终解释权
|
||
// +----------------------------------------------------------------------
|
||
// | author: likeshop.cn.team
|
||
// +----------------------------------------------------------------------
|
||
import { inputInviteCode, applyVip, applyVipDetail, getInviteInfo, getPromoteHome, veryfiyDistribute } from "@/api/user";
|
||
import area from '@/utils/area'
|
||
import {copy} from '@/utils/tools'
|
||
export default {
|
||
data() {
|
||
return {
|
||
showLoading: true,
|
||
// 弹窗展示
|
||
showPop: false,
|
||
inviteCode: '',
|
||
realName: '',
|
||
reason: '',
|
||
region: '',
|
||
// 省id
|
||
provinceId: -1,
|
||
// 市id
|
||
cityId: -1,
|
||
// 区ID
|
||
districtId: -1,
|
||
// 推销状态 0 ==> 未申请 1 ==> 申请进度 2 ==> 已申请
|
||
vipState: 0,
|
||
userInfo: {
|
||
user: {},
|
||
leader: {}
|
||
},
|
||
// 审核信息对象
|
||
applyObject: {},
|
||
// 邀请人状态
|
||
inviteStatus: false,
|
||
showRegion: false,
|
||
regionLists: area,
|
||
able_withdrawal: 0,
|
||
history_earnings: 0,
|
||
month_earnings: 0,
|
||
today_earnings: 0,
|
||
userFans: 0
|
||
};
|
||
},
|
||
|
||
components: {
|
||
},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function (options) {
|
||
this.showLoading = true
|
||
this.veryfiyDistributeFun()
|
||
},
|
||
|
||
|
||
methods: {
|
||
onInput(e) {
|
||
this.inviteCode = e.detail.value
|
||
},
|
||
|
||
// 申请成功数据
|
||
getPromoteHomeFun() {
|
||
getPromoteHome().then(res => {
|
||
if (res.code == 1) {
|
||
if (res.data.leader.length <= 0) {
|
||
this.inviteStatus = false;
|
||
} else {
|
||
this.inviteStatus = true;
|
||
}
|
||
this.userInfo = res.data;
|
||
this.userFans = res.data.fans
|
||
this.able_withdrawal = res.data.able_withdrawal
|
||
this.history_earnings = res.data.history_earnings
|
||
this.month_earnings = res.data.month_earnings
|
||
this.today_earnings = res.data.today_earnings
|
||
}
|
||
});
|
||
},
|
||
|
||
veryfiyDistributeFun() {
|
||
veryfiyDistribute().then(res => {
|
||
if(res.code == 10001) {
|
||
this.vipState = 2
|
||
// 获取详情
|
||
this.getInviteInfoFun();
|
||
this.getPromoteHomeFun();
|
||
if(this.showLoading == true) {
|
||
this.showLoading = false
|
||
}
|
||
}
|
||
else if(res.code == 20001) {
|
||
|
||
// 填写表单
|
||
this.vipState = 0;
|
||
this.getInviteInfoFun();
|
||
this.applyVipDetailFun()
|
||
}
|
||
else if(res.code == 0) {
|
||
// 返回上一页
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 500)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 最新分销会员申请详情
|
||
applyVipDetailFun() {
|
||
applyVipDetail().then(res => {
|
||
if(res.code == 1) {
|
||
switch(res.data.status) {
|
||
case 0:
|
||
// 待审核
|
||
case 2:
|
||
// 审核不通过
|
||
this.vipState = 1;
|
||
this.applyObject = res.data
|
||
break;
|
||
case 1:
|
||
this.getPromoteHomeFun();
|
||
break;
|
||
}
|
||
if(this.showLoading == true) {
|
||
this.showLoading = false
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
reApply() {
|
||
this.vipState = 0
|
||
},
|
||
|
||
regionChange(region) {
|
||
this.region = region[0].label + " " + region[1].label + " " + region[2].label
|
||
this.provinceId = region[0].value;;
|
||
this.cityId = region[1].value;
|
||
this.districtId = region[2].value
|
||
},
|
||
|
||
formSubmit(e) {
|
||
let {
|
||
provinceId,
|
||
cityId,
|
||
districtId,
|
||
reason
|
||
} = this;
|
||
console.log('formSubmit')
|
||
|
||
if (!this.realName) {
|
||
this.$toast({
|
||
title: "请填写真实姓名"
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.region.length) {
|
||
this.$toast({
|
||
title: "请选择省市区"
|
||
});
|
||
return;
|
||
}
|
||
|
||
let data = {
|
||
real_name: this.realName,
|
||
province: provinceId,
|
||
city: cityId,
|
||
district: districtId,
|
||
reason: reason
|
||
};
|
||
this.applyVipFun(data);
|
||
},
|
||
|
||
// 分销会员申请
|
||
applyVipFun(data) {
|
||
applyVip(data).then(res => {
|
||
if (res.code == 1) {
|
||
this.$toast({
|
||
title: res.msg
|
||
});
|
||
this.applyVipDetailFun();
|
||
}
|
||
});
|
||
},
|
||
|
||
// 填写邀请码
|
||
inputInviteCodeFun() {
|
||
inputInviteCode({
|
||
code: this.inviteCode
|
||
}).then(res => {
|
||
this.$toast({
|
||
title: res.msg
|
||
})
|
||
if (res.code == 1) {
|
||
this.showPop = false
|
||
this.getInviteInfoFun();
|
||
}
|
||
});
|
||
},
|
||
|
||
showInvitePop() {
|
||
this.showPop = true;
|
||
},
|
||
|
||
// 获取邀请人信息
|
||
getInviteInfoFun() {
|
||
getInviteInfo().then(res => {
|
||
if (res.code == 1) {
|
||
if (res.data.leader.length <= 0) {
|
||
this.userInfo = res.data;
|
||
this.inviteStatus = false
|
||
} else {
|
||
this.userInfo = res.data;
|
||
this.inviteStatus = true
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
textareaChange(e) {
|
||
this.reason = e.detail.value
|
||
},
|
||
|
||
onClose() {
|
||
this.showPop = false;
|
||
},
|
||
|
||
onCopy() {
|
||
copy(this.userInfo.user.distribution_code)
|
||
},
|
||
|
||
// 显示提示窗口
|
||
showToolTip(e) {
|
||
this.animate("#today-profit");
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.user-spread {
|
||
.explain {
|
||
background-color: #FFFADE;
|
||
padding: 18rpx 20rpx;
|
||
color: #F95F2F;
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
flex: none;
|
||
}
|
||
span {
|
||
font-size: 20rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
.header {
|
||
background-image: url(data:image/png;base64,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);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
padding-top: 40rpx;
|
||
height: 280rpx;
|
||
.user-info {
|
||
padding-left: 30rpx;
|
||
.user-avatar {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
position: relative;
|
||
.avatar-tag {
|
||
position: absolute;
|
||
bottom: -16rpx;
|
||
width: 100%;
|
||
background-color: #F79C0C;
|
||
border: 1rpx solid #FFFFFF;
|
||
border-radius: 100rpx;
|
||
font-size: 22rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
.user-message-container {
|
||
.fans-type {
|
||
margin-left: 12rpx;
|
||
background-color: #291B06;
|
||
padding: 4rpx 22rpx;
|
||
border-radius: 100rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
.write-btn {
|
||
height: 42rpx;
|
||
width: 100rpx;
|
||
margin-left: 30rpx;
|
||
background-color: #FF838D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.main {
|
||
padding: 0 20rpx;
|
||
margin-top: -60rpx;
|
||
.user-vip {
|
||
.user-assets-box {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 10rpx 20rpx 22rpx;
|
||
background: linear-gradient(90deg, #FBEFDB 0%, #FED09E 100%);
|
||
.user-assets-header {
|
||
border-bottom: 1rpx dashed #8F430E;
|
||
padding-bottom: 4rpx;
|
||
.primary-btn {
|
||
height: 54rpx;
|
||
border-radius: 120rpx;
|
||
width: 144rpx;
|
||
background: linear-gradient(180deg, #FF3067 0%, #FF2C3C 100%);
|
||
}
|
||
}
|
||
.user-assets-content {
|
||
margin-top: 30rpx;
|
||
.user-item {
|
||
flex: 1;
|
||
position: relative;
|
||
.user-assets-name {
|
||
text-align: left;
|
||
align-self: flex-start;
|
||
}
|
||
.assets {
|
||
margin-top: 14rpx;
|
||
text-align: left;
|
||
align-self: flex-start;
|
||
}
|
||
// &:last-of-type .assets {
|
||
// align-self: center;
|
||
// margin-top: 14rpx;
|
||
// text-align: left;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
.fans-msg-box {
|
||
border-radius: 10rpx;
|
||
line-height: 42rpx;
|
||
.my-fans {
|
||
width: 50%;
|
||
height: 120rpx;
|
||
}
|
||
.line {
|
||
width: 3rpx;
|
||
height: 60rpx;
|
||
background-color: #E5E5E5;
|
||
}
|
||
.invite-fans {
|
||
width: 50%;
|
||
height: 120rpx;
|
||
}
|
||
}
|
||
.my-invite-box {
|
||
padding: 26rpx 0 57rpx;
|
||
border-radius: 10rpx;
|
||
.invite-copy-btn {
|
||
line-height: 30rpx;
|
||
padding: 10rpx;
|
||
background: linear-gradient(90deg, #FEE4B4 0%, #FBCB96 100%);
|
||
color: #8F430E;
|
||
border-radius: 4rpx;
|
||
}
|
||
.my-promote-banner {
|
||
margin-top: 30rpx;
|
||
height: 148rpx;
|
||
width: 542rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.usual-tools-box {
|
||
border-radius: 10rpx;
|
||
padding: 0 25rpx;
|
||
.usual-tools-header {
|
||
height: 100rpx;
|
||
line-height: 44rpx;
|
||
border-bottom: $solid-border;
|
||
}
|
||
.usual-content {
|
||
padding: 40rpx 0;
|
||
.usual-item {
|
||
width: 25%;
|
||
.usual-item-img {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
flex: none;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.user-apply-box {
|
||
.user-apply-vip {
|
||
background-color: white;
|
||
padding: 40rpx 0 0rpx;
|
||
border-radius: 20rpx;
|
||
.title {
|
||
line-height: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
.explain {
|
||
margin-top: 20rpx;
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
flex: none;
|
||
}
|
||
span {
|
||
font-size: 20rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
.vip-form {
|
||
width: 100%;
|
||
flex: 1;
|
||
margin-top: 60rpx;
|
||
.form-item {
|
||
padding: 24rpx 0 24rpx 30rpx;
|
||
border: $solid-border;
|
||
margin: 0 34rpx 30rpx;
|
||
.label {
|
||
width: 150rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
input {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
margin-left: 10rpx;
|
||
line-height: 30rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.apply-btn {
|
||
line-height: 30rpx;
|
||
height: 82rpx;
|
||
}
|
||
}
|
||
.user-result-box {
|
||
.user-result {
|
||
background-color: white;
|
||
padding: 36rpx 14rpx 50rpx;
|
||
border-radius: 20rpx;
|
||
.user-result-header {
|
||
.title {
|
||
line-height: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
}
|
||
.user-result-content {
|
||
padding: 60rpx 0 22rpx;
|
||
/* margin: 0 8px; */
|
||
width: 100%;
|
||
border-bottom: $solid-border;
|
||
.apply-result-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
}
|
||
.user-result-info {
|
||
margin-top: 42rpx;
|
||
width: 100%;
|
||
.info-item {
|
||
margin-left: 60rpx;
|
||
margin-bottom: 28rpx;
|
||
line-height: 30rpx;
|
||
.label {
|
||
width: 140rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.apply-btn {
|
||
line-height: 30rpx;
|
||
height: 82rpx;
|
||
}
|
||
.bg-gray {
|
||
background-color: #CCCCCC;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main .van-cell {
|
||
height: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
.main .van-cell .van-cell__title {
|
||
font-size: 30rpx;
|
||
line-height: 30rpx;
|
||
width: 150rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
van-field view {
|
||
height: 100%;
|
||
}
|
||
|
||
van-field textarea {
|
||
height: 100% !important;
|
||
}
|
||
|
||
.van-field__body--textarea, .van-field__input {
|
||
margin-left: 15rpx;
|
||
}
|
||
|
||
.main .user-apply-box .apply-btn {
|
||
line-height: 30rpx;
|
||
height: 82rpx;
|
||
}
|
||
|
||
.main .user-result-box .user-result-content .apply-fail-reason {
|
||
color: $color-primary;
|
||
line-height: 36rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
/* 弹窗 */
|
||
.inviteformContain {
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
padding-bottom: 30rpx;
|
||
width: 580rpx;
|
||
border-radius: 6rpx;
|
||
background-color: $color-white;
|
||
}
|
||
|
||
.inviteformContain .title {
|
||
padding: 26rpx 0rpx;
|
||
}
|
||
|
||
.inviteformContain .modify-row {
|
||
padding: 32rpx 0px;
|
||
width: 100%;
|
||
border-bottom: 1rpx solid #E5E5E5;
|
||
}
|
||
|
||
.inviteformContain .btn {
|
||
height: 80rpx;
|
||
padding: 0 180rpx;
|
||
border-radius: 10rpx;
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
/* .van-popup--center {
|
||
border-radius: 10rpx;
|
||
} */
|
||
</style> |