|
|
@@ -0,0 +1,465 @@
|
|
|
+<template>
|
|
|
+ <view class="select">
|
|
|
+ <view class="select_item clear">
|
|
|
+ <view class="select_item_lf">项目类别</view>
|
|
|
+ <navigator open-type="navigate" hover-class="none" url="../serve_class/serve_class" class="select_item_rg" v-if="from.serviceName == ''">添加项目类别 <text class="iconfont more"></text></navigator>
|
|
|
+ <navigator open-type="navigate" hover-class="none" url="../serve_class/serve_class" class="select_item_rg black" v-else>{{from.serviceName}} <text class="iconfont more"></text></navigator>
|
|
|
+ </view>
|
|
|
+ <view class="select_item clear">
|
|
|
+ <view class="select_item_lf">项目标题</view>
|
|
|
+ <view class="select_item_rg">
|
|
|
+ <input v-model="from.name" class="select_item_rg1" placeholder="输入您的项目标题" placeholder-class="select_item_rg_place1"></input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="select_item clear">
|
|
|
+ <view class="select_item_lf">原价</view>
|
|
|
+ <view class="select_item_rg">
|
|
|
+ <view class="price_icon">元</view>
|
|
|
+ <input v-model="from.price" type="number" class="select_item_rg2" placeholder="输入价格" placeholder-class="select_item_rg_place"></input>
|
|
|
+ <view class="price_icon">¥</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="select_item clear">
|
|
|
+ <view class="select_item_lf">优惠价</view>
|
|
|
+ <view class="select_item_rg">
|
|
|
+ <view class="price_icon">元</view>
|
|
|
+ <input v-model="from.disPrice" type="number" class="select_item_rg2" placeholder="输入价格" placeholder-class="select_item_rg_place"></input>
|
|
|
+ <view class="price_icon">¥</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="select_item clear">
|
|
|
+ <view class="select_item_lf">服务有效期</view>
|
|
|
+ <view class="select_item_rg" style="display: flex;">
|
|
|
+ <view class="radio1" style="margin-right: 20rpx;" @tap="changeTime">
|
|
|
+ <image :src="timeStatus == 1?'https://wx.fujinyangche.com/nvrnetwork/images/select.png':'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png'"></image>
|
|
|
+ <view class="radio1_text">长期有效</view>
|
|
|
+ </view>
|
|
|
+ <view class="radio1">
|
|
|
+ <image :src="timeStatus == 1?'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png':'https://wx.fujinyangche.com/nvrnetwork/images/select.png'"></image>
|
|
|
+ <picker mode="date" @change="changeTime2">
|
|
|
+ <view class="radio1_text">{{time}}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="select_item clear">
|
|
|
+ <view class="select_item_lf">服务预约</view>
|
|
|
+ <view class="select_item_rg" style="display: flex;">
|
|
|
+ <view class="radio1" style="margin-right: 20rpx;" @tap="changeDay">
|
|
|
+ <image :src="dayStatus == 1?'https://wx.fujinyangche.com/nvrnetwork/images/select.png':'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png'"></image>
|
|
|
+ <view class="radio1_text">无需预约</view>
|
|
|
+ </view>
|
|
|
+ <view class="radio1" >
|
|
|
+ <image :src="dayStatus == 1?'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png':'https://wx.fujinyangche.com/nvrnetwork/images/select.png'"></image>
|
|
|
+ <view class="radio1_text" style="display: flex; align-items: center">提前<input type="number" @input="changeDay2" :value="from.aheadDays" class="day"/>天预约</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="select_item clear">
|
|
|
+ <view class="select_item_lf">服务单位</view>
|
|
|
+ <view class="select_item_rg" >
|
|
|
+ <view class="danwei">
|
|
|
+ <picker @change="PickerChange" mode = "selector" :value="index" :range="fuwu_danwei">
|
|
|
+ <view class="danwei_text">{{fuwu_danwei[index]}}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <input v-model="from.serviceTime" type="number" class="select_item_rg1" style="width:18%;text-align: center;" placeholder-class="select_item_rg_place1"></input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 项目介绍 -->
|
|
|
+ <view class="content">
|
|
|
+ <view class="content_title">项目介绍</view>
|
|
|
+ <textarea v-model="from.serviceIntroduce" maxlength="500" placeholder="输入您的项目介绍内容…" class="content_text" placeholder-class="content_text_place"></textarea>
|
|
|
+ </view>
|
|
|
+ <!-- 上传图片 -->
|
|
|
+ <view class="content choseimg">
|
|
|
+ <view class="content_title">上传图片</view>
|
|
|
+ <view class="fengmian">
|
|
|
+ <view class="faceImgWrap" v-for="item,index in from.faceImg" :key="index">
|
|
|
+ <image mode="aspectFill" :src="url + item"></image>
|
|
|
+ <view class="iconfont delate_icon" @tap="deleteImg(index)"></view>
|
|
|
+ </view>
|
|
|
+ <image mode="aspectFill" :src="img" @tap="chooseImg"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer">
|
|
|
+ <button class="submit" @tap="submit">保存</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import api from "../../../../../../api.js";
|
|
|
+ import schema from 'async-validator';
|
|
|
+ let app = getApp();
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id:'',//服务项目id
|
|
|
+ url:app.globalData.url,
|
|
|
+ img:'https://wx.fujinyangche.com/nvrnetwork/images/choseimg.png',//图片临时路径
|
|
|
+ timeStatus:1,
|
|
|
+ dayStatus:1,
|
|
|
+ time:'截止日期',
|
|
|
+ from:{
|
|
|
+ serviceName:'',//项目类别
|
|
|
+ name:'',//项目标题
|
|
|
+ price:'',//原价
|
|
|
+ disPrice:'',//优惠价
|
|
|
+ validityDateFormat:'',//服务有效期
|
|
|
+ aheadDays:'',//服务预约
|
|
|
+ serviceTime:1,//服务单位
|
|
|
+ serviceIntroduce:'',//项目介绍
|
|
|
+ faceImg:[],//服务器返回路径
|
|
|
+ },//表单数据
|
|
|
+ fuwu_danwei:['次','套','个','台','瓶','桶','件','箱','面','袋'],//服务单位
|
|
|
+ index:0,
|
|
|
+ descriptor:{
|
|
|
+ serviceName: {
|
|
|
+ type: "string",
|
|
|
+ required: true,
|
|
|
+ message:'请选择项目类别'
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ type: "string",
|
|
|
+ required: true,
|
|
|
+ message:'请输入项目标题'
|
|
|
+ },
|
|
|
+ price:{
|
|
|
+ type: "string",
|
|
|
+ required: true,
|
|
|
+ message:'请输入价格'
|
|
|
+ },
|
|
|
+ serviceIntroduce:{
|
|
|
+ type: "string",
|
|
|
+ required: true,
|
|
|
+ message:'请输入服务介绍'
|
|
|
+ },
|
|
|
+ faceImg:{
|
|
|
+ type: "string",
|
|
|
+ required: true,
|
|
|
+ message:'请上传封面图'
|
|
|
+ }
|
|
|
+ },//表单验证协议
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.id = options.id;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 然后在onshow里面
|
|
|
+ const pages = getCurrentPages();
|
|
|
+ const currPage = pages[pages.length - 1]; // 当前页
|
|
|
+ if(currPage.serviceName !== undefined){
|
|
|
+ this.from.serviceName = currPage.serviceName;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //回显信息
|
|
|
+ getData(){
|
|
|
+ let data = {
|
|
|
+ id:this.id
|
|
|
+ }
|
|
|
+ api.getUserMyServrWrite(data).then((res)=>{
|
|
|
+ console.log(res);
|
|
|
+ let serviceTime = res.data.data.serviceTime;
|
|
|
+ let danwei = serviceTime.charAt(serviceTime.length-1)
|
|
|
+ let index = this.fuwu_danwei.indexOf(danwei);
|
|
|
+ serviceTime = serviceTime.substring(0,serviceTime.length-1);
|
|
|
+ let validityDateFormat = res.data.data.validityDateFormat;
|
|
|
+ let aheadDays = res.data.data.aheadDays;
|
|
|
+ if(validityDateFormat == ""){
|
|
|
+ this.time = '截止日期',
|
|
|
+ this.timeStatus = 1;
|
|
|
+ this.from.validityDateFormat = "";
|
|
|
+ }else{
|
|
|
+ this.time = validityDateFormat,
|
|
|
+ this.timeStatus = 0;
|
|
|
+ this.from.validityDateFormat = validityDateFormat;
|
|
|
+ }
|
|
|
+ if(aheadDays == ""){
|
|
|
+ this.dayStatus = 1;
|
|
|
+ this.from.aheadDays = "";
|
|
|
+ }else{
|
|
|
+ this.dayStatus = 0;
|
|
|
+ this.from.aheadDays = aheadDays;
|
|
|
+ }
|
|
|
+ this.from.serviceName = res.data.data.serviceName;
|
|
|
+ this.from.name = res.data.data.name;
|
|
|
+ this.from.price = res.data.data.price;
|
|
|
+ this.from.disPrice = res.data.data.disPrice;
|
|
|
+ this.from.serviceTime = serviceTime;
|
|
|
+ this.index = index;
|
|
|
+ this.from.serviceIntroduce = res.data.data.serviceIntroduce;
|
|
|
+ this.from.faceImg = res.data.data.imgList;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //服务有效期
|
|
|
+ changeTime(){
|
|
|
+ this.timeStatus = 1;
|
|
|
+ this.time = '截止日期';
|
|
|
+ this.from.validityDateFormat = '';
|
|
|
+ },
|
|
|
+ changeTime2(e){
|
|
|
+ let value = e.detail.value;
|
|
|
+ this.timeStatus = 0;
|
|
|
+ this.time = value;
|
|
|
+ this.from.validityDateFormat = value;
|
|
|
+ },
|
|
|
+ //服务预约
|
|
|
+ changeDay(e) {
|
|
|
+ this.dayStatus = 1;
|
|
|
+ this.from.aheadDays = '';
|
|
|
+ },
|
|
|
+ changeDay2(e) {
|
|
|
+ let value = e.detail.value;
|
|
|
+ this.dayStatus = 0;
|
|
|
+ this.from.aheadDays = value;
|
|
|
+ },
|
|
|
+ //服务单位
|
|
|
+ PickerChange(e){
|
|
|
+ let index = e.detail.value;
|
|
|
+ this.index = index;
|
|
|
+ },
|
|
|
+ // 上传封面图
|
|
|
+ chooseImg(e){
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1,
|
|
|
+ sizeType: ['original', 'compressed'],
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success:res=> {
|
|
|
+ let tempFilePaths = res.tempFilePaths[0];
|
|
|
+ uni.uploadFile({
|
|
|
+ url: this.url + '/nvrnetwork/service_item/save_img',
|
|
|
+ filePath: tempFilePaths,
|
|
|
+ name: 'img',
|
|
|
+ header: {
|
|
|
+ "Content-Type": "multipart/form-data"
|
|
|
+ },
|
|
|
+ success:res=>{
|
|
|
+ console.log(res)
|
|
|
+ let data = JSON.parse(res.data);
|
|
|
+ console.log(data)
|
|
|
+ this.from.faceImg.push(data.data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //删除图片
|
|
|
+ deleteImg(index){
|
|
|
+ this.from.faceImg.splice(index,1);
|
|
|
+ },
|
|
|
+ submit(){
|
|
|
+ let obj = Object.assign({},this.from);
|
|
|
+ obj.serviceTime = obj.serviceTime + this.fuwu_danwei[this.index];
|
|
|
+ obj.faceImg = obj.faceImg.join(",")
|
|
|
+ let data = {
|
|
|
+ token:app.globalData.token,
|
|
|
+ id:this.id,
|
|
|
+ ...obj
|
|
|
+ }
|
|
|
+ let validator = new schema(this.descriptor);
|
|
|
+ validator.validate(data).then(() => {
|
|
|
+ api.submitUserMyServe(data).then((res)=>{
|
|
|
+ console.log(res);
|
|
|
+ })
|
|
|
+ }).catch(({ errors, fields }) => {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ duration:2000,
|
|
|
+ title:errors[0].message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ page{
|
|
|
+ width: 100%;
|
|
|
+ height:100%;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+ .select{
|
|
|
+ width:100%;
|
|
|
+ overflow: hidden;
|
|
|
+ /* padding:0 30rpx; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-top:20rpx;
|
|
|
+ padding: 0 30rpx 200rpx 30rpx;
|
|
|
+ }
|
|
|
+ .select_item{
|
|
|
+ width:100%;
|
|
|
+ height:100rpx;
|
|
|
+ display: flex;
|
|
|
+ line-height: 100rpx;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ }
|
|
|
+ .select_item_lf{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color:#555555;
|
|
|
+ }
|
|
|
+ .select_item_rg{
|
|
|
+ margin-left: auto;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color:#999999;
|
|
|
+ height:100%;
|
|
|
+ }
|
|
|
+ .price_icon{
|
|
|
+ float:right;
|
|
|
+ color:#222222;
|
|
|
+ }
|
|
|
+ .select_item_rg1{
|
|
|
+ width:88%;
|
|
|
+ height:100%;
|
|
|
+ float:right;
|
|
|
+ text-align: right;
|
|
|
+ color:#222222;
|
|
|
+ }
|
|
|
+ .select_item_rg2{
|
|
|
+ width:36%;
|
|
|
+ height:100%;
|
|
|
+ float:right;
|
|
|
+ text-align: center;
|
|
|
+ color:#222222;
|
|
|
+ }
|
|
|
+ .select_item_rg_place{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color:#999999;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .select_item_rg_place1{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color:#999999;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .more{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color:#999999;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ width:100%;
|
|
|
+ padding-bottom:28rpx;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ margin-top:28rpx;
|
|
|
+ }
|
|
|
+ .content_title{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color:#555555;
|
|
|
+ }
|
|
|
+ .content_text{
|
|
|
+ width:100%;
|
|
|
+ height:200rpx;
|
|
|
+ padding:14rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background:rgba(249,249,249,1);
|
|
|
+ border-radius:6rpx;
|
|
|
+ border:1px solid rgba(202,202,202,1);
|
|
|
+ margin-top:20rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .content_text_place{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color:#999999;
|
|
|
+ }
|
|
|
+ .content_text_num{
|
|
|
+ position: absolute;
|
|
|
+ bottom:10rpx;
|
|
|
+ right:12rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color:#999999;
|
|
|
+ }
|
|
|
+ .faceImgWrap{
|
|
|
+ display: inline-block;
|
|
|
+ width:148rpx;
|
|
|
+ height:148rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .fengmian image{
|
|
|
+ width:148rpx;
|
|
|
+ height:148rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+ .delate_icon{
|
|
|
+ font-size:36rpx;
|
|
|
+ color:#999999;
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ right:0;
|
|
|
+ }
|
|
|
+ .choseimg{
|
|
|
+ border-bottom:none;
|
|
|
+ }
|
|
|
+ .footer{
|
|
|
+ width:100%;
|
|
|
+ height:100rpx;
|
|
|
+ background:rgba(255,255,255,1);
|
|
|
+ box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
|
|
|
+ position: fixed;
|
|
|
+ bottom:0;
|
|
|
+ left:0;
|
|
|
+ z-index:100;
|
|
|
+ }
|
|
|
+ .submit{
|
|
|
+ width:690rpx;
|
|
|
+ height:80rpx;
|
|
|
+ background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
|
|
|
+ border-radius:40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color:#ffffff;
|
|
|
+ position: absolute;
|
|
|
+ top:10rpx;
|
|
|
+ left:50%;
|
|
|
+ transform: translateX(-50%)
|
|
|
+ }
|
|
|
+ .black{
|
|
|
+ color:#222222;
|
|
|
+ }
|
|
|
+ .fengmian{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .danwei{
|
|
|
+ float:right;
|
|
|
+ margin-top:18rpx;
|
|
|
+ }
|
|
|
+ .danwei_text{
|
|
|
+ width:64rpx;
|
|
|
+ height:64rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ color:#222222;
|
|
|
+ background-color: rgba(249,249,249,1);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ .radio1{
|
|
|
+ display: flex;
|
|
|
+ height:100%;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .radio1 image{
|
|
|
+ display: block;
|
|
|
+ width:28rpx;
|
|
|
+ height:28rpx;
|
|
|
+ }
|
|
|
+ .radio1_text{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color:#555555;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .day{
|
|
|
+ width:50rpx;
|
|
|
+ height:100%;
|
|
|
+ border:1px solid #CCCCCC;
|
|
|
+ text-align: center;
|
|
|
+ margin:0 10rpx;
|
|
|
+ }
|
|
|
+</style>
|
Your Name