wxapp_shuibei/pages/users/my_merchant/index.vue

<template>
  <view class="container">
    <!-- 商家信息卡片 -->
    <view class="store-card">
      <view class="info-top">
        <view class="left">
          <image class="storeImg" :src="merchantInfo.merchantLogo" mode="aspectFit"></image>
        </view>
        <view class="center">
          <view class="name">{{merchantInfo.merchantName}}</view>
        </view>
        <view class="right" @click="to_share">
          <image class="share" src="@/static/images/share.png" mode="widthFix"></image>
          <view>分享</view>
        </view>
      </view>
      <view class="desc">{{merchantInfo.merchantDescribe}}</view>
      <view class="tel" @click="makePhoneCall">
        <image class="phone mr20" src="@/static/images/phone2.png" mode="widthFix"></image>
        <text>联系电话：{{merchantInfo.merchantPhone}}</text>
        <image class="phone fr" src="@/static/images/phone.png" mode="widthFix"></image>
      </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 { getQrcode } from "@/api/user.js"
import { toLogin } from "@/libs/login.js";
import { useAppStore } from "@/stores/app.js";
import { HTTP_REQUEST_URL_IMG } from "@/config/app";
const appStore = useAppStore();

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

onLoad(() => {
  if(appStore.merchantId || appStore.userInfo?.merchant?.id){
    let merchantId = appStore.merchantId || appStore.userInfo?.merchant?.id;
    getSbmerchantInfoFn(merchantId);
  }
});

const getSbmerchantInfoFn = async (merchantId) => {
  let data = {
    merchantId
  }
  const res = await getSbmerchantInfo(data);
  merchantInfo.value = res.data;
  if(!merchantInfo.value.merchantCodeUrl){
    const response = await getQrcode({id:merchantId})
    merchantInfo.value.merchantCodeUrl = response.message;
  }

}
// 分享功能
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();
  }
}

// 在methods部分添加：
const makePhoneCall = () => {
  if (!merchantInfo.value.merchantPhone) {
    uni.showToast({
      title: '暂无联系电话',
      icon: 'none'
    });
    return;
  }

  // 显示确认弹窗
  uni.showModal({
    title: '拨打电话',
    content: `是否拨打 ${merchantInfo.value.merchantPhone}？`,
    success: (res) => {
      if (res.confirm) {
        // 调用拨打电话API
        uni.makePhoneCall({
          phoneNumber: merchantInfo.value.merchantPhone,
          success: () => {
            console.log('拨打电话成功');
          },
          fail: (err) => {
            console.log('拨打电话失败：', err);
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            });
          }
        });
      }
    }
  });
};
</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;
}

/* 商家卡片 */
.store-card{
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 10rpx;

  .info-top{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #F9F7F0;
    border-radius: 16rpx;
    padding: 20rpx 0;
    .left{
      width: 140rpx;
      .storeImg{
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
    }
    .center{
      width: 50%;
      .name{
        font-size: 32rpx;
        color: #333;line-height: 60rpx;
      }

    }
    .right{
      width: 10%;
      font-size: 20rpx;
      color: #333;
      display: flex;
      flex-direction:column;
      justify-content: center;
      align-items: flex-end;
      .share{
        width: 40rpx;
      }
    }
  }
  .desc{
    font-size: 24rpx;
    color: #666;
    line-height: 40rpx;
    padding: 20rpx 0;
  }
  .tel{
    font-size: 28rpx;
    color:#333;
    line-height: 40rpx;
    .phone{
      width: 34rpx;
      vertical-align: middle;
    }
  }
}
/* 联系商家部分 */
.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;
    }
  }
}
.fr{
  float: right;
}
</style>