diff --git a/components/product/productCard.vue b/components/product/productCard.vue
index 9717744..126c6e9 100644
--- a/components/product/productCard.vue
+++ b/components/product/productCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="card flex product" :class="[direction]" @click="$emit('click')">
+  <view class="card flex product product-card__view" :class="[direction]" @click="$emit('click')">
     <view class="img" :class="[ data.isRecommend ? 'is-recommend' : '']">
       <image :src="data.imgUrl" mode="aspectFill"></image>
       <image v-if="data.isRecommend" class="mark" src="@/static/image/home/mark-recommend.png"></image>
@@ -29,7 +29,9 @@
           <text>{{ `已售出 ${data.sales}单` }}</text>
         </view>
       </view>
-      <button plain class="btn" @click="goToPlaceOrder(data.id)">立即下单</button>
+      <template v-if="!readonly">
+        <button plain class="btn" @click="goToPlaceOrder(data.id)">立即下单</button>
+      </template>
     </view>
   </view>
 </template>
@@ -56,6 +58,10 @@
       direction: {
         type: String,
         default: 'horizontal' // horizontal | vertical
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
       }
     },
 		data() {
diff --git a/pages_order/order/createOrder.vue b/pages_order/order/createOrder.vue
index 42bf126..37f5666 100644
--- a/pages_order/order/createOrder.vue
+++ b/pages_order/order/createOrder.vue
@@ -1,66 +1,13 @@
 <template>
 	<view class="page">
 		<!-- 导航栏 -->
-		<navbar :title="titleMap[type]" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
+		<navbar title="商品支付" leftClick @leftClick="$utils.navigateBack" color="#fff" />
 
-		<view class="bac"></view>
-
-		<view class="box">
-			
-			<!-- 送礼 -->
-			<view class="give-type" v-if="type == 'give'">
-				<view class="tab-box">
-					<view class="tab-item" :class="{'active': isGive === 1}" 
-                    @click="isGive = 1">
-						<text>单人礼包</text>
-						<text class="desc">送给1位好友，可同时送多件礼品</text>
-					</view>
-					<view class="tab-item" :class="{'active': isGive === 2}" 
-                    @click="isGive = 2">
-						<text>多人礼包</text>
-						<text class="desc">送给多位好友，每人1件礼品</text>
-					</view>
-					<view class="tab-item" :class="{'active': isGive === 3}" 
-                    @click="isGive = 3">
-						<text>抽奖礼包</text>
-						<text class="desc">好友抽奖，中奖者获得礼品</text>
-					</view>
-				</view>
-				<!-- <view class="tips">
-					<text>支付后分享给好友收礼</text>
-					<text class="guide" @click="$refs.popup.open('gift_guide')">指南</text>
-				</view> -->
-			</view>
-
-            <!-- 多人礼包人数 -->
-            <view class="cell-item" v-if="type == 'give' && isGive === 2">
-                <view class="cell-item-left">
-                    <uv-icon name="gift" size="40" color="#E3441A"></uv-icon>
-                    <view class="user-name">礼包份数</view>
-                </view>
-                <view class="cell-item-right">
-                    <view class="stepper">
-                        <text class="minus" :class="{disabled: multiNum <= multiMinNum}" 
-                            @click="multiNum > multiMinNum && multiNum--">-</text>
-                        <text class="num">{{multiNum}}</text>
-                        <text class="plus" :class="{disabled: multiNum >= multiMaxNum}"
-                            @click="multiNum < multiMaxNum && multiNum++">+</text>
-                    </view>
-                </view>
-            </view>
-
-            <!-- 抽奖礼包说明 -->
-            <view class="lucky-box" v-if="type == 'give' && isGive === 3">
-                <view class="title">抽奖规则</view>
-                <view class="tips-list">
-                    <view class="tip-item">• 好友参与抽奖</view>
-                    <view class="tip-item">• 系统随机抽取中奖者</view>
-                    <view class="tip-item">• 中奖者填写地址领取礼品</view>
-                </view>
-            </view>
+		<view class="content">
 
 			<!-- 商品详情 -->
-			<view class="product-item" v-for="item in payOrderProduct" :key="item.id">
+			<productCard :data="payOrderProduct[0]" :readonly="true"></productCard>
+			<!-- <view class="product-item" v-for="item in payOrderProduct" :key="item.id">
 				<view class="img-box">
 					<image :src="item.image" mode="aspectFill"></image>
 				</view>
@@ -80,58 +27,26 @@
 						<view class="desc">已售出 {{ item.payNum }}单</view>
 					</view>
 				</view>
-			</view>
-
-			<!-- 地址 -->
-			<view @click="openAddress" class="cell-item">
-				<view class="cell-item-left">
-					<image src="@/pages_order/static/createOrder/address.png" mode="widthFix" class="cell-icon"></image>
-					<view class="user-name">{{ address.name }}</view>
-					<view class="user-address">{{ address.address }}</view>
-				</view>
-				<view class="cell-item-right">
-					<uv-icon name="arrow-right"></uv-icon>
-				</view>
-			</view>
+			</view> -->
 
-			<view class="cell-list">
+			<view class="card payment">
 				<uv-radio-group v-model="payMethod">
-					<view style="width: 710rpx;">
-						<!-- 账户余额 -->
-						<view class="cell-item">
-							<view class="cell-item-left">
-								<image src="@/pages_order/static/createOrder/account.png" mode="widthFix" class="cell-icon">
-								</image>
-								<view class="user-name">账户余额</view>
-								<view class="descript">(余额: {{ riceInfo.balance }})</view>
-							</view>
-							<view class="cell-item-right">
-								<uv-radio activeColor="#E3441A"
-								size="40rpx"
-								icon-size="30rpx"
-								:name="1"/>
-							</view>
-						</view>
-						
-						<!-- 微信支付 -->
-						<view class="cell-item">
-							<view class="cell-item-left">
-								<image src="@/pages_order/static/createOrder/wx.png" mode="widthFix" class="cell-icon">
-								</image>
-								<view class="user-name">微信支付</view>
-								<view class="descript"></view>
-							</view>
-							<view class="cell-item-right">
-								<uv-radio 
-								activeColor="#E3441A"
-								size="40rpx"
-								icon-size="30rpx"
-								:name="0"/>
-							</view>
-						</view>
+					<view class="flex payment-item">
+						<image class="icon" src="../static/createOrder/icon-wx.png" mode="widthFix"></image>
+						<text class="label">微信支付</text>
+						<uv-radio :name="0" activeColor="#84A73F" size="39rpx" icon-size="39rpx"/>
+					</view>
+					<view class="flex payment-item">
+						<image class="icon" src="../static/createOrder/icon-account.png" mode="widthFix"></image>
+						<text class="label">账户余额<text class="desc">{{ `（余额:￥${riceInfo.balance || 0}）` }}</text></text>
+						<uv-radio :name="1" activeColor="#84A73F" size="39rpx" icon-size="39rpx"/>
 					</view>
 				</uv-radio-group>
 			</view>
+			
+		</view>
+
+		<template v-if="false">
 
 			<!-- 优惠券 -->
 			<view @click="openCoupon" class="cell-item">
@@ -170,15 +85,8 @@
 					立即支付
 				</view>
 			</view>
-		</view>
 
-		<!-- 地址选择 -->
-		<uv-popup ref="addressPopup" :round="30" style="padding-bottom: 90rpx;">
-			<addressList ref="addressList" height="60vh" @select="selectAddress" />
-			<view class="add-btn">
-				<view @click="$utils.navigateTo('/pages_order/mine/address')" class="button-submit">新增地址</view>
-			</view>
-		</uv-popup>
+		</template>
 
 		<!-- 优惠券选择-->
 		<uv-popup ref="couponPopup" :round="30">
@@ -191,6 +99,8 @@
 </template>
 
 <script>
+	import productCard from '@/components/product/productCard.vue'
+
 	import addressList from '../components/address/addressList.vue'
 	import couponList from '@/components/couponList/couponList.vue'
 
@@ -200,6 +110,8 @@
 
 	export default {
 		components: {
+			productCard,
+
 			addressList,
 			couponList
 		},
@@ -215,15 +127,15 @@
 				agreement: false,
 				coupon: {},
 				payMethod : 0,
-                isGive : 0,
-                type : '',
-                titleMap : {
-                    def : '确认订单',
-                    give : '送礼清单',
-                },
-                multiNum: 2, // 多人礼包人数
-                multiMinNum: 2, // 最小人数
-                multiMaxNum: 100, // 最大人数
+				isGive : 0,
+				type : '',
+				titleMap : {
+						def : '确认订单',
+						give : '送礼清单',
+				},
+				multiNum: 2, // 多人礼包人数
+				multiMinNum: 2, // 最小人数
+				multiMaxNum: 100, // 最大人数
 			}
 		},
 		computed: {
@@ -250,6 +162,8 @@
 			this.$store.commit('getUserInfo')
 		},
 		onShow() {
+			// todo
+			return
 			this.getAddressList()
 			this.getCouponList()
 		},
@@ -427,6 +341,49 @@
 	.page {
 		overflow: auto;
 		padding-bottom: 300rpx;
+		
+		/deep/ .nav-bar__view {
+			padding-bottom: 190rpx;
+			background-image: linear-gradient(#84A73F, #D8FF8F);
+		}
+
+		.content {
+			position: absolute;
+			z-index: 999;
+
+			transform: translateY(-118rpx);
+		
+			width: 100vw;
+			padding: 0 13rpx;
+			box-sizing: border-box;
+		}
+
+		/deep/ .product-card__view {
+			// margin: 0 13rpx;
+			padding: 27rpx 25rpx;
+			// width: calc(100vw - 13rpx*2);
+			width: 100%;
+			box-sizing: border-box;
+			// transform: translateY(-50%);
+
+			.img {
+				width: 184rpx;
+				height: 184rpx;
+			}
+
+			.title {
+				margin-bottom: 14rpx;
+			}
+
+			.price {
+				margin-top: 15rpx;
+			}
+
+			.sales {
+				margin-top: 15rpx;
+			}
+		}
+
 		.bac {
 			width: 100%;
 			height: 100px;
@@ -772,4 +729,35 @@
             }
         }
 	}
+
+	
+
+	.payment {
+		margin-top: 23rpx;
+		padding: 22rpx 42rpx 34rpx 41rpx;
+		color: #000000;
+		font-size: 28rpx;
+
+		&-item {
+			width: 100%;
+
+			& + & {
+				margin-top: 38rpx;
+			}
+		}
+
+		.icon {
+			width: 46rpx;
+			height: auto;
+			margin-right: 18rpx;
+		}
+
+		.label {
+			flex: 1;
+		}
+
+		.desc {
+			color: #999999;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages_order/product/productDetail.vue b/pages_order/product/productDetail.vue
index 58fbded..483e537 100644
--- a/pages_order/product/productDetail.vue
+++ b/pages_order/product/productDetail.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="page">
 		<!-- 导航栏 -->
-		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />
+		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" color="#fff" />
 
 		<uv-swiper :list="bannerList" indicator indicatorMode="dot" height="475rpx"></uv-swiper>
 
@@ -146,10 +146,12 @@
 				const TEMP_BANNER_IMG_URL = 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280'
 
 				this.productDetail = {
+					imgUrl: TEMP_BANNER_IMG_URL,
 					image: new Array(4).fill(1).map(() => TEMP_BANNER_IMG_URL),
 					price: 99,
 					sales: 235,
 					title: '60分钟肩颈推拿按摩',
+					desc: '疏通经络 放松肌肉',
 					tags: ['专业技师', '舒适环境', '深度放松'],
 					details: '<p>这里是商品详情..............<br/>这里是商品详情..............</p>'
 				}
@@ -254,6 +256,7 @@
 		}
 
 		.detail {
+			margin-top: 12rpx;
 			padding: 18rpx 28rpx;
 			background-color: $uni-fg-color;
 
diff --git a/pages_order/static/createOrder/account.png b/pages_order/static/createOrder/account.png
deleted file mode 100644
index b5c5585..0000000
Binary files a/pages_order/static/createOrder/account.png and /dev/null differ
diff --git a/pages_order/static/createOrder/coupon.png b/pages_order/static/createOrder/coupon.png
deleted file mode 100644
index 2cae06c..0000000
Binary files a/pages_order/static/createOrder/coupon.png and /dev/null differ
diff --git a/pages_order/static/createOrder/icon-account.png b/pages_order/static/createOrder/icon-account.png
new file mode 100644
index 0000000..7a279c0
Binary files /dev/null and b/pages_order/static/createOrder/icon-account.png differ
diff --git a/pages_order/static/createOrder/icon-coupon.png b/pages_order/static/createOrder/icon-coupon.png
new file mode 100644
index 0000000..0babea1
Binary files /dev/null and b/pages_order/static/createOrder/icon-coupon.png differ
diff --git a/pages_order/static/createOrder/icon-wx.png b/pages_order/static/createOrder/icon-wx.png
new file mode 100644
index 0000000..9b89bb9
Binary files /dev/null and b/pages_order/static/createOrder/icon-wx.png differ
diff --git a/pages_order/static/createOrder/wx.png b/pages_order/static/createOrder/wx.png
deleted file mode 100644
index 6267617..0000000
Binary files a/pages_order/static/createOrder/wx.png and /dev/null differ