```
<template>
<view>
<uni-section title="多选" type="line"></uni-section>
<uni-group title="爱好">
<view class="text">选中：{{JSON.stringify(role)}} {{role}}</view>
<uni-data-checkbox multiple v-model="role" :localdata="roles"></uni-data-checkbox>
</uni-group>
<uni-section title="单选" type="line"></uni-section>
<uni-group title="性别">
<view class="text">选中：{{formData.sex}}</view>
<uni-data-checkbox v-model="formData.sex" :localdata="roles"></uni-data-checkbox>
</uni-group>
<view class="uni-button-group">
<view class="uni-btn-v uni-common-mt" style="margin-left:30upx;margin-right:30upx;">
<button class="btn-submit" type="warn" @tap="submit">提交</button>
</view>
</view>
</view>
</template>
<script>
var api = require('@/common/api.js')
export default {
data() {
return {
formData: [],
sex: [{
text: '男',
value: 0
}, {
text: '女',
value: 1
}, {
text: '未知',
value: 2
}],
role: '',
roles: [],
}
},
onLoad(e) {
const id = e.id
this.formDataId = id
this.getDetail(id)
this.loadroles()
},
onReady() {},
methods: {
submit() {
api.put({
// url: 'portal/articles/' + this.id,
url: 'order/items/4',
data: {
sex: this.formData.sex,
// role: JSON.stringify(value(this.role))
role: this.role.join(',')
// role: this.formData.role
},
success: (data) => {
//console.log(data)
if (data.code == 1) {
uni.showToast({
title: data.msg,
icon: "success",
duration: 1000
})
setTimeout((e => {
uni.navigateBack();
}), 1000);
}
if (data.code == 0) {
uni.showToast({
title: data.msg,
icon: "none",
duration: 1000
})
}
}
})
},
loadroles() {
api.get({
url: 'order/categories',
data: {
order: '+id',
field: 'id,name'
},
success: data => {
const roleIds = []
this.roles = data.data.map(item => {
roleIds.push(item.id)
return {
value: item.id,
role: item.id,
text: item.name
}
})
console.log(this.roles);
console.log(roleIds);
}
});
},
/**
* 获取表单数据
* @param {Object} id
*/
getDetail(id) {
uni.showLoading({
mask: true
})
api.get({
url: 'order/items/4',
//url: 'order/items/' + event.id,
success: result => {
//console.log(result);
if (result.code == 1) {
var res = result.data
this.formData = res
console.log(this.formData)
//方案1 ok
var rolearr = res.role.split(",")
var roles = rolearr.map(Number)
this.role = roles
console.log(this.role)
//方案2
var dataStr = res.role;//原始字符串
var dataStrArr=dataStr.split(",");//分割成字符串数组
var dataIntArr=[];//保存转换后的整型字符串
//方法一
dataStrArr.forEach(function(data,index,arr){
dataIntArr.push(+data);
});
console.log(dataIntArr);
//方法二
dataIntArr=dataStrArr.map(function(data){
return +data;
});
console.log(dataIntArr);
uni.hideLoading()
}
// this.formData.hobby = res.role //roleIds.push(item.id)
}
});
},
}
}
</script>
<style>
@charset "UTF-8";
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url("~@/static/uni.ttf") format("truetype");
}
/* #endif */
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
.example {
padding: 0 15px 15px;
}
.example-info {
padding: 15px;
color: #3b4144;
background: #ffffff;
}
.example-body {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
}
/* #endif */
.example {
padding: 0 15px;
}
.example-info {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 15px;
color: #3b4144;
background-color: #ffffff;
font-size: 14px;
line-height: 20px;
}
.example-info-text {
font-size: 14px;
line-height: 20px;
color: #3b4144;
}
.example-body {
flex-direction: column;
padding: 15px;
background-color: #ffffff;
}
.word-btn-white {
font-size: 18px;
color: #FFFFFF;
}
.word-btn {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 6px;
height: 48px;
margin: 15px;
background-color: #007AFF;
}
.word-btn--hover {
background-color: #4ca2ff;
}
.example {
padding: 10px;
background-color: #fff;
}
.text {
font-size: 14px;
color: #333;
margin-bottom: 10px;
}
</style>
```
- 空白目录
- thinkcmf的权限管理
- thinkcmf+unicmf添加页面
- Thinkphp5做后台 Uni-app做前台解决跨域问题
- 组件
- h5跨域-uniapp
- thinkphp5 auth 教程
- thinkphp5Auth类
- uniapp添加与编辑的差别
- 常见的请求方式
- uni 单选回显数据_uniapp 页面跳转传值和接收
- uni-app 单选/多选/滑动 demo
- 关于uniapp checkbox多选框如何传值传数据
- uniApp 多选框checkbox ，判断是否选中
- uniapp添加复选框和获取复选框的值
- uni-app中全选多选单选
- uniapp多选框CheckBox 数据接收
- uniapp下拉列表单选框复选框实战demo(编辑或详情页)
- uni-data-CheckBox-OK
- js 字符串数组转换成数字数组
- js把字符串转为数组对象
- js中数组对象字符串的相互转换
- JS怎么把字符串数组转换成整型数组
- 小程序开发
- tp5.1跨域请求
- uniapp-h5跨域
- 新增
- order
- uni-app中调取接口的三种方式与封装uni.request()
- uView-checkbox
- 给u-view的u-select赋值
- uView-下拉框、复选框、单选框 数据发送及接收
- CURD操作
- thinkphp5.1增删改查
- TP5.1添加数据成功之后返回自增主键id
- Thinkphp实战之Request默认值except only 以及过滤参
- uni-app跨域解决方案
- thinkphp5.1+uni-app接口开发中跨域问题解决方案
- tp6 + uniapp 前后端跨域解决方案
- uniapp-token相关
- uniapp request请求封装包含token兼容多端，简单易用
- CORS.php
- ThinkPHP6 API开发前后端分离用户信息保存在后端的方法
- thinkphp的jwt（JSON Web Token）身份验证
- thinkphp6增删改查
- PHP模拟GET,POST请求
- php模拟get、post发送请求的6种方法
- thinkphp6
- uniapp封装网络请求
- thinkphp6搭建后端api接口jwt-auth
- uniapp实现APP微信登录流程
- [uni-app] 中保持用户登录状态
- 详解vue中localStorage的使用方法
- vue 实现通过vuex 存储值 在不同界面使用
- dispatch：异步操作，数据提交至 actions ，可用于向后台提交数据
- ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作
- tp6错误集
- TP6 模型插入/添加数据，自动插入时间(自动时间戳)
- 手机不开机维修思路
- thinkphp6解决vue跨域问题
- 从0基础获取短视频去水印解析接口制作
- thinkphp5 删除缓存
- thinkPHP，怎么把json文件里面的数据导入数据库
- 数字转字符php
- php – 直接用curl下载远程文件
- thinkphp – 直接用curl下载远程文件
- apiAdmin安装
- echart
- thinkphp开发小程序推广分享带参数二维码生成
- php同比增加函数
- PHP获取同比上周、上一个月，上一个季度，去年时间区间
- “前3秒”金句100例，赶紧收藏起来！
- PHP配合微信公众号生成推广二维码
- thinkphp5+php微信公众号二维码扫码关注推广二维码事件实现
- 获取当前时间上一周的开始时间和结束时间
- TP6 查找指定工作日
- PHP 获取当天、近一周、本周、上月、本月、本季度、上季度时间方法大全
- php获取今日、昨日、本周、本月 日期方法
- Tp5+mysql按年季度月周日小时查询时无数据的时间段补0方法
- mysql按天统计的时候,该天没有数据也要统计为0
- 列出一星期的日期 无数据补0
- thinkphp6本周 上周 周一 周末日期
- 补全日期 无数据补0
- php+pv统计代码实现,Laravel 10 行代码实现简单的网站 pv uv 统计
- 通过API获取ip地址以及城市和运营商
- 获取访客信息
- 13行代码实现微信小程序设置概率触发激励视频阅读文章
- uniapp 微信小程序 获取场景值和场景值个性化参数
- 微信小程序分享小程序码的生成（带参数）以及参数的获取
- 小程序推广分享带参数二维码生成
- uniapp微信小程序生成对应页面二维码
- uniapp获取当前页面url
- uniapp微信小程序--微信登录
- 微信小程序，生成小程序码中scene参数的存放和获取问题
- uni-app 微信小程序生成二维码带参数
- uni-app 微信小程序如何把图片保存到本地相册？
- thinkPHP5使用assign（）传递富文本，前端解析成HTML标签
- tp6解析编辑器里面的html标签原样输出
- PHP判断url链接是否被百度收录
- 微擎安装模块时提示 Failed to connect to we7.rewlkj.com port 80: Timed out
- 小程序码生成
- thinkphp开发小程序推广分享带参数二维码生成0
- tp3.2伪静态
- apiadmin安装教程-2022.8更新
- autojs事件代码
- uuuu
- thinkphp6: API 多版本控制