123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239 |
- <template>
- <view class="main">
- <navbar :config="config" backColor="#666"></navbar>
- <image class="cover" src="/static/recommendDonation/cover.png"></image>
- <view class="content">
- <view class="detail-top-title">
- <image class="line" src="/static/common/line1.png"></image>
- <text class="title">帮扶对象信息</text>
- <image class="line" src="/static/common/line1.png"></image>
- </view>
- </view>
- <view class="common-form">
- <view class="form-title required">真实姓名</view>
- <view class="form-item">
- <input v-model="form.real_name" placeholder="请输入帮扶对象姓名" :maxlength="10" />
- </view>
- <view class="form-title required">联系电话</view>
- <view class="form-item">
- <input v-model="form.phone" placeholder="请输入帮扶对象联系电话" type="number" :maxlength="11" />
- </view>
- <view class="form-title">性别</view>
- <view class="form-item" @click="sexShow=true">
- <text v-if="form.sex===0||form.sex===1">{{sexList[form.sex].label}}</text>
- <input disabled v-else placeholder="请选择性别" />
- <text class="iconfont2"></text>
- </view>
- <view class="form-title">年龄</view>
- <view class="form-item">
- <input v-model="form.age" placeholder="请输入年龄" type="number" :maxlength="3" />
- </view>
- <view class="form-title">身份证号</view>
- <view class="form-item">
- <input style="width: 100%;" v-model="form.id_number" :adjust-position="false" placeholder="请输入身份证号" type="text"
- :maxlength="18" />
- </view>
- <view class="form-title">所在地区</view>
- <view class="form-item" @click="addressShow=true">
- <view v-if="form.province_name&&form.city_name&&form.area_name">
- {{form.province_name+form.city_name+form.area_name}}</view>
- <input v-else disabled placeholder="选择省市区" />
- <text class="iconfont2"></text>
- </view>
- <view class="form-title">详细地址</view>
- <view class="form-item">
- <input v-model="form.address" placeholder="请输入详细地址" />
- </view>
- <view class="form-title required">情况说明</view>
- <view class="form-item no-border">
- <u-input v-model="form.explanation" type="textarea" border height="214" maxlength="500"
- placeholder="请详细说明帮扶对象的情况" style="background-color: #FAFAFA;" />
- </view>
- <view class="form-split"></view>
- <view class="detail-top-title">
- <image class="line" src="/static/common/line1.png"></image>
- <text class="title">推荐人信息</text>
- <image class="line" src="/static/common/line1.png"></image>
- </view>
- <view class="form-title required">联系人</view>
- <view class="form-item">
- <input v-model="form.contacts" placeholder="请输入推荐人姓名" :maxlength="10" />
- </view>
- <view class="form-title required">联系电话</view>
- <view class="form-item">
- <input v-model="form.contact_number" type="number" placeholder="请输入推荐人联系电话" :maxlength="11" />
- </view>
- <view class="form-tip">
- 注意:您填写捐赠信息后,基金工作人员将会电话联系帮扶对象或您、确定具体帮扶事宜!
- </view>
- <button class="submit-btn" @click="submit()">立即提交</button>
- </view>
- <uni-popup class="submit-popup" ref="submitPopup" type="center" :mask-click="false">
- <view class="content-box">
- <view class="title">提交完成</view>
- <view class="content">
- <image class="success-icon" src="/static/common/success-icon.png"></image>
- <view class="tip" style="width: 416rpx;">
- 公益捐款信息已经提交,工作人员会 尽快与您取得联系对接帮扶事宜。
- </view>
- <button class="btn" @click="closePopup()">知道了</button>
- </view>
- </view>
- </uni-popup>
- <!-- 选择性别 -->
- <u-select v-model="sexShow" mode="single-column" :list="sexList" @confirm="sexConfirm"></u-select>
- <!-- 选择地区 -->
- <u-select v-model="addressShow" mode="mutil-column-auto" :list="addressArr" @confirm="addressConfirm">
- </u-select>
- <u-modal v-model="tostShow" content="确认提交?" show-cancel-button @confirm="affirmSubmit"></u-modal>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- config: {
- back: true,
- title: '推荐帮扶',
- color: '#1a1a1a',
- backgroundColor: [1, '#fff'],
- statusBarFontColor: 'black'
- },
- form: {},
- imgFiles: [],
- sexShow: false,
- sexList: [{
- value: 0,
- label: '男'
- },
- {
- value: 1,
- label: '女'
- }
- ],
- addressShow: false,
- addressArr: [],
- tostShow: false
- }
- },
- onLoad() {
- this.getAddressCode()
- },
- methods: {
- getAddressCode() {
- this.$http.get('/cnarea/tree-lbs').then(res => {
- if (res && res.code == 200) {
- this.addressArr = res.tree.children;
- }
- })
- },
- // 选择性别
- sexConfirm(e) {
- this.form.sex = e[0].value;
- },
- // 选择地区
- addressConfirm(e) {
- this.form.province_name = e[0].label;
- this.form.province_code = e[0].value;
- this.form.city_name = e[1].label;
- this.form.city_code = e[1].value;
- this.form.area_name = e[2].label;
- this.form.area_code = e[2].value;
- },
- submit() {
- let regExp = new RegExp("^1\\d{10}$");
- if (!this.form.real_name) {
- uni.showToast({
- icon: "none",
- title: '请输入帮扶对象姓名',
- duration: 1500
- });
- return
- } else if (!this.form.phone) {
- uni.showToast({
- icon: "none",
- title: '请输入帮扶对象联系电话',
- duration: 1500
- });
- return
- } else if (!regExp.test(this.form.phone)) {
- uni.showToast({
- icon: "none",
- title: '请输入正确的帮扶对象联系电话',
- duration: 1500
- });
- return
- } else if (!this.form.explanation) {
- uni.showToast({
- icon: "none",
- title: '请输入情况说明',
- duration: 1500
- });
- return
- } else if (!this.form.contacts) {
- uni.showToast({
- icon: "none",
- title: '请输入推荐人姓名',
- duration: 1500
- });
- return
- } else if (!this.form.contact_number) {
- uni.showToast({
- icon: "none",
- title: '请输入推荐人联系电话',
- duration: 1500
- });
- return
- } else if (!regExp.test(this.form.contact_number)) {
- uni.showToast({
- icon: "none",
- title: '请输入正确的推荐人联系电话',
- duration: 1500
- });
- return
- }
- this.tostShow = true;
- },
- affirmSubmit() {
- uni.showLoading({
- title: '加载中'
- });
- this.$http.post('/recommend/assist/submit', this.form).then(res => {
- uni.hideLoading();
- if (res && res.code == 200) {
- this.$refs.submitPopup.open();
- }
- })
- },
- closePopup() {
- this.$refs.submitPopup.close();
- uni.navigateBack()
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- .main {
- box-sizing: border-box;
- .cover {
- width: 100%;
- height: 340rpx;
- background-color: #f2f2f2;
- }
- .content {
- box-sizing: border-box;
- padding: 40rpx 0 18rpx 0;
- }
- .form-item {
- text {
- font-size: 30rpx;
- }
- }
- }
- </style>
|