者 | Mateusz Iwaniuk
譯者 | 明明如月,責編 | 夕顏
出品 | CSDN(ID:CSDNnews)
文章配套代碼: https://github.com/iwaniukooo11/email-sender
現(xiàn)在,即使是創(chuàng)建最基本的網(wǎng)站,程序員也必須使用現(xiàn)代的功能和技術。甚至像為你的朋友創(chuàng)建簡單的投資組合這樣的基本項目也可能涉及到一些問題,比如從聯(lián)系人表單接收數(shù)據(jù)。有很多方法可以讀取這些數(shù)據(jù)。你可以將表單與數(shù)據(jù)庫連接起來,然后從數(shù)據(jù)庫中讀取傳入的消息來實現(xiàn)功能,但這樣做會給不懂技術的客戶造成困難。
你為什么不通過發(fā)送電子郵件傳輸信息?
不使用數(shù)據(jù)庫就能接收到傳入的消息,絕對是最佳選擇,也是最方便用戶的選擇。但問題來了—如何實現(xiàn)呢?你可能認為需要使用某種后端語言。
實際上,你不必使用任何如 php 或 python 這種后端語言,你甚至不需要用到 node.js!你需要的就是一個簡單的EmailJS 庫。
本文將介紹下面兩個重要功能:
配置 emailjs 帳戶
使用 JS 發(fā)送電子郵件
請注意,在我的項目中,我使用了 gulp 和 webpack,我在 src 文件夾存放源碼,dist 存放最終發(fā)布版本的代碼。
我將分 5 個步驟向你展示如何從頭開始構建電子郵件發(fā)送器。
步驟1-用 HTML 創(chuàng)建表單
首先需要創(chuàng)建一個 HTML 表單。你不必放置像 required 或 max 這種驗證屬性,因為稍后,preventDefault 函數(shù)將在你的提交事件上運行,它會讓這些屬性的處理失效。
表單中最重要的是為每個輸入放置 name 屬性,后面會用到。
我的非常簡單的表單是這樣的:
src/html/index.html
<form class="form">
<input name='name' type="text" placeholder="Your name..." class="form__input" />
<input name='topic' type="text" placeholder="Topic..." class="form__input" />
<textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea>
<input type="submit" value="send" class="form__input form__input--button">
</form>
步驟2-注冊成為 email 用戶
要配置你的電子郵件,你必須注冊電子郵件服務。別擔心—使用這個網(wǎng)站非常方便和省時。
登入后,系統(tǒng)會詢問你的電子郵件服務,它位于個人電子郵件服務區(qū)(personal email service)。在我的例子中,我選擇了 gmail。
然后,你需要連接你的 gmail 帳戶。這將用來發(fā)送電子郵件給你客戶。例如,如果你關聯(lián)了 xyz@gmail.com 賬戶,你后續(xù)發(fā)送的郵件都將從這個郵箱發(fā)出。所以不要擔心“ Send email on your behalf” 這個授權信息—這正是你需要的!
連接完 gmail 賬戶后,點擊添加服務(add service)按鈕。
步驟3-創(chuàng)建郵件模板
如果你已經成功連接了你的 gmail 賬戶,你現(xiàn)在應該在信息中心中。現(xiàn)在需要創(chuàng)建電子郵件模板了。
切換到電子郵件模板卡,并單擊創(chuàng)建一個新的模板(create a new template)。界面非常友好,所以創(chuàng)建模板不會有任何問題。
你可以選擇模板的名稱和 ID。我稱之為“我的神奇模板(my_amazing_template)”。
接下來,你必須指定郵件的內容。
模板的變量值來自 input 中的 `name` 屬性。你已將變量插入`{{{}}}`符號中。
不要忘記在“收件人”部分 (右側) 添加電子郵件地址。你的電子郵件將被發(fā)送到該電子郵件地址上。截圖中的收件人郵箱是我自己的公司郵箱。
這是我的簡單模板,它使用來自 HTML 表單里的 3 個變量。我還指定了接收電子郵件的主題。
步驟4-保存 API 密鑰
這部分沒什么特別的。Emailjs 共享授權 API 密鑰,將在發(fā)送電子郵件時使用。當然,放這些鑰匙最好的地方是`.env` 配置。但是因為我使用的是簡單的靜態(tài)文件,我不想使用服務器配置,所以我將它們保存在 apikeys 文件中,然后再將它們導入。
你的 USER_ID 位于 Account > API Keys 菜單下。
TEMPLATE_ID 位于模板的標題下面。
這是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.
src/js/apikeys.js
export default {
USER_ID :'user_DPUd-rest-of-my-id',
TEMPLATE_ID:'my_amazing_template'
}
如果需要將源碼發(fā)布到 GITHUB,不要忘記將 APIKEYS 文件添加到 .GITIGNORE文件中
現(xiàn)在是該項目最后也是最重要的部分的了。現(xiàn)在我們必須使用 javascript 發(fā)送電子郵件。
首先,你必須下載 emailjs 包。
npm i emails-com
然后,轉到 js 文件,導入庫和 apikeys。
src/js/main.js
import emailjs from 'emailjs-com'
import apiKeys from './apikeys'
現(xiàn)在是編寫發(fā)送電子郵件功能的時候了
src/js/main.js
const sendEmail = e => {
e.preventDefault
emailjs
.sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID)
.then(
result => {
console.log(result.text)
},
error => {
console.log(error.text)
}
)
}
sendForm 函數(shù)有4個參數(shù):
你的電子郵件的 ID,在這里:
TEMPLATE_ID 來自 apikey 文件,
事件對象來自你的表單提交
USER_ID 來自 apikey 文件,
最后,查找表單并添加提交事件監(jiān)聽器:
src/js/main.js
const form = document.querySelector('.form')
form.addEventListener('submit',sendEmail)
正如我前面提到的,由于 `preventDefault` 函數(shù),屬性驗證將無法工作。你必須使用 JS 自己進行驗證和清除輸入。
以上就是全部內容,接下來讓我們測試一下。
填寫頁面上的表單并發(fā)送。
我收到電子郵件,內容正是根據(jù)我們的模板和表單數(shù)據(jù)渲染出來的。
通過上圖可以看出,所有的變量的值都填充到了正確的位置上。
通過本文的介紹你會發(fā)現(xiàn)用 JS 發(fā)送郵件并非難事。
使用 emailjs,你可以簡單的方式發(fā)送電子郵件。
我相信你未來的用戶會很高興收到來自他們網(wǎng)頁上表單填寫數(shù)據(jù)的t郵件,相信本文對你有幫助。
這篇文章的配套代碼在這里: https://github.com/iwaniukooo11/email-sender
原文鏈接:
https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d
本文為CSDN翻譯文章,轉載請注明出處。
?我們想研發(fā)一個機器學習框架,6 個月后失敗了
?生產型機器學習已經沒那么困難了?
?視頻 | 你不知道的"開源"60年秘史
?GitHub標星10,000+,Apache項目ShardingSphere的開源之路
?阿里技術專家告訴你,如何畫出優(yōu)秀的架構圖?
?加拿大API平臺如何做到30%為中國明星項目?創(chuàng)業(yè)老兵這樣說……
常生活工作學習中,大家對電子表格必定不陌生。從工作數(shù)據(jù)匯總分析到出門收據(jù)各種電子發(fā)票,這些都是由電子表格制作出來的。
不過大家對電子表格的印象可能停留在這里:
標準行列數(shù)據(jù)統(tǒng)計的表格樣式。但其實,表格也可以是這樣的:
工作中遇到需要實現(xiàn)的表格情況往往比大家想象的要更加復雜,最近我們在做客戶支持的工作過程中遇到了一個客戶,他需要借助電子表格表格實現(xiàn)合同中的電子簽名。
電子簽名通俗來說就是通過技術手段實現(xiàn)在電子文檔上加載電子形式的簽名,其作用類似于紙質合同上的手寫簽名或加蓋的公章。在企業(yè)工作流審批、請柬、單據(jù)保全等場景應用廣泛。
在經濟活躍跨區(qū)域化現(xiàn)象越來越多的今天,作為電子表格的一個重要使用場景,電子合同可以實現(xiàn)異地簽約,簽署的時間第點更加自由;面對大批量的合同簽署也可以輕松解決;同時傳統(tǒng)紙質合同的管理更加方便,避免了紙質合同因保存管理問題而出現(xiàn)損壞。
而今天,客戶在實際項目中需要實現(xiàn)的內容長這樣:
看到這里,有些小伙伴可能會說這有什么難的,雖然這個東西長相酷似word,
但不就是電子表格去掉邊框線嗎?
如果只是簡單的表格框內容,下段代碼就可以簡單的實現(xiàn)表格的繪制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02Canvas案例-繪制表格</title>
</head>
<body>
<div id="container">
<canvas id="cavsElem">
</canvas>
</div>
<script>
(function(){
var canvas=document.querySelector('#cavsElem');
var ctx=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
canvas.style.border='1px solid green';
var rectH=10;
var rectW=20;
ctx.lineWidth=.5;
//繪制表格
// 第一步: 繪制橫線
for(var i=0;i<canvas.width;i++){
ctx.moveTo(rectW*i,0);
//如果不設置moveTo,當前畫筆沒有位置
ctx.lineTo(rectW*i,canvas.height);
}
//第二步:繪制豎線:如果繪制的格子的寬高相等,可以將for循環(huán)放到一個里面;
for(var i=0;i<canvas.height;i++){
ctx.moveTo(0,rectH*i);
ctx.lineTo(canvas.width,rectH*i);
}
ctx.stroke();
}())
</script>
</body>
</html>
但是放大仔細看看,就會發(fā)現(xiàn)情況并不如我們所想的這么簡單。
在這個合同中,我們除了要隱藏邊框線,還要考慮邊緣留白、圖片跨越、頁面滾動后截圖不全等問題。 而借助電子表格在數(shù)據(jù)處理和分析方面天生具備的優(yōu)勢,可以很容易的實現(xiàn)電子簽名功能。
我們今天就一起來嘗試通過基于Canvas的電子表格來實現(xiàn)電子簽名并導出PDF的項目開發(fā)需求。
2. 初始化Spread工作簿,并導入合同模板
3. 創(chuàng)建Canvas畫布并引用esign.js畫法實現(xiàn)手寫簽名區(qū)域
4. 通過自定義超鏈接跳轉命令,簽名區(qū)域呼出
5. 將簽名區(qū)域轉化為圖片設置為背景圖片
6. 使用SpreadJS提供的導出PDF接口將簽署的文件導出
初始化Spread工作簿
1、引入以下文件
<link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="new2.ssjson" type="text/javascript"></script>
2、創(chuàng)建用于承載SpreadJS的DOM
<div id="ss" class="sample-spreadsheets" style="height: 900px;">
3、用JS獲取DOM對象并進行初始化
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
4、導入合同模板
spread.fromJSON(str);
到這里,我們Spread工作簿已經初始化完成了。當然,你也可以添加對應的CSS調整表單的大小。
關于模板的制作,你可以在在線表格編輯器中根據(jù)需求進行繪制,并導出為ssjson文件并通過fromJSON導入到我們的表單中。
接下來,用Canvas畫布來實現(xiàn)手寫簽名區(qū)域。
手寫簽名區(qū)域
1、首先,我們先創(chuàng)建簽名區(qū)域的DOM元素,并定義一個Canvas畫布,默認情況下不顯示。
<div class="containter" id="box" style="display: none;">
<div class="canvasDiv">
<div id="editing_area">
<canvas id="canvasEdit"></canvas>
</div>
</div>
<div class="btnDiv">
<a id="sign_clear" class="clearBtn">清空</a>
<a id="sign_clear2" class="clearBtn">簽署</a>
</div>
</div>
2、引用esign.js和jQuery。Esign.js是一種用鼠標在canvas上繪制的畫法。
<script type="text/javascript" src="js/esign.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
3、初始化
$(document).esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
$(document).on('click', '#sign_clear2', takeScreenshot);
Canvas畫布中利用自定義單元格,理論上也是能開發(fā)出能夠直接簽名的單元格。
用戶可以直接在單元格進行簽名,有興趣的小伙伴可以嘗試用自定義單元格實現(xiàn)。
1、創(chuàng)建超鏈接
sheet.setValue(32, 10, "審核人簽名:")
sheet.setHyperlink(32, 10, { command: "popup" });
2、為超鏈接設置命令,點擊彈出畫布
spread.commandManager().register("popup",{
canUndo: true,
execute: function (context, options, isUndo) {
var Commands = GC.Spread.Sheets.Commands;
// 在此加cmd
options.cmd = "popup";
if (isUndo) {
Commands.undoTransaction(context, options);
return true;
} else {
Commands.startTransaction(context, options);
document.getElementById("box").style.display = "block";
Commands.endTransaction(context, options);
return true;
}
}
});
1、利用canvas的接口,將畫布轉為base64,調用接口設置背景
function convertCanvasToImage(canvas) {
return canvas.toDataURL("image/png");
};
function takeScreenshot() {
var canvas = document.getElementById("canvasEdit");
var imgUrl = convertCanvasToImage(canvas); //截取圖片路徑,該路徑為服務器參數(shù)
var sheet = spread.getSheet(0);
sheet.getCell(32,13).backgroundImage(imgUrl);
sheet.getCell(35,13).backgroundImage(imgUrl);
sheet.getCell(38,13).backgroundImage(imgUrl);
}
2、關閉簽名畫布
function tishi(){
document.getElementById("box").style.display = "none";
}
setTimeout(tishi,100)
上面已經實現(xiàn)了電子簽名內容,但是我們都知道合同需要有打印輸出功能,接下來我們繼續(xù)介紹如何使用pdf打印輸出電子簽名。
1、引用PDF拓展文件以及filesaver
<script src="node_modules/@grapecity/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>
<script src="node_modules/file-saver/dist/FileSaver.min.js" type="text/javascript"></script>
2、調用接口導出PDF
spread.savePDF(function (blob) {
var fileName = 'download';
saveAs(blob, fileName + '.pdf');
}, function (error) {
console.log(error);
}, {
title: 'Test Title',
});
注意:導出中文字符需要注冊對應的字體。
以上,我們實現(xiàn)了基于Canvas電子表格實現(xiàn)電子簽名并使用PDF導出打印的完整功能,由于Canvas完全取代了頁面的dom結構,因此打印時不需要遍歷要打印的dom節(jié)點的子節(jié)點,也不必將每一頁所能打印的dom節(jié)點高度累加,這樣做可以不用再計算dom節(jié)點的高度,大幅節(jié)省了系統(tǒng)性能,同時實現(xiàn)了較細的頁面顆粒度,不會造成大塊空白的情況,完全模擬出了word生成pdf的那種效果。同時,也解決了我們在文章開頭中提到緣留白、圖片跨越、頁面滾動后截圖不全三個問題。
關注我們的賬號,接下來還會為大家?guī)砀嘣诠ぷ黜椖恐杏龅降挠腥热荨?/p>
來都來了,點個贊再走吧吧~
我們在瀏覽網(wǎng)頁時會經常遇到注冊會員的界面,大概像這個樣子:
或填寫問卷的情況,大概像這個樣子:
我們把這些內容稱之為表單。
如何向自己的頁面中添加表單呢?
添加表單的操作和添加表格類似。
首先我們要在頁面中寫入<form></form>標簽,這是向瀏覽器聲明這里是個表單,它本身并不會顯示在頁面中,但是可以全局控制表單元素的一些屬性,就像表格中的<table></table>標簽。
然后再在<form></form>中寫入<input/>標簽,這個標簽的內容就會顯示在頁面中了,就像表格元素中的<tr><td>標簽。不同的是<input/>沒有結尾標簽。
下面讓我們寫一寫。
首先復制"第一個頁面.html"文件。改名為"表單.html",然后清空<body></body>中的內容,將<head></head>中間的<title></title>中間的內容改為"表單",這樣方便我們查看測試頁面。
示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
</body>
</html>
下面我們要寫入表單內容,示例代碼如下:
<form> <input/></form>
頁面效果如下:
只有一個輸入框。下面,我們?yōu)檩斎肟蛱砑用Q"會員名稱:",示例代碼如下:
<form> 會員名稱: <input/></form>
效果如下:
這樣我們就寫出了一個簡單的表單,如果為表單添加更多內容和設置,就要繼續(xù)了解表單的屬性。
表單元素屬性1
<input/>標簽通過改變type屬性可以變換出不同功能,在頁面制作中,我認為<input/>標簽中的type屬性最重要。
下面我們來看一下type屬性不同的值。
圖片來源W3School
輸入文字:首先,先來看text值。說明很明確,這個屬性值的<input>標簽主要是用來輸入文本,比如"會員名稱。"
示例代碼如下:
<form> 會員名稱: <input type="text"/></form>
頁面效果如圖所示:我胡亂輸入了幾個字母
如果不指定type的text值的話,表面看起來并不影響輸入內容,但是表單的內容最終是要提交到服務器的,如果不注明type="text",服務器就不能判斷你輸入的字符到底是一段代碼還是一段字符串組成的文本,因此,我們?yōu)榱俗屘岬慕粩?shù)據(jù)在服務器端能被準確識別,一定要寫好type的屬性。
除此之外變換type值也能為<input/>變換不同功能。
制作提交按鈕:例如"submit"(提交)。在我們輸入完表單內容后,一般都有一個提交按鈕,這個提交按鈕也是由<input/>標簽來完成的。
示例代碼如下:
<form> 會員名稱: <input type="text"/> <input type="submit"/></form>
如圖所示:
因為<input/>是內聯(lián)元素,所以"submit"按鈕會和之前的<input>顯示在一行,換行的話很簡單,可以使用<br>標簽。
大家觀察一下發(fā)現(xiàn),我們并沒有給"submit"按鈕指定文字,在按鈕上卻出現(xiàn)了"提交查詢"的字樣,這是html默認的,如果我們要改變按鈕文字就要使用value這個屬性。示例代碼如下:
<input type="submit" value = "提交"/>
頁面效果如下:
其實我們在輸入文字時,輸入框里會經常有提示文字,當我們點擊輸入框時,提示文字消失了,這個功能怎么實現(xiàn)?
這又涉及到一個新屬性,叫做"placeholder"(提示文字)。
示例代碼如下:
<input type="text" placeholder = "請輸入英文或漢語拼音"/>
頁面效果如下:
下面我們來練習一下,示例代碼如下:
<form>
會員名稱:
<input type = "text" placeholder = "請輸入英文或漢語拼音"/><br>
會員密碼:<input type = "text" placeholder = "請輸入英文字母、特殊符號、數(shù)字"/><br>
確認密碼:<input type = "text" /><br><input type = "submit" value = "提交"/><br>
</form>
頁面效果如下:(想把密碼字符顯示為小圓點的讀者可以先去屬性值列表中找找"password"看看,咱們后面會細致講解)
制作多選表單:多選表單的type屬性值是"checkbox"。
我猜大家也猜到該怎么寫了,示例代碼如下:
<form>
興趣愛好:<br>
<input type = "checkbox" name="hobby" value = "reading"/>讀書
<input type = "checkbox" name="hobby" value = "film"/>電影
<input type = "checkbox" name="hobby" value = "painting"/>繪畫
<input type = "checkbox" name="hobby" value = "music"/>音樂
<br>
<input type = "submit" value = "submit"/>
</form>
頁面效果如下:
大家可以點點試試,可以多選了。如圖:
這時小伙伴們會發(fā)現(xiàn)在這組示例中,出現(xiàn)了name和value兩個屬性。
先說value,在"submit"中,value的值也就是"提交"二字,是直接顯示在按鈕上的,而這里的value值卻沒有顯示,顯示出來的是我們在<input/>標簽后面輸入的"讀書、電影、繪畫、音樂"這樣的字樣。也就是說這里的value不會顯示為選框的名字!
那value屬性是干嘛的呢?實際上"checkbox"屬性下的value屬性值是寫給后臺的服務器看的。
我們向服務器提交選擇后,服務器把name的名稱作為數(shù)據(jù)的大類名稱,把value值作為大類中的子類名稱來存儲或分析數(shù)據(jù)。
比如這個選擇表單是有關興趣愛好的,因此數(shù)據(jù)的大類屬于"愛好"(hobby),即name="hobby",hobby中又分為"reading"(讀書),"film"(電影),"painting"(繪畫),"music"(音樂),即value="reading"、value="film"等等。這樣不同用戶的不同選擇就按照這個數(shù)據(jù)組織方式提交給了服務器。
大家明白了嗎?
另外需要說明的是,name和value最好使用英文或拼音來書寫!
雖然我們目前不涉及后端服務器上的操作,但是在學習時要養(yǎng)成規(guī)范書寫的習慣。
其實,除了type="submit"的情況外,其他需要輸入信息的type屬性類型都是要寫name屬性的,不過不同type屬性類型的value卻不太一樣。
下面我們來看看type="text"時的標準寫法:當type="text"的時候,不必寫value屬性,因為value值為用戶輸入的內容
<form>
會員名稱:
<input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
會員密碼:
<input type = "text" placeholder = "請輸入英文字母、特殊符號、數(shù)字" name="passWord"/><br>
確認密碼:<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
今天的內容先到這里,我們明天繼續(xù)講解"表單元素"。
喜歡的小伙伴請關注和轉發(fā),閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
HTML序章(學習目的、對象、基本概念)——零基礎自學網(wǎng)頁制作
HTML是什么?——零基礎自學網(wǎng)頁制作
第一個HTML頁面如何寫?——零基礎自學網(wǎng)頁制作
HTML頁面中head標簽有啥用?——零基礎自學網(wǎng)頁制作
初識meta標簽與SEO——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作
HTML元素中的屬性1——零基礎自學網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎自學網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作
HTML中的塊級元素與內聯(lián)元素——零基礎自學網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作
封閉在家學網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作
HTML表單元素初識1——零基礎自學網(wǎng)頁制作
HTML表單元素初識2——零基礎自學網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎自學網(wǎng)頁制作
HTML列表制作講解——零基礎自學網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內鏈接——零基礎自學網(wǎng)頁制作
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。