360 lines
12 KiB
Vue
360 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 顶部操作条 -->
|
|
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
|
<block slot="backText">返回</block>
|
|
<block slot="content">订单确认</block>
|
|
</cu-custom>
|
|
<!-- 服务地址 -->
|
|
<view v-if="formInfo.defaultAddress" class="bg-white">
|
|
<view class="padding flex justify-between align-center" @click="showAddress2Choose">
|
|
<view>
|
|
<view class="flex justify-start align-center">
|
|
<view class="text-gray margin-right-xs">{{formInfo.defaultAddress.countryName}}</view>
|
|
<view class="text-gray margin-right-xs">{{formInfo.defaultAddress.provinceName}}</view>
|
|
<view class="text-gray margin-right-xs">{{formInfo.defaultAddress.cityName}}</view>
|
|
</view>
|
|
<view class="text-lg margin-tb-sm">{{formInfo.defaultAddress.address}}</view>
|
|
<view class="text-gray">
|
|
<text class="margin-right">{{formInfo.defaultAddress.name}}</text>
|
|
<text>{{formInfo.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 class="bg-white" @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>选择<text class="text-sm 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 class="margin-lr-sm margin-top-sm bg-white padding">
|
|
<view class="flex justify-between">
|
|
<text class="text-black">预约时间</text>
|
|
<view class="flex justify-end align-center">
|
|
<uni-datetime-picker @change="changeDoorTime" type="date">
|
|
<view v-if="formInfo.doorTime">
|
|
<text>{{formInfo.doorTime}}</text>
|
|
</view>
|
|
<view v-else class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
|
|
</uni-datetime-picker>
|
|
<picker class="margin-left-xs" v-if="formInfo.doorTime" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
|
|
@change="timeRangeChange">
|
|
<input class="radius-input time-picker" v-model="timeRange" disabled></input>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="text-sm text-gray margin-top-sm"><text
|
|
class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
|
|
</view>
|
|
<!-- 选购的商品列表 -->
|
|
<view class="margin-lr-sm margin-top-sm bg-white">
|
|
<view class="solid-top" v-for="(item, index0) in pickedProductList">
|
|
<view class="cu-bar">
|
|
<view class="action bar-first-action">
|
|
<text class="cuIcon-shopfill text-main-color"></text>
|
|
{{item.name}}
|
|
<view>
|
|
<view class="cuIcon-right"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="margin-top-sm padding-lr">
|
|
<product-picked :columnTitleArr="columnTitleArr" v-for="(product, index1) in item.product"
|
|
:product="product" :pickedList="product.pickedList">
|
|
</product-picked>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="solid-bottom" v-for="(item, index) in pickedProductList">
|
|
<product-picked :columnTitleArr="columnTitleArr" :product="item.product" :pickedList="item.pickedList">
|
|
</product-picked>
|
|
</view> -->
|
|
</view>
|
|
<!-- 支付方式 -->
|
|
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
|
<view class="flex justify-between align-center">
|
|
<text class="text-black">支付方式</text>
|
|
<radio-group @change="changePayWay">
|
|
<label class="radio">
|
|
<radio class="main-color" value="0" :checked="formInfo.payWay=='0'" />
|
|
<text class="margin-left-xs">在线支付</text>
|
|
</label>
|
|
<label class="radio margin-left">
|
|
<radio class="main-color" value="1" :checked="formInfo.payWay=='1'" />
|
|
<text class="margin-left-xs">上门到付</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<!-- 发票信息 -->
|
|
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
|
<view class="flex justify-between align-center">
|
|
<!-- <text class="text-black">发票信息</text>
|
|
<text class="text-sm text-bold cuIcon-right"></text> -->
|
|
<view class="basis-df">
|
|
<view class="text-black">是否需要发票</view>
|
|
<view class="text-red text-sm">需开具发票请在下面备注发票信息</view>
|
|
</view>
|
|
<radio-group @change="changeIsNeedBill">
|
|
<label class="radio">
|
|
<radio class="main-color" value="0" :checked="formInfo.isNeedBill=='0'" />
|
|
<text class="margin-left-xs">不需要</text>
|
|
</label>
|
|
<label class="radio margin-left">
|
|
<radio class="main-color" value="1" :checked="formInfo.isNeedBill=='1'" />
|
|
<text class="margin-left-xs">需要</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<!-- 备注留言 -->
|
|
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
|
<text class="text-black">备注留言</text>
|
|
<view class="margin-top uni-textarea">
|
|
<textarea class="solid" maxlength="-1" @input="inputComments" placeholder="请填写备注" />
|
|
</view>
|
|
</view>
|
|
<!-- 平台提醒 -->
|
|
<view class="margin-lr-sm margin-top-sm bg-white padding margin-bottom-with-bar">
|
|
<view class="text-sm text-orange"><text
|
|
class="cuIcon-roundcheck">为保障您的权益，请在平台内交易，师傅服务离开后发生损坏或退款以及售后质保，平台可为您追责！</text></view>
|
|
</view>
|
|
<!-- 底部操作栏 -->
|
|
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
|
<view class="action text-df left-grid">
|
|
<text class="margin-left-lg">共计</text>
|
|
<text class="margin-left-xs text-red text-price text-xl">{{totalPrice}}</text>
|
|
</view>
|
|
<view class="bg-main-color submit" @click="submit">确定</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import productPicked from '@/components/goods-card/product-picked.vue';
|
|
|
|
export default {
|
|
components: {
|
|
productPicked
|
|
},
|
|
data() {
|
|
return {
|
|
columnTitleArr: ['购买型号', '购买数量'],
|
|
pickedProductList: [],
|
|
formInfo: {
|
|
payWay: '0',
|
|
isNeedBill: '0',
|
|
comments: '',
|
|
doorTime: null,
|
|
defaultAddress: null,
|
|
expectTimeStart: '',
|
|
expectTimeEnd: ''
|
|
},
|
|
totalPrice: 0,
|
|
timeRangeIndex: 0,
|
|
timeRange: '',
|
|
timeRangeList: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
let params = JSON.parse(decodeURIComponent(options.params));
|
|
this.loadData(params);
|
|
this.bindEvent();
|
|
},
|
|
onUnload() {
|
|
this.offBindEvent();
|
|
},
|
|
methods: {
|
|
async loadData(params) {
|
|
this.loadDefaultAddress();
|
|
// this.pickedProductList = await this.$api.data('pickedProductList');
|
|
this.pickedProductList = params.pickedProductList;
|
|
this.loadTotalPrice();
|
|
this.timeRangeList = this.$globalData.timeRangeList;
|
|
this.timeRange = this.timeRangeList[0];
|
|
},
|
|
async loadDefaultAddress() {
|
|
let res = await this.$request.getAddressList({
|
|
customerId: this.$request.getCurUserInfo().customerId,
|
|
isDefault: 1
|
|
});
|
|
if (res && res.data &&res.data.length) {
|
|
this.formInfo.defaultAddress = res.data[0];
|
|
}
|
|
},
|
|
loadTotalPrice() {
|
|
// 计算totalprice
|
|
this.pickedProductList.forEach((obj) => {
|
|
this.totalPrice = Math.round((this.totalPrice + Number(obj.totalMoney)) * 100) / 100;
|
|
})
|
|
},
|
|
bindEvent() {
|
|
uni.$on(this.$globalFun.CHOOSE_ADDRESS, this.chooseAddress);
|
|
},
|
|
offBindEvent() {
|
|
uni.$off(this.$globalFun.CHOOSE_ADDRESS);
|
|
},
|
|
changePayWay(e) {
|
|
this.formInfo.payWay = e.detail.value;
|
|
},
|
|
changeIsNeedBill(e) {
|
|
this.formInfo.isNeedBill = e.detail.value;
|
|
},
|
|
inputComments(e) {
|
|
this.formInfo.comments = e.detail.value
|
|
},
|
|
showAddress2Choose() {
|
|
uni.navigateTo({
|
|
url: '/pages/my/my-address?chooseMode=true'
|
|
})
|
|
},
|
|
chooseAddress(addressInfo) {
|
|
this.formInfo.defaultAddress = addressInfo;
|
|
},
|
|
changeDoorTime(value) {
|
|
this.formInfo.doorTime = value;
|
|
this.changeExpectTime();
|
|
},
|
|
timeRangeChange(e) {
|
|
this.timeRangeIndex = e.detail.value;
|
|
this.timeRange = this.timeRangeList[this.timeRangeIndex];
|
|
this.changeExpectTime();
|
|
},
|
|
changeExpectTime() {
|
|
let timeRangeSplit = this.$globalData.timeRangeSplit;
|
|
let timeArr = this.timeRange.split(timeRangeSplit);
|
|
this.formInfo.expectTimeStart = this.formInfo.doorTime + ' ' + timeArr[0] + ':00';
|
|
this.formInfo.expectTimeEnd = this.formInfo.doorTime + ' ' + timeArr[1] + ':00';
|
|
},
|
|
parseGoodsList() {
|
|
let goodsList = [];
|
|
this.pickedProductList.forEach((shopInfo) => {
|
|
shopInfo.product.forEach((productInfo) => {
|
|
productInfo.pickedList.forEach((pickedSpecs) => {
|
|
goodsList.push({
|
|
goodsStandardId: pickedSpecs.id,
|
|
num: pickedSpecs.pickedNum,
|
|
})
|
|
})
|
|
})
|
|
})
|
|
return goodsList;
|
|
},
|
|
validForm() {
|
|
if (!this.formInfo.defaultAddress) {
|
|
uni.showToast({
|
|
title: '请选择服务地址',
|
|
icon: 'none'
|
|
})
|
|
return false;
|
|
}
|
|
if (!this.formInfo.doorTime || !this.formInfo.expectTimeEnd || !this.formInfo.expectTimeStart) {
|
|
uni.showToast({
|
|
title: '请选择上门时间',
|
|
icon: 'none'
|
|
})
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
async submit() {
|
|
let valid = this.validForm();
|
|
if (!valid) {
|
|
return;
|
|
}
|
|
let curUserInfo = this.$request.getCurUserInfo();
|
|
let params = {
|
|
customerId: curUserInfo.customerId,
|
|
expectTimeStart: this.formInfo.expectTimeStart,
|
|
expectTimeEnd: this.formInfo.expectTimeEnd,
|
|
addressId: this.formInfo.defaultAddress.customerAddressId,
|
|
payType: this.formInfo.payWay,
|
|
remark: this.formInfo.comments,
|
|
isNeedBill: this.formInfo.isNeedBill,
|
|
goodsList: this.parseGoodsList(),
|
|
goodsId: this.pickedProductList[0].product[0].goodsId
|
|
// goodsList: [{
|
|
// goodsId: 2,
|
|
// num: 1
|
|
// }]
|
|
}
|
|
// 调用下单接口
|
|
let res = await this.$request.placeOrder(params);
|
|
if (res.code != 0) {
|
|
return;
|
|
} else if (this.formInfo.payWay == '1') {
|
|
// 上门支付则不拉起微信支付窗口，直接跳转至提示导航页面
|
|
uni.navigateTo({
|
|
url: '/pages/order/pay-result?customTip=您选择上门到付款，师傅/服务人员上门后会让您付款，请配合！可从对方出示的系统二维码或你订单中的“付款”键支付！'
|
|
})
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 获取微信支付所需参数
|
|
let exPayParams = {
|
|
code: this.$request.getCurUserInfo().openId,
|
|
orderMasterCode: res.data.code
|
|
}
|
|
let wxPayParamRes = await this.$request.getWxPayParams(exPayParams);
|
|
// 拉起微信支付窗口,支付成功跳转到支付成功页面
|
|
let payInfo = JSON.parse(wxPayParamRes.data.expend.pay_info);
|
|
let wxPayRes = await wx.requestPayment(payInfo);
|
|
if (wxPayRes.errMsg === "requestPayment:ok") {
|
|
uni.navigateTo({
|
|
url: '/pages/order/pay-result?payResult=0'
|
|
})
|
|
} else {
|
|
throw 'err';
|
|
}
|
|
} catch(e) {
|
|
// 支付失败弹出提示并跳转到我的订单待支付页
|
|
uni.navigateTo({
|
|
url: '/pages/order/pay-result?payResult=1'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fixed-bottom-bar .text-df {
|
|
font-size: 28rpx !important;
|
|
}
|
|
|
|
.fixed-bottom-bar .left-grid {
|
|
width: 55% !important;
|
|
text-align: left;
|
|
}
|
|
|
|
.bar-first-action {
|
|
margin-left: unset !important;
|
|
padding-left: 40rpx;
|
|
font-size: 30rpx !important;
|
|
}
|
|
|
|
.cu-progress {
|
|
display: inherit;
|
|
}
|
|
|
|
.cu-progress.sm {
|
|
height: 12rpx;
|
|
}
|
|
|
|
.time-picker {
|
|
width: 180rpx;
|
|
}
|
|
</style>
|