|
@@ -1,67 +1,67 @@
|
|
|
<template>
|
|
|
- <div class="place-order">
|
|
|
- <scroller>
|
|
|
- <img :src="productBox.pics[0].url" alt="">
|
|
|
- <!--extra-->
|
|
|
- <div class="extra">
|
|
|
- <div v-if="extraB" v-for="(itemExtra,index) in productBox.extra" @click="btnAction(index, $event)">
|
|
|
- <div class="extra-text" v-bind:class="{active: index == isActive}">
|
|
|
- {{itemExtra.type}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--选择数量-->
|
|
|
- <group>
|
|
|
- <x-number title="选择数量" v-model="xNumberValue" :value="0" :min="0" @on-change="xNumberValueChange"
|
|
|
- fillable></x-number>
|
|
|
- </group>
|
|
|
- <!--选择时间-->
|
|
|
- <group>
|
|
|
- <datetime v-model="bookingTime" :placeholder="(bookingTime)" :max-year=2017 format="YYYY-MM-DD HH:00"
|
|
|
- @on-change="change" :title="('服务时间')" year-row="{value}年" month-row="{value}月" day-row="{value}日"
|
|
|
- hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消" :start-date='startDate'
|
|
|
- :end-date='endDate' :min-hour=9 :max-hour=18></datetime>
|
|
|
- </group>
|
|
|
- <!--选择地址-->
|
|
|
- <div class="weui-cells vux-no-group-title">
|
|
|
- <div class="vux-datetime weui-cell weui-cell_access" @click="clearConfig">
|
|
|
- <div>
|
|
|
- <p>选择地址</p>
|
|
|
- </div>
|
|
|
- <div class="weui-cell__ft vux-cell-primary vux-datetime-value address-info">
|
|
|
- <span>{{addressContent.name}}</span><span>{{addressContent.mobile}}</span>
|
|
|
- <p>{{addressContent.address.city}} {{addressContent.address.area}} {{addressContent.address.detail}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--优惠券-->
|
|
|
- <group>
|
|
|
- <cell class="address" title="优惠券" :value="couponName" isLink @click="selectCoupon()"></cell>
|
|
|
- </group>
|
|
|
- <!--备注-->
|
|
|
- <group>
|
|
|
- <x-textarea class="remarks" :placeholder="('可填写附加内容')" inline-desc="备注:"
|
|
|
- v-model="remarks" :show-counter="true" :rows="1"
|
|
|
- autosize></x-textarea>
|
|
|
- </group>
|
|
|
- <div style="width: 100%;padding-bottom: 15%;"></div>
|
|
|
- </scroller>
|
|
|
- <!--下单-->
|
|
|
- <div class="btn">
|
|
|
- <!--费用总计-->
|
|
|
- <div class="order-amount">
|
|
|
- <span>费用总计:</span>
|
|
|
- <span>{{orderPrice}}</span>
|
|
|
- </div>
|
|
|
- <!--确认预约-->
|
|
|
- <div class="btn-order" v-on:click="btnOrder">立即下单</div>
|
|
|
- </div>
|
|
|
- <!--展示报错信息-->
|
|
|
- <alert v-model="showAlert" :title="(alertTitle)"> {{ (alertContent) }}</alert>
|
|
|
- </div>
|
|
|
+ <div class="place-order">
|
|
|
+ <scroller>
|
|
|
+ <img :src="productBox.pics[0].url" alt="">
|
|
|
+ <!--extra-->
|
|
|
+ <div class="extra">
|
|
|
+ <div v-if="extraB" v-for="(itemExtra,index) in productBox.extra" @click="btnAction(index, $event)">
|
|
|
+ <div class="extra-text" v-bind:class="{active: index == isActive}">
|
|
|
+ {{itemExtra.type}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--选择数量-->
|
|
|
+ <group>
|
|
|
+ <x-number title="选择数量" v-model="xNumberValue" :value="0" :min="0" @on-change="xNumberValueChange"
|
|
|
+ fillable></x-number>
|
|
|
+ </group>
|
|
|
+ <!--选择时间-->
|
|
|
+ <group>
|
|
|
+ <datetime v-model="bookingTime" :placeholder="(bookingTime)" :max-year=2017 format="YYYY-MM-DD HH:00"
|
|
|
+ @on-change="change" :title="('服务时间')" year-row="{value}年" month-row="{value}月" day-row="{value}日"
|
|
|
+ hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消" :start-date='startDate'
|
|
|
+ :end-date='endDate' :min-hour=9 :max-hour=18></datetime>
|
|
|
+ </group>
|
|
|
+ <!--选择地址-->
|
|
|
+ <div class="weui-cells vux-no-group-title">
|
|
|
+ <div class="vux-datetime weui-cell weui-cell_access" @click="clearConfig">
|
|
|
+ <div>
|
|
|
+ <p>选择地址</p>
|
|
|
+ </div>
|
|
|
+ <div class="weui-cell__ft vux-cell-primary vux-datetime-value address-info">
|
|
|
+ <span>{{addressContent.name}}</span><span>{{addressContent.mobile}}</span>
|
|
|
+ <p>{{addressContent.address.city}} {{addressContent.address.area}} {{addressContent.address.detail}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--优惠券-->
|
|
|
+ <group>
|
|
|
+ <cell class="address" title="优惠券" :value="couponName" isLink @click="selectCoupon()"></cell>
|
|
|
+ </group>
|
|
|
+ <!--备注-->
|
|
|
+ <group>
|
|
|
+ <x-textarea class="remarks" :placeholder="('可填写附加内容')" inline-desc="备注:"
|
|
|
+ v-model="remarks" :show-counter="true" :rows="1"
|
|
|
+ autosize></x-textarea>
|
|
|
+ </group>
|
|
|
+ <div style="width: 100%;padding-bottom: 15%;"></div>
|
|
|
+ </scroller>
|
|
|
+ <!--下单-->
|
|
|
+ <div class="btn">
|
|
|
+ <!--费用总计-->
|
|
|
+ <div class="order-amount">
|
|
|
+ <span>费用总计:</span>
|
|
|
+ <span>{{orderPrice}}</span>
|
|
|
+ </div>
|
|
|
+ <!--确认预约-->
|
|
|
+ <div class="btn-order" v-on:click="btnOrder">立即下单</div>
|
|
|
+ </div>
|
|
|
+ <!--展示报错信息-->
|
|
|
+ <alert v-model="showAlert" :title="(alertTitle)"> {{ (alertContent) }}</alert>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script type="es6">
|
|
|
+<script>
|
|
|
import config from '../config/config'
|
|
|
import selectTime from '../config/selectTime'
|
|
|
import {Group, DatetimeRange, TransferDom, Datetime, XNumber, Cell, CellBox, XTextarea, Alert} from 'vux'
|
|
@@ -87,7 +87,7 @@
|
|
|
alertContent: '', // 弹窗内容
|
|
|
couponName: '暂无优惠券', // 优惠券名称
|
|
|
couponValue: 0, // 优惠券名称
|
|
|
- CouponProduct: {},
|
|
|
+ CouponProduct: {}
|
|
|
}
|
|
|
},
|
|
|
// 指令
|
|
@@ -172,7 +172,7 @@
|
|
|
}
|
|
|
},
|
|
|
selectCoupon () {
|
|
|
- if (this.products ) {
|
|
|
+ if (this.products) {
|
|
|
|
|
|
}
|
|
|
},
|
|
@@ -260,95 +260,95 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- /*订单背景色*/
|
|
|
- .place-order {
|
|
|
- }
|
|
|
-
|
|
|
- /*类目*/
|
|
|
- .extra {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 0 15px;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .extra > div {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .extra-text {
|
|
|
- border: 1px solid #000;
|
|
|
- font-size: 0.8rem;
|
|
|
- transition-duration: 95ms;
|
|
|
- margin: 10px;
|
|
|
- padding: 5px;
|
|
|
- color: #929292;
|
|
|
- }
|
|
|
-
|
|
|
- .active {
|
|
|
- border-color: rgb(13, 12, 8);
|
|
|
- color: #fff;
|
|
|
- background: #000;
|
|
|
- }
|
|
|
-
|
|
|
- /*选择地址*/
|
|
|
- .address {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .address-info {
|
|
|
- span {
|
|
|
- font-size: 13px;
|
|
|
- &:nth-child(1) {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- p {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*填写备注*/
|
|
|
- .remarks {
|
|
|
- textarea {
|
|
|
- background-color: #f5f5f5;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*下单样式*/
|
|
|
- .btn {
|
|
|
- position: fixed;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- background-color: #ffffff;
|
|
|
- height: 2.5rem;
|
|
|
- .order-amount {
|
|
|
- padding-left: 15px;
|
|
|
- float: left;
|
|
|
- width: 50%;
|
|
|
- font-size: 16px;
|
|
|
- text-align: left;
|
|
|
- line-height: 2.5rem;
|
|
|
- span:nth-child(2) {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-order {
|
|
|
- padding: 3%;
|
|
|
- width: 30%;
|
|
|
- float: right;
|
|
|
- margin: 0 auto;
|
|
|
- background-color: #927603;
|
|
|
- border: 1px solid #a78b03;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ /*订单背景色*/
|
|
|
+ .place-order {
|
|
|
+ }
|
|
|
+
|
|
|
+ /*类目*/
|
|
|
+ .extra {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 15px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extra > div {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extra-text {
|
|
|
+ border: 1px solid #000;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ transition-duration: 95ms;
|
|
|
+ margin: 10px;
|
|
|
+ padding: 5px;
|
|
|
+ color: #929292;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ border-color: rgb(13, 12, 8);
|
|
|
+ color: #fff;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*选择地址*/
|
|
|
+ .address {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-info {
|
|
|
+ span {
|
|
|
+ font-size: 13px;
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*填写备注*/
|
|
|
+ .remarks {
|
|
|
+ textarea {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*下单样式*/
|
|
|
+ .btn {
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ background-color: #ffffff;
|
|
|
+ height: 2.5rem;
|
|
|
+ .order-amount {
|
|
|
+ padding-left: 15px;
|
|
|
+ float: left;
|
|
|
+ width: 50%;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 2.5rem;
|
|
|
+ span:nth-child(2) {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-order {
|
|
|
+ padding: 3%;
|
|
|
+ width: 30%;
|
|
|
+ float: right;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #927603;
|
|
|
+ border: 1px solid #a78b03;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
</style>
|