wangxiaowei/xiuhuwangqiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
wangxiaowei
2025-10-22 22:56:36 +08:00
commit 90c54df48b
302 changed files with 54312 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
pages/plus/table/table.vue Normal file
View File

@ -0,0 +1,470 @@
<template>
<view :data-theme='theme()' :class="theme() || ''" v-if="!loading">
<view v-for="(item,index) in tableData" :key='index'>
<template v-if="item.type == 'radio'">
<!-- 单选框 -->
<view class="table-item">
<view class="make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="uni-list">
<radio-group @change="changeRadio($event,index)">
<label class="d-s-c make-item mb20" v-for="(ritem,rindex) in getName(item.select_value)"
:key='rindex'>
<view>
<radio style="transform:scale(0.7)" color="#EE1413" :checked="item.value == ritem"
:value="ritem" />
</view>
<view class="f26 color-57">{{ritem}}</view>
</label>
</radio-group>
</view>
</view>
</template>
<template v-if="item.type == 'radio-group'">
<!-- 多选框 -->
<view class="table-item">
<view class="d-s-c make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="uni-list">
<label @click="changeRadioGroup(ritem,index)" class="d-s-c make-item mb20" v-for="(ritem,rindex) in getName(item.select_value)"
:key='ritem'>
<view>
<radio style="transform:scale(0.7)"
color="#EE1413" :checked="getRadioGroup(index,ritem) != -1 " :value="ritem" />
</view>
<view class="f26 color-57">{{ritem}}</view>
</label>
</view>
</view>
</template>
<template v-if="item.type == 'text'">
<!-- 单行文本 -->
<view class="table-item">
<view class="d-s-c make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="pr">
<input class="make-item selectpicker input-box" v-model="item.value" type="text"
placeholder="请输入" />
</view>
</view>
</template>
<template v-if="item.type == 'textarea'">
<!-- 多行文本 -->
<view class="table-item">
<view class="d-s-c make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="pr">
<textarea class="textarea-box" v-model="item.value" placeholder="请输入" />
</view>
</view>
</template>
<template v-if="item.type == 'select'">
<!-- 下拉框 -->
<view class="table-item">
<view class="d-s-c make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="uni-list">
<picker class="" value="" @change="changeSelect($event,index)"
:range="getName(item.select_value)">
<view class="selectpicker">
<view class="make-item input-box flex-1">{{item.value || '请选择'}}</view>
<view class="icon iconfont icon-jiantou"></view>
</view>
</picker>
</view>
</view>
</template>
<template v-if="item.type == 'date'">
<!-- 日期选择 -->
<view class="table-item">
<view class="d-s-c make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="uni-list">
<picker class="datapicker" mode="date" value="" @change="changeDate($event,index)">
<view class="make-item selectpicker input-box">{{item.value || '请选择'}}</view>
</picker>
</view>
</view>
</template>
<template v-if="item.type == 'time'">
<!-- 时间选择 -->
<view class="table-item">
<view class="d-s-c make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="uni-list">
<picker class="datapicker" mode="time" value="" @change="changeDate($event,index)">
<view class="make-item selectpicker input-box">{{item.value || '请选择'}}</view>
</picker>
</view>
</view>
</template>
<template v-if="item.type == 'area'">
<!-- 地区选择 -->
<view class="table-item">
<view class="d-s-c make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="uni-list make-item">
<view class="input-box flex-1 selectpicker mb20">
<input class="" type="text" placeholder-class="grary9" placeholder="请选择地区"
v-model="item.value " disabled="true" @click="changeArea(index)" />
</view>
<view class="pr selectpicker">
<input class="make-item input-box" v-model="item.address" type="text"
placeholder="请输入详情地址" />
</view>
</view>
</view>
</template>
<template v-if="item.type == 'image'">
<!-- 图片上传 -->
<view class="table-item">
<view class="d-s-c make-top">
<view class="fb color-28 f26"><text
:class="item.is_required!='false'?'red':'white'">*</text>{{item.name}}</view>
</view>
<view class="uni-list">
<button type="default" class="btn-red mb20 theme-btn" @click="openUpload(index)">上传图片</button>
<view v-if="item.value!=''">
<image style="width: 300rpx;" :src="item.value" mode="widthFix"></image>
</view>
</view>
</view>
</template>
</view>
<view class="ww100">
<view class="submit theme-btn" @click="submit">提交</view>
</view>
<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
<Upload v-if="isupload" @getImgs="getImgsFunc">上传图片</Upload>
</view>
</template>
<script>
import Upload from '@/components/upload/upload';
import utils from '@/common/utils.js';
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
components: {
mpvueCityPicker,
Upload
},
data() {
return {
loading:true,
table_id: 0,
name: '',
tableData: [],
/* 地区选择数据 */
province: [],
city: [],
area: [],
is_load: false,
cityPickerValueDefault: [0, 0, 0],
areaIndex: 0,
/* 上传图片 */
isupload: false,
uploadIndex: 0,
order_product_id: 0
}
},
onShow() {
if(this.loading){
this.getData();
}
},
onLoad(e) {
this.table_id = e.table_id;
if(e.order_product_id){
this.order_product_id = e.order_product_id;
}
},
methods: {
getData() {
let self = this;
self.loading = true;
uni.showLoading({
title:'加载中'
})
self._get('plus.table.table/add', {
table_id: self.table_id
}, function(res) {
self.loading = false;
self.tableData = res.data.model.tableData;
self.tableData.forEach((item, index) => {
self.$set(self.tableData[index], 'value', '')
})
/* 地区数据 */
self.province = res.data.regionData[0];
self.city = res.data.regionData[1];
self.area = res.data.regionData[2];
self.is_load = true;
/* 修改标题 */
self.name = res.data.model.name;
uni.setNavigationBarTitle({
title: self.name
});
uni.hideLoading()
})
},
getName(str) {
return str.split(',')
},
getRadioGroup(index, e) {
let arr = this.tableData[index].value.split(',');
return arr.indexOf(e)
},
/* 单选框 */
changeRadio(e, index) {
this.tableData[index].value = e.detail.value;
},
/* 多选框 */
changeRadioGroup(e, index) {
let arr = [];
if (this.tableData[index].value != '') {
arr = this.tableData[index].value.split(',');
}
let n = arr.indexOf(e);
if (n != -1) {
arr.splice(n, 1);
this.$set(this.tableData[index], 'value', arr.join(','))
} else {
arr.push(e);
this.$set(this.tableData[index], 'value', arr.join(','))
}
},
/* 下拉框 */
changeSelect(e, index) {
this.tableData[index].value = this.getName(this.tableData[index].select_value)[e.detail.value];
},
/* 日期选择 */
changeDate(e, index) {
this.tableData[index].value = e.detail.value;
},
/* 地区选择 */
changeArea(index) {
this.areaIndex = index;
this.$refs.mpvueCityPicker.show();
},
/*确定选择的省市区*/
onConfirm(e) {
this.tableData[this.areaIndex].value = e.label;
this.cityPickerValueDefault = [0, 0, 0];
this.areaIndex = 0;
},
/*上传*/
openUpload(i) {
this.uploadIndex = i;
this.isupload = true;
},
/*获取图片*/
getImgsFunc(e) {
if (e != null && e.length > 0) {
this.tableData[this.uploadIndex].value = e[0].file_path;
}
this.uploadIndex = 0;
this.isupload = false;
},
submit() {
let self = this;
let flag = true;
let text = ''
this.tableData.forEach((item, index) => {
if (item.is_required != 'false') {
switch (item.rule) {
case 'mobile':
if (!utils.isPoneAvailable(item.value)) {
text = '请输入正确的手机号';
flag = false;
}
break;
case 'idcard':
if (!utils.isVail(item.value)) {
text = '请输入正确的身份证号码';
flag = false;
}
break;
case 'phone':
if (!utils.isTelAvailable(item.value)) {
text = '请输入正确的座机或手机号';
flag = false;
}
break;
case 'email':
if (!utils.isMail(item.value)) {
text = '请输入正确的电子邮箱';
flag = false;
}
break;
case 'number':
if (!utils.isNum(item.value)) {
text = '请输入正确的数字';
flag = false;
}
break;
case 'no':
if (item.value == '') {
text = '必填项不能为空';
flag = false;
console.log(item)
}
break;
}
}
})
if (!flag) {
self.showError(text);
return false
}
let params = [...self.tableData];
params.forEach((item, index) => {
if (item.type == 'area') {
item.value = item.value + item.address
}
})
params = JSON.stringify(params);
self._post('plus.table.table/add', {
tableData: params,
table_id: self.table_id,
order_product_id: self.order_product_id
}, function(res) {
self.showSuccess('提交成功', function() {
// #ifndef H5
uni.navigateBack({
delta: parseInt(1)
});
// #endif
// #ifdef H5
history.go(-1);
// #endif
})
})
}
}
}
</script>
<style lang="scss">
.table-item {
margin-bottom: 16rpx;
background-color: #FFFFFF;
border-radius: 8rpx;
padding: 26rpx;
box-sizing: border-box;
}
.make-top {
font-size: 26rpx;
color: #333333;
margin-bottom: 33rpx;
font-weight: 600;
}
.uni-list {
flex: 1;
}
.radio_group {
width: 44rpx;
height: 44rpx;
box-sizing: border-box;
border-radius: 50%;
background-color: #ffffff;
border: 2rpx solid $dominant-color;
}
.radio_group.active {
background-color: #ffffff;
border: 11rpx solid $dominant-color;
}
.selectpicker {
width: 693rpx;
height: 65rpx;
line-height: 65rpx;
padding: 0 23rpx;
box-sizing: border-box;
border: 2rpx solid #BFBFBF;
border-radius: 5rpx;
font-size: 26rpx;
font-weight: 500;
color: #575757;
display: flex;
justify-content: space-between;
align-items: center;
}
.selectpicker .jiantou {
color: #575757;
font-size: 22rpx;
}
.textarea-box {
width: 695rpx;
border: 2rpx solid #BFBFBF;
border-radius: 5rpx;
font-size: 26rpx;
font-weight: 500;
color: #575757;
padding: 26rpx;
box-sizing: border-box;
}
.table-item-box {
width: 695rpx;
border: 2rpx solid #BFBFBF;
border-radius: 5rpx;
font-size: 26rpx;
font-weight: 500;
color: #575757;
padding: 0 15rpx;
box-sizing: border-box;
}
.btn-red {
width: 160rpx;
height: 60rpx;
border-radius: 30rpx;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
}
.submit {
width: 690rpx;
height: 93rpx;
display: flex;
justify-content: center;
align-items: center;
background: #EE1413;
box-shadow: 7rpx 12rpx 13rpx 0rpx #EE141309;
border-radius: 50rpx;
font-size: 32rpx;
font-family: PingFang;
font-weight: 800;
color: #FFFFFF;
margin: 70rpx auto;
}
</style>