341 lines
9.6 KiB
Vue
341 lines
9.6 KiB
Vue
<template>
|
||
<view class="container" :class="[`${themeInfo.theme}-theme`]">
|
||
<navBar class="navBar"></navBar>
|
||
<view class="wrapbox">
|
||
<view class="container-form" v-for="(item,index) in state.dataList" :key="item.authorizeId || index">
|
||
<view class="cHeader">
|
||
</view>
|
||
<view class="content">
|
||
<uv-form labelWidth="auto">
|
||
<uv-form-item :label="$t('houseKey.FriendsName')" prop="formData.name">
|
||
<uv-input shape="circle" border="none" placeholder="* * *" v-model="item.userName">
|
||
</uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item :label="$t('houseKey.AuthorizationDate')" prop="formData.date" @click="showCalendar(item)">
|
||
<uv-input shape="circle" border="none" :placeholder="$t('houseKey.date')" readonly v-model="item.endDate" >
|
||
</uv-input>
|
||
</uv-form-item>
|
||
<view class="past-date" v-if="getIsPast(item)">{{ $t('houseKey.overdue') }}</view>
|
||
<uv-form-item :label="$t('houseKey.ReceiveNotifications')" prop="formData.isNotice">
|
||
<uv-input shape="circle" disabled disabledColor="#ffffff" :placeholder="$t('houseKey.getNote')" border="none">
|
||
</uv-input>
|
||
<template v-slot:right>
|
||
<uv-switch v-model="item.isNotice" size="20"></uv-switch>
|
||
</template>
|
||
</uv-form-item>
|
||
<uv-form-item :label="$t('houseKey.PhoneNumber')" prop="formData.phone">
|
||
<uv-input shape="circle" border="none" :placeholder="$t('houseKey.otherPhone')" v-model="item.phone">
|
||
</uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item :label="$t('houseKey.email')" prop="formData.email">
|
||
<uv-input shape="circle" border="none" :placeholder="$t('houseKey.otherEmail')" v-model="item.email">
|
||
</uv-input>
|
||
</uv-form-item>
|
||
</uv-form>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="left">
|
||
<button @click="add(item)" class="btn">{{ $t('common.update') }}</button>
|
||
<button class="btn" @click="deleteItem(item)">{{ $t('common.delete') }}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="container-form">
|
||
<view class="cHeader">
|
||
</view>
|
||
<view class="content">
|
||
<uv-form labelWidth="auto">
|
||
<uv-form-item :label="$t('houseKey.FriendsName')" prop="formData.name">
|
||
<uv-input shape="circle" border="none" placeholder="* * *" v-model="state.formData.userName">
|
||
</uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item :label="$t('houseKey.AuthorizationDate')" prop="formData.date" @click="showCalendar()">
|
||
<uv-input shape="circle" border="none" :placeholder="$t('houseKey.date')" v-model="state.formData.endDate" readonly >
|
||
</uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item :label="$t('houseKey.ReceiveNotifications')" prop="formData.isNotice">
|
||
<uv-input shape="circle" disabled disabledColor="#ffffff" :placeholder="$t('houseKey.getNote')" border="none">
|
||
</uv-input>
|
||
<template v-slot:right>
|
||
<uv-switch v-model="state.formData.isNotice" size="20"></uv-switch>
|
||
</template>
|
||
</uv-form-item>
|
||
<uv-form-item :label="$t('houseKey.PhoneNumber')" prop="formData.phone">
|
||
<uv-input shape="circle" border="none" :placeholder="$t('houseKey.otherPhone')" v-model="state.formData.phone">
|
||
</uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item :label="$t('houseKey.email')" prop="formData.email">
|
||
<uv-input shape="circle" border="none" :placeholder="$t('houseKey.otherEmail')" v-model="state.formData.email">
|
||
</uv-input>
|
||
</uv-form-item>
|
||
</uv-form>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="left">
|
||
<button @click="add(null)" class="btn">{{ $t('houseKey.AddAuthorization') }}</button>
|
||
<!-- <button class="btn" @click="makePhoneCall">兑换</button> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uv-calendars ref="calendar" @confirm="confirm"></uv-calendars>
|
||
</template>
|
||
<script setup>
|
||
import navBar from "@/components/navBar.vue";
|
||
import { useLockApi } from '@/Apis/lock.js';
|
||
import { ref } from "vue";
|
||
import { onLoad,onShow } from "@dcloudio/uni-app";
|
||
import dayjs from "dayjs";
|
||
// 主题色配置
|
||
import { useMainStore } from "@/store/index.js";
|
||
// 国际化配置
|
||
import { useI18n } from 'vue-i18n';
|
||
const { t } = useI18n();
|
||
const { themeInfo,storeState } = useMainStore();
|
||
const getApi = useLockApi();
|
||
const calendar = ref();
|
||
const state = ref({
|
||
inviteShow: false,
|
||
orderId: null,
|
||
dataList: [],
|
||
item:null,
|
||
formData:{
|
||
userName:'',
|
||
endDate:'',
|
||
phone:'',
|
||
email:'',
|
||
isNotice:false
|
||
}
|
||
});
|
||
const showCalendar = (item)=>{
|
||
state.value.item = item || null;
|
||
calendar.value.open();
|
||
}
|
||
const confirm = (e) => {
|
||
if(state.value.item){
|
||
state.value.item.endDate = dayjs(e.fulldate).format("YYYY/MM/DD");
|
||
}else{
|
||
state.value.formData.endDate = dayjs(e.fulldate).format("YYYY/MM/DD")
|
||
}
|
||
};
|
||
const getIsPast = (item) => {
|
||
return dayjs(item.authorDate).isBefore(dayjs().format("YYYY/MM/DD"));
|
||
};
|
||
onLoad((params) => {
|
||
state.value.orderId = params.Order_ID;
|
||
if(!state.value.orderId){
|
||
uni.showToast({
|
||
title: "参数错误（Params error）",
|
||
icon: "none",
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
}else{
|
||
getDataList();
|
||
}
|
||
});
|
||
onShow(() => {});
|
||
const getDataList = () => {
|
||
getApi.GetOrderAuthorizeList({orderId:state.value.orderId}).then(res => {
|
||
if (res.code == 200) {
|
||
state.value.dataList = res.data;
|
||
state.value.dataList.forEach(item => item.authorDate = item.endDate);
|
||
}
|
||
})
|
||
}
|
||
const deleteItem = (item) => {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定删除吗(Delete It)？",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
getApi.DeleteOrderAuthorize({authorizeId:item.authorizeId}).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: "删除成功(Delete Successful)",
|
||
icon: "none",
|
||
});
|
||
getDataList();
|
||
}
|
||
})
|
||
}
|
||
},
|
||
});
|
||
|
||
}
|
||
const add = (item) => {
|
||
let formData = state.value.formData;
|
||
if(item){
|
||
formData = item;
|
||
}
|
||
formData.orderId = state.value.orderId;
|
||
if(!formData.userName){
|
||
uni.showToast({
|
||
title: t('houseKey.EnterFriendsName'),
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if(!formData.endDate){
|
||
uni.showToast({
|
||
title: t('houseKey.EnterAuthorizationDate'),
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if(!formData.phone){
|
||
//#ifdef MP-WEIXIN
|
||
uni.showToast({
|
||
title: t('houseKey.EnterPhoneNumber'),
|
||
icon: "none",
|
||
});
|
||
//#endif
|
||
//#ifdef H5
|
||
uni.showToast({
|
||
title: t('houseKey.EnterEmail'),
|
||
icon: "none",
|
||
});
|
||
//#endif
|
||
return;
|
||
}
|
||
if(formData.phone == storeState.userInfo.phone){
|
||
uni.showToast({
|
||
title: t('houseKey.CannotAuthorizeYourself'),
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if(formData.authorizeId){
|
||
formData.id = formData.authorizeId;
|
||
getApi.UpdateOrderAuthorizeCustomer(formData).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: t('houseKey.UpdateSuccessful'),
|
||
icon: "none",
|
||
});
|
||
getDataList();
|
||
}
|
||
})
|
||
}else{
|
||
getApi.OrderAuthorizeCustomer(formData).then(res => {
|
||
if (res.code == 200) {
|
||
state.value.formData = {
|
||
userName:'',
|
||
endDate:'',
|
||
phone:'',
|
||
email:'',
|
||
isNotice:false
|
||
}
|
||
uni.showToast({
|
||
title: t('houseKey.AddedSuccessfully'),
|
||
icon: "none",
|
||
});
|
||
getDataList();
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
// onShareAppMessage((res) => {
|
||
// if (res.from === "button") {
|
||
// }
|
||
// return shareParam;
|
||
// });
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/static/style/theme.scss";
|
||
uni-page-body {
|
||
height: 100%;
|
||
background: linear-gradient(0deg, rgb(1, 169, 188), rgb(10, 132, 184));
|
||
overflow: auto;
|
||
}
|
||
.navBar {
|
||
position: relative;
|
||
}
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: start;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
background: linear-gradient(0deg, var(--left-linear), var(--right-linear));
|
||
.wrapbox {
|
||
padding: 20rpx;
|
||
height: 100%;
|
||
width: 100%;
|
||
background: white;
|
||
}
|
||
}
|
||
.container-form {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: #242a37;
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
font-size: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
.content {
|
||
padding: 0 20rpx;
|
||
padding-top: 20rpx;
|
||
width: 100%;
|
||
:deep(.uv-form-item){
|
||
background-color: #FFF;
|
||
border-radius: 99px;
|
||
padding:0 8px;
|
||
margin-bottom: 20rpx;
|
||
.uv-form-item__body{
|
||
padding: 10rpx 0;
|
||
}
|
||
}
|
||
.past-date {
|
||
margin: 5px 0 8px;
|
||
color: #ff1d0c;
|
||
}
|
||
}
|
||
.footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
align-items: center;
|
||
padding: 10rpx 0;
|
||
padding-top: 20rpx;
|
||
font-weight: bold;
|
||
.left {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 22rpx;
|
||
padding: 0 20rpx;
|
||
width: 100%;
|
||
.btn {
|
||
width: 49%;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
padding: 0;
|
||
font-size: 32rpx;
|
||
border-radius: 999px;
|
||
border: 1rpx solid transparent;
|
||
&:nth-child(2) {
|
||
background-color: #ff1d0c;
|
||
color: #FFF;
|
||
}
|
||
&:nth-child(1) {
|
||
background-color: var(--main-color);
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|