| | |
| | | <template> |
| | | <view> |
| | | <header-bar title="名片详情" :isBack="true" @click="back"></header-bar> |
| | | <scroll-view scroll-y="true" class="scroll-view"> |
| | | <view class="card-container" v-if="businessInfo"> |
| | | <!-- 名片主体 --> |
| | | <view class="business-card"> |
| | | <view class="business-card" @click="viewCard"> |
| | | <image class="card-image" :src="businessInfo.mp" mode="widthFix"></image> |
| | | </view> |
| | | |
| | | <!-- 操作按钮区域 --> |
| | | <view class="action-buttons"> |
| | | <view class="action-btn" @click="makePhoneCall(businessInfo.mobile)"> |
| | | <text class="btn-icon">📞</text> |
| | | <image src="@/static/icon/bddh.png" class="btn-icon"></image> |
| | | <text class="btn-text">拨打电话</text> |
| | | </view> |
| | | <view class="action-btn" @click="shareToWechat"> |
| | | <text class="btn-icon">💬</text> |
| | | <image src="@/static/wx.png" class="btn-icon"></image> |
| | | <text class="btn-text">分享微信</text> |
| | | </view> |
| | | <view class="action-btn" @click="openLocation(businessInfo)"> |
| | | <text class="btn-icon">📍</text> |
| | | <image src="@/static/icon/address_icon.png" class="btn-icon"></image> |
| | | <text class="btn-text">导航地址</text> |
| | | </view> |
| | | <view class="action-btn" @click="shareCard"> |
| | | <text class="btn-icon">➤</text> |
| | | <button open-type="share" class="action-btn"> |
| | | <image src="@/static/icon/fenx.png" class="btn-icon"></image> |
| | | <text class="btn-text">分享名片</text> |
| | | </button> |
| | | <view class="action-btn" @click="contactWithChat"> |
| | | <image src="@/static/icon/communication.png" class="btn-icon"></image> |
| | | <text class="btn-text">在线聊天</text> |
| | | </view> |
| | | </view> |
| | | |
| | |
| | | <!-- 数字资产卡片 --> |
| | | <view class="asset-cards"> |
| | | <view class="asset-card" @click="goToPlatform"> |
| | | <image class="asset-img" src="/static/background_top.png" mode="aspectFill"></image> |
| | | <image class="asset-img" :src="background.digital_asset_1" mode="aspectFill"></image> |
| | | </view> |
| | | <view class="asset-card" @click="goToShop"> |
| | | <image class="asset-img" src="/static/haggle.png" mode="aspectFill"></image> |
| | | <image class="asset-img" :src="background.digital_asset_2" mode="aspectFill"></image> |
| | | </view> |
| | | </view> |
| | | |
| | |
| | | v-if="businessInfo.duties && businessInfo.duties.length > 0">{{ businessInfo.duties[0] }}</text> |
| | | <text class="price">¥{{ businessInfo.grade.price }}</text> |
| | | </view> |
| | | <!-- <view class="payment-methods"> |
| | | <view class="method-item" :class="{ active: paymentMethod === 'balance' }" |
| | | @tap="selectPaymentMethod('balance')"> |
| | | <text class="method-name">联盟币支付</text> |
| | | <text class="iconfont icon-check" v-if="paymentMethod === 'balance'"></text> |
| | | </view> |
| | | <view class="method-item" :class="{ active: paymentMethod === 'wechat' }" |
| | | @tap="selectPaymentMethod('wechat')"> |
| | | <text class="method-name">微信支付</text> |
| | | <text class="iconfont icon-check" v-if="paymentMethod === 'wechat'"></text> |
| | | </view> |
| | | </view> --> |
| | | <view class="modal-footer"> |
| | | <view class="cancel-btn" @tap="closePaymentModal">取消</view> |
| | | <view class="confirm-btn" @tap="confirmPayment">确认</view> |
| | |
| | | // 支付相关 |
| | | showPayment: false, |
| | | selectedGrade: {}, |
| | | paymentMethod: 'balance' |
| | | paymentMethod: 'balance', |
| | | background: {} |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | |
| | | // 记录访问日志 |
| | | this.recordVisit(); |
| | | } |
| | | this.getSettingBackground() |
| | | }, |
| | | onShow() { |
| | | this.getBusinessDetail(); |
| | | }, |
| | | methods: { |
| | | back() { |
| | | uni.navigateBack(); |
| | | }, |
| | | viewCard() { |
| | | let _this = this |
| | | // 预览图片 |
| | | uni.previewImage({ |
| | | urls: [_this.businessInfo.mp], |
| | | longPressActions: { |
| | | itemList: ['转发给朋友', '保存图片', '收藏', '翻译图片中的文字', '提取文字'], |
| | | success: function(data) { |
| | | if (data.tapIndex == 1) { |
| | | _this.recordVisit(20) |
| | | } |
| | | console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); |
| | | }, |
| | | fail: function(err) { |
| | | console.log(err.errMsg); |
| | | } |
| | | }, |
| | | complete: function(res) { |
| | | console.log(res); |
| | | } |
| | | }) |
| | | }, |
| | | getSettingBackground() { |
| | | let _this = this; |
| | | _this._post('plus.business.setting/getBackground', {}, function(res) { |
| | | _this.background = res.data |
| | | }) |
| | | }, |
| | | // 获取名片详情 |
| | | getBusinessDetail() { |
| | |
| | | }, function(res) { |
| | | _this.businessInfo = res.data; |
| | | _this.loading = false; |
| | | |
| | | // 设置默认选中的等级 |
| | | if (_this.businessInfo.grade && _this.businessInfo.grade.length > 0) { |
| | | _this.selectedGrade = _this.businessInfo.grade; |
| | |
| | | }); |
| | | }, |
| | | // 记录访问 |
| | | recordVisit() { |
| | | recordVisit(type = 10) { |
| | | let _this = this; |
| | | const params = { |
| | | business_card_id: _this.business_card_id, |
| | | type: 10 |
| | | type: type |
| | | }; |
| | | _this._post('plus.business.saving/add', params, function() { |
| | | // 无需处理返回结果 |
| | |
| | | } else { |
| | | this.showError('暂未填写微信'); |
| | | } |
| | | }, |
| | | },/* |
| | | // 通过聊天联系 |
| | | contactWithChat() { |
| | | console.log(this.businessInfo); |
| | | if (!this.businessInfo) return; |
| | | |
| | | uni.navigateTo({ |
| | | url: `/pages/plus/business/chat/chat?user_id=${this.businessInfo.user_id}&business_card_id=${this.business_card_id}&nickName=${this.businessInfo.name}` |
| | | }); |
| | | }, */ |
| | | // 打开地图 |
| | | openLocation(businessInfo) { |
| | | let address = businessInfo.region.province + ' ' + businessInfo.region.city + ' ' + businessInfo.region.region + ' ' + businessInfo.address |
| | | let address = businessInfo.region.province + ' ' + businessInfo.region.city + ' ' + businessInfo.region |
| | | .region + ' ' + businessInfo.address |
| | | if (!address) { |
| | | this.showError('暂无地址信息'); |
| | | return; |
| | | } |
| | | |
| | | // 使用腾讯地图API进行地理编码 |
| | | const apiKey = 'LS7BZ-NHSWK-CWOJQ-AJC7Y-H5HE2-UGBWR'; |
| | | const url = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(address)}&key=${apiKey}`; |
| | | |
| | | uni.request({ |
| | | url: url, |
| | | success: (res) => { |
| | | if (res.data.status === 0 && res.data.result) { |
| | | const location = res.data.result.location; |
| | | uni.openLocation({ |
| | | latitude: location.lat, |
| | | longitude: location.lng, |
| | | name: address, |
| | | address: address, |
| | | scale: 18 |
| | | }); |
| | | } else { |
| | | // 地理编码失败,使用默认方式 |
| | | uni.openLocation({ |
| | | latitude: 0, |
| | | longitude: 0, |
| | | name: address, |
| | | address: address, |
| | | scale: 18 |
| | | }); |
| | | } |
| | | }, |
| | | fail: () => { |
| | | // 请求失败,使用默认方式 |
| | | uni.openLocation({ |
| | | latitude: 0, |
| | | longitude: 0, |
| | | name: address, |
| | | address: address, |
| | | scale: 18 |
| | | }); |
| | | console.log(businessInfo.latitude); |
| | | console.log(businessInfo.longitude); |
| | | let latitude = Number(businessInfo.latitude) |
| | | let longitude = Number(businessInfo.longitude) |
| | | uni.openLocation({ |
| | | latitude: latitude, |
| | | longitude: longitude, |
| | | name: businessInfo.address, |
| | | address: address, |
| | | scale: 18, |
| | | complete: function(res) { |
| | | console.log(res); |
| | | } |
| | | |
| | | }); |
| | | |
| | | }, |
| | | // 分享名片 |
| | | shareCard() { |
| | |
| | | }, |
| | | // 跳转到平台 |
| | | goToPlatform() { |
| | | uni.setStorageSync('shop_supplier_id', 1) |
| | | uni.navigateTo({ |
| | | url: '/pages/shop/shop?shop_supplier_id=1' |
| | | }); |
| | | }, |
| | | // 跳转到店铺 |
| | | goToShop() { |
| | | let _this=this; |
| | | _this._post('store.store/getUserStore', {user_id:_this.businessInfo.user_id}, function(res) { |
| | | if(res.data.list){ |
| | | let _this = this; |
| | | _this._post('store.store/getUserStore', { |
| | | user_id: _this.businessInfo.user_id |
| | | }, function(res) { |
| | | if (res.data.list) { |
| | | uni.setStorageSync('shop_supplier_id', res.data.list.shop_supplier_id) |
| | | uni.navigateTo({ |
| | | url: '/pages/shop/shop?shop_supplier_id='+res.data.list.shop_supplier_id |
| | | url: '/pages/shop/shop?shop_supplier_id=' + res.data.list.shop_supplier_id |
| | | }); |
| | | }else{ |
| | | } else { |
| | | _this.showError('该用户暂无店铺') |
| | | } |
| | | /* uni.navigateTo({ |
| | |
| | | // 新建数字名片 |
| | | createNewCard() { |
| | | uni.navigateTo({ |
| | | url: '/pages/plus/business/create' |
| | | url: '/pages/plus/business/add' |
| | | }); |
| | | }, |
| | | // 购买名片 |
| | |
| | | if (res.code === 1) { |
| | | // 跳转到收银台支付 |
| | | uni.redirectTo({ |
| | | url: '/pages/order/cashier?order_id=' + res.data.order_id + '&order_type=100' |
| | | url: '/pages/plus/business/cashier?order_id=' + res.data.order_id + |
| | | '&order_type=100' |
| | | }); |
| | | } else { |
| | | this.showError(res.msg || '支付失败'); |
| | |
| | | }, (err) => { |
| | | this.showError('支付失败,请重试'); |
| | | }); |
| | | }, |
| | | // 在线聊天 |
| | | contactWithChat() { |
| | | console.log(this.businessInfo); |
| | | if (!this.businessInfo) return; |
| | | |
| | | uni.navigateTo({ |
| | | url: `/pages/plus/business/chat/chat?user_id=${this.businessInfo.user_id}&business_card_id=${this.business_card_id}&nickName=${this.businessInfo.name}` |
| | | }); |
| | | } |
| | | }, |
| | | onShareAppMessage() { |
| | | if (this.businessInfo) { |
| | | return { |
| | | title: `${this.businessInfo.real_name}的电子名片`, |
| | | path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.getUserId()}` |
| | | title: `${this.businessInfo.name}的电子名片`, |
| | | path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.businessInfo.user_id}` |
| | | }; |
| | | } |
| | | return { |
| | | title: '电子名片', |
| | | path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}` |
| | | path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.businessInfo.user_id}` |
| | | }; |
| | | }, |
| | | onShareTimeline() { |
| | | if (this.businessInfo) { |
| | | return { |
| | | title: `${this.businessInfo.real_name}的电子名片`, |
| | | path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.getUserId()}` |
| | | title: `${this.businessInfo.name}的电子名片`, |
| | | path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.businessInfo.user_id}` |
| | | }; |
| | | } |
| | | return { |
| | | title: '电子名片', |
| | | path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}` |
| | | path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.businessInfo.user_id}` |
| | | }; |
| | | } |
| | | }; |
| | |
| | | flex-direction: column; |
| | | align-items: center; |
| | | flex: 1; |
| | | line-height: normal; |
| | | background: #ffffff00; |
| | | padding: 0; |
| | | |
| | | .btn-icon { |
| | | font-size: 56rpx; |
| | | width: 56rpx; |
| | | height: 56rpx; |
| | | margin-bottom: 12rpx; |
| | | } |
| | | |
| | |
| | | font-size: 28rpx; |
| | | color: #666; |
| | | line-height: 1.6; |
| | | white-space: normal; |
| | | word-break: break-word; |
| | | word-wrap: break-word; |
| | | overflow-wrap: break-word; |
| | | overflow: hidden; |
| | | max-width: 100%; |
| | | line-height: 1.4; |
| | | } |
| | | } |
| | | } |
| | |
| | | gap: 10rpx; |
| | | |
| | | .create-card-btn { |
| | | background: linear-gradient(90deg, #0078d7, #00b4ff); |
| | | background: linear-gradient(90deg, #ff1529, #ff435f); |
| | | color: #fff; |
| | | font-weight: bold; |
| | | padding: 10rpx 0; |
| | |
| | | |
| | | .confirm-btn { |
| | | color: #fff; |
| | | background-color: #37bde6; |
| | | background-color: #D41003; |
| | | } |
| | | } |
| | | } |