wxapp_shuibei/pages/users/my_merchant/index.vue

<template>
  <view class="container">
    <!-- 商家信息卡片 -->
    <view class="merchant-card">
      <view class="merchant-info">
        <image class="merchant-logo" :src="merchantInfo.merchantLogo" mode="aspectFill"></image>
        <view class="merchant-detail">
          <view class="merchant-name">{{merchantInfo.merchantName}}</view>

        </view>
        <view class="share-btn" @click="to_share">
          <image src="@/static/images/share.png" mode="aspectFit"></image>
          <text>分享店铺</text>
        </view>
      </view>
      <view class="merchant-phone">
        <image src="@/static/images/phone.png" mode="aspectFit"></image>
        <text>{{ merchantInfo.merchantPhone }}</text>
      </view>
      <!-- 商家描述 -->
      <view class="merchant-desc">
        <text>{{ merchantInfo.merchantDescribe }}</text>
      </view>
    </view>

    <!-- 联系商家部分 -->
    <view class="contact-section">
      <view class="section-title">联系商家</view>

      <!-- 二维码区域 -->
      <view class="qrcode-container">
        <image class="qrcode-img" :src="merchantInfo.merchantCodeUrl" mode="aspectFit"></image>
        <view class="qrcode-tip">扫码添加微信好友</view>
      </view>

      <!-- 客服按钮 -->
      <button class="service-btn" @click="onContactService">在线客服</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { getSbmerchantInfo } from "@/api/merchant.js";
import { toLogin } from "@/libs/login.js";
import { useAppStore } from "@/stores/app.js";
const appStore = useAppStore();

const merchantInfo = ref('')
const isLogin = appStore.isLogin;

onLoad((options) => {
  getSbmerchantInfoFn();
});

const getSbmerchantInfoFn = () => {
  let data = {
    merchantId:2
  }
  getSbmerchantInfo(data).then((res) => {
        console.log(res);
    merchantInfo.value = res.data;
  })

}
// 分享功能
const onShareAppMessage = () => {
  return {
    title: '水贝珠宝旗舰店',
    path: '/pages/merchant/detail?id=123'
  };
};

// 联系客服
const onContactService = () => {
  // 实际项目中可调用uni.getCustomerServiceManager() API
  uni.showToast({
    title: '正在连接客服...',
    icon: 'loading'
  });
};

// 分享店铺
const to_share = () => {
  if (isLogin) {
    uni.navigateTo({
      url: '/pages/users/share/index?merchantInfo='+encodeURIComponent(JSON.stringify(merchantInfo.value))
    });
  } else {
    toLogin();
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 头部样式 */
.header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #fff;
  z-index: 100;
}

.back-icon, .more-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;

  image {
    width: 100%;
    height: 100%;
  }
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000;
}

/* 商家卡片 */
.merchant-card {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 24rpx;
  position: relative;

  .merchant-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .merchant-logo {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 30rpx;
    }

    .merchant-detail {
      flex: 1;

      .merchant-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }


    }

    .share-btn {
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      display: flex;
      align-items: center;
      color: #666;
      font-size: 28rpx;

      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
      }
    }
  }
  .merchant-phone {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 28rpx;
    margin-bottom: 20rpx;

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }
  }
  .merchant-desc {
    width: 100%;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #f9f9f9;
    border-radius: 20rpx;
    border: 2rpx solid #eee;
    margin-bottom: 20rpx;
  }
}

/* 联系商家部分 */
.contact-section {
  margin-top: 30rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 24rpx;

  .section-title {
    font-size: 36rx;
    font-weight: bold;
    color: #333;
    margin-bottom: 40rpx;
  }

  .qrcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;

    .qrcode-img {
      width: 360rpx;
      height: 360rpx;
    }

    .qrcode-tip {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #666;
    }
  }

  .service-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background-color: #fff;
    color: #333;
    font-size: 32rpx;
    border: 2rpx solid #ddd;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    &:after {
      border: none;
    }
  }
}
</style>