【21】淘宝sdk——入门实战之客服模块

这里我们要弄一个客服模块，光有产品，没有客服，那怎么赚钱啊，所以，我们的客服就来了

这里的我们的客服模块是950通栏布局

首页也是在控制台中创建我们的客服模块kefu01

再在index.php中写我们的模块

<!-- 950通栏0 -->
<div class="layout grid-m">
    <div class="main_01_modules J_TRegion">
        <?php $main_01_modules = array(
                array('id' => 'kefu01', domId => "kefu_01"), // 客服模块
             );
         echo include_modules('main_01_modules', $main_01_modules);//引号里是坑名，后面是变量名
        ?>
    </div>

</div>

 打开我们创建的客服模块（kefu01.php）写代码

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR?>>
    <div class="kefu950">
	    <div class="kefu_left">
		    <div class="keftu_top">
			    <strong>售前咨询：</strong>
				<ul>
					<?php
					//explode函数是php用用来分割数组的，这里是用“|”来分割引入的数组，当然在网上也有很多是用“，”来分割的，看个人喜欢吧
					$WWID_1 = explode('|',$_MODULE['wwid_1']);
                    $NAME_1 = explode('|',$_MODULE['name_1']);
                    for ($i=0;$i<count($WWID_1);$i++) {   
                        if (!$WWID_1[$i]==null){
                            echo '<li><span>'.$NAME_1[$i].':</span>'.$uriManager->supportTag($WWID_1[$i],'点击这里给我发消息',$_MODULE['kefu_style_1'],$_MODULE['kefu_fenliu_1']).'</li>';	
                        }else{
						    echo '<li><span>NANE:</span>'.$uriManager->supportTag('菲戈之家','点击这里给我发消息',$_MODULE['kefu_style'],$_MODULE['kefu_fenliu']).'</li>';
						}
                    }
		    	    ?>
				</ul>
			</div>
			<div class="keftu_down">
			    <strong>售后查件：</strong>
				<ul>
                    <?php
					$WWID_2 = explode('|',$_MODULE['wwid_2']);
                    $NAME_2 = explode('|',$_MODULE['name_2']);
                    for ($i=0;$i<count($WWID_2);$i++) {   
                        if (!$WWID_2[$i]==null){
                            echo '<li><span>'.$NAME_2[$i].':</span>'.$uriManager->supportTag($WWID_2[$i],'点击这里给我发消息',$_MODULE['kefu_style_2'],$_MODULE['kefu_fenliu']).'</li>';	
                        }else{
						    echo '<li><span>NANE:</span>'.$uriManager->supportTag('菲戈之家','点击这里给我发消息',$_MODULE['kefu_style_2'],$_MODULE['kefu_fenliu_2']).'</li>';
						}
                    }
		    	    ?>
				</ul>
			</div>
		</div>
		<div class="kefu_right">
		    <div class="kefu_right_top"><?php echo $_MODULE['kefu_time'] ?></div>
            <div class="kefu_right_down"><?php echo $_MODULE['kefu_tel'] ?></div>
		</div>
	</div>
</div>

写下我们的功能吧，打开 module.xml

<?xml version="1.0" encoding="GBK" standalone="yes"?>
<module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <id>kefu01</id>
    <name>950客服</name>
    <file>kefu01.php</file>
    <thumbnail>assets/images/index.png</thumbnail>
    <description>950客服</description>
    <requiredCache>true</requiredCache>
    <parameters>
        <param label="◆售后服务旺旺风格┏" formType="select" readonly="false" description="请选择旺旺风格" ptype="number" name="kefu_style_1">
            <option selected="selected" value="2">风格二</option>
            <option value="1">风格一</option>
        </param>
        <param label="售前客服名称组┠" formType="textarea" readonly="false" description="在此输入客服名用|号分割" ptype="text" name="name_1">
         苹果|橘子|芒果|香蕉|橙子|西瓜|柑橘
        </param>
        <param label="售前旺旺ID组┠" formType="textarea" readonly="false" description="在此输入旺旺ID用|号分割" ptype="text" name="wwid_1">
         幸福魔方527:柠檬|菲戈:橘子|菲戈:芒果|菲戈:香蕉|菲戈:橙子|菲戈:西瓜|菲戈:柑橘
        </param>
        <param label="是否需要E客服分流┗" formType="select" readonly="false" description="如果是E客服主号，请选择是否需要分流" ptype="text" name="kefu_fenliu_1">
            <option selected="selected" value="false">不分流</option>
            <option value="true">分流</option>
        </param>
        <param label="★售后服务旺旺风格┏" formType="select" readonly="false" description="请选择旺旺风格" ptype="number" name="kefu_style_2">
            <option selected="selected" value="1">风格一</option>
            <option value="2">风格二</option>
        </param>  
        <param label="阿里旺旺账号ID┠" formType="textarea" readonly="false" description="在此输入客服名用|号分割" ptype="text" name="name_2">
         苹果|橘子
        </param>
        <param label="客服名字┠" formType="textarea" readonly="false" description="在此输入旺旺ID用|号分割" ptype="text" name="wwid_2">
         幸福魔方527:柠檬|菲戈:橘子
        </param>
        <param label="是否需要E客服分流┗" formType="select" readonly="false" description="如果是E客服主号，请选择是否需要分流" ptype="text" name="kefu_fenliu_2">
            <option selected="selected" value="false">不分流</option>
            <option value="true">分流</option>
        </param>
        <param label="右侧公告内容┏" formType="text" readonly="false" description="┓请输入网店在线时间【字数不宜过多】" ptype="text" name="kefu_time">
            在线时间：9--17:30 (周六休息)
        </param>
        <param label="右侧公告内容┗" formType="text" readonly="false" description="┛请输入网店联系电话【字数不宜过多】" ptype="text" name="kefu_tel">
            联系电话：400-616-1008
        </param>
    </parameters>
</module>

css样式

.kefu950{background:url(../images/kefu/kefu.jpg) no-repeat;border: 1px solid #DDDDDD;height: 65px;overflow: hidden; 948px;}
.kefu_left{display: inline;float: left; 560px;height: 65px;margin-left: 90px;overflow: hidden;}
.keftu_top{border-bottom: 1px dotted #CCCCCC;overflow: hidden;}
.keftu_top,.keftu_down{float: left;height: 32px;line-height: 32px; 560px;}
.keftu_top strong,.keftu_down strong{color: #666666;display: inline;float: left;margin-left: 12px;}
.keftu_top ul li,.keftu_down ul li{float: left;padding: 0 10px;}
.kefu_right{display: inline;float: right;height: 65px;margin-right: 5px;overflow: hidden; 195px;}
.kefu_right_top{ border-bottom: 1px dotted #CCCCCC;float: left;font-size: 12px;height: 32px;line-height: 32px;text-align: center; 195px;}
.kefu_right_down{float: left;font-size: 12px;height: 32px;line-height: 32px;text-align: center; 195px;}

 最后，我们出来的效果是这样的

用到的素材如下：

好了，我们的客服模块也出来了