You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
apply-assistant-v3/components/panel/formSlot.vue

588 lines
20 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="g-components-item">
<view class="m-set g_bg_f g_radius_8">
<view
class="item g_flex_row_start"
v-for="(item, index) in list"
:key="index"
:style="{
'padding-top': (item.pColumn ? item.pColumn : 19) + 'px',
'padding-bottom': (item.pColumn ? item.pColumn : 19) + 'px',
'padding-left': (item.pRow ? item.pRow : 10) + 'px',
'padding-right': (item.pRow ? item.pRow : 10) + 'px',
}"
>
<view class="g_flex_none g_pr_10 g_flex_column_center">
<view
class="g_flex_1 g_flex_row_start"
:class="{
labelRequire: item.require,
customRequire: item.customRequire,
}"
>
<view class="t-icon g_h_22 g_w_22 g_pl_7 g_mr_5" style="width: 22px; height: 22px" v-if="item.icon" :class="'t-' + item.icon"></view>
<view class="g_flex_column_center g_c_3 g_fs_16">{{ item.label }}</view>
</view>
</view>
<view class="g_flex_1 g_flex_column_center">
<view class="g_flex_row_end 1" style="width: 100%">
<slot></slot>
<view class="g_flex_row_end 2 from-type" style="width: 100%">
<!-- 通用类型 -->
<view class="form-base g_fs_16 g_ell_1 g_lh_1_2 g_w_all g_text_r g_flex_1" :class="item.fontColor" v-if="item.result" @click="handleResult(item)">{{ item.result }}</view>
<!-- 迷你二维码 -->
<view class="form-wx-code g_flex_rowRight_columnCenter" v-if="item.tip == 'code'">
<i class="iconfont icon-a-erweimabeifen2 g_fs_21 g_c_c" style="font-size: 21px"></i>
</view>
<!-- 头像类 -->
<view class="form-avatar g_flex_rowRight_columnCenter" v-if="item.tip == 'avatar'">
<img :src="item.value" alt="" class="g_w_48 g_h_48 g_radius_50" />
</view>
<!-- 上传图片头像类 -->
<!-- #ifdef APP-PLUS || H5 || MP-TOUTIAO || MP-KUAISHOU -->
<button v-if="item.tip == 'update-avatar'" aria-role="button" class="from-wx-avatar g_flex_rowRight_columnCenter g_bg_f g_w_all" style="padding-right: 0px; margin: 0" @click="handleOpenAvatar">
<img :src="item.value || localBaseImg + 'default.svg'" class="g_w_32 g_h_32 g_radius_50" />
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
</button>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button open-type="chooseAvatar" @chooseavatar="handleStartChangeAvatar" v-if="item.tip == 'update-avatar'" aria-role="button" class="from-wx-avatar g_flex_rowRight_columnCenter g_bg_f g_w_all" style="padding-right: 0px; margin: 0">
<img :src="item.value || localBaseImg + 'default.svg'" class="g_w_32 g_h_32 g_radius_50" />
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
</button>
<!-- #endif -->
<!-- 指定输入框。场景当有多个list时使用若list只有一个使用slot即可 -->
<view
:style="{
width: item.type != 'slot' ? 'calc(100% - 16px)' : item.tip == 'slot-choose-address' ? 'calc(100% - 22px)' : '100%',
}"
class="form-code"
v-if="item.tip && item.tip.indexOf('slot') > -1"
>
<!-- 验证码 -->
<view class="g_flex_column_center" v-if="item.tip == 'slot-code'">
<view class="g_flex_row_end">
<view class="g_flex_1 g_mr_16">
<u-input maxlength="4" type="number" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r" placeholder-style="color:#999;font-size:16px;" v-model="item.code" @blur="(e) => handleCode(e, item, index)" />
</view>
<view class="btn-text g_flex_column_center g_flex_none" @click="handleSendMsg">
<button class="btn-con g_fs_14 g_c_9 g_w_88 g_flex_row_center">{{ msgCode.btnText }}</button>
</view>
</view>
</view>
<!-- 新密码 -->
<view class="form-new-pwd g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-new-pwd'">
<u-input type="password" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleNewPwd(e, item, index)" />
</view>
<!-- 确认密码 -->
<view class="form-new-conpwd g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-confirm-pwd'">
<u-input type="password" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleConfirmPwd(e, item, index)" />
</view>
<!-- 姓名输入框 -->
<view class="form-new-name g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-name' || item.tip == 'slot-upID'">
<u-input type="text" :hover-stop-propagation="true" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleName(e, item, index)" />
<view class="form-new-why g_flex_column_center" style="" @click="updateImg" v-if="item.tip == 'slot-upID'">
<image class="g_ml_4 g_w_24 g_h_22" :src="item.img || cdnBaseImg + 'mock_photo.svg'"></image>
</view>
</view>
<!-- 性别输入框 -->
<view class="form-new-sex g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-sex'">
<u-radio-group v-model="item.value" @change="(e) => handleSex(e, item, index)" active-color="#00b666">
<u-radio :mr="sexItem.mr" v-for="(sexItem, sexIndex) in sexList" :key="sexIndex" :name="sexItem.tip">
{{ sexItem.name }}
</u-radio>
</u-radio-group>
</view>
<!-- 年龄输入框 -->
<view class="form-new-age g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-age'">
<u-input type="number" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" :custom-style="{ fontSize: item.fontSize || ' 16px' }" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleAge(e, item, index)" />
</view>
<!-- 民族picker -->
<view class="form-new-nation g_flex_rowRight_columnCenter g_fs_16" v-if="item.tip == 'slot-nation'" style="width: calc(100% - 0px)">
<picker @change="(e) => handleNation(e, item, index)" :value="item.nationIndex" :range="nationData.list" style="width: 100%; text-align: right">
<view class="g_flex_row_end">
<view class="uni-input">{{ nationData.list[item.nationIndex] }}</view>
<view class="g_flex_column_center">
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
</view>
</view>
</picker>
</view>
<!-- 自定义选择框 -->
<view class=""> </view>
<!-- 身份证号输入框 -->
<view class="form-new-idcard g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-code-idcard'">
<u-input type="idcard" :clearable="false" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleIDcard(e, item, index)" />
</view>
<!-- 家庭住址输入框 -->
<view class="form-new-address g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-address'">
<u-input type="text" :clearable="false" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleAddress(e, item, index)" />
</view>
<!-- 地址选择框 -->
<view class="form-new-choose g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-choose-address'">
<view class="g_text_r g_w_all g_fs_16" :class="item.value ? 'g_c_3' : 'g_c_9'" @click="chooseAddress">{{ item.value || item.placeholder }}</view>
</view>
<!-- 手机号 -->
<view class="form-new-tel g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-mobile'">
<u-input type="number" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :maxlength="11" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleMobile(e, item, index)" />
</view>
<!-- 多文本输入 -->
<view class="form-new-textarea g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-more-word'" style="width: calc(100%)">
<textarea class="weui-input g_text_r g_fs_16" v-model="item.value" :placeholder="item.placeholder" placeholder-style="color:#999999;font-size:16px" :maxlength="-1" auto-height style="min-height: 24px; width: 200px; line-height: 16px" @blur="(e) => handleMoreWord(e, item, index)"></textarea>
</view>
<!-- 时间 -->
<view class="form-new-time g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-time'">
<g-panel-detail-item :from="item.from" style="width: 100%" label=" " :isShowBottom="false" :value="item.value" afterType="time" @confirmChooseTime="handleMianshi" />
</view>
<!-- 附件上传 -->
<view class="g_flex_rowRight_columnCenter g_w_all" @click="uploadPhoto" v-if="item.tip == 'slot-update-file'">
<view class="g_flex_1 g_c_9 g_text_r g_fs_16">请选附件上传</view>
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
</view>
<!-- 财务信息显示 -->
<view class="g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-caiwu'">
<view class="g_flex_1 g_c_3 g_text_l g_fs_16 g_pl_6" :class="[caiwuToggle ? '' : 'g_ell_3', item.value.length > 1 ? 'g_text_l' : 'g_text_r']" style="white-space: pre-line">{{ item.value || "-" }}</view>
</view>
<!-- 选择政策 -->
<view class="g_flex_rowRight_columnCenter g_w_all" @click="uploadZhengce" v-if="item.tip == 'slot-zhengce'">
<view class="g_flex_1 g_c_3 g_text_r g_fs_16">{{ item.value }}</view>
</view>
</view>
<!-- 右箭头 -->
<view class="form-new-right g_flex_column_center" v-if="item.type != 'slot'" @click.capture="item.path ? handleResult(item) : ''">
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
</view>
<view class="form-new-why g_flex_column_center" v-if="item.tip == 'slot-choose-address'">
<i class="iconfont g_fsi_18 g_c_c g_ml_4" :class="item.suffix" @click="chooseAddress"></i>
</view>
<view class="form-new-why g_flex_column_center" v-if="item.tip == 'slot-zhengce'">
<i class="iconfont g_fsi_18 g_c_c g_ml_4" :class="item.suffix" @click="uploadZhengce"></i>
</view>
</view>
</view>
</view>
</view>
<slot name="after"></slot>
<view
class="g_flex_column_center tog"
v-if="
list.filter((item) => {
return item.tip == 'slot-caiwu';
}).length
"
@click="caiwuToggle = !caiwuToggle"
style="height: 45px"
>
<view class="g_flex_c">
<view class="g_flex_row_center">
<view class="g_fs_14 g_c_9 g_flex_column_center">{{ caiwuToggle ? "收起" : "展开" }}</view>
<view class="g_fs_14 g_flex_column_center">
<i class="iconfont icon-gengduo11 g_c_c g_ml_4" style="font-size: 14px" :class="caiwuToggle ? 'icon_down' : 'icon_up'"></i>
</view>
</view>
</view>
</view>
</view>
<u-popup v-model="zhengceModal.isShow" mode="bottom" border-radius="16" height="980" :mask-close-able="true">
<view class="g_fs_18 g_c_3 g_flex_row_center g_pt_16"> 选择政策 </view>
<scroll-view scroll-y="true" style="height: 710rpx">
<view class="g_pl_12 g_pr_12">
<view class="g_flex_row_between g_pt_16 g_pb_16 g_border_d_b" v-for="(item, index) in zhengceList" :key="index" @click="handleChooseZhengce(item, index)">
<view class="g_fs_17 g_c_3">{{ item.name }}</view>
<view class="g_flex_column_center">
<i
class="iconfont icon-a-duigoubeifen2"
style="font-size: 24px"
:style="{
color: item.isSelected ? '#00b666' : '#fff',
}"
></i>
</view>
</view>
</view>
</scroll-view>
<g-panel-fixed>
<slot>
<view class="g_flex_row_center">
<g-button btnText="确定" type="primary" @clickBtn="submitZhengce" />
</view>
</slot>
</g-panel-fixed>
</u-popup>
</view>
</template>
<script>
/* item单行卡片
* 示例我的页面中的设置展示UI
*/
import { nationlist } from "../../utils/nation.js";
export default {
data() {
return {
cdnBaseImg: this.G.store().cdnBaseImg,
localBaseImg: this.G.store().localBaseImg,
msgCode: {
// 短信倒计时
code: "",
btnText: "获取验证码", // 6s
countdown: 0,
timer: null,
},
nationData: {
list: null,
index: 0,
},
sexList: [
{
name: "男",
tip: 1,
mr: 24,
},
{
name: "女",
tip: 2,
mr: 0,
},
],
caiwuToggle: false,
zhengceModal: {
isShow: false,
},
zhengceList: [],
};
},
props: {
list: {
type: Array,
default: () => {
return [];
},
},
defaultOption: {
type: Array,
default: () => {
return [];
},
},
},
created() {
this.localBaseImg = this.G.store().localBaseImg;
this.nationData.list = nationlist.map((item, index) => {
return item.name;
});
this.zhengceList = this.defaultOption;
},
watch: {
defaultOption(val) {
this.zhengceList = val;
},
},
onHide() {
if (this.msgCode.timer) {
clearInterval(this.msgCode.timer);
}
},
methods: {
// 验证码
handleCode(e, $item, $index) {
this.$emit("changeCode", e);
},
// 新密码
handleNewPwd(e, $item, $index) {
this.$emit("changeNewPwd", e);
},
// 确认密码
handleConfirmPwd(e, $item, $index) {
this.$emit("changeConfirmPwd", e);
},
// 姓名
handleName(e, $item, $index) {
this.$emit("changeName", e, $item);
},
// 性别
handleSex(e, $item, $index) {
console.log("性别选择", e);
$item.value = e;
this.$emit("changeSex", e);
},
// 年龄
handleAge(e, $item, $index) {
this.$emit("changeAge", e);
},
// 民族
handleNation(e, $item, $index) {
let that = this;
that.list.filter((item, index) => {
return index == $index;
})[0].value = that.nationData.list[e.detail.value];
that.list.filter((item, index) => {
return index == $index;
})[0].nationIndex = e.detail.value;
that.$forceUpdate();
that.$emit("changeNation", {
e: e,
name: that.nationData.list[e.detail.value],
index: e.detail.value,
});
},
// 身份证号
handleIDcard(e, $item, $index) {
this.$emit("changeIDcard", e);
},
// 家庭住址
handleAddress(e, $item, $index) {
this.$emit("changeAddress", e);
},
// 多文字输入框
handleMoreWord(e, $item, $index) {
// console.log(e);
// console.log($item);
this.$emit("changeMoreWord", $item);
},
// 地图选择地址
chooseAddress() {
let that = this;
uni.chooseLocation({
success(e) {
console.log(e);
let res = {};
var reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
if (e.address) {
let arr = e.address.match(reg);
res.district = [arr[0], arr[1]].join(" ");
res.address = e.address;
}
res.lat = e.latitude;
res.lng = e.longitude;
that.$emit("chooseAddress", res);
},
fail(e) {
console.log("err", e);
},
});
},
// 发送验证码
handleSendMsg() {
let that = this;
if (this.msgCode.countdown > 0) {
return;
}
that.G.Get(
that.api.login_sendMsg,
{
tel: uni.getStorageSync("apply-tel"),
},
(res) => {
that.msgCode.countdown = 60;
that.msgCode.btnText = that.msgCode.countdown + "s";
clearInterval(that.msgCode.timer);
that.msgCode.timer = setInterval(() => {
if (that.msgCode.countdown > 0) {
that.msgCode.countdown--;
that.msgCode.btnText = that.msgCode.countdown + "s";
} else {
clearInterval(that.msgCode.timer);
that.msgCode.timer = null;
that.msgCode.btnText = "获取验证码";
}
}, 1000);
}
);
},
// 上传图片
updateImg() {
let that = this;
console.log("updateImg");
this.G.uploadImg((res) => {
console.log("身份证信息:", res);
if (res.status == "上传成功") {
that.$emit("updateIDInfo", res);
} else {
that.showToast({
title: "上传失败请重试",
icon: "none",
});
}
uni.hideLoading();
}, "idcard");
},
// 上传图片
uploadPhoto() {
let that = this;
that.G.uploadImg((res) => {
console.log(res);
this.$emit("updateFile", res.image);
});
},
// 更新政策
uploadZhengce() {
let that = this;
// 处理回显
let ids = "";
that.zhengceList
.filter((item) => {
return ids.indexOf(item.id) > -1;
})
.forEach((item, index) => {
item.isSelected = true;
});
that.zhengceModal.isShow = true;
},
handleChooseZhengce($item, $index) {
let that = this;
that.zhengceList.forEach((item, index) => {
if (index == $index) {
if (item.isSelected) {
item.isSelected = false;
} else {
item.isSelected = true;
}
} else {
item.isSelected = false;
}
});
},
submitZhengce() {
let that = this;
let ids = [];
ids = that.zhengceList
.filter((item) => {
return item.isSelected;
})
.map((item) => {
return item.id;
});
if (ids.length == 0) {
uni.showToast({
title: "请选择一个政策",
icon: "none",
});
return false;
}
that.zhengceModal.isShow = false;
that.$emit("updateZhengce", {
onSiteUserIds: ids.join(","),
item: that.zhengceList.filter((item) => {
return item.isSelected;
})[0],
});
},
handleStartChangeAvatar(e) {
let that = this;
that.G.uploadTmpImg(e.detail.avatarUrl, (res) => {
console.log("微信:", res.image);
that.$emit("updateImg", res.image);
});
},
handleOpenAvatar() {
let that = this;
uni.showActionSheet({
itemList: ["从相册选择", "使用相机"],
success: function (res) {
if (res.tapIndex == 0) {
console.log("点击相册");
// 相册
that.setAvatar(["album"]);
} else {
console.log("点击拍照");
// 拍照
that.setAvatar(["camera"]);
}
},
fail: function (res) {},
});
},
setAvatar($type) {
let that = this;
that.G.uploadImg(
(res) => {
console.log("其他:", res.image);
that.$emit("updateImg", res.image);
},
"default",
1,
$type
);
},
handleResult(e) {
this.$emit("clickResult", e);
},
handleMobile(e, $item, $index) {
this.$emit("changeMobile", e);
},
handleMianshi(e, $item, $index) {
this.$emit("changeTime", e);
},
},
};
</script>
<style lang="scss">
.g-components-item {
.m-set {
width: calc(100% - 40rpx);
margin: 0 auto;
.item {
position: relative;
// border-bottom: 1rpx solid #eee;
&:after {
content: "";
position: absolute;
bottom: 0;
left: 10px;
border-bottom: 1rpx solid #eee;
height: 1rpx solid #eee;
width: calc(100% - 20px);
}
&:last-child {
border-bottom: none;
&:after {
content: none;
}
}
}
.labelRequire {
position: relative;
&::after {
position: absolute;
right: -8px;
top: 8px;
content: "*";
color: #ff4400;
}
}
.customRequire {
&::after {
top: 4px;
}
}
}
.btn-text {
.btn-con {
border-left: 1rpx solid #eee;
padding: 0 0 0 16px;
background-color: transparent;
border-radius: 0;
height: 40rpx;
line-height: 40rpx;
}
}
}
.icon_up {
transform: rotate(90deg);
}
.icon_down {
transform: rotate(-90deg);
}
</style>