1235 lines
29 KiB
Vue
1235 lines
29 KiB
Vue
|
<template>
|
|||
|
|
<view class="add-service">
|
|||
|
|
<view class="tip" v-if="formData.back_text && formData.state==4">
|
|||
|
|
<image src="/static/images/shop/pintuan/warn.png" class="tip-icon">
|
|||
|
|
</image>
|
|||
|
|
|
|||
|
|
<text>{{ formData.back_text }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 表单区域 -->
|
|||
|
|
<view class="form-container">
|
|||
|
|
<!-- 服务名称 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label required">服务名称</text>
|
|||
|
|
<input type="text" v-model="formData.title" placeholder="请输入服务名称" placeholder-class="placeholder"
|
|||
|
|
class="form-input" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务价格 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label required">服务价格</text>
|
|||
|
|
<input type="digit" v-model.number="formData.server_price" placeholder="请输入服务价格，最多两位小数"
|
|||
|
|
placeholder-class="placeholder" class="form-input" @input="inpPrice" @blur="inpPrice"
|
|||
|
|
@confirm="inpPrice" step="0.01" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务分类 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label required">服务分类</text>
|
|||
|
|
<view class="form-right" @click="openServiceTypePicker">
|
|||
|
|
<text :class="['form-value', formData.first_class_id ? '' : 'placeholder']">
|
|||
|
|
{{serviceType || '选择分类'}}
|
|||
|
|
</text>
|
|||
|
|
<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务子类 -->
|
|||
|
|
<view class="form-item" v-if="showCategory">
|
|||
|
|
<text class="form-label required">服务子类</text>
|
|||
|
|
<view class="form-right" @click="openCategoryPicker">
|
|||
|
|
<text :class="['form-value', formData.second_class_id ? '' : 'placeholder']">
|
|||
|
|
{{category || '选择子类'}}
|
|||
|
|
</text>
|
|||
|
|
<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 是否允许该服务在门店售卖 -->
|
|||
|
|
<view class="form-item shopsale-box" v-if="artisanType == 1">
|
|||
|
|
<view class="form-label required">
|
|||
|
|
是否允许该服务在门店端售卖，以供门店下单购买。
|
|||
|
|
{{showShopPrice ? '门店下单购买后，您需到上门至门店进行服务，门店端展示价格为' : ''}}
|
|||
|
|
<text style="color:#E8101E;" v-if="showShopPrice">{{shopPrice}}</text>
|
|||
|
|
{{showShopPrice ? '元。' : ''}}
|
|||
|
|
</view>
|
|||
|
|
<view class="shopsale-change">
|
|||
|
|
<view class="shopsale-option" @click="changeSale(2)">
|
|||
|
|
<agree-radio :isAgree="formData.sj_see == 2"></agree-radio>
|
|||
|
|
<text class="option-text">允许</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="shopsale-option" @click="changeSale(1)">
|
|||
|
|
<agree-radio :isAgree="formData.sj_see == 1"></agree-radio>
|
|||
|
|
<text class="option-text">不允许</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务时间 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label required">服务时长</text>
|
|||
|
|
<input type="number" v-model="formData.server_time" placeholder="请输入服务时间"
|
|||
|
|
placeholder-class="placeholder" class="form-input" />
|
|||
|
|
<text class="pr-240">分钟</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务简介 -->
|
|||
|
|
<!-- <view class="form-item textarea-item">
|
|||
|
|
<text class="form-label">服务简介</text>
|
|||
|
|
<textarea
|
|||
|
|
v-model="formData.detail"
|
|||
|
|
placeholder="详细描述商品的购买详情、使用情况及出售原因能够更快的出售商品哦~"
|
|||
|
|
placeholder-class="placeholder"
|
|||
|
|
class="form-textarea"
|
|||
|
|
maxlength="-1"
|
|||
|
|
/>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<view class="form-step">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">图文详情</text>
|
|||
|
|
<view class="form-detail">
|
|||
|
|
<text @click="goImgAndText">{{ formData.graphic_details?"已设置":"去设置" }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-step">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label required">服务简介</text>
|
|||
|
|
<view class="form-detail">
|
|||
|
|
<text @click="showDetailCont">添加</text>
|
|||
|
|
<scroll-view class="detail-cont" scroll-y="true" v-if="isShow">
|
|||
|
|
<view class="detail-item" v-for="(item,i) in nowDetailList" @click="addDetailItem(item)">
|
|||
|
|
{{item.detailItem}}</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="step" v-for="(item,i) in formData.detail">
|
|||
|
|
<text class="form-label lable-view">{{item.title}}</text>
|
|||
|
|
<textarea class="step-textarea" v-model="formData.detail[i].text" />
|
|||
|
|
<image src="/static/images/delete_icon.png" class="delete-icon" mode="aspectFit"
|
|||
|
|
@click="deleteDetailItem(item,i)">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-step">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label required">服务流程</text>
|
|||
|
|
<text @click="addStep">添加</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="step" v-for="(item,i) in formData.process">
|
|||
|
|
<text class="form-label">第{{i+1}}步</text>
|
|||
|
|
<input type="text" class="step-inp" v-model="formData.process[i].text" />
|
|||
|
|
<image src="/static/images/delete_icon.png" class="delete-icon" mode="aspectFit"
|
|||
|
|
@click="deleteStep(i)">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 购买须知 -->
|
|||
|
|
<!-- <view class="form-item textarea-item">
|
|||
|
|
<text class="form-label">购买须知</text>
|
|||
|
|
<textarea
|
|||
|
|
v-model="formData.purchase_notes"
|
|||
|
|
placeholder="详细描述商品的购买详情、使用情况及出售原因能够更快的出售商品哦~"
|
|||
|
|
placeholder-class="placeholder"
|
|||
|
|
class="form-textarea"
|
|||
|
|
maxlength="-1"
|
|||
|
|
/>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- <circle-progress
|
|||
|
|
:progress="progress"
|
|||
|
|
:size="300"
|
|||
|
|
:strokeWidth="15"
|
|||
|
|
color="rgba(252, 67, 124, 1)"
|
|||
|
|
backgroundColor="rgba(245, 245, 245, 1)"
|
|||
|
|
/> -->
|
|||
|
|
|
|||
|
|
<!-- 上传短视频 -->
|
|||
|
|
<view class="form-item-up upload-item">
|
|||
|
|
<view>
|
|||
|
|
<text class="form-label">上传短视频</text>
|
|||
|
|
<text class="upload-tip">(仅可上传1个视频)</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <upload-video
|
|||
|
|
@addVideo="addVideo"
|
|||
|
|
@deleteVideo="deleteVideo"
|
|||
|
|
:video="formData.video"></upload-video> -->
|
|||
|
|
<ali-oss-uploader :max-count="1" :max-size="100" :type="artisanType+1"
|
|||
|
|
:user-id="formData.publish_user_id" :width="'654rpx'" :kind="2" :file-string="formData.video"
|
|||
|
|
accept="video/*" button-text="上传视频" @success="uploadVideoSuc" @error="uploadVideoErr"
|
|||
|
|
@delete="uploadVideoDel" @ckeckisShowPer="ckeckisShowPer" @ckecknowQer="ckecknowQer">
|
|||
|
|
</ali-oss-uploader>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务图片 -->
|
|||
|
|
<view class="form-item-up upload-item">
|
|||
|
|
<view>
|
|||
|
|
<text class="form-label required">服务图片</text>
|
|||
|
|
<text class="upload-tip">(仅可上传9个图片)</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <upload-img
|
|||
|
|
:photo="formData.photo"
|
|||
|
|
:maxNum="9"
|
|||
|
|
:width="'654rpx'"
|
|||
|
|
@addImg="addImg"
|
|||
|
|
@deleteImage="deleteImage"></upload-img> -->
|
|||
|
|
<ali-oss-uploader v-model="formData.photo" :max-count="9" :max-size="5" :width="'654rpx'"
|
|||
|
|
:type="artisanType+1" :user-id="formData.publish_user_id" button-text="上传图片"
|
|||
|
|
tips="最多上传3张图片，每张不超过5MB" @success="onUploadSuccess" @error="onUploadError" @delete="onFileDelete"
|
|||
|
|
@ckeckisShowPer="ckeckisShowPer" @ckecknowQer="ckecknowQer">
|
|||
|
|
</ali-oss-uploader>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部按钮 -->
|
|||
|
|
<view class="bottom-buttons">
|
|||
|
|
<button class="btn-draft" @click="saveDraft" v-if="!state || state == 0">存草稿</button>
|
|||
|
|
<button class="btn-submit" @click="submitForm">提交</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务类型选择器 -->
|
|||
|
|
<popup-picker :show="showServiceTypePicker" title="选择服务类型" :columns="[serviceTypes]"
|
|||
|
|
:value="[selectedServiceTypeIndex]" @close="showServiceTypePicker = false"
|
|||
|
|
@confirm="handleServiceTypeConfirm" />
|
|||
|
|
|
|||
|
|
<!-- 服务分类选择器 -->
|
|||
|
|
<popup-picker :show="showCategoryPicker" title="选择服务分类" :columns="[categoryAll]"
|
|||
|
|
:value="[selectedCategoryIndex]" @close="showCategoryPicker = false" @confirm="handleCategoryConfirm" />
|
|||
|
|
<view class="mask" v-if="isShow" @click="isShow = false"></view>
|
|||
|
|
|
|||
|
|
<!-- 获取权限提示匡内容 -->
|
|||
|
|
<view class="permission" :class="{ transform: isShowPer && nowQer === 'xc' }">
|
|||
|
|
<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
|
|||
|
|
<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="permission" :class="{ transform: isShowPer && nowQer === 'xj' }">
|
|||
|
|
<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
|
|||
|
|
<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '../../utils/request';
|
|||
|
|
import PopupPicker from '@/components/popup-picker/popup-picker.vue';
|
|||
|
|
import CircleProgress from '@/components/circle-progress/circle-progress.vue'
|
|||
|
|
import sparkMD5 from 'spark-md5'; // 引入MD5计算库
|
|||
|
|
import {
|
|||
|
|
debounce
|
|||
|
|
} from '@/utils/debounce.js'
|
|||
|
|
import AliOssUploader from '../../components/ali-oss-uploader/ali-oss-uploader.vue';
|
|||
|
|
import permissionUtils from '../../utils/per'
|
|||
|
|
import locationService from '../../utils/locationService';
|
|||
|
|
import _public from '../../utils/public';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
PopupPicker,
|
|||
|
|
CircleProgress,
|
|||
|
|
AliOssUploader
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
artisanType: getApp().globalData.artisanType,
|
|||
|
|
nowQer: 'xc',
|
|||
|
|
progress: 0,
|
|||
|
|
isShow: false,
|
|||
|
|
state: null,
|
|||
|
|
isShowPer: false,
|
|||
|
|
formData: {
|
|||
|
|
publish_user_id: null,
|
|||
|
|
server_kind: getApp().globalData.artisanType,
|
|||
|
|
title: '',
|
|||
|
|
server_price: '',
|
|||
|
|
server_time: '',
|
|||
|
|
first_class_id: '',
|
|||
|
|
second_class_id: '',
|
|||
|
|
detail: [],
|
|||
|
|
process: [],
|
|||
|
|
video: '',
|
|||
|
|
photo: [],
|
|||
|
|
graphic_details: "",
|
|||
|
|
sj_see: null // 1代表商家端不可见 2代表商家端可见
|
|||
|
|
},
|
|||
|
|
ratio: null,
|
|||
|
|
detailList: [{
|
|||
|
|
id: 0,
|
|||
|
|
detailItem: '服务功效',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 1,
|
|||
|
|
detailItem: '温馨提示',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 2,
|
|||
|
|
detailItem: '备注',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 3,
|
|||
|
|
detailItem: '适用人群',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 4,
|
|||
|
|
detailItem: '使用范围',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 5,
|
|||
|
|
detailItem: '注意事项',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 6,
|
|||
|
|
detailItem: '场地要求',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 7,
|
|||
|
|
detailItem: '产品清单',
|
|||
|
|
choose: false
|
|||
|
|
}],
|
|||
|
|
nowDetailList: [{
|
|||
|
|
id: 0,
|
|||
|
|
detailItem: '服务功效',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 1,
|
|||
|
|
detailItem: '温馨提示',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 2,
|
|||
|
|
detailItem: '备注',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 3,
|
|||
|
|
detailItem: '适用人群',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 4,
|
|||
|
|
detailItem: '使用范围',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 5,
|
|||
|
|
detailItem: '注意事项',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 6,
|
|||
|
|
detailItem: '场地要求',
|
|||
|
|
choose: false
|
|||
|
|
}, {
|
|||
|
|
id: 7,
|
|||
|
|
detailItem: '产品清单',
|
|||
|
|
choose: false
|
|||
|
|
}],
|
|||
|
|
serviceTypes: [], // 服务分类
|
|||
|
|
categoryAll: [],
|
|||
|
|
showServiceTypePicker: false,
|
|||
|
|
showCategoryPicker: false,
|
|||
|
|
selectedServiceTypeIndex: 0,
|
|||
|
|
selectedCategoryIndex: 0,
|
|||
|
|
serviceType: '',
|
|||
|
|
category: '',
|
|||
|
|
imagesList: [], // 临时图片地址
|
|||
|
|
addDetailList: [],
|
|||
|
|
showCategory: false,
|
|||
|
|
showProgress: false,
|
|||
|
|
publish_user_id: null,
|
|||
|
|
isAdd: false,
|
|||
|
|
isDraft: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
uni.$on('updateGraphicDetails', (data) => {
|
|||
|
|
this.$set(this.formData, 'graphic_details', JSON.stringify(data));
|
|||
|
|
// 这里可以添加其他处理逻辑
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.state = options.state || '';
|
|||
|
|
if (options.id) {
|
|||
|
|
this.formData.id = options.id;
|
|||
|
|
this.getInit();
|
|||
|
|
} else {
|
|||
|
|
request.post('/syr/firstclass', {}).then((res) => {
|
|||
|
|
this.serviceTypes = this.serviceTypes.concat(res.data);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.getUserInfo();
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
showShopPrice() {
|
|||
|
|
return this.artisanType == 1 && this.formData.sj_see == 2 && this.formData.server_price && this.formData
|
|||
|
|
.first_class_id
|
|||
|
|
},
|
|||
|
|
shopPrice() {
|
|||
|
|
return _public.roundUpToTwoDecimals(this.formData.server_price, this.ratio)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
goImgAndText() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/shop/add-img-text?list=${this.formData.graphic_details}`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
ckeckisShowPer(value) {
|
|||
|
|
console.log('ckeckisShowPer==========', value)
|
|||
|
|
this.isShowPer = value;
|
|||
|
|
},
|
|||
|
|
ckecknowQer(value) {
|
|||
|
|
this.nowQer = value;
|
|||
|
|
},
|
|||
|
|
addVideo(value) {
|
|||
|
|
this.formData.video = value;
|
|||
|
|
},
|
|||
|
|
// addImg(arr) {
|
|||
|
|
// this.formData.photo = this.formData.photo.concat(arr);
|
|||
|
|
// },
|
|||
|
|
// deleteImage(index) {
|
|||
|
|
// this.formData.photo.splice(index, 1)
|
|||
|
|
// },
|
|||
|
|
onUploadSuccess(file) {
|
|||
|
|
console.log('添加的图片', this.formData.photo)
|
|||
|
|
},
|
|||
|
|
onUploadError(error) {
|
|||
|
|
console.error('上传失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '上传失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onFileDelete(file, index) {
|
|||
|
|
console.log('删除文件:', this.formData.photo, index)
|
|||
|
|
},
|
|||
|
|
uploadVideoSuc(file) {
|
|||
|
|
this.formData.video = file;
|
|||
|
|
},
|
|||
|
|
uploadVideoErr() {},
|
|||
|
|
uploadVideoDel() {
|
|||
|
|
this.formData.video = null;
|
|||
|
|
},
|
|||
|
|
async getInit() {
|
|||
|
|
const firstclass = await request.post('/syr/firstclass');
|
|||
|
|
this.serviceTypes = this.serviceTypes.concat(firstclass.data);
|
|||
|
|
|
|||
|
|
await request.post('/user/serverdetail', {
|
|||
|
|
id: this.formData.id
|
|||
|
|
}).then(res => {
|
|||
|
|
this.formData.state = res.data.state;
|
|||
|
|
this.formData.back_text = res.data.back_text;
|
|||
|
|
this.formData.title = res.data.title;
|
|||
|
|
this.formData.server_price = res.data.server_price;
|
|||
|
|
this.formData.server_time = res.data.server_time;
|
|||
|
|
this.formData.first_class_id = res.data.first_class_id;
|
|||
|
|
this.formData.second_class_id = res.data.second_class_id;
|
|||
|
|
this.formData.detail = res.data.detail;
|
|||
|
|
this.formData.process = res.data.process;
|
|||
|
|
this.formData.video = res.data.video;
|
|||
|
|
this.formData.photo = res.data.photo;
|
|||
|
|
this.formData.sj_see = res.data.sj_see;
|
|||
|
|
this.formData.graphic_details = res.data.graphic_details || "";
|
|||
|
|
firstclass.data.filter((item, i) => {
|
|||
|
|
if (item.id == this.formData.first_class_id) {
|
|||
|
|
this.selectedServiceTypeIndex = i;
|
|||
|
|
this.serviceType = item.title;
|
|||
|
|
this.ratio = item.ratio;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
request.post('/user/secondclass', {
|
|||
|
|
id: this.formData.first_class_id
|
|||
|
|
}).then((result) => {
|
|||
|
|
if (result.data.length == 0 || !result.data) {
|
|||
|
|
this.showCategory = false;
|
|||
|
|
} else {
|
|||
|
|
this.categoryAll = result.data;
|
|||
|
|
this.categoryAll.filter((e, i) => {
|
|||
|
|
if (e.id == this.formData.second_class_id) {
|
|||
|
|
this.selectedCategoryIndex = i;
|
|||
|
|
this.category = e.title;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.showCategory = true;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getUserInfo() {
|
|||
|
|
const type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : 1;
|
|||
|
|
request.post('/user/getuser', {
|
|||
|
|
type: type
|
|||
|
|
}).then(result => {
|
|||
|
|
this.formData.publish_user_id = result.data.id;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 是否在商家端售卖
|
|||
|
|
changeSale(value) {
|
|||
|
|
this.formData.sj_see = value;
|
|||
|
|
},
|
|||
|
|
// 输入价格
|
|||
|
|
inpPrice(e) {
|
|||
|
|
let that = this;
|
|||
|
|
let value = e.detail.value;
|
|||
|
|
|
|||
|
|
// 1. 移除非数字和小数点
|
|||
|
|
value = value.replace(/[^\d.]/g, '');
|
|||
|
|
|
|||
|
|
// 2. 确保只有一个小数点
|
|||
|
|
const parts = value.split('.');
|
|||
|
|
if (parts.length > 2) {
|
|||
|
|
value = parts[0] + '.' + parts.slice(1).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. 限制小数点后最多一位
|
|||
|
|
if (parts.length > 1) {
|
|||
|
|
value = parts[0] + '.' + parts[1].slice(0, 2);
|
|||
|
|
}
|
|||
|
|
// 4. 如果以小数点开头，前面补0
|
|||
|
|
if (value.startsWith('.')) {
|
|||
|
|
value = '0' + value;
|
|||
|
|
}
|
|||
|
|
that.$set(that.formData, 'server_price', value);
|
|||
|
|
},
|
|||
|
|
addDetailItem(item) {
|
|||
|
|
let detailItem = {
|
|||
|
|
title: item.detailItem,
|
|||
|
|
text: '',
|
|||
|
|
photo: ''
|
|||
|
|
}
|
|||
|
|
const targetItem = this.detailList.find(detail => detail.id == item.id);
|
|||
|
|
if (targetItem) {
|
|||
|
|
targetItem.choose = true;
|
|||
|
|
}
|
|||
|
|
this.formData.detail.push(detailItem)
|
|||
|
|
this.isShow = false;
|
|||
|
|
},
|
|||
|
|
deleteDetailItem(item, i) {
|
|||
|
|
const targetItem = this.detailList.find(detail => detail.detailItem == item.title);
|
|||
|
|
if (targetItem) {
|
|||
|
|
targetItem.choose = false;
|
|||
|
|
}
|
|||
|
|
this.formData.detail.splice(i, 1)
|
|||
|
|
},
|
|||
|
|
deleteStep(i) {
|
|||
|
|
this.formData.process.splice(i, 1)
|
|||
|
|
},
|
|||
|
|
showDetailCont() {
|
|||
|
|
this.nowDetailList = this.detailList
|
|||
|
|
.filter(item => !item.choose)
|
|||
|
|
this.isShow = true;
|
|||
|
|
},
|
|||
|
|
addStep() {
|
|||
|
|
let i = this.formData.process.length + 1;
|
|||
|
|
let arr = {
|
|||
|
|
title: '第' + i + '步',
|
|||
|
|
text: '',
|
|||
|
|
photo: ''
|
|||
|
|
}
|
|||
|
|
this.formData.process.push(arr)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 删除视频
|
|||
|
|
deleteVideo() {
|
|||
|
|
this.formData.video = ''
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 保存草稿
|
|||
|
|
saveDraft: debounce(function() {
|
|||
|
|
if (this.isDraft) return;
|
|||
|
|
const {
|
|||
|
|
title,
|
|||
|
|
server_price,
|
|||
|
|
server_time,
|
|||
|
|
first_class_id,
|
|||
|
|
second_class_id,
|
|||
|
|
detail,
|
|||
|
|
process,
|
|||
|
|
video,
|
|||
|
|
photo
|
|||
|
|
} = this.formData;
|
|||
|
|
let item = {
|
|||
|
|
title,
|
|||
|
|
server_price,
|
|||
|
|
server_time,
|
|||
|
|
first_class_id,
|
|||
|
|
second_class_id,
|
|||
|
|
detail,
|
|||
|
|
process,
|
|||
|
|
video,
|
|||
|
|
photo
|
|||
|
|
}
|
|||
|
|
// 检查是否所有字段都为空
|
|||
|
|
const isEmpty = Object.values(item).every(value => {
|
|||
|
|
if (Array.isArray(value)) {
|
|||
|
|
return value.length === 0;
|
|||
|
|
}
|
|||
|
|
return !value;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (isEmpty) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请至少填写一项内容',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 实现保存草稿逻辑
|
|||
|
|
this.formData.state = 0;
|
|||
|
|
let url = null;
|
|||
|
|
if (!this.formData.id) {
|
|||
|
|
url = '/user/serveradd'
|
|||
|
|
} else {
|
|||
|
|
url = '/user/serverchange'
|
|||
|
|
}
|
|||
|
|
request.post(url, this.formData).then(res => {
|
|||
|
|
if (res.state == 1) {
|
|||
|
|
this.isDraft = true;
|
|||
|
|
const pages = getCurrentPages();
|
|||
|
|
const prevPage = pages[pages.length - 2]; // 上一个页面
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 1000
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
success: () => {
|
|||
|
|
prevPage.$vm.currentTab = 3;
|
|||
|
|
prevPage.$vm.state = 0;
|
|||
|
|
prevPage.$vm.getServicesList(); // 直接调用上个页面的刷新方法
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 500);
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
this.isDraft = false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, 500),
|
|||
|
|
|
|||
|
|
// 提交表单
|
|||
|
|
submitForm: debounce(function() {
|
|||
|
|
if (this.isAdd) return;
|
|||
|
|
// 表单验证
|
|||
|
|
|
|||
|
|
if (!this.formData.title) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入服务名称',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.formData.server_price) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入服务价格',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.formData.first_class_id) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择服务分类',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.showCategory && !this.formData.second_class_id) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择服务子类',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.formData.server_time) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入服务时长',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.formData.server_time < 10) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '服务时长最短为10分钟',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.formData.server_time > 240) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '服务时长最长为240分钟',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.formData.sj_see && this.artisanType == 1) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择是否允许在门店端售卖',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查服务简介数组
|
|||
|
|
if (this.formData.detail && this.formData.detail.length > 0) {
|
|||
|
|
for (let item of this.formData.detail) {
|
|||
|
|
if (!item.title || !item.text) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请完善服务简介内容',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请添加服务简介内容',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查服务流程数组
|
|||
|
|
if (this.formData.process && this.formData.process.length > 0) {
|
|||
|
|
for (let item of this.formData.process) {
|
|||
|
|
if (!item.text) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请完善服务流程内容',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请添加服务流程内容',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查视频和图片
|
|||
|
|
// if (!this.formData.video) {
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: '请上传服务视频',
|
|||
|
|
// icon: 'none'
|
|||
|
|
// })
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
if (!this.formData.photo || this.formData.photo.length === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请上传服务图片',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.artisanType == 2) {
|
|||
|
|
delete this.formData.sj_see;
|
|||
|
|
}
|
|||
|
|
// 提交表单逻辑
|
|||
|
|
delete this.formData.state;
|
|||
|
|
let url = null;
|
|||
|
|
if (!this.formData.id) {
|
|||
|
|
url = '/user/serveradd'
|
|||
|
|
} else {
|
|||
|
|
url = '/user/serverupdate'
|
|||
|
|
}
|
|||
|
|
request.post(url, this.formData).then(res => {
|
|||
|
|
if (res.state == 1) {
|
|||
|
|
const pages = getCurrentPages();
|
|||
|
|
const prevPage = pages[pages.length - 2]; // 上一个页面
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 600,
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
this.isAdd = true;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
success: () => {
|
|||
|
|
prevPage.$vm.currentTab = 1;
|
|||
|
|
prevPage.$vm.state = 1;
|
|||
|
|
prevPage.$vm.getServicesList(); // 直接调用上个页面的刷新方法
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 500);
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
this.isAdd = false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, 500),
|
|||
|
|
|
|||
|
|
// 打开服务分类
|
|||
|
|
openServiceTypePicker() {
|
|||
|
|
console.log('open')
|
|||
|
|
// 实现分类选择逻辑
|
|||
|
|
this.showServiceTypePicker = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 打开服务子类选择器
|
|||
|
|
openCategoryPicker() {
|
|||
|
|
// 实现子类选择逻辑
|
|||
|
|
if (!this.formData.first_class_id) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请先选择服务分类',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.showCategoryPicker = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理服务类型选择
|
|||
|
|
handleServiceTypeConfirm(e) {
|
|||
|
|
console.log('e', e)
|
|||
|
|
const selectedType = e.items[0];
|
|||
|
|
this.formData.first_class_id = selectedType.id;
|
|||
|
|
this.serviceType = selectedType.title;
|
|||
|
|
this.ratio = selectedType.ratio;
|
|||
|
|
let id = selectedType.id;
|
|||
|
|
request.post('/user/secondclass', {
|
|||
|
|
id
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.data.length == 0 || !res.data) {
|
|||
|
|
this.showCategory = false;
|
|||
|
|
} else {
|
|||
|
|
this.categoryAll = res.data;
|
|||
|
|
this.showCategory = true;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理服务分类选择
|
|||
|
|
handleCategoryConfirm(e) {
|
|||
|
|
const selectedCategory = e.items[0];
|
|||
|
|
this.formData.second_class_id = selectedCategory.id;
|
|||
|
|
this.category = selectedCategory.title;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.add-service {
|
|||
|
|
padding: 24rpx 24rpx 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-container {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopsale-box {
|
|||
|
|
flex-flow: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopsale-change {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopsale-option {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopsale-option:last-child {
|
|||
|
|
margin-left: 220rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option-text {
|
|||
|
|
padding-left: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-input {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-right {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-value {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholder {
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textarea-item {
|
|||
|
|
padding-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-textarea {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 198rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-item {
|
|||
|
|
padding-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-tip {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-content {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-box {
|
|||
|
|
width: 204rpx;
|
|||
|
|
height: 204rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 99;
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: column nowrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-text {
|
|||
|
|
font-size: 42rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-lable {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-box progress {
|
|||
|
|
/* width: 204rpx; */
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-preview,
|
|||
|
|
.image-preview,
|
|||
|
|
.upload-btn {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-video,
|
|||
|
|
.preview-image {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-btn {
|
|||
|
|
border: 2rpx dashed #DDDDDD;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plus-icon {
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -20rpx;
|
|||
|
|
right: -20rpx;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-buttons {
|
|||
|
|
/* position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0; */
|
|||
|
|
height: 100rpx;
|
|||
|
|
padding: 40rpx 0 64rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-draft,
|
|||
|
|
.btn-submit {
|
|||
|
|
width: 334rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-draft {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
color: #E8101E;
|
|||
|
|
border: 2rpx solid #E8101E;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-submit {
|
|||
|
|
background-color: #E8101E;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-step {
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-step .form-item {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 24rpx 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-inp {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-left: 38rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
background-color: rgba(230, 230, 230, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-textarea {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
height: 70rpx;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
margin-left: 38rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
background-color: rgba(230, 230, 230, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 选择器触发按钮样式 */
|
|||
|
|
.picker-trigger {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-value {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-arrow {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
margin-left: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-icon {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
margin-left: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-detail {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-cont {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: column nowrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 170rpx;
|
|||
|
|
height: 210rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50rpx;
|
|||
|
|
right: -24rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.5);
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: column nowrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 12rpx 0;
|
|||
|
|
border-bottom: 1rpx solid rgba(230, 230, 230, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lable-view {
|
|||
|
|
width: 120rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.required::before {
|
|||
|
|
content: '*';
|
|||
|
|
color: #FF0000;
|
|||
|
|
margin-right: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-inp,
|
|||
|
|
.form-input {
|
|||
|
|
height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mask {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
/* background-color: rgba(230, 230, 230, 0.5); */
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 平台特定样式 */
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
|
|||
|
|
.form-input,
|
|||
|
|
.form-textarea {
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-btn {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
/* #ifdef APP-PLUS */
|
|||
|
|
.form-input {
|
|||
|
|
height: 90rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.permission.transform {
|
|||
|
|
top: calc(var(--status-bar-height) + 88rpx + 30rpx);
|
|||
|
|
opacity: 1;
|
|||
|
|
visibility: visible;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
/* #ifdef MP-WEIXIN */
|
|||
|
|
.form-input {
|
|||
|
|
height: 80rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-buttons {
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
.tip {
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
background: #FEEFEC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #F31D2F;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.tip-icon {
|
|||
|
|
width: 34rpx;
|
|||
|
|
height: 34rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
transform: translateY(6rpx);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|