feat: 页面开发

src/base/components/Captcha.vue

@@ -1,63 +0,0 @@
-<!--
- * @Author: wyd
- * @Date: 2024-03
- * @LastEditors: wyd
- * @LastEditTime: 2024-04
- * @Description: 验证码
--->
-
-<script setup lang="ts">
-import { watch, ref, onMounted } from 'vue'
-import { getCaptchaImageApi } from '@/api/login'
-const props = defineProps({
-  modelValue: String
-})
-const emit = defineEmits(['getCaptchaInfo', 'update:modelValue'])
-const form = {
-  code: '',
-  uuid: '',
-  captchaEnabled: true
-}
-watch(
-  () => props.modelValue,
-  (val, pre) => {
-    form.code = props.modelValue || ''
-  }
-)
-// 更新code
-const codeChange = () => {
-  emit('update:modelValue', form.code)
-  emit('getCaptchaInfo', form)
-}
-const imgPath = ref('')
-// 获取验证码图片
-const getCaptchaImage = () => {
-  getCaptchaImageApi({ isWeb: false }).then((res) => {
-    form.captchaEnabled = res.data.captchaEnabled
-    form.uuid = res.data.uuid
-    if (res.data.captchaEnabled) {
-      imgPath.value = 'data:image/jpeg;base64,' + res.data.img
-    }
-    emit('getCaptchaInfo', form)
-  })
-}
-onMounted(() => {
-  getCaptchaImage()
-})
-defineExpose({ getCaptchaImage })
-</script>
-
-<template>
-  <view class="flex j-sb a-center">
-    <uni-easyinput type="text" v-model="form.code" placeholder="请输入验证码" @change="codeChange" />
-    <image :src="imgPath" mode="aspectFill" class="capcha-img ml10" @tap="getCaptchaImage" />
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.capcha-img {
-  width: 100px;
-  height: 35px;
-  border-radius: 4px;
-}
-</style>

src/base/components/Editors/index.vue

@@ -1,286 +0,0 @@
-<template>
-  <!-- <view class="container">
-    <view class="page-body"> -->
-  <view class="wrapper">
-    <view class="toolbar" @tap="format" style="height: 320rpx; overflow-y: auto">
-      <view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
-      <view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
-      <view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
-      <view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
-      <!-- #ifndef MP-BAIDU -->
-      <view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
-      <!-- #endif -->
-      <view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
-      <view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
-      <view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
-      <!-- #ifndef MP-BAIDU -->
-      <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight" data-value="2"></view>
-      <view
-        :class="formats.letterSpacing ? 'ql-active' : ''"
-        class="iconfont icon-Character-Spacing"
-        data-name="letterSpacing"
-        data-value="2em"
-      ></view>
-      <view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" data-value="20px"></view>
-      <view
-        :class="formats.marginBottom ? 'ql-active' : ''"
-        class="iconfont icon-723bianjiqi_duanhouju"
-        data-name="marginBottom"
-        data-value="20px"
-      ></view>
-      <!-- #endif -->
-
-      <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
-
-      <!-- #ifndef MP-BAIDU -->
-      <view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view>
-      <view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view>
-      <!-- #endif -->
-      <view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
-      <view
-        :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
-        class="iconfont icon-fontbgcolor"
-        data-name="backgroundColor"
-        data-value="#00ff00"
-      ></view>
-      <view class="iconfont icon-date" @tap="insertDate"></view>
-      <view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
-      <view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
-      <view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
-
-      <view class="iconfont icon-undo" @tap="undo"></view>
-      <view class="iconfont icon-redo" @tap="redo"></view>
-
-      <view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
-      <view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
-      <view class="iconfont icon-fengexian" @tap="insertDivider"></view>
-      <view class="iconfont icon-charutupian" @tap="insertImage"></view>
-      <view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
-      <view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
-      <view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
-
-      <view class="iconfont icon-shanchu" @tap="clear"></view>
-
-      <view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
-    </view>
-    <view class="editor-wrapper">
-      <editor
-        id="editor"
-        class="ql-container"
-        placeholder="请输入..."
-        show-img-size
-        show-img-toolbar
-        show-img-resize
-        @statuschange="onStatusChange"
-        :read-only="readOnly"
-        @ready="onEditorReady"
-        @input="onInput"
-      >
-      </editor>
-    </view>
-  </view>
-  <!-- </view>
-  </view> -->
-</template>
-
-<script>
-export default {
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      readOnly: false,
-      formats: {},
-      curContent: ''
-    }
-  },
-  watch: {
-    modelValue: {
-      handler(val) {
-        this.curContent = val
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  onLoad() {
-    // #ifndef MP-BAIDU
-    uni.loadFontFace({
-      family: 'Pacifico',
-      source: 'url("https://sungd.github.io/Pacifico.ttf")'
-    })
-    // #endif
-  },
-  methods: {
-    readOnlyChange() {
-      this.readOnly = !this.readOnly
-    },
-    onEditorReady() {
-      // #ifdef MP-BAIDU
-      this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor')
-      // #endif
-
-      // #ifdef APP-PLUS || MP-WEIXIN || H5
-      uni
-        .createSelectorQuery()
-        .in(this)
-        .select('#editor')
-        .context((res) => {
-          this.editorCtx = res.context
-
-          // setTimeout(() => {
-          //   this.editorCtx.setContents({
-          //     html: this.curContent
-          //   })
-          //   uni.pageScrollTo({
-          //     scrollTop: 0,
-          //     duration: 300
-          //   })
-          // }, 100)
-        })
-        .exec()
-      // #endif
-    },
-    undo() {
-      this.editorCtx.undo()
-    },
-    redo() {
-      this.editorCtx.redo()
-    },
-    format(e) {
-      let { name, value } = e.target.dataset
-      if (!name) return
-      this.editorCtx.format(name, value)
-    },
-    onStatusChange(e) {
-      const formats = e.detail
-      this.formats = formats
-      this.curContent = e.detail.html
-      this.$emit('update:content', e.detail.html)
-    },
-    onInput(e) {
-      this.curContent = e.detail.html
-      this.$emit('update:content', e.detail.html)
-    },
-    insertDivider() {
-      this.editorCtx.insertDivider({
-        success: function () {
-          console.log('insert divider success')
-        }
-      })
-    },
-    clear() {
-      uni.showModal({
-        title: '清空编辑器',
-        content: '确定清空编辑器全部内容？',
-        success: (res) => {
-          if (res.confirm) {
-            this.editorCtx.clear({
-              success: function (res) {
-                console.log('clear success')
-              }
-            })
-          }
-        }
-      })
-    },
-    removeFormat() {
-      this.editorCtx.removeFormat()
-    },
-    insertDate() {
-      const date = new Date()
-      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
-      this.editorCtx.insertText({
-        text: formatDate
-      })
-    },
-    insertImage() {
-      uni.chooseImage({
-        count: 1,
-        success: (res) => {
-          uni.uploadFile({
-            url: '/ueditor?action=uploadimage&encode=utf-8',
-            name: 'file',
-            fileType: 'image',
-            filePath: res.tempFilePaths[0],
-            success: (result) => {
-              const params = JSON.parse(result.data)
-              if (params.state === 'SUCCESS') {
-                this.editorCtx.insertImage({
-                  src: params.url,
-                  alt: '图像',
-                  success: function () {
-                    console.log('insert image success')
-                  }
-                })
-              } else {
-                uni.showToast({ icon: 'none', title: '上传失败请重试' })
-              }
-            }
-          })
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style>
-@import './editor-icon.css';
-
-.page-body {
-  /* height: calc(100vh - var(--window-top) - var(--status-bar-height)); */
-  height: 1000rpx;
-}
-
-.wrapper {
-  height: 1000rpx;
-}
-
-.editor-wrapper {
-  /* 		height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);*/
-  background: #fff;
-  height: 680rpx;
-}
-
-.iconfont {
-  display: inline-block;
-  padding: 8px 8px;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  font-size: 20px;
-}
-
-.toolbar {
-  /* box-sizing: border-box; */
-  border-bottom: 0;
-  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-}
-
-.ql-container {
-  /* box-sizing: border-box; */
-  padding: 12px 15px;
-  width: 100%;
-  /* min-height: 30vh;
-  height: 100%; */
-  /* margin-top: 20px; */
-  font-size: 28rpx;
-  line-height: 1.5;
-  height: 680rpx !important;
-  min-height: 680rpx !important;
-}
-
-.ql-active {
-  color: #06c;
-}
-
-/* editor {
-  height: 1000rpx !important;
-  min-height: 1000rpx !important;
-} */
-</style>

src/base/forget.vue

@@ -1,181 +0,0 @@
-<!--
- * @Author: wyd
- * @Date: 2024-03
- * @LastEditors: wyd
- * @LastEditTime: 2024-03
- * @Description: 忘记密码
--->
-<script setup lang="ts">
-import { ref } from 'vue'
-import { onLoad, onPullDownRefresh, onReady } from '@dcloudio/uni-app'
-import { system } from '@/stores/modules/system'
-import { useGlobal } from '@/composables'
-import { validatorMobile, verifyPwd } from '@/utils/verification'
-import { getSmsApi, forgetApi } from '@/api/login'
-
-const systemStore = system()
-// 表单信息
-const form = ref({
-  passwordAgain: '',
-  password: '',
-  phonenumber: '',
-  smsCode: ''
-})
-// 表单校验
-const rules: UniHelper.UniFormsRules = {
-  password: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入密码'
-      },
-      {
-        validateFunction: verifyPwd
-      }
-    ]
-  },
-  passwordAgain: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请再次输入密码'
-      },
-      {
-        validateFunction: function (rule, value, data, callback) {
-          if (value !== data.password) {
-            callback('两次输入密码不一致')
-          }
-          return true
-        }
-      }
-    ]
-  },
-  phonenumber: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入手机号'
-      },
-      {
-        validateFunction: validatorMobile
-      }
-    ]
-  },
-  smsCode: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入验证码'
-      }
-    ]
-  }
-}
-
-// 短信验证码
-let isDisabled = ref(false)
-let countdown = ref(0)
-const getSmsCode = () => {
-  getSmsApi({ phonenumber: form.value.phonenumber, type: 2 }).then(() => {
-    uni.showToast({
-      title: '操作成功',
-      icon: 'none'
-    })
-    isDisabled.value = true
-    countdown.value = 60
-    const timerInterval = setInterval(() => {
-      if (countdown.value > 1) {
-        countdown.value--
-      } else {
-        isDisabled.value = false
-        clearInterval(timerInterval)
-      }
-    }, 1000)
-  })
-}
-
-// 表单组件实例
-const formRef = ref<UniHelper.UniFormsInstance>()
-
-const handleSubmit = async () => {
-  formRef.value?.validate?.((err, formData) => {
-    if (!err) {
-      uni.showLoading()
-      forgetApi(form.value).then(() => {
-        // 注册成功，返回上一页
-        uni.showToast({
-          title: '操作成功',
-          icon: 'none'
-        })
-        setTimeout(() => {
-          uni.navigateBack()
-        }, 1000)
-      })
-    }
-  })
-}
-onLoad(async () => {
-  await systemStore.getConfigData()
-})
-onReady(() => {
-  formRef.value?.setRules?.(rules)
-})
-// 下拉刷新
-onPullDownRefresh(async () => {
-  await systemStore.getConfigData()
-  uni.stopPullDownRefresh()
-})
-</script>
-
-<template>
-  <view class="login-box">
-    <view class="center-box p15 shadow">
-      <view class="tc f18 weight-600 black-color mb20">重置密码</view>
-      <uni-forms ref="formRef" :model="form" :rules="rules">
-        <uni-forms-item name="phonenumber">
-          <uni-easyinput type="text" v-model="form.phonenumber" placeholder="请输入手机号" />
-        </uni-forms-item>
-        <uni-forms-item name="password">
-          <uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
-        </uni-forms-item>
-        <uni-forms-item name="passwordAgain">
-          <uni-easyinput type="password" v-model="form.passwordAgain" placeholder="请再次输入密码" />
-        </uni-forms-item>
-        <uni-forms-item name="smsCode">
-          <view class="flex j-sb a-center w100">
-            <uni-easyinput type="text" v-model="form.smsCode" placeholder="请输入验证码" />
-            <button class="ml10 sms-btn success-bg" :disabled="isDisabled" type="primary" size="mini" @tap="getSmsCode">
-              {{ isDisabled ? countdown + 's后重新获取' : '获取验证码' }}
-            </button>
-          </view>
-        </uni-forms-item>
-      </uni-forms>
-      <view class="btn-b warning-bg" @tap="handleSubmit">确 定</view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.login-box {
-  width: 100vw;
-  height: 100vh;
-  background: url('http://1.94.6.75:9000/zlhy-app/bg_login.jpg') center no-repeat;
-  background-size: 100% 100%;
-  position: relative;
-  .center-box {
-    width: calc(100vw - 60px);
-    min-height: 200px;
-    border-radius: 10rpx;
-    background: rgba($color: #fff, $alpha: 0.8);
-    position: absolute;
-    left: 15px;
-    top: 20%;
-    .btn-b {
-      width: 100% !important;
-    }
-    .sms-btn {
-      height: 35px;
-      line-height: 35px;
-    }
-  }
-}
-</style>

src/base/login.vue

@@ -1,791 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { onLoad, onReady } from '@dcloudio/uni-app'
-import { system } from '@/stores/modules/system'
-import { user } from '@/stores/modules/user'
-import { useGlobal } from '@/composables'
-import { validatorMobile, verifyPwd, validatorLoginMobile } from '@/utils/verification'
-import { loginApi, getSmsApi, weixinApi, getUserInfoApi, registerApi, forgetApi, phoneLoginApi } from '@/api/login'
-import Captcha from '@/base/components/Captcha.vue'
-import type { captchaInfo } from '@/types/login'
-import { getEnterpriseAPI } from '@/api/system'
-import type { useInfoResult } from '@/types/login'
-
-const userStore = user()
-const systemStore = system()
-// 表单信息
-const form = ref({
-  username: '',
-  password: '',
-  code: '',
-  phonenumber: '',
-  smsCode: '',
-  type: 2,
-  uuid: '',
-  openId: ''
-})
-
-// 表单校验
-const rules: UniHelper.UniFormsRules = {
-  username: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入手机号'
-      },
-      {
-        maxLength: useGlobal().textMax,
-        errorMessage: '限制{maxLength}个字符'
-      },
-      {
-        validateFunction: validatorLoginMobile
-      }
-    ]
-  },
-  password: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入密码'
-      }
-    ]
-  },
-  code: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入验证码'
-      }
-    ]
-  },
-  phonenumber: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入手机号'
-      },
-      {
-        validateFunction: validatorMobile
-      }
-    ]
-  },
-  smsCode: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入验证码'
-      }
-    ]
-  }
-}
-// 表单组件实例
-const formRef = ref<UniHelper.UniFormsInstance>()
-// 登录方式 1短信验证码登录 2密码登录
-const loginTypeChange = () => {
-  form.value.type = form.value.type === 1 ? 2 : 1
-}
-// 是否展示验证码
-let isShowCaptcha: boolean = true
-let uuid: string = ''
-const captchaRef = ref()
-const getCaptchaInfo = (val: captchaInfo) => {
-  isShowCaptcha = val.captchaEnabled
-  if (type.value === 1) {
-    uuid = val.uuid
-    form.value.code = val.code
-  } else {
-    registerForm.value.uuid = val.uuid
-    registerForm.value.code = val.code
-  }
-}
-// 短信验证码
-let isDisabled = ref(false)
-let countdown = ref(0)
-const getSmsCode = (type: number) => {
-  if (type === 1 && !form.value.phonenumber) {
-    useGlobal().tips('请输入手机号')
-    return
-  }
-  if (type === 2 && !pwdForm.value.phonenumber) {
-    useGlobal().tips('请输入手机号')
-    return
-  }
-  getSmsApi({ phonenumber: type === 1 ? form.value.phonenumber : pwdForm.value.phonenumber, type }).then(() => {
-    uni.showToast({
-      title: '操作成功',
-      icon: 'none'
-    })
-    isDisabled.value = true
-    countdown.value = 60
-    const timerInterval = setInterval(() => {
-      if (countdown.value > 1) {
-        countdown.value--
-      } else {
-        isDisabled.value = false
-        clearInterval(timerInterval)
-      }
-    }, 1000)
-  })
-}
-// 存储用户信息
-const refreshUserInfo = () => {
-  // 获取用户信息
-  getUserInfoApi().then((response) => {
-    const result = {
-      ...response?.data?.user,
-      secretary: 1
-    }
-    // 党员是否为书记
-    if (result.type & 32) {
-      result.secretary = response?.data?.secretary
-    }
-    // 存储用户信息
-    userStore.setUserInfo(result as useInfoResult)
-    // 存储权限
-    let permissions = []
-    if (response?.data?.permissions) {
-      for (let item of response.data.permissions) {
-        permissions.push(item)
-      }
-    }
-    userStore.setPermissions(permissions)
-    // 登录成功返回上一页
-    uni.navigateBack()
-  }).catch(() => {
-    uni.navigateBack()
-  })
-}
-// 登录
-const handleSubmit = async () => {
-  formRef.value?.validate?.((err, formData) => {
-    if (!err) {
-      let params = ref()
-      form.value.uuid = isShowCaptcha && form.value.type === 2 ? uuid : ''
-      if (isBind.value === 1) {
-        // 微信绑定
-        params.value = {
-          username: form.value.username,
-          password: form.value.password,
-          uuid: form.value.uuid,
-          openId: openId.value,
-          platform: 'pc'
-        }
-      } else {
-        params.value = form.value
-      }
-      uni.showLoading()
-      loginApi(params.value, isBind.value)
-        .then((res) => {
-          // 存储token
-          userStore.setToken(res?.data?.token)
-          setTimeout(() => {
-            refreshUserInfo()
-          }, 100)
-        })
-        .catch((err) => {
-          captchaRef.value?.getCaptchaImage()
-        })
-    }
-  })
-  // try {
-  //   // 表单校验
-  //   await formRef.value?.validate?.()
-  //   // 校验通过后再发送请求
-  // } catch (error) {
-  //   //
-  // }
-}
-// 清空密码
-const handleClear = () => {
-  form.value.password = ''
-}
-// 注册
-const handleRegister = () => {
-  uni.navigateTo({ url: '/base/register' })
-}
-// 忘记密码
-const handleForget = () => {
-  uni.navigateTo({ url: '/base/forget' })
-}
-// 微信登录
-let openId = ref('')
-// 微信是否绑定系统用户 1未绑定 0已绑定
-let isBind = ref(0)
-const handleUserProfile = () => {
-  uni.showLoading()
-  uni.login({
-    provider: 'weixin',
-    success: function (res) {
-      weixinApi({ code: res.code }).then((result) => {
-        console.log(result, 'res.code')
-        if (result.code === 409) {
-          // 用户不存在需要用户手动绑定
-          uni.showToast({
-            title: '微信账号未绑定系统用户，请先绑定',
-            icon: 'none',
-            duration: 3000
-          })
-          isBind.value = 1
-          openId.value = result.msg
-        } else {
-          isBind.value = 0
-          // 存储token
-          userStore.setToken(result?.data?.token)
-          // 返回用户token，正常存储登录
-          setTimeout(() => {
-            refreshUserInfo()
-          }, 100)
-        }
-      })
-    },
-    complete: function () {
-      uni.hideLoading()
-    }
-  })
-}
-
-// 注册
-// 表单校验
-const registerRules: UniHelper.UniFormsRules = {
-  // username: {
-  //   rules: [
-  //     {
-  //       required: true,
-  //       errorMessage: '请输入用户名'
-  //     },
-  //     {
-  //       maxLength: useGlobal().textMax,
-  //       errorMessage: '限制{maxLength}个字符'
-  //     }
-  //   ]
-  // },
-  realname: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入姓名'
-      },
-      {
-        maxLength: useGlobal().textMax,
-        errorMessage: '限制{maxLength}个字符'
-      }
-    ]
-  },
-  password: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入密码'
-      },
-      {
-        validateFunction: verifyPwd
-      }
-    ]
-  },
-  passwordAgain: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请再次输入密码'
-      },
-      {
-        validateFunction: function (rule, value, data, callback) {
-          if (value !== data.password) {
-            callback('两次输入密码不一致')
-          }
-          return true
-        }
-      }
-    ]
-  },
-  code: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入验证码'
-      }
-    ]
-  },
-  mobile: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入手机号'
-      },
-      {
-        validateFunction: validatorMobile
-      }
-    ]
-  }
-}
-// 表单组件实例
-const registerRef = ref<UniHelper.UniFormsInstance>()
-// 表单信息
-const registerForm = ref({
-  // username: '',
-  realname: '',
-  password: '',
-  mobile: '',
-  uuid: '',
-  code: '',
-  passwordAgain: ''
-})
-
-const getRegisterCaptchaInfo = (val: captchaInfo) => {
-  isShowCaptcha = val.captchaEnabled
-  registerForm.value.uuid = val.uuid
-  registerForm.value.code = val.code
-}
-
-const handleRegisterSubmit = () => {
-  registerRef.value?.validate?.((err, formData) => {
-    if (!err) {
-      uni.showLoading()
-      registerApi(registerForm.value)
-        .then(() => {
-          // 注册成功，返回登录
-          uni.showToast({
-            title: '操作成功',
-            icon: 'none'
-          })
-          type.value = 1
-        })
-        .catch(() => {
-          captchaRef.value?.getCaptchaImage()
-        })
-    }
-  })
-}
-
-// 忘记密码
-// 表单信息
-const pwdForm = ref({
-  passwordAgain: '',
-  password: '',
-  phonenumber: '',
-  smsCode: ''
-})
-// 表单校验
-const pwdRules: UniHelper.UniFormsRules = {
-  password: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入密码'
-      },
-      {
-        validateFunction: verifyPwd
-      }
-    ]
-  },
-  passwordAgain: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请再次输入密码'
-      },
-      {
-        validateFunction: function (rule, value, data, callback) {
-          if (value !== data.password) {
-            callback('两次输入密码不一致')
-          }
-          return true
-        }
-      }
-    ]
-  },
-  phonenumber: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入手机号'
-      },
-      {
-        validateFunction: validatorMobile
-      }
-    ]
-  },
-  smsCode: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入验证码'
-      }
-    ]
-  }
-}
-const pwdFormRef = ref<UniHelper.UniFormsInstance>()
-const handlePwdSubmit = async () => {
-  pwdFormRef.value?.validate?.((err, formData) => {
-    if (!err) {
-      uni.showLoading()
-      forgetApi(form.value).then(() => {
-        // 注册成功，返回登录
-        uni.showToast({
-          title: '操作成功',
-          icon: 'none'
-        })
-        type.value = 1
-      })
-    }
-  })
-}
-
-let type = ref(1) // 1登录 2注册
-const changeType = (index: number) => {
-  type.value = index
-  if (index === 2) {
-    registerForm.value = {
-      // username: '',
-      realname: '',
-      password: '',
-      mobile: '',
-      uuid: '',
-      code: ''
-    }
-    registerRef.value?.setRules?.(registerRules)
-    registerRef.value?.clearValidate()
-  } else if (type.value === 3) {
-    pwdForm.value = {
-      passwordAgain: '',
-      password: '',
-      phonenumber: '',
-      smsCode: ''
-    }
-    pwdFormRef.value?.setRules?.(pwdRules)
-    pwdFormRef.value?.clearValidate()
-  } else {
-    form.value = {
-      username: '',
-      password: '',
-      code: '',
-      phonenumber: '',
-      smsCode: '',
-      type: 2,
-      uuid: '',
-      openId: ''
-    }
-    formRef.value?.clearValidate()
-  }
-}
-// 获取手机号
-const getphonenumber = (val: { detail: { code: string } }) => {
-  if (val.detail && val.detail.code) {
-    uni.showLoading()
-    phoneLoginApi({ code: val.detail.code }).then((res) => {
-      // 存储token
-      userStore.setToken(res?.data?.token)
-      setTimeout(() => {
-        refreshUserInfo()
-      }, 100)
-    })
-  }
-}
-// 取消绑定
-const cancelBind = () => {
-  isBind.value = 0
-}
-
-onLoad(async () => {
-  await systemStore.getConfigData()
-})
-onReady(() => {
-  formRef.value?.setRules?.(rules)
-})
-// 下拉刷新
-// onPullDownRefresh(async () => {
-//   await systemStore.getConfigData()
-//   uni.stopPullDownRefresh()
-// })
-</script>
-
-<template>
-  <view class="login-box">
-    <view class="login-top flex a-ccenter f20 white-color f-wrap pl20">
-      <view class="w100">您好，</view>
-      <view>欢迎使用{{ systemStore.config.name || '智慧园区管理系统' }}</view>
-    </view>
-    <view class="flex j-sb a-c w100 login-action">
-      <view v-if="type < 3" class="w50 tc f14" :class="[type === 1 && 'weight-600']" @click="changeType(1)">登录</view>
-      <view v-if="type < 3 && systemStore.config.register === 'true'" class="w50 tc f14" :class="[type === 2 && 'weight-600']" @click="changeType(2)"
-        >注册</view
-      >
-      <view v-if="type === 3" class="w50 tc f14 weight-600">忘记密码</view>
-    </view>
-    <view v-if="type === 1 || type === 3" class="triangle triangle-left"></view>
-    <view v-if="type === 2" class="triangle triangle-right"></view>
-    <view class="center-box">
-      <!-- 登录 -->
-      <uni-forms v-if="type === 1" ref="formRef" :model="form" :rules="rules" label-position="top" label-width="0">
-        <!-- 短信登录 -->
-        <template v-if="form.type === 1">
-          <uni-forms-item name="phonenumber">
-            <template #label>
-              <view class="form-title">
-                <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe6d9;</uni-icons>
-                手机号
-              </view>
-            </template>
-            <uni-easyinput type="text" v-model="form.phonenumber" placeholder="请输入手机号" />
-          </uni-forms-item>
-          <uni-forms-item name="smsCode">
-            <template #label>
-              <view class="form-title">
-                <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe619;</uni-icons>
-                验证码
-              </view>
-            </template>
-            <view class="flex j-sb a-center w100">
-              <uni-easyinput type="text" v-model="form.smsCode" placeholder="请输入验证码" />
-              <view v-if="isDisabled" class="sms-btn weight-600 gray-color">
-                {{ countdown + 's后重新获取' }}
-              </view>
-              <view v-else class="sms-btn weight-600 primary-color" @tap="getSmsCode(1)"> 获取验证码 </view>
-            </view>
-          </uni-forms-item>
-        </template>
-        <!-- 密码登录|微信绑定 -->
-        <template v-if="form.type === 2 || isBind">
-          <uni-forms-item name="username">
-            <template #label>
-              <view class="form-title">
-                <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe6d9;</uni-icons>
-                手机号
-              </view>
-            </template>
-            <uni-easyinput type="text" v-model="form.username" placeholder="请输入手机号" @clear="handleClear" />
-          </uni-forms-item>
-          <uni-forms-item name="password">
-            <template #label>
-              <view class="form-title">
-                <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe638;</uni-icons>
-                密码
-              </view>
-            </template>
-            <uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
-          </uni-forms-item>
-          <uni-forms-item v-if="isShowCaptcha && systemStore.config.captcha === 'true' && !isBind" name="code">
-            <template #label>
-              <view class="form-title">
-                <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe619;</uni-icons>
-                验证码
-              </view>
-            </template>
-            <Captcha ref="captchaRef" @getCaptchaInfo="getCaptchaInfo" class="w100" />
-          </uni-forms-item>
-        </template>
-      </uni-forms>
-      <!-- 注册 -->
-      <uni-forms v-if="type === 2" ref="registerRef" :model="registerForm" :rules="registerRules" label-position="top" label-width="0">
-        <uni-forms-item name="mobile">
-          <template #label>
-            <view class="form-title">
-              <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe6d9;</uni-icons>
-              手机号
-            </view>
-          </template>
-          <uni-easyinput type="text" v-model="registerForm.mobile" placeholder="请输入手机号" />
-        </uni-forms-item>
-        <!-- <uni-forms-item name="username">
-          <template #label>
-            <view class="form-title">
-              <uni-icons type="person" color="#2E62AF" size="14" />
-              用户名
-            </view>
-          </template>
-          <uni-easyinput type="text" v-model="registerForm.username" placeholder="请输入用户名" />
-        </uni-forms-item> -->
-        <uni-forms-item name="realname">
-          <template #label>
-            <view class="form-title">
-              <uni-icons type="person-filled" color="#2E62AF" size="14" />
-              姓名
-            </view>
-          </template>
-          <uni-easyinput type="text" v-model="registerForm.realname" placeholder="请输入姓名" />
-        </uni-forms-item>
-        <uni-forms-item name="password">
-          <template #label>
-            <view class="form-title">
-              <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe638;</uni-icons>
-              密码
-            </view>
-          </template>
-          <uni-easyinput type="password" v-model="registerForm.password" placeholder="请输入密码" />
-        </uni-forms-item>
-        <uni-forms-item name="passwordAgain">
-          <template #label>
-            <view class="form-title">
-              <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe638;</uni-icons>
-              确认密码
-            </view>
-          </template>
-          <uni-easyinput type="password" v-model="registerForm.passwordAgain" placeholder="请再次输入密码" />
-        </uni-forms-item>
-        <uni-forms-item v-if="isShowCaptcha && systemStore.config.captcha === 'true'" name="code">
-          <template #label>
-            <view class="form-title">
-              <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe619;</uni-icons>
-              验证码
-            </view>
-          </template>
-          <Captcha ref="captchaRef" @getCaptchaInfo="getCaptchaInfo" class="w100" />
-        </uni-forms-item>
-      </uni-forms>
-      <!-- 忘记密码 -->
-      <uni-forms v-if="type === 3" ref="pwdFormRef" :model="pwdForm" :rules="pwdRules" label-position="top" label-width="0">
-        <uni-forms-item name="phonenumber">
-          <template #label>
-            <view class="form-title">
-              <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe6d9;</uni-icons>
-              手机号
-            </view>
-          </template>
-          <uni-easyinput type="text" v-model="pwdForm.phonenumber" placeholder="请输入手机号" />
-        </uni-forms-item>
-        <uni-forms-item name="smsCode">
-          <template #label>
-            <view class="form-title">
-              <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe619;</uni-icons>
-              验证码
-            </view>
-          </template>
-          <view class="flex j-sb a-center w100">
-            <uni-easyinput type="text" v-model="pwdForm.smsCode" placeholder="请输入验证码" />
-            <view v-if="isDisabled" class="sms-btn weight-600 gray-color">
-              {{ countdown + 's后重新获取' }}
-            </view>
-            <view v-else class="sms-btn weight-600 primary-color" @tap="getSmsCode(2)"> 获取验证码 </view>
-          </view>
-        </uni-forms-item>
-        <uni-forms-item name="password">
-          <template #label>
-            <view class="form-title">
-              <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe638;</uni-icons>
-              新密码
-            </view>
-          </template>
-          <uni-easyinput type="password" v-model="pwdForm.password" placeholder="请输入密码" />
-        </uni-forms-item>
-        <uni-forms-item name="passwordAgain">
-          <template #label>
-            <view class="form-title">
-              <uni-icons fontFamily="iconfont" color="#2E62AF" size="14">&#xe638;</uni-icons>
-              确认密码
-            </view>
-          </template>
-          <uni-easyinput type="password" v-model="pwdForm.passwordAgain" placeholder="请再次输入新密码" />
-        </uni-forms-item>
-      </uni-forms>
-      <!-- 登录操作 -->
-      <template v-if="type === 1">
-        <view v-if="systemStore.config.sms === 'true'" class="f12 mb20 mt10 primary-color weight-600 flex a-c j-sb">
-          <text @tap="loginTypeChange">{{ form.type === 2 ? '短信验证码登录' : '密码登录' }}</text>
-          <!-- <text @tap="handleForget">忘记密码</text> -->
-          <text @tap="changeType(3)">忘记密码</text>
-        </view>
-        <view class="btn-b gradual-primary" @tap="handleSubmit">{{ isBind ? '绑 定' : '登 录' }}</view>
-        <!-- #ifdef MP-WEIXIN -->
-        <view v-if="!isBind" class="tc m10 gray-color f12">OR</view>
-        <view v-if="!isBind" class="btn-b plain-bg primary-color mb10" @tap="handleUserProfile">微信一键登录</view>
-        <!-- #endif -->
-        <button v-if="!isBind" type="primary" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="btn-b plain-bg primary-color">
-          手机号登录
-        </button>
-        <view v-if="isBind" class="f12 mt20 primary-color weight-600" @click="cancelBind"
-          ><uni-icons type="left" size="12" color="#2e62af"></uni-icons>返回</view
-        >
-      </template>
-      <!-- 注册 -->
-      <view v-if="type === 2" class="btn-b gradual-primary" @tap="handleRegisterSubmit">确 定</view>
-      <!-- 忘记密码 -->
-      <template v-if="type === 3">
-        <view class="f12 mb20 mt10 primary-color weight-600 flex a-c j-sb">
-          <text @tap="changeType(1)">返回</text>
-        </view>
-        <view class="btn-b gradual-primary" @tap="handlePwdSubmit">确 定</view>
-      </template>
-    </view>
-    <!-- <view v-if="type === 1" class="gray-color f12 tc w100 agreement"> 登录即代表已阅读并同意<text class="primary-color">《用户协议》</text></view> -->
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.login-box {
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-  background: #fff;
-  .login-top {
-    height: 550rpx;
-    background: url('http://1.94.6.75:9000/zlhy-app/bg_activity.jpg') center no-repeat;
-    background-size: 100% 100%;
-  }
-  .login-action {
-    position: absolute;
-    left: 0;
-    top: 400rpx;
-    color: #fff;
-  }
-  :deep(.center-box) {
-    // width: calc(100vw - 100rpx);
-    width: 100%;
-    min-height: 200px;
-    border-radius: 50rpx;
-    background: #fff;
-    position: absolute;
-    left: 0;
-    top: 480rpx;
-    padding: 50rpx;
-    .btn-b {
-      width: 100% !important;
-    }
-    .is-input-border {
-      border-radius: 0;
-      border: 0;
-      border-bottom: 1px solid #dcdfe6;
-    }
-    .form-title {
-      font-size: 28rpx;
-      font-weight: bold;
-    }
-  }
-  .triangle {
-    width: 0;
-    height: 0;
-    border-left: 100rpx solid #fff;
-    border-top: 200rpx solid #fff;
-    border-right: 200rpx solid transparent;
-    border-bottom: 100rpx solid transparent;
-    transform: rotate(45deg);
-    border-top-left-radius: 5rpx;
-    position: absolute;
-    top: 520rpx;
-  }
-  .triangle-left {
-    left: 37rpx;
-  }
-  .triangle-right {
-    right: 37rpx;
-  }
-  .sms-btn {
-    height: 35px;
-    line-height: 35px;
-    border-bottom: 1px solid #dcdfe6;
-    border-radius: 0 !important;
-    font-size: 24rpx;
-  }
-  .forget {
-    .line {
-      width: 1px;
-      height: 10px;
-      background-color: #333;
-    }
-  }
-  .agreement {
-    position: absolute;
-    bottom: 50rpx;
-    left: 0;
-  }
-}
-</style>

src/base/register.vue

@@ -1,177 +0,0 @@
-<!--
- * @Author: wyd
- * @Date: 2024-03
- * @LastEditors: wyd
- * @LastEditTime: 2024-05
- * @Description: 注册
--->
-<script setup lang="ts">
-import { ref } from 'vue'
-import { onLoad, onPullDownRefresh, onReady } from '@dcloudio/uni-app'
-import { system } from '@/stores/modules/system'
-import { useGlobal } from '@/composables'
-import { validatorMobile, verifyPwd } from '@/utils/verification'
-import { registerApi } from '@/api/login'
-import Captcha from '@/base/components/Captcha.vue'
-import type { captchaInfo } from '@/types/login'
-
-const systemStore = system()
-// 表单信息
-const form = ref({
-  // username: '',
-  realname: '',
-  password: '',
-  mobile: '',
-  uuid: '',
-  code: ''
-})
-// 表单校验
-const rules: UniHelper.UniFormsRules = {
-  // username: {
-  //   rules: [
-  //     {
-  //       required: true,
-  //       errorMessage: '请输入用户名'
-  //     },
-  //     {
-  //       maxLength: useGlobal().textMax,
-  //       errorMessage: '限制{maxLength}个字符'
-  //     }
-  //   ]
-  // },
-  realname: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入姓名'
-      },
-      {
-        maxLength: useGlobal().textMax,
-        errorMessage: '限制{maxLength}个字符'
-      }
-    ]
-  },
-  password: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入密码'
-      },
-      {
-        validateFunction: verifyPwd
-      }
-    ]
-  },
-  code: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入验证码'
-      }
-    ]
-  },
-  mobile: {
-    rules: [
-      {
-        required: true,
-        errorMessage: '请输入手机号'
-      },
-      {
-        validateFunction: validatorMobile
-      }
-    ]
-  }
-}
-// 表单组件实例
-const formRef = ref<UniHelper.UniFormsInstance>()
-
-// 是否展示验证码
-let isShowCaptcha: boolean = true
-const captchaRef = ref()
-const getCaptchaInfo = (val: captchaInfo) => {
-  isShowCaptcha = val.captchaEnabled
-  form.value.uuid = val.uuid
-  form.value.code = val.code
-}
-
-const handleSubmit = async () => {
-  formRef.value?.validate?.((err, formData) => {
-    if (!err) {
-      uni.showLoading()
-      registerApi(form.value)
-        .then(() => {
-          // 注册成功，返回上一页
-          uni.showToast({
-            title: '操作成功',
-            icon: 'none'
-          })
-          setTimeout(() => {
-            uni.navigateBack()
-          }, 1000)
-        })
-        .catch((err) => {
-          captchaRef.value?.getCaptchaImage()
-        })
-    }
-  })
-}
-onLoad(async () => {
-  await systemStore.getConfigData()
-})
-onReady(() => {
-  formRef.value?.setRules?.(rules)
-})
-// 下拉刷新
-onPullDownRefresh(async () => {
-  await systemStore.getConfigData()
-  uni.stopPullDownRefresh()
-})
-</script>
-
-<template>
-  <view class="login-box">
-    <view class="center-box p15 shadow">
-      <view class="tc f18 weight-600 black-color mb20">注册</view>
-      <uni-forms ref="formRef" :model="form" :rules="rules">
-        <uni-forms-item name="mobile">
-          <uni-easyinput type="text" v-model="form.mobile" placeholder="请输入手机号" />
-        </uni-forms-item>
-        <!-- <uni-forms-item name="username">
-          <uni-easyinput type="text" v-model="form.username" placeholder="请输入用户名" />
-        </uni-forms-item> -->
-        <uni-forms-item name="realname">
-          <uni-easyinput type="text" v-model="form.realname" placeholder="请输入姓名" />
-        </uni-forms-item>
-        <uni-forms-item name="password">
-          <uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
-        </uni-forms-item>
-        <uni-forms-item v-if="isShowCaptcha && systemStore.config.captcha === 'true'" name="code">
-          <Captcha ref="captchaRef" @getCaptchaInfo="getCaptchaInfo" class="w100" />
-        </uni-forms-item>
-      </uni-forms>
-      <view class="btn-b warning-bg" @tap="handleSubmit">确 定</view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.login-box {
-  width: 100vw;
-  height: 100vh;
-  background: url('http://1.94.6.75:9000/zlhy-app/bg_login.jpg') center no-repeat;
-  background-size: 100% 100%;
-  position: relative;
-  .center-box {
-    width: calc(100vw - 60px);
-    min-height: 200px;
-    border-radius: 10rpx;
-    background: rgba($color: #fff, $alpha: 0.8);
-    position: absolute;
-    left: 15px;
-    top: 20%;
-    .btn-b {
-      width: 100% !important;
-    }
-  }
-}
-</style>

src/base/suggest/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <view class="suggest-container">
+    <view class="suggest-header-wrapper" :style="{ backgroundImage: `url(${minioUrl}/suggest_bg.png)` }">
+      <view class="suggest-tips">
+        <view class="title">尊敬的顾客</view>
+        <view class="sub-title">欢迎您对我们服务区提出建议反馈，我们会对您的问题进行全程跟踪</view>
+      </view>
+      <image class="header-logo" :src="minioUrl + '/icon_kefubz_01.png'" mode="scaleToFill" />
+    </view>
+    <view class="suggest-block-wrapper">
+      <view class="block-item" @click="toSuggest">
+        <view class="b-title">投诉建议</view>
+        <view class="b-sub-title">提交您建议，将有专业人士为您跟进处理</view>
+        <image class="bottom-img" :src="minioUrl + '/icon_kefubz_02.png'" mode="scaleToFill" />
+      </view>
+      <view class="block-item" @click="toRecord">
+        <view class="b-title">反馈记录</view>
+        <view class="b-sub-title">查看您的反馈记录</view>
+        <image class="bottom-img" :src="minioUrl + '/icon_kefubz_3.png'" mode="scaleToFill" />
+      </view>
+    </view>
+    <HyCard title="常见问题">
+      <view class="suggest-list-wrapper">
+        <view class="list-item" v-for="index in 3" :key="index">
+          <view class="text">我想要修车，怎么联系服务区修车店?</view>
+          <image :src="minioUrl + '/icon_kefubz_05.png'" mode="scaleToFill" />
+        </view>
+        <view class="refresh-wrap">
+          <image :src="minioUrl + '/icon_kefubz_04.png'" mode="scaleToFill" />
+          <text>换一换</text>
+        </view>
+      </view>
+    </HyCard>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useGlobal } from '@/composables/index'
+
+const { minioUrl } = useGlobal()
+
+const toSuggest = () => {
+  uni.navigateTo({
+    url: '/base/suggest/suggest'
+  })
+}
+
+const toRecord = () => {
+  uni.navigateTo({
+    url: '/base/suggest/record'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.suggest-container {
+  width: 100%;
+  box-sizing: border-box;
+  .suggest-header-wrapper {
+    width: 100%;
+    height: 380rpx;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    box-sizing: border-box;
+    padding: 70rpx 0 0 56rpx;
+    .header-logo {
+      width: 338rpx;
+      height: 198rpx;
+    }
+    .suggest-tips {
+      .title {
+        font-size: 28rpx;
+        color: #333;
+        font-weight: 600;
+        line-height: 21rpx;
+        margin-bottom: 24rpx;
+      }
+      .sub-title {
+        font-size: 21rpx;
+        color: #333;
+        font-weight: 400;
+        width: 338rpx;
+        line-height: 33rpx;
+      }
+    }
+  }
+  .suggest-block-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: -90rpx;
+    margin-bottom: 30rpx;
+    .block-item {
+      width: 333rpx;
+      height: 179rpx;
+      border-radius: 14rpx;
+      background-color: #fff;
+      box-sizing: border-box;
+      padding: 29rpx 0 0 36rpx;
+      position: relative;
+      &:nth-child(2) {
+        margin-left: 24rpx;
+        .bottom-img {
+          width: 69rpx;
+          height: 74rpx;
+        }
+      }
+      .bottom-img {
+        position: absolute;
+        bottom: 19rpx;
+        right: 17rpx;
+        width: 77rpx;
+        height: 65rpx;
+      }
+      .b-title {
+        font-size: 31rpx;
+        color: #333;
+        margin-bottom: 10rpx;
+      }
+      .b-sub-title {
+        font-size: 17rpx;
+        width: 166rpx;
+      }
+    }
+  }
+  :deep(.hy-card-container) {
+    width: 694rpx;
+    margin: 0 auto;
+  }
+  .suggest-list-wrapper {
+    margin-top: 11rpx;
+    .list-item {
+      width: 100%;
+      height: 77rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      border-bottom: 1rpx solid #f4f5f9;
+      .text {
+        font-size: 25rpx;
+        color: #333;
+      }
+      image {
+        width: 9rpx;
+        height: 15rpx;
+      }
+    }
+    .refresh-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      margin-top: 20rpx;
+      image {
+        width: 24rpx;
+        height: 24rpx;
+      }
+      text {
+        font-size: 25rpx;
+        color: #4e6cef;
+        margin-left: 10rpx;
+      }
+    }
+  }
+}
+</style>

src/base/suggest/record.vue

@@ -0,0 +1,7 @@
+<template>
+  <view></view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/base/suggest/suggest.vue

@@ -0,0 +1,7 @@
+<template>
+  <view></view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/components/HyCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <view
+    class="hy-card-container"
+    :class="isBg ? 'bg-card' : ''"
+    :style="{ marginBottom: marginBottom + 'rpx', backgroundImage: isBg ? 'url(' + bgImg + ')' : 'none' }"
+  >
+    <view class="main-title-box" v-if="title">
+      <view class="text">{{ title }}</view>
+      <view v-if="isShowRight" class="right-text-wrap">
+        <text>{{ rightText }}</text>
+        <u-icon name="arrow-right-double" size="21" color="#292e36"></u-icon>
+      </view>
+    </view>
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  marginBottom: {
+    type: Number,
+    default: 24
+  },
+  isShowRight: {
+    type: Boolean,
+    default: false
+  },
+  rightText: {
+    type: String,
+    default: '更多'
+  },
+  isBg: {
+    type: Boolean,
+    default: false
+  },
+  bgImg: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.hy-card-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 22rpx;
+  background-color: #fff;
+  border-radius: 14rpx;
+  &.bg-card {
+    width: 100%;
+    min-height: 549rpx;
+    background-position: center center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .main-title-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .text {
+      font-size: 31rpx;
+      color: #333;
+      font-weight: 600;
+    }
+    .right-text-wrap {
+      display: flex;
+      align-items: center;
+      text {
+        font-size: 21rpx;
+        color: #292e36;
+      }
+    }
+  }
+}
+</style>

src/components/HyService.vue

@@ -1,10 +1,10 @@
 <template>
   <view class="service-item-wrapper">
     <view class="item-left-wrap">
-      <image src="/static/images/icon_service_01.png" mode="scaleToFill" />
+      <image :src="minioUrl + '/icon_service_01.png'" mode="scaleToFill" />
       <text>停车场</text>
     </view>
-    <view class="item-right-wrap">
+    <view class="item-right-wrap" :style="{ backgroundImage: `url(${minioUrl}/bg_service_03.png)` }">
       <!-- <view class="main-text">淋浴/洗衣</view> -->
       <view class="block-content">
         <view class="label">空闲</view>
@@ -17,7 +17,10 @@
   </view>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useGlobal } from '@/composables/index'
+const { minioUrl } = useGlobal()
+</script>
 
 <style lang="scss" scoped>
 .service-item-wrapper {
@@ -48,7 +51,8 @@
   .item-right-wrap {
     width: 157rpx;
     height: 52rpx;
-    background: url('/static/images/bg_service_03.png') no-repeat center center;
+    background-position: center center;
+    background-repeat: no-repeat;
     background-size: 157rpx 52rpx;
     display: flex;
     align-items: center;

src/components/HyStation.vue

@@ -1,7 +1,138 @@
 <template>
-  <view></view>
+  <view class="station-item-wrapper">
+    <template v-if="type === 1">
+      <view class="station-card-wrap">
+        <view class="card-header">
+          <view class="text">92#</view>
+          <image :src="minioUrl + '/icon_sm_jiayou.png'" mode="scaleToFill" />
+        </view>
+        <view class="card-bottom">
+          <view class="price-box">
+            <view class="price"><text>7.25</text>元</view>
+          </view>
+          <view class="origin-box">原价：7.90元</view>
+        </view>
+      </view>
+    </template>
+    <template v-else>
+      <view class="station-list-wrap">
+        <view class="station-name">92#</view>
+        <view class="price-wrap">
+          <view class="price-text"><text>7.25</text>元</view>
+          <view class="origin-text">原价：7.90元</view>
+        </view>
+      </view>
+    </template>
+  </view>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useGlobal } from '@/composables/index'
+const { minioUrl } = useGlobal()
 
-<style lang="scss" scoped></style>
+// type 类型区分 1卡片形式 2列表形式, 通过props传递
+defineProps({
+  type: {
+    type: Number,
+    default: 1
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.station-item-wrapper {
+  box-sizing: border-box;
+  .station-card-wrap {
+    width: 140rpx;
+    height: 140rpx;
+    background-image: linear-gradient(90deg, #fe594d 0%, #ff8f58 100%), linear-gradient(#f2f1f6, #f2f1f6);
+    background-blend-mode: normal, normal;
+    border-radius: 8rpx;
+    display: flex;
+    flex-direction: column;
+    .card-header {
+      width: 100%;
+      height: 35rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 0 10rpx 0 17rpx;
+      .text {
+        font-size: 26rpx;
+        color: #fff;
+        font-weight: 600;
+      }
+      image {
+        width: 21rpx;
+        height: 19rpx;
+      }
+    }
+    .card-bottom {
+      width: 137rpx;
+      height: 103rpx;
+      background-color: #fff;
+      border-radius: 8rpx;
+      margin: 0 auto;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .price-box {
+        display: flex;
+        align-items: baseline;
+        .price {
+          font-size: 20rpx;
+          color: #333;
+          text {
+            font-size: 42rpx;
+            color: #ff3d28;
+            font-weight: 600;
+          }
+        }
+      }
+      .origin-box {
+        font-size: 16rpx;
+        color: #999;
+        text-decoration: line-through;
+      }
+    }
+  }
+  .station-list-wrap {
+    width: 100%;
+    height: 84rpx;
+    border-radius: 8rpx;
+    background-color: #f6f7fb;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24rpx;
+    margin-bottom: 24rpx;
+    .station-name {
+      font-size: 28rpx;
+      color: #333;
+      font-weight: 600;
+    }
+    .price-wrap {
+      display: flex;
+      align-items: center;
+      .price-text {
+        font-size: 21rpx;
+        color: #333;
+        text {
+          font-size: 28rpx;
+          color: #ff3d28;
+          font-weight: 600;
+        }
+      }
+      .origin-text {
+        font-size: 21rpx;
+        color: #999;
+        margin-left: 10rpx;
+        text-decoration: line-through;
+      }
+    }
+  }
+}
+</style>

src/components/HyTag.vue

@@ -0,0 +1,59 @@
+<template>
+  <view class="tag-item-wrapper">
+    <view class="tag-item-content" :class="{ 'need-border': needBorder }">
+      <image :src="minioUrl + '/icon_iot_canyin.png'" :style="{ width: imgWidth, height: imgHeight }" />
+      <view class="tag-item-text" :style="{ fontSize: fontSize }">{{ text }}</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useGlobal } from '@/composables/index'
+const { minioUrl } = useGlobal()
+
+// props需要传入 图片宽高、文字、字号、是否需要背景边框
+defineProps({
+  imgWidth: {
+    type: String,
+    default: '25rpx'
+  },
+  imgHeight: {
+    type: String,
+    default: '25rpx'
+  },
+  text: {
+    type: String,
+    default: '餐饮'
+  },
+  fontSize: {
+    type: String,
+    default: '22rpx'
+  },
+  needBorder: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.tag-item-wrapper {
+  box-sizing: border-box;
+  margin: 0 10rpx 20rpx 0;
+  .tag-item-content {
+    padding: 4rpx 22rpx;
+    border-radius: 4rpx;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    &.need-border {
+      border: 1rpx solid#2374ff;
+      background-color: #e6efff;
+    }
+    .tag-item-text {
+      margin-left: 6rpx;
+      line-height: 30rpx;
+    }
+  }
+}
+</style>

src/components/README.md

@@ -0,0 +1,23 @@
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const showCustomPopup = ref(false)
+</script>
+
+<template>
+  <view class="index-container u-padding-20">
+    <HyCharge /><br />
+    <HyService /><br />
+    <HyShopItem /><br />
+    <HyStation /><br />
+    <HyTag needBorder />
+    <HyPopup v-model="showCustomPopup" width="650rpx" showClose>
+      <view style="height: 500rpx; background-color: #fff"></view>
+    </HyPopup>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>
+
+```

src/composables/index.ts

@@ -5,6 +5,8 @@ export const useGlobal = () => {
   const userStore = user()
   // 文件路径前缀
   const pathPre: string = import.meta.env.VITE_OSS_URL + import.meta.env.VITE_BARREL_URL
+  // Minio地址配置
+  const minioUrl: string = import.meta.env.VITE_MINIO_URL
   // 整数最大值
   const numberMax: number = 9999999999
   // 小数最大值
@@ -139,6 +141,7 @@ export const useGlobal = () => {
   }
   return {
     pathPre,
+    minioUrl,
     numberMax,
     decimalMax,
     textareaMax,

src/pages.json

@@ -4,7 +4,7 @@
       "path": "pages/index",
       "style": {
         "navigationBarTitleText": "首页",
-        "enablePullDownRefresh": false,
+        "enablePullDownRefresh": true,
         "navigationStyle": "custom"
       }
     },
@@ -12,7 +12,8 @@
       "path": "pages/service",
       "style": {
         "navigationBarTitleText": "服务区",
-        "enablePullDownRefresh": false
+        "enablePullDownRefresh": true,
+        "navigationStyle": "custom"
       }
     },
     {
@@ -29,24 +30,23 @@
       "root": "base",
       "pages": [
         {
-          "path": "login",
+          "path": "suggest/index",
           "style": {
-            "navigationBarTitleText": "登录",
-            "enablePullDownRefresh": false,
-            "navigationStyle": "custom"
+            "navigationBarTitleText": "投诉建议",
+            "enablePullDownRefresh": false
           }
         },
         {
-          "path": "register",
+          "path": "suggest/record",
           "style": {
-            "navigationBarTitleText": "注册",
+            "navigationBarTitleText": "反馈记录",
             "enablePullDownRefresh": true
           }
         },
         {
-          "path": "forget",
+          "path": "suggest/suggest",
           "style": {
-            "navigationBarTitleText": "忘记密码",
+            "navigationBarTitleText": "投诉建议",
             "enablePullDownRefresh": false
           }
         }

src/pages/index.vue

@@ -1,19 +1,417 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useGlobal } from '@/composables/index'
+const { minioUrl } = useGlobal()
 
-const showCustomPopup = ref(false)
+// 轮播图数据
+const list = ref([`${minioUrl}/home_banner.png`])
+
+const tabs = ref([{ name: '加油' }, { name: '充电' }])
+const tabActive = ref(0)
+
+// 金刚区列表
+const navList = ref([
+  { image: `${minioUrl}/icon_nav_01.png`, text: '我要加油', path: '', w: '53rpx', h: '53rpx' },
+  { image: `${minioUrl}/icon_nav_02.png`, text: '我要充电', path: '', w: '60rpx', h: '53rpx' },
+  { image: `${minioUrl}/icon_nav_03.png`, text: '我要吃饭', path: '', w: '57rpx', h: '57rpx' },
+  { image: `${minioUrl}/icon_nav_04.png`, text: '我要修车', path: '', w: '60rpx', h: '56rpx' },
+  { image: `${minioUrl}/icon_nav_05.png`, text: '投诉建议', path: '/base/suggest/index', w: '59rpx', h: '53rpx' },
+  { image: `${minioUrl}/icon_nav_06.png`, text: '一键救援', path: '', w: '76rpx', h: '76rpx' },
+  { image: `${minioUrl}/icon_nav_07.png`, text: '司机之家', path: '', w: '76rpx', h: '76rpx' },
+  { image: `${minioUrl}/icon_nav_08.png`, text: '母婴室', path: '', w: '76rpx', h: '76rpx' },
+  { image: `${minioUrl}/icon_nav_09.png`, text: '失物招领', path: '', w: '76rpx', h: '76rpx' },
+  { image: `${minioUrl}/icon_nav_10.png`, text: '招商加盟', path: '', w: '76rpx', h: '76rpx' }
+])
+
+// 金刚区点击事件
+const navClick = (item: { path: string }) => {
+  uni.navigateTo({
+    url: item.path
+  })
+}
 </script>
 
 <template>
-  <view class="index-container u-padding-20">
-    <HyCharge /><br />
-    <HyService /><br />
-    <HyShopItem /><br />
-    <HyStation /><br />
-    <HyPopup v-model="showCustomPopup" width="650rpx" showClose>
-      <view style="height: 500rpx; background-color: #fff"></view>
-    </HyPopup>
+  <view class="index-container">
+    <!-- 头部背景 -->
+    <view class="header-bg" :style="{ backgroundImage: 'url(' + minioUrl + '/index_bg.png)' }"></view>
+    <!-- header -->
+    <view class="index-header-wrapper">
+      <image :src="minioUrl + '/logo.png'" mode="scaleToFill" class="logo" />
+      <view class="header-right-wrap">
+        <view class="top-title-box">
+          <view class="title-text">海青服务区</view>
+          <image :src="minioUrl + '/icon_bottom_arrow.png'" mode="scaleToFill" />
+        </view>
+        <image class="star-img" :src="minioUrl + '/star.png'" mode="scaleToFill" />
+        <view class="bottom-box">
+          <!-- 天气 -->
+          <!-- 营业状态 -->
+          <view class="bottom-tag-item">正常营业</view>
+        </view>
+      </view>
+    </view>
+    <!-- 轮播图 -->
+    <u-swiper :height="306" :list="list"></u-swiper>
+    <!-- 金刚区 -->
+    <view class="index-nav-wrapper">
+      <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
+        <view class="nav-image">
+          <image :src="item.image" mode="scaleToFill" :style="{ width: item.w, height: item.h }" />
+        </view>
+        <view class="nav-item-text">{{ item.text }}</view>
+      </view>
+    </view>
+    <!-- 出行提示 -->
+    <view class="index-tips-wrapper">
+      <image class="tips-img" :src="minioUrl + '/icon_chuxing.png'" mode="scaleToFill" />
+      <view class="tips-line"></view>
+      <view class="tips-content">临时交通管制的通知</view>
+    </view>
+    <!-- 加油充电 -->
+    <view class="index-tabs-wrapper">
+      <u-tabs
+        v-model="tabActive"
+        :list="tabs"
+        active-color="#333"
+        :font-size="31"
+        :height="60"
+        :gutter="20"
+        :bar-style="{
+          width: '30rpx',
+          height: '6rpx',
+          backgroundImage: 'linear-gradient(90deg, #0f91f8 0%, #32a9c8 68%, #54c197 100%), linear-gradient(#6c85fc, #6c85fc)',
+          backgroundBlendMode: 'normal, normal',
+          borderRadius: '2rpx'
+        }"
+      ></u-tabs>
+      <template v-if="tabActive === 0">
+        <view class="tab-station-wrap">
+          <HyStation v-for="index in 4" :key="index" />
+        </view>
+      </template>
+      <template v-if="tabActive === 1">
+        <view class="tab-station-wrap">
+          <HyCharge />
+        </view>
+      </template>
+    </view>
+    <!-- 服务设施 -->
+    <HyCard title="服务设施" marginBottom="24">
+      <view class="index-service-wrapper">
+        <HyService v-for="index in 6" :key="index"></HyService>
+      </view>
+    </HyCard>
+    <!-- 人气优选商家 -->
+    <HyCard title="人气优选商家" rightText="更多商家" isShowRight marginBottom="24">
+      <view class="index-shop-wrapper">
+        <view class="shop-item" v-for="index in 5" :key="index">
+          <view class="img-wrap">
+            <image src="" mode="scaleToFill" />
+          </view>
+          <view class="item-text u-line-1">肯德基</view>
+        </view>
+      </view>
+    </HyCard>
+    <!-- 附近景点 -->
+    <HyCard title="附近景点" isBg :bgImg="minioUrl + '/index_spot_bg.png'">
+      <view class="index-spot-wrapper">
+        <view class="spot-item" v-for="index in 5" :key="index">
+          <view class="spot-img-wrap">
+            <image src="" mode="scaleToFill" />
+          </view>
+          <view class="spot-right-wrap">
+            <view class="right-header">
+              <view class="title">琅琊台风景区</view>
+              <view class="price">50元</view>
+            </view>
+            <view class="right-tag-box">
+              <view class="s-tag-green">自然风光</view>
+              <view class="s-tag-green">历史遗迹</view>
+              <view class="s-tag-green">休闲度假</view>
+            </view>
+            <view class="right-location-box">
+              <view class="left">
+                <image class="icon-address" :src="minioUrl + '/icon_address.png'" mode="scaleToFill" />
+                <view class="address-text-wrap">距您<text>30.5</text>公里，驾车预计<text>40</text>分钟</view>
+              </view>
+              <view class="right-go-icon">
+                <image :src="minioUrl + '/icon_go.png'" mode="scaleToFill" />
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </HyCard>
   </view>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.index-container {
+  width: 100%;
+  min-height: 100dvh;
+  position: relative;
+  box-sizing: border-box;
+  padding: 24rpx;
+  background-color: #f6f7fb;
+  .header-bg {
+    width: 100%;
+    height: 494rpx;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 100% 494rpx;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+  .index-header-wrapper {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding-left: 33rpx;
+    position: relative;
+    z-index: 2;
+    margin-bottom: 24rpx;
+    .logo {
+      width: 105rpx;
+      height: 92rpx;
+    }
+    .header-right-wrap {
+      display: flex;
+      flex-direction: column;
+      margin-left: 24rpx;
+      .top-title-box {
+        display: flex;
+        align-items: center;
+        .title-text {
+          font-size: 30rpx;
+          color: #3b3c3b;
+          font-weight: 600;
+        }
+        image {
+          width: 13rpx;
+          height: 10rpx;
+          margin-left: 8rpx;
+        }
+      }
+      .star-img {
+        width: 146rpx;
+        height: 27rpx;
+      }
+      .bottom-box {
+        display: flex;
+        align-items: center;
+        margin-top: 10rpx;
+        .bottom-tag-item {
+          font-size: 18rpx;
+          color: #fff;
+          box-sizing: border-box;
+          padding: 6rpx 12rpx;
+          background-color: #3bb0b9;
+          border-radius: 8rpx;
+        }
+      }
+    }
+  }
+  :deep(.u-swiper-wrap) {
+    position: relative;
+    z-index: 2;
+  }
+  .index-nav-wrapper {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-top: 40rpx;
+    .nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 20%;
+      .nav-image {
+        width: 76rpx;
+        height: 76rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 14rpx;
+      }
+      &:nth-child(-n + 5) {
+        margin-bottom: 50rpx;
+      }
+    }
+  }
+  .index-tips-wrapper {
+    width: 100%;
+    height: 84rpx;
+    border-radius: 14rpx;
+    background-color: #fff;
+    margin: 24rpx 0;
+    box-sizing: border-box;
+    padding: 0 30rpx;
+    display: flex;
+    align-items: center;
+    .tips-img {
+      width: 53rpx;
+      height: 48rpx;
+    }
+    .tips-line {
+      width: 4rpx;
+      height: 34rpx;
+      background-color: #3866ae;
+      margin: 0 23rpx 0 13rpx;
+    }
+    .tips-content {
+      font-size: 25rpx;
+      color: #333;
+      font-weight: 500;
+      line-height: 40rpx;
+    }
+  }
+  .index-tabs-wrapper {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 14rpx;
+    box-sizing: border-box;
+    padding: 22rpx;
+    margin-bottom: 24rpx;
+    .tab-station-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-top: 24rpx;
+    }
+  }
+  .index-service-wrapper {
+    margin-top: 24rpx;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    :deep(.service-item-wrapper) {
+      margin-bottom: 20rpx;
+      &:nth-child(5) {
+        margin-bottom: 0;
+      }
+      &:nth-child(6) {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .index-shop-wrapper {
+    margin-top: 26rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .shop-item {
+      display: flex;
+      flex-direction: column;
+      .img-wrap {
+        width: 104rpx;
+        height: 104rpx;
+        border-radius: 8rpx;
+        background-color: #f0f6ff;
+        image {
+          width: 104rpx;
+          height: 104rpx;
+          border-radius: 8rpx;
+        }
+      }
+      .item-text {
+        width: 100rpx;
+        text-align: center;
+        margin-top: 12rpx;
+      }
+    }
+  }
+  .index-spot-wrapper {
+    margin-top: 24rpx;
+    .spot-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 40rpx;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .spot-img-wrap {
+        width: 196rpx;
+        height: 151rpx;
+        background-color: #f6f7fb;
+        border-radius: 8rpx;
+        image {
+          width: 196rpx;
+          height: 151rpx;
+          border-radius: 8rpx;
+        }
+      }
+      .spot-right-wrap {
+        width: 100%;
+        flex: 1;
+        margin-left: 28rpx;
+        .right-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .title {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 600;
+          }
+          .price {
+            font-size: 21rpx;
+            color: #fc9b0d;
+          }
+        }
+        .right-tag-box {
+          display: flex;
+          align-items: center;
+          margin-top: 6rpx;
+          .s-tag-green {
+            width: 125rpx;
+            height: 32rpx;
+            background-color: #e2f3e4;
+            border-radius: 16rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 21rpx;
+            color: #239450;
+            margin-right: 20rpx;
+          }
+        }
+        .right-location-box {
+          margin-top: 50rpx;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .left {
+            display: flex;
+            align-items: center;
+            .icon-address {
+              width: 18rpx;
+              height: 22rpx;
+            }
+            .address-text-wrap {
+              font-size: 21rpx;
+              color: #c3c3c3;
+              margin-left: 8rpx;
+              text {
+                color: #fc9904;
+              }
+            }
+          }
+          .right-go-icon {
+            width: 40rpx;
+            height: 40rpx;
+            image {
+              width: 40rpx;
+              height: 40rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/my.vue

@@ -1,8 +1,97 @@
 <script setup lang="ts">
+import { useGlobal } from '@/composables/index'
+const { minioUrl } = useGlobal()
 </script>
 
 <template>
+  <view class="my-container" :style="{ backgroundImage: `url(${minioUrl + '/my_bg.png'})` }">
+    <view class="my-header-wrapper">
+      <image :src="minioUrl + '/icon_default_user.png'" mode="scaleToFill" />
+      <text class="user-name-text">用户15615550287</text>
+    </view>
+    <HyCard>
+      <view class="my-list-item">
+        <view class="list-left">
+          <image :src="minioUrl + '/icon_feed.png'" mode="scaleToFill" style="width: 42rpx; height: 42rpx" />
+          <text class="text">我的反馈</text>
+        </view>
+        <view class="list-right">
+          <image :src="minioUrl + '/icon_right.png'" mode="scaleToFill" />
+        </view>
+      </view>
+      <view class="my-list-item">
+        <view class="list-left">
+          <image :src="minioUrl + '/icon_phone.png'" mode="scaleToFill" style="width: 42rpx; height: 42rpx" />
+          <text class="text">客服热线:0532-88886666</text>
+        </view>
+      </view>
+      <view class="my-list-item">
+        <view class="list-left">
+          <image :src="minioUrl + '/icon_time.png'" mode="scaleToFill" style="width: 42rpx; height: 42rpx" />
+          <text class="text">咨询时间:09:00-22:00</text>
+        </view>
+      </view>
+    </HyCard>
+  </view>
 </template>
 
 <style lang="scss" scoped>
+page {
+  background-color: #edf1f5;
+}
+.my-container {
+  width: 100%;
+  min-height: 900rpx;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-sizing: border-box;
+  padding: 100rpx 28rpx 0 28rpx;
+  .my-header-wrapper {
+    display: flex;
+    align-items: center;
+    margin-bottom: 60rpx;
+    image {
+      width: 139rpx;
+      height: 139rpx;
+      margin-right: 36rpx;
+    }
+    .user-name-text {
+      font-size: 35rpx;
+      color: #333;
+      font-weight: 500;
+    }
+  }
+  :deep(.hy-card-container) {
+    padding-bottom: 0;
+  }
+  .my-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 31rpx 7rpx 31rpx 7rpx;
+    border-bottom: 1rpx solid #ebebeb;
+    &:first-child {
+      padding-top: 7rpx;
+    }
+    &:last-child {
+      border-bottom: none;
+    }
+    .list-left {
+      display: flex;
+      align-items: center;
+      .text {
+        font-size: 28rpx;
+        color: #333;
+        margin-left: 28rpx;
+      }
+    }
+    .list-right {
+      image {
+        width: 11rpx;
+        height: 19rpx;
+      }
+    }
+  }
+}
 </style>

src/pages/service.vue

@@ -1,7 +1,128 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useGlobal } from '@/composables/index'
+
+const { minioUrl } = useGlobal()
+</script>
 
 <template>
-  <view></view>
+  <view class="service-container">
+    <HyCard v-for="item in 5" :key="item" class="service-content-wrapper" marginBottom="36">
+      <view class="service-item">
+        <view class="item-header-wrap">
+          <view class="header-img-box">
+            <image src="" mode="scaleToFill" />
+          </view>
+          <view class="header-right-box">
+            <view class="u-line-1 title">黄岛服务区(沈海高速沈阳方向)</view>
+            <view class="rate-content">
+              <uni-rate :value="5" activeColor="#ff5702"></uni-rate>
+              <text class="rate-text">五星级服务区</text>
+            </view>
+            <view class="distance">55.6KM</view>
+            <view class="address-wrap">
+              <view class="block">
+                <view class="t">海口</view>
+                <image class="icon-arrive" :src="minioUrl + '/icon_arrive.png'" mode="scaleToFill" />
+                <view class="t">沈阳</view>
+              </view>
+              <view class="icon-go">
+                <image :src="minioUrl + '/icon_blue_go.png'" mode="scaleToFill" />
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="item-bottom-wrap">
+          <HyTag needBorder v-for="index in 8" :key="index" />
+        </view>
+      </view>
+    </HyCard>
+  </view>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.service-container {
+  width: 100%;
+  min-height: 10dvh;
+  padding: 24rpx 24rpx 0 24rpx;
+  background-color: #edf1f5;
+  .service-item {
+    .item-header-wrap {
+      display: flex;
+      align-items: center;
+      .header-img-box {
+        width: 174rpx;
+        height: 174rpx;
+        position: relative;
+        background-color: aliceblue;
+        image {
+          width: 174rpx;
+          height: 174rpx;
+        }
+      }
+      .header-right-box {
+        flex: 1;
+        margin-left: 20rpx;
+        .title {
+          width: 464rpx;
+          font-size: 31rpx;
+          color: #333;
+          font-weight: 600;
+          line-height: 50rpx;
+        }
+        .rate-content {
+          display: flex;
+          align-items: center;
+          .rate-text {
+            font-size: 22rpx;
+            color: #ff5702;
+            margin-left: 14rpx;
+          }
+        }
+        .distance {
+          font-size: 22rpx;
+          color: #999;
+          line-height: 42rpx;
+        }
+        .address-wrap {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .block {
+            min-width: 174rpx;
+            box-sizing: border-box;
+            padding: 10rpx 24rpx;
+            background-color: #edf1f5;
+            border-radius: 21rpx;
+            display: flex;
+            align-items: center;
+            .icon-arrive {
+              width: 31rpx;
+              height: 13rpx;
+              margin: 0 8rpx;
+            }
+            .t {
+              font-size: 22rpx;
+              color: #333;
+            }
+          }
+          .icon-go {
+            width: 60rpx;
+            height: 60rpx;
+            image {
+              width: 60rpx;
+              height: 60rpx;
+            }
+          }
+        }
+      }
+    }
+    .item-bottom-wrap {
+      width: 550rpx;
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 40rpx;
+    }
+  }
+}
+</style>