315 lines
10 KiB
Vue
315 lines
10 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 align-center">
|
||
<text class="text-black">预约时间</text>
|
||
<uni-datetime-picker @change="changeDoorTime">
|
||
<view v-if="formInfo.doorTime" class="text-sm">{{formInfo.doorTime}}<text class="text-bold cuIcon-right"></text>
|
||
</view>
|
||
<view v-else class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
|
||
</uni-datetime-picker>
|
||
</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.shopName}}
|
||
<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
|
||
},
|
||
totalPrice: 0
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
let params = JSON.parse(decodeURIComponent(options.params));
|
||
this.loadData(params);
|
||
this.bindEvent();
|
||
},
|
||
onUnload() {
|
||
this.offBindEvent();
|
||
},
|
||
methods: {
|
||
async loadData(params) {
|
||
// this.pickedProductList = await this.$api.data('pickedProductList');
|
||
this.pickedProductList = params.pickedProductList;
|
||
// TODO: 遍历查询每个product的总价并赋值，此处先赋定值
|
||
for (let i = 0; i < this.pickedProductList.length; i++) {
|
||
for (let j = 0; j < this.pickedProductList[i].product.length; j++) {
|
||
this.pickedProductList[i].product[j].discountsPrice = 100;
|
||
this.pickedProductList[i].product[j].goodsPrice = 200;
|
||
}
|
||
}
|
||
this.formInfo.defaultAddress = await this.$api.data('defaultAddress');
|
||
},
|
||
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;
|
||
},
|
||
parseGoodsList() {
|
||
let goodsList = [];
|
||
this.pickedProductList.forEach((shopInfo) => {
|
||
shopInfo.product.forEach((productInfo) => {
|
||
productInfo.pickedList.forEach((pickedSpecs) => {
|
||
goodsList.push({
|
||
goodsId: pickedSpecs.id,
|
||
num: pickedSpecs.pickedNum,
|
||
})
|
||
})
|
||
})
|
||
})
|
||
return goodsList;
|
||
},
|
||
validForm() {
|
||
if (!this.formInfo.defaultAddress) {
|
||
uni.showToast({
|
||
title: '请选择服务地址',
|
||
icon: 'none'
|
||
})
|
||
return false;
|
||
}
|
||
if (!this.formInfo.doorTime) {
|
||
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,
|
||
serverTime: this.formInfo.doorTime,
|
||
addressId: this.formInfo.defaultAddress.customerAddressId,
|
||
payType: this.formInfo.payWay,
|
||
remark: this.formInfo.comments,
|
||
isNeedBill: this.formInfo.isNeedBill,
|
||
goodsList: this.parseGoodsList()
|
||
}
|
||
// 调用下单接口
|
||
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;
|
||
}
|
||
</style>
|