|
@@ -20,128 +20,118 @@
|
|
<view class="vip-card-box"> </view>
|
|
<view class="vip-card-box"> </view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <view
|
|
|
|
- class="content-section"
|
|
|
|
- :style="[
|
|
|
|
- {
|
|
|
|
- transform: coverTransform,
|
|
|
|
- transition: coverTransition,
|
|
|
|
- },
|
|
|
|
- ]"
|
|
|
|
- @touchstart="coverTouchstart"
|
|
|
|
- @touchmove="coverTouchmove"
|
|
|
|
- @touchend="coverTouchend"
|
|
|
|
- >
|
|
|
|
- <image class="mine-image" src="@/static/images/mine/arc.png"></image>
|
|
|
|
-
|
|
|
|
- <view class="menu-list">
|
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToEditInfo()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-user menu-item-icon"></view>
|
|
|
|
- <view>我的信息</view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToSecure()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-yanzheng menu-item-icon"></view>
|
|
|
|
- <view>账号与安全</view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleAbout()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-aixin menu-item-icon"></view>
|
|
|
|
- <view>关于我们</view>
|
|
|
|
|
|
+ <oa-transForm>
|
|
|
|
+ <template #content>
|
|
|
|
+ <view class="menu-list">
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToEditInfo()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-user menu-item-icon"></view>
|
|
|
|
+ <view>我的信息</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleHelp()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-Help menu-item-icon"></view>
|
|
|
|
- <view>常见问题</view>
|
|
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToSecure()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-yanzheng menu-item-icon"></view>
|
|
|
|
+ <view>账号与安全</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleCleanTmp()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-qinglihuancun menu-item-icon"></view>
|
|
|
|
- <view>清理缓存</view>
|
|
|
|
- <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ proxy.$settingStore.currentSize }}</view>
|
|
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleAbout()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-aixin menu-item-icon"></view>
|
|
|
|
+ <view>关于我们</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToUpgrade()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-jianchagengxin menu-item-icon"></view>
|
|
|
|
- <view>检查更新</view>
|
|
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleHelp()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-Help menu-item-icon"></view>
|
|
|
|
+ <view>常见问题</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <!-- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleSetting()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-shezhi menu-item-icon"></view>
|
|
|
|
- <view>设置</view>
|
|
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleCleanTmp()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-qinglihuancun menu-item-icon"></view>
|
|
|
|
+ <view>清理缓存</view>
|
|
|
|
+ <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ proxy.$settingStore.currentSize }}</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view> -->
|
|
|
|
- </view>
|
|
|
|
|
|
|
|
- <!-- <view class="menu-list">
|
|
|
|
- <view class="list-cell list-cell-arrow" @click="goMessagePush()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-aixin menu-item-icon"></view>
|
|
|
|
- <view>推送设置</view>
|
|
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-jianchagengxin menu-item-icon"></view>
|
|
|
|
+ <view>检查更新</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <!-- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleSetting()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-shezhi menu-item-icon"></view>
|
|
|
|
+ <view>设置</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view> -->
|
|
</view>
|
|
</view>
|
|
- <view class="list-cell list-cell-arrow" @click="goBuilding()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-aixin menu-item-icon"></view>
|
|
|
|
- <view>建筑管理</view>
|
|
|
|
|
|
+
|
|
|
|
+ <!-- <view class="menu-list">
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="goMessagePush()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-aixin menu-item-icon"></view>
|
|
|
|
+ <view>推送设置</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <view class="list-cell list-cell-arrow" @click="goFunReport()">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="iconfont ucicon-aixin menu-item-icon"></view>
|
|
|
|
- <view>功能报备</view>
|
|
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="goBuilding()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-aixin menu-item-icon"></view>
|
|
|
|
+ <view>建筑管理</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- </view> -->
|
|
|
|
-
|
|
|
|
- <view class="cu-list menu">
|
|
|
|
- <view class="cu-item mt0">
|
|
|
|
- <view class="content flex align-center">
|
|
|
|
- <text class="iconfont ucicon-colorlens" :class="'text-' + themeColor.name"></text>
|
|
|
|
- <view class="padding solid radius shadow-blur ml10" :class="'bg-' + themeColor.name"></view>
|
|
|
|
- <view class="title ml10">
|
|
|
|
- 主题色:<text :class="'text-' + themeColor.name">{{ themeColor.title }}</text>
|
|
|
|
|
|
+ <view class="list-cell list-cell-arrow" @click="goFunReport()">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="iconfont ucicon-aixin menu-item-icon"></view>
|
|
|
|
+ <view>功能报备</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="action">
|
|
|
|
- <button class="cu-btn round shadow" @click="colorModal = true" :class="'bg-' + themeColor.name">
|
|
|
|
- <text class="iconfont ucicon-colorlens"></text>
|
|
|
|
- 选择主题
|
|
|
|
- </button>
|
|
|
|
|
|
+ </view> -->
|
|
|
|
+
|
|
|
|
+ <view class="cu-list menu">
|
|
|
|
+ <view class="cu-item mt0">
|
|
|
|
+ <view class="content flex align-center">
|
|
|
|
+ <text class="iconfont ucicon-colorlens" :class="'text-' + themeColor.name"></text>
|
|
|
|
+ <view class="padding solid radius shadow-blur ml10" :class="'bg-' + themeColor.name"></view>
|
|
|
|
+ <view class="title ml10">
|
|
|
|
+ 主题色:<text :class="'text-' + themeColor.name">{{ themeColor.title }}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="action">
|
|
|
|
+ <button class="cu-btn round shadow" @click="colorModal = true" :class="'bg-' + themeColor.name">
|
|
|
|
+ <text class="iconfont ucicon-colorlens"></text>
|
|
|
|
+ 选择主题
|
|
|
|
+ </button>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
|
|
|
|
- <view class="menu-list" @click="proxy.$settingStore.handleLogout">
|
|
|
|
- <view class="list-cell">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <view class="button">退 出 登 录</view>
|
|
|
|
|
|
+ <view class="menu-list" @click="proxy.$settingStore.handleLogout">
|
|
|
|
+ <view class="list-cell">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <view class="button">退 出 登 录</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
|
|
|
|
- <!-- <view class="menu-list">
|
|
|
|
- <view class="list-cell list-cell-arrow" @tap="goSiteManage" v-if="permissionLabel == 1">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <image class="menu-item-image" src="@/static/images/setting/setting-icon2.png" style="width: 15px; height: 15px"></image>
|
|
|
|
- <view>站点管理</view>
|
|
|
|
|
|
+ <!-- <view class="menu-list">
|
|
|
|
+ <view class="list-cell list-cell-arrow" @tap="goSiteManage" v-if="permissionLabel == 1">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <image class="menu-item-image" src="@/static/images/setting/setting-icon2.png" style="width: 15px; height: 15px"></image>
|
|
|
|
+ <view>站点管理</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <view class="list-cell list-cell-arrow" @tap="goAuthManage" v-if="permissionLabel == 1">
|
|
|
|
- <view class="menu-item">
|
|
|
|
- <image class="menu-item-image" src="@/static/images/setting/setting-icon4.png" style="width: 15px; height: 15px"></image>
|
|
|
|
- <view>权限管理</view>
|
|
|
|
|
|
+ <view class="list-cell list-cell-arrow" @tap="goAuthManage" v-if="permissionLabel == 1">
|
|
|
|
+ <view class="menu-item">
|
|
|
|
+ <image class="menu-item-image" src="@/static/images/setting/setting-icon4.png" style="width: 15px; height: 15px"></image>
|
|
|
|
+ <view>权限管理</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- </view> -->
|
|
|
|
- </view>
|
|
|
|
|
|
+ </view> -->
|
|
|
|
+ </template>
|
|
|
|
+ </oa-transForm>
|
|
|
|
|
|
<!-- 选择颜色模态框 -->
|
|
<!-- 选择颜色模态框 -->
|
|
<view class="cu-modal" :class="{ show: colorModal }">
|
|
<view class="cu-modal" :class="{ show: colorModal }">
|
|
@@ -162,6 +152,8 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
|
|
+ <oa-upgrade v-if="modalShow" :modalArray="modalArray" :themesColor="proxy.$settingStore.themeColor.color" @closeModal="closeModal" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<oa-tabbar :tabbarValue="2"></oa-tabbar>
|
|
<oa-tabbar :tabbarValue="2"></oa-tabbar>
|
|
@@ -174,48 +166,80 @@ import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, on
|
|
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
|
|
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
|
|
import { useStores, commonStores } from "@/store/modules/index";
|
|
import { useStores, commonStores } from "@/store/modules/index";
|
|
|
|
|
|
|
|
+import { checkUpdates } from "@/api/system/setting";
|
|
import { uploadAvatar, updateUserProfile } from "@/api/system/user";
|
|
import { uploadAvatar, updateUserProfile } from "@/api/system/user";
|
|
import { getAuthorization } from "@/api/business/zhxf/messagePush/index.js";
|
|
import { getAuthorization } from "@/api/business/zhxf/messagePush/index.js";
|
|
|
|
|
|
const useStore = useStores();
|
|
const useStore = useStores();
|
|
-
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
const avatar = computed(() => {
|
|
const avatar = computed(() => {
|
|
return useStore.$state.avatar;
|
|
return useStore.$state.avatar;
|
|
});
|
|
});
|
|
-
|
|
|
|
const themeColor = computed(() => {
|
|
const themeColor = computed(() => {
|
|
return proxy.$settingStore.themeColor;
|
|
return proxy.$settingStore.themeColor;
|
|
});
|
|
});
|
|
|
|
|
|
-const windowHeight = computed(() => {
|
|
|
|
- return uni.getSystemInfoSync().windowHeight - 50;
|
|
|
|
-});
|
|
|
|
-
|
|
|
|
const data = reactive({
|
|
const data = reactive({
|
|
nickName: useStore.$state.nickName,
|
|
nickName: useStore.$state.nickName,
|
|
phone: useStore.$state.phonenumber,
|
|
phone: useStore.$state.phonenumber,
|
|
version: config.appInfo.version,
|
|
version: config.appInfo.version,
|
|
|
|
|
|
- coverTransform: "translateY(0px)",
|
|
|
|
- coverTransition: "0s",
|
|
|
|
- moving: false,
|
|
|
|
-
|
|
|
|
colorModal: false,
|
|
colorModal: false,
|
|
themeList: proxy.$constData.themeList,
|
|
themeList: proxy.$constData.themeList,
|
|
|
|
+
|
|
|
|
+ modalShow: false,
|
|
|
|
+ modalArray: {},
|
|
});
|
|
});
|
|
|
|
|
|
-const { coverTransform, coverTransition, moving, colorModal, themeList } = toRefs(data);
|
|
|
|
|
|
+const { colorModal, themeList, modalShow, modalArray } = toRefs(data);
|
|
|
|
|
|
-const permissionLabel = ref(1);
|
|
|
|
|
|
+/**
|
|
|
|
+ * @检查更新
|
|
|
|
+ */
|
|
|
|
+function handleToUpgrade() {
|
|
|
|
+ proxy.$modal.loading("加载中");
|
|
|
|
+
|
|
|
|
+ let data = {
|
|
|
|
+ _api_key: "fba7440cd37400b6ff46e303896af4df",
|
|
|
|
+ appKey: "705a19c80c291a47067103824330eb66",
|
|
|
|
+ buildVersion: config.appInfo.version,
|
|
|
|
+ // buildVersion: "2.1.0",
|
|
|
|
+ };
|
|
|
|
+ checkUpdates(data).then((res) => {
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
+ let platform = uni.getSystemInfoSync().platform; //手机平台
|
|
|
|
+
|
|
|
|
+ if (res.data.buildHaveNewVersion == true) {
|
|
|
|
+ //安卓手机弹窗升级
|
|
|
|
+ if (platform === "android") {
|
|
|
|
+ modalShow.value = true;
|
|
|
|
+ modalArray.value = res.data;
|
|
|
|
+ }
|
|
|
|
+ //IOS无法在线升级提示到商店下载
|
|
|
|
+ else {
|
|
|
|
+ uni.showModal({
|
|
|
|
+ title: "发现新版本 " + res.data.buildVersion,
|
|
|
|
+ content: "请到App store进行升级",
|
|
|
|
+ showCancel: false,
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ proxy.$modal.msg("您的软件版本已是最新");
|
|
|
|
+ }
|
|
|
|
|
|
-function getAuthorizationApi(params) {
|
|
|
|
- getAuthorization(params).then((res) => {
|
|
|
|
- permissionLabel.value = res.data.permissionLabel;
|
|
|
|
|
|
+ proxy.$modal.closeLoading();
|
|
|
|
+ }
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+/**
|
|
|
|
+ * @关闭弹窗
|
|
|
|
+ */
|
|
|
|
+function closeModal(flag) {
|
|
|
|
+ modalShow.value = flag;
|
|
|
|
+}
|
|
|
|
+
|
|
/**
|
|
/**
|
|
* @推送设置
|
|
* @推送设置
|
|
*/
|
|
*/
|
|
@@ -253,20 +277,6 @@ function handleToLogin() {
|
|
proxy.$tab.reLaunch("/pages/login");
|
|
proxy.$tab.reLaunch("/pages/login");
|
|
}
|
|
}
|
|
|
|
|
|
-/**
|
|
|
|
- * @upload上传头像
|
|
|
|
- * @api接口请求
|
|
|
|
- */
|
|
|
|
-function uploadApi(res) {
|
|
|
|
- let data = { name: "file", filePath: res.tempFilePaths[0] };
|
|
|
|
- uploadAvatar(data).then((response) => {
|
|
|
|
- useStore.$state.avatar = response.data.url;
|
|
|
|
- updateUserProfile({
|
|
|
|
- avatar: response.data.url,
|
|
|
|
- }).then(() => {});
|
|
|
|
- });
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
/**
|
|
/**
|
|
* @点击头像
|
|
* @点击头像
|
|
*/
|
|
*/
|
|
@@ -285,50 +295,18 @@ function handleToAvatar(type) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-let startY = 0,
|
|
|
|
- moveY = 0,
|
|
|
|
- pageAtTop = true;
|
|
|
|
-
|
|
|
|
-/**
|
|
|
|
- * @触摸开始
|
|
|
|
- */
|
|
|
|
-function coverTouchstart(e) {
|
|
|
|
- if (pageAtTop === false) {
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- coverTransition.value = "transform .1s linear";
|
|
|
|
- startY = e.touches[0].clientY;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-/**
|
|
|
|
- * @触摸移动
|
|
|
|
- */
|
|
|
|
-function coverTouchmove(e) {
|
|
|
|
- moveY = e.touches[0].clientY;
|
|
|
|
- let moveDistance = moveY - startY;
|
|
|
|
- if (moveDistance < 0) {
|
|
|
|
- moving.value = false;
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- moving.value = true;
|
|
|
|
- if (moveDistance >= 80 && moveDistance < 100) {
|
|
|
|
- moveDistance = 80;
|
|
|
|
- }
|
|
|
|
- if (moveDistance > 0 && moveDistance <= 80) {
|
|
|
|
- coverTransform.value = `translateY(${moveDistance}px)`;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
/**
|
|
/**
|
|
- * @触摸结束
|
|
|
|
|
|
+ * @upload上传头像
|
|
|
|
+ * @api接口请求
|
|
*/
|
|
*/
|
|
-function coverTouchend() {
|
|
|
|
- if (moving.value === false) {
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- moving.value = false;
|
|
|
|
- coverTransition.value = "transform 0.3s cubic-bezier(.21,1.93,.53,.64)";
|
|
|
|
- coverTransform.value = "translateY(0px)";
|
|
|
|
|
|
+function uploadApi(res) {
|
|
|
|
+ let data = { name: "file", filePath: res.tempFilePaths[0] };
|
|
|
|
+ uploadAvatar(data).then((response) => {
|
|
|
|
+ useStore.$state.avatar = response.data.url;
|
|
|
|
+ updateUserProfile({
|
|
|
|
+ avatar: response.data.url,
|
|
|
|
+ }).then(() => {});
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
onShow(() => {});
|
|
onShow(() => {});
|
|
@@ -392,40 +370,6 @@ onNavigationBarButtonTap((e) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .content-section {
|
|
|
|
- position: relative;
|
|
|
|
- margin-top: -85px;
|
|
|
|
- padding-bottom: 50.67px;
|
|
|
|
- background-color: #f5f6f7;
|
|
|
|
-
|
|
|
|
- .mine-image {
|
|
|
|
- position: absolute;
|
|
|
|
- left: 0;
|
|
|
|
- top: -16px;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 36upx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .mine-actions {
|
|
|
|
- margin: 0.625rem 0.625rem;
|
|
|
|
- padding: 20px 0px;
|
|
|
|
- border-radius: 8px;
|
|
|
|
- background-color: white;
|
|
|
|
-
|
|
|
|
- .action-item {
|
|
|
|
- .icon {
|
|
|
|
- font-size: 28px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .text {
|
|
|
|
- display: block;
|
|
|
|
- font-size: 13px;
|
|
|
|
- margin: 8px 0px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
.cu-list.menu-avatar .cu-item {
|
|
.cu-list.menu-avatar .cu-item {
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
padding: 30rpx 0;
|
|
padding: 30rpx 0;
|