弹窗样式修改，组件预定义
This commit is contained in:
parent
a7f9544bc5
commit
6aa66ce311
|
|
@ -1,10 +1,8 @@
|
|||
<template>
|
||||
<view class="form-checkbox">
|
||||
<view v-for="(item, index) in options" :key="index" class="checkbox-item" @click="toggle(item)">
|
||||
<view :class="['checkbox-dot', { checked: isSelected(item.value) }]">
|
||||
<text v-if="isSelected(item.value)" class="check-icon">✓</text>
|
||||
</view>
|
||||
<text class="checkbox-label">{{ item.label }}</text>
|
||||
<view v-for="(item, index) in options" :key="index" class="checkbox-item" @click="onToggle(item)">
|
||||
<view class="checkbox-dot" :class="{ active: isChecked(item) }"></view>
|
||||
<text class="checkbox-label">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -13,44 +11,30 @@
|
|||
export default {
|
||||
name: 'FormItemCheckbox',
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
selectedValues: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (val) {
|
||||
this.selectedValues = Array.isArray(val) ? val.slice() : [];
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
value: { type: Array, default: function () { return []; } },
|
||||
options: { type: Array, default: function () { return []; } },
|
||||
maxCount: { type: Number, default: 0 }
|
||||
},
|
||||
methods: {
|
||||
isSelected: function (val) {
|
||||
return this.selectedValues.indexOf(val) > -1;
|
||||
isChecked: function (val) {
|
||||
return this.value && this.value.indexOf(val) !== -1;
|
||||
},
|
||||
toggle: function (item) {
|
||||
var index = this.selectedValues.indexOf(item.value);
|
||||
if (index > -1) {
|
||||
this.selectedValues.splice(index, 1);
|
||||
} else {
|
||||
this.selectedValues.push(item.value);
|
||||
onToggle: function (val) {
|
||||
var newValue = (this.value || []).slice();
|
||||
var index = newValue.indexOf(val);
|
||||
if (index === -1) {
|
||||
if (this.maxCount > 0 && newValue.length >= this.maxCount) {
|
||||
uni.showToast({
|
||||
title: '最多只能选择' + this.maxCount + '项',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$emit('input', this.selectedValues.slice());
|
||||
newValue.push(val);
|
||||
} else {
|
||||
newValue.splice(index, 1);
|
||||
}
|
||||
this.$emit('input', newValue);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -60,34 +44,39 @@ export default {
|
|||
.form-checkbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
margin-right: 40rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.checkbox-dot {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
border: 2rpx solid #dddddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #cccccc;
|
||||
margin-right: 12rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-dot.checked {
|
||||
.checkbox-dot.active {
|
||||
border-color: #e8101e;
|
||||
background-color: #e8101e;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
.checkbox-dot.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -60%) rotate(-45deg);
|
||||
width: 20rpx;
|
||||
height: 12rpx;
|
||||
border-left: 4rpx solid #ffffff;
|
||||
border-bottom: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
|
|
|
|||
|
|
@ -16,44 +16,44 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "FormItemImage",
|
||||
name: 'FormItemImage',
|
||||
props: {
|
||||
value: { type: Array, default: function() { return []; } },
|
||||
value: { type: Array, default: function () { return []; } },
|
||||
maxCount: { type: Number, default: 9 }
|
||||
},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
imageList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function(val) {
|
||||
handler: function (val) {
|
||||
this.imageList = Array.isArray(val) ? val.slice() : [];
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseImage: function() {
|
||||
chooseImage: function () {
|
||||
var remaining = this.maxCount - this.imageList.length;
|
||||
if (remaining <= 0) return;
|
||||
var self = this;
|
||||
uni.chooseImage({
|
||||
count: remaining,
|
||||
sizeType: ["compressed"],
|
||||
sourceType: ["album", "camera"],
|
||||
success: function(res) {
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: function (res) {
|
||||
self.imageList = self.imageList.concat(res.tempFilePaths);
|
||||
self.$emit("input", self.imageList);
|
||||
self.$emit('input', self.imageList);
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteImage: function(index) {
|
||||
deleteImage: function (index) {
|
||||
this.imageList.splice(index, 1);
|
||||
this.$emit("input", this.imageList);
|
||||
this.$emit('input', this.imageList);
|
||||
},
|
||||
previewImage: function(index) {
|
||||
previewImage: function (index) {
|
||||
uni.previewImage({
|
||||
urls: this.imageList,
|
||||
current: index
|
||||
|
|
@ -67,44 +67,54 @@ export default {
|
|||
.form-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background-color: #f5f5f5;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx dashed #cccccc;
|
||||
border: 2rpx dashed #dddddd;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 60rpx;
|
||||
color: #999999;
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
<template>
|
||||
<input type="number" class="form-input" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
|
||||
@input="$emit('input', $event.detail.value)" />
|
||||
<view class="form-number-wrap">
|
||||
<input type="digit" :value="value" :placeholder="placeholder" placeholder-class="placeholder" class="form-input" @input="onInput" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormItemNumber',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
value: { type: [String, Number], default: '' },
|
||||
placeholder: { type: String, default: '请输入' }
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入数字'
|
||||
methods: {
|
||||
onInput: function(e) {
|
||||
this.$emit('input', e.target.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-number-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,22 @@
|
|||
<template>
|
||||
<view class="form-radio">
|
||||
<view v-for="(item, index) in options" :key="index" class="radio-item" @click="onSelect(item.value)">
|
||||
<view class="radio-dot" :class="{ active: value == item.value }"></view>
|
||||
<text class="radio-label">{{ item.label }}</text>
|
||||
<view v-for="(item, index) in options" :key="index" class="radio-item" @click="onSelect(item)">
|
||||
<view class="radio-dot" :class="{ active: value === item }"></view>
|
||||
<text class="radio-label">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FormItemRadio",
|
||||
name: 'FormItemRadio',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
value: { type: [String, Number], default: '' },
|
||||
options: { type: Array, default: function () { return []; } }
|
||||
},
|
||||
methods: {
|
||||
onSelect: function(val) {
|
||||
this.$emit("input", val);
|
||||
onSelect: function (val) {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -35,12 +27,14 @@ export default {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 40rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.radio-dot {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
|
|
@ -49,12 +43,14 @@ export default {
|
|||
margin-right: 12rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio-dot.active {
|
||||
border-color: #e8101e;
|
||||
background-color: #e8101e;
|
||||
}
|
||||
|
||||
.radio-dot.active::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -64,6 +60,7 @@ export default {
|
|||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
|
|
|||
|
|
@ -1,83 +1,43 @@
|
|||
<template>
|
||||
<view class="form-richtext">
|
||||
<view class="richtext-toolbar">
|
||||
<text class="toolbar-btn" @click="insertTag('b')">加粗</text>
|
||||
<text class="toolbar-btn" @click="insertTag('i')">斜体</text>
|
||||
<text class="toolbar-btn" @click="insertImage">图片</text>
|
||||
</view>
|
||||
<textarea class="richtext-editor" :value="value" placeholder="请输入图文内容" placeholder-class="placeholder"
|
||||
@input="$emit('input', $event.detail.value)" />
|
||||
<view v-if="value" class="richtext-preview">
|
||||
<rich-text :nodes="value" />
|
||||
<view class="richtext-trigger" @click="goEdit">
|
||||
<text class="richtext-value">{{ value ? '已设置' : '去设置' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FormItemRichtext",
|
||||
name: 'FormItemRichtext',
|
||||
props: {
|
||||
value: { type: String, default: "" },
|
||||
value: { type: String, default: '' }
|
||||
},
|
||||
methods: {
|
||||
insertTag(tag) {
|
||||
const text = `<${tag}></${tag}>`;
|
||||
this.$emit("input", (this.value || "") + text);
|
||||
},
|
||||
insertImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const imgTag = `<img src="${res.tempFilePaths[0]}" />`;
|
||||
this.$emit("input", (this.value || "") + imgTag);
|
||||
},
|
||||
goEdit: function () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shop/add-img-text?list=' + this.value
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-richtext {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.richtext-toolbar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 8rpx 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 4rpx;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
.richtext-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.richtext-editor {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
background-color: #ffffff;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-top: none;
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
padding: 20rpx;
|
||||
.richtext-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.richtext-preview {
|
||||
margin-top: 16rpx;
|
||||
padding: 16rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8rpx;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,29 @@
|
|||
<template>
|
||||
<picker :range="optionLabels" @change="onChange">
|
||||
<picker :range="options" @change="onChange">
|
||||
<view class="form-select">
|
||||
<text :class="['select-text', selectedLabel ? '' : 'placeholder']">
|
||||
{{ selectedLabel || placeholder }}
|
||||
<text :class="['select-text', value ? '' : 'placeholder']">
|
||||
{{ value || placeholder }}
|
||||
</text>
|
||||
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png" class="arrow-right" mode="aspectFit" />
|
||||
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png" class="arrow-right"
|
||||
mode="aspectFit" />
|
||||
</view>
|
||||
</picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FormItemSelect",
|
||||
name: 'FormItemSelect',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请选择"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
optionLabels: function() {
|
||||
return this.options.map(function(item) {
|
||||
return item.label;
|
||||
});
|
||||
},
|
||||
selectedLabel: function() {
|
||||
var self = this;
|
||||
var found = this.options.find(function(item) {
|
||||
return item.value == self.value;
|
||||
});
|
||||
return found ? found.label : "";
|
||||
}
|
||||
value: { type: [String, Number], default: '' },
|
||||
options: { type: Array, default: function () { return []; } },
|
||||
placeholder: { type: String, default: '请选择' }
|
||||
},
|
||||
methods: {
|
||||
onChange: function(e) {
|
||||
onChange: function (e) {
|
||||
var index = e.detail.value;
|
||||
var selected = this.options[index];
|
||||
if (selected) {
|
||||
this.$emit("input", selected.value);
|
||||
if (selected !== undefined) {
|
||||
this.$emit('input', selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,21 +35,22 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.select-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
<template>
|
||||
<input type="text" class="form-input" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
|
||||
@input="$emit('input', $event.detail.value)" />
|
||||
<view class="form-text-wrap">
|
||||
<input type="text" :value="value" :placeholder="placeholder" placeholder-class="placeholder" class="form-input" @input="onInput" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormItemText',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
value: { type: [String, Number], default: '' },
|
||||
placeholder: { type: String, default: '请输入' }
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入'
|
||||
methods: {
|
||||
onInput: function(e) {
|
||||
this.$emit('input', e.target.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-text-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<view class="textarea-wrap">
|
||||
<textarea class="form-textarea" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
|
||||
maxlength="200" @input="$emit('input', $event.detail.value)" />
|
||||
<text class="char-count">{{ (value || '').length }}/200</text>
|
||||
<view class="detail-textarea-wrap">
|
||||
<textarea class="detail-textarea" :value="value" :placeholder="placeholder" placeholder-class="placeholder" maxlength="200" @input="onInput" />
|
||||
<text class="detail-count">{{ (value || '').length }}/200</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -10,47 +9,44 @@
|
|||
export default {
|
||||
name: 'FormItemTextarea',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
value: { type: String, default: '' },
|
||||
placeholder: { type: String, default: '请输入' }
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入'
|
||||
methods: {
|
||||
onInput: function(e) {
|
||||
this.$emit('input', e.target.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.textarea-wrap {
|
||||
width: 100%;
|
||||
.detail-textarea-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 1.5;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
background: #f7f7f7;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 24rpx 52rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-weight: 400;
|
||||
.detail-textarea {
|
||||
width: 100%;
|
||||
height: 108rpx;
|
||||
min-height: 108rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
.detail-count {
|
||||
position: absolute;
|
||||
right: 16rpx;
|
||||
right: 24rpx;
|
||||
bottom: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,51 @@
|
|||
<template>
|
||||
<view class="form-video">
|
||||
<view v-if="videoUrl" class="video-preview">
|
||||
<video :src="videoUrl" class="video-player" controls />
|
||||
<video :src="videoUrl" class="preview-video" controls />
|
||||
<view class="delete-btn" @click="deleteVideo">
|
||||
<text class="delete-icon">×</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="video-add" @click="chooseVideo">
|
||||
<text class="add-icon">+</text>
|
||||
<text class="add-text">选择视频</text>
|
||||
<view v-else class="upload-btn" @click="chooseVideo">
|
||||
<text class="plus-icon">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FormItemVideo",
|
||||
name: 'FormItemVideo',
|
||||
props: {
|
||||
value: { type: String, default: "" }
|
||||
value: { type: String, default: '' }
|
||||
},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
videoUrl: ""
|
||||
videoUrl: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function(val) {
|
||||
this.videoUrl = val || "";
|
||||
handler: function (val) {
|
||||
this.videoUrl = val || '';
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseVideo: function() {
|
||||
chooseVideo: function () {
|
||||
var self = this;
|
||||
uni.chooseVideo({
|
||||
sourceType: ["album", "camera"],
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 60,
|
||||
success: function(res) {
|
||||
success: function (res) {
|
||||
self.videoUrl = res.tempFilePath;
|
||||
self.$emit("input", self.videoUrl);
|
||||
self.$emit('input', self.videoUrl);
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteVideo: function() {
|
||||
this.videoUrl = "";
|
||||
this.$emit("input", "");
|
||||
deleteVideo: function () {
|
||||
this.videoUrl = '';
|
||||
this.$emit('input', '');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -56,49 +55,50 @@ export default {
|
|||
.form-video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-preview {
|
||||
width: 100%;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
}
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
|
||||
.preview-video {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.video-add {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background-color: #f5f5f5;
|
||||
border: 2rpx dashed #cccccc;
|
||||
|
||||
.upload-btn {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background-color: #ffffff;
|
||||
border: 2rpx dashed #dddddd;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.add-icon {
|
||||
|
||||
.plus-icon {
|
||||
font-size: 60rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.add-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,89 @@
|
|||
<template>
|
||||
<view class="dynamic-form">
|
||||
<view v-for="(field, index) in fields" :key="field.id || index" class="form-item"
|
||||
:class="{ 'form-item-up': isUpType(field.type) }">
|
||||
<view class="form-header">
|
||||
<text class="form-label" :class="{ required: field.is_required == 1 }">{{ field.label }}</text>
|
||||
<text v-if="field.tips" class="form-tips">{{ field.tips }}</text>
|
||||
</view>
|
||||
<view class="form-control">
|
||||
<view v-for="(field, index) in fields" :key="field.key" class="form-section">
|
||||
<!-- 单行文本 -->
|
||||
<form-item-text v-if="field.type === 'text'" :value="formData[field.key]"
|
||||
:placeholder="field.placeholder" @input="onInput(field.key, $event)" />
|
||||
<view v-if="field.type === 'text'" class="form-item">
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<input type="text" :value="formData[field.key]" :placeholder="field.placeholder" placeholder-class="placeholder"
|
||||
class="form-input" @input="onInput(field.key, $event)" />
|
||||
</view>
|
||||
|
||||
<!-- 多行文本 -->
|
||||
<form-item-textarea v-else-if="field.type === 'textarea'" :value="formData[field.key]"
|
||||
:placeholder="field.placeholder" @input="onInput(field.key, $event)" />
|
||||
<view v-else-if="field.type === 'textarea'" class="detail-card">
|
||||
<view class="detail-row">
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<view class="detail-textarea-wrap">
|
||||
<textarea class="detail-textarea" :value="formData[field.key]" :placeholder="field.placeholder"
|
||||
placeholder-class="placeholder" maxlength="200" @input="onInput(field.key, $event)" />
|
||||
<text class="detail-count">{{ (formData[field.key] || '').length }}/200</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数字输入 -->
|
||||
<form-item-number v-else-if="field.type === 'number'" :value="formData[field.key]"
|
||||
:placeholder="field.placeholder" @input="onInput(field.key, $event)" />
|
||||
<view v-else-if="field.type === 'number'" class="form-item" :style="field.tip ? 'flex-wrap: wrap;' : ''">
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<input type="digit" :value="formData[field.key]" :placeholder="field.placeholder"
|
||||
placeholder-class="placeholder" class="form-input" @input="onInput(field.key, $event)" />
|
||||
<text v-if="field.tips && !field.tip" class="form-tips">{{ field.tips }}</text>
|
||||
<view v-if="field.tip" class="price-tip">
|
||||
<text class="price-tip-card">{{ field.tip }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 多图上传 -->
|
||||
<form-item-image v-else-if="field.type === 'image_multi'" :value="formData[field.key]"
|
||||
:maxCount="field.maxCount || 9" @input="onInput(field.key, $event)" />
|
||||
<view v-else-if="field.type === 'image_multi'" class="form-item-up upload-item">
|
||||
<view>
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<text class="upload-tip">(仅可上传{{ field.maxCount || 9 }}个图片)</text>
|
||||
</view>
|
||||
<view class="upload-content">
|
||||
<form-item-image :value="formData[field.key]" :maxCount="field.maxCount || 9"
|
||||
@input="onInput(field.key, $event)" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 视频上传 -->
|
||||
<form-item-video v-else-if="field.type === 'video'" :value="formData[field.key]"
|
||||
@input="onInput(field.key, $event)" />
|
||||
<view v-else-if="field.type === 'video'" class="form-item-up upload-item">
|
||||
<view>
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<text class="upload-tip">(仅可上传1个视频)</text>
|
||||
</view>
|
||||
<view class="upload-content">
|
||||
<form-item-video :value="formData[field.key]" @input="onInput(field.key, $event)" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下拉选择 -->
|
||||
<form-item-select v-else-if="field.type === 'select'" :value="formData[field.key]"
|
||||
:options="field.options" :placeholder="field.placeholder" @input="onInput(field.key, $event)" />
|
||||
<!-- 单选 -->
|
||||
<form-item-radio v-else-if="field.type === 'single_select'" :value="formData[field.key]"
|
||||
:options="field.options" @input="onInput(field.key, $event)" />
|
||||
<!-- 多选 -->
|
||||
<form-item-checkbox v-else-if="field.type === 'multi_select'" :value="formData[field.key]"
|
||||
:options="field.options" @input="onInput(field.key, $event)" />
|
||||
<!-- 图文编辑器 -->
|
||||
<form-item-richtext v-else-if="field.type === 'richtext_editor'" :value="formData[field.key]"
|
||||
<view v-else-if="field.type === 'select'" class="form-item">
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<form-item-select :value="formData[field.key]" :options="field.options || []" :placeholder="field.placeholder"
|
||||
@input="onInput(field.key, $event)" />
|
||||
</view>
|
||||
|
||||
<!-- 单选 -->
|
||||
<view v-else-if="field.type === 'single_select'" class="form-item" style="flex-wrap: wrap;">
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<view class="select-options">
|
||||
<form-item-radio :value="formData[field.key]" :options="field.options || []"
|
||||
@input="onInput(field.key, $event)" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 多选 -->
|
||||
<view v-else-if="field.type === 'multi_select'" class="form-item" style="flex-wrap: wrap;">
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<view class="select-options">
|
||||
<form-item-checkbox :value="formData[field.key]" :options="field.options || []"
|
||||
:maxCount="field.maxCount || 0" @input="onInput(field.key, $event)" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文编辑器 -->
|
||||
<view v-else-if="field.type === 'richtext_editor'" class="form-item">
|
||||
<text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
|
||||
<form-item-richtext :value="formData[field.key]" @input="onInput(field.key, $event)" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -53,28 +102,24 @@ import FormItemRichtext from './FormItemRichtext.vue';
|
|||
export default {
|
||||
name: 'DynamicForm',
|
||||
components: {
|
||||
FormItemText,
|
||||
FormItemTextarea,
|
||||
FormItemNumber,
|
||||
FormItemImage,
|
||||
FormItemVideo,
|
||||
FormItemSelect,
|
||||
FormItemRadio,
|
||||
FormItemCheckbox,
|
||||
FormItemRichtext
|
||||
'form-item-text': FormItemText,
|
||||
'form-item-textarea': FormItemTextarea,
|
||||
'form-item-number': FormItemNumber,
|
||||
'form-item-image': FormItemImage,
|
||||
'form-item-video': FormItemVideo,
|
||||
'form-item-select': FormItemSelect,
|
||||
'form-item-radio': FormItemRadio,
|
||||
'form-item-checkbox': FormItemCheckbox,
|
||||
'form-item-richtext': FormItemRichtext
|
||||
},
|
||||
props: {
|
||||
fields: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
default: function () { return []; }
|
||||
},
|
||||
value: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {};
|
||||
}
|
||||
default: function () { return {}; }
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
|
|
@ -87,48 +132,49 @@ export default {
|
|||
handler: function (val) {
|
||||
this.formData = Object.assign({}, val);
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
immediate: true
|
||||
},
|
||||
fields: {
|
||||
handler: function (val) {
|
||||
handler: function () {
|
||||
var self = this;
|
||||
if (val && val.length > 0) {
|
||||
val.forEach(function (field) {
|
||||
if (self.formData[field.key] === undefined) {
|
||||
self.$set(self.formData, field.key, self.getDefaultValue(field.type));
|
||||
var data = {};
|
||||
this.fields.forEach(function (field) {
|
||||
if (self.formData[field.key] !== undefined) {
|
||||
data[field.key] = self.formData[field.key];
|
||||
} else if (field.default_value !== undefined) {
|
||||
data[field.key] = field.default_value;
|
||||
} else if (field.type === 'multi_select' || field.type === 'image_multi') {
|
||||
data[field.key] = [];
|
||||
} else {
|
||||
data[field.key] = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
this.formData = Object.assign({}, this.formData, data);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isUpType: function (type) {
|
||||
return type === 'image_multi' || type === 'video';
|
||||
},
|
||||
getDefaultValue: function (type) {
|
||||
if (type === 'multi_select') {
|
||||
return [];
|
||||
onInput: function (key, event) {
|
||||
var value = event;
|
||||
if (event && event.target && event.target.value !== undefined) {
|
||||
value = event.target.value;
|
||||
}
|
||||
if (type === 'image_multi') {
|
||||
return [];
|
||||
}
|
||||
return '';
|
||||
this.$set(this.formData, key, value);
|
||||
this.$emit('input', this.formData);
|
||||
},
|
||||
onInput: function (key, val) {
|
||||
this.$set(this.formData, key, val);
|
||||
this.$emit('input', Object.assign({}, this.formData));
|
||||
getData: function () {
|
||||
return Object.assign({}, this.formData);
|
||||
},
|
||||
validate: function () {
|
||||
var self = this;
|
||||
for (var i = 0; i < this.fields.length; i++) {
|
||||
var field = this.fields[i];
|
||||
if (field.is_required == 1) {
|
||||
var val = this.formData[field.key];
|
||||
if (val === undefined || val === null || val === '' || (Array.isArray(val) && val.length === 0)) {
|
||||
if (field.is_required === true) {
|
||||
var value = self.formData[field.key];
|
||||
if (!value || (Array.isArray(value) && value.length === 0)) {
|
||||
uni.showToast({
|
||||
title: '请填写' + field.label,
|
||||
title: field.label + '不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
|
|
@ -136,9 +182,6 @@ export default {
|
|||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
getData: function () {
|
||||
return Object.assign({}, this.formData);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -149,6 +192,10 @@ export default {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
|
|
@ -161,26 +208,14 @@ export default {
|
|||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.form-item-up {
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.form-label.required::before {
|
||||
.required::before {
|
||||
content: '*';
|
||||
color: #e8101e;
|
||||
color: #ff0000;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
|
|
@ -190,8 +225,100 @@ export default {
|
|||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
.price-tip {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.price-tip-card {
|
||||
padding: 8rpx 12rpx;
|
||||
background: #FDF0F0;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #E8101E;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.form-item-up {
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.upload-item {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-options {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 24rpx 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
padding: 24rpx 0 36rpx;
|
||||
}
|
||||
|
||||
.detail-row .form-label {
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.detail-textarea-wrap {
|
||||
position: relative;
|
||||
background: #f7f7f7;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 24rpx 52rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.detail-textarea {
|
||||
width: 100%;
|
||||
height: 108rpx;
|
||||
min-height: 108rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.detail-count {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
bottom: 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -99,13 +99,12 @@
|
|||
</view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="add-btn"></view> -->
|
||||
|
||||
<!-- 服务分类选择弹窗 -->
|
||||
<view class="category-popup-mask" v-if="showCategoryPopup" @click="closeCategoryPopup">
|
||||
<view class="category-popup" @click.stop>
|
||||
<view class="category-popup-header">
|
||||
<text class="category-popup-title">选择服务分类</text>
|
||||
<text class="category-popup-title">选择服务类型</text>
|
||||
<view class="category-popup-close" @click="closeCategoryPopup">
|
||||
<text class="category-popup-close-icon">×</text>
|
||||
</view>
|
||||
|
|
@ -124,10 +123,16 @@
|
|||
<view v-if="secondClassList.length === 0" class="category-empty">
|
||||
<text class="category-empty-text">暂无子分类</text>
|
||||
</view>
|
||||
<view v-for="item in secondClassList" :key="item.id" class="category-right-item"
|
||||
<view v-for="item in secondClassList" :key="item.id"
|
||||
:class="['category-right-item', { selected: selectedSecondId === item.id }]"
|
||||
@click="selectSecondClass(item)">
|
||||
<text class="category-right-text">{{ item.title }}</text>
|
||||
<view :class="['category-dot', { selected: selectedSecondId === item.id }]"></view>
|
||||
<image class="category-icon"
|
||||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b6fa6b5b-b5c1-45e3-9372-74ade548f76b.png"
|
||||
mode="widthFix" v-if="!selectedSecondId || selectedSecondId !== item.id"></image>
|
||||
<image class="category-icon"
|
||||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f0f97cad-03f6-4363-abb5-58d3176cfa81.png"
|
||||
mode="widthFix" v-else></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
|
@ -187,31 +192,6 @@ export default {
|
|||
selectedSecondId: null,
|
||||
};
|
||||
},
|
||||
// computed: {
|
||||
// filteredServices() {
|
||||
// return this.services.filter(service => {
|
||||
// // 根据搜索文本过滤
|
||||
// if (this.title && !service.title.includes(this.title)) {
|
||||
// return false
|
||||
// }
|
||||
// // 根据当前标签过滤
|
||||
// switch (this.currentTab) {
|
||||
// case 0: // 草稿
|
||||
// return service.state === 2
|
||||
// case 1: // 审核中
|
||||
// return service.state === 1
|
||||
// case 2: // 已上架
|
||||
// return service.state === 2
|
||||
// case 3: // 下架
|
||||
// return service.state === 3
|
||||
// case 4: // 驳回
|
||||
// return service.state === 4
|
||||
// default:
|
||||
// return true
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
onLoad() {
|
||||
this.getServicesList();
|
||||
},
|
||||
|
|
@ -256,7 +236,7 @@ export default {
|
|||
title: "下架成功",
|
||||
icon: "none",
|
||||
});
|
||||
this.getServicesList(0); // 刷新列表
|
||||
this.getServicesList(0);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
|
|
@ -280,7 +260,7 @@ export default {
|
|||
title: "上架成功",
|
||||
icon: "none",
|
||||
});
|
||||
this.getServicesList(0); // 刷新列表
|
||||
this.getServicesList(0);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
|
|
@ -296,7 +276,6 @@ export default {
|
|||
|
||||
},
|
||||
addService() {
|
||||
// 获取一级分类并显示弹窗
|
||||
request.post("/sj/firstclass", {}).then((res) => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.firstClassList = res.data;
|
||||
|
|
@ -304,7 +283,6 @@ export default {
|
|||
this.selectedSecondId = null;
|
||||
this.secondClassList = [];
|
||||
this.showCategoryPopup = true;
|
||||
// 自动加载第一个一级分类的二级分类
|
||||
this.loadSecondClass(res.data[0].id);
|
||||
} else {
|
||||
uni.showToast({
|
||||
|
|
@ -314,7 +292,6 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 加载二级分类
|
||||
loadSecondClass(firstId) {
|
||||
request.post("/user/secondclass", {
|
||||
id: firstId,
|
||||
|
|
@ -322,18 +299,15 @@ export default {
|
|||
this.secondClassList = res.data || [];
|
||||
});
|
||||
},
|
||||
// 选择一级分类
|
||||
selectFirstClass(index, item) {
|
||||
if (this.selectedFirstIndex === index) return;
|
||||
this.selectedFirstIndex = index;
|
||||
this.selectedSecondId = null;
|
||||
this.loadSecondClass(item.id);
|
||||
},
|
||||
// 选择二级分类（仅记录选中状态）
|
||||
selectSecondClass(item) {
|
||||
this.selectedSecondId = item.id;
|
||||
},
|
||||
// 确认选择分类
|
||||
confirmCategory() {
|
||||
if (this.selectedFirstIndex < 0) {
|
||||
uni.showToast({
|
||||
|
|
@ -342,7 +316,6 @@ export default {
|
|||
});
|
||||
return;
|
||||
}
|
||||
// 如果有二级分类但未选择
|
||||
if (this.secondClassList.length > 0 && !this.selectedSecondId) {
|
||||
uni.showToast({
|
||||
title: "请选择服务子类",
|
||||
|
|
@ -355,7 +328,6 @@ export default {
|
|||
uni.navigateTo({ url });
|
||||
this.closeCategoryPopup();
|
||||
},
|
||||
// 关闭分类弹窗
|
||||
closeCategoryPopup() {
|
||||
this.showCategoryPopup = false;
|
||||
this.firstClassList = [];
|
||||
|
|
@ -377,7 +349,7 @@ export default {
|
|||
title: "删除成功",
|
||||
icon: "none",
|
||||
});
|
||||
this.getServicesList(0); // 刷新列表
|
||||
this.getServicesList(0);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
|
|
@ -391,11 +363,8 @@ export default {
|
|||
},
|
||||
touchStart(e, index) {
|
||||
if (this.currentTab != 3) return;
|
||||
// 阻止默认事件和冒泡
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 获取触摸事件的坐标
|
||||
if (e.touches && e.touches[0]) {
|
||||
this.startX = e.touches[0].clientX;
|
||||
this.currentIndex = index;
|
||||
|
|
@ -404,87 +373,60 @@ export default {
|
|||
touchMove(e) {
|
||||
if (this.currentTab != 3) return;
|
||||
if (this.currentIndex === -1) return;
|
||||
|
||||
// 阻止默认事件和冒泡
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 获取触摸事件的坐标
|
||||
if (e.touches && e.touches[0]) {
|
||||
this.moveX = e.touches[0].clientX - this.startX;
|
||||
|
||||
// 限制只能向左滑动
|
||||
if (this.moveX > 0) {
|
||||
this.moveX = 0;
|
||||
}
|
||||
// 限制最大滑动距离
|
||||
if (this.moveX < -160) {
|
||||
this.moveX = -160;
|
||||
}
|
||||
// 更新当前项的滑动状态
|
||||
this.$set(this.services[this.currentIndex], "slideX", this.moveX);
|
||||
}
|
||||
},
|
||||
touchEnd(e) {
|
||||
if (this.currentTab != 3) return;
|
||||
if (this.currentIndex === -1) return;
|
||||
|
||||
// 阻止默认事件和冒泡
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 如果滑动距离超过一半，则完全展开
|
||||
if (this.moveX < -80) {
|
||||
this.$set(this.services[this.currentIndex], "slideX", -160);
|
||||
} else {
|
||||
// 否则恢复原位
|
||||
this.$set(this.services[this.currentIndex], "slideX", 0);
|
||||
}
|
||||
this.currentIndex = -1;
|
||||
},
|
||||
mouseDown(e, index) {
|
||||
if (this.currentTab != 3) return;
|
||||
// 阻止默认事件和冒泡
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.startX = e.clientX;
|
||||
this.currentIndex = index;
|
||||
},
|
||||
mouseMove(e) {
|
||||
if (this.currentTab != 3) return;
|
||||
if (this.currentIndex === -1) return;
|
||||
|
||||
// 阻止默认事件和冒泡
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.moveX = e.clientX - this.startX;
|
||||
|
||||
// 限制只能向左滑动
|
||||
if (this.moveX > 0) {
|
||||
this.moveX = 0;
|
||||
}
|
||||
// 限制最大滑动距离
|
||||
if (this.moveX < -160) {
|
||||
this.moveX = -160;
|
||||
}
|
||||
// 更新当前项的滑动状态
|
||||
this.$set(this.services[this.currentIndex], "slideX", this.moveX);
|
||||
},
|
||||
mouseUp(e) {
|
||||
if (this.currentTab != 3) return;
|
||||
if (this.currentIndex === -1) return;
|
||||
|
||||
// 阻止默认事件和冒泡
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 如果滑动距离超过一半，则完全展开
|
||||
if (this.moveX < -80) {
|
||||
this.$set(this.services[this.currentIndex], "slideX", -160);
|
||||
} else {
|
||||
// 否则恢复原位
|
||||
this.$set(this.services[this.currentIndex], "slideX", 0);
|
||||
}
|
||||
this.currentIndex = -1;
|
||||
|
|
@ -578,7 +520,7 @@ export default {
|
|||
transform: translateX(-50%);
|
||||
width: 32rpx;
|
||||
height: 6rpx;
|
||||
background-color: #E8101E;
|
||||
background-color: #FF4767;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
|
|
@ -623,7 +565,7 @@ export default {
|
|||
top: 0;
|
||||
width: 160rpx;
|
||||
height: 100%;
|
||||
background-color: #E8101E;
|
||||
background-color: #FF4767;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -669,20 +611,20 @@ export default {
|
|||
|
||||
.price-symbol {
|
||||
font-size: 24rpx;
|
||||
color: #E8101E;
|
||||
color: #FF4767;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 28rpx;
|
||||
color: #E8101E;
|
||||
color: #FF4767;
|
||||
font-weight: 500;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
font-size: 24rpx;
|
||||
color: #E8101E;
|
||||
color: #FF4767;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
|
|
@ -700,11 +642,11 @@ export default {
|
|||
|
||||
/* 已上架 */
|
||||
.status-tag.state2 {
|
||||
background-color: rgba(232, 16, 30, 0.2);
|
||||
background-color: rgba(255, 71, 103, 0.2);
|
||||
}
|
||||
|
||||
.status-tag.state2 .status-text {
|
||||
color: #E8101E;
|
||||
color: #FF4767;
|
||||
}
|
||||
|
||||
/* 审核中 */
|
||||
|
|
@ -720,13 +662,13 @@ export default {
|
|||
.status-tag.state0,
|
||||
.status-tag.state3,
|
||||
.status-tag.state4 {
|
||||
background-color: rgba(209, 15, 19, 0.2);
|
||||
background-color: rgba(255, 71, 103, 0.2);
|
||||
}
|
||||
|
||||
.status-tag.state0 .status-text,
|
||||
.status-tag.state3 .status-text,
|
||||
.status-tag.state4 .status-text {
|
||||
color: #d10f13;
|
||||
color: #FF4767;
|
||||
}
|
||||
|
||||
.btns {
|
||||
|
|
@ -816,7 +758,6 @@ export default {
|
|||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
.search-box input {
|
||||
/* 小程序搜索框样式调整 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -825,7 +766,6 @@ export default {
|
|||
}
|
||||
|
||||
.service-item {
|
||||
/* 小程序阴影效果 */
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
|
|
@ -846,17 +786,15 @@ export default {
|
|||
height: 88rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
background-color: #E8101E;
|
||||
background-color: #FF4767;
|
||||
border-radius: 16px;
|
||||
|
||||
.serviceBtn-text {
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 分类选择弹窗样式 */
|
||||
|
|
@ -881,24 +819,23 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.category-popup-header {
|
||||
.category-popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-title {
|
||||
.category-popup-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-close {
|
||||
.category-popup-close {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
|
|
@ -908,37 +845,37 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-close-icon {
|
||||
.category-popup-close-icon {
|
||||
font-size: 48rpx;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-body {
|
||||
.category-popup-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.category-left {
|
||||
.category-left {
|
||||
width: 220rpx;
|
||||
background-color: #f5f5f5;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.category-left-item {
|
||||
.category-left-item {
|
||||
padding: 30rpx 24rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.category-left-item.active {
|
||||
.category-left-item.active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.category-left-item.active::before {
|
||||
.category-left-item.active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -946,87 +883,72 @@ export default {
|
|||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 40rpx;
|
||||
background-color: #E8101E;
|
||||
background-color: #FF4767;
|
||||
border-radius: 0 3rpx 3rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-left-text {
|
||||
.category-left-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.category-left-item.active .category-left-text {
|
||||
color: #E8101E;
|
||||
.category-left-item.active .category-left-text {
|
||||
color: #FF4767;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.category-right {
|
||||
.category-right {
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.category-right-item {
|
||||
.category-right-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 32rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
/* 移除 border-bottom: 1rpx solid #f5f5f5; */
|
||||
}
|
||||
|
||||
.category-right-text {
|
||||
.category-right-item.selected .category-right-text {
|
||||
color: #FF4767;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.category-right-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.category-dot {
|
||||
.category-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #dddddd;
|
||||
margin-left: 16rpx;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.category-dot.selected {
|
||||
border-color: #E8101E;
|
||||
background-color: #E8101E;
|
||||
}
|
||||
|
||||
.category-dot.selected::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.category-empty {
|
||||
.category-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-empty-text {
|
||||
.category-empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-footer {
|
||||
.category-popup-footer {
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-btn {
|
||||
.category-popup-btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
|
|
@ -1034,22 +956,23 @@ export default {
|
|||
justify-content: center;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-btn-cancel {
|
||||
.category-popup-btn-cancel {
|
||||
background-color: #f5f5f5;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-btn-cancel text {
|
||||
.category-popup-btn-cancel text {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.category-popup-btn-confirm {
|
||||
background-color: #E8101E;
|
||||
}
|
||||
.category-popup-btn-confirm {
|
||||
background-color: #FF4767;
|
||||
}
|
||||
|
||||
.category-popup-btn-confirm text {
|
||||
.category-popup-btn-confirm text {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -151,20 +151,20 @@ export default {
|
|||
async getTemplate() {
|
||||
// 模拟数据
|
||||
const mockFields = [
|
||||
{ key: 'title', type: 'text', label: '服务名称', is_required: 1, placeholder: '请输入服务名称' },
|
||||
{ key: 'service_price', type: 'number', label: '服务定价', is_required: 1, placeholder: '请输入定价，最多两位小数', tips: '(元)' },
|
||||
{ key: 'sale_price', type: 'number', label: '服务售价', is_required: 1, placeholder: '请输入售价，最多两位小数', tips: '(元)' },
|
||||
{ key: 'service_time', type: 'number', label: '服务时长', is_required: 1, placeholder: '请输入服务时间', tips: '(分钟)' },
|
||||
{ key: 'effect', type: 'textarea', label: '服务功效', is_required: 1, placeholder: '请输入服务功效' },
|
||||
{ key: 'crowd', type: 'textarea', label: '适用人群', is_required: 1, placeholder: '请输入不适用人群，例如：未成年人/孕妇不适用' },
|
||||
{ key: 'product', type: 'textarea', label: '产品清单', is_required: 0, placeholder: '请输入产品清单' },
|
||||
{ key: 'scope', type: 'textarea', label: '适用范围', is_required: 0, placeholder: '请输入使用时间/适用人数' },
|
||||
{ key: 'tips_text', type: 'textarea', label: '温馨提示', is_required: 0, placeholder: '请输入其他注意事项' },
|
||||
{ key: 'images', type: 'image_multi', label: '服务图片', is_required: 1, maxCount: 9 },
|
||||
{ key: 'video', type: 'video', label: '上传短视频', is_required: 0 },
|
||||
{ key: 'category', type: 'select', label: '服务分类', is_required: 1, placeholder: '请选择服务分类', options: [{ label: '美发', value: '1' }, { label: '美甲', value: '2' }, { label: '美容', value: '3' }] },
|
||||
{ key: 'service_type', type: 'single_select', label: '服务类型', is_required: 1, options: [{ label: '到店服务', value: '1' }, { label: '上门服务', value: '2' }] },
|
||||
{ key: 'features', type: 'multi_select', label: '服务特色', is_required: 0, options: [{ label: '一对一服务', value: '1' }, { label: '免费咨询', value: '2' }, { label: '售后保障', value: '3' }] },
|
||||
{ key: 'title', type: 'text', label: '服务名称', is_required: true, placeholder: '请输入服务名称' },
|
||||
{ key: 'service_price', type: 'number', label: '服务定价', is_required: true, placeholder: '请输入定价，最多两位小数', tips: '(元)', tip: '服务的基础定价，未参与任何优惠的价格' },
|
||||
{ key: 'sale_price', type: 'number', label: '服务售价', is_required: true, placeholder: '请输入售价，最多两位小数', tips: '(元)', tip: '服务参与单品优惠后的价格' },
|
||||
{ key: 'service_time', type: 'number', label: '服务时长', is_required: true, placeholder: '请输入服务时间', tips: '(分钟)' },
|
||||
{ key: 'effect', type: 'textarea', label: '服务功效', is_required: true, placeholder: '请输入服务功效' },
|
||||
{ key: 'crowd', type: 'textarea', label: '适用人群', is_required: true, placeholder: '请输入不适用人群，例如：未成年人/孕妇不适用' },
|
||||
{ key: 'product', type: 'textarea', label: '产品清单', is_required: false, placeholder: '请输入产品清单' },
|
||||
{ key: 'scope', type: 'textarea', label: '适用范围', is_required: false, placeholder: '请输入使用时间/适用人数' },
|
||||
{ key: 'tips_text', type: 'textarea', label: '温馨提示', is_required: false, placeholder: '请输入其他注意事项' },
|
||||
{ key: 'images', type: 'image_multi', label: '服务图片', is_required: true, maxCount: 9 },
|
||||
{ key: 'video', type: 'video', label: '上传短视频', is_required: false },
|
||||
{ key: 'service_type', type: 'single_select', label: '服务类型', is_required: true, options: ['到店服务', '上门服务'] },
|
||||
{ key: 'features', type: 'multi_select', label: '服务特色', is_required: false, options: ['一对一服务', '免费咨询', '售后保障'], maxCount: 2 },
|
||||
{ key: 'graphic_details', type: 'richtext_editor', label: '图文详情', is_required: false },
|
||||
];
|
||||
try {
|
||||
const res = await request.post("/sj/servers/getTemplate", {
|
||||
|
|
|
|||
Loading…
Reference in New Issue