|
@@ -0,0 +1,228 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="top-box">
|
|
|
+ <image class="bgImg" src="../../static/img/bg_mingpian@2x.png"></image>
|
|
|
+ <image class="headerImg" :src="avatarStr">
|
|
|
+ </image>
|
|
|
+ <view class="txtInfo-box">
|
|
|
+ <text class="name">{{adInfo.name}}</text>
|
|
|
+ <text class="work">服务顾问</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="address-box" @click="addressOpra">
|
|
|
+ <view class="address-info">
|
|
|
+ <text class="store-name">{{shopNameStr}}</text>
|
|
|
+ <text
|
|
|
+ class="store-address">{{addressStr}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="address-arrow">
|
|
|
+ <image src="../../static/img/little_rightArrow.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-box">
|
|
|
+
|
|
|
+ <button open-type="share" class="share-btn-box">
|
|
|
+ <view class="share-btn">分享名片</view>
|
|
|
+ </button>
|
|
|
+ <view class="call-btn" @click="callOpra">拨号</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ adInfo: {
|
|
|
+ shopName:'',
|
|
|
+ shopInfo:{
|
|
|
+ shopName:''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ // console.log('个人名片传递的参数', e);
|
|
|
+ this.adInfo = JSON.parse(e.adInfo)
|
|
|
+ // console.log('个人名片传递的参数', this.adInfo);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ avatarStr(){
|
|
|
+ return this.adInfo.avatar ? this.adInfo.avatar : '../../static/timg/pic_def_ava@2x.png'
|
|
|
+ },
|
|
|
+
|
|
|
+ shopNameStr(){
|
|
|
+ if (this.adInfo.shopName) {
|
|
|
+ // console.log('this.adInfo.shopName = ',this.adInfo.shopName)
|
|
|
+ return this.adInfo.shopName
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ // console.log('this.adInfo.shopInfo.shopName = ',this.adInfo.shopInfo.shopName)
|
|
|
+ return this.adInfo.shopInfo.shopName
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addressStr() {
|
|
|
+ if (this.adInfo.provinceName) {
|
|
|
+ return this.adInfo.provinceName + this.adInfo.cityName + this.adInfo.areaName + this.adInfo.address
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ return this.adInfo.shopInfo.provinceName + this.adInfo.shopInfo.cityName + this.adInfo.shopInfo.areaName + (this.adInfo.shopInfo.Address ? this.adInfo.shopInfo.Address :'')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 拨号
|
|
|
+ callOpra() {
|
|
|
+ if (this.adInfo.phone) {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.adInfo.phone,
|
|
|
+ success(e) {
|
|
|
+ console.log(e)
|
|
|
+ },
|
|
|
+ fail: function(e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ uni.showToast({
|
|
|
+ title:'没有电话信息',
|
|
|
+ icon: "none",
|
|
|
+ duration:2000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 门店地址
|
|
|
+ addressOpra() {
|
|
|
+ uni.switchTab({
|
|
|
+ url:'/pages/index/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ /* 背景图 & 头像 */
|
|
|
+ .top-box {
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bgImg {
|
|
|
+ width: 100%;
|
|
|
+ height: 426rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headerImg {
|
|
|
+ width: 272rpx;
|
|
|
+ height: 272rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 6rpx solid #A38E21;
|
|
|
+ margin-top: -136rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 名片信息 */
|
|
|
+ .txtInfo-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 34rpx;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .work {
|
|
|
+ color: #666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 地址信息 */
|
|
|
+ .address-box {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 33rpx;
|
|
|
+ margin-bottom: 33rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 44rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-arrow {
|
|
|
+ width: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-arrow image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3c3c3c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-address {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部 */
|
|
|
+ .bottom-box {
|
|
|
+ bottom: 0;
|
|
|
+ position: fixed;
|
|
|
+ background: white;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ box-shadow: 0px -2px 10px 0px rgba(153, 153, 153, 0.2000);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+
|
|
|
+ height: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ button::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-btn-box {
|
|
|
+ width: 375rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .share-btn {
|
|
|
+ margin: 20rpx;
|
|
|
+ background-color: #F4F5F7;
|
|
|
+ border-radius: 37rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 74rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .call-btn {
|
|
|
+ flex: 1;
|
|
|
+ margin: 20rpx;
|
|
|
+ background-color: #D53533;
|
|
|
+ border-radius: 37rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 74rpx;
|
|
|
+ }
|
|
|
+</style>
|