chelvc-custom/src/pages/merchant/mine/personalInfo.vue

<template>
  <view class="personalInfo">
    <!-- 账号信息 -->
    <view>
      <text class="title">账号信息</text>
      <view class="personal">
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">店铺LOGO</view>
          <view class="fl-flex">
            <image :src="list.merchant.logo" mode="scaleToFill" v-if="list.merchant.logo" />
            <image src="/static/QR57a.jpg" mode="scaleToFill" v-else />
            <u-icon name="arrow-right" color="#acaeb6" size="16"></u-icon>
          </view>
        </view>
        <view
          class="fl-flex fl-justify-between fl-align-center"
          @click="handleEditMerchant('店铺名称', list.storeName)"
        >
          <view class="item-left">店铺名称</view>
          <view class="fl-flex">
            <view class="item-right">{{ list.storeName || '--' }}</view>
            <u-icon name="arrow-right" color="#acaeb6" size="16"></u-icon>
          </view>
        </view>
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">登录账号</view>
          <view class="fl-flex">
            <view class="item-right u-m-r-10">{{ mobileNumber || '--' }}</view>
            <!-- <u-icon name="arrow-right" color="#acaeb6" size="15"></u-icon> -->
          </view>
        </view>
      </view>
    </view>
    <!-- 联系方式 -->
    <view>
      <text class="title">联系方式</text>
      <view class="personal">
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">负责人</view>
          <view class="item-right">{{ list.merchant.liaison || '--' }}</view>
        </view>
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">联系电话</view>
          <view class="item-right">{{ list.mobileNumber || '--' }}</view>
        </view>
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">电子邮箱</view>
          <view class="item-right">{{ list.email || '--' }}</view>
        </view>
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">预约电话</view>
          <view class="item-right">{{ list.mobileNumber || '--' }}</view>
        </view>
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">所在地区</view>
          <view class="item-right">{{ list.storeAddress || '--' }}</view>
        </view>
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">店铺地址</view>
          <view class="item-right">{{ list.storeAddressDetail || '--' }}</view>
        </view>
      </view>
    </view>
    <!-- 店铺信息 -->
    <view>
      <text class="title">店铺信息</text>
      <view class="personal">
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">店铺名称</view>
          <view class="item-right">{{ list.storeName || '--' }}</view>
        </view>
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">主营/辅营</view>
          <view class="item-right">养车/用车</view>
        </view>
        <view class="fl-flex fl-justify-between fl-align-center">
          <view class="item-left">开店日期</view>
          <view class="item-right">2023-10-23</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { phoneEncryption } from '@/utils/tools';

export default {
  data() {
    return {
      list: {},
      mobileNumber: '',
    };
  },
  onShow() {
    this.list = this.$store.state.data.merchantInfo;
    this.mobileNumber = phoneEncryption(this.list.mobileNumber);
  },
  methods: {
    handleEditMerchant(name, value) {
      uni.navigateTo({
        url: `pages/merchant/mine/personalInfoEdit?name=${name}&value=${value}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.personalInfo {
  min-height: 100%;
  margin: 20rpx 30rpx;
  .title {
    color: #666666;
    margin: 20rpx;
  }
  .personal {
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 30rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;

    .item-left {
      color: #333;
      font-size: 30rpx;
      font-weight: 600;
      margin: 20rpx 0;
    }

    .item-right {
      color: #acaeb6;
      font-size: 28rpx;
    }

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
  }
}
</style>