|
|
@@ -0,0 +1,259 @@
|
|
|
+<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>
|
ext.liuqiwen3