first 组件库模版

表单

 <fui-form ref="form" label-align="right" class="mb-20">
      <fui-input required label="姓名" placeholder="请输入姓名" v-model="form.name"></fui-input>
      <fui-input required label="手机号" placeholder="请输入手机号码" v-model="form.phone" @blur="checkPhone()"></fui-input>
 </fui-form>

<fui-form-item label="姓名" asterisk>
	<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入姓名"></fui-input>
</fui-form-item>
<fui-form-item label="手机号码" asterisk>
	<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
</fui-form-item>

输入框

unf-f-input

<fui-form-item label="$label$" :asterisk="$asterisk$">
	<fui-input :borderBottom="$borderBottom$" :padding="[0]" placeholder="请输入$label$"></fui-input>
</fui-form-item>

enum("姓名","手机号","昵称","内容")
enum("true","false")

多文本框

 <fui-textarea
    v-model="form.content"
    label="咨询内容"
    placeholder="请输入咨询内容"
    height="200rpx"
    min-height="40rpx">
</fui-textarea>

单选

unf-f-radio 
<fui-form-item label="咨询人">
    <fui-radio-group name="radio"  @change="$changeNameType$">
        <view style="display: flex">
            <fui-label v-for="(item,index) in list"
                       :key="index"
                       :margin="index > 0 ? ['0','0','0','40rpx']:[]">
                <view class="fui-align__center" >
                    <fui-radio :value="item.type.toString()" :checked="form.$filed$*1 === item.type*1"></fui-radio>
                    <text class="fui-text">{{ item.name }}</text>
                </view>
            </fui-label>
        </view>
    </fui-radio-group>
</fui-form-item>

enum("changeType","changeStatus")
enum("id","type","status","cate_id")

切换

<fui-switch checked @change="change"></fui-switch>

function change(e){
    this.form.status = e.value;
}

多选

文件上传

unf-update
<fui-form-item label="图片">
    <xkt-upload :url="form.images" :max="6" @result="uploadResult"></xkt-upload>
</fui-form-item>

uploadResult(url){
    this.form.images.push(url);
}

时间选择

<fui-date-picker
            z-index="999999"
            :radius="true"
            title="请选择"
            :show="showDate"
            v-model="default_date"
            type="5" @change="changeDate" @cancel="cancelDate"></fui-date-picker>

showDate: false
dateType: "next_time"

selectDate(dataType=""){
    this.dataType = dataType;
    this.showDate = true;
},
changeDate(e) {
    switch (this.dateType) {
        case "next_time":
            this.form.next_time = e.result;
            break;
        case "promise_time":
            this.form.promise_time = e.result;
            break;
        case "yy_time":
            this.form.yy_time = e.result;
            break;
    }
    this.showDate = false;
},
cancelDate() {
    this.showDate = false;
},

选项选择

<fui-form-item label="来源渠道" asterisk arrow>
    <fui-input  :border-bottom="false" disabled :padding="[0]" placeholder="请选择来源渠道"
               @click="selectItem(EnumData.customer.channel)"
               v-model="channel_id"></fui-input>
</fui-form-item>

 <fui-picker :linkage="true" :title="title" :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker>

show: false,
title: "渠道",
options: [],
selectType: "", // 当前选择的类型

selectItem(labelType) {
    this.selectType = labelType;
    this.options = [];
    switch (labelType) {
        case EnumData.customer.minzu:
            this.title = "民族";
            EnumData.minzuList.forEach(item => {
                this.options.push({
                    text: item,
                    value: item
                });
            })
            break;
        default:
            this.title = "暂无选择";
            break;
    }
    this.show = true;
},
change(e) {
    switch (this.selectType) {
        case EnumData.customer.minzu:
            this.form.mz = e.value;
            break;
    }
    this.show = false;
},
cancel() {
    this.show = false;
},

层级选择

验证

unf-form
form: {
    id:0,
    name: "",
    phone: "",
}

unf-form-rules
rules: [
        { name: "name", rule: ["required"], msg: ["请输入姓名"] },
        {
            name: "phone", rule: ["required", "isMobile"], msg: ["请输入手机号", "请输入正确的手机号"]
        }
 ]

unf-submitForm
submitForm() {
    this.$refs.form.validator(this.form, this.rules).then(valid => {
        if (valid.isPassed) {
            $methods$(_.pick(this.form, this.keys)).then(res => {
                    if (res.code === 200) {
                        Message.success(res.msg);
                    } else {
                        Message.error(res.msg);
                    }
                })
            // 需要首页刷新一下页面
            this.openRefresh();
        } else {
            Message.warning("请检查必填项");
        }
    }).catch(err => {
        Message.error(err.errorMsg);
        return false;
    })
},

按钮

@unf-btn

<fui-button type="$type$" btnSize="$btnSize$" :plain="$plain$" radius="$radius$">保存</fui-button>

enum("success","warning")
enum("medium","small","mini")
enum("true","false")
enum("0rpx","16rpx")

顶部消息提示

<fui-message ref="msg" background="background: 'rgba(0,0,0,.6)'"></fui-message>

showMsg(){
    let options = {}
    options.text = 'Hello First UI！'
    this.$refs.msg.show(options)
}

<xkt-msg ref="msg" :msg="msg" ></xkt-msg>

this.$refs.msg.success()
this.$refs.msg.error()

弹窗确认

<fui-dialog :show="show" :content="content" maskClosable @click="onClick" @close="onClose"></fui-dialog>

加载更多

<fui-loadmore text="is_end ? '到底啦！':'正在加载...	'"></fui-loadmore>

底部弹窗

<xkt-popup title="张三" ref="archive_detail">
    <template v-slot:content>
        <fui-list >
            <fui-list-cell>姓名：{{ archive.name }}</fui-list-cell>
            <fui-list-cell>姓名：{{ archive.name }}</fui-list-cell>
            <fui-list-cell>姓名：{{ archive.name }}</fui-list-cell>
        </fui-list>
    </template>
</xkt-popup>

this.$refs.archive_detail.show();

# location / {
#     try_files $uri $uri/ /index.php?$query_string;
# }
include agent_deny.conf;
location /index.php {
    try_files /not_exists @octane;
}
location / {
    try_files $uri $uri/ @octane;
}
location @octane {
    set $suffix "";

    if ($uri = /index.php) {
        set $suffix ?$query_string;
    }

    proxy_http_version 1.1;
    proxy_set_header Host $http_host;
    proxy_set_header Scheme $scheme;
    proxy_set_header SERVER_PORT $server_port;
    proxy_set_header REMOTE_ADDR $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    proxy_pass http://127.0.0.1:18002$suffix;
}