uniapp下拉列表單選框復選框實戰demo(編輯或詳情頁) · 雜記

``` <template> <view> <view class="uni-padding-wrap"> <form @submit="formSubmit" @reset="formReset"> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-left"> 選擇分類 </view> <view class="uni-list-cell-db"> <picker @change="bindPickerChange" :value="index" :range="arr"> <view class="uni-input">{{arr[index]}}</view> </picker> </view> </view> </view>  <view class="uni-list"> <radio-group @change="radioChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.id"> <view> <radio :value="String(item.id)" :checked="index === current" /> </view> <view>{{item.name}}</view> </label> </radio-group> </view> <view>  <view class="uni-list"> <checkbox-group class="block" @change="changeCheckbox"> <view class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxData" :key="item.id"> <checkbox :value="String(item.id)" :checked="checkedArr.includes(String(item.id))" :class="{'checked':checkedArr.includes(String(item.id))}"></checkbox> <text>{{item.name}}</text> </view> </checkbox-group> </view> </view> <view> <view class="uni-title">昵稱</view> <view class="uni-list"> <view class="uni-list-cell"><input class="uni-input" name="nickname" :value="nickname" placeholder="請填寫您的昵稱" /></view> </view> </view> <view> <view class="uni-title">出生日期</view> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-left">當前選擇</view> <view class="uni-list-cell-db"> <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" name="date"> <view class="uni-input">{{ date == 0 ? '1990-01-01' : date }}</view> </picker> </view> </view> </view> </view> <view> <view class="uni-title">性別</view> <radio-group class="uni-flex" name="sex"> <label v-if="sex == 1"> <radio value="0" /> 男 </label> <label v-if="sex == 0"> <radio value="0" checked /> 男 </label> <label v-if="sex == 1"> <radio value="1" checked /> 女 </label> <label v-if="sex == 0"> <radio value="1" /> 女 </label> </radio-group> </view> <view class="uni-btn-v uni-common-mt"><button class="btn-submit" formType="submit" type="primary">提交</button></view> </form> </view> </view> </template> <script> var api = require('@/common/api.js'); export default { data() { return { arr: [], index: 0, items: [], current: 0 , nickname: '', sex: '', date: '', checkboxData:[], checkedArr:[], //復選框選中的值 allChecked:false ,//是否全選 rules:[], type: '', cid: '', }; }, computed: { startDate() { return this.getDate('start'); }, endDate() { return this.getDate('end'); } }, onLoad(event) { api.get({ url: 'order/categories', data: { order: '+id', field: 'id,name' }, success: data => { //console.log(data.data); for (let i in data.data) { this.arr.push(data.data[i].name) this.items.push(data.data[i]) this.checkboxData.push(data.data[i]) } console.log(this.items); } }); api.get({ url: 'order/items/' + event.id, success: result => { //console.log(result); if (result.code == 1) { var res = result.data; this.index = res.categories[0].id - 1; //this.current = res.categories[0].id - 1; //console.log(result.data); this.id = res.id; this.sex = res.sex; this.nickname = res.nickname; //this.richList = res.post_content; this.date = res.birthday; this.rules = res.rules; this.type = res.cid - 1; } this.current = this.type; this.checkedArr = this.rules; //this.checkedArr = e.detail.value; // 如果選擇的數組中有值，并且長度等于列表的長度，就是全選 if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){ this.allChecked=true; }else{ this.allChecked=false; } } }); }, methods: { bindPickerChange: function(e) { this.index = e.target.value }, // 多選復選框改變事件 changeCheckbox(e){ //this.checkedArr = this.rules; this.checkedArr = e.detail.value; // 如果選擇的數組中有值，并且長度等于列表的長度，就是全選 if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){ this.allChecked=true; }else{ this.allChecked=false; } console.log(this.checkedArr) this.rules=this.checkedArr.join(",") console.log(this.rules) }, radioChange(evt) { for (let i = 0; i < this.items.length; i++) { if (this.items[i].value === evt.detail.value) { this.current = i; break; } } this.type = evt.detail.value //console.log(evt.detail.value) }, formSubmit: function(e) { var value = e.detail.value; if (value.nickname == '') { uni.showToast({ title: '昵稱不能為空', duration: 1500, icon: 'none' }); return; } api.put({ url: 'order/items/' + this.id, data: { categories: this.index + 1, //categories: this.current + 1, rules:this.rules, cid:this.type, nickname: value.nickname, birthday: this.date, sex: value.sex }, 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 }) } } }); }, bindDateChange: function(e) { this.date = e.target.value; }, getDate(type) { var date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (type === 'start') { year = year - 60; } else if (type === 'end') { year = year + 2; } month = month > 9 ? month : '0' + month; day = day > 9 ? day : '0' + day; return `${year}-${month}-${day}`; } } }; </script> <style> page { background-color: #f1f1f1; } .face { text-align: center; padding-top: 60upx; } .face image { width: 150upx; height: 150upx; border-radius: 100%; } </style> ```