qimall/addons/ReservationService/backend/views/setting/sms.php

<el-form-item label="当前使用短信平台：" label-width="150px">
    <span v-if="mall_sms == 'aliyun'">阿里云</span>
    <span v-if="mall_sms == 'qcloud'">腾讯云</span>
    <span v-if="mall_sms == 'submail'">赛邮云</span>
</el-form-item>

<el-tabs v-model="form.sms.mall_sms" @tab-click="mallSmsClick" type="card">
    <el-tab-pane label="阿里云" name="aliyun"></el-tab-pane>
    <el-tab-pane label="腾讯云" name="qcloud"></el-tab-pane>
    <el-tab-pane label="赛邮云" name="submail"></el-tab-pane>
</el-tabs>

<el-table size="mini" border :data="events" style="width: 400px">
    <el-table-column prop="title" label="短信模板名称" align="center"></el-table-column>
    <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
            <el-button @click="onSetSmsConfig(scope.row)"><i class="el-icon-edit-outline"></i></el-button>
        </template>
    </el-table-column>
</el-table>

<el-dialog title="短信模板设置" :visible.sync="smsDialogShow" class="smsDialog" width="30%">
    <el-form size="small" ref="smsForm" label-width="100px" :model="form.sms[smsCurrentKey].data" :rules="rules">
        <el-form-item label="模板id" prop="template_id" :rules="[{required: true, message: '模板id不能为空',trigger: 'blur'}]">
            <el-input v-model="form.sms[smsCurrentKey].data.template_id" placeholder="请输入模板id"></el-input>
        </el-form-item>
        <el-form-item label="模板内容" prop="content" :rules="[{required: true, message: '模板内容不能为空',trigger: 'blur'}]">
            <el-input v-model="form.sms[smsCurrentKey].data.content" placeholder="请输入模板内容" type="textarea" rows="5"
                      @input="onInputContent"></el-input>
        </el-form-item>
        <el-form-item label="变量替换" v-if="form.sms[smsCurrentKey].data.vars && form.sms[smsCurrentKey].data.vars.length > 0">
            <el-table size="mini" :data="form.sms[smsCurrentKey].data.vars" border>
                <el-table-column prop="name" label="变量名" align="center"></el-table-column>
                <el-table-column label="替换内容" align="center">
                    <template slot-scope="scope">
                        <el-select size="mini" v-model="scope.row.key" placeholder="请选择需要替换的内容">
                            <el-option v-for="(item, key) in smsKeys" :key="key" :label="item" :value="key"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item label="模板key" prop="key">
            <el-input v-model="form.sms[smsCurrentKey].data.key" placeholder="请输入模板key"></el-input>
        </el-form-item>
        <el-form-item label="模板名称" prop="name">
            <el-input v-model="form.sms[smsCurrentKey].data.name" placeholder="请输入模板名称"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="onSmsDialogHide" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="onSmsDialogHide">确 定</el-button>
    </span>
</el-dialog>