|
|
@@ -1,70 +1,70 @@
|
|
|
<template>
|
|
|
- <div class="place-order">
|
|
|
- <scroller>
|
|
|
- <img :src="productBox.pics[0].url" alt="">
|
|
|
- <!--extra-->
|
|
|
- <div class="extra" v-if="extraB">
|
|
|
- <div v-for="(itemExtra,index) in productBox.extra" :key="itemExtra" @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 v-if="addressContent.name !== '暂无地址信息'">
|
|
|
- {{addressContent.address.city}} {{addressContent.address.area}} {{addressContent.address.detail}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--优惠券-->
|
|
|
- <group>
|
|
|
- <cell class="address" title="优惠券" :value="couponName" isLink @click.native="selectCoupon()"></cell>
|
|
|
- </group>
|
|
|
- <!--备注-->
|
|
|
- <group>
|
|
|
- <x-textarea class="remarks" :placeholder="('可填写附加内容')" inline-desc="备注：" v-model="remarks" :show-counter="true"
|
|
|
- :rows="1" autosize></x-textarea>
|
|
|
- </group>
|
|
|
- <div class="agreement-content">
|
|
|
- <check-icon :value.sync="agreement" type="plain">
|
|
|
- <router-link to="/agreement" v-bind:class="{agreementColor: agreement}">壹管家用户服务协议</router-link>
|
|
|
- </check-icon>
|
|
|
- </div>
|
|
|
- <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" v-bind:class="{active: !agreement}">立即下单</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" v-if="extraB">
|
|
|
+ <div v-for="(itemExtra,index) in productBox.extra" :key="itemExtra" @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 v-if="addressContent.name !== '暂无地址信息'">
|
|
|
+ {{addressContent.address.city}} {{addressContent.address.area}} {{addressContent.address.detail}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--优惠券-->
|
|
|
+ <group>
|
|
|
+ <cell class="address" title="优惠券" :value="couponName" isLink @click.native="selectCoupon()"></cell>
|
|
|
+ </group>
|
|
|
+ <!--备注-->
|
|
|
+ <group>
|
|
|
+ <x-textarea class="remarks" :placeholder="('可填写附加内容')" inline-desc="备注：" v-model="remarks" :show-counter="true"
|
|
|
+ :rows="1" autosize></x-textarea>
|
|
|
+ </group>
|
|
|
+ <div class="agreement-content">
|
|
|
+ <check-icon :value.sync="agreement" type="plain">
|
|
|
+ <router-link to="/agreement" v-bind:class="{agreementColor: agreement}">壹管家用户服务协议</router-link>
|
|
|
+ </check-icon>
|
|
|
+ </div>
|
|
|
+ <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" v-bind:class="{active: !agreement}">立即下单</div>
|
|
|
+ </div>
|
|
|
+ <!--展示报错信息-->
|
|
|
+ <alert v-model="showAlert" :title="(alertTitle)"> {{ (alertContent) }}</alert>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -94,7 +94,7 @@
|
|
|
alertTitle: '', // 弹窗标题
|
|
|
alertContent: '', // 弹窗内容
|
|
|
couponName: '请选择优惠券', // 优惠券名称
|
|
|
- couponValue: 0, // 优惠券名称
|
|
|
+ couponValue: 0, // 优惠券价格
|
|
|
CouponProduct: {},
|
|
|
agreement: true // 壹管家用户服务协议
|
|
|
}
|
|
|
@@ -108,21 +108,26 @@
|
|
|
Group, DatetimeRange, TransferDom, Datetime, XNumber, Cell, CellBox, XTextarea, Alert, CheckIcon
|
|
|
},
|
|
|
beforeCreate () {
|
|
|
-// config.addressAdd = {
|
|
|
-// userName: '',
|
|
|
-// userMobile: '',
|
|
|
-// positionName: '请定位您的小区或者街道',
|
|
|
-// userAddress: ''
|
|
|
-// }
|
|
|
// 初始化时间
|
|
|
if (this.$store.state.order.time !== undefined) {
|
|
|
selectTime.serviceHours = this.$store.state.order.time
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
+ // 当前组件失去商品详情时,返回首页
|
|
|
if (config.productInfo.length === 0) {
|
|
|
this.$router.push({path: '/'})
|
|
|
}
|
|
|
+ // 获取优惠券信息
|
|
|
+// console.log(typeof config.orderInfo.coupons.coupon.alias_name)
|
|
|
+// if (config.orderInfo.coupons !== undefined) {
|
|
|
+// if (config.orderInfo.coupons.coupon.alias_name !== undefined) {
|
|
|
+// this.couponName = config.orderInfo.coupons.coupon.alias_name
|
|
|
+// this.couponValue = config.orderInfo.coupons.coupon.value
|
|
|
+// } else if (config.orderInfo.coupons.coupon.alias_name === undefined) {
|
|
|
+// this.$router.push({path: '/'})
|
|
|
+// }
|
|
|
+// }
|
|
|
// 渲染界面前,判断用户是否已经选择了地址
|
|
|
// config.addressContent 是全局变量,用来保存用户的
|
|
|
if (config.addressContent !== '暂无地址信息') {
|
|
|
@@ -136,11 +141,6 @@
|
|
|
} else {
|
|
|
this.addressContent = config.addressContent
|
|
|
}
|
|
|
- // 优惠券 价格计算
|
|
|
-// if (config.orderInfo.coupons) {
|
|
|
-// this.couponName = config.orderInfo.coupons.coupon.name
|
|
|
-// this.couponValue = parseInt(config.orderInfo.coupons.coupon.value)
|
|
|
-// }
|
|
|
// 用于检测用户地址是否在服务站范围内
|
|
|
if (config.station === '') {
|
|
|
config.station = '57db39709f5160bb048b456a'
|
|
|
@@ -150,6 +150,8 @@
|
|
|
config.orderPrice = 0
|
|
|
}
|
|
|
config.order.extra = JSON.stringify(config.productInfo.extra[0])
|
|
|
+ console.log(JSON.stringify(config.productInfo.extra))
|
|
|
+ console.log(config.order.extra)
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState({
|
|
|
@@ -163,6 +165,7 @@
|
|
|
this.orderPrice = config.orderPrice = payCharge(parseInt(config.productInfo.extra[val].price), config.xNumberValue, this.couponValue)
|
|
|
},
|
|
|
'couponValue' (val, oldVal) {
|
|
|
+ console.log(val)
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -188,140 +191,161 @@
|
|
|
}
|
|
|
},
|
|
|
selectCoupon () {
|
|
|
- this.$router.push({path: '/selectCoupon', query: {bookingTime: this.bookingTime, orderPrice: this.orderPrice}})
|
|
|
+ if (this.JudgmentOrder()) {
|
|
|
+ let myCooupon = {
|
|
|
+ user_id: config.userId,
|
|
|
+ products: JSON.stringify([{'product_id': config.productInfo.id, 'count': config.xNumberValue}]),
|
|
|
+ booking_time: this.bookingTime + ':00',
|
|
|
+ type: config.productInfo.type,
|
|
|
+ extra: '[' + config.order.extra + ']'
|
|
|
+ }
|
|
|
+ this.$router.push({path: '/selectCoupon', query: {myCooupon: myCooupon}})
|
|
|
+ }
|
|
|
},
|
|
|
change (val) {
|
|
|
this.$store.state.order.time = val
|
|
|
config.order.time = val
|
|
|
},
|
|
|
- btnOrder: function () {
|
|
|
- if (this.agreement) {
|
|
|
- // 判断服务是否选择
|
|
|
- if (localStorage.getItem('extra') === null && config.productInfo.extra.length !== 0) {
|
|
|
+ // 判断商品信息是否选型完毕
|
|
|
+ JudgmentOrder () {
|
|
|
+ // 判断服务是否选择
|
|
|
+ if (localStorage.getItem('extra') === null && config.productInfo.extra.length !== 0) {
|
|
|
+ this.$vux.alert.show({
|
|
|
+ title: '抱歉',
|
|
|
+ content: '你还没有选择服务类型'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 商品数量不为0
|
|
|
+ if (this.xNumberValue <= 0) {
|
|
|
+ // 弹出提示框
|
|
|
+ this.$vux.alert.show({
|
|
|
+ title: '抱歉',
|
|
|
+ content: '你还没有选择服务数量'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 地址不为空
|
|
|
+ if (config.productInfo.name === '新居开荒') {
|
|
|
+ if (config.xNumberValue < 10) {
|
|
|
this.$vux.alert.show({
|
|
|
title: '抱歉',
|
|
|
- content: '你还没有选择服务类型'
|
|
|
+ content: '开荒面积不少于10平米!'
|
|
|
})
|
|
|
- return
|
|
|
+ return false
|
|
|
}
|
|
|
- // 商品数量不为0
|
|
|
- if (this.xNumberValue <= 0) {
|
|
|
- // 弹出提示框
|
|
|
+ }
|
|
|
+ if (this.addressContent.name === '暂无地址信息') {
|
|
|
+ // 弹出提示框
|
|
|
+ this.$vux.alert.show({
|
|
|
+ title: '抱歉',
|
|
|
+ content: '您还没有选择地址!'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 判断布艺沙发下单数量少于5套
|
|
|
+ console.log(config.productInfo.extra[config.isActive].type)
|
|
|
+ if (config.productInfo.extra[config.isActive].type === '整套布艺沙发') {
|
|
|
+ if (config.xNumberValue <= 5) {
|
|
|
this.$vux.alert.show({
|
|
|
title: '抱歉',
|
|
|
- content: '你还没有选择服务数量'
|
|
|
+ content: '整套布艺沙发5套起购!'
|
|
|
})
|
|
|
- return
|
|
|
+ return false
|
|
|
}
|
|
|
- // 地址不为空
|
|
|
- if (this.addressContent.name === '暂无地址信息') {
|
|
|
- // 弹出提示框
|
|
|
+ }
|
|
|
+ // 擦玻璃数量少于10平米
|
|
|
+ if (config.productInfo.name === '擦玻璃') {
|
|
|
+ if (config.xNumberValue < 10) {
|
|
|
this.$vux.alert.show({
|
|
|
title: '抱歉',
|
|
|
- content: '您还没有选择地址!'
|
|
|
+ content: '玻璃面积不少于10平米!'
|
|
|
})
|
|
|
- return
|
|
|
+ return false
|
|
|
}
|
|
|
- // 判断布艺沙发下单数量少于5套
|
|
|
- if (config.productInfo.extra[config.isActive].type === '整套布艺沙发') {
|
|
|
- if (config.xNumberValue <= 5) {
|
|
|
- this.$vux.alert.show({
|
|
|
- title: '抱歉',
|
|
|
- content: '整套布艺沙发5套起购!'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
+ }
|
|
|
+ // 新居开慌的数量少于50平米
|
|
|
+ // 租房的数量少于10平米
|
|
|
+ if (config.productInfo.name === '租房清洁') {
|
|
|
+ if (config.xNumberValue < 10) {
|
|
|
+ this.$vux.alert.show({
|
|
|
+ title: '抱歉',
|
|
|
+ content: '清洁面积不少于10平米!'
|
|
|
+ })
|
|
|
+ return false
|
|
|
}
|
|
|
- // 擦玻璃数量少于10平米
|
|
|
- if (config.productInfo.name === '擦玻璃') {
|
|
|
- if (config.xNumberValue < 10) {
|
|
|
- this.$vux.alert.show({
|
|
|
- title: '抱歉',
|
|
|
- content: '玻璃面积不少于10平米!'
|
|
|
- })
|
|
|
- return
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ btnOrder: function () {
|
|
|
+ if (this.agreement) {
|
|
|
+ if (this.JudgmentOrder()) {
|
|
|
+ // 判断用户余额大于等于订单金额，满足条件走余额支付
|
|
|
+ config.order.userId = config.userId
|
|
|
+ config.order.memo = this.remarks
|
|
|
+ config.order.id = config.productInfo.id
|
|
|
+ config.order.products = JSON.stringify({
|
|
|
+ product_id: config.productInfo.id, // 产品ID
|
|
|
+ count: this.xNumberValue // 产品数量
|
|
|
+ })
|
|
|
+ if (this.$store.state.user.userInfo.balance >= this.orderPrice) {
|
|
|
+ config.order.balance = this.orderPrice
|
|
|
+ this.orderPrice = 0
|
|
|
+ } else {
|
|
|
+ // 不满足条件走混合支付
|
|
|
+ config.order.balance = this.$store.state.user.userInfo.balance
|
|
|
+ this.orderPrice = this.orderPrice - config.order.balance
|
|
|
}
|
|
|
- }
|
|
|
- // 新居开慌的数量少于50平米
|
|
|
- if (config.productInfo.name === '新居开荒') {
|
|
|
- if (config.xNumberValue < 10) {
|
|
|
- this.$vux.alert.show({
|
|
|
- title: '抱歉',
|
|
|
- content: '开荒面积不少于10平米!'
|
|
|
- })
|
|
|
- return
|
|
|
+ let productParamJson = [{'product_id': config.productInfo.id, 'count': config.xNumberValue}]
|
|
|
+ productParamJson = JSON.stringify(productParamJson)
|
|
|
+ config.order.extra = '[' + config.order.extra + ']'
|
|
|
+ // 优惠券回空赋值 ''
|
|
|
+ if (config.orderInfo.coupons.id === undefined) {
|
|
|
+ config.orderInfo.coupons.id = []
|
|
|
+ } else {
|
|
|
+ config.orderInfo.coupons.id = JSON.stringify([config.orderInfo.coupons.id])
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- // 租房的数量少于10平米
|
|
|
- if (config.productInfo.name === '租房清洁') {
|
|
|
- if (config.xNumberValue < 10) {
|
|
|
- this.$vux.alert.show({
|
|
|
- title: '抱歉',
|
|
|
- content: '清洁面积不少于10平米!'
|
|
|
- })
|
|
|
- return
|
|
|
+ let tmp = {
|
|
|
+ balance: config.order.balance,
|
|
|
+ products: productParamJson,
|
|
|
+ memo: config.order.memo,
|
|
|
+ precedence: 0,
|
|
|
+ booking_time: this.bookingTime,
|
|
|
+ address_id: this.addressContent.address_id,
|
|
|
+ coupons: config.orderInfo.coupons.id,
|
|
|
+ station: config.station,
|
|
|
+ type: config.productInfo.type,
|
|
|
+ counts: config.xNumberValue,
|
|
|
+ extra: config.order.extra,
|
|
|
+ order_channel: 'wx_pub',
|
|
|
+ tech_id: '',
|
|
|
+ user_id: config.userId
|
|
|
}
|
|
|
- }
|
|
|
- // 判断用户余额大于等于订单金额，满足条件走余额支付
|
|
|
- config.order.userId = config.userId
|
|
|
- config.order.memo = this.remarks
|
|
|
- config.order.id = config.productInfo.id
|
|
|
- config.order.products = JSON.stringify({
|
|
|
- product_id: config.productInfo.id, // 产品ID
|
|
|
- count: this.xNumberValue // 产品数量
|
|
|
- })
|
|
|
- if (this.$store.state.user.userInfo.balance >= this.orderPrice) {
|
|
|
- config.order.balance = this.orderPrice
|
|
|
- this.orderPrice = 0
|
|
|
- } else {
|
|
|
- // 不满足条件走混合支付
|
|
|
- config.order.balance = this.$store.state.user.userInfo.balance
|
|
|
- this.orderPrice = this.orderPrice - config.order.balance
|
|
|
- }
|
|
|
- let productParamJson = [{'product_id': config.productInfo.id, 'count': config.xNumberValue}]
|
|
|
- productParamJson = JSON.stringify(productParamJson)
|
|
|
- config.order.extra = '[' + config.order.extra + ']'
|
|
|
- let tmp = {
|
|
|
- balance: config.order.balance,
|
|
|
- products: productParamJson,
|
|
|
- memo: config.order.memo,
|
|
|
- precedence: 0,
|
|
|
- booking_time: this.bookingTime,
|
|
|
- address_id: this.addressContent.address_id,
|
|
|
- coupons: [],
|
|
|
- station: config.station,
|
|
|
- type: config.productInfo.type,
|
|
|
- counts: config.xNumberValue,
|
|
|
- extra: config.order.extra,
|
|
|
- order_channel: 'wx_pub',
|
|
|
- tech_id: '',
|
|
|
- user_id: config.userId
|
|
|
- }
|
|
|
// config.orderInfo = tmp
|
|
|
- axios.post('o2o/order/add', qs.stringify(tmp)).then(res => {
|
|
|
- if (res.data.data.status === 1) {
|
|
|
- this.$router.push({path: '/'})
|
|
|
- } else {
|
|
|
- this.$router.push({path: '/pay', query: {orderInfo: res.data.data}})
|
|
|
- }
|
|
|
- })
|
|
|
+ axios.post('o2o/order/add', qs.stringify(tmp)).then(res => {
|
|
|
+ if (res.data.data.status === 1) {
|
|
|
+ this.$router.push({path: '/'})
|
|
|
+ } else {
|
|
|
+ this.$router.push({path: '/pay', query: {orderInfo: res.data.data}})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
btnAction: function (index, event) {
|
|
|
this.xNumberValue = config.xNumberValue = 0
|
|
|
localStorage.setItem('extra', index)
|
|
|
config.order.extra = JSON.stringify(config.productInfo.extra[index])
|
|
|
+ console.log(config.order.extra)
|
|
|
config.orderInfo.coupons = []
|
|
|
this.couponName = '暂无优惠券'
|
|
|
this.couponValue = 0
|
|
|
- this.isActive = index
|
|
|
- config.isActive = index
|
|
|
+ this.isActive = config.isActive = index
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 价格计算
|
|
|
- function payCharge (price, count, couponValue) {
|
|
|
+ function payCharge(price, count, couponValue) {
|
|
|
let p = ''
|
|
|
p = price * count - couponValue
|
|
|
return p
|
|
|
@@ -329,124 +353,124 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- /*订单背景色*/
|
|
|
-
|
|
|
- /*类目*/
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- /*壹管家用户服务协议*/
|
|
|
-
|
|
|
- .agreement-content {
|
|
|
- text-align: left;
|
|
|
- padding-top: 15px;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .agreementColor {
|
|
|
- color: #007aff;
|
|
|
- }
|
|
|
-
|
|
|
- .vux-check-icon {
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- a {
|
|
|
- color: #d3d3d3;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- .active {
|
|
|
- background-color: #ddd;
|
|
|
- color: white;
|
|
|
- border: 1px solid #ddd;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ /*订单背景色*/
|
|
|
+
|
|
|
+ /*类目*/
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*壹管家用户服务协议*/
|
|
|
+
|
|
|
+ .agreement-content {
|
|
|
+ text-align: left;
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .agreementColor {
|
|
|
+ color: #007aff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vux-check-icon {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ a {
|
|
|
+ color: #d3d3d3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #ddd;
|
|
|
+ color: white;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
</style>
|
洪海涛