1107
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<el-row>
|
||||
<div style="padding: 0rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
综合详情功能演示
|
||||
</div>
|
||||
<el-col :span="5">
|
||||
<div style="flex: 1;">
|
||||
<image style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fclubimg.club.vmall.com%2Fdata%2Fattachment%2Fforum%2F202007%2F17%2F232123momgketgdekbqtvl.jpg&refer=http%3A%2F%2Fclubimg.club.vmall.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611383212&t=3d0e493b7e997749772227dcc4fa3ae7"></image>
|
||||
</div>
|
||||
</el-col >
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">姓名：</text>
|
||||
<text style="color: #978e94">蒙奇D-呵呵</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">年龄：</text>
|
||||
<text style="color: #978e94">？？？？</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">性别：</text>
|
||||
<text style="color: #978e94">男</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">星座：</text>
|
||||
<text style="color: #978e94">天秤座</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">爱好：</text>
|
||||
<text style="color: #978e94">女</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">民族：</text>
|
||||
<text style="color: #978e94">神族</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">仙术：</text>
|
||||
<text style="color: #978e94">凌波微步</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">仙骨：</text>
|
||||
<text style="color: #978e94">百万年</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">查克拉：</text>
|
||||
<text style="color: #978e94">？？？？？</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">斗气等级：</text>
|
||||
<text style="color: #978e94">？？？？？</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">果实能力：</text>
|
||||
<text style="color: #978e94">震震果实</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">所属派别：</text>
|
||||
<text style="color: #978e94">黑手党</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
<el-col :span="24" style="border-bottom: 1px solid #ebeef5;">
|
||||
</el-col>
|
||||
|
||||
<!-- 其他信息 -->
|
||||
<el-col :span="24">
|
||||
<div style="padding: 20rpx;" class="grid-content bg-purple-dark">其它信息</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">住址：</text>
|
||||
<text style="color: #978e94">天界</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">家乡：</text>
|
||||
<text style="color: #978e94">神界</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">城市：</text>
|
||||
<text style="color: #978e94">天宫</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">仙龄：</text>
|
||||
<text style="color: #978e94">6000年</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">仙术：</text>
|
||||
<text style="color: #978e94">炎咒</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">公司：</text>
|
||||
<text style="color: #978e94">魔界</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="border-bottom: 1px solid #ebeef5;">
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
|
||||
<div style="padding: 20rpx;" class="grid-content bg-purple-dark">表格信息</div>
|
||||
|
||||
<el-table :data="data.tableData" style="width: 100%" border row-class-name="tableRowClassName">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
]
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
tableRowClassName({
|
||||
row,
|
||||
rowIndex
|
||||
}) {
|
||||
if (rowIndex === 1) {
|
||||
return 'warning-row';
|
||||
} else if (rowIndex === 3) {
|
||||
return 'success-row';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
|
||||
div {
|
||||
padding: 12rpx 0rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.el-table .warning-row {
|
||||
background: oldlace !important;
|
||||
}
|
||||
|
||||
.el-table .success-row {
|
||||
background: #f0f9eb !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
高级表单功能演示
|
||||
</div>
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 出差信息功能展示 -->
|
||||
<div style="padding: 40rpx;">
|
||||
<div style="padding: 20rpx; font-weight: bold;">出差信息</div>
|
||||
<el-form label-position="top" label-width="100px" size="small" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<el-form-item label="出差事由" prop="reason" required>
|
||||
<el-input v-model="data.ruleForm.reason"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<el-form-item label="合同编号" prop="number" required>
|
||||
<el-input v-model="data.ruleForm.number"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<!-- 选择对应的出差时间 -->
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<el-form-item label="出差日期" prop="travelDate" required>
|
||||
<el-date-picker style="width: 800rpx;" v-model="data.ruleForm.travelDate" type="date" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<!-- 出差时间对应的应该是和审批人一起的 -->
|
||||
<el-form-item label="审批人" prop="Urgency" required>
|
||||
<el-select v-model="data.ruleForm.Urgency" placeholder="选择审批人" style="width: 800rpx;">
|
||||
<el-option label="呵呵呵哒" value="shanghai" style="height: 100rpx;">
|
||||
<image style="width: 30%;height: 100%;border-radius: 300rpx;" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1959779733,683430928&fm=26&gp=0.jpg"></image>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px;line-height:100rpx;">审批人一号</span>
|
||||
</el-option>
|
||||
|
||||
<el-option label="呵呵呵哒" value="beijing" style="height: 100rpx;">
|
||||
<image style="width: 30%;height: 100%;border-radius: 300rpx;" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2334974629,3626811871&fm=26&gp=0.jpg"></image>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px;line-height:100rpx;">审批人二号</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="7" style="margin: 0rpx 20rpx;">
|
||||
<!-- 出差时间对应的应该是和审批人一起的 -->
|
||||
<el-form-item label="紧急程度" prop="Urgency">
|
||||
<el-radio v-model="data.radio" label="1">
|
||||
|
||||
<el-tag type="danger">超级紧急</el-tag>
|
||||
</el-radio>
|
||||
|
||||
<el-radio v-model="data.radio" label="2">
|
||||
<el-tag type="warning">一般紧急</el-tag>
|
||||
</el-radio>
|
||||
|
||||
<el-radio v-model="data.radio" label="3">
|
||||
<el-tag type="success">丝毫不慌</el-tag>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 行程信息功能展示 -->
|
||||
<div style="padding: 40rpx;">
|
||||
<div style="padding: 20rpx; font-weight: bold;">行程信息</div>
|
||||
|
||||
<el-form label-position="top" label-width="100px" size="small" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="block" style="margin: 0rpx 20rpx;">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="出发时间">
|
||||
<el-date-picker v-model="data.gotime" type="date" placeholder="选择出发日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form-item label="返程时间">
|
||||
<el-date-picker style="" v-model="data.backtime" type="date" placeholder="选择返程日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<!-- 选择对应的出差时间 -->
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<el-form-item label="交通类型">
|
||||
<el-select v-model="data.ruleForm.traffic" placeholder="选择交通类型" style="width: 800rpx;">
|
||||
|
||||
<el-option label="飞机" value="shanghai" style="height: 100rpx;">
|
||||
</el-option>
|
||||
|
||||
<el-option label="坦克" value="beijing" style="height: 100rpx;">
|
||||
</el-option>
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格的页面数据内容从这个地方开始 -->
|
||||
<div>
|
||||
<div style="padding: 20rpx; font-weight: bold;">同行人员</div>
|
||||
<div style="float: right;">
|
||||
<el-tooltip content="添加" placement="top">
|
||||
<el-button style="margin-right: 80rpx;" type="success" size="small" icon="el-icon-circle-plus-outline" @click="addData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-table :data="data.tableData" style="width: 100%">
|
||||
<el-table-column label="姓名">
|
||||
<template slot-scope="{row}">
|
||||
<el-form v-if="row.edit">
|
||||
<el-form-item>
|
||||
<el-input v-model="row.date" size="small" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-else>{{ row.date }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="员工编号">
|
||||
<template slot-scope="{row}">
|
||||
<el-form v-if="row.edit">
|
||||
<el-form-item>
|
||||
<el-input v-model="row.name" size="small" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="所属部门">
|
||||
<template slot-scope="{row}">
|
||||
<el-form v-if="row.edit">
|
||||
<el-form-item>
|
||||
<el-input v-model="row.address" size="small" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-else>{{ row.address }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="操作" width="120" :resizable="false">
|
||||
<template slot-scope="{row}">
|
||||
<el-tooltip v-if="row.edit" content="保存" placement="top">
|
||||
<el-button type="success" size="small" icon="el-icon-check" @click="checkEditSaveOk(row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip v-else-if="!row.edit" content="编辑" placement="top">
|
||||
<el-button type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button type="danger" size="small" icon="el-icon-error" @click="deletedata(row)" />
|
||||
</el-tooltip>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 点击添加之后对应的对话框 -->
|
||||
|
||||
<el-dialog title="提示" :visible.sync="data.dialogVisible" width="30%">
|
||||
<el-form label-position="left" size="small">
|
||||
|
||||
<el-form-item label="姓名" prop="name">
|
||||
|
||||
<el-input v-model="data.add.one" style="width: 600rpx;"></el-input>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="序号" prop="name">
|
||||
<el-input v-model="data.add.two" style="width: 600rpx;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="序号" prop="name">
|
||||
<el-select v-model="data.add.three" placeholder="选择对应部门" style="width: 800rpx;">
|
||||
|
||||
<el-option label="战忽部" value="zhanhu" style="height: 100rpx;">
|
||||
</el-option>
|
||||
<el-option label="策划部" value="cehua" style="height: 100rpx;">
|
||||
</el-option>
|
||||
<el-option label="财政部" value="caizheng" style="height: 100rpx;">
|
||||
</el-option>
|
||||
|
||||
<el-option label="人事部" value="renshi" style="height: 100rpx;">
|
||||
</el-option>
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-button @click="add()" type="success" size="medium" style="width:200rpx;">确定</el-button>
|
||||
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
// 去的时间和回来的时间
|
||||
gotime: '',
|
||||
backtime: '',
|
||||
// 选择城市等数据源
|
||||
props: {
|
||||
multiple: true
|
||||
},
|
||||
add: {
|
||||
one: '',
|
||||
two: '',
|
||||
three: '',
|
||||
},
|
||||
// 控制对话框的显示与否
|
||||
dialogVisible: false,
|
||||
// 多级联动数据源
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '第一层数据',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '第二层数据',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '数据一'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '数据二'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '数据三'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '数据四'
|
||||
}]
|
||||
}],
|
||||
}, ],
|
||||
// 多级联动的数据从这个地方开始
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
ruleForm: {
|
||||
reason: '',
|
||||
number: '',
|
||||
travelDate: '',
|
||||
Urgency: '',
|
||||
city: ''
|
||||
// name: '',
|
||||
// region: '',
|
||||
// date1: '',
|
||||
// date2: '',
|
||||
// delivery: false,
|
||||
// type: [],
|
||||
// resource: '',
|
||||
// desc: ''
|
||||
},
|
||||
tableData: [{
|
||||
date: '特朗普',
|
||||
name: '001',
|
||||
address: '战忽部',
|
||||
edit: false
|
||||
}, {
|
||||
date: '奥巴马',
|
||||
name: '002',
|
||||
address: '策划部',
|
||||
edit: false
|
||||
}, {
|
||||
date: '拜登',
|
||||
name: '003',
|
||||
address: '财政部',
|
||||
edit: false
|
||||
}, {
|
||||
date: '罗斯福',
|
||||
name: '004',
|
||||
address: '人事部',
|
||||
edit: false
|
||||
}],
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '长度在 3 到 5 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
reason: [{
|
||||
required: false,
|
||||
message: '请输入原因',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
city: [{
|
||||
required: false,
|
||||
message: '请输入出发城市',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
gotime: [{
|
||||
required: false,
|
||||
message: '请输入出发时间',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
backtime: [{
|
||||
required: false,
|
||||
message: '请输入返回时间',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
number: [{
|
||||
required: true,
|
||||
message: '请输入合同编号',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
travelDate: [{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请选择出差日期',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
Urgency: [{
|
||||
required: true,
|
||||
message: '请选择紧急程度',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
date2: [{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请选择时间',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
type: [{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
people: [{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请至少选择一个审批人',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
resource: [{
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
desc: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
checkEditSaveOk(row) {
|
||||
row.edit = !row.edit
|
||||
console.log(row)
|
||||
},
|
||||
deletedata(row) {
|
||||
let content = this.data.tableData
|
||||
content.map((item, index) => {
|
||||
item === row ? content.splice(index, 1) : console.log('不相等')
|
||||
})
|
||||
console.log(this.data.tableData)
|
||||
this.$message({
|
||||
message: '删除成功!',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
addData() {
|
||||
// 这个只控制对应的数据是否展示
|
||||
console.log('添加数据')
|
||||
this.data.dialogVisible = true
|
||||
},
|
||||
// 真实添加数据的逻辑
|
||||
add() {
|
||||
this.data.tableData.push({
|
||||
date: this.data.add.one,
|
||||
name: this.data.add.two,
|
||||
address: this.data.add.three,
|
||||
edit: false
|
||||
}, )
|
||||
this.$message({
|
||||
message: '添加成功!',
|
||||
type: 'success'
|
||||
});
|
||||
// 对应的添加的逻辑也已经完成
|
||||
this.data.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
普通表单功能演示
|
||||
</div>
|
||||
|
||||
<div style="padding-left: 300rpx;">
|
||||
|
||||
<el-radio-group v-model="data.labelPosition" size="small">
|
||||
<el-radio-button label="left">左对齐</el-radio-button>
|
||||
<el-radio-button label="right">右对齐</el-radio-button>
|
||||
<el-radio-button label="top">顶部对齐</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<div style="margin: 20px;"></div>
|
||||
|
||||
<el-form :label-position="data.labelPosition" label-width="100px" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
|
||||
|
||||
<el-form-item label="普通表单框" prop="name" required>
|
||||
|
||||
<el-col :span="10">
|
||||
<el-input v-model="data.ruleForm.name"></el-input>
|
||||
</el-col>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Select选择" prop="region" required>
|
||||
<el-col :span="24">
|
||||
<el-select v-model="data.ruleForm.region" placeholder="请选择活动区域">
|
||||
<el-option label="选项一" value="shanghai"></el-option>
|
||||
<el-option label="选项二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="时间选择器" required>
|
||||
<el-col :span="4">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="data.ruleForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" style="text-align: center;" :span="1">
|
||||
<text style="color: #ccc;">—</text>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker placeholder="选择时间" v-model="data.ruleForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 多级联动页面区域 -->
|
||||
<el-form-item label="多级联动" required>
|
||||
<div class="block">
|
||||
<el-cascader placeholder="多级联动组件展示" :options="data.options" :props="{ multiple: true }" filterable></el-cascader>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开关组件" prop="delivery" required>
|
||||
<el-switch v-model="data.ruleForm.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="多选框" prop="type" required>
|
||||
<el-checkbox-group v-model="data.ruleForm.type">
|
||||
<el-checkbox label="选项一" name="type"></el-checkbox>
|
||||
<el-checkbox label="选项二" name="type"></el-checkbox>
|
||||
<el-checkbox label="选项三" name="type"></el-checkbox>
|
||||
<el-checkbox label="选项四" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="单选框" prop="resource" required>
|
||||
<el-radio-group v-model="data.ruleForm.resource">
|
||||
<el-radio label="选项一"></el-radio>
|
||||
<el-radio label="选项二"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="活动形式" prop="desc" required>
|
||||
<el-col :span="10">
|
||||
<el-input type="textarea" v-model="data.ruleForm.desc"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
// 多级联动数据源
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '第一层数据',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '第二层数据',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '数据一'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '数据二'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '数据三'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '数据四'
|
||||
}]
|
||||
}],
|
||||
},
|
||||
],
|
||||
// 多级联动的数据从这个地方开始
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '长度在 3 到 5 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
cascade:[{
|
||||
required: false,
|
||||
message: '请输入活动名称',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
region: [{
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
date1: [{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请选择日期',
|
||||
trigger: 'change'
|
||||
}],
|
||||
date2: [{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请选择时间',
|
||||
trigger: 'change'
|
||||
}],
|
||||
type: [{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
resource: [{
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
desc: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
|
||||
// 设置所有input的样式
|
||||
</style>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
分步表单功能演示
|
||||
</div>
|
||||
|
||||
<view style="padding: 80rpx 400rpx;margin-left: 0rpx;width: 1700rpx;">
|
||||
<el-steps :active="data.step" align-center>
|
||||
<el-step title="填写转账信息" icon="el-icon-edit"></el-step>
|
||||
<el-step title="确认转账信息" icon="el-icon-edit-outline"></el-step>
|
||||
<el-step title="完成" icon="el-icon-circle-check"></el-step>
|
||||
</el-steps>
|
||||
</view>
|
||||
|
||||
<view style="margin-left: 700rpx;">
|
||||
<el-form
|
||||
:label-position="data.labelPosition" label-width="100px" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
|
||||
|
||||
<!-- step为1的逻辑开始 -->
|
||||
<view v-if="this.data.step==1">
|
||||
<el-form-item label="付款账户" prop="account" required>
|
||||
<el-col :span="24">
|
||||
<el-select v-model="data.ruleForm.account" style="width: 800rpx;">
|
||||
<el-option label="账户一" value="shanghai"></el-option>
|
||||
<el-option label="账户二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="收款账户" prop="pay" required :inline="true">
|
||||
<el-col :span="24">
|
||||
<el-input placeholder="请输入收款账户" v-model="data.ruleForm.pay" class="input-with-select" style="width: 800rpx;">
|
||||
<el-select v-model="data.ruleForm.select" slot="prepend" placeholder="账户" style="width: 190rpx;">
|
||||
<el-option label="微信" value="1"></el-option>
|
||||
<el-option label="支付宝" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="收款人姓名" prop="name" required>
|
||||
<el-col :span="24">
|
||||
<el-input v-model="data.ruleForm.name" style="width: 800rpx;">
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="转账金额" prop="price" required :inline="true">
|
||||
<el-col :span="24">
|
||||
<el-input placeholder="请输入额度" v-model="data.ruleForm.price" class="input-with-select" style="width: 800rpx;">
|
||||
<template slot="prepend">¥</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</view>
|
||||
<!-- step为1的逻辑结束 -->
|
||||
|
||||
<!-- step为2的逻辑开始 -->
|
||||
<view v-if="this.data.step==2">
|
||||
<el-tag closable style="font-size: 40rpx;width:1200rpx;height: 80rpx;line-height: 80rpx;letter-spacing: 4rpx;background-color: #F8F8F8;color: red;">
|
||||
注意!确认转账后,资金将进到对方账户,无法退回
|
||||
</el-tag>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx;letter-spacing:4rpx;font-size: 30rpx;">
|
||||
<text style="color: #515a6e;">付款账户:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.account}}</text>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx;letter-spacing:4rpx;font-size: 30rpx;">
|
||||
<text style="color: #515a6e;">收款账户:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.pay}}</text>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx;letter-spacing:4rpx;font-size: 30rpx;">
|
||||
<text style="color: #515a6e;">收款人姓名:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.name}}</text>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx;letter-spacing:4rpx;font-size: 30rpx;border-bottom: 1px solid #ccc;width: 1200rpx;">
|
||||
<text style="color: #515a6e;">转账金额:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;font-weight: bold;">¥{{data.ruleForm.price}}</text>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx 0rpx">
|
||||
<el-form-item label="支付密码" prop="password" required>
|
||||
<el-input v-model="data.ruleForm.password" style="width: 800rpx;">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</view>
|
||||
<!-- step为2的逻辑结束 -->
|
||||
|
||||
<!-- step为3的逻辑开始 -->
|
||||
<view v-if="this.data.step==3">
|
||||
<el-col :span="24" style="margin-left: 500rpx;">
|
||||
|
||||
<i class="el-icon-success" style="color: green;font-size: 200rpx;"></i>
|
||||
|
||||
<view style="font-family: kaiti;font-weight: bold;font-size: 80rpx;margin-left: -60rpx;margin-top: 20rpx;">操作成功</view>
|
||||
|
||||
<view style="letter-spacing: 4rpx;margin: 30rpx 0rpx 30rpx -40rpx;color: #8086a3;">预计两小时内到账</view>
|
||||
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="background-color: #f8f8f9;width: 1700rpx;margin-left: -200rpx;">
|
||||
<view style="display: flex; flex-flow: column;">
|
||||
<view style="padding: 40rpx 160rpx;">
|
||||
<text style="color: #515a6e;">付款账户:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.account}}</text>
|
||||
</view>
|
||||
|
||||
<view style="padding: 40rpx 160rpx;">
|
||||
<text style="color: #515a6e;">收款账户:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.pay}}</text>
|
||||
</view>
|
||||
|
||||
<view style="padding: 40rpx 160rpx;">
|
||||
<text style="color: #515a6e;">收款人姓名:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.name}}</text>
|
||||
</view>
|
||||
|
||||
<view style="padding: 40rpx 160rpx;">
|
||||
<text style="color: #515a6e;">转账金额:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;font-weight: bold;">¥{{data.ruleForm.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</el-col>
|
||||
</view>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx 0rpx;">
|
||||
<el-form-item>
|
||||
<el-button v-if="this.data.step==1" type="primary" @click="next('ruleForm')" :loading="data.loading">下一步</el-button>
|
||||
<el-button v-if="this.data.step==2" type="primary" @click="next('ruleForm')" :loading="data.loading">提交</el-button>
|
||||
|
||||
<el-button v-if="this.data.step==3" type="primary" @click="next('ruleForm')" :loading="data.loading">再来一单</el-button>
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- step为3的逻辑结束 -->
|
||||
</el-form>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
loading:false,
|
||||
step: 1,
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
ruleForm: {
|
||||
name: '',
|
||||
pay: '',
|
||||
select: '微信',
|
||||
account: '账户一',
|
||||
price: '',
|
||||
password:''
|
||||
},
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'input'
|
||||
},
|
||||
{
|
||||
min: 1,
|
||||
max: 8,
|
||||
message: '长度在 1 到 8 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
pay: [{
|
||||
required: true,
|
||||
message: '请输入完整内容',
|
||||
trigger: 'change'
|
||||
}],
|
||||
account: [{
|
||||
required: true,
|
||||
message: '请选择付款账户',
|
||||
trigger: 'change'
|
||||
}],
|
||||
price: [{
|
||||
required: true,
|
||||
message: '请输入付款额度',
|
||||
trigger: 'change'
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
message: '请输入支付密码',
|
||||
trigger: 'change'
|
||||
}],
|
||||
}
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
next(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
// 如果通过了验证之后才可以点下一步
|
||||
if (this.data.step <3) {
|
||||
// 再写一个判断 单独判断对应的值为1和2的时候
|
||||
this.data.loading=true
|
||||
setTimeout(()=>{
|
||||
this.data.step++;
|
||||
this.data.loading=false
|
||||
},1000)
|
||||
} else if (this.data.step == 3) {
|
||||
this.data.step=1
|
||||
this.data.ruleForm=[]
|
||||
}
|
||||
} else {
|
||||
// 否则就不能点下一步
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// submitForm(formName) {
|
||||
// this.$refs[formName].validate((valid) => {
|
||||
// if (valid) {
|
||||
// alert('submit!');
|
||||
// } else {
|
||||
// console.log('error submit!!');
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
resetForm(formName) {
|
||||
this.$refs.ruleForm.resetFields();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
|
||||
.select-option {
|
||||
// border: 1px solid white !important;
|
||||
background-color: #F8F8F8 !important;
|
||||
color: red;
|
||||
}
|
||||
.topTip{
|
||||
width: 300rpx;
|
||||
height: 100rpx;
|
||||
background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
|
||||
}
|
||||
|
||||
// 设置所有input的样式
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
弹窗功能演示
|
||||
</div>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="带辅助性文字介绍"
|
||||
type="success"
|
||||
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
|
||||
</el-alert>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-alert{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
弹窗功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
<el-button type="text" @click="dialogVisible1 = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
|
||||
<span>这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套表格:
|
||||
</div>
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套表单:
|
||||
</div>
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
多层嵌套:
|
||||
</div>
|
||||
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
|
||||
|
||||
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
居中布局:
|
||||
</div>
|
||||
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
|
||||
<span>需要注意的是内容是默认不居中的</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
||||
// 页面数据变量
|
||||
return {
|
||||
|
||||
centerDialogVisible: false,
|
||||
outerVisible: false,
|
||||
innerVisible: false,
|
||||
dialogVisible1: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px',
|
||||
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
抽屉功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
普通功能:
|
||||
</div>
|
||||
<el-radio-group v-model="direction">
|
||||
<el-radio label="ltr">从左往右开</el-radio>
|
||||
<el-radio label="rtl">从右往左开</el-radio>
|
||||
<el-radio label="ttb">从上往下开</el-radio>
|
||||
<el-radio label="btt">从下往上开</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx 0rpx;margin-left: -40rpx;">
|
||||
<el-button @click="drawer = true" type="primary" size="small" style="margin-left: 18px;margin-top: 30rpx;">
|
||||
点我打开
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
无标题:
|
||||
</div>
|
||||
<el-button @click="data.drawer = true" type="success" size="small" style="width: 160rpx;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer title="我是标题" :visible.sync="data.drawer" :with-header="false">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套内容:
|
||||
</div>
|
||||
|
||||
<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
|
||||
<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
|
||||
<el-drawer title="我嵌套了表格!" :visible.sync="table" direction="rtl" size="50%">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer title="我嵌套了 Form !" :before-close="handleClose" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer"
|
||||
ref="drawer">
|
||||
<div class="demo-drawer__content">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="cancelForm">取 消</el-button>
|
||||
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
多层嵌套:
|
||||
</div>
|
||||
<el-button @click="drawer1 = true" type="danger" size="small" style="margin-left: -2px;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="我是外面的 Drawer"
|
||||
:visible.sync="drawer1"
|
||||
size="50%">
|
||||
<div>
|
||||
<el-button @click="innerDrawer = true">打开里面的!</el-button>
|
||||
<el-drawer
|
||||
title="我是里面的"
|
||||
:append-to-body="true"
|
||||
:before-close="handleClose1"
|
||||
:visible.sync="innerDrawer">
|
||||
<p>_(:зゝ∠)_</p>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
drawer1: false,
|
||||
innerDrawer: false,
|
||||
table: false,
|
||||
dialog: false,
|
||||
loading: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px',
|
||||
timer: null,
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要提交表单吗？')
|
||||
.then(_ => {
|
||||
this.loading = true;
|
||||
this.timer = setTimeout(() => {
|
||||
done();
|
||||
// 动画关闭需要一定的时间
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 2000);
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
handleClose1(done) {
|
||||
this.$confirm('还有未保存的工作哦确定关闭吗？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<view style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
加载功能演示
|
||||
</view>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
区域加载:
|
||||
</view>
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义加载的内容从这个地方开始 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义加载:
|
||||
</view>
|
||||
<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
全屏加载:
|
||||
</view>
|
||||
<el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">
|
||||
指令方式
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="openFullScreen2">
|
||||
服务方式
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="doudou=true">
|
||||
自定义方式
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <view class='popContainer' v-show="doudou" @click="doudou=false">
|
||||
<el-image :draggable="false"
|
||||
style="width: 200rpx; height: 200rpx;text-align: center; margin-left: 50%; margin-top: 800rpx;"
|
||||
src="/static/icon/loading.gif"
|
||||
></el-image>
|
||||
</view> -->
|
||||
|
||||
<view class='popContainer' v-show="doudou" @click="doudou=false">
|
||||
<div
|
||||
class="loadingio-spinner-bean-eater-v394si28re"><div class="ldio-fk6s8i3hzwa">
|
||||
<div><div></div><div></div><div></div></div><div><div></div><div></div><div></div></div>
|
||||
</div></div>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
doudou:false,
|
||||
fullscreenLoading: false,
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading: true,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
openFullScreen1() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen3() {
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container{
|
||||
position: absolute !important;
|
||||
left: 300 !important;
|
||||
}
|
||||
view.popContainer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 99999;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
.loadingio-spinner-bean-eater-v394si28re{
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
/* transform:scale(0.5) translate(-50%,-50%); */
|
||||
margin-left: -100px;
|
||||
margin-top: -100px;
|
||||
transform:scale(0.5);
|
||||
}
|
||||
|
||||
@keyframes ldio-fk6s8i3hzwa-1 {
|
||||
0% { transform: rotate(0deg) }
|
||||
50% { transform: rotate(-45deg) }
|
||||
100% { transform: rotate(0deg) }
|
||||
}
|
||||
@keyframes ldio-fk6s8i3hzwa-2 {
|
||||
0% { transform: rotate(180deg) }
|
||||
50% { transform: rotate(225deg) }
|
||||
100% { transform: rotate(180deg) }
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) {
|
||||
transform: translate(-15px,0);
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
border-radius: 120px 120px 0 0;
|
||||
background: #f8b26a;
|
||||
animation: ldio-fk6s8i3hzwa-1 1s linear infinite;
|
||||
transform-origin: 60px 60px
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div:nth-child(2) {
|
||||
animation: ldio-fk6s8i3hzwa-2 1s linear infinite
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div:nth-child(3) {
|
||||
transform: rotate(-90deg);
|
||||
animation: none;
|
||||
}@keyframes ldio-fk6s8i3hzwa-3 {
|
||||
0% { transform: translate(190px,0); opacity: 0 }
|
||||
20% { opacity: 1 }
|
||||
100% { transform: translate(70px,0); opacity: 1 }
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) {
|
||||
display: block;
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div {
|
||||
position: absolute;
|
||||
top: 92px;
|
||||
left: -8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #e15b64;
|
||||
animation: ldio-fk6s8i3hzwa-3 1s linear infinite
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(1) { animation-delay: -0.67s }
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(2) { animation-delay: -0.33s }
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(3) { animation-delay: 0s }
|
||||
.loadingio-spinner-bean-eater-v394si28re {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
.ldio-fk6s8i3hzwa {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform: translateZ(0) scale(1);
|
||||
backface-visibility: hidden;
|
||||
transform-origin: 0 0; /* see note above */
|
||||
}
|
||||
.ldio-fk6s8i3hzwa div { box-sizing: content-box; }
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
消息提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding:40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
消息提示:
|
||||
</div>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 确认消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
确认消息:
|
||||
</div>
|
||||
<el-button type="text" @click="open1">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
确认消息:
|
||||
</div>
|
||||
<el-button type="text" @click="open2">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 使用HTML消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
使用HTML片段:
|
||||
</div>
|
||||
<el-button type="text" @click="open3">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 区分取消和关闭 -->
|
||||
<!-- <el-button type="text" @click="open">点击打开 Message Box</el-button> -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
区分取消和关闭:
|
||||
</div>
|
||||
<el-button type="text" @click="open4">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
内容居中布局:
|
||||
</div>
|
||||
<el-button type="text" @click="open5">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
open() {
|
||||
this.$alert('这是一段内容', '标题名称', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `消息内容: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
open2() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', {
|
||||
style: 'color: teal'
|
||||
}, 'VNode')
|
||||
]),
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
instance.confirmButtonText = '执行中...';
|
||||
setTimeout(() => {
|
||||
done();
|
||||
setTimeout(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 300);
|
||||
}, 3000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}).then(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
});
|
||||
},
|
||||
open3() {
|
||||
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
},
|
||||
open4() {
|
||||
this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: '保存',
|
||||
cancelButtonText: '放弃修改'
|
||||
})
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '保存修改'
|
||||
});
|
||||
})
|
||||
.catch(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: action === 'cancel' ?
|
||||
'放弃保存并离开页面' :
|
||||
'停留在当前页面'
|
||||
})
|
||||
});
|
||||
},
|
||||
open5() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
消息提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基础用法:
|
||||
</div>
|
||||
<el-button :plain="true" @click="open">打开消息提示</el-button>
|
||||
<el-button :plain="true" @click="openVn">VNode</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
不同状态:
|
||||
</div>
|
||||
<el-button :plain="true" type="success" @click="open2">成功</el-button>
|
||||
<el-button :plain="true" type="warning" @click="open3">警告</el-button>
|
||||
<el-button :plain="true" type="primary" @click="open1">消息</el-button>
|
||||
<el-button :plain="true" type="danger" @click="open4">错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 可关闭功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
可关闭:
|
||||
</div>
|
||||
<el-button :plain="true" type="primary" @click="openA">消息</el-button>
|
||||
<el-button :plain="true" type="success" @click="openB">成功</el-button>
|
||||
<el-button :plain="true" type="warning" @click="openC">警告</el-button>
|
||||
<el-button :plain="true" type="danger" @click="openD">错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 居中 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
文字居中:
|
||||
</div>
|
||||
<el-button :plain="true" @click="openCenter" type="infor">文字居中</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 嵌入HTML片段 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌入HMTL片段:
|
||||
</div>
|
||||
<el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
open() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
openVn() {
|
||||
const h = this.$createElement;
|
||||
this.$message({
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', {
|
||||
style: 'color: teal'
|
||||
}, 'VNode')
|
||||
])
|
||||
});
|
||||
},
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: '居中的文字',
|
||||
center: true
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
open2() {
|
||||
this.$message({
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
open4() {
|
||||
this.$message.error('错了哦，这是一条错误消息');
|
||||
},
|
||||
openA() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
},
|
||||
|
||||
openB() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
openC() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
openD() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
悬浮提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
|
||||
<el-button plain @click="open1">
|
||||
可自动关闭
|
||||
</el-button>
|
||||
<el-button plain @click="open2">
|
||||
不会自动关闭
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
具有倾向性:
|
||||
</div>
|
||||
<el-button plain @click="openA">
|
||||
成功
|
||||
</el-button>
|
||||
<el-button plain @click="openB">
|
||||
警告
|
||||
</el-button>
|
||||
<el-button plain @click="openC">
|
||||
消息
|
||||
</el-button>
|
||||
<el-button plain @click="openD">
|
||||
错误
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义弹出位置:
|
||||
</div>
|
||||
<el-button plain @click="opena">
|
||||
右上角
|
||||
</el-button>
|
||||
<el-button plain @click="openb">
|
||||
右下角
|
||||
</el-button>
|
||||
<el-button plain @click="openc">
|
||||
左下角
|
||||
</el-button>
|
||||
<el-button plain @click="opend">
|
||||
左上角
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 带有偏移的弹窗 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
带偏移的消息提示:
|
||||
</div>
|
||||
<el-button plain @click="open">
|
||||
偏移的消息
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
使用HTML字段:
|
||||
</div>
|
||||
<el-button plain @click="openuu">
|
||||
使用 HTML 片段
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
不显示关闭按钮:
|
||||
</div>
|
||||
<el-button plain @click="openhide">
|
||||
隐藏关闭按钮
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
//
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '偏移',
|
||||
message: '这是一条带有偏移的提示消息',
|
||||
offset: 100
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
const h = this.$createElement;
|
||||
|
||||
this.$notify({
|
||||
title: '标题名称',
|
||||
message: h('i', {
|
||||
style: 'color: teal'
|
||||
}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条不会自动关闭的消息',
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
|
||||
openA() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
openB() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
openC() {
|
||||
this.$notify.info({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息'
|
||||
});
|
||||
},
|
||||
|
||||
openD() {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息'
|
||||
});
|
||||
},
|
||||
opena() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右上角弹出的消息'
|
||||
});
|
||||
},
|
||||
|
||||
openb() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右下角弹出的消息',
|
||||
position: 'bottom-right'
|
||||
});
|
||||
},
|
||||
|
||||
openc() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左下角弹出的消息',
|
||||
position: 'bottom-left'
|
||||
});
|
||||
},
|
||||
|
||||
opend() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左上角弹出的消息',
|
||||
position: 'top-left'
|
||||
});
|
||||
},
|
||||
openuu() {
|
||||
this.$notify({
|
||||
title: 'HTML 片段',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
},
|
||||
openhide() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: '这是一条没有关闭按钮的消息',
|
||||
showClose: false
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
悬浮提示功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
|
||||
<el-popconfirm
|
||||
title="这是一段内容确定删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义功能从这个地方开始 -->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义用法:
|
||||
</div>
|
||||
<el-popconfirm
|
||||
confirm-button-text='好的'
|
||||
cancel-button-text='不用了'
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="宁确定要删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
提示弹框功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
<el-popover placement="top-start" title="标题" width="200" style="margin-right: 30rpx;" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">hover 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover placement="bottom" title="标题" width="200" style="margin-right: 30rpx;" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover ref="popover" placement="right" title="标题" width="200" style="" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover style="margin-right: 30rpx;">focus 激活</el-button>
|
||||
|
||||
<el-popover placement="bottom" title="标题" width="200" trigger="manual" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
|
||||
v-model="visible">
|
||||
<el-button slot="reference" @click="visible = !visible">手动激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义功能从这个地方开始 -->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套信息:
|
||||
</div>
|
||||
<el-popover placement="right" width="400" trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="日期"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="姓名"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 嵌套操作从这个地方开始 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套操作:
|
||||
</div>
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible1">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible1 = false">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popover>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
visible1: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
visible: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
文字提示功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基础用法:
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
|
||||
<el-button>上左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
|
||||
<el-button>上边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
|
||||
<el-button>上右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
|
||||
<el-button>左上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
|
||||
<el-button>左边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
|
||||
<el-button>左下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
|
||||
<el-button>右上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
|
||||
<el-button>右边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
|
||||
<el-button>右下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
|
||||
<el-button>下左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
|
||||
<el-button>下边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
|
||||
<el-button>下右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 设置主题功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Dark</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Light</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 更多content功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">多行信息<br />第二行信息</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 高级拓展 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
|
||||
<el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
disabled: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<i class="el-icon-close"></i>
|
||||
<text class="fail">提交失败</text>
|
||||
<text class="txt">请核对并修改以下信息后，再重新提交。</text>
|
||||
<view class="examine">
|
||||
<text class="title">您提交的内容有如下错误：</text>
|
||||
<view>
|
||||
<i class="el-icon-circle-close"></i>
|
||||
<text>您的账户已被冻结</text>
|
||||
<text class="thaw">立即解冻</text>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</view>
|
||||
<view>
|
||||
<i class="el-icon-circle-close"></i>
|
||||
<text>您的账户还不具备申请资格</text>
|
||||
<text class="upgrade">立即升级</text>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<text class="modify">返回修改</text>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
padding-top: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.el-icon-close {
|
||||
font-size: 90rpx;
|
||||
margin: 50rpx 0rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #ED4014;
|
||||
padding: 35rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.fail {
|
||||
margin-bottom: 32rpx;
|
||||
color: #17233d;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: #808695;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.examine {
|
||||
margin-top: 40rpx;
|
||||
background: #f8f8f9;
|
||||
border-radius: 8rpx;
|
||||
width: 69%;
|
||||
padding: 40rpx 60rpx;
|
||||
color: #515a6e;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
view {
|
||||
&:first-of-type {
|
||||
margin: 40rpx 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modify {
|
||||
margin-top: 80rpx;
|
||||
display: inline-block;
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: 2rpx solid #2D8CF0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
border-radius: 8rpx;
|
||||
background-color: #2D8CF0;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-circle-close {
|
||||
color: #ED4014;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.upgrade,
|
||||
.thaw {
|
||||
color: #2D8CF0;
|
||||
margin: 0rpx 20rpx 0rpx 40rpx;
|
||||
|
||||
&:hover {
|
||||
color: #57a3f3;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-arrow-right {
|
||||
color: #515a6e;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<i class="el-icon-check"></i>
|
||||
<text class="success">提交成功</text>
|
||||
<text class="txt">提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。灰色区域可以显示一些补充的信息。</text>
|
||||
<text class="examine">已提交申请，等待部门审核。</text>
|
||||
<view class="project_list">
|
||||
<text>返回列表</text>
|
||||
<text>查看项目</text>
|
||||
<text>打印</text>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
padding-top: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.el-icon-check {
|
||||
font-size: 90rpx;
|
||||
margin: 50rpx 0rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #19BE6B;
|
||||
padding: 35rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.success {
|
||||
margin-bottom: 32rpx;
|
||||
color: #17233d;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: #808695;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.examine {
|
||||
margin-top: 40rpx;
|
||||
background: #f8f8f9;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
width: 69%;
|
||||
height: 140rpx;
|
||||
line-height: 140rpx;
|
||||
padding-left: 80rpx;
|
||||
color: #515a6e;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.project_list {
|
||||
margin-top: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>text {
|
||||
display: inline-block;
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
border: 2rpx solid transparent;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&:first-of-type {
|
||||
border-color: #2D8CF0;
|
||||
background-color: #2D8CF0;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:nth-of-type(2) {
|
||||
margin: 0rpx 20rpx;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-color: #DCDEE2;
|
||||
|
||||
&:hover {
|
||||
color: #57a3f3 !important;
|
||||
border-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,429 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<!-- 左边 -->
|
||||
<view class="left">
|
||||
<view>
|
||||
<i class="el-icon-s-operation"></i>
|
||||
<text>个人设置</text>
|
||||
</view>
|
||||
<view :class="display_list == index ? 'select_list': ''" v-for="(item,index) of left_list" :key="index" @click="change_left(index)">
|
||||
<text>{{item.name}}</text>
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右边 -->
|
||||
<view class="right">
|
||||
<view v-show="display_list == 0" class="form">
|
||||
<view class="base_set">
|
||||
<view class="right_title">基本设置</view>
|
||||
<el-form class="form_input" label-width="800px" label-position="top" :model="form1" :rules="rules" ref="form1">
|
||||
<el-form-item label="昵称" prop="name" required>
|
||||
<el-input v-model="form1.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email" required>
|
||||
<el-input v-model="form1.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="个人介绍" required>
|
||||
<el-input type="textarea" v-model="form1.introduce"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司" required>
|
||||
<el-input v-model="form1.company"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="居住地" required>
|
||||
<el-cascader placeholder="选择地区" :options="options_list" :props="{ multiple: true }" filterable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-button type="primary">更新基本信息</el-button>
|
||||
</el-form>
|
||||
</view>
|
||||
<view class="avater">
|
||||
<text >头像</text>
|
||||
<image src="../../../static/logo.png" ></image>
|
||||
<el-button class="avater_but" size="mini" style="margin-left: -2px;" plain><i class="el-icon-camera-solid"></i>修改头像</el-button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="display_list == index + 1" v-for="(item,index) of right_list" :key="index">
|
||||
<view class="right_title">{{item.title}}</view>
|
||||
<view class="name_tips" v-for="(value,key) of item.list" :key="key">
|
||||
<view class="name">
|
||||
<image src="" v-if="index == 1 && key == 0"></image>
|
||||
<image src="" v-if="index == 1 && key == 1"></image>
|
||||
<image src="" v-if="index == 1 && key == 2"></image>
|
||||
<image src="" v-if="index == 1 && key == 3"></image>
|
||||
<text>{{value.name}}</text>
|
||||
</view>
|
||||
<text class="tips">{{value.tips}}</text>
|
||||
<text class="operation">
|
||||
<el-switch v-show="index == 2" v-model="switch_value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
<text class="operation_modify" v-show="index == 1 || index == 0">修改</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
let left_list = [{
|
||||
name: "基础设置",
|
||||
title: "个人账户信息设置"
|
||||
}, {
|
||||
name: "安全设置",
|
||||
title: "密码、邮箱等设置"
|
||||
}, {
|
||||
name: "账号绑定",
|
||||
title: "绑定第三方社交账户"
|
||||
}, {
|
||||
name: "新消息通知",
|
||||
title: "各种通知的设置"
|
||||
}];
|
||||
let right_list = [{
|
||||
title: "安全设置",
|
||||
list: [{
|
||||
name: "账户密码",
|
||||
tips: "绑定手机和邮箱，并设置密码，帐号更安全"
|
||||
}, {
|
||||
name: "绑定手机",
|
||||
tips: "已绑定手机号：+86185****0000"
|
||||
}, {
|
||||
name: "密保问题",
|
||||
tips: "未设置密保问题，密保问题可有效保护账户安全"
|
||||
}, {
|
||||
name: "个性域名",
|
||||
tips: "已绑定域名：iview.design"
|
||||
}]
|
||||
}, {
|
||||
title: "账号绑定",
|
||||
list: [{
|
||||
name: "微信",
|
||||
tips: "当前未绑定微信账号"
|
||||
}, {
|
||||
name: "微博",
|
||||
tips: "当前未绑定微博账号"
|
||||
}, {
|
||||
name: "Facebook",
|
||||
tips: "当前未绑定Facebook账号"
|
||||
}, {
|
||||
name: "Twitter",
|
||||
tips: "当前未绑定Twitter账号"
|
||||
}]
|
||||
}, {
|
||||
title: "新消息通知",
|
||||
list: [{
|
||||
name: "陌生人私信",
|
||||
tips: "未关注的人向您发私信时的通知"
|
||||
}, {
|
||||
name: "邀请/评论消息",
|
||||
tips: "有人对我发出邀请时，我会收到消息通知"
|
||||
}, {
|
||||
name: "赞同/赞赏消息设置",
|
||||
tips: "有人对我赞同或赞赏时，我会收到消息通知"
|
||||
}, {
|
||||
name: "邮件设置",
|
||||
tips: "重要事件发生时，我将会收到邮件提醒"
|
||||
}]
|
||||
}];
|
||||
let options_list = [{
|
||||
value: 'zhinan',
|
||||
label: '第一层数据',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '第二层数据',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '数据一'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '数据二'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '数据三'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '数据四'
|
||||
}]
|
||||
}],
|
||||
}];
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
left_list,
|
||||
right_list,
|
||||
// 多级联动数据源
|
||||
options_list,
|
||||
display_list: 0,
|
||||
switch_value: true,
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
trigger: 'blur'
|
||||
}, {
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '长度在3到5个字符',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
email: [{
|
||||
required: true,
|
||||
message: "请输入邮箱",
|
||||
trigger: "blur"
|
||||
}, {
|
||||
type: "email",
|
||||
message: "请输入正确的邮箱！",
|
||||
trigger: "blur"
|
||||
}],
|
||||
},
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
name: "",
|
||||
email: "",
|
||||
introduce: "",
|
||||
company: "",
|
||||
options: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
change_left(index) {
|
||||
this.display_list = index;
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
view,
|
||||
text {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F5F7F9;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
display: flex;
|
||||
background-color: #F5F7F9;
|
||||
|
||||
>view {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 800rpx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
transition: all .2s ease-in-out;
|
||||
padding-bottom: 14rpx;
|
||||
margin-right: 40rpx;
|
||||
border-bottom: 2rpx solid #e8eaec;
|
||||
position: relative;
|
||||
margin-bottom: auto;
|
||||
|
||||
.el-icon-s-operation {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
>view {
|
||||
&:first-of-type {
|
||||
font-size: 32rpx;
|
||||
border-bottom: 2rpx solid #e8eaec;
|
||||
padding: 28rpx 32rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 14rpx 32rpx;
|
||||
color: #515a6e;
|
||||
font-size: 14px !important;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #f3f3f3 !important;
|
||||
}
|
||||
|
||||
>text {
|
||||
&:first-of-type {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
font-size: 22rpx;
|
||||
color: #808695;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选中左侧列表的样式
|
||||
.select_list {
|
||||
color: #2d8cf0 !important;
|
||||
background-color: #F0FAFF !important;
|
||||
|
||||
>text {
|
||||
color: #2d8cf0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 右边的样式
|
||||
.right {
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.right_title {
|
||||
font-size: 45rpx;
|
||||
color: #515A6E;
|
||||
font-weight: bolder;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.name_tips {
|
||||
margin-left: 32rpx;
|
||||
padding: 40rpx 0rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 2rpx solid #E8EAEC;
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bolder;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 28rpx;
|
||||
color: #808695;
|
||||
}
|
||||
|
||||
// 操作
|
||||
.operation {
|
||||
position: absolute;
|
||||
float: right;
|
||||
color: #2D8CF0;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.operation_modify {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式
|
||||
.form {
|
||||
display: flex;
|
||||
|
||||
.form_input {
|
||||
width: 1000rpx;
|
||||
}
|
||||
|
||||
.avater {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 100rpx;
|
||||
margin-top: 100rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #515a6e;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-top: 10rpx;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.avater_but {
|
||||
margin-top: 30rpx;
|
||||
|
||||
i {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user