510 lines
16 KiB
Vue
510 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">发布任务</block>
|
||
</cu-custom>
|
||
<!-- 步骤条 -->
|
||
<view class="bg-white padding">
|
||
<view class="cu-steps">
|
||
<view class="cu-item" :class="index>curStep?'':'text-main-color'" v-for="(stepName, index) in stepList">
|
||
<text class='cuIcon-radioboxfill'></text> {{stepName}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 商品信息-->
|
||
<view v-if="curStep === 0">
|
||
<view class="bg-white margin-top-sm">
|
||
<form @submit="submitServInfo">
|
||
<view class="cu-form-group">
|
||
<view class="title"><text class="text-red">*</text>发布类目</view>
|
||
<input :value="formData.category.name" disabled></input>
|
||
<button class='cu-btn bg-main-color light shadow' @tap="showModal"
|
||
data-target="categoryModal">选择</button>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title"><text class="text-red">*</text>发布规格</view>
|
||
<input name="spec" type="text" placeholder="请输入规格,如200*300cm" :value="formData.spec"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title"><text class="text-red">*</text>发布数量</view>
|
||
<uni-number-box :min="0" :value="formData.publishNum" @change="changePublishNum">
|
||
</uni-number-box>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title"><text class="text-red">*</text>期望价格</view>
|
||
<input name="expectPrice" type="digit" placeholder="请输入期望价格"
|
||
:value="formData.expectPrice"></input>
|
||
<text>参考价<text class="padding-left-xs text-price">100</text></text>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title"><text class="text-red">*</text>上门时间</view>
|
||
<uni-datetime-picker type="datetime" v-model="formData.doorTime" @change="changeDoorTime"
|
||
:clear-icon="false" />
|
||
</view>
|
||
<view class="cu-bar bg-white">
|
||
<view class="action">
|
||
上传图片
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="grid col-4 grid-square flex-sub img-grid">
|
||
<view class="bg-img" v-for="(item,index) in formData.imgList" :key="index"
|
||
@tap="viewImage($event, formData.imgList)" :data-url="item">
|
||
<image :src="item" mode="aspectFill"></image>
|
||
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.imgList)"
|
||
:data-index="index">
|
||
<text class='cuIcon-close'></text>
|
||
</view>
|
||
</view>
|
||
<view class="solids" @tap="chooseImage" v-if="formData.imgList.length<4">
|
||
<text class='cuIcon-cameraadd'></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cu-bar bg-white">
|
||
<view class="action">
|
||
备注说明
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group margin-bottom-with-bar">
|
||
<textarea class="solid radius" maxlength="-1" name="comments" :value="formData.comments"
|
||
placeholder="请输入商品的特殊要求或对师傅服务过程中的要求"></textarea>
|
||
</view>
|
||
<!-- 下一步 -->
|
||
<view class="cu-bar tabbar border shop fixed-bottom-bar">
|
||
<button class="bg-main-color long-btn margin-lr" form-type="submit">下一步</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 类目抽屉 -->
|
||
<view class="DrawerClose" :class="modalName=='categoryModal'?'show':''" @tap="hideModal">
|
||
<view class="cuIcon-roundcheckfill text-main-color" @click="chooseCategory"></view>
|
||
<view class="cuIcon-roundclosefill"></view>
|
||
</view>
|
||
<scroll-view scroll-y class="DrawerWindow bg-gray" :class="modalName=='categoryModal'?'show':''">
|
||
<vertical-nav :list="categoryList" :containerHeight="'calc(100vh - 200rpx)'"></vertical-nav>
|
||
</scroll-view>
|
||
|
||
<view v-if="curStep === 1">
|
||
<view class="margin-top-sm bg-white">
|
||
<view v-if="defaultAddress">
|
||
<view class="padding margin-lr-sm flex justify-between align-center" @click="showAddress2Choose">
|
||
<view>
|
||
<view class="flex justify-start align-center">
|
||
<view class="text-gray margin-right-xs" v-for="(areaObj, index) in defaultAddress.area">
|
||
{{areaObj.name}}
|
||
</view>
|
||
</view>
|
||
<view class="text-lg margin-tb-sm">{{defaultAddress.address}}</view>
|
||
<view class="text-gray">
|
||
<text class="margin-right">{{defaultAddress.person2Contact}}</text>
|
||
<text>{{defaultAddress.phone}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="text-lg"><text class="text-bold text-gray cuIcon-right"></text></view>
|
||
</view>
|
||
<view class="cu-progress sm striped">
|
||
<view class="bg-orange" style="width: 100%;"></view>
|
||
</view>
|
||
</view>
|
||
<view v-else @click="showAddress2Choose">
|
||
<view class="flex justify-between align-center padding-lg">
|
||
<view class="text-lg text-black">
|
||
<text class="cuIcon-locationfill text-blue light"></text>
|
||
选择服务地址
|
||
</view>
|
||
<view class="text-lg">选择<text class="text-bold text-gray cuIcon-right"></text></view>
|
||
</view>
|
||
<view class="cu-progress sm striped">
|
||
<view class="bg-orange" style="width: 100%;"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white margin-top-sm margin-lr-sm margin-bottom-with-bar">
|
||
<form @submit="saveAndUseAddress">
|
||
<view class="cu-form-group">
|
||
<view class="title">联系人</view>
|
||
<input name="person2Contact" placeholder="请输入姓名"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">联系号码</view>
|
||
<input name="phone" placeholder="请输入联系号码"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">地址选择</view>
|
||
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColumnChange"
|
||
:value="multiIndex" :range-key="'name'" :range="areaList">
|
||
<view class="picker">
|
||
{{areaList[0][multiIndex[0]].name}}，{{areaList[1][multiIndex[1]].name}}，{{areaList[2][multiIndex[2]].name}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">详细地址</view>
|
||
<input name="address" placeholder="请输入小区/写字楼"></input>
|
||
</view>
|
||
<view class="padding-tb">
|
||
<button class="bg-main-color margin-lr-sm" form-type="submit">保存地址</button>
|
||
</view>
|
||
<!-- <view class="cu-form-group margin-top">
|
||
<view class="title">默认地址</view>
|
||
<switch class="main-color radius" @change="isDefaultChange" :class="formData.isDefault?'checked':''"
|
||
:checked="formData.isDefault?true:false" name="isDefault" :value="formData.isDefault"></switch>
|
||
</view> -->
|
||
</form>
|
||
</view>
|
||
<!-- 底部操作栏 -->
|
||
<view class="cu-bar tabbar border shop fixed-bottom-bar">
|
||
<button class="bg-white long-btn margin-lr" @click="preStep">上一步</button>
|
||
<button class="bg-main-color long-btn margin-lr" @click="submitPublishOrder">提交订单</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="curStep === 2">
|
||
<view class="bg-white margin-top-sm margin-bottom-with-bar">
|
||
<view class="padding-lg text-center">
|
||
<view class="text-price text-sl text-bold">{{formData.expectPrice}}</view>
|
||
<view class="text-gray">
|
||
{{formData.category.name}}/规格：{{formData.spec}}({{formData.publishNum}}个)
|
||
</view>
|
||
</view>
|
||
<view class="margin-top-lg">
|
||
<radio-group @change="changePayWay" style="width: 100vw;">
|
||
<view class="cu-list menu">
|
||
<view class="cu-item text-lg flex justify-between">
|
||
<view class="cuIcon-moneybag padding-left text-main-color"><text
|
||
class="padding-left-sm text-black">在线支付</text></view>
|
||
<radio class="main-color" value="online" />
|
||
</view>
|
||
<view class="cu-item text-lg">
|
||
<view class="cuIcon-repair padding-left text-main-color"><text
|
||
class="padding-left-sm text-black">上门到付</text></view>
|
||
<radio class="main-color" value="offline" />
|
||
</view>
|
||
</view>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
<!-- 底部操作栏 -->
|
||
<view class="cu-bar tabbar border shop fixed-bottom-bar">
|
||
<button class="bg-white long-btn margin-lr" @click="preStep">上一步</button>
|
||
<button class="bg-main-color long-btn margin-lr" @click="nextStep">确认支付</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import verticalNav from '@/components/multi-level-nav/vertical-nav.vue';
|
||
|
||
export default {
|
||
components: {
|
||
verticalNav
|
||
},
|
||
data() {
|
||
return {
|
||
curStep: 0,
|
||
stepList: ['商品信息', '客户信息', '支付订单'],
|
||
modalName: null,
|
||
categoryList: [],
|
||
tmpCategory: {},
|
||
formData: {
|
||
imgList: [],
|
||
category: {}
|
||
},
|
||
defaultAddress: null,
|
||
areaList: [],
|
||
multiIndex: [0, 0, 0]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadData();
|
||
this.bindEvent();
|
||
},
|
||
onUnload() {
|
||
this.offBindEvent();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
this.categoryList = await this.$api.data('categoryList');
|
||
this.areaList = await this.$api.data('areaList');
|
||
this.defaultAddress = await this.$api.data('defaultAddress');
|
||
},
|
||
nextStep() {
|
||
this.curStep = this.curStep === this.stepList.length - 1 ? this.curStep : ++this.curStep
|
||
},
|
||
preStep() {
|
||
this.curStep = this.curStep === 0 ? 0 : --this.curStep
|
||
},
|
||
showModal(e) {
|
||
this.modalName = e.currentTarget.dataset.target;
|
||
},
|
||
hideModal(e) {
|
||
this.modalName = null
|
||
},
|
||
bindEvent() {
|
||
uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.tmpChooseCategory);
|
||
uni.$on(this.$globalFun.VERTICAL_NAV_SEARCH, this.searchCategory);
|
||
uni.$on(this.$globalFun.CHOOSE_ADDRESS, this.chooseAddress);
|
||
},
|
||
offBindEvent() {
|
||
uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
|
||
uni.$off(this.$globalFun.VERTICAL_NAV_SEARCH);
|
||
uni.$off(this.$globalFun.CHOOSE_ADDRESS);
|
||
},
|
||
tmpChooseCategory(category) {
|
||
this.tmpCategory = category;
|
||
console.log("tmpCategory=" + JSON.stringify(category))
|
||
},
|
||
searchCategory(content) {
|
||
console.log("搜索[" + content + "]中......")
|
||
},
|
||
chooseCategory() {
|
||
this.formData.category = this.tmpCategory;
|
||
},
|
||
changePublishNum(value) {
|
||
this.formData.publishNum = value;
|
||
},
|
||
changeDoorTime(value) {
|
||
this.formData.doorTime = value;
|
||
},
|
||
viewImage(e, imgList) {
|
||
uni.previewImage({
|
||
urls: imgList,
|
||
current: e.currentTarget.dataset.url
|
||
});
|
||
},
|
||
delImg(e, imgList) {
|
||
uni.showModal({
|
||
title: '',
|
||
content: '确定要删除这张图片吗？',
|
||
cancelText: '取消',
|
||
confirmText: '确定',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
imgList.splice(e.currentTarget.dataset.index, 1)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
chooseImage(e) {
|
||
uni.chooseImage({
|
||
count: 4, //默认9
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album'], //从相册选择
|
||
success: (res) => {
|
||
if (this.formData.imgList.length != 0) {
|
||
this.formData.imgList = this.formData.imgList.concat(res.tempFilePaths)
|
||
} else {
|
||
this.formData.imgList = res.tempFilePaths
|
||
}
|
||
}
|
||
});
|
||
},
|
||
regionChange(e) {
|
||
this.multiIndex = e.detail.value;
|
||
},
|
||
showAddress2Choose() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/my-address?chooseMode=true'
|
||
})
|
||
},
|
||
chooseAddress(addressInfo) {
|
||
this.defaultAddress = addressInfo;
|
||
},
|
||
saveAndUseAddress(e) {
|
||
let addressInfo = e.detail.value;
|
||
let valid = this.validateAddress(addressInfo);
|
||
if (!valid) {
|
||
return;
|
||
}
|
||
|
||
let chosenArea = [];
|
||
for (let i = 0; i < this.areaList.length; i++) {
|
||
chosenArea.push(this.areaList[i][this.multiIndex[i]]);
|
||
}
|
||
console.log("chosenArea=" + JSON.stringify(chosenArea))
|
||
addressInfo.area = chosenArea;
|
||
// 调用后台保存并更新地址选择栏内容
|
||
this.defaultAddress = addressInfo;
|
||
},
|
||
submitServInfo(e) {
|
||
let formData = e.detail.value;
|
||
this.formData = Object.assign({}, this.formData, formData);
|
||
console.log(this.formData)
|
||
let valid = this.validateServInfo();
|
||
if (valid) {
|
||
this.nextStep();
|
||
} else {
|
||
uni.showToast({
|
||
title: '请填写必填项信息',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
}
|
||
},
|
||
submitPublishOrder() {
|
||
if (this.defaultAddress && Object.keys(this.defaultAddress).length > 0) {
|
||
this.nextStep();
|
||
} else {
|
||
uni.showToast({
|
||
title: '请选择服务地址',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
}
|
||
},
|
||
validateServInfo() {
|
||
if ((this.formData.category && Object.keys(this.formData.category).length > 0) &&
|
||
Boolean(this.formData.spec) &&
|
||
Boolean(this.formData.publishNum) &&
|
||
Boolean(this.formData.expectPrice) &&
|
||
Boolean(this.formData.doorTime)) {
|
||
return true
|
||
}
|
||
return false;
|
||
},
|
||
validateAddress(addressInfo) {
|
||
let valid = Boolean(addressInfo.person2Contact) &&
|
||
Boolean(addressInfo.phone) &&
|
||
Boolean(addressInfo.address);
|
||
|
||
if (!valid) {
|
||
uni.showToast({
|
||
title: '请填写完整信息',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
} else if (!this.$validate.validContactNum(addressInfo.phone)) {
|
||
valid = false;
|
||
uni.showToast({
|
||
title: '联系号码格式错误',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
}
|
||
return valid;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.DrawerPage {
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
left: 0vw;
|
||
background-color: #f1f1f1;
|
||
transition: all 0.4s;
|
||
}
|
||
|
||
.DrawerPage.show {
|
||
transform: scale(0.9, 0.9);
|
||
left: 85vw;
|
||
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
||
transform-origin: 0;
|
||
}
|
||
|
||
.DrawerWindow {
|
||
z-index: 9999;
|
||
position: absolute;
|
||
width: 85vw;
|
||
height: 100vh;
|
||
left: 0;
|
||
top: 0;
|
||
transform: scale(0.9, 0.9) translateX(-100%);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.4s;
|
||
padding: 100upx 0;
|
||
}
|
||
|
||
.DrawerWindow.show {
|
||
transform: scale(1, 1) translateX(0%);
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.DrawerClose {
|
||
position: absolute;
|
||
width: 40vw;
|
||
height: 100vh;
|
||
right: 0;
|
||
top: 0;
|
||
color: transparent;
|
||
padding-bottom: 30upx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
||
letter-spacing: 5px;
|
||
font-size: 60upx;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.4s;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.DrawerClose.show {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
width: 15vw;
|
||
color: #fff;
|
||
}
|
||
|
||
/* .DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
||
width: 64upx;
|
||
height: 64upx;
|
||
line-height: 64upx;
|
||
margin: 0;
|
||
display: inline-block;
|
||
}
|
||
|
||
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
||
margin: 0;
|
||
}
|
||
|
||
.DrawerPage .nav {
|
||
flex: 1;
|
||
}
|
||
|
||
.DrawerPage .nav .cu-item.cur {
|
||
border-bottom: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.DrawerPage .nav .cu-item.cur::after {
|
||
content: "";
|
||
width: 10upx;
|
||
height: 10upx;
|
||
background-color: currentColor;
|
||
position: absolute;
|
||
bottom: 10upx;
|
||
border-radius: 10upx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.DrawerPage .cu-bar.tabbar .action {
|
||
flex: initial;
|
||
} */
|
||
.cu-form-group.img-grid {
|
||
border: none;
|
||
}
|
||
|
||
.cu-progress {
|
||
display: inherit;
|
||
}
|
||
|
||
.cu-progress.sm {
|
||
height: 12rpx;
|
||
}
|
||
</style>
|