arcx-app/src/pages/index/index.vue

<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>