|
|
@@ -0,0 +1,375 @@
|
|
|
+<template>
|
|
|
+ <view class="mone">
|
|
|
+ <view class="topBox">
|
|
|
+
|
|
|
+ <image :src="`${baseURL}/resource/user/user5/text3.png`" mode="scaleToFill" class="leftTipImg">
|
|
|
+ </image>
|
|
|
+ <view class="nameBox">
|
|
|
+ <text class="username">{{cardInfo.name || '暂无'}}</text>
|
|
|
+ </view>
|
|
|
+ <image :src="cardInfo.avatar" mode="scaleToFill" class="avatar"></image>
|
|
|
+ <view class="noBox">
|
|
|
+ <text class="noText">执</text>
|
|
|
+ <text class="noText">业</text>
|
|
|
+ <text class="noText">编</text>
|
|
|
+ <text class="noText">编</text>
|
|
|
+ <text class="noText">：</text>
|
|
|
+ <text class="noText trText" v-for="ls in no">{{ls}}</text>
|
|
|
+ </view>
|
|
|
+ <image :src="`${baseURL}/resource/user/user5/img1.png`" mode="scaleToFill" class="topBottomImg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="contentBox">
|
|
|
+ <view class="titleImg">
|
|
|
+ <image class="titleImg1" :src="`${baseURL}/resource/user/user5/text4.png`" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="userName">
|
|
|
+ <text class="list-item">姓名： {{cardInfo.name||'暂无'}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="center-data flex">
|
|
|
+ <view class="item">
|
|
|
+ <text class="list-item">
|
|
|
+ 籍贯： {{cardInfo.ancestral_place|| '暂无'}}
|
|
|
+ </text>
|
|
|
+ <text class="list-item">
|
|
|
+ 民族： {{cardInfo.minority || '暂无'}}
|
|
|
+ </text>
|
|
|
+ <text class="list-item">
|
|
|
+ 学历： {{cardInfo.education || '暂无'}}
|
|
|
+ </text>
|
|
|
+ <text class="list-item">
|
|
|
+ 年龄： {{cardInfo.age || '暂无'}}
|
|
|
+ </text>
|
|
|
+ <text class="list-item">
|
|
|
+ 星座： {{cardInfo.constellation || '暂无'}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="list-item">
|
|
|
+ 身高：{{cardInfo.height*1+'厘米'|| '暂无'}}
|
|
|
+ </text>
|
|
|
+ <text class="list-item">
|
|
|
+ 体重：{{cardInfo.weight*1+'kg' || '暂无'}}
|
|
|
+ </text>
|
|
|
+ <text class="list-item">
|
|
|
+ 属相： {{cardInfo.twelve || '暂无'}}
|
|
|
+ </text>
|
|
|
+ <text class="list-item">
|
|
|
+ 服务年限： {{(cardInfo.work_year + '年') || '0'}}
|
|
|
+ </text>
|
|
|
+ <text class="list-item">
|
|
|
+ 服务次数： {{cardInfo.service_count || '0'}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="position-relative">
|
|
|
+ <view class="typeTitleImg flex-center">
|
|
|
+ <image :src="`${baseURL}/resource/user/user5/text1.png`" mode="scaleToFill" class="typeImage">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="flex-center padding-v-20 padding-c-20">
|
|
|
+ <view class="areaList" v-if="cardInfo.is_china == 1">
|
|
|
+ <text class="blue-text" :key='fwindex' v-for="(fwitem,fwindex) in cardInfo.service_area_all">
|
|
|
+ {{fwitem}}{{fwindex ==(cardInfo.service_area_all.length -1) ?'': '' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="blue-text" v-if="cardInfo.is_china == 0">
|
|
|
+ 海外
|
|
|
+ </text>
|
|
|
+ <text class="blue-text" v-if="cardInfo.is_china == 2">
|
|
|
+ 全国
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="typeTitleImg flex-center">
|
|
|
+ <image :src="`${baseURL}/resource/user/user5/text2.png`" mode="scaleToFill" class="typeImage">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="flex-center padding-v-20 padding-c-20">
|
|
|
+ <text class="blue-text">
|
|
|
+ {{cardInfo.service_min_price}}元/{{ cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}——{{cardInfo.service_max_price}}元/{{cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <image :src="`${baseURL}/resource/user/user5/img2.png`" mode="scaleToFill" class="typeLeftLogo"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footerBox">
|
|
|
+ <image :src="`${baseURL}/resource/user/user5/text5.png`" mode="scaleToFill" class="footerTitle"></image>
|
|
|
+ <view class="text margin-t-20">
|
|
|
+ <rich-text class="richtext" :nodes="cardInfo.service_intro_content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="imageList">
|
|
|
+ <image v-for="ls in cardInfo.service_intro_imgs" :src="ls" mode="scaleToFill" class="imageItem"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ } from 'vuex';
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ // 浏览数量
|
|
|
+ shareNumber: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ // 是否显示默认数据
|
|
|
+ isDefault: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isShare: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ //1为模板2为用户
|
|
|
+ isLook: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ templateDetail: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ defaults: {
|
|
|
+ user_work_type_title: '母婴护理师',
|
|
|
+ name: '张红梅',
|
|
|
+ avatar: 'https://api.myjie.cn/resource/user/user5/model5.png',
|
|
|
+ age: '50',
|
|
|
+ twelve: '牛',
|
|
|
+ work_year: '16',
|
|
|
+ constellation: '巨蟹座',
|
|
|
+ ancestral_place: '黑龙江',
|
|
|
+ minority: '汉族',
|
|
|
+ education: '大专',
|
|
|
+ service_area_all: ['全国'],
|
|
|
+ service_min_price: 29800,
|
|
|
+ service_max_price: 49800,
|
|
|
+ service_time_type_title: '每月',
|
|
|
+ service_intro_content: '高级育婴师证|高级催乳师证|早产儿护理师母婴护理证|金牌月嫂证|产后恢复师证|公共营养师证|月子药膳调理师证|国际宝宝睡眠咨询师证|普通话二级甲等|中央广播电视大学学历|学前教育专业，深耕幼教十年，技能全面，性格活泼，有亲和力，做事干净利落，有很强的责任心。对宝宝有爱心，体贴新手妈妈。专业技能熟练。应急能力强。让家人放心、产妇舒心的坐好月子。',
|
|
|
+ service_intro_imgs: ['https://api.myjie.cn/resource/user/user1/pj1.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/pj2.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/pj3.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/pj4.png'
|
|
|
+ ],
|
|
|
+ service_audit_imgs: ['https://api.myjie.cn/resource/user/user1/zs1.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/zs2.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/zs3.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/zs4.png'
|
|
|
+ ],
|
|
|
+ service_project_ar: [{
|
|
|
+ title: '婴幼儿睡眠管理',
|
|
|
+ content: '如：日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题，帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰，培养良好的生活、学习习惯。'
|
|
|
+ }, {
|
|
|
+ title: '特色月子餐',
|
|
|
+ content: '套用客户的一句话“养眼、养心更养胃”！家常菜、面食、点心、甜品、靓汤、五谷杂粮粥、婴幼儿花样辅食等。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '早产儿特殊护理',
|
|
|
+ content: '包括早产儿基础护理、安全喂养方法、追赶性生长、消化与免疫系统等技能，根据宝宝具体情况给予早产儿家长的科学入户指导。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '0-6岁早期教育',
|
|
|
+ content: '在婴孩最敏感最能接受的时期进行事半功倍的适时教育，针对不同年龄段的孩子，开发婴幼儿潜能的教育，为孩子多元化和健康人格打下良好基础。'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ service_imgs: [
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/fw1.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/fw2.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/fw3.png',
|
|
|
+ 'https://api.myjie.cn/resource/user/user1/fw4.png'
|
|
|
+ ],
|
|
|
+ is_type_audit: 1,
|
|
|
+ service_count: 121,
|
|
|
+ is_china: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['baseURL']),
|
|
|
+ cardInfo() {
|
|
|
+ if (this.isDefault) {
|
|
|
+ return this.defaults
|
|
|
+ } else {
|
|
|
+ return this.templateDetail
|
|
|
+ }
|
|
|
+ },
|
|
|
+ no() {
|
|
|
+ const ar = this.cardInfo.no.split('');
|
|
|
+ console.log(ar, 'ar')
|
|
|
+ if (ar.length > 0) {
|
|
|
+ return ar
|
|
|
+ } else {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .mone {
|
|
|
+ background-image: url('https://api.myjie.cn/resource/user/user5/bg1.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 750rpx 2650rpx;
|
|
|
+ background-color: rgb(5, 0, 0);
|
|
|
+ width: 750rpx;
|
|
|
+ min-height: 2650rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topBox {
|
|
|
+ position: relative;
|
|
|
+ height: 1159rpx;
|
|
|
+
|
|
|
+ .leftTipImg {
|
|
|
+ position: absolute;
|
|
|
+ top: 350rpx;
|
|
|
+ left: 89rpx;
|
|
|
+ width: 26rpx;
|
|
|
+ height: 322rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nameBox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 350rpx;
|
|
|
+ left: 136rpx;
|
|
|
+ width: 1em;
|
|
|
+ height: 322rpx;
|
|
|
+
|
|
|
+ .username {
|
|
|
+ font-family: STLiti;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 56rpx;
|
|
|
+ line-height: 47rpx;
|
|
|
+ background-image: linear-gradient(to bottom, #B8937B 0%, #FFF9ED 50%, #CBA892 100%);
|
|
|
+ background-clip: text;
|
|
|
+ color: rgba(0, 0, 0, 0);
|
|
|
+ width: 1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ position: absolute;
|
|
|
+ left: 200rpx;
|
|
|
+ top: 211rpx;
|
|
|
+ width: 377rpx;
|
|
|
+ height: 860rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 500rpx;
|
|
|
+ right: 40rpx;
|
|
|
+ width: 21rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .noText {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 21rpx;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0DF6F3;
|
|
|
+
|
|
|
+ &.trText {
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topBottomImg {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 313rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contentBox {
|
|
|
+ padding: 60rpx 25rpx 0 25rpx;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 20rpx 60rpx 40rpx 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleImg {
|
|
|
+ .titleImg1 {
|
|
|
+ width: 447rpx;
|
|
|
+ height: 51rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 29rpx;
|
|
|
+ color: #CBA892;
|
|
|
+ line-height: 49rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-data {
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .typeImage {
|
|
|
+ width: 189rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .typeLeftLogo {
|
|
|
+ width: 78rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 50rpx;
|
|
|
+ }
|
|
|
+ .areaList{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .blue-text{
|
|
|
+ flex-grow: 1;
|
|
|
+ font-size: 29rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #0DF6F3;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footerBox{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 25rpx;
|
|
|
+ .footerTitle{
|
|
|
+ width: 448rpx;
|
|
|
+ height: 51rpx;
|
|
|
+ }
|
|
|
+ .richtext{
|
|
|
+ color: #CBA892;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imageList{
|
|
|
+ .imageItem{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 1000rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
