更新页面位置
This commit is contained in:
kron
@@ -0,0 +1,251 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import Score from "@/pages/score/index.vue";
|
||||
import History from "@/pages/list/index.vue";
|
||||
import Profile from "@/pages/profile/index.vue";
|
||||
import Tabbar from "@/components/Tabbar.vue";
|
||||
import SModal from "@/components/SModal.vue";
|
||||
import EditOption from "@/components/EditOption.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import { removePointRecord } from "@/api";
|
||||
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const { user } = storeToRefs(useStore());
|
||||
|
||||
const isIOS = computed(() => {
|
||||
const systemInfo = uni.getDeviceInfo();
|
||||
return systemInfo.osName === "ios";
|
||||
});
|
||||
|
||||
const tabIndex = ref(0);
|
||||
const editAvatar = ref(false);
|
||||
const selectorIndex = ref(0);
|
||||
const bowType = ref({});
|
||||
const distance = ref(0);
|
||||
const bowtargetType = ref({});
|
||||
const showModal = ref(false);
|
||||
const showTip = ref(false);
|
||||
const removeId = ref("");
|
||||
const dataSeq = ref(0);
|
||||
|
||||
const onTabChnage = (index) => {
|
||||
tabIndex.value = index;
|
||||
};
|
||||
const openSelector = (index) => {
|
||||
selectorIndex.value = index;
|
||||
showModal.value = true;
|
||||
};
|
||||
|
||||
const onSelectOption = (itemIndex, value) => {
|
||||
if (itemIndex === 0) {
|
||||
bowType.value = value.name === bowType.value.name ? {} : value;
|
||||
} else if (itemIndex === 1) {
|
||||
distance.value = value === distance.value ? 0 : value;
|
||||
} else if (itemIndex === 2) {
|
||||
bowtargetType.value = value.name === bowtargetType.value.name ? {} : value;
|
||||
}
|
||||
showModal.value = false;
|
||||
};
|
||||
|
||||
const onRemoveRecord = (item) => {
|
||||
removeId.value = item.id;
|
||||
showTip.value = true;
|
||||
};
|
||||
|
||||
const confirmRemove = async () => {
|
||||
try {
|
||||
showTip.value = false;
|
||||
await removePointRecord(removeId.value);
|
||||
dataSeq.value += 1;
|
||||
uni.showToast({ title: "Deleted", icon: "none" });
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "Delete failed, please retry", icon: "none" });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<swiper
|
||||
:current="tabIndex"
|
||||
@change="(e) => (tabIndex = e.detail.current)"
|
||||
:style="{
|
||||
height: `calc(100vh - 100rpx - ${isIOS ? '30rpx' : '0rpx'})`,
|
||||
background: '#f5f5f5',
|
||||
}"
|
||||
>
|
||||
<swiper-item>
|
||||
<Score />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<History
|
||||
:openSelector="openSelector"
|
||||
:onRemoveRecord="onRemoveRecord"
|
||||
:bowType="bowType"
|
||||
:distance="distance"
|
||||
:bowtargetType="bowtargetType"
|
||||
:seq="dataSeq"
|
||||
/>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<Profile :editAvatar="() => (editAvatar = true)" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view
|
||||
class="edit-avatar"
|
||||
:style="{ height: editAvatar ? '100vh' : '0' }"
|
||||
@click="editAvatar = false"
|
||||
>
|
||||
<image :src="user.avatar" mode="widthFix" />
|
||||
<view>
|
||||
<view>
|
||||
<text>Take a photo</text>
|
||||
<image src="../static/back-grey.png" mode="widthFix" />
|
||||
</view>
|
||||
<view>
|
||||
<text>Choose photo</text>
|
||||
<image src="../static/back-grey.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<SModal
|
||||
:show="showModal"
|
||||
:noBg="true"
|
||||
height="auto"
|
||||
:onClose="() => (showModal = false)"
|
||||
>
|
||||
<view class="selector">
|
||||
<view @click="() => (showModal = false)">
|
||||
<image src="../static/close-grey.png" mode="widthFix" />
|
||||
</view>
|
||||
<EditOption
|
||||
v-show="selectorIndex === 0"
|
||||
:itemIndex="0"
|
||||
:expand="true"
|
||||
:noArrow="true"
|
||||
:onSelect="onSelectOption"
|
||||
:value="bowType.name"
|
||||
/>
|
||||
<EditOption
|
||||
v-show="selectorIndex === 1"
|
||||
:itemIndex="1"
|
||||
:expand="true"
|
||||
:noArrow="true"
|
||||
:onSelect="onSelectOption"
|
||||
:value="distance + ''"
|
||||
/>
|
||||
<EditOption
|
||||
v-show="selectorIndex === 2"
|
||||
:itemIndex="2"
|
||||
:expand="true"
|
||||
:noArrow="true"
|
||||
:onSelect="onSelectOption"
|
||||
:value="bowtargetType.name"
|
||||
/>
|
||||
</view>
|
||||
</SModal>
|
||||
<ScreenHint :show="showTip">
|
||||
<view class="tip-content">
|
||||
<text>Are you sure to delete this record?</text>
|
||||
<view>
|
||||
<view @click="showTip = false">Cancel</view>
|
||||
<view @click="confirmRemove">Confirm</view>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
<Tabbar :selected="tabIndex" :onClick="onTabChnage" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.edit-avatar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
z-index: 999;
|
||||
}
|
||||
.edit-avatar > image {
|
||||
width: 85vw;
|
||||
height: 85vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.edit-avatar > view {
|
||||
border-radius: 25rpx;
|
||||
margin-top: 100rpx;
|
||||
width: calc(100% - 150rpx);
|
||||
padding: 0 40rpx;
|
||||
background: #404040;
|
||||
}
|
||||
.edit-avatar > view > view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
.edit-avatar > view > view:not(:last-child) {
|
||||
border-bottom: 1rpx solid #fff3;
|
||||
border-radius: 0;
|
||||
}
|
||||
.edit-avatar > view > view > image {
|
||||
width: 28rpx;
|
||||
}
|
||||
.selector {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.selector > view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.selector > view > image {
|
||||
width: 40px;
|
||||
}
|
||||
.tip-content {
|
||||
width: 100%;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #000;
|
||||
}
|
||||
.tip-content > text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tip-content > view {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tip-content > view > view {
|
||||
width: 48%;
|
||||
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
|
||||
border-radius: 22px;
|
||||
border: 1px solid #eeeeee;
|
||||
padding: 12px 0;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
.tip-content > view > view:last-child {
|
||||
background: #fed847;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user