mrr.sj.front/pages/home/home.vue

<template>
  <view class="homePage">
    <view class="home-navbar">
      <!-- <custom-navbar
        title=""
        :show-back="false"
        title-color="#333333"
        :backgroundColor="backgroundColor"
      ></custom-navbar> -->
      <view class="home_info">
        <view class="home_info_left">
          <view class="home_info_left_text" v-if="userInfo.id_type == 1">
            <view class="nameText line-1">{{ nameText }}</view>
            <view class="set_btn" @click="goAcceptSet">营业设置</view>
          </view>
          <view class="home_info_left_text" v-else-if="userInfo.id_type == 2">
            <view class="nameText line-1">{{ nameText }}</view>
            <view class="set_btn" @click="goAcceptSet">营业设置</view>
          </view>
          <view class="home_info_left_text" v-else>{{ nameText }}</view>
          <view class="home_info_left_tip">{{ tipText }}</view>
        </view>
        <view class="home_info_right">
         
          <image
            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/616767e1-e935-4c9c-a8e1-a099b6db4084.png"
            class="home_info_right_img"
          ></image>
        </view>
      </view>
      <filters
        :isLogin="isLogin"
        :selfState="userInfo.self_state"
        @secondClassLength="(e) => (secondLength = e)"
      ></filters>
    </view>
	<upload-app-vue></upload-app-vue>
  </view>
</template>

<script>
import projectTabs from "./components/project-tabs.vue";
import request from "@/utils/request";

import filters from "./components/filters.vue";
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
export default {
  data() {
    return {
      secondLength: 2, //2级菜单所占排数
      name: "",
      statusBarHeight: 0,
      listQuery: {},
      latitude: "",
      longitude: getApp().globalData.longitude,
      latitude: getApp().globalData.latitude,
      servers_region: getApp().globalData.servers_region,
      address: getApp().globalData.address,
      isLogin: false,
      backgroundColor: "transparent",
      syrId: null,
      userInfo: {},
      isShowCheckShop: false,
      sjInfo: {},
      sjList: [],
    };
  },
  components: {
    filters,
    projectTabs,
    CustomNavbar,
  },
  onShow() {
    this.isLogin = uni.getStorageSync("accessToken") ? true : false;
    if (this.isLogin) {
      this.getUserInfo();
    }
  },
  computed: {
    shopText() {
      if (!this.isLogin) return "请选择门店";
      if (this.sjInfo && this.sjInfo.id) return this.sjInfo.name;
      return "全部门店";
    },
    tipText() {
      if (!this.isLogin) return "登录后可体验更多服务";
      if (this.userInfo.id_type == 1) return "欢迎登陆美融融商家！";

      return "入驻后可体验更多服务";
    },
    nameText() {
      if (!this.isLogin) return "欢迎登录美融融商家";
      if (this.userInfo.id_type == 1){
		  return this.userInfo.name || this.userInfo.nick_name;
	  }
      return "欢迎使用美融融商家";
    },
    // 判断是否账号已停止使用
    isAccountDisabled() {
      return this.userInfo?.is_ok === 2;
    },
  },
  onShow() {
    this.isLogin = uni.getStorageSync("accessToken") ? true : false;
    if (this.isLogin) {
      this.getUserInfo();
    }
  },
  onLoad() {},

  methods: {
    // 显示账号停用提示
    showStopUseModal() {
      uni.showModal({
        title: "提示",
        content:
          "您的账号已停止使用。若有疑问或恢复需求，请尽快联系平台工作人员核实处理。",
        showCancel: false,
        confirmText: "我知道了",
      });
    },

    goAcceptSet() {
      // 添加访问检查
      if (this.isAccountDisabled) {
        this.showStopUseModal();
        return;
      }
      uni.navigateTo({
        url: "/pages/shop/set",
      });
    },
    getUserInfo() {
      request.post("/sj/user/getUser").then((result) => {
        this.userInfo = result.data;
        //存储用户id
        uni.setStorageSync("syrId", result.data.id);
        this.syrId = result.data.id;
      });
    },
  },
};
</script>

<style lang="scss">
page {
  // background: linear-gradient(to bottom, #fafafa, #ffffff);
  background: #f5f5f5;
}

.homePage {
  background-image: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bf0dd63c-4205-4af5-a29f-8a9b4ee4188b.png");
  background-position: 0 0;
  background-size: 100%;
  background-repeat: no-repeat;

  .home-navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .home_info {
      height: 238rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0rpx 0rpx 0 30rpx;
      .home_info_left {
        padding-bottom: 30rpx;
        .home_info_left_text {
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
          text-align: left;
          font-style: normal;
          display: flex;
          align-items: center;
          .set_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 108rpx;
            height: 34rpx;
            background: linear-gradient(180deg, #eb6248 0%, #ea4e45 100%);
            border-radius: 20rpx;
            font-family:
              PingFangSC,
              PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #ffffff;
            line-height: 28rpx;
          }
        }
        .home_info_left_tip {
          margin-top: 5rpx;
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #979797;
          line-height: 37rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .home_info_right {
        padding-right: 30rpx;
        height: 181rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .change_shop {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10rpx;
          max-width: 270rpx;
          height: 64rpx;
          font-size: 28rpx;
          background: rgba(255, 255, 255, 0.24);
          border-radius: 33rpx;
          border: 1rpx solid #bab8bf;
          padding: 16rpx 13rpx 16rpx 20rpx;
          .change_shop_logo {
            width: 34rpx;
            height: 32rpx;
            flex-shrink: 0;
          }
          .change_down_logo {
            flex-shrink: 0;
            width: 16rpx;
            height: 10rpx;
          }
          .line-1 {
            font-size: 28rpx;
          }
        }
        .home_info_right_img {
          width: 367rpx;
          height: 143rpx;
        }
      }
    }
  }
}

//搜索组件样式渗透
::v-deep .uni-input-placeholder {
  font-weight: 400;
  font-size: 28rpx;
  color: #cccccc;
  line-height: 34rpx;
  text-align: left;
  font-style: normal;
}

::v-deep .uv-icon__img {
  width: 34rpx !important;
  height: 34rpx !important;
}

//列表样式
.list-item {
  align-items: flex-start;
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;

  .list-item-left {
    .list-item-left-img {
      width: 172rpx;
      height: 172rpx;
      margin-right: 30rpx;
    }
  }

  .list-item-right {
    height: 172rpx;
    align-content: space-between;
    flex-wrap: wrap;
    display: flex;
    flex: 1;
    padding-bottom: 30rpx;
    border: none;

    .list-item-right-left {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
    }

    .list-item-right-right {
      font-weight: 500;
      font-size: 34rpx;
      color: #e8101e;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;

      .list-item-right-right-img {
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 94rpx;
        height: 44rpx;
        background: linear-gradient(122deg, #fe78b3 0%, #e8101e 100%);
        border-radius: 22rpx;
      }
    }
  }
}

.list-container {
  padding: 0rpx !important;
}

.list-scroll {
  margin-top: 0rpx !important;
}
.line-1 {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号来代表被裁剪的文本 */
}
.nameText {
  max-width: 233rpx;
  margin-right: 12rpx;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}
.change_shop {
  position: relative;
  .select_box {
    box-sizing: border-box;
    position: absolute;
    top: 70rpx;
    right: 0;
    width: 471rpx;
    background-color: #fff;
    overflow-y: auto;
    z-index: 10000;
    border-radius: 32rpx;
    padding: 30rpx 24rpx 20rpx 24rpx; /* 调整上下内边距 */
    max-height: 60vh;

    /* 添加滚动条样式 */
    &::-webkit-scrollbar {
      width: 8rpx;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4rpx;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4rpx;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }

    .select_item {
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #f1f1f1;
      display: flex;
      gap: 10rpx;
      align-items: center;

      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }

      .line-1 {
        max-width: 311rpx;
        flex: 1;
      }
      .tag {
        width: 102rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 10rpx;
        font-size: 26rpx;
        flex-shrink: 0;
      }
      .red {
        background-color: #fe5855;
      }
      .gray {
        background: #999999;
      }
    }
  }
}
</style>