updated:服务商入驻

src/main/resources/static/css/service-settlement/info.css

@@ -3,6 +3,7 @@
  */
 body{
     background-color: #F5F5F5;
+    min-height: 90vh;
 }
 @media screen and (min-width:768px) {
     #service-info {
@@ -79,7 +80,7 @@ body{
     }
     .contain .content .content-info .info-name {color: #fff;font-weight: bold;font-size: 1.3vw;}
     .content-info .info-class,.content-info .info-address,.content-info .info-num,.content-info .info-phone {font-size: 0.8vw;display: flex;align-items: center;color: #FFFFFF;}
-    .content-info .icon {width: 1vw;height: 1vw;}
+    .content-info .icon {width: 1vw;height: 1vw;margin-right: 0.5vw;background-size: 100% 100% !important;}
     .content-info .info-class {
         margin-top: 0.6vw;
         height: 1.7vw;
@@ -190,7 +191,7 @@ body{
         margin-bottom: 4vw;
     }
     .content-info .info-class,.content-info .info-address,.content-info .info-num,.content-info .info-phone {font-size: 3.6vw;display: flex;align-items: center;color: #FFFFFF;margin-bottom: 2vw;}
-    .content-info .icon {width: 4.2vw;height: 4.2vw;}
+    .content-info .icon {width: 4.2vw;height: 4.2vw;margin-right: 2vw;background-size: 100% 100% !important;}
     .content-line { height: 3.2vw;width: 100%;background:#F5F5F5; }
     .content-text {
         padding: 7.2vw 6vw 25vw 4vw;

src/main/resources/static/css/service-settlement/search.css

@@ -20,6 +20,7 @@
         display: flex;
         align-items: center;
         flex-direction: column;
+        min-height: 50vh;
     }
     #service-search .search-contain .search-frist {
         display: flex;
@@ -66,6 +67,7 @@
         width: 7.7vw;
         height: 7.7vw;
         margin-right: 1.4vw;
+        border-radius: 0.2vw;
     }
     .provider .provider-img .el-image { width: 100%; height: 100%; }
     .provider .content {
@@ -77,7 +79,7 @@
     .provider .content .provider-name { font-weight: Bold;font-size: 0.9vw;color: #282828 }
     .provider .content .provider-class { padding: 0.3vw;display: flex;align-items: center;font-size: 0.8vw;width: fit-content;border-radius: 0.2vw; }
     .provider .content .provider-address, .provider .content .provider-num { display: flex;align-items: center;font-size: 0.8vw;color: #666; }
-    .provider .content .icon { width: 1vw; height: 1vw;margin-right: 0.6vw; }
+    .provider .content .icon { width: 1vw; height: 1vw;margin-right: 0.6vw;background-size: 100% 100% !important; }
     .el-dialog--center .el-dialog__body {
         text-align: center !important;
         padding: 18px;
@@ -143,6 +145,7 @@
     .contain {
         margin-top: 10vw;
         padding-bottom: 12.4vw;
+        min-height: 30vh;
     }
     .contain .contain-title {font-size: 3.6vw;color: #282828; margin-bottom: 2.6vw;}
     .provider {
@@ -158,6 +161,7 @@
         width: 21.8vw;
         height: 21.8vw;
         margin-right: 3.2vw;
+        border-radius: 0.2vw;
     }
     .provider .provider-img .el-image { width: 100%; height: 100%; }
     .provider .content {
@@ -178,7 +182,7 @@
         width: fit-content;
     }
     .provider .content .provider-address, .provider .content .provider-num { display: flex;align-items: center;font-size: 2.8vw;color: #666; }
-    .provider .content .icon { width: 2.8vw; height: 2.8vw;margin-right: 1.2vw; }
+    .provider .content .icon { width: 2.8vw; height: 2.8vw;margin-right: 1.2vw; background-size: 100% 100% !important; }
     .el-dialog {
         width: 80% !important;
     }

src/main/resources/static/js/common/serviceapi/settlement.service.js

@@ -14,5 +14,19 @@ var SettlementService = {
             },
             contentType: 'application/json;charset=UTF-8'
         }).then(res=>res.json()).then(res => callback(res))
+    },
+    /**
+     * 获取服务商和服务商详情
+     * @param params {{id: number, providersName: string}}
+     * @param callback {Function} callback
+     */
+    getProvidersAndInfo: function (params, callback) {
+        Http.AjaxService({
+            url:'/user/providers/from',
+            type:'get',
+            data:params,
+        }).then(function(res){
+            callback(res);
+        });
     }
 }

src/main/resources/static/js/service-settlement/components/provider-item.js

@@ -4,8 +4,11 @@ const providerItem = {
         itemObj: {
             type: 'object',
             default: () => ({
-                level: 2,
-                id: 1
+                serviceLevel: 2,
+                id: 1,
+                name: '',
+                serviceCategory: 1,
+                textRelateds: []
             })
         }
     },
@@ -14,15 +17,18 @@ const providerItem = {
             textLevel: {
                 1: {
                     color: '#FF5B00',
-                    backgroundColor: '#FFEBDF'
+                    backgroundColor: '#FFEBDF',
+                    iconUrl: 'https://static.caimei365.com/app/img/serviceProvider/PC/class1.png'
                 },
                 2: {
                     color: '#FFB300',
-                    backgroundColor: '#FFF4DF'
+                    backgroundColor: '#FFF4DF',
+                    iconUrl: 'https://static.caimei365.com/app/img/serviceProvider/PC/class2.png'
                 },
                 3: {
                     color: '#7EACD5',
-                    backgroundColor: '#DFF0FF'
+                    backgroundColor: '#DFF0FF',
+                    iconUrl: 'https://static.caimei365.com/app/img/serviceProvider/PC/class3.png'
                 }
             }
         }
@@ -31,21 +37,21 @@ const providerItem = {
         `
         <div class="provider" @click="handleInfo">
             <div class="provider-img">
-                <el-image />
+                <el-image :src="itemObj.textRelateds[0]" />
             </div>
             <div class="content">
-                <div class="provider-name">丽颜科美复兴广场店</div>
-                <div class="provider-class" :style="{color: textLevel[itemObj.level].color, backgroundColor: textLevel[itemObj.level].backgroundColor}">
-                    <div class="icon"></div>
-                    <div class="cont">一级服务商</div>
+                <div class="provider-name">{{ itemObj.name }}</div>
+                <div class="provider-class" :style="{color: textLevel[itemObj.serviceLevel]?.color, backgroundColor: textLevel[itemObj.serviceLevel]?.backgroundColor}">
+                    <div class="icon" :style="{background: 'url(' + textLevel[itemObj.serviceLevel]?.iconUrl + ')' }"></div>
+                    <div class="cont">{{ itemObj.serviceLevel === 1 ? '一' : itemObj.serviceLevel === 2 ? '二' : '三' }}级服务商</div>
                 </div>
                 <div class="provider-address">
-                    <div class="icon"></div>
-                    <div class="cont">广东省深圳市罗湖区</div>
+                    <div class="icon" style="background: url('https://static.caimei365.com/app/img/serviceProvider/PC/address.png')"></div>
+                    <div class="cont">{{ itemObj.address.split('/').join('') }}</div>
                 </div>
                 <div class="provider-num">
-                    <div class="icon"></div>
-                    <div class="cont">资格证编号：CMFW0100001</div>
+                    <div class="icon" style="background: url('https://static.caimei365.com/app/img/serviceProvider/PC/certifit.png')"></div>
+                    <div class="cont">资格证编号：{{ itemObj.qualificationId }}</div>
                 </div>
             </div>
         </div>

src/main/resources/static/js/service-settlement/index.js

@@ -6,34 +6,17 @@ new Vue({
     mixins: [wxJssdkMixin],
     data: {
         form: {
-            name: ''
+            providersName: ''
         }
     },
     mounted() {
+        this.setWxConfig((wx) => this.setWxReady(wx))
     },
     methods: {
         toSearchProvider() {
-            if (this.form.name) {
-                window.open('/servicesSearch.html?keyword=' + this.form.name)
+            if (this.form.providersName) {
+                window.open('/servicesSearch.html?keyword=' + this.form.providersName)
             }
         }
     }
 })
-
-new Vue({
-    el: '#service-search',
-    components: {
-        providerItem,
-        comFooter
-    },
-    mixins: [wxJssdkMixin],
-    data: {
-        form: {
-            name: ''
-        }
-    },
-    mounted() {},
-    methods: {
-        toSearchProvider() {}
-    }
-})

src/main/resources/static/js/service-settlement/info.js

@@ -7,24 +7,42 @@ new Vue({
         textLevel: {
             1: {
                 color: '#FF5B00',
-                backgroundColor: '#FFEBDF'
+                backgroundColor: '#FFEBDF',
+                iconUrl: 'https://static.caimei365.com/app/img/serviceProvider/PC/class1.png'
             },
             2: {
                 color: '#FFB300',
-                backgroundColor: '#FFF4DF'
+                backgroundColor: '#FFF4DF',
+                iconUrl: 'https://static.caimei365.com/app/img/serviceProvider/PC/class2.png'
             },
             3: {
                 color: '#7EACD5',
-                backgroundColor: '#DFF0FF'
+                backgroundColor: '#DFF0FF',
+                iconUrl: 'https://static.caimei365.com/app/img/serviceProvider/PC/class3.png'
             }
         },
+        form: {
+            providersId: 0
+        },
         show: false
     },
-    computed: {
-        infoId() {
-            return 0
-        }
+    mounted() {
+        this.getParams()
+        this.toSearchProvider()
+        this.setWxConfig((wx) => this.setWxReady(wx))
     },
-    mounted() {},
-    methods: {}
+    methods: {
+        getParams() {
+            this.form.providersId = window.location.search.split('?')[1].split('=')[1]
+        },
+        toSearchProvider() {
+            if (this.form.providersId) {
+                SettlementService.getProvidersAndInfo(this.form, (res) => {
+                    if (res.data) {
+                        this.itemObj = res.data
+                    }
+                })
+            }
+        }
+    }
 })

src/main/resources/static/js/service-settlement/mixins/cmWXjssdk.js

@@ -6,9 +6,6 @@ var wxJssdkMixin = function () {
                 jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData', 'onMenuShareTimeline'], // 微信配置可用权限
             }
         },
-        created() {
-            this.setWxConfig((wx) => this.setWxReady(wx))
-        },
         methods: {
             setWxConfig(callback) {
                 const url = 'https://www.caimei365.com/serviceSettlement.html'
@@ -28,7 +25,7 @@ var wxJssdkMixin = function () {
                             signature: data.signature, // 必填，签名
                             jsApiList: this.jsApiList // 必填，需要使用的 JS 接口列表
                         })
-                        callback(wx)
+                        callback && callback(wx)
                         wx.error(function (err) {
                             console.warn(err)
                         })
@@ -39,6 +36,7 @@ var wxJssdkMixin = function () {
                 return /MicroMessenger/i.test(navigator.userAgent);
             },
             setWxReady(wx) {
+                console.log('wx', wx)
                 wx.ready(function () {
                     wx.onMenuShareAppMessage({
                         title: '采美商城', // 分享标题

src/main/resources/static/js/service-settlement/search.js

@@ -0,0 +1,39 @@
+new Vue({
+    el: '#service-search',
+    components: {
+        providerItem,
+        comFooter
+    },
+    mixins: [wxJssdkMixin],
+    data: {
+        form: {
+            providersName: ''
+        },
+        providerList: []
+    },
+    mounted() {
+        this.getParams()
+        this.toSearchProvider()
+        this.setWxConfig((wx) => this.setWxReady(wx))
+    },
+    methods: {
+        getParams() {
+            this.form.providersName = window.location.search.split('?')[1].split('=')[1]
+        },
+        toSearchProvider() {
+            if (this.form.providersName) {
+                SettlementService.getProvidersAndInfo(this.form, (res) => {
+                    if (res.data) {
+                        this.providerList = [res.data]
+                    }
+                })
+            }
+        },
+        onSearch() {
+            this.toSearchProvider()
+        },
+        onCancel() {
+            this.form.providersName = ''
+        }
+    }
+})

src/main/resources/templates/service-settlement/index.html

@@ -13,7 +13,7 @@
     <div class="search">
         <div class="title">区域服务商查询</div>
         <div class="search-input">
-            <el-input placeholder="请输入名称搜索查询" v-model="form.name" />
+            <el-input placeholder="请输入名称搜索查询" v-model="form.providersName" />
         </div>
         <div class="search-btn">
             <el-button @click="toSearchProvider">查询</el-button>

src/main/resources/templates/service-settlement/info.html

@@ -12,40 +12,42 @@
 <input type="hidden" th:value="${coreServer}" id="coreServer">
 <input type="hidden" th:value="${agent}" id="userAgent">
 
-<div id="service-info">
+<div id="service-info" v-cloak>
     <div class="title">服务商详情</div>
     <div class="contain">
         <div class="swipe">
             <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#FF5B00">
-                <van-swipe-item>1</van-swipe-item>
-                <van-swipe-item>2</van-swipe-item>
-                <van-swipe-item>3</van-swipe-item>
-                <van-swipe-item>4</van-swipe-item>
+                <van-swipe-item v-for="item,index in itemObj.textRelateds" :key="index">
+                    <van-image
+                        width="100"
+                        height="100"
+                        :src="item.image"
+                    />
+                </van-swipe-item>
             </van-swipe>
             <div class="preview" @click="show = true">
-                <el-image src="" />
+                <el-image :src="itemObj.qualificationImage" />
             </div>
         </div>
         <div class="content">
             <div class="content-sq">
                 <div class="sq"></div>
-                <div class="count">采美平台授权 <span>科医人医疗激光设备贸易公司</span> 为一级服务商</div>
+                <div class="count">采美平台授权 <span>{{ itemObj.name }}</span> 为{{ itemObj.serviceLevel === 1 ? '一' : itemObj.serviceLevel === 2 ? '二' : '三' }}级服务商</div>
             </div>
             <div class="content-info">
-                <div class="info-name">丽颜科美复兴广场店</div>
-                <div class="info-class" :style="{color: textLevel[itemObj.level].color, backgroundColor: textLevel[itemObj.level].backgroundColor}"><div class="icon"></div>一级服务商</div>
-                <div class="info-address"><div class="icon"></div>广东省深圳市罗湖区</div>
-                <div class="info-num"><div class="icon"></div>资格证编号：CMFW0100001</div>
-                <div class="info-phone"><div class="icon"></div>联系方式：15889582993</div>
+                <div class="info-name">{{ itemObj.name }}</div>
+                <div class="info-class" :style="{color: textLevel[itemObj.serviceLevel]?.color, backgroundColor: textLevel[itemObj.serviceLevel]?.backgroundColor}">
+                    <div class="icon" :style="{background: 'url(' + textLevel[itemObj.serviceLevel]?.iconUrl + ')' }"></div>
+                    {{ itemObj.serviceLevel === 1 ? '一' : itemObj.serviceLevel === 2 ? '二' : '三' }}级服务商
+                </div>
+                <div class="info-address"><div class="icon" style="background: url('https://static.caimei365.com/app/img/serviceProvider/PC/address2.png')"></div>{{ itemObj.address.split('/').join('') }}</div>
+                <div class="info-num"><div class="icon" style="background: url('https://static.caimei365.com/app/img/serviceProvider/PC/certifit2.png')"></div>资格证编号：{{ itemObj.qualificationId }}</div>
+                <div class="info-phone"><div class="icon" style="background: url('https://static.caimei365.com/app/img/serviceProvider/PC/phone2.png')"></div>联系方式：{{ itemObj.mobile }}</div>
             </div>
             <div class="content-line"></div>
             <div class="content-text">
                 <div class="tent">简介：</div>
-                <div class="text">科医人医疗激光公司(Lumenis)成立于1966年，是目前全球最大的医疗激光公
-                    司，是激光和强光开发者，创新者和生产者，为外科、皮肤美容和眼科等医学
-                    领域提供最先进的激光技术和设备。世界上第一台眼科激光、外科激光、皮肤
-                    美容激光设备都是由科医人公司制造。这使Lumenis科医人医疗激光公司在医
-                    疗激光行业具有无可争辩的竞争优势，已成为业界的领头羊。</div>
+                <div class="text">{{ itemObj.text }}</div>
             </div>
         </div>
     </div>
@@ -56,7 +58,7 @@
                     width="100%"
                     height="100%"
                     fit="contain"
-                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
+                    :src="itemObj.qualificationImage"
                 />
             </div>
         </div>

src/main/resources/templates/service-settlement/search.html

@@ -10,22 +10,22 @@
 <input type="hidden" th:value="${agent}" id="userAgent">
 <template th:replace="service-settlement/components/service-header"></template>
 
-<div id="service-search">
+<div id="service-search" v-cloak>
     <div class="search">
         <div class="title">区域服务商查询</div>
     </div>
     <div class="search-contain">
         <div class="search-frist">
             <div class="search-input">
-                <van-search v-model="form.name" placeholder="请输入搜索关键词" />
+                <van-search v-model="form.providersName" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
             </div>
             <div class="search-btn">
                 <el-button @click="toSearchProvider">查询</el-button>
             </div>
         </div>
         <div class="contain">
-            <div class="contain-title">服务商：</div>
-            <provider-item v-for="i, o in 1" :key="o" />
+            <div class="contain-title" v-if="providerList.length !== 0">服务商：</div>
+            <provider-item v-for="i, o in providerList" :key="o" :item-obj="i" />
         </div>
     </div>
     <com-footer />
@@ -35,7 +35,7 @@
 <template th:replace="service-settlement/components/service-footer"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/service-settlement/components/footerComp.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/service-settlement/components/provider-item.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/service-settlement/index.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/service-settlement/search.js(v=${version})}"></script>
 </body>
 </html>