完善提交订单 添加本地搜索历史

src/api/client/order.js

@@ -20,11 +20,10 @@ export function userOrdersApi(data) {
  * @returns
  */
 
-export function successfulPayment(id, data) {
+export function successfulPayment(id) {
   return request({
     url: `/maintain/paySuccess/${id}`,
     method: 'get',
-    data: data,
     header: {
       'content-type': 'application/x-www-form-urlencoded',
     },

src/pages/client/clientPackage/search.vue

@@ -1,26 +1,20 @@
 <template>
   <view class="search">
     <view class="search-item">
-      <u-search :showAction="true" actionText="取消" />
+      <u-search v-model="search_text"/>
+	  <button class="search-btn" @click="handlerSearchBtn">搜索</button>
     </view>
     <!-- 搜索历史 -->
     <view class="history">
       <view class="history-top">
         <hotCom>搜索历史</hotCom>
-        <view class="history-right">
+        <view class="history-right" @click="handlerAllSearchRecord">
           <u-icon name="trash" />
           <text>删除记录</text>
         </view>
       </view>
       <view class="label">
-        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
-        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
-        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
-        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
-        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
-        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
-        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
-        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
+        <u-tag v-for="(item,index) of search_list" :key="index" :text="item.name" plain closable :show="close2" @close="handlerCloseSearchItem(item,index)" />
       </view>
     </view>
 
@@ -30,13 +24,7 @@
         <text class="hotCom">热门搜索</text>
       </view>
       <view class="label">
-        <u-tag text="标签" class="label-item" />
-        <u-tag text="标签" class="label-item" />
-        <u-tag text="标签" class="label-item" />
-        <u-tag text="标签" class="label-item" />
-        <u-tag text="标签" class="label-item" />
-        <u-tag text="标签" class="label-item" />
-        <u-tag text="标签" class="label-item" />
+        <u-tag text="标签" class="label-item" v-for="item of 5"/>
       </view>
     </view>
 
@@ -80,8 +68,44 @@ export default {
           checked: true,
         },
       ],
+	  search_text:'',// 搜索text
+	  search_list:[],// 搜索列表
     };
   },
+  onShow() {
+	  if(uni.getStorageSync('searchItem')){
+		  this.search_list = uni.getStorageSync('searchItem')
+	  }
+  },
+  methods:{
+	  // 点击搜索按钮
+	  handlerSearchBtn(){
+		  if(!this.search_text){
+			  uni.showToast({
+			  	title:'请输入您要搜索的关键字',
+				icon:'none'
+			  })
+			  return 
+		  }else{
+			  let params = {
+			  			  name:this.search_text
+			  }
+			  this.search_list.push(params)
+			  uni.setStorageSync('searchItem',this.search_list)
+			  this.search_text = ''
+		  }
+	  },
+	  // 删除搜索记录按钮
+	  handlerCloseSearchItem(item,index){
+		this.search_list.splice(index,1)
+		uni.setStorageSync('searchItem',this.search_list)
+	  },
+	  // 删除所有搜索记录按钮
+	  handlerAllSearchRecord(){
+		uni.removeStorageSync('searchItem');
+		this.search_list = []
+	  }
+  }
 };
 </script>
 
@@ -93,11 +117,20 @@ export default {
 
 /* 搜索样式 */
 .search-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 0 20rpx;
   height: 80rpx;
   line-height: 80rpx;
   background-color: #fff;
   margin-bottom: 10rpx;
+  .search-btn{
+	  width: 160rpx;
+	  height: 70rpx;
+	  font-size: 28rpx;
+	  line-height: 70rpx;
+  }
 }
 
 /* 搜索历史样式 */
@@ -108,7 +141,7 @@ export default {
   .history-top {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 10rpx;
+    margin-bottom: 20rpx;
 
     .history-right {
       margin-top: 15rpx;
@@ -127,10 +160,6 @@ export default {
 .label {
   display: flex;
   flex-wrap: wrap;
-
-  .label-item {
-    margin-right: 10rpx;
-  }
 }
 
 // 列表
@@ -173,4 +202,8 @@ export default {
     margin-right: 20rpx;
   }
 }
+
+ ::v-deep view.data-v-1481d46d, scroll-view.data-v-1481d46d, swiper-item.data-v-1481d46d{
+	 margin: 0 4rpx;
+ }
 </style>

src/pages/client/clientPackage/serviceDetail.vue

@@ -1,473 +1,464 @@
 <template>
-  <view class="service">
-    <view class="service-top">
-      <view class="item-flex">
-        <view class="title">{{ goods.name }}</view>
-        <u-icon name="share-square" size="24" @click="handlerShare" />
-      </view>
-      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
-    </view>
-    <view class="service-center">
-      <view class="price">
-        <view>
-          <view class="price-item">
-            <text class="price-text">￥</text>{{ goods.originalPrice }}
-          </view>
-          <view class="bottom-text">门市价 ￥{{ goods.specialPrice }}</view>
-        </view>
-        <view>
-          <view class="favorable">优惠推荐</view>
-          <view class="bottom-text">还剩 49 天 02 时</view>
-        </view>
-      </view>
-      <!-- 优惠券 -->
-      <view class="coupon flex" v-for="(item, index) in coupons" :key="index">
-        <view class="coupon-left flex">
-          <span class="coupon-left-mark">￥</span>
-          <span class="coupon-left-price">5</span>
-        </view>
-        <view class="coupon-middle flex">
-          <view class="coupon-middle-user over-hide">{{ item.name }}</view>
-          <view class="coupon-middle-type over-hide">{{ item.description }}</view>
-        </view>
-        <view class="coupon-right flex">
-          <view v-if="false" class="coupon-right-time flex">
-            <view class="tip">有效期仅剩</view>
-            <view class="time">{{ item.expiration }}</view>
-          </view>
-          <view v-else class="coupon-right-get" @click="handlerGetCoupon(item, index)">可领取</view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 服务详情 -->
-    <view class="detail">
-      <view class="detail-text">服务详情</view>
-      <view class="detail-des">
-        {{ goods.description }}
-      </view>
-    </view>
-
-    <!-- 评价内容 -->
-    <view class="Evaluate-content">
-      <view v-for="(item, index) in comments" :key="index">
-        <view class="commnet-user flex">
-          <image :src="item.user.avatar" style="width: 40px; height: 40px; border-radius: 50%" />
-          <view class="commnet-user-middle flex">
-            <view class="name flex">{{ item.user.nickname }}</view>
-            <u-rate
-              class="rate"
-              :value="item.score"
-              readonly
-              :size="12"
-              gutter="1"
-              active-color="#ffa500"
-            />
-          </view>
-          <view class="time">{{ item.createTime }}</view>
-        </view>
-        <view class="commnet-text">{{ item.content }}</view>
-        <view class="commnet-img">
-          <image
-            class="img"
-            v-for="(img, index) in item.attachments"
-            :key="index"
-            :src="url"
-            mode="widthFix"
-          />
-        </view>
-      </view>
-
-      <u-empty
-        v-if="comments.length == 0"
-        mode="message"
-        icon="http://cdn.uviewui.com/uview/empty/message.png"
-      ></u-empty>
-    </view>
-
-    <!-- 底部 -->
-    <view class="service-footer">
-      <view
-        class="user-operate"
-        v-for="(item, index) in userOperate"
-        :key="index"
-        @tap="collect(item, index)"
-      >
-        <u-icon
-          class="user-operate-icon"
-          :name="hascollect ? (item.fill ? item.fill : item.icon) : item.icon"
-          size="24"
-        />
-        <text class="user-operate-text">{{ item.name }}</text>
-      </view>
-      <view class="buyNow" @click="handlerImmediateBy">立即购买</view>
-    </view>
-  </view>
+	<view class="service">
+		<view class="service-top">
+			<view class="item-flex">
+				<view class="title">{{ goods.name }}</view>
+				<u-icon name="share-square" size="24" @click="handlerShare" />
+			</view>
+			<u-swiper :list="goods.banners" previousMargin="0" nextMargin="100" circular :autoplay="false"
+				bgColor="#ffffff" />
+			<!-- <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image> -->
+		</view>
+		<view class="service-center">
+			<view class="price">
+				<view>
+					<view class="price-item">
+						<text class="price-text">￥</text>{{ goods.originalPrice }}
+					</view>
+					<view class="bottom-text">门市价 ￥{{ goods.specialPrice }}</view>
+				</view>
+				<view>
+					<view class="favorable">优惠推荐</view>
+					<view class="bottom-text">还剩 49 天 02 时</view>
+				</view>
+			</view>
+			<!-- 优惠券 -->
+			<view class="coupon flex" v-for="(item, index) in coupons" :key="index">
+				<view class="coupon-left flex">
+					<span class="coupon-left-mark">￥</span>
+					<span class="coupon-left-price">5</span>
+				</view>
+				<view class="coupon-middle flex">
+					<view class="coupon-middle-user over-hide">{{ item.name }}</view>
+					<view class="coupon-middle-type over-hide">{{ item.description }}</view>
+				</view>
+				<view class="coupon-right flex">
+					<view v-if="false" class="coupon-right-time flex">
+						<view class="tip">有效期仅剩</view>
+						<view class="time">{{ item.expiration }}</view>
+					</view>
+					<view v-else class="coupon-right-get" @click="handlerGetCoupon(item, index)">可领取</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 服务详情 -->
+		<view class="detail">
+			<view class="detail-text">服务详情</view>
+			<view class="detail-des">
+				{{ goods.description }}
+			</view>
+		</view>
+
+		<!-- 评价内容 -->
+		<view class="Evaluate-content">
+			<view v-for="(item, index) in comments" :key="index">
+				<view class="commnet-user flex">
+					<image :src="item.user.avatar" style="width: 40px; height: 40px; border-radius: 50%" />
+					<view class="commnet-user-middle flex">
+						<view class="name flex">{{ item.user.nickname }}</view>
+						<u-rate class="rate" :value="item.score" readonly :size="12" gutter="1"
+							active-color="#ffa500" />
+					</view>
+					<view class="time">{{ item.createTime }}</view>
+				</view>
+				<view class="commnet-text">{{ item.content }}</view>
+				<view class="commnet-img">
+					<image class="img" v-for="(img, index) in item.attachments" :key="index" :src="url"
+						mode="widthFix" />
+				</view>
+			</view>
+
+			<u-empty v-if="comments.length == 0" mode="message"
+				icon="http://cdn.uviewui.com/uview/empty/message.png"></u-empty>
+		</view>
+
+		<!-- 底部 -->
+		<view class="service-footer">
+			<view class="user-operate" v-for="(item, index) in userOperate" :key="index" @tap="collect(item, index)">
+				<u-icon class="user-operate-icon" :name='item.icon' size="24" />
+				<text class="user-operate-text">{{ item.name }}</text>
+			</view>
+			<view class="user-operate" @tap="handlerFavourite">
+				<u-icon class="user-operate-icon" :name="goods.favorites ? favourite_list.fill : favourite_list.icon"
+					size="24" />
+				<text class="user-operate-text">{{ favourite_list.name }}</text>
+			</view>
+			<view class="buyNow" @click="handlerImmediateBy">立即购买</view>
+		</view>
+	</view>
 </template>
 
 <script>
-import { getGoodsDetail, addFavorite } from '@/api/client/business.js';
-export default {
-  data() {
-    return {
-      userOperate: [
-        {
-          name: '店铺',
-          icon: 'file-text',
-        },
-        {
-          name: '立即咨询',
-          icon: 'chat',
-        },
-        {
-          name: '收藏',
-          icon: 'heart',
-          fill: 'heart-fill',
-        },
-      ],
-      hascollect: false, // 当前店铺是否被收藏
-
-      goods: [], //商品详情
-      coupons: [], //优惠券
-      comments: [], // 评论
-      id: '',
-    };
-  },
-  onLoad(option) {
-    // 获取商品详情接口
-    this.id = option.id;
-  },
-  mounted() {
-    this.handlerInitList();
-  },
-  methods: {
-    handlerInitList() {
-      getGoodsDetail(this.id).then(res => {
-        this.goods = res.data.goods;
-        this.coupons = res.data.coupons;
-        this.comments = res.data.comments;
-      });
-    },
-    // 点击分享
-    handlerShare() {
-      uni.share({
-        provider: 'weixin',
-        scene: 'WXSceneSession',
-        type: 1,
-        summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
-        success: function (res) {
-          console.log('success:' + JSON.stringify(res));
-        },
-        fail: function (err) {
-          console.log('fail:' + JSON.stringify(err));
-        },
-      });
-    },
-    // 选择底部tab 店铺 收藏 咨询
-    collect(item, index) {
-      switch (index) {
-        case 0:
-          uni.navigateTo({
-            url: `/pages/client/clientPackage/storeDetail?id=${this.goods.id}`,
-          });
-          break;
-        case 1:
-          uni.showToast({
-            title: '暂无',
-            icon: 'none',
-          });
-          break;
-        case 2:
-          addFavorite(this.id).then(res => {
-            if (res.code == 200) {
-              this.handlerInitList();
-              this.hascollect = !this.hascollect;
-              uni.showToast({
-                title: '收藏成功',
-                icon: 'none',
-              });
-            } else {
-              uni.showToast({
-                title: res.msg,
-                icon: 'none',
-              });
-              return;
-            }
-          });
-          break;
-      }
-    },
-    // 点击领取优惠卷
-    handlerGetCoupon() {
-      uni.showToast({
-        title: '没有',
-        icon: 'none',
-      });
-    },
-
-    // 点击购买按钮
-    handlerImmediateBy() {
-      uni.navigateTo({
-        url: '/pages/client/clientPackage/uptickOrder',
-      });
-    },
-  },
-};
+	import {
+		getGoodsDetailApi,
+		addFavorite
+	} from '@/api/client/business.js';
+	export default {
+		data() {
+			return {
+				userOperate: [{
+						name: '店铺',
+						icon: 'file-text',
+					},
+					{
+						name: '立即咨询',
+						icon: 'chat',
+					}
+					
+				],
+				favourite_list: {
+					name: '收藏',
+					icon: 'heart',
+					fill: 'heart-fill',
+				},
+				// hascollect: false, // 当前店铺是否被收藏
+
+				goods: [], //商品详情
+				coupons: [], //优惠券
+				comments: [], // 评论
+				id: '',
+			};
+		},
+		onLoad(option) {
+			// 获取商品详情接口
+			this.id = option.id;
+			this.handlerInitList(option.id);
+		},
+		mounted() {
+		},
+		methods: {
+			handlerInitList(id) {
+				getGoodsDetailApi(id).then(res => {
+					this.goods = res.data.goods;
+					console.log("@@@@goods",this.goods);
+					this.coupons = res.data.coupons;
+					this.comments = res.data.comments;
+				});
+			},
+			// 点击分享
+			handlerShare() {
+				uni.share({
+					provider: 'weixin',
+					scene: 'WXSceneSession',
+					type: 1,
+					summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
+					success: function(res) {
+						console.log('success:' + JSON.stringify(res));
+					},
+					fail: function(err) {
+						console.log('fail:' + JSON.stringify(err));
+					},
+				});
+			},
+			// 选择底部tab 店铺 收藏 咨询
+			collect(item, index) {
+				switch (index) {
+					case 0:
+						uni.navigateTo({
+							url: `/pages/client/clientPackage/storeDetail?id=${this.goods.id}`,
+						});
+						break;
+					case 1:
+						uni.showToast({
+							title: '暂无',
+							icon: 'none',
+						});
+						break;
+				}
+			},
+			// 点击收藏
+			handlerFavourite(){
+				console.log('@@@id',this.id);
+				addFavorite(this.id).then(res => {
+					if (res.code == 200) {
+						this.handlerInitList(this.id);
+						// this.hascollect = !this.hascollect;
+						uni.showToast({
+							title: '收藏成功',
+							icon: 'none',
+						});
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+						});
+						return;
+					}
+				});
+			},
+			// 点击领取优惠卷
+			handlerGetCoupon() {
+				uni.showToast({
+					title: '没有',
+					icon: 'none',
+				});
+			},
+
+			// 点击购买按钮
+			handlerImmediateBy() {
+				this.$store.commit('order/GET_ORDER_LIST',this.goods)
+				uni.navigateTo({
+					url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
+				});
+			},
+		},
+	};
 </script>
 
 <style lang="scss" scoped>
-.service {
-  min-height: 100vh;
-}
-
-.service-top {
-  margin: 20rpx;
-
-  .item-flex {
-    display: flex;
-    justify-content: space-between;
-
-    .title {
-      font-size: 18px;
-      font-weight: bold;
-      margin: 20rpx;
-    }
-  }
-
-  Image {
-    width: 100%;
-    height: 200px;
-  }
-}
-
-.service-center {
-  margin: 20rpx;
-
-  .price {
-    height: 110rpx;
-    padding: 10rpx 30rpx;
-    display: flex;
-    margin: 30rpx 0;
-    color: #fff;
-    font-size: 24rpx;
-    font-weight: lighter;
-    font-weight: normal;
-    box-sizing: border-box;
-    border-radius: 20rpx 20rpx 0 0;
-    background-color: #6c9fc3;
-    justify-content: space-between;
-
-    .price-item {
-      font-size: 35rpx;
-      margin-bottom: 6rpx;
-      font-weight: 600;
-
-      .price-text {
-        font-size: 24rpx;
-      }
-    }
-
-    .favorable {
-      font-size: 34rpx;
-      font-weight: 600;
-      margin-bottom: 6rpx;
-      letter-spacing: 4rpx;
-      text-align: right;
-    }
-
-    .bottom-text {
-      font-size: 24rpx;
-      font-weight: 100;
-    }
-  }
-}
-
-// 优惠券
-.flex {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.over-hide {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.coupon {
-  height: 130rpx;
-  display: flex;
-  font-size: 32rpx;
-  color: #f2110d;
-  border-radius: 10rpx;
-  margin-bottom: 25rpx;
-  padding: 20rpx 25rpx;
-  box-sizing: border-box;
-  background-color: #faeaea;
-  border: 2rpx solid #eb8b8b;
-
-  .coupon-left {
-    width: 10%;
-    height: 100%;
-
-    .coupon-left-price {
-      font-size: 65rpx;
-    }
-  }
-
-  .coupon-middle {
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    width: 60%;
-    height: 100%;
-
-    .coupon-middle-user {
-      width: 100%;
-      font-size: 30rpx;
-      font-weight: 600;
-    }
-
-    .coupon-middle-type {
-      width: 100%;
-      font-size: 24rpx;
-      font-weight: 600;
-      opacity: 0.8;
-    }
-  }
-
-  .coupon-right {
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    width: 25%;
-    height: 100%;
-
-    .coupon-right-time {
-      height: 100%;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-
-      .tip {
-        font-size: 30rpx;
-        font-weight: 600;
-      }
-
-      .time {
-        font-size: 24rpx;
-        font-weight: 600;
-        opacity: 0.8;
-      }
-    }
-
-    .coupon-right-get {
-      width: 80%;
-      background-color: #e8a87c;
-      height: 55rpx;
-      text-align: center;
-      line-height: 55rpx;
-      margin-top: 15rpx;
-    }
-  }
-}
-
-// 服务详情
-.detail {
-  margin: 40rpx 20rpx 20rpx 20rpx;
-
-  .detail-text {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 10rpx;
-  }
-
-  .detail-des {
-    margin-left: 15rpx;
-    font-size: 25rpx;
-    font-weight: 600;
-  }
-}
-
-// 评价内容
-.Evaluate-content {
-  margin: 20rpx;
-  padding-bottom: 120rpx;
-
-  .commnet-user {
-    height: 90rpx;
-
-    .commnet-user-middle {
-      height: 100%;
-      width: 60%;
-      flex-direction: column;
-      justify-content: space-evenly;
-      align-items: flex-start;
-
-      .name {
-        font-size: 28rpx;
-      }
-
-      .rate {
-        width: 30%;
-      }
-    }
-
-    .time {
-      align-self: flex-end;
-      font-size: 24rpx;
-    }
-  }
-
-  .commnet-text {
-    margin-bottom: 20rpx;
-    font-size: 24rpx;
-    font-weight: 600;
-  }
-
-  .commnet-img .img {
-    width: 225rpx;
-    margin-right: 10rpx;
-  }
-}
-
-// 底部
-.service-footer {
-  height: 60px;
-  padding: 10rpx 20rpx;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #fff;
-  border-top: 1px solid #eb8b8b;
-  box-sizing: border-box;
-
-  .u-icon {
-    justify-content: center !important;
-  }
-
-  .user-operate {
-    text-align: center;
-  }
-
-  .user-operate-text {
-    font-size: 24rpx;
-    font-weight: 600;
-  }
-
-  .buyNow {
-    width: 200px;
-    height: 40px;
-    text-align: center;
-    line-height: 40px;
-    border-radius: 40px;
-    background-color: #f0d318;
-  }
-}
-</style>
+	.service {
+		min-height: 100vh;
+	}
+
+	.service-top {
+		margin: 20rpx;
+
+		.item-flex {
+			display: flex;
+			justify-content: space-between;
+
+			.title {
+				font-size: 18px;
+				font-weight: bold;
+				margin: 20rpx;
+			}
+		}
+
+		Image {
+			width: 100%;
+			height: 200px;
+		}
+	}
+
+	.service-center {
+		margin: 20rpx;
+
+		.price {
+			height: 110rpx;
+			padding: 10rpx 30rpx;
+			display: flex;
+			margin: 30rpx 0;
+			color: #fff;
+			font-size: 24rpx;
+			font-weight: lighter;
+			font-weight: normal;
+			box-sizing: border-box;
+			border-radius: 20rpx 20rpx 0 0;
+			background-color: #6c9fc3;
+			justify-content: space-between;
+
+			.price-item {
+				font-size: 35rpx;
+				margin-bottom: 6rpx;
+				font-weight: 600;
+
+				.price-text {
+					font-size: 24rpx;
+				}
+			}
+
+			.favorable {
+				font-size: 34rpx;
+				font-weight: 600;
+				margin-bottom: 6rpx;
+				letter-spacing: 4rpx;
+				text-align: right;
+			}
+
+			.bottom-text {
+				font-size: 24rpx;
+				font-weight: 100;
+			}
+		}
+	}
+
+	// 优惠券
+	.flex {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.over-hide {
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.coupon {
+		height: 130rpx;
+		display: flex;
+		font-size: 32rpx;
+		color: #f2110d;
+		border-radius: 10rpx;
+		margin-bottom: 25rpx;
+		padding: 20rpx 25rpx;
+		box-sizing: border-box;
+		background-color: #faeaea;
+		border: 2rpx solid #eb8b8b;
+
+		.coupon-left {
+			width: 10%;
+			height: 100%;
+
+			.coupon-left-price {
+				font-size: 65rpx;
+			}
+		}
+
+		.coupon-middle {
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: flex-start;
+			width: 60%;
+			height: 100%;
+
+			.coupon-middle-user {
+				width: 100%;
+				font-size: 30rpx;
+				font-weight: 600;
+			}
+
+			.coupon-middle-type {
+				width: 100%;
+				font-size: 24rpx;
+				font-weight: 600;
+				opacity: 0.8;
+			}
+		}
+
+		.coupon-right {
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: flex-start;
+			width: 25%;
+			height: 100%;
+
+			.coupon-right-time {
+				height: 100%;
+				flex-direction: column;
+				justify-content: space-between;
+				align-items: center;
+
+				.tip {
+					font-size: 30rpx;
+					font-weight: 600;
+				}
+
+				.time {
+					font-size: 24rpx;
+					font-weight: 600;
+					opacity: 0.8;
+				}
+			}
+
+			.coupon-right-get {
+				width: 80%;
+				background-color: #e8a87c;
+				height: 55rpx;
+				text-align: center;
+				line-height: 55rpx;
+				margin-top: 15rpx;
+			}
+		}
+	}
+
+	// 服务详情
+	.detail {
+		margin: 40rpx 20rpx 20rpx 20rpx;
+
+		.detail-text {
+			font-size: 16px;
+			font-weight: bold;
+			margin-bottom: 10rpx;
+		}
+
+		.detail-des {
+			margin-left: 15rpx;
+			font-size: 25rpx;
+			font-weight: 600;
+		}
+	}
+
+	// 评价内容
+	.Evaluate-content {
+		margin: 20rpx;
+		padding-bottom: 120rpx;
+
+		.commnet-user {
+			height: 90rpx;
+
+			.commnet-user-middle {
+				height: 100%;
+				width: 60%;
+				flex-direction: column;
+				justify-content: space-evenly;
+				align-items: flex-start;
+
+				.name {
+					font-size: 28rpx;
+				}
+
+				.rate {
+					width: 30%;
+				}
+			}
+
+			.time {
+				align-self: flex-end;
+				font-size: 24rpx;
+			}
+		}
+
+		.commnet-text {
+			margin-bottom: 20rpx;
+			font-size: 24rpx;
+			font-weight: 600;
+		}
+
+		.commnet-img .img {
+			width: 225rpx;
+			margin-right: 10rpx;
+		}
+	}
+
+	// 底部
+	.service-footer {
+		height: 60px;
+		padding: 10rpx 20rpx;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #fff;
+		border-top: 1px solid #eb8b8b;
+		box-sizing: border-box;
+
+		.u-icon {
+			justify-content: center !important;
+		}
+
+		.user-operate {
+			text-align: center;
+		}
+
+		.user-operate-text {
+			font-size: 24rpx;
+			font-weight: 600;
+		}
+
+		.buyNow {
+			width: 200px;
+			height: 40px;
+			text-align: center;
+			line-height: 40px;
+			border-radius: 40px;
+			background-color: #f0d318;
+		}
+	}
+</style>

src/pages/client/clientPackage/storeDetail.vue

@@ -1,573 +1,556 @@
 <template>
-  <view class="detail">
-    <!-- 轮播图 -->
-    <view class="carousel-map">
-      <u-swiper
-        :list="swiperList"
-        previousMargin="0"
-        nextMargin="100"
-        circular
-        :autoplay="false"
-        bgColor="#ffffff"
-      />
-      <view class="carousel-item">
-        <view class="mark">
-          <view class="mark-item">{{ merchant.score }}分</view>
-          <u-rate
-            :count="count"
-            v-model="value"
-            active-color="#fff"
-            inactive-color="#fff"
-            :size="12"
-          />
-        </view>
-        <view class="good-item">近期有6266个购买者给了给好评</view>
-      </view>
-    </view>
-
-    <!-- 商家信息 -->
-    <view class="merchant-info">
-      <view class="info-title">
-        <view>{{ merchant.name }}</view>
-        <text class="info-mark">{{ merchant.sale / 10000 }}w+单</text>
-      </view>
-      <view class="info-tag">商家信息</view>
-      <view class="info-item">
-        <view class="info-text">
-          <view>营业时间：{{ merchant.opening }}</view>
-          <view>电话号码：{{ merchant.mobile }}</view>
-          <view>{{ merchant.address }}</view>
-          <view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
-        </view>
-        <view class="info-icon">
-          <view class="info-map">
-            <u-icon name="map" size="20"></u-icon>
-            <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
-          </view>
-          <view class="info-map" @click="handlerMakeCall">
-            <u-icon name="phone" size="20"></u-icon>
-            <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 商家分类 -->
-    <view class="categoryList">
-      <u-tabs :list="categoryList"></u-tabs>
-    </view>
-
-    <view>
-      <view
-        class="list"
-        :key="index"
-        v-for="(item, index) of goods"
-        @click="handlerSkipGoodsDetail(item, index)"
-      >
-        <!-- <image class="img" :src="
+	<view class="detail">
+		<!-- 轮播图 -->
+		<view class="carousel-map">
+			<u-swiper :list="swiperList" previousMargin="0" nextMargin="100" circular :autoplay="false"
+				bgColor="#ffffff" />
+			<view class="carousel-item">
+				<view class="mark">
+					<view class="mark-item">{{ merchant.score }}分</view>
+					<u-rate :count="count" v-model="value" active-color="#fff" inactive-color="#fff" :size="12" />
+				</view>
+				<view class="good-item">近期有6266个购买者给了给好评</view>
+			</view>
+		</view>
+
+		<!-- 商家信息 -->
+		<view class="merchant-info">
+			<view class="info-title">
+				<view>{{ merchant.name }}</view>
+				<text class="info-mark">{{ merchant.sale / 10000 }}w+单</text>
+			</view>
+			<view class="info-tag">商家信息</view>
+			<view class="info-item">
+				<view class="info-text">
+					<view>营业时间：{{ merchant.opening }}</view>
+					<view>电话号码：{{ merchant.mobile }}</view>
+					<view>{{ merchant.address }}</view>
+					<view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
+				</view>
+				<view class="info-icon">
+					<view class="info-map">
+						<u-icon name="map" size="20"></u-icon>
+						<view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
+					</view>
+					<view class="info-map" @click="handlerMakeCall">
+						<u-icon name="phone" size="20"></u-icon>
+						<view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 商家分类 -->
+		<view class="categoryList">
+			<u-tabs :list="categoryList"></u-tabs>
+		</view>
+
+		<view>
+			<view class="list" :key="index" v-for="(item, index) of goods" @click="handlerSkipGoodsDetail(item, index)">
+				<!-- <image class="img" :src="
 		      error || !loaded
 		        ? 'https://cdn.uviewui.com/uview/album/10.jpg'
 		        : goods.logo
 		    " mode="scaleToFill" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"></image> -->
-        <image class="img" src="@/static/logo.png"></image>
-        <view class="listDetail">
-          <view class="item-text">{{ item.name }}</view>
-          <view class="item-flex">
-            <view class="star">
-              <u-rate :count="item.score" :size="14" />
-              <text class="line">|</text>
-              <text class="points">{{ item.score }}分</text>
-            </view>
-            <view>{{ item.score }}单</view>
-          </view>
-          <view class="list-item">
-            <view class="list-price">
-              <view class="item-l">
-                券后价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
-              </view>
-              <view class="item-r">
-                门市价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
-              </view>
-            </view>
-            <view class="btn-box">
-              <button class="btn btn1" @click.stop="handlerService(item, index)">预约</button>
-              <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button>
-            </view>
-          </view>
-        </view>
-      </view>
-
-      <u-empty
-        v-show="goods.length == 0"
-        mode="data"
-        icon="http://cdn.uviewui.com/uview/empty/data.png"
-      >
-      </u-empty>
-    </view>
-
-    <!-- 弹窗 -->
-    <u-popup
-      :show="reserve_show"
-      @close="reserve_show = false"
-      @open="open"
-      round="20"
-      mode="center"
-    >
-      <view class="draw-box">
-        <view class="draw-title"> 预约服务 </view>
-        <view class="draw-item">
-          <view class="item-text">时间</view>
-          <view
-            class="time-box"
-            @click="handlerSelectTime"
-            :class="template_time == '' ? 'time-text' : ''"
-          >
-            {{ template_time == '' ? '请选择时间' : template_time }}
-          </view>
-        </view>
-        <view class="draw-item">
-          <view class="item-text">联系方式</view>
-          <u--input
-            placeholder="请输入联系方式"
-            border="surround"
-            type="number"
-            v-model="addParams.mobile"
-          ></u--input>
-        </view>
-
-        <button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
-      </view>
-    </u-popup>
-
-    <!-- 时间 -->
-    <u-datetime-picker
-      :show="time_show"
-      :minDate="Number(new Date())"
-      :formatter="formatter"
-      v-model="addParams.appointTime"
-      @change="handlerTimeChange"
-      @confirm="time_show = false"
-      @cancel="time_show = false"
-      mode="datetime"
-    >
-    </u-datetime-picker>
-  </view>
+				<image class="img" src="@/static/logo.png"></image>
+				<view class="listDetail">
+					<view class="item-text">{{ item.name }}</view>
+					<view class="item-flex">
+						<view class="star">
+							<u-rate :count="item.score" :size="14" />
+							<text class="line">|</text>
+							<text class="points">{{ item.score }}分</text>
+						</view>
+						<view>{{ item.score }}单</view>
+					</view>
+					<view class="list-item">
+						<view class="list-price">
+							<view class="item-l">
+								券后价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
+							</view>
+							<view class="item-r">
+								门市价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
+							</view>
+						</view>
+						<view class="btn-box">
+							<button class="btn btn1" @click.stop="handlerService(item, index)">预约</button>
+							<button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
+			</u-empty>
+		</view>
+
+		<!-- 弹窗 -->
+		<u-popup :show="reserve_show" @close="reserve_show = false" @open="open" round="20" mode="center">
+			<view class="draw-box">
+				<view class="draw-title"> 预约服务 </view>
+				<view class="draw-item">
+					<view class="item-text">时间</view>
+					<view class="time-box" @click="handlerSelectTime" :class="template_time == '' ? 'time-text' : ''">
+						{{ template_time == '' ? '请选择时间' : template_time }}
+					</view>
+				</view>
+				<view class="draw-item">
+					<view class="item-text">联系方式</view>
+					<u--input placeholder="请输入联系方式" border="surround" type="number"
+						v-model="addParams.mobile"></u--input>
+				</view>
+
+				<button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
+			</view>
+		</u-popup>
+
+		<!-- 时间 -->
+		<u-datetime-picker :show="time_show" :minDate="Number(new Date())" :formatter="formatter"
+			v-model="addParams.appointTime" @change="handlerTimeChange" @confirm="time_show = false"
+			@cancel="time_show = false" mode="datetime">
+		</u-datetime-picker>
+	</view>
 </template>
 
 <script>
-import { getSellsDetail, addReservation } from '@/api/client/business.js';
-import { getCurrentLocation } from '@/api/client/home';
-export default {
-  data() {
-    return {
-      merchant: {},
-      goods: [],
-      count: 5,
-      value: 3,
-      swiperList: [],
-      categoryList: [
-        { id: 1, name: '全部' },
-        { id: 2, name: '养车' },
-        { id: 2, name: '维修' },
-        { id: 2, name: '改装' },
-        { id: 2, name: '补胎' },
-        { id: 2, name: '其他' },
-      ],
-      queryParams: {
-        //请求参数
-        id: null, //商家ID
-        region: null, //地区编码
-        longitude: null, //经度
-        latitude: null, //纬度
-      },
-      template_value: '',
-      time_show: false,
-      reserve_show: false,
-      value: '',
-      addParams: {
-        merchantId: '',
-        mobile: '',
-        appointTime: '',
-      },
-      template_time: '',
-    };
-  },
-  onLoad(option) {
-    this.queryParams.id = option.id;
-    this.handlerInitLocation();
-  },
-  watch: {
-    reserve_show(newValue) {
-      if (!newValue) {
-        this.addParams.mobile = '';
-        this.addParams.appointTime = '';
-        this.template_time = '';
-      }
-    },
-  },
-  methods: {
-    // 获取当前经纬度
-    handlerInitLocation() {
-      uni.getLocation({
-        type: 'gcj02',
-        success: res => {
-          this.queryParams.longitude = res.longitude;
-          this.queryParams.latitude = res.latitude;
-          let point = {
-            latitude: res.latitude,
-            longitude: res.longitude,
-          };
-          getCurrentLocation(point).then(rc => {
-            this.queryParams.region = rc.data.id;
-            this.handlerInitList();
-          });
-        },
-        fail: rs => {
-          uni.showToast({
-            title: rs,
-            icon: 'none',
-          });
-        },
-      });
-    },
-    // 初始化列表
-    handlerInitList() {
-      getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
-        this.merchant = res.data.merchant;
-        (this.goods = res.data.goods),
-          (this.swiperList = res.data.merchant.banners.map(h => h.url));
-      });
-    },
-
-    // 点击拨打电话
-    handlerMakeCall() {
-      uni.makePhoneCall({
-        phoneNumber: this.merchant.mobile,
-      });
-    },
-
-    // 点击跳转到商品详情
-    handlerSkipGoodsDetail(item, index) {
-      uni.navigateTo({
-        url: `/pages/client/clientPackage/serviceDetail?id=${item.id}`,
-      });
-    },
-
-    // 预约
-    handlerService(item, index) {
-      this.addParams.merchantId = item.id;
-      this.reserve_show = true;
-    },
-
-    // 购买
-    handlerSkipBuy(item, index) {
-      uni.navigateTo({
-        url: `/pages/client/clientPackage/uptickOrder?id=${item.id}`,
-      });
-    },
-
-    // 点击选择时间
-    handlerSelectTime() {
-      this.time_show = true;
-    },
-
-    // 点击预约确定按钮
-    handlerDrawConfirmBtn() {
-      if (this.addParams.appointTime == '') {
-        uni.showToast({
-          title: '请选择时间',
-          icon: 'none',
-        });
-        return;
-      } else if (this.addParams.mobile == '') {
-        uni.showToast({
-          title: '请填写手机号',
-          icon: 'none',
-        });
-        return;
-      } else if (!/^1[34578]\d{9}$/.test(this.addParams.mobile)) {
-        uni.showToast({
-          title: '请填写正确的手机号',
-          icon: 'none',
-        });
-        return false;
-      } else {
-        addReservation(this.addParams.merchantId, this.addParams).then(res => {
-          if (res.code == 200) {
-            this.handlerInitList();
-            this.reserve_show = false;
-            uni.showToast({
-              title: '预约成功',
-              icon: 'success',
-            });
-          } else {
-            uni.showToast({
-              title: res.msg,
-              icon: 'none',
-            });
-            return;
-          }
-        });
-      }
-    },
-
-    formatter(type, value) {
-      if (type === 'minute') {
-        return `00`;
-      }
-      return value;
-    },
-
-    // 选择时间
-    handlerTimeChange(e) {
-      if (e) {
-        this.addParams.appointTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
-        this.template_time = this.addParams.appointTime;
-      }
-    },
-  },
-};
+	import {
+		getSellsDetail,
+		addReservation
+	} from '@/api/client/business.js';
+	import {
+		getCurrentLocation
+	} from '@/api/client/home';
+	export default {
+		data() {
+			return {
+				merchant: {},
+				goods: [],
+				count: 5,
+				value: 3,
+				swiperList: [],
+				categoryList: [{
+						id: 1,
+						name: '全部'
+					},
+					{
+						id: 2,
+						name: '养车'
+					},
+					{
+						id: 2,
+						name: '维修'
+					},
+					{
+						id: 2,
+						name: '改装'
+					},
+					{
+						id: 2,
+						name: '补胎'
+					},
+					{
+						id: 2,
+						name: '其他'
+					},
+				],
+				queryParams: {
+					//请求参数
+					id: null, //商家ID
+					region: null, //地区编码
+					longitude: null, //经度
+					latitude: null, //纬度
+				},
+				template_value: '',
+				time_show: false,
+				reserve_show: false,
+				value: '',
+				addParams: {
+					merchantId: '',
+					mobile: '',
+					appointTime: '',
+				},
+				template_time: '',
+			};
+		},
+		onLoad(option) {
+			this.queryParams.id = option.id;
+			this.handlerInitLocation();
+		},
+		watch: {
+			reserve_show(newValue) {
+				if (!newValue) {
+					this.addParams.mobile = '';
+					this.addParams.appointTime = '';
+					this.template_time = '';
+				}
+			},
+		},
+		methods: {
+			// 获取当前经纬度
+			handlerInitLocation() {
+				uni.getLocation({
+					type: 'gcj02',
+					success: res => {
+						this.queryParams.longitude = res.longitude;
+						this.queryParams.latitude = res.latitude;
+						let point = {
+							latitude: res.latitude,
+							longitude: res.longitude,
+						};
+						getCurrentLocation(point).then(rc => {
+							this.queryParams.region = rc.data.id;
+							this.handlerInitList();
+						});
+					},
+					fail: rs => {
+						uni.showToast({
+							title: rs,
+							icon: 'none',
+						});
+					},
+				});
+			},
+			// 初始化列表
+			handlerInitList() {
+				getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
+					this.merchant = res.data.merchant;
+					this.goods = res.data.goods;
+					this.swiperList = res.data.merchant.banners.map(h => h.url);
+				});
+			},
+
+			// 点击拨打电话
+			handlerMakeCall() {
+				uni.makePhoneCall({
+					phoneNumber: this.merchant.mobile,
+				});
+			},
+
+			// 点击跳转到商品详情
+			handlerSkipGoodsDetail(item, index) {
+				uni.navigateTo({
+					url: `/pages/client/clientPackage/serviceDetail?id=${item.id}`,
+				});
+			},
+
+			// 预约
+			handlerService(item, index) {
+				this.addParams.merchantId = item.id;
+				this.reserve_show = true;
+			},
+
+			// 购买
+			handlerSkipBuy(item, index) {
+				this.$store.commit('order/GET_ORDER_LIST',item)
+				uni.navigateTo({
+					url: `/pages/client/clientPackage/uptickOrder?id=${item.id}`,
+				});
+			},
+
+			// 点击选择时间
+			handlerSelectTime() {
+				this.time_show = true;
+			},
+
+			// 点击预约确定按钮
+			handlerDrawConfirmBtn() {
+				if (this.addParams.appointTime == '') {
+					uni.showToast({
+						title: '请选择时间',
+						icon: 'none',
+					});
+					return;
+				} else if (this.addParams.mobile == '') {
+					uni.showToast({
+						title: '请填写手机号',
+						icon: 'none',
+					});
+					return;
+				} else if (!/^1[34578]\d{9}$/.test(this.addParams.mobile)) {
+					uni.showToast({
+						title: '请填写正确的手机号',
+						icon: 'none',
+					});
+					return false;
+				} else {
+					addReservation(this.addParams.merchantId, this.addParams).then(res => {
+						if (res.code == 200) {
+							this.handlerInitList();
+							this.reserve_show = false;
+							uni.showToast({
+								title: '预约成功',
+								icon: 'success',
+							});
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none',
+							});
+							return;
+						}
+					});
+				}
+			},
+
+			formatter(type, value) {
+				if (type === 'minute') {
+					return `00`;
+				}
+				return value;
+			},
+
+			// 选择时间
+			handlerTimeChange(e) {
+				if (e) {
+					this.addParams.appointTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
+					this.template_time = this.addParams.appointTime;
+				}
+			},
+		},
+	};
 </script>
 
 <style lang="scss" scoped>
-.detail {
-  min-height: 100vh;
-  background-color: #efefef;
-}
-
-// 轮播图
-.carousel-map {
-  background-color: #fff;
-  padding: 0 20rpx;
-
-  .carousel-item {
-    height: 90rpx;
-    display: flex;
-    background-color: #fff7e0;
-    border-radius: 0 0 10rpx 10rpx;
-
-    .mark {
-      background-color: #ff4b04;
-      color: #fff;
-      padding: 20rpx;
-      border-radius: 0 0 0 10rpx;
-      box-sizing: border-box;
-
-      .mark-item {
-        text-align: center;
-      }
-    }
-
-    .good-item {
-      font-size: 24rpx;
-      color: #a39c85;
-      line-height: 90rpx;
-      margin-left: 40rpx;
-    }
-  }
-}
-
-// 商家信息
-.merchant-info {
-  padding: 20rpx;
-  background-color: #fff;
-  margin-bottom: 20rpx;
-
-  .info-title {
-    display: flex;
-    justify-content: center;
-    font-size: 36rpx;
-    font-weight: bold;
-    margin: 20rpx 0;
-
-    .info-mark {
-      font-size: 12px;
-      font-weight: normal;
-      color: #999;
-      margin: 20rpx 0 20rpx 30rpx;
-    }
-  }
-
-  .info-tag {
-    width: 140rpx;
-    padding: 10rpx;
-    text-align: center;
-    border: 1px solid #5992bb;
-    color: #5992bb;
-    margin-bottom: 10rpx;
-  }
-
-  .info-item {
-    display: flex;
-    justify-content: space-between;
-
-    .info-text {
-      font-size: 28rpx;
-      line-height: 58rpx;
-      color: #212020;
-      margin-left: 20rpx;
-
-      .distance {
-        font-size: 26rpx;
-        color: #555252;
-        font-weight: normal;
-      }
-    }
-
-    .info-icon {
-      display: flex;
-      align-items: center;
-    }
-
-    .info-map {
-      padding: 10rpx;
-      font-size: 28rpx;
-      margin-top: 120rpx;
-    }
-  }
-}
-
-.list {
-  height: 220rpx;
-  background-color: #fff;
-  padding: 20rpx;
-  margin-bottom: 20rpx;
-  display: flex;
-
-  .img {
-    width: 140px;
-    height: 100%;
-    display: block;
-    margin-right: 10rpx;
-  }
-  .listDetail {
-    width: calc(100% - 160rpx);
-  }
-  .item-text {
-    font-weight: bold;
-    margin: 10rpx 0 10rpx;
-    color: #333;
-  }
-
-  .item-flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 28rpx;
-    margin: 0 20rpx 10rpx 0;
-    color: #0d0d0d66;
-
-    .star {
-      display: flex;
-
-      .line {
-        margin-left: 16rpx;
-        margin-top: 5rpx;
-        font-size: 22rpx;
-      }
-
-      .points {
-        color: #ff4b04;
-        font-size: 22rpx;
-        margin-top: 6rpx;
-        margin-left: 10rpx;
-      }
-    }
-  }
-
-  .list-item {
-    margin-top: 40rpx;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .list-price {
-      .item-l {
-        color: #e35240;
-        font-weight: bold;
-        font-size: 32rpx;
-
-        span {
-          font-size: 40rpx;
-        }
-      }
-
-      .item-r {
-        color: #a8a8a8;
-        margin-top: 10rpx;
-
-        span {
-          text-decoration: line-through;
-        }
-      }
-    }
-
-    .btn-box {
-      display: flex;
-      margin-left: 30rpx;
-
-      .btn {
-        font-size: 28rpx;
-        height: 70rpx;
-      }
-
-      .btn1 {
-        border-radius: 40rpx 0 0 40rpx;
-        border: 2rpx solid #ec5729;
-        color: #ec5729;
-        background-color: #fff;
-      }
-
-      .btn2 {
-        color: #fff;
-        background-color: #ec5729;
-        border-radius: 0 40rpx 40rpx 0;
-      }
-    }
-  }
-}
-
-.draw-box {
-  width: 560rpx;
-  padding: 20rpx;
-
-  .draw-title {
-    font-size: 30rpx;
-    font-weight: bold;
-    color: #000;
-    margin-bottom: 30rpx;
-  }
-
-  .draw-item {
-    margin-bottom: 20rpx;
-
-    .item-text {
-      font-size: 28rpx;
-      color: #000;
-      padding-left: 20rpx;
-    }
-
-    .time-box {
-      margin: 10rpx 20rpx;
-    }
-  }
-
-  .draw-btn {
-    width: 90%;
-    background-color: #5992bb !important;
-    color: #fff;
-    font-size: 28rpx;
-    border-radius: 20rpx;
-  }
-}
-
-.time-text {
-  color: #d4d6dc;
-}
-
-/* 分类 */
-
-.categoryList {
-  background-color: #fff;
-}
-</style>
+	.detail {
+		min-height: 100vh;
+		background-color: #efefef;
+	}
+
+	// 轮播图
+	.carousel-map {
+		background-color: #fff;
+		padding: 0 20rpx;
+
+		.carousel-item {
+			height: 90rpx;
+			display: flex;
+			background-color: #fff7e0;
+			border-radius: 0 0 10rpx 10rpx;
+
+			.mark {
+				background-color: #ff4b04;
+				color: #fff;
+				padding: 20rpx;
+				border-radius: 0 0 0 10rpx;
+				box-sizing: border-box;
+
+				.mark-item {
+					text-align: center;
+				}
+			}
+
+			.good-item {
+				font-size: 24rpx;
+				color: #a39c85;
+				line-height: 90rpx;
+				margin-left: 40rpx;
+			}
+		}
+	}
+
+	// 商家信息
+	.merchant-info {
+		padding: 20rpx;
+		background-color: #fff;
+		margin-bottom: 20rpx;
+
+		.info-title {
+			display: flex;
+			justify-content: center;
+			font-size: 36rpx;
+			font-weight: bold;
+			margin: 20rpx 0;
+
+			.info-mark {
+				font-size: 12px;
+				font-weight: normal;
+				color: #999;
+				margin: 20rpx 0 20rpx 30rpx;
+			}
+		}
+
+		.info-tag {
+			width: 140rpx;
+			padding: 10rpx;
+			text-align: center;
+			border: 1px solid #5992bb;
+			color: #5992bb;
+			margin-bottom: 10rpx;
+		}
+
+		.info-item {
+			display: flex;
+			justify-content: space-between;
+
+			.info-text {
+				font-size: 28rpx;
+				line-height: 58rpx;
+				color: #212020;
+				margin-left: 20rpx;
+
+				.distance {
+					font-size: 26rpx;
+					color: #555252;
+					font-weight: normal;
+				}
+			}
+
+			.info-icon {
+				display: flex;
+				align-items: center;
+			}
+
+			.info-map {
+				padding: 10rpx;
+				font-size: 28rpx;
+				margin-top: 120rpx;
+			}
+		}
+	}
+
+	.list {
+		height: 220rpx;
+		background-color: #fff;
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+		display: flex;
+
+		.img {
+			width: 140px;
+			height: 100%;
+			display: block;
+			margin-right: 10rpx;
+		}
+
+		.listDetail {
+			width: calc(100% - 160rpx);
+		}
+
+		.item-text {
+			font-weight: bold;
+			margin: 10rpx 0 10rpx;
+			color: #333;
+		}
+
+		.item-flex {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 28rpx;
+			margin: 0 20rpx 10rpx 0;
+			color: #0d0d0d66;
+
+			.star {
+				display: flex;
+
+				.line {
+					margin-left: 16rpx;
+					margin-top: 5rpx;
+					font-size: 22rpx;
+				}
+
+				.points {
+					color: #ff4b04;
+					font-size: 22rpx;
+					margin-top: 6rpx;
+					margin-left: 10rpx;
+				}
+			}
+		}
+
+		.list-item {
+			margin-top: 40rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.list-price {
+				.item-l {
+					color: #e35240;
+					font-weight: bold;
+					font-size: 32rpx;
+
+					span {
+						font-size: 40rpx;
+					}
+				}
+
+				.item-r {
+					color: #a8a8a8;
+					margin-top: 10rpx;
+
+					span {
+						text-decoration: line-through;
+					}
+				}
+			}
+
+			.btn-box {
+				display: flex;
+				margin-left: 30rpx;
+
+				.btn {
+					font-size: 28rpx;
+					height: 70rpx;
+				}
+
+				.btn1 {
+					border-radius: 40rpx 0 0 40rpx;
+					border: 2rpx solid #ec5729;
+					color: #ec5729;
+					background-color: #fff;
+				}
+
+				.btn2 {
+					color: #fff;
+					background-color: #ec5729;
+					border-radius: 0 40rpx 40rpx 0;
+				}
+			}
+		}
+	}
+
+	.draw-box {
+		width: 560rpx;
+		padding: 20rpx;
+
+		.draw-title {
+			font-size: 30rpx;
+			font-weight: bold;
+			color: #000;
+			margin-bottom: 30rpx;
+		}
+
+		.draw-item {
+			margin-bottom: 20rpx;
+
+			.item-text {
+				font-size: 28rpx;
+				color: #000;
+				padding-left: 20rpx;
+			}
+
+			.time-box {
+				margin: 10rpx 20rpx;
+			}
+		}
+
+		.draw-btn {
+			width: 90%;
+			background-color: #5992bb !important;
+			color: #fff;
+			font-size: 28rpx;
+			border-radius: 20rpx;
+		}
+	}
+
+	.time-text {
+		color: #d4d6dc;
+	}
+
+	/* 分类 */
+
+	.categoryList {
+		background-color: #fff;
+	}
+</style>

src/pages/client/clientPackage/uptickOrder.vue

@@ -1,311 +1,354 @@
 <template>
-  <view class="order-cantina">
-    <!-- 商品信息 -->
-    <view class="shop-info public">
-      <view class="title margin-bot flex">
-        <text class="title-font">
-          [养车]标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
-        </text>
-        <text class="general-font">¥{{ shop.shopPrice }}</text>
-      </view>
-      <view class="num margin-bot after-line flex">
-        <text class="lighter-fornt">数量</text>
-        <view class="buy-num-block flex">
-          <view class="add-block block" @tap="shop.buyQuantity++">+</view>
-          <u-input v-model="shop.buyQuantity" type="number" height="100%" />
-          <view class="reduce-block block" @tap="shop.buyQuantity--">-</view>
-        </view>
-      </view>
-      <view class="account margin-bot flex">
-        <text class="lighter-fornt">小计</text>
-        <text style="color: rgb(250, 111, 25)">¥{{ shopAccount }}</text>
-      </view>
-    </view>
-
-    <!-- 优惠 -->
-    <view class="discount public">
-      <view
-        class="discount-item after-line flex"
-        v-for="(item, index) in discountGroup"
-        :key="index"
-      >
-        <view class="flex" style="justify-content: space-between; width: 250rpx">
-          <text class="icon title-font">惠</text>
-          <text class="general-font">活动优惠</text>
-        </view>
-        <text class="money general-font">-¥{{ item.money }}</text>
-      </view>
-    </view>
-
-    <!-- 订单总价 -->
-    <view class="total-money flex public">
-      <text>订单总价</text>
-      <view class="order-total">
-        <text class="bill">¥{{ orderTotalPrice > 0 ? orderTotalPrice : 0 }}</text>
-        <text class="discount general-font">(已优惠¥{{ totalAccount }})</text>
-      </view>
-    </view>
-
-    <!-- 支付方式 -->
-    <view class="pay-methods flex public">
-      <text>支付方式</text>
-      <text @tap="popupShow">微信支付 ></text>
-    </view>
-
-    <!-- 购买须知 -->
-    <view class="use-info public">
-      <view class="after-line buy-info" style="position: relative">购买须知</view>
-      <view class="lighter-fornt info-item" v-for="(item, index) in useInfoGroup" :key="index">{{
-        item.content
-      }}</view>
-    </view>
-
-    <!-- 底部支付 -->
-    <view class="bottom-pay public flex">
-      <view class="total-price"
-        >总计：<text class="price">¥{{ orderTotalPrice > 0 ? orderTotalPrice : 0 }}</text></view
-      >
-      <view class="pay-button">立即支付</view>
-    </view>
-
-    <!-- 弹窗 -->
-    <u-popup
-      :show="show"
-      mode="bottom"
-      mask="true"
-      closeable
-      close-icon-pos="top-right"
-      @close="show = false"
-    >
-      <view>微信</view>
-      <view>支付宝</view>
-      <view>银联</view>
-    </u-popup>
-  </view>
+	<view class="order-cantina">
+		<!-- 商品信息 -->
+		<view class="shop-info public">
+			<view class="title margin-bot flex">
+				<text class="title-font"> {{ order_list.name }} </text>
+				<text class="general-font">¥{{ order_list.specialPrice }}</text>
+			</view>
+			<view class="num margin-bot after-line flex">
+				<text class="lighter-fornt">数量</text>
+				<view class="buy-num-block flex">
+					<view class="add-block block" @tap="handlerChangeOrderNumber(0)">+</view>
+					<view class="order-number">{{ order_number }}</view>
+					<view class="reduce-block block" @tap="handlerChangeOrderNumber(1)">-</view>
+				</view>
+			</view>
+			<view class="account margin-bot flex">
+				<text class="lighter-fornt">小计</text>
+				<text style="color: rgb(250, 111, 25)">¥{{ shopAccount }}</text>
+			</view>
+		</view>
+
+		<!-- 优惠 -->
+		<view class="discount public">
+			<view class="discount-item after-line flex" v-for="(item, index) in discountGroup" :key="index">
+				<view class="flex" style="justify-content: space-between; width: 250rpx">
+					<text class="icon title-font">惠</text>
+					<text class="general-font">活动优惠</text>
+				</view>
+				<text class="money general-font">-¥{{ item.money }}</text>
+			</view>
+		</view>
+
+		<!-- 订单总价 -->
+		<view class="total-money flex public">
+			<text>订单总价</text>
+			<view class="order-total">
+				<text class="bill">¥{{ orderTotalPrice > 0 ? orderTotalPrice : 0 }}</text>
+				<text class="discount general-font">(已优惠¥{{ totalAccount }})</text>
+			</view>
+		</view>
+
+		<!-- 支付方式 -->
+		<view class="pay-methods flex public">
+			<view>支付方式</view>
+			<!-- <text @tap="popupShow">微信支付 ></text> -->
+			<view class="pay-methods-r">
+				<span>微信支付</span>
+				<image class="pay_img" src="@/static/order/ic_order_weixin.png" mode="aspectFit"></image>
+			</view>
+		</view>
+
+		<!-- 购买须知 -->
+		<view class="use-info public">
+			<view class="after-line buy-info" style="position: relative">购买须知</view>
+			<view class="lighter-fornt info-item">
+				<span>
+						洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
+						无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
+						在购买洗车机时需要根据自己的实际需求进行选择
+				</span>
+			</view>
+		</view>
+
+		<!-- 底部支付 -->
+		<view class="bottom-pay public flex">
+			<view class="total-price">总计：<text class="price">¥{{ orderTotalPrice > 0 ? orderTotalPrice : 0 }}</text>
+			</view>
+			<view class="pay-button" @click="orderDetailUptick">立即支付</view>
+		</view>
+
+		<!-- 弹窗 -->
+		<u-popup :show="show" mode="bottom" mask="true" closeable close-icon-pos="top-right" @close="show = false">
+			<view>微信</view>
+			<view>支付宝</view>
+			<view>银联</view>
+		</u-popup>
+	</view>
 </template>
 
 <script>
-import { successfulPaymentApi } from '@/api/client/order';
-export default {
-  data() {
-    return {
-      shop: {
-        buyQuantity: 1,
-        shopPrice: 256,
-      },
-      show: false,
-      useInfoGroup: [
-        {
-          content:
-            '编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑',
-        },
-        {
-          content:
-            '编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑',
-        },
-      ],
-      discountGroup: [
-        {
-          money: 168.22,
-        },
-        {
-          money: 22.5,
-        },
-        {
-          money: 33.45,
-        },
-      ],
-      id: '',
-    };
-  },
-  onLoad(option) {
-    this.id = option.id;
-    this.orderDetailGood();
-  },
-  computed: {
-    shopAccount() {
-      return this.shop.buyQuantity < 0 ? 0 : this.shop.buyQuantity * this.shop.shopPrice;
-    },
-    totalAccount() {
-      let total = 0;
-      this.discountGroup.forEach(i => {
-        total += i.money;
-      });
-      return total.toFixed(2);
-    },
-    orderTotalPrice() {
-      return (this.shopAccount - this.totalAccount).toFixed(2);
-    },
-  },
-  methods: {
-    popupShow() {
-      this.show = true;
-    },
-    /* 支付成功的回调 */
-    async orderDetailUptick() {
-      let res = await successfulPaymentApi();
-      console.log(res.data, 'iiiii');
-    },
-  },
-  mounted() {},
-};
+	import {
+		successfulPayment
+	} from '@/api/client/order';
+	export default {
+		data() {
+			return {
+				shop: {
+					buyQuantity: 1,
+					shopPrice: 256,
+				},
+				show: false,
+				discountGroup: [{
+						money: 168.22,
+					},
+					{
+						money: 22.5,
+					},
+					{
+						money: 33.45,
+					},
+				],
+				id: '',
+				order_list:{},
+				order_number:1
+			};
+		},
+		onLoad(option) {
+			this.id = option.id;
+			this.order_list = this.$store.state.order.order_list
+			console.log('@@@order_list',this.order_list);
+			// this.orderDetailGood();
+		},
+		computed: {
+			// 商品小计
+			shopAccount() {
+				return this.order_number < 0 ? 0 : this.order_list.specialPrice * this.order_number;
+			},
+			totalAccount() {
+				let total = 0;
+				this.discountGroup.forEach(i => {
+					total += i.money;
+				});
+				return total.toFixed(2);
+			},
+			orderTotalPrice() {
+				return (this.shopAccount - this.totalAccount).toFixed(2);
+			},
+		},
+		
+		methods: {
+			// 加减数量
+			handlerChangeOrderNumber(e){
+				switch(e){
+					case 0 :
+						++ this.order_number
+					break;
+					case 1 : 
+						if(this.order_number == 0){
+							uni.showToast({
+								title:'不能再减了',
+								icon:'none'
+							})
+							return 
+						}else{
+							--this.order_number
+						}
+				}
+			},
+			popupShow() {
+				this.show = true;
+			},
+			/* 支付成功的回调 */
+			orderDetailUptick() {
+				successfulPayment(this.order_list.id).then(res=>{
+					console.log('@@@@res',res);
+				})
+			},
+			
+			
+		},
+	};
 </script>
 
 <style lang="scss" scoped>
-.order-cantina {
-  height: 100vh;
-  width: 750rpx;
-  background-color: rgb(235, 236, 237);
-
-  view {
-    box-sizing: border-box;
-  }
-  .title-font {
-    display: inline-block;
-    width: 85%;
-    font-size: 32rpx;
-    font-weight: 800;
-  }
-  .general-font {
-    font-size: 28rpx;
-    font-weight: 400;
-  }
-  .lighter-fornt {
-    font-weight: lighter;
-    font-size: 25rpx;
-  }
-
-  .public {
-    background-color: #fff;
-    width: 750rpx;
-    padding: 30rpx;
-    margin-bottom: 20rpx;
-  }
-
-  .flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .margin-bot {
-    margin-bottom: 30rpx;
-  }
-  .after-line {
-    &::after {
-      display: block;
-      content: ' ';
-      width: 100%;
-      left: 0;
-      bottom: 0;
-      position: absolute;
-      background-color: rgb(229, 229, 229);
-      height: 2px;
-      width: 100%;
-    }
-  }
-}
-
-.shop-info {
-  .num {
-    height: 100rpx;
-    position: relative;
-  }
-  .buy-num-block {
-    justify-content: center;
-    width: 200rpx;
-
-    .block {
-      width: 52rpx;
-      height: 52rpx;
-      line-height: 45rpx;
-      text-align: center;
-      border: 1px solid rgb(230, 230, 230);
-    }
-  }
-
-  ::v-deep .u-input {
-    border: 1px solid rgb(229, 229, 229);
-    border-right: none;
-    border-left: none;
-    border-radius: 0 !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-  }
-}
-
-.discount-item {
-  height: 120rpx;
-  width: 100%;
-  position: relative;
-  .icon {
-    height: 75rpx;
-    line-height: 75rpx;
-    text-align: center;
-    color: #fff;
-    width: 85rpx;
-    border-radius: 20rpx;
-    background-color: rgb(250, 111, 25);
-  }
-}
-
-.total-money .order-total {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  .bill {
-    font-size: 32rpx;
-    font-weight: 800;
-    color: rgb(250, 111, 25);
-  }
-  .discount {
-    color: rgb(250, 111, 25);
-  }
-}
-
-.use-info {
-  margin-bottom: 0 !important;
-  .buy-info {
-    padding-bottom: 30rpx;
-    margin-bottom: 30rpx;
-  }
-  .info-item {
-    margin-bottom: 20rpx;
-    position: relative;
-    text-indent: 15rpx;
-    &:last-child {
-      margin-bottom: 0;
-    }
-    &:before {
-      display: block;
-      content: ' ';
-      position: absolute;
-      height: 6rpx;
-      width: 6rpx;
-      top: 10rpx;
-      left: 4rpx;
-      border-radius: 3rpx;
-      background-color: rgb(128, 128, 128);
-    }
-  }
-}
-
-.bottom-pay {
-  .total-price {
-    color: rgb(250, 111, 25);
-    .price {
-      font-size: 32rpx;
-      font-weight: 800;
-    }
-  }
-  .pay-button {
-    width: 400rpx;
-    height: 80rpx;
-    line-height: 80rpx;
-    text-align: center;
-    color: #fff;
-    background-color: rgb(250, 111, 25);
-    border-radius: 40rpx;
-  }
-}
-</style>
+	.order-cantina {
+		height: 100vh;
+		width: 750rpx;
+		background-color: rgb(235, 236, 237);
+
+		view {
+			box-sizing: border-box;
+		}
+
+		.title-font {
+			display: inline-block;
+			width: 85%;
+			font-size: 32rpx;
+			font-weight: 800;
+		}
+
+		.general-font {
+			font-size: 28rpx;
+			font-weight: 400;
+		}
+
+		.lighter-fornt {
+			font-weight: lighter;
+			font-size: 25rpx;
+		}
+
+		.public {
+			background-color: #fff;
+			width: 750rpx;
+			padding: 30rpx;
+			margin-bottom: 20rpx;
+		}
+
+		.flex {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.margin-bot {
+			margin-bottom: 30rpx;
+		}
+
+		.after-line {
+			&::after {
+				display: block;
+				content: ' ';
+				width: 100%;
+				left: 0;
+				bottom: 0;
+				position: absolute;
+				background-color: rgb(229, 229, 229);
+				height: 2px;
+				width: 100%;
+			}
+		}
+	}
+
+	.shop-info {
+		.num {
+			height: 100rpx;
+			position: relative;
+		}
+
+		.buy-num-block {
+			justify-content: center;
+			width: 200rpx;
+			.order-number{
+				width: 40%;
+				height: 52rpx;
+				line-height: 45rpx;
+				text-align: center;
+				background-color: #EBECED;
+			}
+			.block {
+				width: 30%;
+				height: 52rpx;
+				line-height: 45rpx;
+				text-align: center;
+				border: 1px solid rgb(230, 230, 230);
+			}
+		}
+
+		::v-deep .u-input {
+			border: 1px solid rgb(229, 229, 229);
+			border-right: none;
+			border-left: none;
+			border-radius: 0 !important;
+			padding-top: 0 !important;
+			padding-bottom: 0 !important;
+		}
+	}
+
+	.discount-item {
+		height: 120rpx;
+		width: 100%;
+		position: relative;
+
+		.icon {
+			height: 75rpx;
+			line-height: 75rpx;
+			text-align: center;
+			color: #fff;
+			width: 85rpx;
+			border-radius: 20rpx;
+			background-color: rgb(250, 111, 25);
+		}
+	}
+
+	.total-money .order-total {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		.bill {
+			font-size: 32rpx;
+			font-weight: 800;
+			color: rgb(250, 111, 25);
+		}
+
+		.discount {
+			color: rgb(250, 111, 25);
+		}
+	}
+	.pay-methods{
+		max-height: 100rpx;
+		.pay-methods-r{
+			display: flex;
+			align-items: center;
+			.pay_img{
+				width: 50rpx;
+				margin-left: 20rpx;
+			}
+		}
+	}
+
+	.use-info {
+		margin-bottom: 0 !important;
+
+		.buy-info {
+			padding-bottom: 30rpx;
+			margin-bottom: 30rpx;
+		}
+
+		.info-item {
+			margin-bottom: 20rpx;
+			position: relative;
+			text-indent: 15rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			&:before {
+				display: block;
+				content: ' ';
+				position: absolute;
+				height: 6rpx;
+				width: 6rpx;
+				top: 10rpx;
+				left: 4rpx;
+				border-radius: 3rpx;
+				background-color: rgb(128, 128, 128);
+			}
+		}
+	}
+
+	.bottom-pay {
+		.total-price {
+			color: rgb(250, 111, 25);
+
+			.price {
+				font-size: 32rpx;
+				font-weight: 800;
+			}
+		}
+
+		.pay-button {
+			width: 400rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			color: #fff;
+			background-color: rgb(250, 111, 25);
+			border-radius: 40rpx;
+		}
+	}
+</style>

src/pages/client/tabBar/home.vue

@@ -1,351 +1,333 @@
 <template>
-  <view class="home">
-    <!-- 顶部导航 -->
-    <view class="nav-bar">
-      <u-navbar :bgColor="'#ffffff'" :placeholder="true">
-        <view slot="left" @click="manualGetLocation">
-          <text>地址</text>
-          <text class="iconfont icon-chevron-down" />
-        </view>
-        <view slot="center">
-          <u-search
-            placeholder="请输入搜索内容"
-            :showAction="false"
-            v-model="keyword"
-            @focus="$Router.push('/pages/client/clientPackage/search')"
-          />
-        </view>
-      </u-navbar>
-    </view>
+	<view class="home">
+		<!-- 顶部导航 -->
+		<view class="nav-bar">
+			<u-navbar :bgColor="'#ffffff'" :placeholder="true">
+				<view slot="left" @click="manualGetLocation">
+					<text>地址</text>
+					<text class="iconfont icon-chevron-down" />
+				</view>
+				<view slot="center">
+					<u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword"
+						@click="$Router.push('/pages/client/clientPackage/search')" :disabled='true'/>
+				</view>
+			</u-navbar>
+		</view>
 
-    <!-- 轮播图 -->
-    <view class="home-swiper">
-      <u-swiper :list="swiperList" indicator @change="change" @click="click" />
-    </view>
+		<!-- 轮播图 -->
+		<view class="home-swiper">
+			<u-swiper :list="swiperList" indicator @change="change" @click="click" />
+		</view>
 
-    <!-- 商品分类 -->
-    <view class="home-list">
-      <u-grid :border="false" col="5">
-        <u-grid-item v-for="item in categories" :key="item.id" @tap="handleMenuClick(item)">
-          <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="25"></u-icon>
-          <text class="grid-text">{{ item.name }}</text>
-        </u-grid-item>
-      </u-grid>
-      <u-toast ref="uToast" />
-    </view>
+		<!-- 商品分类 -->
+		<view class="home-list">
+			<u-grid :border="false" col="5">
+				<u-grid-item v-for="item in categories" :key="item.id" @tap="handleMenuClick(item)">
+					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="25"></u-icon>
+					<text class="grid-text">{{ item.name }}</text>
+				</u-grid-item>
+			</u-grid>
+			<u-toast ref="uToast" />
+		</view>
 
-    <!-- 热门推荐 -->
-    <view class="hot">
-      <u-cell
-        :border="false"
-        value="查看更多"
-        isLink
-        @click="$Router.push('/pages/client/clientPackage/storeHot')"
-      >
-        <view slot="title" class="hot-title"> 热门推荐 </view>
-      </u-cell>
-      <block v-if="homeData.recommends && homeData.recommends.length > 0">
-        <view>
-          <u-grid :border="false" col="2">
-            <u-grid-item
-              @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
-              v-for="item in homeData.recommends"
-              :key="item.id"
-            >
-              <recommend-item :item="item"></recommend-item>
-            </u-grid-item>
-          </u-grid>
-        </view>
-      </block>
-      <block v-else>
-        <u-empty icon="/static/default-graph/no-business.png" text="暂无推荐商家"></u-empty>
-      </block>
-    </view>
+		<!-- 热门推荐 -->
+		<view class="hot">
+			<u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pages/client/clientPackage/storeHot')">
+				<view slot="title" class="hot-title"> 热门推荐 </view>
+			</u-cell>
+			<block v-if="homeData.recommends && homeData.recommends.length > 0">
+				<view>
+					<u-grid :border="false" col="2">
+						<u-grid-item @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
+							v-for="item in homeData.recommends" :key="item.id">
+							<recommend-item :item="item"></recommend-item>
+						</u-grid-item>
+					</u-grid>
+				</view>
+			</block>
+			<block v-else>
+				<u-empty icon="/static/default-graph/no-business.png" text="暂无推荐商家"></u-empty>
+			</block>
+		</view>
 
-    <!-- 附近商家 -->
-    <view class="near">
-      <u-cell
-        :border="false"
-        value="查看更多"
-        isLink
-        @click="$Router.push('/pages/client/clientPackage/storeNearby')"
-      >
-        <view slot="title" class="near-title"> 附近商家 </view>
-      </u-cell>
-      <block v-if="homeData.nears && homeData.nears.length > 0">
-        <view>
-          <u-grid :border="false" col="2">
-            <u-grid-item
-              @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
-              v-for="item in homeData.nears"
-              :key="item.id"
-            >
-              <hot-item :item="item"></hot-item>
-            </u-grid-item>
-          </u-grid>
-        </view>
-      </block>
-      <block v-else>
-        <u-empty icon="/static/default-graph/no-business.png" text="暂无附近商家"></u-empty>
-      </block>
-    </view>
+		<!-- 附近商家 -->
+		<view class="near">
+			<u-cell :border="false" value="查看更多" isLink
+				@click="$Router.push('/pages/client/clientPackage/storeNearby')">
+				<view slot="title" class="near-title"> 附近商家 </view>
+			</u-cell>
+			<block v-if="homeData.nears && homeData.nears.length > 0">
+				<view>
+					<u-grid :border="false" col="2">
+						<u-grid-item @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
+							v-for="item in homeData.nears" :key="item.id">
+							<hot-item :item="item"></hot-item>
+						</u-grid-item>
+					</u-grid>
+				</view>
+			</block>
+			<block v-else>
+				<u-empty icon="/static/default-graph/no-business.png" text="暂无附近商家"></u-empty>
+			</block>
+		</view>
 
-    <!-- 询价 -->
-    <drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" />
-  </view>
+		<!-- 询价 -->
+		<drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" />
+	</view>
 </template>
 
 <script>
-import { getCurrentLocation, getHomePageApi } from '@/api/client/home';
-import { mapGetters } from 'vuex';
-import RecommendItem from '@/components/merchant/RecommendItem.vue';
-import HotItem from '@/components/merchant/HotItem.vue';
-import dragButton from '@/components/drag/drag-button.vue';
+	import {
+		getCurrentLocation,
+		getHomePageApi
+	} from '@/api/client/home';
+	import {
+		mapGetters
+	} from 'vuex';
+	import RecommendItem from '@/components/merchant/RecommendItem.vue';
+	import HotItem from '@/components/merchant/HotItem.vue';
+	import dragButton from '@/components/drag/drag-button.vue';
 
-export default {
-  components: {
-    RecommendItem,
-    HotItem,
-    dragButton,
-  },
-  data() {
-    return {
-      list: [],
-      keyword: '',
-      swiperList: [
-        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-      ],
-      homeData: {
-        categories: [],
-        nears: [],
-        recommends: [],
-      },
-    };
-  },
+	export default {
+		components: {
+			RecommendItem,
+			HotItem,
+			dragButton,
+		},
+		data() {
+			return {
+				list: [],
+				keyword: '',
+				swiperList: [
+					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+				],
+				homeData: {
+					categories: [],
+					nears: [],
+					recommends: [],
+				},
+			};
+		},
 
-  computed: {
-    ...mapGetters(['location']),
-    categories() {
-      let initData = this.homeData.categories.map(item => {
-        if (!item.icon) {
-          item.icon = 'level';
-        }
-        return item;
-      });
-      let result =
-        initData.length > 14
-          ? initData.splice(0, 14).concat([
-              {
-                id: 'all',
-                icon: 'grid-fill',
-                name: '全部',
-                type: {
-                  code: 'ALL',
-                  description: '全部',
-                },
-              },
-            ])
-          : initData.push({
-              id: 'all',
-              icon: 'grid-fill',
-              name: '全部',
-            });
-      return result;
-    },
-  },
+		computed: {
+			...mapGetters(['location']),
+			categories() {
+				let initData = this.homeData.categories.map(item => {
+					if (!item.icon) {
+						item.icon = 'level';
+					}
+					return item;
+				});
+				let result =
+					initData.length > 14 ?
+					initData.splice(0, 14).concat([{
+						id: 'all',
+						icon: 'grid-fill',
+						name: '全部',
+						type: {
+							code: 'ALL',
+							description: '全部',
+						},
+					}, ]) :
+					initData.push({
+						id: 'all',
+						icon: 'grid-fill',
+						name: '全部',
+					});
+				return result;
+			},
+		},
 
-  watch: {
-    location: {
-      handler: async function (newVal, oldVal) {
-        const result = await getCurrentLocation(newVal);
-        const param = Object.assign(
-          {},
-          {
-            region: result.data.id,
-          },
-          newVal,
-        );
-        this.getHomeData(param);
-      },
-    },
-  },
+		watch: {
+			location: {
+				handler: async function(newVal, oldVal) {
+					const result = await getCurrentLocation(newVal);
+					const param = Object.assign({}, {
+							region: result.data.id,
+						},
+						newVal,
+					);
+					this.getHomeData(param);
+				},
+			},
+		},
 
-  //页面加载
-  async onLoad() {
-    setTimeout(() => {
-      this.list = new Array(10000).fill(1);
-    }, 5000);
-    uni.getLocation({
-      type: 'gcj02',
-      success: res => {
-        this.location.longitude = res.longitude;
-        this.location.latitude = res.latitude;
-        this.$store.commit('SET_LOCATION', {
-          longitude: res.longitude,
-          latitude: res.latitude,
-        });
-      },
-      fail: () => {
-        this.manualGetLocation();
-      },
-    });
-  },
+		//页面加载
+		async onLoad() {
+			setTimeout(() => {
+				this.list = new Array(10000).fill(1);
+			}, 5000);
+			uni.getLocation({
+				type: 'gcj02',
+				success: res => {
+					this.location.longitude = res.longitude;
+					this.location.latitude = res.latitude;
+					this.$store.commit('SET_LOCATION', {
+						longitude: res.longitude,
+						latitude: res.latitude,
+					});
+				},
+				fail: () => {
+					this.manualGetLocation();
+				},
+			});
+		},
 
-  methods: {
-    //轮播图切换
-    change() {},
+		methods: {
+			//轮播图切换
+			change() {},
 
-    //轮播图点击
-    click(name) {
-      this.$refs.uToast.success(`点击了第${name}个`);
-    },
+			//轮播图点击
+			click(name) {
+				this.$refs.uToast.success(`点击了第${name}个`);
+			},
 
-    // 获取首页数据
-    getHomeData(location) {
-      getHomePageApi(location)
-        .then(res => {
-          this.homeData = res.data;
-          // 将分类数据做缓存处理
-          this.$store.commit('SET_CATEGORIES', this.homeData.categories);
-        })
-        .catch(err => {});
-    },
+			// 获取首页数据
+			getHomeData(location) {
+				getHomePageApi(location)
+					.then(res => {
+						this.homeData = res.data;
+						// 将分类数据做缓存处理
+						this.$store.commit('SET_CATEGORIES', this.homeData.categories);
+					})
+					.catch(err => {});
+			},
 
-    // 手动选择城市
-    manualGetLocation() {
-      uni.chooseLocation({
-        success: res => {
-          this.$store.commit('SET_LOCATION', {
-            longitude: res.longitude,
-            latitude: res.latitude,
-          });
-        },
-      });
-    },
+			// 手动选择城市
+			manualGetLocation() {
+				uni.chooseLocation({
+					success: res => {
+						this.$store.commit('SET_LOCATION', {
+							longitude: res.longitude,
+							latitude: res.latitude,
+						});
+					},
+				});
+			},
 
-    // 点击菜单
-    handleMenuClick(item) {
-      if (item.id === 'all') {
-        this.$Router.push('/pages/client/clientPackage/category');
-      } else {
-        uni.navigateTo({
-          url: `/pages/client/clientPackage/storeList?id=${item.id}`,
-        });
-      }
-    },
+			// 点击菜单
+			handleMenuClick(item) {
+				if (item.id === 'all') {
+					this.$Router.push('/pages/client/clientPackage/category');
+				} else {
+					uni.navigateTo({
+						url: `/pages/client/clientPackage/storeList?id=${item.id}`,
+					});
+				}
+			},
 
-    /* 询价 */
-    btnClick() {
-      // uni.chooseImage({
-      //   count: 9,
-      //   sizeType: ['original', 'compressed'],
-      //   sourceType: ['camera', 'album'],
-      //   success: res => {
-      //     const tempFilePaths = res.tempFilePaths;
-      //     this.uploadFileAlbum();
-      //   },
-      // });
+			/* 询价 */
+			btnClick() {
+				// uni.chooseImage({
+				//   count: 9,
+				//   sizeType: ['original', 'compressed'],
+				//   sourceType: ['camera', 'album'],
+				//   success: res => {
+				//     const tempFilePaths = res.tempFilePaths;
+				//     this.uploadFileAlbum();
+				//   },
+				// });
 
-      uni.navigateTo({
-        url: `/pages/client/clientUser/inquiry`,
-      });
-    },
+				uni.navigateTo({
+					url: `/pages/client/clientUser/inquiry`,
+				});
+			},
 
-    uploadFileAlbum() {
-      uni.uploadFile({
-        url: '', //服务器地址
-        fileType: 'image', //ZFB必填,不然报错
-        filePath: tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
-        name: 'imgFile',
-        success: uploadFileRes => {
-          let imgData = JSON.parse(uploadFileRes.data);
-          this.imgDataUrl = imgData.data.imgUrl;
-        },
-      });
-    },
-  },
-};
+			uploadFileAlbum() {
+				uni.uploadFile({
+					url: '', //服务器地址
+					fileType: 'image', //ZFB必填,不然报错
+					filePath: tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
+					name: 'imgFile',
+					success: uploadFileRes => {
+						let imgData = JSON.parse(uploadFileRes.data);
+						this.imgDataUrl = imgData.data.imgUrl;
+					},
+				});
+			},
+		},
+	};
 </script>
 
 <style lang="scss" scoped>
-.home {
-  background-color: #f0efef;
+	.home {
+		background-color: #f0efef;
 
-  .nav-bar {
-    ::v-deep .u-navbar__content {
-      background-color: #ffffff;
-    }
-  }
-}
+		.nav-bar {
+			::v-deep .u-navbar__content {
+				background-color: #ffffff;
+			}
+		}
+	}
 
-/* 头部搜索栏 */
-.home-header {
-  display: flex;
-  align-items: center;
-  height: 90rpx;
-  line-height: 90rpx;
-  padding: 0 20rpx;
-  background-color: #ffffff;
+	/* 头部搜索栏 */
+	.home-header {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
+		line-height: 90rpx;
+		padding: 0 20rpx;
+		background-color: #ffffff;
 
-  .goto-address {
-    display: flex;
-    align-items: center;
+		.goto-address {
+			display: flex;
+			align-items: center;
 
-    .icon-sanjiaoxing1 {
-      font-size: 24rpx;
-      margin: 17rpx 10rpx 0 6rpx;
-    }
-  }
+			.icon-sanjiaoxing1 {
+				font-size: 24rpx;
+				margin: 17rpx 10rpx 0 6rpx;
+			}
+		}
 
-  .search-item {
-    flex: 1;
-  }
-}
+		.search-item {
+			flex: 1;
+		}
+	}
 
-/* 轮播图 */
-.home-swiper {
-  padding: 20rpx;
-  margin-bottom: 10rpx;
-}
+	/* 轮播图 */
+	.home-swiper {
+		padding: 20rpx;
+		margin-bottom: 10rpx;
+	}
 
-/* 商品分类 */
-.home-list {
-  background-color: #ffffff;
-  height: 360rpx;
-  margin: 0 20rpx 20rpx 20rpx;
-  padding: 20rpx 0 50rpx 0;
-  border-radius: 10rpx;
+	/* 商品分类 */
+	.home-list {
+		background-color: #ffffff;
+		height: 360rpx;
+		margin: 0 20rpx 20rpx 20rpx;
+		padding: 20rpx 0 50rpx 0;
+		border-radius: 10rpx;
 
-  .grid-text {
-    font-size: 12px;
-    color: #909399;
-    padding: 10rpx 0 20rpx 0rpx;
-    box-sizing: border-box;
-  }
-}
+		.grid-text {
+			font-size: 12px;
+			color: #909399;
+			padding: 10rpx 0 20rpx 0rpx;
+			box-sizing: border-box;
+		}
+	}
 
-/* 热门推荐 */
-.hot {
-  ::v-deep .u-cell__body {
-    padding: 10rpx 20rpx;
+	/* 热门推荐 */
+	.hot {
+		::v-deep .u-cell__body {
+			padding: 10rpx 20rpx;
 
-    .hot-title {
-      border-left: 4px solid $uni-color-primary;
-      padding-left: 20rpx;
-    }
-  }
-}
+			.hot-title {
+				border-left: 4px solid $uni-color-primary;
+				padding-left: 20rpx;
+			}
+		}
+	}
 
-.near {
-  ::v-deep .u-cell__body {
-    padding: 10rpx 20rpx;
+	.near {
+		::v-deep .u-cell__body {
+			padding: 10rpx 20rpx;
 
-    .near-title {
-      border-left: 4px solid $uni-color-primary;
-      padding-left: 20rpx;
-    }
-  }
-}
-</style>
+			.near-title {
+				border-left: 4px solid $uni-color-primary;
+				padding-left: 20rpx;
+			}
+		}
+	}
+</style>

src/pages/client/tabBar/mine.vue

@@ -84,7 +84,7 @@
     <!-- 预约列表 -->
     <view class="appointList">
       <u-cell icon="setting-fill" title="预约列表" isLink url="/pages/client/clientUser/appoint" />
-      <u-cell icon="setting-fill" title="我的店铺" isLink url="" />
+      <u-cell icon="setting-fill" title="我的店铺" isLink  />
     </view>
 
     <view class="other-out-box">

src/store/index.js

@@ -4,6 +4,7 @@ import getters from './getters';
 import login from './modules/login';
 import user from './modules/user';
 import data from './modules/data';
+import order from './modules/order'
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
@@ -12,6 +13,7 @@ const store = new Vuex.Store({
     login,
     user,
     data,
+	order
   },
 });
 

src/store/modules/order.js

@@ -0,0 +1,12 @@
+export default{
+	namespaced:true,
+	state:{
+		order_list:null
+	},
+	mutations:{
+		// 获取订单信息
+		GET_ORDER_LIST(state,value){
+			state.order_list = value
+		}
+	}
+}