sailun-tbr-web/pages/me/index.vue

<template>
  <view style="background-color: #ffffff; height: 100%" class="u-skeleton">
    <view class="u-page status_bar">
      <view class="head">
        <view class="status_bar">
          <!-- 这里是状态栏 -->
        </view>
        <view class="u-flex u-row-between" style="padding: 30rpx 40rpx">
          <view class="u-flex">
            <view class="u-skeleton-circle">
              <u-image
                width="130rpx"
                height="130rpx"
                :src="userInfo.storeImageUrl"
                :lazy-load="true"
                shape="circle"
              >
                <view
                  slot="error"
                  style="font-size: 24rpx"
                  :fade="true"
                  duration="450"
                  >加载失败
                </view>
              </u-image>
            </view>
            <view class="u-margin-left-10 u-skeleton-fillet">
              <view
                style="color: #fff; font-size: 40rpx"
                class="u-margin-bottom-20"
              >
                <text class="more_text">{{ userInfo.storeName }}</text>
              </view>
              <view
                style="
                  border: 1rpx solid #e3e3e3;
                  border-radius: 30rpx;
                  font-size: 24rpx;
                  color: #fff;
                  padding: 2rpx 20rpx;
                  text-align: center;
                "
              >
                {{ userInfo.province }}{{ userInfo.city }}{{ userInfo.district
                }}{{ userInfo.addressInfo }}
              </view>
            </view>
          </view>
          <view class="u-skeleton-fillet" @click="showQr = !showQr">
            <!-- <u-icon name="qr" size="80rpx" custom-prefix="van-icon" color="#fff"></u-icon> -->
            <u-image
              width="60rpx"
              height="60rpx"
              src="../../static/sailun/qrcode.png"
              :lazy-load="true"
            >
            </u-image>
          </view>
        </view>
        <view class="u-flex u-row-around u-m-t-20">
          <view class="u-text-center u-skeleton-fillet">
            <view style="font-size: 34rpx; color: #ffffff">
              {{ userInfo.contactName }}
            </view>
            <view style="color: #b3daff; opacity: 0.9"> 联系人 </view>
          </view>
          <view class="u-text-center u-skeleton-fillet">
            <view style="font-size: 34rpx; color: #ffffff">
              {{ userInfo.district }}
            </view>
            <view style="color: #b3daff; opacity: 0.9"> 区域 </view>
          </view>
        </view>
      </view>
      <view style="position: relative; top: -110rpx; margin-bottom: 100rpx">
        <u-card
          padding="20"
          box-shadow="0rpx 0rpx 24rpx 0rpx rgba(101, 176, 249, 0.41)"
          border-radius="20"
          :show-foot="false"
          :border="false"
          class="u-skeleton-fillet"
        >
          <view slot="head" class="u-flex u-row-between u-col-bottom">
            <view style="font-size: 34rpx"> 结算中心 </view>
            <view
              class="u-col-bottom"
              @click="insettlement"
              style="color: #4b4b4b; font-size: 24rpx"
            >
              查看全部
            </view>
          </view>
          <view slot="body">
            <view class="u-flex u-row-around">
              <view class="u-text-center">
                <view style="color: #0095ff; font-size: 30rpx">
                  {{ userInfo.usableMoney | numberFormat }}
                </view>
                <view style="color: #333333"> 我的奖励 </view>
              </view>
              <view class="u-text-center">
                <view style="color: #0095ff; font-size: 30rpx">
                  {{ userInfo.blockMoney | numberFormat }}
                </view>
                <view style="color: #333333"> 冻结奖励 </view>
              </view>
              <view class="u-text-center">
                <view style="color: #0095ff; font-size: 30rpx">
                  {{ userInfo.allBlockMoney | numberFormat }}
                </view>
                <view style="color: #333333"> 待核销 </view>
              </view>
              <view class="u-text-center">
                <view style="color: #0095ff; font-size: 30rpx">
                  {{ userInfo.storeTotalIntegral | numberFormat }}
                </view>
                <view style="color: #333333"> 可用积分 </view>
              </view>
            </view>
          </view>
        </u-card>
        <u-card
          padding="20"
          box-shadow="0rpx 0rpx 24rpx 0rpx rgba(101, 176, 249, 0.41)"
          border-radius="20"
          :show-foot="false"
          :border="false"
          class="u-skeleton-fillet"
        >
          <view slot="head" class="u-flex u-row-between u-col-bottom">
            <view style="font-size: 34rpx"> 我的服务 </view>
          </view>
          <view slot="body">
            <view
              class="u-flex u-row-around u-flex-wrap u-col-between"
              style="height: 300rpx; font-size: 24rpx"
            >
              <view
                class="u-flex u-row-centter"
                style="flex-direction: column; width: 25%"
                @click="inPage(0)"
              >
                <view>
                  <u-image
                    width="80rpx"
                    height="80rpx"
                    src="../../static/sailun/instock.png"
                    :lazy-load="true"
                    shape="circle"
                  >
                  </u-image>
                </view>
                <view style="color: #000000" class="u-m-t-10"> 入库明细 </view>
              </view>
              <view
                class="u-flex u-row-centter"
                style="flex-direction: column; width: 25%"
                @click="inPage(1)"
              >
                <view>
                  <u-image
                    width="80rpx"
                    height="80rpx"
                    src="../../static/sailun/outstock.png"
                    :lazy-load="true"
                    shape="circle"
                  >
                  </u-image>
                </view>
                <view style="color: #000000" class="u-m-t-10"> 出库明细 </view>
              </view>
              <view
                class="u-flex u-row-centter"
                style="flex-direction: column; width: 25%"
                @click="inPage(2)"
              >
                <view>
                  <u-image
                    width="80rpx"
                    height="80rpx"
                    src="../../static/sailun/reward.png"
                    :lazy-load="true"
                    shape="circle"
                  >
                  </u-image>
                </view>
                <view style="color: #000000" class="u-m-t-10"> 奖励明细 </view>
              </view>
              <view
                class="u-flex u-row-centter"
                style="flex-direction: column; width: 25%"
                @click="inPage(3)"
              >
                <view>
                  <u-image
                    width="80rpx"
                    height="80rpx"
                    src="../../static/sailun/task.png"
                    :lazy-load="true"
                    shape="circle"
                  >
                  </u-image>
                </view>
                <view style="color: #000000" class="u-m-t-10"> 任务统计 </view>
              </view>
              <view
                class="u-flex u-row-centter"
                style="flex-direction: column; width: 25%"
                @click="inPage(4)"
              >
                <view>
                  <u-image
                    width="80rpx"
                    height="80rpx"
                    src="../../static/sailun/tirenum.png"
                    :lazy-load="true"
                    shape="circle"
                  >
                  </u-image>
                </view>
                <view style="color: #000000" class="u-m-t-10"> 胎号查询 </view>
              </view>

              <view
                class="u-flex u-row-centter"
                style="flex-direction: column; width: 25%"
                @click="inPage(5)"
              >
                <view>
                  <u-image
                    width="80rpx"
                    height="80rpx"
                    src="../../static/sailun/me-order.png"
                    :lazy-load="true"
                    shape="circle"
                  >
                  </u-image>
                </view>
                <view style="color: #000000" class="u-m-t-10"> 门店订单 </view>
              </view>
              <view
                class="u-flex u-row-centter"
                style="flex-direction: column; width: 25%"
                @click="inPage(6)"
              >
                <view>
                  <u-image
                    width="80rpx"
                    height="80rpx"
                    src="../../static/sailun/coupon.png"
                    :lazy-load="true"
                    shape="circle"
                  >
                  </u-image>
                </view>
                <view style="color: #000000" class="u-m-t-10">
                  我的优惠券
                </view>
              </view>
              <view
                class="u-flex u-row-centter"
                style="flex-direction: column; width: 25%"
                @click="inPage(7)"
              >
                <view>
                  <u-image
                    width="80rpx"
                    height="80rpx"
                    src="../../static/sailun/supplier.png"
                    :lazy-load="true"
                    shape="circle"
                  >
                  </u-image>
                </view>
                <view style="color: #000000" class="u-m-t-10">
                  我的供应商
                </view>
              </view>
            </view>
          </view>
        </u-card>
        <u-cell-group>
          <u-cell-item title="核销记录" @click="inPage(8)">
            <u-icon
              slot="icon"
              size="42"
              name="balance-o"
              custom-prefix="van-icon"
            ></u-icon>
          </u-cell-item>
          <u-cell-item title="兑换记录" @click="inPage(9)">
            <u-icon
              slot="icon"
              size="42"
              name="balance-list-o"
              custom-prefix="van-icon"
            ></u-icon>
          </u-cell-item>
          <u-cell-item title="经销商库存" @click="inPage(10)">
            <u-icon
              slot="icon"
              size="42"
              name="points"
              custom-prefix="van-icon"
            ></u-icon>
          </u-cell-item>
          <u-cell-item title="设置" @click="inPage(11)">
            <u-icon
              slot="icon"
              size="42"
              name="setting-o"
              custom-prefix="van-icon"
            ></u-icon>
          </u-cell-item>
        </u-cell-group>
      </view>
    </view>
    <u-modal
      v-model="showQr"
      :show-title="false"
      :mask-close-able="true"
      :show-confirm-button="false"
      width="440"
    >
      <view class="slot-content u-p-40 u-flex u-row-center">
        <u-image
          width="360rpx"
          height="360rpx"
          :src="userInfo.qrbarcodeSrc"
        ></u-image>
      </view>
    </u-modal>
    <u-skeleton :loading="loading" :animation="true"></u-skeleton>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { request } from "../../common/request/request";
require("promise.prototype.finally").shim();
export default {
  data() {
    return {
      userInfo: "",
      showQr: false,
      loading: true, // 是否显示骨架屏组件
    };
  },
  filters: {
    numberFormat(value) {
      let unit = "";
      if (value) {
        var k = 10000,
          sizes = ["", "万", "亿", "万亿"],
          i;
        if (value < k) {
          value = value;
        } else {
          i = Math.floor(Math.log(value) / Math.log(k));
          value = (value / Math.pow(k, i)).toFixed(2);
          unit = sizes[i];
        }
        return value + unit;
      } else {
        return 0;
      }
    },
  },
  computed: {
    ...mapState(["undataStore"]),
  },
  created() {
    this.getMyinfo();
  },
  onShow() {
    if (this.undataStore) {
      this.getMyinfo();
    }
  },
  methods: {
    ...mapMutations(["outStore"]),
    getMyinfo() {
      request({
        url: "/myapp/selectStore",
        method: "post",
        data: {
          storeId: this.$store.state.storeInfo.storeId,
        },
      })
        .then((res) => {
          this.userInfo = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
          this.outStore();
          uni.hideLoading();
        });
    },
    inPage(index) {
      switch (index) {
        case 0: {
          this.$u.route({
            url: "pages/me/Warehousing-details/index",
          });
          break;
        }
        case 1: {
          this.$u.route({
            url: "pages/me/Delivery-details/index",
          });
          break;
        }
        case 2: {
          this.$u.route({
            url: "pages/me/Reward-details/index",
          });
          break;
        }
        case 3: {
          this.$u.route({
            url: "pages/me/Statistical-task/index",
          });
          break;
        }
        case 4: {
          this.$u.route({
            url: "pages/me/scancodequery/result",
          });
          break;
        }
        case 5: {
          this.$u.toast("门店订单暂不开放");
          // this.$u.route({
          // 	url: 'pages/me/my-order/my-order',
          // })
          break;
        }
        case 6: {
          this.$u.toast("我的优惠券暂不开放");
          // this.$u.route({
          // 	url: 'pages/me/coupon',
          // })
          break;
        }
        case 7: {
          this.$u.route({
            url: "pages/me/suppliers",
          });
          break;
        }
        case 8: {
          this.$u.route({
            url: "pages/me/Write-off-management/index",
          });
          break;
        }
        case 9: {
          this.$u.toast("兑换记录暂不开放");
          break;
        }
        case 10: {
          this.$u.route({
            url: "pages/me/agent-stock/agent-stock",
          });
          break;
        }
        case 11: {
          this.$u.route({
            url: "pages/me/setting/setting",
          });
          break;
        }
      }
    },
    // 查看结算
    insettlement() {
      this.$u.route({
        url: "pages/me/Settlement-center/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.status_bar {
  height: var(--status-bar-height);
}

.head {
  width: 750rpx;
  min-height: 460rpx;
  background-image: url(../../static/sailun/mebg.png);
  background-size: 100% 100%;
}

.more_text {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*设置显示行数，此处为2行*/
  -webkit-box-orient: vertical;
  width: 450rpx;
}
</style>