```
<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 多版本控制