完成一口价/议价订单发布
This commit is contained in:
parent
bcf848fbad
commit
4ef73a67e7
|
|
@ -128,6 +128,9 @@ export default {
|
|||
createOrder: {
|
||||
url: "/wxapp/order/submitordera",
|
||||
},
|
||||
createDemandOrder: {
|
||||
url: "/wxapp/orderb/addorder"
|
||||
},
|
||||
list: {
|
||||
// 购买订单
|
||||
t1: {
|
||||
|
|
|
|||
|
|
@ -141,4 +141,20 @@ export default {
|
|||
}).catch(e => { });
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 创建需求订单
|
||||
*/
|
||||
createDemandOrder(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
prototype.$request({
|
||||
api: "order.createDemandOrder",
|
||||
data: data,
|
||||
}).then(response => {
|
||||
if (response.code == 1) {
|
||||
return resolve(response.data);
|
||||
}
|
||||
return reject(response.msg);
|
||||
}).catch(e => { });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,23 +16,14 @@
|
|||
<view class="input-item">
|
||||
<view class="title-box">
|
||||
<text>选择分类</text>
|
||||
<text class="desc">（可多选）</text>
|
||||
</view>
|
||||
<view class="input-box" @click="chooseCategory">
|
||||
<view class="input-box">
|
||||
<view class="category-group">
|
||||
<block
|
||||
v-for="(item, index) in [
|
||||
{ id: 1, name: '空调安装' },
|
||||
{ id: 1, name: '空调安装' },
|
||||
{ id: 1, name: '空调安装' },
|
||||
]"
|
||||
:key="index"
|
||||
>
|
||||
<view class="category-item" @click.stop="delCategory(index)">
|
||||
<text class="text">{{ item.name }}</text>
|
||||
<text class="iconfont icon-guanbishixin"></text>
|
||||
</view>
|
||||
</block>
|
||||
<picker mode="selector" :range="cateList" range-key="name" @change="selectCate" class="picker">
|
||||
<text class="title">
|
||||
<text class="limit-line clamp-1"> {{ cateText || "请选择服务分类" }} </text>
|
||||
</text>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="more">
|
||||
<text class="iconfont icon-jinru"></text>
|
||||
|
|
@ -74,8 +65,8 @@
|
|||
</view>
|
||||
<view class="upload-item">
|
||||
<block v-for="(item, index) in uploadImages" :key="index">
|
||||
<view class="image-box">
|
||||
<image class="image" :src="item.src" mode="aspectFill" />
|
||||
<view class="image-box" @click="removeImage(index)">
|
||||
<image class="image" :src="item" mode="aspectFill" />
|
||||
</view>
|
||||
</block>
|
||||
<view class="image-box upload" @click="chooseImage">
|
||||
|
|
@ -96,7 +87,11 @@
|
|||
<view class="common-form-container explain">
|
||||
<view class="textarea-item">
|
||||
<view class="title-box">
|
||||
<text>需求说明</text>
|
||||
<text>
|
||||
<text>需求说明</text>
|
||||
<text class="small-cate">{{ cateText }}</text>
|
||||
<text class="small-cate">{{ type == 1 ? "多位师傅报价" : "议价" }}</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="textarea-box">
|
||||
<text class="textarea">{{ content }}</text>
|
||||
|
|
@ -105,7 +100,7 @@
|
|||
<view class="upload-item">
|
||||
<block v-for="(item, index) in uploadImages" :key="index">
|
||||
<view class="image-box">
|
||||
<image class="image" :src="item.src" mode="aspectFill" />
|
||||
<image class="image" :src="item" mode="aspectFill" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
|
@ -155,7 +150,12 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="insurance-box">
|
||||
<service-insurance padding="38rpx 30rpx" :insurance="insurance" @change="changeInsuranceState" />
|
||||
<service-insurance
|
||||
padding="38rpx 30rpx"
|
||||
:price="insurancePrice"
|
||||
:insurance="insurance"
|
||||
@change="changeInsuranceState"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
<view v-if="type == 1" class="btn" @click="submit">
|
||||
<div class="text">立即发布</div>
|
||||
</view>
|
||||
<view v-if="type == 2" class="btn" @click="pay">
|
||||
<view v-if="type == 2" class="btn" @click="submit">
|
||||
<div class="text">去支付</div>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -176,15 +176,15 @@
|
|||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
v-model="price"
|
||||
placeholder="请输入心理价位"
|
||||
placeholder-class="placeholder-style-3"
|
||||
@input="setPrice"
|
||||
/>
|
||||
<text class="iconfont icon-qingchu" @click="price = 0"></text>
|
||||
<text class="iconfont icon-qingchu" @click="setPrice(0)"></text>
|
||||
</view>
|
||||
<text class="util">元</text>
|
||||
</view>
|
||||
<view class="submit-price">
|
||||
<view class="submit-price" @click="setPriceModal = false">
|
||||
<text>确认</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -197,6 +197,7 @@ import AppLayout from "@/components/layout/layout";
|
|||
import WidgetTips from "@/components/widgets/tips";
|
||||
import WidgetModal from "@/components/widgets/modal";
|
||||
import ServiceInsurance from "@/components/service/insurance";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "demand",
|
||||
data() {
|
||||
|
|
@ -209,24 +210,13 @@ export default {
|
|||
step: 1,
|
||||
setPriceModal: false,
|
||||
total: 0,
|
||||
cateList: [],
|
||||
cateText: "",
|
||||
// 保存数据
|
||||
type: 1,
|
||||
content: "这个就是需求内容",
|
||||
categoryIds: [1, 2, 3],
|
||||
uploadImages: [
|
||||
{
|
||||
src: require("@/static/temp/cate/1.png"),
|
||||
},
|
||||
{
|
||||
src: require("@/static/temp/cate/1.png"),
|
||||
},
|
||||
{
|
||||
src: require("@/static/temp/cate/1.png"),
|
||||
},
|
||||
{
|
||||
src: require("@/static/temp/cate/1.png"),
|
||||
},
|
||||
],
|
||||
content: "",
|
||||
cateId: 0,
|
||||
uploadImages: [],
|
||||
addressText: "",
|
||||
datetime: "",
|
||||
insurance: false,
|
||||
|
|
@ -239,25 +229,49 @@ export default {
|
|||
ServiceInsurance,
|
||||
WidgetModal,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
insurancePrice: (state) => state.service.insurancePrice,
|
||||
}),
|
||||
},
|
||||
onLoad() {
|
||||
this.pageConfig = getApp().globalData.pageConfig;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.enableAlertBeforeUnload({
|
||||
message: "需求尚未发布，此时离开不会保留任何数据，确定离开？",
|
||||
});
|
||||
// #endif
|
||||
this.$store.dispatch("service/insurancePrice");
|
||||
this.$models.service.getInstallCate().then((list) => {
|
||||
this.cateList = list;
|
||||
});
|
||||
},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
onPullDownRefresh() {},
|
||||
methods: {
|
||||
/**
|
||||
* 返回
|
||||
*/
|
||||
clickBackBtn() {
|
||||
this.toStep(1);
|
||||
},
|
||||
/**
|
||||
* 切换步骤
|
||||
*/
|
||||
toStep(step) {
|
||||
if (step == 1) {
|
||||
this.pageTitle = "发布需求";
|
||||
this.customBtn = false;
|
||||
this.changeInsuranceState(false);
|
||||
} else if (step == 2) {
|
||||
if (!this.cateId) {
|
||||
return this.$utils.toast("请选择分类");
|
||||
}
|
||||
if (!this.content) {
|
||||
return this.$utils.toast("请输入需求说明");
|
||||
}
|
||||
this.pageTitle = "基本信息";
|
||||
this.customBtn = true;
|
||||
}
|
||||
|
|
@ -266,28 +280,34 @@ export default {
|
|||
title: this.pageTitle,
|
||||
});
|
||||
},
|
||||
clickBackBtn() {
|
||||
this.toStep(1);
|
||||
/**
|
||||
* 选择分类
|
||||
*/
|
||||
selectCate(e) {
|
||||
this.cateId = this.cateList[this.cateId].id;
|
||||
this.cateText = this.cateList[this.cateId].name;
|
||||
},
|
||||
/**
|
||||
* 上传图片
|
||||
*/
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
sizeType: ["compressed"],
|
||||
sourceType: ["album"],
|
||||
success(res) {
|
||||
console.log(JSON.stringify(res.tempFilePaths));
|
||||
},
|
||||
this.$utils.chooseImage(2).then((tempFiles) => {
|
||||
tempFiles.forEach((item) => {
|
||||
this.$models.system.upload(item.path).then((response) => {
|
||||
this.uploadImages.push(response.img);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
delCategory() {
|
||||
uni.showToast({
|
||||
title: "删除",
|
||||
});
|
||||
},
|
||||
chooseCategory() {
|
||||
uni.showToast({
|
||||
title: "选择",
|
||||
});
|
||||
/**
|
||||
* 删除图片
|
||||
*/
|
||||
removeImage(index) {
|
||||
this.uploadImages.splice(index, 1);
|
||||
},
|
||||
/**
|
||||
* 选择地址
|
||||
*/
|
||||
selectAddress() {
|
||||
const that = this;
|
||||
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.addressId, {
|
||||
|
|
@ -299,17 +319,62 @@ export default {
|
|||
},
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 选择日期
|
||||
*/
|
||||
bindDateChange(e) {
|
||||
this.datetime = e.detail.value;
|
||||
},
|
||||
/**
|
||||
* 设置价格
|
||||
*/
|
||||
setPrice(e) {
|
||||
if (typeof e === "object") {
|
||||
this.price = e.detail.value;
|
||||
} else {
|
||||
this.price = e;
|
||||
}
|
||||
this.updateTotal();
|
||||
},
|
||||
/**
|
||||
* 选择保险
|
||||
*/
|
||||
changeInsuranceState(state) {
|
||||
this.insurance = state;
|
||||
if (this.type == 2) {
|
||||
this.updateTotal();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新总价
|
||||
*/
|
||||
updateTotal() {
|
||||
let temp = 0;
|
||||
if (this.insurance) {
|
||||
temp = this.insurancePrice;
|
||||
}
|
||||
this.total = parseFloat(this.price) + temp;
|
||||
},
|
||||
/**
|
||||
* 发布报价
|
||||
*/
|
||||
submit() {
|
||||
uni.showToast({ title: "发布成功" });
|
||||
},
|
||||
pay() {
|
||||
uni.showToast({ title: "支付成功" });
|
||||
this.$models.service
|
||||
.createDemandOrder({
|
||||
cates: this.cateId,
|
||||
types: this.type,
|
||||
desc: this.content,
|
||||
img: this.uploadImages,
|
||||
addid: this.addressId,
|
||||
times: this.datetime,
|
||||
baoxian: this.insurance ? 1 : 0,
|
||||
money: this.price,
|
||||
})
|
||||
.then((orderData) => {
|
||||
if (this.type == 2) {
|
||||
this.$models.order.payOrder(orderData.oid);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -367,9 +432,11 @@ export default {
|
|||
margin-top: 24rpx;
|
||||
}
|
||||
.more {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 8rpx;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
.iconfont {
|
||||
color: #a7a7a7;
|
||||
font-size: 36rpx;
|
||||
|
|
@ -377,29 +444,12 @@ export default {
|
|||
}
|
||||
}
|
||||
.category-group {
|
||||
width: 650rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.category-item:nth-child(1),
|
||||
.category-item:nth-child(2),
|
||||
.category-item:nth-child(3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.category-item {
|
||||
padding: 10rpx 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 10rpx;
|
||||
line-height: 30rpx;
|
||||
margin: 20rpx 20rpx 0 0;
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
color: #7b7b7b;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 30rpx;
|
||||
color: #d6d6d6;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
z-index: 15;
|
||||
position: relative;
|
||||
.title {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
.common-form-container.price {
|
||||
|
|
@ -407,6 +457,11 @@ export default {
|
|||
}
|
||||
.common-form-container.explain {
|
||||
margin-top: 25rpx;
|
||||
.small-cate {
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.textarea-item {
|
||||
.title-box {
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue