order,shopanddetail

src/pages.json

@@ -3,7 +3,7 @@
     {
       "path": "pages/public/login",
       "navigationBarTitleText": "登陆"
-      
+
     },
     {
       "path": "pages/public/resetpassword",
@@ -69,20 +69,32 @@
       "style":{
         "navigationBarTitleText": "订单管理"
       }
-    },
+    },
+		{
+		  "path":"pages/order/orderdetail",
+		  "style":{
+		    "navigationBarTitleText": "订单详情"
+		  }
+		},
     {
       "path": "pages/shop/shop",
       "style": {
         "navigationBarTitleText": "商品管理"
       }
-    }
+    },
+		{
+			"path":"pages/shop/shopdetail",
+			"style":{
+				"navigationBarTitleText": "商品详情"
+			}
+		}
   ],
   "tabBar": {
   	"color": "#b7b7b7",
 		"selectedColor": "#7d66f3",
 		"borderStyle": "black",
     "backgroundColor": "#ffffff",
-    
+
     "list": [{
 			"pagePath": "pages/index/index",
 			"text": "店铺首页",

src/pages/order/order.vue

@@ -1,300 +1,271 @@
 <!-- order -->
 <template>
-  <view class="order">
-    <view class="header-warp">
-      <view class="header-search">
-        <view class="uni-list-cell">
-          <view class="uni-list-cell-db">
-            <picker @change="bindPickerChange" :value="index" :range="array">
-              <view class="uni-input">{{ array[index] }}</view>
-            </picker>
-            <image
-              src="../../static/images/garydownicon.png"
-              mode=""
-              class="icon"
-            ></image>
-          </view>
-        </view>
-        <view class="search">
-          <input
-            type="text"
-            placeholder-style="color:#a3a8a8;font-size:10px;"
-            placeholder="请输入订单号或手机号、身份证号"
-            class="cellphone"
-          />
-          <text class="txt">搜索</text>
-        </view>
-        <view class="btn-time">
-          <image
-            src="../../static/images/timeIcon.png"
-            class="timeicon"
-          ></image>
-          <text class="screen">按时间</text>
-        </view>
-      </view>
-      <view class="header-bar">
-        <view
-          class="item"
-          @tap="changeTab(1)"
-          :class="{ active: isactive === 1 }"
-        >
-          <view class="ordertype">已付款</view>
-          <view class="heng"></view>
-        </view>
-        <view
-          class="item"
-          @tap="changeTab(2)"
-          :class="{ active: isactive === 2 }"
-        >
-          <view class="ordertype">已完成</view>
-          <view class="heng"></view>
-        </view>
-        <view
-          class="item"
-          @tap="changeTab(3)"
-          :class="{ active: isactive === 3 }"
-        >
-          <view class="ordertype">退款</view>
-          <view class="heng"></view>
-        </view>
-        <view class="line"></view>
-      </view>
-    </view>
-    <view style="height: 192upx;"></view>
-    <view class="order-content" v-if="isactive === 1">
-      <view class="order-list">
-        <view class="order-title">
-          <text class="ordernum"
-            >订单号：<text class="num">15648464184616</text></text
-          >
-          <text class="ordertime">09:26</text>
-        </view>
-        <view class="order-detail">
-          <view class="name">仙女山成人票</view>
-          <view class="door">门店：<text class="message">1</text></view>
-          <view class="num">门店：<text class="message">2</text></view>
-          <view class="status">门店：<text class="message">3</text></view>
-          <view class="playtime">门店：<text class="message">4</text></view>
-        </view>
-      </view>
-      1
-    </view>
-    <view class="order-content" v-if="isactive === 2">
-      <view class="order-list">
-        <view class="order-title">
-          <text class="ordernum"
-            >订单号：<text class="num">15648464184616</text></text
-          >
-          <text class="ordertime">09:26</text>
-        </view>
-        <view class="order-detail">
-          <view class="name">仙女山成人票</view>
-          <view class="door">门店：<text class="message">1</text></view>
-          <view class="num">门店：<text class="message">2</text></view>
-          <view class="status">门店：<text class="message">3</text></view>
-          <view class="playtime">门店：<text class="message">4</text></view>
-        </view>
-      </view>
-      2
-    </view>
-    <view class="order-content" v-if="isactive === 3">
-      <view class="order-list">
-        <view class="order-title">
-          <text class="ordernum"
-            >订单号：<text class="num">15648464184616</text></text
-          >
-          <text class="ordertime">09:26</text>
-        </view>
-        <view class="order-detail">
-          <view class="name">仙女山成人票</view>
-          <view class="door">门店：<text class="message">1</text></view>
-          <view class="num">门店：<text class="message">2</text></view>
-          <view class="status">门店：<text class="message">3</text></view>
-          <view class="playtime">门店：<text class="message">4</text></view>
-        </view>
-      </view>
-      3
-    </view>
-  </view>
+	<view class="order">
+		<view class="header-warp">
+			<view class="header-search">
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-db">
+						<picker @change="bindPickerChange" :value="index" :range="array">
+							<view class="uni-input">{{ array[index] }}</view>
+						</picker>
+						<image src="../../static/images/garydownicon.png" mode="" class="icon"></image>
+					</view>
+				</view>
+				<view class="search">
+					<input type="text" placeholder-style="color:#a3a8a8;font-size:10px;" placeholder="请输入订单号或手机号、身份证号" class="cellphone" />
+					<text class="txt">搜索</text>
+				</view>
+				<view class="btn-time">
+					<image src="../../static/images/timeIcon.png" class="timeicon"></image>
+					<text class="screen">按时间</text>
+				</view>
+			</view>
+			<view class="header-bar">
+				<view class="item" @tap="changeTab(1)" :class="{ active: isactive === 1 }">
+					<view class="ordertype">已付款</view>
+					<view class="heng"></view>
+				</view>
+				<view class="item" @tap="changeTab(2)" :class="{ active: isactive === 2 }">
+					<view class="ordertype">已完成</view>
+					<view class="heng"></view>
+				</view>
+				<view class="item" @tap="changeTab(3)" :class="{ active: isactive === 3 }">
+					<view class="ordertype">退款</view>
+					<view class="heng"></view>
+				</view>
+				<view class="line"></view>
+			</view>
+		</view>
+		<view style="height: 192upx;"></view>
+		<view class="order-content" v-if="isactive === 1">
+			<view class="order-list" @tap='todetail'>
+				<view class="order-title">
+					<text class="ordernum">订单号：<text class="num">15648464184616</text></text>
+					<text class="ordertime">09:26</text>
+				</view>
+				<view class="order-detail">
+					<view class="name">仙女山成人票</view>
+					<view class="door">门店：<text class="message">1</text></view>
+					<view class="num">门店：<text class="message">2</text></view>
+					<view class="status">门店：<text class="message">3</text></view>
+					<view class="playtime">门店：<text class="message">4</text></view>
+				</view>
+			</view>
+			1
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  name: 'order',
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      array: ['中国', '美国', '巴西', '日本'],
-      index: 0,
-      isactive: 1,
-    };
-  },
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    bindPickerChange: function (e) {
-      console.log('picker发送选择改变，携带值为', e.target.value);
-      this.index = e.target.value;
-    },
-    // tab
-    changeTab(type) {
-      this.isactive = type;
-    },
-  },
-};
+	export default {
+		name: 'order',
+		components: {},
+		data() {
+			//这里存放数据
+			return {
+				array: ['中国', '美国', '巴西', '日本'],
+				index: 0,
+				isactive: 1,
+			};
+		},
+		//方法集合
+		methods: {
+			bindPickerChange: function(e) {
+				console.log('picker发送选择改变，携带值为', e.target.value);
+				this.index = e.target.value;
+			},
+			// tab
+			changeTab(type) {
+				this.isactive = type;
+			},
+
+			// 跳转详情
+			todetail() {
+				console.log(1);
+				this.$mRouter.push({
+					route: '/pages/order/orderdetail'
+				})
+			}
+		},
+	};
 </script>
 <style lang="scss" scoped>
-.order {
-  background-color: #f4f4f4;
-  .header-warp {
-    width: 100%;
-    background-color: #fff;
-    padding: 15upx 33upx 0;
-    position: fixed;
-    .header-search {
-      display: flex;
-      align-items: center;
-      .uni-list-cell {
-        width: 92upx;
-        .uni-list-cell-db {
-          height: 80upx;
-          font-size: 28upx;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background-color: #fff;
-          color: #8f8f8f;
-          .icon {
-            width: 17upx;
-            height: 12upx;
-            margin-left: 10upx;
-          }
-        }
-      }
-      .search {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        height: 80upx;
-        margin-left: 20upx;
-        background-color: #f7f7f7;
-        border-radius: 10upx;
-        .cellphone {
-          flex: 1;
-          height: 100%;
-          color: $titleColor;
-          padding-left: 20upx;
-        }
-        .search-holder {
-          color: #f00;
-        }
-        .txt {
-          height: 72upx;
-          width: 90upx;
-          text-align: center;
-          line-height: 72upx;
-          color: #a95cff;
-          font-size: 28upx;
-        }
-      }
-      .btn-time {
-        width: 130upx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .timeicon {
-          width: 25upx;
-          height: 28upx;
-        }
-        .screen {
-          margin-left: 5upx;
-          font-size: 24upx;
-          color: #8f8f8f;
-        }
-      }
-    }
-    .header-bar {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      .item {
-        position: relative;
-        width: 33.33%;
-        height: 99upx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        .ordertype {
-          position: relative;
-          font-size: 30upx;
-          letter-spacing: 3upx;
-          color: #7a7c7c;
-        }
-        .heng {
-          position: absolute;
-          display: none;
-          bottom: 0;
-          width: 40upx;
-          height: 6upx;
-          border-radius: 4upx;
-          background-color: #a95cff;
-        }
-      }
+	.order {
+		background-color: #f4f4f4;
+
+		.header-warp {
+			width: 100%;
+			background-color: #fff;
+			padding: 15upx 33upx 0;
+			position: fixed;
+
+			.header-search {
+				display: flex;
+				align-items: center;
+
+				.uni-list-cell {
+					width: 92upx;
+
+					.uni-list-cell-db {
+						height: 80upx;
+						font-size: 28upx;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						background-color: #fff;
+						color: #8f8f8f;
+
+						.icon {
+							width: 17upx;
+							height: 12upx;
+							margin-left: 10upx;
+						}
+					}
+				}
+
+				.search {
+					flex: 1;
+					display: flex;
+					align-items: center;
+					height: 80upx;
+					margin-left: 20upx;
+					background-color: #f7f7f7;
+					border-radius: 10upx;
+
+					.cellphone {
+						flex: 1;
+						height: 100%;
+						color: $titleColor;
+						padding-left: 20upx;
+					}
+
+					.search-holder {
+						color: #f00;
+					}
+
+					.txt {
+						height: 72upx;
+						width: 90upx;
+						text-align: center;
+						line-height: 72upx;
+						color: #a95cff;
+						font-size: 28upx;
+					}
+				}
+
+				.btn-time {
+					width: 130upx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.timeicon {
+						width: 25upx;
+						height: 28upx;
+					}
+
+					.screen {
+						margin-left: 5upx;
+						font-size: 24upx;
+						color: #8f8f8f;
+					}
+				}
+			}
+
+			.header-bar {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				position: relative;
+
+				.item {
+					position: relative;
+					width: 33.33%;
+					height: 99upx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					flex-direction: column;
+
+					.ordertype {
+						position: relative;
+						font-size: 30upx;
+						letter-spacing: 3upx;
+						color: #7a7c7c;
+					}
+
+					.heng {
+						position: absolute;
+						display: none;
+						bottom: 0;
+						width: 40upx;
+						height: 6upx;
+						border-radius: 4upx;
+						background-color: #a95cff;
+					}
+				}
+
+				.active .ordertype {
+					color: #a95cff;
+				}
+
+				.active .heng {
+					display: block;
+				}
+			}
+		}
+
+		.order-content {
+			padding: 24upx 32upx 0;
+
+			.order-list {
+				background-color: #fff;
+				border-radius: 10upx;
+				padding: 30upx 24upx 33upx;
+				margin-bottom: 24upx;
+
+				.order-title {
+					border-bottom: 1px solid $bordrColor;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding-bottom: 22upx;
+
+					.ordernum {
+						font-size: 30upx;
+						color: #232828;
+
+						.num {
+							margin-left: 10upx;
+						}
+					}
+
+					.ordertime {
+						color: #a3a8a8;
+					}
+				}
+
+				.order-detail {
+					margin-top: 24upx;
+
+					.name {
+						font-size: 34upx;
+					}
+
+					.door,
+					.num,
+					.status,
+					.playtime {
+						font-size: 26upx;
+						color: #7a7c7c;
+						margin-top: 14upx;
+					}
 
-      .active .ordertype {
-        color: #a95cff;
-      }
-      .active .heng {
-        display: block;
-      }
-    }
-  }
-  .order-content {
-    padding: 24upx 32upx 0;
-    .order-list {
-      background-color: #fff;
-      border-radius: 10upx;
-      padding: 30upx 24upx 33upx;
-      margin-bottom: 24upx;
-      .order-title {
-        border-bottom: 1px solid $bordrColor;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-bottom: 22upx;
-        .ordernum {
-          font-size: 30upx;
-          color: #232828;
-          .num {
-            margin-left: 10upx;
-          }
-        }
-        .ordertime {
-          color: #a3a8a8;
-        }
-      }
-      .order-detail {
-        margin-top: 24upx;
-        .name {
-          font-size: 34upx;
-        }
-        .door,
-        .num,
-        .status,
-        .playtime {
-          font-size: 26upx;
-          color: #7a7c7c;
-          margin-top: 14upx;
-        }
-        .message {
-          margin-left: 10upx;
-        }
-      }
-    }
-  }
-}
-</style>
+					.message {
+						margin-left: 10upx;
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/order/orderdetail.vue

@@ -0,0 +1,142 @@
+<!-- 订单详情 -->
+<template>
+	<view class="orderdetail">
+		<Header :title="title"></Header>
+		<view class="" style="height: 94upx;"></view>
+		<view class="order-detail-content">
+			<view class="order-message">
+				<view class="title">订单信息</view>
+				<view class="ordername titlebar">产品名称：<text class="txt">观光车</text></view>
+				<view class="shopname titlebar">店铺名称：<text class="txt">观光车</text></view>
+				<view class="waternum titlebar">流水号：<text class="txt">观光车</text></view>
+				<view class="ordernum titlebar">订单号：<text class="txt">观光车</text></view>
+				<view class="phonenum titlebar">手机号：<text class="txt">观光车</text></view>
+				<view class="goindate titlebar">入园日期：<text class="txt">观光车</text></view>
+				<view class="price titlebar">产品价格：<text class="txt">观光车</text></view>
+				<view class="buynum titlebar">购买数量：<text class="txt">观光车</text></view>
+				<view class="palytime titlebar">游玩时间：<text class="txt">观光车</text></view>
+				<view class="orderstatus titlebar">订单状态：<text class="txt">退款中</text> </view>
+				<view class="tourist">
+					<view class="title">游客信息</view>
+					<view class="name touristbar">姓名：<text class="txt">猪猪虾</text></view>
+					<view class="idcard touristbar">身份证：<text class="txt">500233199308278293</text></view>
+				</view>
+			</view>
+			<view class="paymessage">
+				<view class="title">支付信息</view>
+				<view class="shoppric">产品价格:<text class="money">￥280</text></view>
+				<view class="realitypirc">实付金额:<text class="money">￥280</text></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import Header from '../components/header.vue';
+	export default {
+		components: {
+			Header
+		},
+		data() {
+			return {
+				title: '订单详情'
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.orderdetail {
+		.order-detail-content {
+			padding: 24upx 32upx 44upx;
+
+			.order-message {
+				background-color: #FFFFFF;
+				padding: 31upx 33upx 35upx;
+				border-radius: 17upx;
+
+				.title {
+					font-size: 34upx;
+					color: #111111;
+				}
+
+				.titlebar {
+					font-size: 28upx;
+					color: #666666;
+					letter-spacing: 2upx;
+					margin-top: 12upx;
+
+					.txt {
+						margin-left: 10upx;
+						font-size: 28upx;
+					}
+				}
+
+				.ordername {
+					margin-top: 15upx;
+				}
+
+				.orderstatus {
+					height: 98upx;
+					line-height: 98upx;
+					border-top: 1px solid #e1e1e1;
+					border-bottom: 1px solid #e1e1e1;
+				}
+
+				.tourist {
+					.title {
+						padding: 15upx 0;
+						font-size: 34upx;
+						color: #111111;
+					}
+
+					.touristbar {
+						color: #666666;
+					}
+
+					.txt {
+						margin-left: 10upx;
+						font-size: 28upx;
+					}
+				}
+			}
+
+			.paymessage {
+				background-color: #FFFFFF;
+				padding: 31upx 33upx 35upx;
+				border-radius: 17upx;
+				margin-top: 24upx;
+
+				.title {
+					font-size: 34upx;
+					color: #111111;
+				}
+				.shoppric {
+					color: #666666;
+					margin-top: 20upx;
+					.money {
+						margin-left: 10upx;
+					}
+				}
+
+				.realitypirc {
+					color: #666666;
+					font-size: 28upx;
+					margin-top: 20upx;
+					border-top: 1upx solid #e1e1e1;
+					padding-top: 20upx;
+					.money {
+						margin-left: 10upx;
+						color: #fa4141;
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/shop/shop.vue

@@ -1,25 +1,308 @@
 <!-- shop -->
 <template>
-  <view class="shop">商品管理</view>
+	<view class="shop">
+		<view class="header-warp">
+			<view class="header-search">
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-db">
+						<picker @change="bindPickerChange" :value="index" :range="array">
+							<view class="uni-input">{{ array[index] }}</view>
+						</picker>
+						<image src="../../static/images/garydownicon.png" mode="" class="icon"></image>
+					</view>
+				</view>
+				<view class="search">
+					<input type="text" placeholder-style="color:#a3a8a8;font-size:10px;" placeholder="请输入商品名称" class="cellphone" />
+					<text class="txt">搜索</text>
+				</view>
+				<view class="btn-time">
+					<image src="../../static/images/addicon.png" class="timeicon"></image>
+				</view>
+			</view>
+			<view class="header-bar">
+				<view class="item" @tap="changeTab(1)" :class="{ active: isactive === 1 }">
+					<view class="ordertype">待上架</view>
+					<view class="heng"></view>
+				</view>
+				<view class="item" @tap="changeTab(2)" :class="{ active: isactive === 2 }">
+					<view class="ordertype">已上架</view>
+					<view class="heng"></view>
+				</view>
+				<view class="item" @tap="changeTab(3)" :class="{ active: isactive === 3 }">
+					<view class="ordertype">已下架</view>
+					<view class="heng"></view>
+				</view>
+				<view class="line"></view>
+			</view>
+		</view>
+		<view style="height: 192upx;"></view>
+		<view class="order-content" v-if="isactive === 1">
+			<view class="order-list">
+				<view class="order-title">
+					<text class="ordernum">仙女山成人票</text>
+				</view>
+				<view class="order-detail">
+
+					<view class="left">
+						<image src="" mode="" class="img"></image>
+					</view>
+
+					<view class="center">
+						<view class="shop-detail door">所属店铺：仙女山</view>
+						<view class="shop-detail type">类型：门票</view>
+						<view class="shop-detail putaway">上下架状态：已下架状态</view>
+						<view class="shop-detail status">状态：审核通过</view>
+					</view>
+
+					<view class="right">￥<text class="price">180</text></view>
+
+				</view>
+				<view class="operate">
+					<view class="btn sold">下架</view>
+					<view class="btn compile" @tap="topage">编辑</view>
+					<view class="btn delete">删除</view>
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  name: 'shop',
-  components: {},
-  data() {
-    //这里存放数据
-    return {};
-  },
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {},
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-};
+	export default {
+		name: 'order',
+		components: {},
+		data() {
+			//这里存放数据
+			return {
+				array: ['门店', '美国', '巴西', '日本'],
+				index: 0,
+				isactive: 1,
+			};
+		},
+		//方法集合
+		methods: {
+			bindPickerChange: function(e) {
+				console.log('picker发送选择改变，携带值为', e.target.value);
+				this.index = e.target.value;
+			},
+			// tab
+			changeTab(type) {
+				this.isactive = type;
+			},
+
+			// 跳转详情
+			topage() {
+				console.log(1);
+				this.$mRouter.push({
+					route: '/pages/shop/shopdetail'
+				})
+			}
+		},
+	};
 </script>
 <style lang="scss" scoped>
-</style>
+	.shop {
+		background-color: #f4f4f4;
+
+		.header-warp {
+			width: 100%;
+			background-color: #fff;
+			padding: 15upx 33upx 0;
+			position: fixed;
+
+			.header-search {
+				display: flex;
+				align-items: center;
+
+				.uni-list-cell {
+					width: 92upx;
+
+					.uni-list-cell-db {
+						height: 80upx;
+						font-size: 28upx;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						background-color: #fff;
+						color: #8f8f8f;
+
+						.icon {
+							width: 17upx;
+							height: 12upx;
+							margin-left: 10upx;
+						}
+					}
+				}
+
+				.search {
+					flex: 1;
+					display: flex;
+					align-items: center;
+					height: 80upx;
+					margin-left: 20upx;
+					background-color: #f7f7f7;
+					border-radius: 10upx;
+
+					.cellphone {
+						flex: 1;
+						height: 100%;
+						color: $titleColor;
+						padding-left: 20upx;
+					}
+
+					.search-holder {
+						color: #f00;
+					}
+
+					.txt {
+						height: 72upx;
+						width: 90upx;
+						text-align: center;
+						line-height: 72upx;
+						color: #a95cff;
+						font-size: 28upx;
+					}
+				}
+
+				.btn-time {
+					margin-left: 20upx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					.timeicon {
+						width: 48upx;
+						height: 48upx;
+					}
+
+				}
+			}
+
+			.header-bar {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				position: relative;
+
+				.item {
+					position: relative;
+					width: 33.33%;
+					height: 99upx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					flex-direction: column;
+
+					.ordertype {
+						position: relative;
+						font-size: 30upx;
+						letter-spacing: 3upx;
+						color: #7a7c7c;
+					}
+
+					.heng {
+						position: absolute;
+						display: none;
+						bottom: 0;
+						width: 40upx;
+						height: 6upx;
+						border-radius: 4upx;
+						background-color: #a95cff;
+					}
+				}
+
+				.active .ordertype {
+					color: #a95cff;
+				}
+
+				.active .heng {
+					display: block;
+				}
+			}
+		}
+
+		.order-content {
+			padding: 24upx 32upx 0;
+
+			.order-list {
+				background-color: #fff;
+				border-radius: 10upx;
+				padding: 30upx 24upx 33upx;
+				margin-bottom: 24upx;
+
+				.order-title {
+					border-bottom: 1px solid $bordrColor;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding-bottom: 22upx;
+
+					.ordernum {
+						font-size: 34upx;
+						color: $titleColor;
+					}
+
+				}
+
+				.order-detail {
+					margin-top: 24upx;
+					display: flex;
+					justify-content: center;
+					.left{
+						.img{
+							width: 120upx;
+							height: 120upx;
+							border-radius: 5upx;
+							background-color: pink;
+						}
+					}
+					.center {
+						width: 370upx;
+						margin-left: 25upx;
+						.shop-detail {
+							font-size: 26upx;
+							color: #7a7a7a;
+							margin-top: 7upx;
+							&:first-child{
+								margin-top: 0;
+							}
+						}
+					}
+					.right{
+						flex: 1;
+						color: #ff6a5e;
+						.price{
+							font-size: 30upx;
+						}
+					}
+				}
+
+				.operate {
+					border-top: 1px solid #e7e7e7;
+					padding-top: 24upx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-top: 10upx;
+					.btn {
+						width: 160upx;
+						height: 58upx;
+						border: 1upx solid #7a7c7c;
+						border-radius: 6upx;
+						margin-right: 22upx;
+						text-align: center;
+						line-height: 58upx;
+						font-size: 28upx;
+						color: #7a7c7c;
+						letter-spacing: 3upx;
+					}
+					.delete {
+						margin-right: 0;
+						background-color: #ff6a5e;
+						color: #FFFFFF;
+						border: none;
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/shop/shopdetail.vue

@@ -0,0 +1,37 @@
+<template>
+	<view class="shopdetail">
+		<Header :title="title"></Header>
+		<view class="" style="height: 94upx;"></view>
+		<view class="shopdetail-content">
+
+		</view>
+	</view>
+</template>
+
+<script>
+	import Header from '../components/header.vue';
+	export default {
+		components: {
+			Header
+		},
+		data() {
+			return {
+				title: '商品详情'
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.shopdetail {
+		.shopdetail-content {
+			padding: 24upx 32upx 44upx;
+		}
+	}
+</style>