Skip to content

M
mallapp
Commit 8e2d5bff authored by zhengke's avatar zhengke
Browse files
Options

增加下单

parent 0d56d562
Show whitespace changes
Inline Side-by-side
Showing with 386 additions and 52 deletions
pages/guidecar/place_order.vue
View file @ 8e2d5bff
<template>
<view class="place_order" >
<style>
.place_order .orderItem {
background-color: #fff;
margin-bottom: 10px;
padding: 0 15px;
}
.place_order .order_big {
font-size: 14px;
color: #08090E;
/* font-weight: bold; */
}
.place_order .order_mini {
font-size: 11px;
color: #919191;
margin-top: 10px;
}
.place_order .orderCar {
display: flex;
justify-content: space-between;
padding: 30px 0;
}
.place_order .order_carImg image {
width: 200rpx;
height: 200rpx;
}
.place_order .order_GName {
width: 100%;
height: 50px;
border-top: 1px solid #e2e2e2;
display: flex;
align-items: center;
justify-content: space-between;
}
.order_carBg {
background-color: #F5F5F5;
width: 100%;
padding: 5px;
color: #727272;
font-size: 12px;
}
.place_order .order_small {
font-size: 14px;
color: #919191;
}
.place_order .order_comLeft {
margin-left: 70px;
}
.or_Image {
width: 10px;
height: 14px;
margin-right: 5px;
}
.place_order .btnstyle {
width: 135px;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 16px;
color: #FFF;
background-image: linear-gradient(to right,
#FF8585,
#EE4454);
}
.OrderbtnList {
position: fixed;
background: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
height: 50px;
display: flex;
align-items: center;
}
.Order_heji {
font-size: 14px;
color: #616161;
width: 60%;
text-align: right;
padding-right: 20px;
}
.Ordersku .count-box {
display: flex;
width:90%;
margin:40px auto 20px;
padding: 15px 0;
}
.Ordersku .count-box .label{
font-size: 14px;
color: #333;
width: 1px;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.place_order .orderNum_close {
position: absolute;
right: 15px;
top: 15px;
}
</style>
<template>
<view class="place_order">
<view class="orderItem">
<view class="orderCar">
<view class="order_carImg">
<image mode="aspectFit" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/o_apply.png" />
</image>
</view>
<view style="width:48%">
<view class="order_big">奔驰</view>
<view class="order_carBg" style="margin-top:10px;">
<view style="margin-bottom:5px;">天数：3天</view>
<view style="margin-bottom:5px;">颜色：棕色</view>
<view>类型：大型车</view>
</view>
</view>
<view style="text-align: right;">
<view class="order_big">¥ 583.00</view>
<view style="color:#727272;font-size:13px;">×2</view>
</view>
</view>
<view class="order_GName">
<view class="order_big order_comLeft">匹配导游</view>
<view style="display: flex;align-items: center;">
<u-avatar mode="circle" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/o_apply.png" size="60"></u-avatar>
<text class="order_big" style="margin-left:5px;">李逍遥</text>
</view>
</view>
<view class="order_GName">
<view class="order_big order_comLeft">服务类型</view>
<view style="display: flex;align-items: center;">
<text class="order_big" style="margin-left:5px;">接机</text>
</view>
</view>
<view class="order_GName">
<view class="order_big order_comLeft">是否拼座</view>
<view style="display: flex;align-items: center;">
<text class="order_big" style="margin-left:5px;">是</text>
</view>
</view>
</view>
<view class="orderItem">
<view class="order_GName" style="border-top:0;">
<view class="order_big order_comLeft">取车城市</view>
<view style="display: flex;align-items: center;">
四川 成都市
</view>
</view>
<view class="order_GName">
<view class="order_big order_comLeft">出发地址</view>
<view style="display: flex;align-items: center;">
<image class="or_Image" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/o_address.png"></image>
<text>锦江区阳光新野中心</text>
</view>
</view>
<view class="order_GName" style="height:90px;align-items: normal;">
<view class="order_big order_comLeft" style="margin-top:10px;">用车时间</view>
<view style="display: flex;align-items: center;">
<view style="text-align: right;">
<view>09月01日 周二 20:30</view>
<view style="margin:5px 0;">至<text style="color:#4578FF;font-size:12px;">(2天)</text></view>
<view>09月03日 周四 20:30</view>
</view>
<view>
<u-icon name="arrow" :size="32" color="#111"></u-icon>
</view>
</view>
</view>
<view class="order_GName" @click="showPeopleDialog=true">
<view class="order_big order_comLeft">人数</view>
<view style="display: flex;align-items: center;">
{{peopleNum}}
<u-icon name="arrow" :size="32" color="#111"></u-icon>
</view>
</view>
</view>
<view class="orderItem" style="padding-bottom:60px;">
<view class="order_GName" style="border-top:0;">
<view class="order_big order_comLeft">优惠券</view>
<view style="display: flex;align-items: center;">
<text style="color:#F20707">
<!-- <text class="content" v-if="couponList.length>0" @click="showCouponHandler">选择优惠券</text>
<text class="content" v-else-if="couponList.length==0">暂无优惠券</text>
<text class="content" v-else :style="{ color: mc }" @click="showCouponHandler">已优惠{{ mchs[0].coupon.coupon_discount }}元</text>
<u-icon name="ellipsis" size="36" v-if="couponList.length > 0" @click="showCouponHandler"></u-icon>
--> </text>
<u-icon name="arrow" :size="32" color="#111"></u-icon>
</view>
</view>
<view class="order_GName">
<view class="order_big order_comLeft">积分抵扣</view>
<view style="display: flex;align-items: center;">
<text>使用100积分抵扣</text><text style="color:#F20707;margin:0 5px;">¥10</text>
<u-radio-group v-model="UseScore" size="30">
<u-radio :active-color="mainColor" shape="circle" name="a"></u-radio>
</u-radio-group>
</view>
</view>
<view class="order_GName" style="height:70px;align-items: normal;">
<view class="order_big order_comLeft" style="margin-top:16px;">保险</view>
<view style="display: flex;align-items: center;">
<view style="text-align: right;">
<view>意外保险
<text style="color:#F20707;margin:0 5px;">¥50/人</text>
<text style="margin-right:5px;">×2</text>
<u-radio-group v-model="UseScore" size="30">
<u-radio :active-color="mainColor" shape="circle" name="a"></u-radio>
</u-radio-group>
</view>
<view style="margin-top:5px;">请阅读<text style="color:#4578FF">《保险条款》</text></view>
</view>
</view>
</view>
<view class="order_GName">
<view style="text-align: right;width:100%;">
<text style="color:#ADADAD;margin-right:10px;">共2天</text>
<text>小计：<text style="color:#F20707;">¥1178.00</text></text>
</view>
</view>
</view>
<view class="OrderbtnList">
<view class="Order_heji">
合计<text style="color:#F20707;font-size:15px;margin-left:5px;">¥1178</text>
</view>
<view class='btnstyle' style="width:40%;">提交订单</view>
</view>
<!-- 购买数量 -->
<u-popup mode="bottom" v-model="showPeopleDialog" border-radius="14" :mask-close-able="true" custom-style="padding:0;background:none;">
<view class="Ordersku">
<view class="orderNum_close"><u-icon name="cross" color="#9F9F9F" @click="showPeopleDialog=false" size="40" /></view>
<view class="count-box">
<text class="label">购买数量</text>
<u-number-box v-model="peopleNum" :min="1" @change="valChange"></u-number-box>
</view>
<view class="btn-box">
<view style="flex: 1;">
<u-button :ripple="true" :hair-line="false" :custom-style="btn1">确定</u-button>
</view>
</view>
</view>
</u-popup>
<coupon v-if="couponList.length > 0 && showCoupon" :list="couponList" :current="0" @close="closeCouponHandler"></coupon>
</view>
</template>
<script>
export default {
import AddressParse from '../address/zh-address-parse.min.js'
import coupon from '@/components/coupon/index';
export default {
components: {
coupon
},
data() {
return {
mainColor: "",
activeStyle: "",
pageTitle: "确认订单",
g:{},
msg:{
DetailList:[
{GoodsId:0,Number:0,},
],
TripSTime:'',
District:0,
City:0,
Province:0,
ShoppingAddress:'',
User_Coupon_Id:0,
Use_Integral:0,
}
g: {},
msg: {
DetailList: [{
GoodsId: 0, //商品id
Number: 0, //人数
}, ],
TripSTime: '2020-09-04 12:00', //预约日期
District: 0, //区id
City: 0, //市id
Province: 0, //省id
ShoppingAddress: '', //接送详细地址
User_Coupon_Id: 0, //优惠券id
Use_Integral: 0, // 使用积分
},
//是否使用积分抵扣
UseScore: '',
btn1: {
flex: 1,
height: '100%',
borderRadius: '40px',
border: 'none',
color: '#FFF',
fontSize: '13px',
width: '90%',
background:'#EE4454',
marginBottom:'20px'
},
//是否显示修改人数
showPeopleDialog:false,
//人数
peopleNum:0,
//优惠券
couponList:[],
//优惠券弹窗
showCoupon:false,
};
},
onLoad(options) {
if(options && options.g){
this.g = JSON.parse(decodeURIComponent(options.g))
}
console.log(options);
if(options){
this.msg.DetailList[0].GoodsId = options.GoodsId;
this.msg.DetailList[0].Number = options.Number;
this.msg.ShoppingAddress = '四川省成都市龙泉驿区';
let parseResult = AddressParse(this.msg.ShoppingAddress, 0)
let nameList = [parseResult.province, parseResult.city, parseResult.area];
this.getDestination(nameList);
}
},
created() {
this.mainColor = this.$uiConfig.mainColor;
......@@ -45,20 +328,71 @@ export default {
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
methods: {
//获取数据
getData(){
this.request2({
url: '/api/AppletGCOrder/GetAppletSDGoodsSettlementInfo',
data: this.msg
},
res => {
if(res.resultCode==1){
console.log(res,'列表数据');
}
}
);
},
//通过地址获取省市区ID
getDestination(nameList) {
this.request2({
url: '/api/AppletGuideCar/GetDestinationListByNames',
data: {
area: nameList
}
},
res => {
if(res.resultCode==1){
if (res.data.length == 3) {
this.msg.Province = res.data[0].ID;
this.msg.City = res.data[1].ID;
this.msg.District = res.data[2].ID;
} else {
this.msg.Province = res.data[0].ID;
this.msg.City = res.data[1].ID;
this.msg.District = 0;
}
this.getData();
}
}
);
},
//人数
valChange(e) {
this.peopleNum = e.value;
},
};
//关闭弹窗
cloGood() {
this.popupClose();
},
//选择优惠券
showCouponHandler() {
this.showCoupon = true;
},
closeCouponHandler(e) {
if (e != -1) {
this.msg.User_Coupon_Id = e;
this.getData();
}
this.showCoupon = false;
},
},
};
</script>
<style>
.place_order {
.place_order {
height: 100%;
background: #f5f5f5;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment