init
This commit is contained in:
shuhongfan
@@ -0,0 +1,46 @@
|
||||
<!--取派地址-->
|
||||
<template>
|
||||
<view class="boxBg">
|
||||
<view class="addressCon">
|
||||
<view class="item">
|
||||
<view class="sendIcon">{{ taskType === 1 ? "取" : "派" }}</view>
|
||||
<view class="addressInfo">
|
||||
<view
|
||||
><text class="name">{{ detailsData.senderName }}</text
|
||||
>{{ detailsData.senderPhone }}</view
|
||||
>
|
||||
<view>{{ detailsData.senderAddress }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="receiveIcon">{{ taskType === 1 ? "派" : "收" }}</view>
|
||||
<view class="addressInfo">
|
||||
<view
|
||||
><text class="name">{{ detailsData.receiverName }}</text
|
||||
>{{ detailsData.receiverPhone }}</view
|
||||
>
|
||||
<view>{{ detailsData.receiverAddress }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useStore } from "vuex";
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
detailsData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user; //vuex获取、储存数据
|
||||
let taskType = users.taskType;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!--身份证验证-->
|
||||
<template>
|
||||
<view class="boxBg">
|
||||
<view class="tit">
|
||||
<text v-if="detailsData.idCardNoVerify === 0 && !flag">
|
||||
身份验证（未验证）
|
||||
<icon class="iconTip"></icon>
|
||||
</text>
|
||||
<text v-else-if="detailsData.idCardNoVerify === 1 || flag">
|
||||
身份验证（验证通过）
|
||||
<!-- TODO 先保留-->
|
||||
<!-- <icon class="iconTip"></icon> -->
|
||||
</text>
|
||||
<text v-else>
|
||||
身份验证（验证未通过）
|
||||
<icon class="iconTip"></icon>
|
||||
</text>
|
||||
</view>
|
||||
<view class="identityBox" v-if="detailsData.idCardNoVerify !== 1 && !flag">
|
||||
<view>
|
||||
<uni-forms ref="customForm">
|
||||
<uni-forms-item name="name"
|
||||
><uni-easyinput
|
||||
class="item"
|
||||
v-model="name"
|
||||
placeholder="请输入真实姓名"
|
||||
/></uni-forms-item>
|
||||
<uni-forms-item name="idCard"
|
||||
><uni-easyinput
|
||||
class="item"
|
||||
v-model="idCard"
|
||||
placeholder="请输入身份证号码"
|
||||
@blur="handleIdcard"
|
||||
/></uni-forms-item>
|
||||
</uni-forms>
|
||||
<button class="uni-btn concelBtn" @click="handleCheck">验证</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="identitySuccee" v-else>
|
||||
<view class="text" v-if="name !== ''">{{ name }}</view>
|
||||
<view class="text">{{
|
||||
idCard !== "" ? idCard : detailsData.idCardNo
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
// 验证
|
||||
import { validateIdentityCard } from "@/utils/validate";
|
||||
// 接口
|
||||
import { idCardCheck } from "@/pages/api/index.js";
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
detailsData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
// ------定义变量------
|
||||
const customForm = ref();
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user;
|
||||
// 表单数据
|
||||
let idCard = ref(""); //身份证号
|
||||
let name = ref(""); //身份证号
|
||||
let isValidate = ref(false); //输入身份证是否验证成功
|
||||
let flag = ref(null); //是否校验成功
|
||||
// ------定义方法------
|
||||
onMounted(() => {
|
||||
if (users.cardData) {
|
||||
name.value = users.cardData.name;
|
||||
name.idCard = users.cardData.idCard;
|
||||
flag.value = true;
|
||||
}
|
||||
});
|
||||
// 身份校验
|
||||
const handleIdcard = () => {
|
||||
const validate = validateIdentityCard(idCard.value);
|
||||
if (validate) {
|
||||
isValidate.value = true;
|
||||
} else {
|
||||
return uni.showToast({
|
||||
title: validate,
|
||||
duration: 1000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
// 验证身份号
|
||||
const handleCheck = async () => {
|
||||
const params = {
|
||||
name: name.value,
|
||||
idCard: idCard.value,
|
||||
};
|
||||
store.commit("user/setCardData", params);
|
||||
await idCardCheck(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
flag.value = res.data.flag;
|
||||
return uni.showToast({
|
||||
title: "验证成功",
|
||||
duration: 1000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
// 暴漏给父组件
|
||||
defineExpose({
|
||||
customForm,
|
||||
idCard,
|
||||
name,
|
||||
isValidate,
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<view class="uniPopup detailPopup">
|
||||
<uni-popup ref="popup" type="bottom">
|
||||
<view class="tit">
|
||||
<text>{{
|
||||
type === 1
|
||||
? "物品名称"
|
||||
: type === 2
|
||||
? "付款方式"
|
||||
: type === 3
|
||||
? "备注"
|
||||
: "签收人"
|
||||
}}</text>
|
||||
<icon @click="dialogClose">关闭</icon>
|
||||
</view>
|
||||
<view class="popupContent">
|
||||
<!-- 物品名称 -->
|
||||
<view v-if="type === 1">
|
||||
<view class="goodBox">
|
||||
<view
|
||||
v-for="(item, index) in GoodsData"
|
||||
:key="index"
|
||||
class="item"
|
||||
:class="index === isActive ? 'active' : ''"
|
||||
@click="handleActive(index, item)"
|
||||
>
|
||||
<text>{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isShowGoodInfo" class="other">
|
||||
<textarea
|
||||
v-model="otherData"
|
||||
placeholder="请输入物品信息"
|
||||
@input="monitorInput"
|
||||
:maxlength="goodMaxLength"
|
||||
></textarea>
|
||||
<text class="numText" :class="goodNumVal === 0 ? 'tip' : ''"
|
||||
>{{ goodNumVal }}/10</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 付款方式 -->
|
||||
<view v-else-if="type === 2">
|
||||
<view
|
||||
class="typeItem"
|
||||
v-for="(item, index) in PayMethodData"
|
||||
:key="index"
|
||||
@click="checkbox(index)"
|
||||
>
|
||||
<text>{{ item.label }}</text>
|
||||
<view class="checkRadio"
|
||||
><radio
|
||||
:value="String(index)"
|
||||
:class="index === current ? 'active' : ''"
|
||||
:checked="index === current"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 备注 -->
|
||||
<view v-else-if="type === 3" class="remark">
|
||||
<textarea
|
||||
v-model="remark"
|
||||
placeholder="补充说明"
|
||||
@input="textInput"
|
||||
:maxlength="remarkMaxLength"
|
||||
></textarea>
|
||||
<text class="numText" :class="remarkNumVal === 0 ? 'tip' : ''"
|
||||
>{{ remarkNumVal }}/30</text
|
||||
>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 签收人 -->
|
||||
<view v-else>
|
||||
<view
|
||||
class="typeItem"
|
||||
v-for="(item, index) in SignData"
|
||||
:key="index"
|
||||
@click="checkbox(index)"
|
||||
>
|
||||
<text>{{ item.label }}</text>
|
||||
<view class="checkRadio"
|
||||
><radio
|
||||
:value="String(index)"
|
||||
:class="index === current ? 'active' : ''"
|
||||
:checked="index === current"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
</view>
|
||||
<view class="btnBox"
|
||||
><button class="btn-default uni-mini" @click="handleSubmit">
|
||||
确定
|
||||
</button></view
|
||||
>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, watch } from "vue";
|
||||
import { validateTextLength } from "@/utils/index.js";
|
||||
// 基本数据
|
||||
import { PayMethodData, GoodsData, SignData } from "@/utils/commonData.js";
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
detailsData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
watch(props, (newValue, olcValue) => {
|
||||
if (newValue !== undefined) {
|
||||
remark.value = newValue.detailsData.remark;
|
||||
if (newValue.type === 2) {
|
||||
if (newValue.detailsData.paymentMethod === 1) {
|
||||
current.value = 0;
|
||||
} else {
|
||||
current.value = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
// 定义ref 获取子组件方法或者值
|
||||
const popup = ref();
|
||||
const emit = defineEmits(); //子组件向父组件事件传递
|
||||
let current = ref(0); //当前触发付款方式的值
|
||||
let isActive = ref(0); //当前触发物品名称的值
|
||||
let otherData = ref(""); //自定义其他物品信息
|
||||
let goodNumVal = ref(0); //其他自定义的字节数控制值
|
||||
let remarkNumVal = ref(0); //备注字节数控制值
|
||||
let remark = ref(""); //备注
|
||||
let goodMaxLength = ref(10);
|
||||
let remarkMaxLength = ref(30);
|
||||
let isShowGoodInfo = ref(false); //控制其他文本域的显示/隐藏
|
||||
// ------定义方法------
|
||||
// 确定
|
||||
const handleSubmit = () => {
|
||||
// type=1 物品名称 type=2 付款方式 type=3 备注
|
||||
if (props.type === 1) {
|
||||
let val = null;
|
||||
if (isShowGoodInfo.value) {
|
||||
if (otherData.value === "") {
|
||||
return uni.showToast({
|
||||
title: "请输入物品信息",
|
||||
duration: 1000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
val = otherData.value;
|
||||
} else {
|
||||
val = GoodsData[isActive.value].label;
|
||||
}
|
||||
emit("getGoodType", val);
|
||||
} else if (props.type === 2) {
|
||||
emit("getPayMethod", PayMethodData[current.value].label);
|
||||
} else if (props.type === 3) {
|
||||
emit("getRemark", remark.value);
|
||||
} else {
|
||||
emit("getSignType", SignData[current.value].value);
|
||||
}
|
||||
dialogClose();
|
||||
};
|
||||
// 选项框点击事件，参数是数据的下标
|
||||
const checkbox = (index) => {
|
||||
current.value = index;
|
||||
};
|
||||
// 选择物品
|
||||
const handleActive = (index, item) => {
|
||||
if (item.label === "其他") {
|
||||
isShowGoodInfo.value = true;
|
||||
} else {
|
||||
isShowGoodInfo.value = false;
|
||||
}
|
||||
isActive.value = index;
|
||||
};
|
||||
// 打开弹层
|
||||
const dialogOpen = () => {
|
||||
popup.value.open();
|
||||
};
|
||||
// 关闭弹层
|
||||
const dialogClose = () => {
|
||||
popup.value.close();
|
||||
};
|
||||
// 其他自定义的名称控制10个字符
|
||||
const monitorInput = () => {
|
||||
nextTick(() => {
|
||||
let leng = validateTextLength(otherData.value);
|
||||
if (leng >= 10) {
|
||||
goodMaxLength.value = leng;
|
||||
} else {
|
||||
goodMaxLength.value = 20;
|
||||
}
|
||||
goodNumVal.value = Math.floor(leng);
|
||||
});
|
||||
};
|
||||
// 备注控制50个字符
|
||||
const textInput = () => {
|
||||
nextTick(() => {
|
||||
let leng = validateTextLength(remark.value);
|
||||
if (leng >= 30) {
|
||||
remarkMaxLength.value = leng;
|
||||
} else {
|
||||
remarkMaxLength.value = 60;
|
||||
}
|
||||
remarkNumVal.value = Math.floor(leng);
|
||||
});
|
||||
};
|
||||
// 向父组件暴露方法
|
||||
defineExpose({
|
||||
dialogOpen,
|
||||
current,
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user