waf-platform/EdgeAdmin/web/public/js/components/senders/sms-sender-plus.js

Vue.component("sms-sender", {
	props: ["value", "name"],
	mounted: function () {
		this.initType(this.config.type)
	},
	data: function () {
		let config = this.value
		if (config == null) {
			config = {
				isOn: false,
				type: "webHook",
				webHookParams: {
					url: "",
					method: "POST"
				},
				aliyunSMSParams: {
					sign: "",
					templateCode: "",
					codeVarName: "code",
					accessKeyId: "",
					accessKeySecret: ""
				},
				tencentSMSParams: {
					sdkAppId: "",
					sign: "",
					templateId: "",
					accessKeyId: "",
					accessKeySecret: ""
				}
			}
		}

		if (config.aliyunSMSParams == null) {
			Vue.set(config, "aliyunSMSParams", {
				sign: "",
				templateCode: "",
				codeVarName: "code",
				accessKeyId: "",
				accessKeySecret: ""
			})
		}
		if (config.tencentSMSParams == null) {
			Vue.set(config, "tencentSMSParams",  {
				sdkAppId: "",
				sign: "",
				templateId: "",
				accessKeyId: "",
				accessKeySecret: ""
			})
		}

		return {
			config: config
		}
	},
	watch: {
		"config.type": function (v) {
			this.initType(v)
		}
	},
	methods: {
		initType: function (v) {
			// initialize params
			switch (v) {
				case "webHook":
					if (this.config.webHookParams == null) {
						this.config.webHookParams = {
							url: "",
							method: "POST"
						}
					}
					break
			}
		},
		test: function () {
			window.TESTING_SMS_CONFIG = this.config
			teaweb.popup("/users/setting/smsTest", {
				height: "22em"
			})
		}
	},
	template: `<div>
	<input type="hidden" :name="name" :value="JSON.stringify(config)"/>
	<table class="ui table selectable definition">
		<tbody>
			<tr>
				<td class="title">启用</td>
				<td><checkbox v-model="config.isOn"></checkbox></td>
			</tr>
		</tbody>
		<tbody v-show="config.isOn">
			<tr>
				<td>发送渠道</td>
				<td>
					<select class="ui dropdown auto-width" v-model="config.type">
						<option value="webHook">自定义HTTP接口</option>
						<option value="aliyunSMS">阿里云短信</option>
						<option value="tencentSMS">腾讯云短信</option>
					</select>
					<p class="comment" v-if="config.type == 'webHook'">通过HTTP接口的方式调用你的自定义发送短信接口。</p>
					<p class="comment" v-if="config.type == 'aliyunSMS'">通过阿里云短信服务发送短信接口；<strong>目前仅支持发送验证码</strong>。</p>
					<p class="comment" v-if="config.type == 'tencentSMS'">通过腾讯云短信服务发送短信接口；<strong>目前仅支持发送验证码</strong>。</p>
				</td>				
			</tr>
			
			<!-- webhook -->
			<tr v-if="config.type == 'webHook' && config.webHookParams != null">
				<td class="color-border">HTTP接口的URL地址 *</td>
				<td>
					<input type="text" maxlength="100" placeholder="https://..." v-model="config.webHookParams.url"/>
					<p class="comment">接收发送短信请求的URL，必须以<code-label>http://</code-label>或<code-label>https://</code-label>开头。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'webHook' && config.webHookParams != null">
				<td class="color-border">HTTP接口的请求方法</td>
				<td>
					<select class="ui dropdown auto-width" v-model="config.webHookParams.method">
						<option value="GET">GET</option>
						<option value="POST">POST</option>
					</select>
					<p class="comment" v-if="config.webHookParams.method == 'GET'">以在URL参数中加入mobile、body和code三个参数（<code-label>YOUR_API_URL?mobile=手机号&amp;body=短信内容&code=验证码</code-label>)的方式调用你的HTTP接口的URL地址；状态码返回200表示成功。</p>
					<p class="comment" v-if="config.webHookParams.method == 'POST'">通过POST表单发送mobile、body和code三个参数（<code-label>mobile=手机号&amp;body=短信内容&code=验证码</code-label>）的方式调用你的HTTP接口URL地址；状态码返回200表示成功。</p>
				</td>
			</tr>
			
			<!-- aliyun sms -->
			<tr v-if="config.type == 'aliyunSMS'">
				<td class="color-border">签名名称 *</td>
				<td><input type="text" v-model="config.aliyunSMSParams.sign" maxlength="12"/>
					<p class="comment">在阿里云短信服务 “签名管理” 中添加并通过审核后才能使用。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'aliyunSMS'">
				<td class="color-border">模板CODE *</td>
				<td>
					<input type="text" v-model="config.aliyunSMSParams.templateCode" maxlength="30"/>
					<p class="comment">在阿里云短信服务 “模板管理” 中添加并通过审核后才能使用。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'aliyunSMS'">
				<td class="color-border">模板中验证码变量名称 *</td>
				<td>
					<input type="text" v-model="config.aliyunSMSParams.codeVarName" maxlength="30"/>
					<p class="comment">默认为<code-label>code</code-label>，不需要带\${}等符号，即表示在模板中使用<code-label>\${<span>{{ config.aliyunSMSParams.codeVarName }}</span>}</code-label>代表要发送的验证码。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'aliyunSMS'">
				<td class="color-border">AccessKey ID *</td>
				<td>
					<input type="text" v-model="config.aliyunSMSParams.accessKeyId" maxlength="100"/>
					<p class="comment">在阿里云 -- RAM访问控制 -- AccessKey中可以创建和获取。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'aliyunSMS'">
				<td class="color-border">AccessKey Secret *</td>
				<td>
					<input type="text" v-model="config.aliyunSMSParams.accessKeySecret" maxlength="100"/>
					<p class="comment">和表单中的AccessKey ID对应，在阿里云 -- RAM访问控制 -- AccessKey中可以创建和获取。</p>
				</td>
			</tr>
			
			<!-- tencent sms -->
			<tr v-if="config.type == 'tencentSMS'">
				<td>SDK应用ID *</td>
				<td>
					<input type="text" v-model="config.tencentSMSParams.sdkAppId" maxlength="30"/>
					<p class="comment">在腾讯云 -- 短信 -- 应用管理 -- 应用列表中可以查看。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'tencentSMS'">
				<td>签名内容 *</td>
				<td>
					<input type="text" v-model="config.tencentSMSParams.sign" maxlength="12"/>
					<p class="comment">比如“腾讯云”，在腾讯云 -- 短信 -- 签名管理中可以查看。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'tencentSMS'">
				<td>正文模板ID *</td>
				<td>
					<input type="text" v-model="config.tencentSMSParams.templateId" maxlength="50"/>
					<p class="comment">在腾讯云 -- 短信 -- 正文模板管理中可以查看。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'tencentSMS'">
				<td>密钥SecretId *</td>
				<td>
					<input type="text" v-model="config.tencentSMSParams.accessKeyId"/>
					<p class="comment">同SecretKey一同在腾讯云 -- 访问管理 -- API密钥管理中获取。</p>
				</td>
			</tr>
			<tr v-if="config.type == 'tencentSMS'">
				<td>密钥SecretKey *</td>
				<td>
					<input type="text" v-model="config.tencentSMSParams.accessKeySecret"/>
					<p class="comment">同SecretId一同在腾讯云 -- 访问管理 -- API密钥管理中获取。</p>
				</td>
			</tr>
			
			<tr>
				<td>发送测试</td>
				<td><a href="" @click.prevent="test">[点此测试]</a></td>
			</tr>
		</tbody>
	</table>
	<div class="margin"></div>
</div>`
})