125 lines
4.1 KiB
Vue
125 lines
4.1 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">订单确认</block>
|
||
</cu-custom>
|
||
<!-- 服务地址 -->
|
||
<view class="padding-lg bg-white">
|
||
<view class="flex justify-between align-center">
|
||
<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>
|
||
<!-- 预约时间 -->
|
||
<view class="margin-lr-sm margin-top-sm bg-white padding">
|
||
<view class="flex justify-between align-center">
|
||
<text class="text-black">预约时间</text>
|
||
<view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></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 padding">
|
||
<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="online" :checked="payWay=='online'" />
|
||
<text class="margin-left-xs">在线支付</text>
|
||
</label>
|
||
<label class="radio margin-left">
|
||
<radio class="main-color" value="offline" :checked="payWay=='offline'" />
|
||
<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>
|
||
</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">{{formInfo.totalPrice}}</text>
|
||
</view>
|
||
<view class="bg-main-color submit">确定</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import productPicked from '@/pages/order/product-picked.vue';
|
||
|
||
export default {
|
||
components: {
|
||
productPicked
|
||
},
|
||
data() {
|
||
return {
|
||
columnTitleArr: ['购买型号', '购买数量'],
|
||
pickedProductList: [],
|
||
formInfo: {
|
||
payWay: 'online',
|
||
comments: '',
|
||
totalPrice: 0
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
this.pickedProductList = await this.$api.data('pickedProductList');
|
||
},
|
||
changePayWay(e) {
|
||
this.formInfo.payWay = e.detail.value;
|
||
},
|
||
inputComments(e) {
|
||
this.comments = e.detail.value
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fixed-bottom-bar .text-df {
|
||
font-size: 28rpx !important;
|
||
}
|
||
|
||
.fixed-bottom-bar .left-grid {
|
||
width: 55% !important;
|
||
text-align: left;
|
||
}
|
||
</style>
|