SFH5/pages/personal/index.vue

<template>
	<view class="container" :class="[`${themeInfo.theme}-theme`]">
	<view class="orderInfo sflist card">
      <ul>
        <li @click="goOrder">
          <view class="left"><text class="font32 fontb">订单详情</text></view>
          <view class="right font36 fontb textGary">
            <image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
          </view>
        </li>
        <li @click="goVaild">
          <view class="left"><text class="font32 fontb">信息验证</text></view>
          <view class="right font36 fontb textGary">
            <image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
          </view>
        </li>
		    <!-- <li>
          <view class="left"><text class="font28 fontb">发票申请</text></view>
          <view class="right font36 fontb textGary">
            <uv-icon color="#000000" blod name="arrow-right" size="32" />
          </view>
        </li> -->
        <li @click="openPopup">
          <view class="left"><text class="font32 fontb">客服咨询</text></view>
          <view class="right font36 fontb textGary">
            <image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
          </view>
        </li>
      </ul>
    </view>
	 <view class="footer">
      <myCustomtTabBar direction="horizontal" :show-icon="true" :selected="2" @onTabItemTap="onTabItemTap">
      </myCustomtTabBar>
    </view>
    <uv-popup ref="openPopupRef" customStyle="width: 620rpx; border-radius: 24rpx;" :safeAreaInsetBottom="false" :closeOnClickOverlay="false"
			zIndex="9999">
			<view class="modal-container">
				<view class="modal-title">提示</view>
				<text class="modal-text">
					确定拨打电话 {{ projectInfo.callPhone }} 吗？
				</text>
				<view class="modal-button">
					<!-- <view class="modal-button-2"  @click="goEvaluate">{{ $t("unlock.evaluate") }}</view> -->
					<uv-button @click="closePopup" :customStyle="{
						height: '86rpx',
						lineHeight: '86rpx',
						color: '#000',
						fontSize: '32rpx',
					}" shape="circle">
						关闭
					</uv-button>
					<uv-button :customStyle="{
						height: '86rpx',
						lineHeight: '86rpx',
						color: '#fff',
						fontSize: '32rpx',
					}" color="#FB322E" shape="circle" @click="callPhone">
						拨号
					</uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {
	onTabItemTap,
	makePhoneCall,
} from '/utils/common.js'
import { navigateTo } from '@/utils/navigateTo';
import myCustomtTabBar from '@/components/myCustomtTabBar.vue';
import myModal from "@/components/myModal.vue";
import { useLoginApi } from "@/Apis/login.js";
import { useOrderApi } from '@/Apis/order.js';
import { authInfoApi } from "@/Apis/validInfo.js";
import { shareParam } from "@/utils/common.js";
import { useI18n } from 'vue-i18n';
// 主题色配置
import { useMainStore } from "@/store/index.js"
import { onLoad,onShow,onShareAppMessage} from '@dcloudio/uni-app'
import coupon from '@/components/coupon.vue';
import inviteDetail from '@/components/inviteDetail.vue';
import MediatorinviteDetail from '@/components/MediatorinviteDetail.vue';

import { useRecommend } from "@/Apis/recommend.js";
import { baseImageUrl, projectInfo, isKingKong,envVersion } from '@/config/index.js';
const { themeInfo, storeState, getUserInfo,logOut } = useMainStore();
const getLoginApi = useLoginApi();
const getApi = useOrderApi();
const couponRef = ref();
const getRecommendApi = useRecommend();
const getAuthApi = authInfoApi();
const { t } = useI18n();
const openPopupRef = ref();

const closePopup = () => {
	openPopupRef.value.close();
}
const openPopup = () => {
	openPopupRef.value.open();
}

onShow(() => {
  uni.hideTabBar();
})

const callPhone = ()=>{
  window.location.href = `tel:${projectInfo.callPhone}`;
  closePopup();
}

const goVaild = () => {
  navigateTo('/pagesb/validationInfo/index');
}
const goOrder = () => {
  navigateTo('/pages/unlock/index');
}

</script>
<style lang="scss" scoped>
@import '@/static/style/theme.scss';
.modal-container {
	// height: 700rpx;
	// background: #000;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	padding: 32rpx;

	.modal-title {
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
	}

	:deep(.uv-upload__wrap) {
		display: flex;
	}

	.modal-text {
		width: 100%;
		margin-top: 20rpx;
    padding: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		line-height: 32rpx;
	}

	.upload {
		margin-top: 30rpx;
		height: 250rpx;
		width: 100%;
		// background: #000;
		display: flex;
		justify-content: center;
		// overflow-x: scroll;
		overflow-y: scroll;
		// white-space: nowrap;
		flex-wrap: nowrap;
		// overflow: hidden;
	}

	.modal-button {
		margin-top: 20rpx;
		width: 100%;
		min-height: 86rpx;
		display: flex;
		gap: 20rpx;

		:deep(.uv-button-wrapper) {
			flex: 1;
		}
	}
}

.modal-container2 {
	height: 400rpx;

	@extend .modal-container
}


.container {
	width: 100%;
	min-height: 100vh;
	padding-bottom: 400rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.orderInfo {
  padding: 0;

  ul {
    list-style: none;
    padding: 0;
    padding: 0 28rpx;
    li {
      display: flex;
      align-items: center;
      padding: 28rpx 0rpx;
      justify-content: space-between;
      border-bottom: 1px solid #787B7E10;

      &:active {
        background-color: #f5f5f5;
      }

      &:last-child {
        border: none;
      }

      .right {
        display: flex;

        text {
          padding-right: 20px;
        }
      }
    }
  }
}

}
</style>