Skip to content

M
mallapp
Commit 9eddfdda authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 8e2d5bff
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 49 deletions
pages/guidecar/place_order.vue
View file @ 9eddfdda
<style> <style>
.place_order {
height: 100%;
background: #f5f5f5;
}
.place_order .orderItem { .place_order .orderItem {
background-color: #fff; background-color: #fff;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -51,7 +55,7 @@ ...@@ -51,7 +55,7 @@
} }
.place_order .order_comLeft { .place_order .order_comLeft {
margin-left: 70px; /* margin-left: 70px; */
} }
.or_Image { .or_Image {
...@@ -113,50 +117,87 @@ ...@@ -113,50 +117,87 @@
right: 15px; right: 15px;
top: 15px; top: 15px;
} }
.order_Remark{
color:red;
font-size:12px;
text-align: right;
margin-bottom:10px;
}
.disBtn{
background-color: gray!important;
background-image: none!important;
}
.Agree_content{
padding: 24rpx;
text-align: center;
background: #fff;
position: relative;
}
.place_order .order_close{
position: absolute;
right:10px;
top:10px;
z-index:999;
}
</style> </style>
<template> <template>
<view class="place_order"> <view class="place_order">
<view class="orderItem"> <view class="orderItem">
<view class="orderCar"> <view class="orderCar">
<view class="order_carImg"> <view class="order_carImg">
<image mode="aspectFit" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/o_apply.png" /> <image mode="aspectFit" :src="mchs[0].goods_list[0].cover_pic" />
</image> </image>
</view> </view>
<view style="width:48%"> <view style="width:48%">
<view class="order_big">奔驰</view> <view class="order_big">{{mchs[0].goods_list[0].goods_attr.car_name}}</view>
<view class="order_carBg" style="margin-top:10px;"> <view class="order_carBg" style="margin-top:10px;">
<view style="margin-bottom:5px;">天数：3天</view> <view style="margin-bottom:5px;">天数：{{mchs[0].goods_list[0].goods_attr.advance_day}}天</view>
<view style="margin-bottom:5px;">颜色：棕色</view> <view style="margin-bottom:5px;">颜色：{{mchs[0].goods_list[0].goods_attr.carcolor_name}}</view>
<view>类型：大型车</view> <view>类型：{{mchs[0].goods_list[0].goods_attr.car_model}}/{{mchs[0].goods_list[0].goods_attr.ride_num}}座</view>
</view> </view>
</view> </view>
<view style="text-align: right;"> <view style="text-align: right;">
<view class="order_big">¥ 583.00</view> <view class="order_big">¥ {{mchs[0].goods_list[0].unit_price}}</view>
<view style="color:#727272;font-size:13px;">×2</view> <view style="color:#727272;font-size:13px;">×{{mchs[0].goods_list[0].num}}</view>
</view> </view>
</view> </view>
<view class="order_GName"> <view class="order_GName">
<view class="order_big order_comLeft">匹配导游</view> <view class="order_big order_comLeft">匹配导游</view>
<view style="display: flex;align-items: center;"> <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> <u-avatar mode="circle" style="margin-top:9px;" :src="mchs[0].goods_list[0].goods_attr.guide_photo"></u-avatar>
<text class="order_big" style="margin-left:5px;">李逍遥</text> <text class="order_big" style="margin-left:3px;">{{mchs[0].goods_list[0].goods_attr.guide_name}}</text>
</view> </view>
</view> </view>
<view class="order_GName"> <view class="order_GName">
<view class="order_big order_comLeft">服务类型</view> <view class="order_big order_comLeft">服务类型</view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<text class="order_big" style="margin-left:5px;">接机</text> <text class="order_big" style="margin-left:5px;">
{{mchs[0].goods_list[0].goods_attr.car_type_name}}
</text>
</view> </view>
</view> </view>
<view class="order_GName"> <view class="order_GName">
<view class="order_big order_comLeft">是否拼座</view> <view class="order_big order_comLeft">是否拼座</view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<text class="order_big" style="margin-left:5px;">是</text> <text class="order_big" style="margin-left:5px;">
{{mchs[0].goods_list[0].goods_attr.is_spell==1?'是':'否'}}
</text>
</view> </view>
</view> </view>
</view> </view>
<view class="orderItem"> <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;">
<input class="uni-input" v-model="orderMsg.Consignee" style="border:1px solid #e2e2e2;padding-left:5px;"/>
</view>
</view>
<view class="order_GName" style="border-top:0;">
<view class="order_big order_comLeft">联系电话</view>
<view style="display: flex;align-items: center;">
<input class="uni-input" v-model="orderMsg.Mobile" style="border:1px solid #e2e2e2;padding-left:5px;"/>
</view>
</view>
<view class="order_GName" style="border-top:0;"> <view class="order_GName" style="border-top:0;">
<view class="order_big order_comLeft">取车城市</view> <view class="order_big order_comLeft">取车城市</view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
...@@ -170,6 +211,13 @@ ...@@ -170,6 +211,13 @@
<text>锦江区阳光新野中心</text> <text>锦江区阳光新野中心</text>
</view> </view>
</view> </view>
<view class="order_GName" v-if="mchs[0].goods_list[0].goods_attr.car_type!=5">
<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_GName" style="height:90px;align-items: normal;">
<view class="order_big order_comLeft" style="margin-top:10px;">用车时间</view> <view class="order_big order_comLeft" style="margin-top:10px;">用车时间</view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
...@@ -183,10 +231,13 @@ ...@@ -183,10 +231,13 @@
</view> </view>
</view> </view>
</view> </view>
<view v-if="!dataList.date_enable" class="order_Remark">
{{dataList.date_remark}}
</view>
<view class="order_GName" @click="showPeopleDialog=true"> <view class="order_GName" @click="showPeopleDialog=true">
<view class="order_big order_comLeft">人数</view> <view class="order_big order_comLeft">人数</view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
{{peopleNum}} {{msg.DetailList[0].Number}}
<u-icon name="arrow" :size="32" color="#111"></u-icon> <u-icon name="arrow" :size="32" color="#111"></u-icon>
</view> </view>
</view> </view>
...@@ -195,22 +246,22 @@ ...@@ -195,22 +246,22 @@
<view class="order_GName" style="border-top:0;"> <view class="order_GName" style="border-top:0;">
<view class="order_big order_comLeft">优惠券</view> <view class="order_big order_comLeft">优惠券</view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<text style="color:#F20707"> <text style="color:#F20707" @click="showCouponHandler">
<!-- <text class="content" v-if="couponList.length>0" @click="showCouponHandler">选择优惠券</text> <text style="flex: 1;" v-if="mchs[0].coupon.user_coupon_id == 0 &&couponList.length>0">选择优惠券</text>
<text class="content" v-else-if="couponList.length==0">暂无优惠券</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> <text class="content" v-else :style="{ color: mainColor }">已优惠{{ mchs[0].coupon.coupon_discount }}元</text>
<u-icon name="ellipsis" size="36" v-if="couponList.length > 0" @click="showCouponHandler"></u-icon> <u-icon name="ellipsis" size="36" v-if="couponList.length > 0"></u-icon>
--> </text> </text>
<u-icon name="arrow" :size="32" color="#111"></u-icon> <u-icon name="arrow" :size="32" color="#111"></u-icon>
</view> </view>
</view> </view>
<view class="order_GName"> <view class="order_GName" v-if="mchs[0].integral.can_use">
<view class="order_big order_comLeft">积分抵扣</view> <view class="order_big order_comLeft">积分抵扣</view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<text>使用100积分抵扣</text><text style="color:#F20707;margin:0 5px;">¥10</text> <text>{{ `使用${mchs[0].integral.use_num}积分抵扣` }}</text><text style="color:#F20707;margin:0 5px;">¥{{mchs[0].integral.deduction_price}}</text>
<u-radio-group v-model="UseScore" size="30"> <u-checkbox-group>
<u-radio :active-color="mainColor" shape="circle" name="a"></u-radio> <u-checkbox v-model="userInt" :active-color="mainColor" @change="changeUseInt" size="30" shape="circle"></u-checkbox>
</u-radio-group> </u-checkbox-group>
</view> </view>
</view> </view>
<view class="order_GName" style="height:70px;align-items: normal;"> <view class="order_GName" style="height:70px;align-items: normal;">
...@@ -218,28 +269,31 @@ ...@@ -218,28 +269,31 @@
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<view style="text-align: right;"> <view style="text-align: right;">
<view>意外保险 <view>意外保险
<text style="color:#F20707;margin:0 5px;">¥50/人</text> <text style="color:#F20707;margin:0 5px;">¥{{mchs[0].insurance_money}}/人</text>
<text style="margin-right:5px;">×2</text> <text style="margin-right:5px;">×{{msg.DetailList[0].Number}}</text>
<u-radio-group v-model="UseScore" size="30"> <u-checkbox-group size="30">
<u-radio :active-color="mainColor" shape="circle" name="a"></u-radio> <u-checkbox v-model="checked" @change="changeAgree" :active-color="mainColor"></u-checkbox>
</u-radio-group> </u-checkbox-group>
</view> </view>
<view style="margin-top:5px;">请阅读<text style="color:#4578FF">《保险条款》</text></view> <view style="margin-top:5px;" @click="showAgree=true">请阅读<text style="color:#4578FF">《保险条款》</text></view>
</view> </view>
</view> </view>
</view> </view>
<view class="order_GName">
<u-field padding="0px" label-width="80" v-model="orderMsg.BuyerMessage" label="留言" placeholder="建议留言前先与客服沟通确认"></u-field>
</view>
<view class="order_GName"> <view class="order_GName">
<view style="text-align: right;width:100%;"> <view style="text-align: right;width:100%;">
<text style="color:#ADADAD;margin-right:10px;">共2天</text> <text style="color:#ADADAD;margin-right:10px;">共2天</text>
<text>小计：<text style="color:#F20707;">¥1178.00</text></text> <text>小计：<text style="color:#F20707;">¥{{mchs[0].total_price}}</text></text>
</view> </view>
</view> </view>
</view> </view>
<view class="OrderbtnList"> <view class="OrderbtnList">
<view class="Order_heji"> <view class="Order_heji">
合计<text style="color:#F20707;font-size:15px;margin-left:5px;">¥1178</text> 合计<text style="color:#F20707;font-size:15px;margin-left:5px;">¥{{mchs[0].total_price}}</text>
</view> </view>
<view class='btnstyle' style="width:40%;">提交订单</view> <view class='btnstyle' :class="{'disBtn':!dataList.date_enable}" @click="subOrder()" style="width:40%;">提交订单</view>
</view> </view>
<!-- 购买数量 --> <!-- 购买数量 -->
<u-popup mode="bottom" v-model="showPeopleDialog" border-radius="14" :mask-close-able="true" custom-style="padding:0;background:none;"> <u-popup mode="bottom" v-model="showPeopleDialog" border-radius="14" :mask-close-able="true" custom-style="padding:0;background:none;">
...@@ -247,16 +301,27 @@ ...@@ -247,16 +301,27 @@
<view class="orderNum_close"><u-icon name="cross" color="#9F9F9F" @click="showPeopleDialog=false" size="40" /></view> <view class="orderNum_close"><u-icon name="cross" color="#9F9F9F" @click="showPeopleDialog=false" size="40" /></view>
<view class="count-box"> <view class="count-box">
<text class="label">购买数量</text> <text class="label">购买数量</text>
<u-number-box v-model="peopleNum" :min="1" @change="valChange"></u-number-box> <u-number-box v-model="msg.DetailList[0].Number" :min="1" @change="valChange"></u-number-box>
</view> </view>
<view class="btn-box"> <view class="btn-box">
<view style="flex: 1;"> <view style="flex: 1;">
<u-button :ripple="true" :hair-line="false" :custom-style="btn1">确定</u-button> <u-button :ripple="true" :hair-line="false" @click="sureBuyNum()" :custom-style="btn1">确定</u-button>
</view> </view>
</view> </view>
</view> </view>
</u-popup> </u-popup>
<coupon v-if="couponList.length > 0 && showCoupon" :list="couponList" :current="0" @close="closeCouponHandler"></coupon> <coupon v-if="couponList.length > 0 && showCoupon" :list="couponList" :current="msg.User_Coupon_Id" @close="closeCouponHandler"></coupon>
<u-popup v-model="showAgree" mode="center" length="98%">
<view class="Agree_content">
<view class="order_close" @click="showAgree=false">
<u-icon name="cross" color="#9F9F9F" size="40" />
</view>
<scroll-view scroll-y="true" :style="{'height':contentHeight}">
<view>条款</view>
<view style="margin-top:20px;" v-html="dataList.insurance_description"></view>
</scroll-view>
</view>
</u-popup>
</view> </view>
</template> </template>
...@@ -277,8 +342,8 @@ ...@@ -277,8 +342,8 @@
DetailList: [{ DetailList: [{
GoodsId: 0, //商品id GoodsId: 0, //商品id
Number: 0, //人数 Number: 0, //人数
}, ], }],
TripSTime: '2020-09-04 12:00', //预约日期 TripSTime: '2020-09-17 12:00:00', //预约日期
District: 0, //区id District: 0, //区id
City: 0, //市id City: 0, //市id
Province: 0, //省id Province: 0, //省id
...@@ -301,12 +366,40 @@ ...@@ -301,12 +366,40 @@
}, },
//是否显示修改人数 //是否显示修改人数
showPeopleDialog:false, showPeopleDialog:false,
//人数
peopleNum:0,
//优惠券 //优惠券
couponList:[], couponList:[],
//优惠券弹窗 //优惠券弹窗
showCoupon:false, showCoupon:false,
mchs:[],
dataList:[], //数据源
userInt: false,
checked:true,
showAgree:false, //是否显示协议弹窗
contentHeight:0,
//下单msg
orderMsg:{
Consignee:'', //联系人
Mobile:'', //联系电话
Province:0, //省id
City:0, //市id
District:0, //区id
ShoppingAddress:'', //接送地址
BuyerMessage:'', //买家留言
DetailList:[{
GoodsId: 0, //商品id
Number: 0, //人数
}],
User_Coupon_Id:0, //使用优惠券id
CouponMoney:'', //优惠金额
Income:'' ,//客人付款金额
Use_Integral:'', //使用积分数量
AnchorName:'', //主播名称
TripSTime:'', //预定起始时间
TripETime:'', //预定结束时间
CarType:'', //服务类型
DestinationAddress:'' //目的地
}
}; };
}, },
...@@ -328,6 +421,7 @@ ...@@ -328,6 +421,7 @@
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: this.pageTitle, title: this.pageTitle,
}); });
this.contentHeight = this.$utils.calcContentHeight(100) + "px";
}, },
methods: { methods: {
//获取数据 //获取数据
...@@ -337,8 +431,16 @@ ...@@ -337,8 +431,16 @@
data: this.msg data: this.msg
}, },
res => { res => {
console.log(res,'列表数据');
if(res.resultCode==1){ if(res.resultCode==1){
console.log(res,'列表数据'); this.dataList = res.data;
this.mchs = res.data.mch_list;
this.mchs.forEach(x=>{
x.goods_list.forEach(j=>{
j.marketingLogo = JSON.parse(j.marketingLogo)
})
})
this.initCoupon();
} }
} }
); );
...@@ -369,7 +471,12 @@ ...@@ -369,7 +471,12 @@
}, },
//人数 //人数
valChange(e) { valChange(e) {
this.peopleNum = e.value; this.msg.DetailList[0].Number =e.value;
},
//点击确定
sureBuyNum(){
this.showPeopleDialog=false;
this.getData();
}, },
//关闭弹窗 //关闭弹窗
cloGood() { cloGood() {
...@@ -379,20 +486,78 @@ ...@@ -379,20 +486,78 @@
showCouponHandler() { showCouponHandler() {
this.showCoupon = true; this.showCoupon = true;
}, },
//关闭优惠券弹出
closeCouponHandler(e) { closeCouponHandler(e) {
if (e != -1) { if (e != -1) {
this.msg.User_Coupon_Id = e; this.msg.User_Coupon_Id = e;
console.log(e,'e');
this.getData(); this.getData();
} }
this.showCoupon = false; this.showCoupon = false;
}, },
//选择是否用积分
changeUseInt(e){
this.userInt = e.value;
this.msg.Use_Integral = this.userInt ? 1 : 0;
this.getData();
},
//点击始终同意协议
changeAgree(e){
this.checked=true;
},
//获取优惠券下拉数据
initCoupon() {
let ProductList = [];
this.mchs.forEach(item => {
item.goods_list.forEach(list => {
let obj = {
GoodsClassId: list.categoryIdList,
GoodsPrice: list.total_price,
ProductId: list.id
};
ProductList.push(obj);
});
});
this.request2(
{
url: '/api/AppletCoupon/GetNoUseCouponList',
data: { ProductList: ProductList }
},
res => {
if (res.resultCode == 1) {
this.couponList = res.data;
console.log(this.couponList,'优惠券');
}
}
);
},
//提交订单
subOrder(){
if(this.dataList.date_enable){
this.orderMsg.Province=this.msg.Province;
this.orderMsg.City=this.msg.City;
this.orderMsg.District=this.msg.District;
this.orderMsg.ShoppingAddress=this.msg.ShoppingAddress;
this.orderMsg.DetailList = this.msg.DetailList;
this.orderMsg.User_Coupon_Id=this.msg.User_Coupon_Id;
this.orderMsg.CouponMoney=this.dataList.mch_list[0].coupon.coupon_discount; //优惠金额
this.orderMsg.Income = this.dataList.total_price;
this.orderMsg.Use_Integral = this.msg.Use_Integral;
this.orderMsg.TripSTime = '' //待写
this.orderMsg.TripETime = '' //待写
this.orderMsg.CarType = this.dataList.mch_list[0].goods_list[0].goods_attr.car_type;
this.request2({
url: '/api/AppletOrder/SetAppletSDGoodsOrderInfo',
data: this.orderMsg
},
res => {
if(res.resultCode==1){
}
}
);
}
}
}, },
}; };
</script> </script>
<style>
.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