套餐订单确认页UII更改

src/components/page-component/index/app-nav-bar.vue

@@ -90,6 +90,10 @@ export default {
             type: String,
             default: "#FFFFFF"
         },
+		backgroundImage:{
+			type:String,
+			default:''
+		},
         leftIcon: {
             type: String,
             default: ""
@@ -182,12 +186,14 @@ export default {
             return () => {
                 let color = '';
                 let backgroundColor = '';
+				let backgroundImage=''
                 if (this.hasMallSetting == 1) {
                     color = this.mallNavbar.top_text_color;
                     backgroundColor = this.mallNavbar.top_background_color;
                 } else {
                     color = this.color;
                     backgroundColor = this.backgroundColor;
+					backgroundImage =this.backgroundImage
                 }
                 let barHeight;
                 // #ifdef MP
@@ -197,7 +203,7 @@ export default {
                 color = color || '#000000';
                 backgroundColor = backgroundColor || '#FFFFFF';
                 return Object.assign({}, {
-                    color, backgroundColor,
+                    color, backgroundColor,backgroundImage,'background-size': '100% 386rpx',
                     height: (barHeight + this.mBarHeight) + 'px',
                     paddingTop: barHeight + 'px',
                 })

src/pages/order-submit/app-submit-goods.vue

@@ -50,13 +50,38 @@
         </view>
 
         <view v-else class="composition">
-            <view class="composition-item" v-for="(compositionItem, compositionIndex) in newList.composition_list"
+            <view class="" v-for="(compositionItem, compositionIndex) in newList.composition_list"
                   :key="compositionIndex">
-				  <!-- <view>
-					  
-				  </view> -->
-                <view v-for="(goodsItem, goodsIndex) in compositionItem.goods_list" :key="goodsIndex"
-                      class="goods-item" >
+					<view class="main-between info-box">
+						<view class="main-left">
+							<image class="gd-cover" :src="compositionItem.goods_list[0].goods_attr.pic_url ? compositionItem.goods_list[0].goods_attr.pic_url : compositionItem.goods_list[0].cover_pic" mode=""></image>
+							<view>
+								<view class="title t-omit">{{compositionItem.name}}</view>
+								<view>
+									<text class="price">
+										<text class="dw">￥</text>
+										<text class="rmb">{{compositionItem.total_price.split('.')[0]}}</text>
+										<text class="decimal">.{{compositionItem.total_price.split('.')[1]}}</text>
+									</text>
+									<text class="price-line"><text>￥</text>{{compositionItem.original_price}}</text>
+								</view>
+								<view class="main-between">
+									<view class="main-left">
+										<!-- <view class="tag">{{info.tag}}</view> -->
+										<view class="tag">套装</view>
+										<!-- <view class="tag">满200减10</view> -->
+									</view>
+								</view>
+								<view class="cross-center hxj-compositionItem-show" @click="showGoodsList=!showGoodsList">包含<text class="t-omit" style="width: 150rpx;">{{compositionItem.name}}</text>等{{compositionItem.goods_list.length}}个商品<image style="width: 28rpx;height: 28rpx;" :src="showGoodsList?'../../static/image/index/arrow-12.png':'../../static/image/index/arrow-11.png'" mode=""></image></view>
+							</view>
+						</view>
+						<view class="cross-bottom">
+							<view class="main-center cross-center receive" @click="receive" v-if="coupons.length>0">
+								领券<image src="https://t17.9026.com/web/statics/image/index/arrow-right-facet-white.png" mode=""></image>
+							</view>
+						</view>
+					</view>
+<!--                <view v-for="(goodsItem, goodsIndex) in compositionItem.goods_list" :key="goodsIndex" class="goods-item" >
                     <view class="dir-left-nowrap" >
                         <view class="box-grow-0" style="position: relative;">
                             <view v-if="goodsItem.address_disabled" class="address-disabled">不在配送范围内</view>
@@ -100,13 +125,26 @@
                         </template>
                         <template v-else>¥0.00</template>
                     </view>
-                </view>
-                <view class="composition-info" :class="[themeTextClass]" :style="{'color': !is_gift ? theme.color : ''}">
+                </view> -->
+				<view   class="hxj-composition-goods" v-show="showGoodsList">
+					<view  class="main-between cross-center hxj-composition-goods-item" v-for="(goodsItem, goodsIndex) in compositionItem.goods_list" :key="goodsIndex">
+						<view class="hxj-composition-goods-name t-omit">{{goodsItem.name}}</view>
+						<view class="main-left hxj-composition-goods-attr-list t-omit">
+							<view v-for="(attrItem,attrIndex) in goodsItem.attr_list"
+							      :key="attrIndex"
+							      class="cross-center hxj-composition-goods-attr-item">
+							    {{attrItem.attr_name}}
+							</view>
+						</view>
+						<view class="hxj-composition-goods-total_price"><text>￥</text>{{goodsItem.total_price}}</view>
+					</view>
+				</view>
+                <!-- <view class="composition-info" :class="[themeTextClass]" :style="{'color': !is_gift ? theme.color : ''}">
                     <view style="margin-bottom: 8rpx;">{{compositionItem.type == 1 ? '固定套餐' : '搭配套餐'}}
                         ￥{{compositionItem.total_price}}
                     </view>
                     <view class="composition-discount">已省 ￥{{compositionItem.composition_price}}</view>
-                </view>
+                </view> -->
             </view>
         </view>
 
@@ -131,6 +169,11 @@
             },
             theme: [String, Object],
         },
+		data(){
+			return{
+				showGoodsList:false,
+			}
+		},
         computed: {
             ...mapState({
                 appImg: state => state.mallConfig.__wxapp_img,
@@ -278,5 +321,123 @@
         .goods-item:last-child {
             border-bottom: none;
         }
+		
+		
+		.hxj-composition-goods{
+			width: 643rpx;
+			height: auto;
+			background: #F8F8F8;
+			border-radius: 6rpx;
+			margin: 0 auto 32rpx;
+			padding: 24rpx 28rpx;
+			.hxj-composition-goods-item{
+				height: 60rpx;
+				.hxj-composition-goods-name{
+					width: 224rpx;
+					font-size: 26rpx;
+					font-weight: 500;
+					color: #222222;
+				}
+				.hxj-composition-goods-attr-list{
+					width: 224rpx;
+					height: 100%;
+					font-size: 24rpx;
+					color: #999999;
+					.hxj-composition-goods-attr-item{
+						height: 100%;
+						margin-right: 5rpx;
+					}
+				}
+				.hxj-composition-goods-total_price{
+					font-size: 26rpx;
+					font-weight: 500;
+					color: #222222;
+					text{
+						font-weight: 300;
+					}
+				}
+			}
+		}
+		
+		
     }
+	
+	.receive{
+		width: 92rpx;
+		height: 38rpx;
+		background: #FF0000;
+		border-radius: 19rpx;
+		font-size: 20rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		line-height: 38rpx;
+		text-align: center;
+		image{
+			width: 22rpx;
+			height: 22rpx;
+			margin-left: 7rpx;
+		}
+	}
+	.info-box{
+		width: 100%;
+		height: auto;
+		background-color: #fff;
+		padding: 35rpx;
+		.gd-cover{
+			width: 170rpx;
+			height: 170rpx;
+			border-radius: 8rpx;
+			overflow: hidden;
+			margin-right: 28rpx;
+		}
+		.title{
+			width: 365rpx;
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #222222;
+			line-height: 46rpx;
+		}
+		.price{
+			color: #F93F3F;
+			line-height: 58rpx;
+			.dw{
+				font-size: 24rpx;
+				font-weight: 500;
+			}
+			.rmb{
+				font-size: 40rpx;
+				font-weight: 600;
+			}
+			.decimal{
+				font-size: 24rpx;
+				font-weight: 500;
+			}
+		}
+		.price-line{
+			font-size: 20rpx;
+			font-weight: 500;
+			text-decoration: line-through;
+			color: #999999;
+			line-height: 36rpx;
+			margin-left: 21rpx;
+		}
+		.tag{
+			width: auto;
+			height: 28rpx;
+			border: 1rpx solid #F59922;
+			border-radius: 2rpx;
+			font-size: 20rpx;
+			font-weight: 500;
+			color: #F59922;
+			line-height: 20rpx;
+			margin-right: 13rpx;
+			padding: 0 9rpx;
+		}
+		.hxj-compositionItem-show{
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #A18353;
+			line-height: 36rpx;
+		}
+	}
 </style>

src/pages/order-submit/order-submit.vue

@@ -4,7 +4,7 @@
 			<!-- 地址、商户、配送、商品、优惠、费用信息 -->
 			<view class="page" v-if="previewData">
 				<view style="background-image: url(https://t17.9026.com/web/statics/image/index/appointment_top.png);background-size: 100% 100%;padding-bottom: 24rpx;">
-					<app-nav-bar :fixed="true" :background-color="''" :title="'确认订单'" :xStyle="1" :hasMallSetting="2" :hasHeight="true"></app-nav-bar>
+					<app-nav-bar :fixed="true" :background-color="''" :background-image="'url(https://t17.9026.com/web/statics/image/index/appointment_top.png)'" :title="'确认订单'" :xStyle="1" :hasMallSetting="2" :hasHeight="true"></app-nav-bar>
 					<template v-if="getIsEnterSales">
 						<view v-if="!customerInfo" @click="navCustomer" class="select-customer" >
 							请选择客户
@@ -1702,8 +1702,8 @@
 
 	.bd-bottom {
 		width: 750upx;
-		height: 110upx;
-		padding: 0 24upx;
+		height: 100upx;
+		padding: 0 0 0 24upx;
 	}
 
 	.full-tip {