ui 提交

src/PageMine/favourite - 副本.vue

@@ -0,0 +1,146 @@
+<template>
+  <view class="collect">
+    <view class="collect_list">
+      <u-tabs :list="listCollect" @click="clickCollect" lineWidth="30" lineColor="#5992bb" :activeStyle="{
+          color: '#303133',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)',
+        }" :inactiveStyle="{
+          color: '#606266',
+          transform: 'scale(1)',
+        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
+    </view>
+    <view>
+      <view v-if="init_list.length > 0">
+        <view class="text">以下是您收藏的商品服务</view>
+        <!-- 收藏的服务 -->
+        <serviceItem v-if="indexs == 0" :item="init_list" @uploadIniList="uploadIniList"></serviceItem>
+        <goodsItem v-else :item="init_list" @uploadIniList="uploadIniList" />
+      </view>
+      <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
+    </view>
+  </view>
+</template>
+
+<script>
+  import serviceItem from '@/components/service/serviceItem.vue';
+  import goodsItem from "./components/goodsItem"
+  import { maintainFavoritePaging, getFavouriteGoods } from '@/api/client/mine.js';
+  import { getCurrentLocation } from '@/api/client/home';
+  import { mapGetters } from "vuex"
+  export default {
+    components: {
+      serviceItem,
+      goodsItem
+    },
+    data() {
+      return {
+        queryParams: {
+          size: 10,
+          type: 'MERCHANT',
+          region: null, //地区编码
+          longitude: null , //经度
+          latitude: null, //纬度
+        },
+        init_list: [],
+        listCollect: [{
+            id: 1,
+            name: '商家',
+          },
+          {
+            id: 1,
+            name: '服务',
+          },
+        ],
+        indexs: 0,
+
+      };
+    },
+	mounted() {
+	  let { latitude , longitude , region } = this.location
+	  this.queryParams.latitude = latitude
+	  this.queryParams.longitude = longitude
+	  this.queryParams.region = region
+	  this.handlerInitList();
+	},
+	computed:{
+		  ...mapGetters(['location'])
+	},
+    methods: {
+      // 初始化商家列表信息
+      handlerInitList() {
+        maintainFavoritePaging(this.queryParams).then(res => {
+          if (res.code === 'OK' && res.data) {
+            res.data.map(rs => {
+              this.init_list.push(rs.simpleMerchantVO);
+            });
+          } else {
+            uni.showToast({
+              title: '数据请求失败',
+              icon: 'none',
+            });
+          }
+        });
+      },
+      // 初始化服务列表
+      handlerInitGoodsList() {
+        getFavouriteGoods().then(res => {
+          if (res.code === 'OK' && res.data) {
+            res.data.map(rs => {
+              this.init_list.push(rs.goods);
+            });
+          } else {
+            uni.showToast({
+              title: '数据请求失败',
+              icon: 'none',
+            });
+          }
+        });
+      },
+      clickCollect(e) {
+        this.init_list = []
+        this.indexs = e.index
+        switch (e.index) {
+          case 0:
+            this.handlerInitList()
+            break;
+          case 1:
+            this.handlerInitGoodsList()
+            break;
+        }
+      },
+      uploadIniList(e) {
+        this.init_list = []
+        if (e == 1) {
+          this.handlerInitGoodsList()
+          this.indexs = 1
+        } else {
+          this.handlerInitList()
+          this.indexs = 0
+        }
+      }
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .collect {
+    min-height: 100vh;
+    background-color: #efefef;
+
+    &_list {
+      display: flex;
+      height: 70rpx;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      margin-bottom: 40rpx;
+    }
+
+    .text {
+      text-align: center;
+      padding: 40rpx;
+      color: #999;
+    }
+  }
+</style>

src/PageMine/favourite.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="collect">
-    <view class="collect_list">
+  <view class='container' @click='handlerClearPop'>
+    <view class="collect-list">
       <u-tabs :list="listCollect" @click="clickCollect" lineWidth="30" lineColor="#5992bb" :activeStyle="{
           color: '#303133',
           fontWeight: 'bold',
@@ -10,39 +10,38 @@
           transform: 'scale(1)',
         }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
     </view>
-    <view>
-      <view v-if="init_list.length > 0">
-        <view class="text">以下是您收藏的商品服务</view>
-        <!-- 收藏的服务 -->
-        <serviceItem v-if="indexs == 0" :item="init_list" @uploadIniList="uploadIniList"></serviceItem>
-        <goodsItem v-else :item="init_list" @uploadIniList="uploadIniList" />
+
+    <u-divider text="以下是您收藏的商家"></u-divider>
+
+    <view class='favoutire-box'>
+      <view class='item-box' v-for="(item,index) of init_list" :key='index'>
+        <view class='item-left'>
+          <image src='@/static/QR57a.jpg' class='img'></image>
+        </view>
+        <view class='item-right'>
+          <view class='name'>{{ item.name }}</view>
+          <view class='favourite'>{{ item.favouriteNumb }}人收藏</view>
+          <view class='price-box'>
+            <view class="price-left">¥{{ item.price }}</view>
+            <view class="price-right" @click.stop='handlerShowPop(item,index)'>
+              <u-icon name="more-dot-fill" color="#000" size="16"></u-icon>
+            </view>
+            <view class="pop-box" v-show="item.show">
+              <view class="pop-item" @click='handlerSkipShow(item,index)'>进店逛逛</view>
+              <view class="pop-item" @click='handlerDeleteItem(item,index)'>删除</view>
+            </view>
+          </view>
+        </view>
       </view>
-      <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
     </view>
+
   </view>
 </template>
 
 <script>
-  import serviceItem from '@/components/service/serviceItem.vue';
-  import goodsItem from "./components/goodsItem"
-  import { maintainFavoritePaging, getFavouriteGoods } from '@/api/client/mine.js';
-  import { getCurrentLocation } from '@/api/client/home';
-  import { mapGetters } from "vuex"
   export default {
-    components: {
-      serviceItem,
-      goodsItem
-    },
     data() {
       return {
-        queryParams: {
-          size: 10,
-          type: 'MERCHANT',
-          region: null, //地区编码
-          longitude: null , //经度
-          latitude: null, //纬度
-        },
-        init_list: [],
         listCollect: [{
             id: 1,
             name: '商家',
@@ -52,83 +51,89 @@
             name: '服务',
           },
         ],
-        indexs: 0,
-
-      };
+        init_list: [{
+            name: '测试店铺1',
+            favouriteNumb: 120,
+            price: 85,
+            show: false
+          },
+          {
+            name: '测试店铺2',
+            favouriteNumb: 5201,
+            price: 96,
+            show: false
+          },
+          {
+            name: '测试店铺3',
+            favouriteNumb: 12,
+            price: 41,
+            show: false
+          },
+        ],
+        indexs: 0
+      }
     },
-	mounted() {
-	  let { latitude , longitude , region } = this.location
-	  this.queryParams.latitude = latitude
-	  this.queryParams.longitude = longitude
-	  this.queryParams.region = region
-	  this.handlerInitList();
-	},
-	computed:{
-		  ...mapGetters(['location'])
-	},
     methods: {
-      // 初始化商家列表信息
-      handlerInitList() {
-        maintainFavoritePaging(this.queryParams).then(res => {
-          if (res.code === 'OK' && res.data) {
-            res.data.map(rs => {
-              this.init_list.push(rs.simpleMerchantVO);
-            });
-          } else {
-            uni.showToast({
-              title: '数据请求失败',
-              icon: 'none',
-            });
-          }
-        });
-      },
-      // 初始化服务列表
-      handlerInitGoodsList() {
-        getFavouriteGoods().then(res => {
-          if (res.code === 'OK' && res.data) {
-            res.data.map(rs => {
-              this.init_list.push(rs.goods);
-            });
-          } else {
-            uni.showToast({
-              title: '数据请求失败',
-              icon: 'none',
-            });
-          }
-        });
-      },
       clickCollect(e) {
-        this.init_list = []
+        // this.init_list = []
         this.indexs = e.index
         switch (e.index) {
           case 0:
-            this.handlerInitList()
+            // this.handlerInitList()
             break;
           case 1:
-            this.handlerInitGoodsList()
+            // this.handlerInitGoodsList()
             break;
         }
       },
-      uploadIniList(e) {
-        this.init_list = []
-        if (e == 1) {
-          this.handlerInitGoodsList()
-          this.indexs = 1
-        } else {
-          this.handlerInitList()
-          this.indexs = 0
-        }
+      // 点击显示
+      handlerShowPop(item, index) {
+        this.init_list.map(rs => {
+          if (rs.show) {
+            rs.show = false
+          }
+        })
+        item.show = true
+      },
+      // 清除showPop
+      handlerClearPop() {
+        this.init_list.map(rs => {
+          if (rs.show) {
+            rs.show = false
+            console.log("@@@@rs", rs)
+          }
+        })
+        console.log("@@@@@@@")
+      },
+      // 进店逛逛
+      handlerSkipShow() {
+        uni.showToast({
+          title: '进店',
+          icon: 'none'
+        })
+      },
+      // 删除
+      handlerDeleteItem() {
+        uni.showToast({
+          title: '删除',
+          icon: 'none'
+        })
       }
-    },
-  };
+    }
+  }
 </script>
 
-<style lang="scss" scoped>
-  .collect {
+<style lang='scss' scope>
+  page {
+    background-color: #F9F9F9;
+  }
+
+  .container {
+    font-size: 28rpx;
+    width: 100%;
     min-height: 100vh;
-    background-color: #efefef;
 
-    &_list {
+    .collect-list {
       display: flex;
       height: 70rpx;
       justify-content: center;
@@ -137,10 +142,84 @@
       margin-bottom: 40rpx;
     }
 
-    .text {
+    .notic-b {
       text-align: center;
-      padding: 40rpx;
-      color: #999;
+      margin: 24rpx 0;
+    }
+
+    .favoutire-box {
+      padding: 0 32rpx;
+      width: calc(100% - 64rpx);
+
+      .item-box {
+        display: flex;
+        background-color: #fff;
+        width: 100%;
+        margin-bottom: 24rpx;
+        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
+
+        .item-left {
+          .img {
+            width: 160rpx;
+            height: 160rpx;
+            border-radius: 16px;
+          }
+        }
+
+        .item-right {
+          width: calc(100% - 180rpx);
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          .name {
+            color: #333333;
+          }
+
+          .favourite {
+            color: #999999;
+            font-size: 24rpx;
+          }
+
+          .price-box {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+
+            .price-left {
+              color: #EB3636;
+              font-weight: bold;
+            }
+
+            .price-right {}
+
+            .pop-box {
+              width: 166rpx;
+              position: absolute;
+              right: -4%;
+              bottom: -340%;
+              padding: 24rpx;
+              border-radius: 16rpx;
+              background-color: #fff;
+              box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
+
+              .pop-item {
+                text-align: center;
+                margin-bottom: 16rpx;
+              }
+
+              .pop-item:last-child {
+                margin: 0;
+              }
+            }
+          }
+        }
+      }
+
+      .item-box:last-child {
+        margin: 0;
+      }
     }
   }
 </style>

src/PageMine/goodsReserve - 副本.vue

@@ -0,0 +1,154 @@
+<template>
+  <view class="container">
+    <view class="appoint" :key="index" v-for="(item, index) of init_list">
+      <view class="appoint-list">
+        <view class="appoint-title">{{ item.simpleMerchantVO.name }}</view>
+        <view class="appoint-address"></view>
+        <view class="appoint-flex">
+          <image class="img" :src=" item.simpleMerchantVO.logo" mode="scaleToFill"></image>
+          <view class="appoint-text">
+            <view>{{ item.goodsName }}</view>
+            <view>时间：{{ $u.timeFormat(item.appointTime) }}</view>
+            <view>联系方式：{{ item.mobile }}</view>
+          </view>
+        </view>
+        <view class="appoint-goto">
+          <u-button class="detail" text="详情" @click="handlerSkipGoodsDetail(item, index)"></u-button>
+          <u-button class="cancel" text="取消" @click="handlerClearItem(item, index)"></u-button>
+        </view>
+      </view>
+    </view>
+    <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
+    </u-empty>
+  </view>
+</template>
+
+<script>
+  import {
+    maintainReservations
+  } from '@/api/client/mine.js';
+  import {
+    cancelReservation
+  } from '@/api/client/business.js';
+  export default {
+    data() {
+      return {
+        queryParams: {
+          size: 10,
+        },
+        init_list: [], //初始化列表
+      };
+    },
+    mounted() {
+      this.handlerInitList();
+    },
+    methods: {
+      // 初始化列表
+      handlerInitList() {
+        maintainReservations(this.queryParams).then(res => {
+          this.init_list = res.data;
+        });
+      },
+      // 点击取消商品
+      handlerClearItem(item) {
+        cancelReservation(item.id).then(res => {
+          if (res.code === 'OK') {
+            uni.showToast({
+              title: '取消成功',
+              icon: 'none',
+            });
+            this.handlerInitList();
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            });
+            return;
+          }
+        });
+      },
+      // 点击跳转到商品详情
+      handlerSkipGoodsDetail(item, index) {
+        uni.navigateTo({
+          // url: `/pages/client/clientPackage/serviceDetail/index?id=${item.merchantId}`,
+          url: `/pagesHome/marketer/productDetail?id=${item.goodsId}&shopId=${item.merchantId}`,
+        });
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #efefef;
+  }
+
+  .container {
+    padding: 20rpx;
+  }
+
+  .appoint {
+    .history {
+      font-size: 38rpx;
+      margin: 20rpx 10rpx;
+      font-weight: bold;
+    }
+  }
+
+  .appoint-list {
+    padding: 20rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
+    border-radius: 20rpx;
+
+    .appoint-title {
+      font-size: 38rpx;
+      font-weight: bold;
+      margin-bottom: 10rpx;
+      color: #090909;
+    }
+
+    .appoint-address {
+      font-size: 32rpx;
+      margin: 20rpx;
+      padding-bottom: 20rpx;
+      color: #000000;
+      border-bottom: 2rpx solid #e5e5e5;
+    }
+
+    .appoint-flex {
+      display: flex;
+
+      .img {
+        width: 210rpx;
+        height: 160rpx;
+        display: block;
+        margin-right: 15rpx;
+      }
+
+      .appoint-text {
+        font-size: 28rpx;
+
+        >view {
+          margin-bottom: 26rpx;
+        }
+      }
+    }
+
+    .appoint-goto {
+      display: flex;
+
+      .detail,
+      .cancel {
+        width: 45%;
+        border-radius: 20rpx;
+      }
+
+      .detail {
+        background-color: #6c9fc3;
+        color: #fff;
+      }
+    }
+  }
+</style>

src/PageMine/orderModules/index - 副本.vue

@@ -0,0 +1,339 @@
+<template>
+	<view class="container">
+		<u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
+			<u-tabs lineWidth="40" :list="list" :current="current" @change="handlerChangeItem"
+				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
+		</u-sticky>
+
+		<!-- 订单 -->
+		<view class="order">
+			<view class="order-box">
+				<view class="order-item" v-for="(item, index) of init_list" :key="index">
+					<view class="" @click="handlerSkipDetail(item)">
+						<view class="item-top">
+							<view class="top-left gray-color">订单编号 : {{ item.orderSn }}</view>
+							<view class="top-right">{{ type_name }}</view>
+						</view>
+						<view class="item-top">
+							<view class="top-left gray-color">支付时间 : {{ item.createTimeText }}</view>
+							<view class="top-right"></view>
+						</view>
+					</view>
+
+					<u-line margin="20rpx 0"></u-line>
+
+					<view class="item-center" :key="idx" v-for="(itm, idx) of item.goodsInfo">
+						<view class="center-left">
+							<image :src="itm.goodsPic" class="img"></image>
+						</view>
+						<view class="center-right">
+							<view class="r-l">
+								<view class="right-name"> {{ itm.goodsName }} </view>
+								<view class="right-descript"> 测试商品描述111 </view>
+								<view class="l-box">
+									<view class="right-price"> ￥{{ itm.goodsPrice }} </view>
+									<view class="right-numb"> ×{{ itm.goodsQuantity }} </view>
+								</view>
+							</view>
+							<view class="r-r">
+								<view class="r-item" @click.stop="handlerSkipComment(item, itm)"
+									v-if="type == 4 && itm.assessStatus == 0">
+									<u-icon name="chat" color="#000" size="28"></u-icon>
+									<span>评价</span>
+								</view>
+							</view>
+						</view>
+					</view>
+
+					<u-line margin="20rpx 0" dashed="true"></u-line>
+
+					<view class="item-allnumb-box">
+						<view class="allnumb-left"> {{ item.allNumb }}件商品 </view>
+						<view class="allnumb-right">
+							<span class="r-text">共计</span>￥{{ item.allPrice }}
+						</view>
+					</view>
+
+					<view class="item-bottom">
+						<button class="btn" v-if="current == 0" @click='handlerCancelOrder(item)'>取消订单</button>
+						<!-- <button class="btn" v-if='current == 1' @click='handlerOrderBtn(1)'>申请退款</button> -->
+						<!-- <button class="btn" v-if='current == 2' @click='handlerOrderBtn(2)'>售后</button> -->
+					</view>
+				</view>
+			</view>
+			<view v-if="init_list.length == 0" style="margin-top: 40rpx">
+				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		userOrdersApi,
+		getUserOrderList,
+		cancelOrder
+	} from '@/api/client/order';
+	export default {
+		data() {
+			return {
+				current: 0,
+				type: 0,
+				type_name: '',
+				size: 20,
+				// 订单状态：0->待付款；1->已付款；2->已发货；3->已完成；4->已关闭；5->无效订单
+				list: [{
+						name: '待付款',
+						type: 0,
+					},
+					{
+						name: '已付款',
+						type: 1,
+					},
+					// {
+					// 	name: '待发货',
+					// 	type: 2,
+					// },
+					// {
+					// 	name: '已发货',
+					// 	type: 3,
+					// },
+					{
+						name: '已完成',
+						type: 3,
+					},
+					{
+						name: '已关闭',
+						type: 4,
+					}
+					// ,
+					//       {
+					//         name: '无效订单',
+					//         type: 5,
+					//       },
+				],
+				init_list: [],
+			};
+		},
+		mounted() {
+			// this.userOrdersPage();
+		},
+		onShow() {
+			let cur = this.$store.state.order.skip_order_type.type;
+			switch (cur) {
+				case 0:
+					this.current = 0;
+					this.userOrdersPage(cur);
+					break;
+				case 1:
+					this.current = 2;
+					this.userOrdersPage(cur);
+					break;
+				case 2:
+					this.current = 3;
+					this.userOrdersPage(cur);
+					break;
+			}
+		},
+		computed: {
+			allNumber() {
+				this.init_list.map(rs => {
+					let sum = 0;
+					let price = 0;
+					rs.goodsInfo.map(rc => {
+						sum += rc.goodsQuantity;
+						price += rc.goodsPrice;
+					});
+					rs.allNumb = sum;
+					rs.allPrice = price;
+				});
+				return;
+			},
+		},
+		methods: {
+			handlerChangeItem(data) {
+				this.current = data.index;
+				this.type = data.type;
+				this.type_name = data.name;
+				this.userOrdersPage(this.type);
+			},
+
+			async userOrdersPage(type) {
+				let orderStatus = type == undefined ? 0 : `${type}`;
+				let res = await getUserOrderList({
+					status: orderStatus,
+					paging: '1,20',
+				});
+				if ((res.code = 200 && res.data)) {
+					this.init_list = res.data.records;
+					this.init_list.map(rs => {
+						rs.createTimeText = uni.$u.timeFormat(rs.createTime, 'yyyy-mm-dd hh:MM:ss');
+					})
+				}
+			},
+
+			// 跳转到订单详情
+			handlerSkipDetail(e) {
+				uni.navigateTo({
+					url: `/PageMine/orderModules/orderDetail?orderList=${JSON.stringify(e)}`,
+				});
+			},
+			// 取消订单
+			handlerCancelOrder(e) {
+				cancelOrder(e.id).then(res => {
+					if (res.code == 'OK') {
+						uni.showToast({
+							title: '订单取消成功',
+							icon: 'none',
+						});
+						this.userOrdersPage(this.type);
+					} else {
+						uni.showToast({
+							title: res.message,
+							icon: 'none',
+						});
+						return
+					}
+				});
+			},
+			// 点击跳转到商品评价
+			handlerSkipComment(item, itm) {
+				uni.navigateTo({
+					url: `/PageMine/orderModules/orderComment?orderList=${JSON.stringify(item)}&goodsList=${JSON.stringify(itm)}`,
+				});
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.order {
+		margin-top: 10px;
+		padding: 10rpx 20rpx 20rpx;
+		box-sizing: border-box;
+
+		.order-box {
+			.order-item {
+				margin-bottom: 20rpx;
+				background-color: #fff;
+				border-radius: 20rpx;
+				padding: 20rpx;
+				box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
+
+				.item-top {
+					display: flex;
+					justify-content: space-between;
+					margin-bottom: 10rpx;
+				}
+
+				.item-center {
+					display: flex;
+					align-items: center;
+					margin-bottom: 10rpx;
+
+					.center-left {
+						height: 160rpx;
+
+						.img {
+							width: 160rpx;
+							height: 160rpx;
+						}
+					}
+
+					.center-right {
+						width: 100%;
+						height: 160rpx;
+						display: flex;
+						justify-content: space-between;
+						margin-left: 20rpx;
+
+						.r-l {
+							display: flex;
+							flex-direction: column;
+							justify-content: space-around;
+
+							.right-name {
+								color: #4d5671;
+								font-size: 32rpx;
+								font-weight: bold;
+							}
+
+							.right-descript {
+								font-size: 28rpx;
+								color: #858797;
+							}
+
+							.l-box {
+								display: flex;
+								font-size: 24rpx;
+								align-items: center;
+								font-style: italic;
+
+								.right-price {
+									margin-right: 20rpx;
+									font-weight: bold;
+									font-size: 28rpx;
+									color: #f57f32;
+								}
+
+								.right-numb {
+									font-size: 24rpx;
+									color: #858797;
+								}
+							}
+						}
+
+						.r-r {
+							.r-item {
+								align-items: center;
+							}
+						}
+					}
+				}
+
+				.item-allnumb-box {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-weight: bold;
+
+					.allnumb-left {
+						font-size: 32rpx;
+					}
+
+					.allnumb-right {
+						font-size: 26rpx;
+						color: #f57f32;
+
+						.r-text {
+							color: #000;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.item-bottom {
+		width: 100%;
+		margin-top: 20rpx;
+
+		.btn {
+			height: 70rpx;
+			background-color: rgba(248, 213, 53, 0.8);
+			color: #4e5059;
+			font-size: 28rpx;
+			text-align: center;
+			line-height: 70rpx;
+			border-radius: 20rpx;
+		}
+	}
+
+	.gray-color {
+		color: #858797;
+	}
+
+	::deep .u-tabs__wrapper__nav__item__text {
+		font-size: 30px;
+	}
+</style>

src/PageMine/orderModules/index.vue

@@ -1,339 +1,212 @@
 <template>
-	<view class="container">
-		<u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
-			<u-tabs lineWidth="40" :list="list" :current="current" @change="handlerChangeItem"
-				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
-		</u-sticky>
-
-		<!-- 订单 -->
-		<view class="order">
-			<view class="order-box">
-				<view class="order-item" v-for="(item, index) of init_list" :key="index">
-					<view class="" @click="handlerSkipDetail(item)">
-						<view class="item-top">
-							<view class="top-left gray-color">订单编号 : {{ item.orderSn }}</view>
-							<view class="top-right">{{ type_name }}</view>
-						</view>
-						<view class="item-top">
-							<view class="top-left gray-color">支付时间 : {{ item.createTimeText }}</view>
-							<view class="top-right"></view>
-						</view>
-					</view>
-
-					<u-line margin="20rpx 0"></u-line>
-
-					<view class="item-center" :key="idx" v-for="(itm, idx) of item.goodsInfo">
-						<view class="center-left">
-							<image :src="itm.goodsPic" class="img"></image>
-						</view>
-						<view class="center-right">
-							<view class="r-l">
-								<view class="right-name"> {{ itm.goodsName }} </view>
-								<view class="right-descript"> 测试商品描述111 </view>
-								<view class="l-box">
-									<view class="right-price"> ￥{{ itm.goodsPrice }} </view>
-									<view class="right-numb"> ×{{ itm.goodsQuantity }} </view>
-								</view>
-							</view>
-							<view class="r-r">
-								<view class="r-item" @click.stop="handlerSkipComment(item, itm)"
-									v-if="type == 4 && itm.assessStatus == 0">
-									<u-icon name="chat" color="#000" size="28"></u-icon>
-									<span>评价</span>
-								</view>
-							</view>
-						</view>
-					</view>
-
-					<u-line margin="20rpx 0" dashed="true"></u-line>
-
-					<view class="item-allnumb-box">
-						<view class="allnumb-left"> {{ item.allNumb }}件商品 </view>
-						<view class="allnumb-right">
-							<span class="r-text">共计</span>￥{{ item.allPrice }}
-						</view>
-					</view>
-
-					<view class="item-bottom">
-						<button class="btn" v-if="current == 0" @click='handlerCancelOrder(item)'>取消订单</button>
-						<!-- <button class="btn" v-if='current == 1' @click='handlerOrderBtn(1)'>申请退款</button> -->
-						<!-- <button class="btn" v-if='current == 2' @click='handlerOrderBtn(2)'>售后</button> -->
-					</view>
-				</view>
-			</view>
-			<view v-if="init_list.length == 0" style="margin-top: 40rpx">
-				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
-			</view>
-		</view>
-	</view>
+  <view class="container">
+    <u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
+      <u-tabs lineWidth="40" :list="list" :current="current"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
+    </u-sticky>
+
+    <view class='order-box'>
+      <view class="order-item" v-for="(item,index) of 3">
+        <view class="item-top">
+          <view class="top-left">
+            <image src="@/static/home/icon_home_detail_shop.png" class='img'></image>
+            <view class="left-name"> 聚鑫（途虎养车店）</view>
+          </view>
+          <view class="top-right"> 待付款 </view>
+        </view>
+
+        <view class="goods-item" v-for="item of 3">
+          <view class='item-left'>
+            <image src="@/static/QR57a.jpg" class='img'></image>
+          </view>
+          <view class='item-right'>
+            <view class="right-top">
+              38号轮胎38号轮胎38号轮胎38号轮胎38号轮号轮号轮胎
+            </view>
+            <view class="right-bottom">
+              <view class="bottom-left"> ¥20.00 </view>
+              <view class="bottom-right"> X1 </view>
+            </view>
+          </view>
+        </view>
+
+        <u-line margin='24rpx 0'></u-line>
+
+        <view class='price-box'>
+          <view class="price">需付款￥1559.9</view>
+        </view>
+
+        <view class="btn-box">
+          <button class='btn btn2'>继续付款</button>
+          <button class='btn btn1'>查看卷码</button>
+          <button class='btn btn2'>再来一单</button>
+          <button class='btn btn2'>退款进度</button>
+        </view>
+      </view>
+    </view>
+
+  </view>
 </template>
 
 <script>
-	import {
-		userOrdersApi,
-		getUserOrderList,
-		cancelOrder
-	} from '@/api/client/order';
-	export default {
-		data() {
-			return {
-				current: 0,
-				type: 0,
-				type_name: '',
-				size: 20,
-				// 订单状态：0->待付款；1->已付款；2->已发货；3->已完成；4->已关闭；5->无效订单
-				list: [{
-						name: '待付款',
-						type: 0,
-					},
-					{
-						name: '已付款',
-						type: 1,
-					},
-					// {
-					// 	name: '待发货',
-					// 	type: 2,
-					// },
-					// {
-					// 	name: '已发货',
-					// 	type: 3,
-					// },
-					{
-						name: '已完成',
-						type: 3,
-					},
-					{
-						name: '已关闭',
-						type: 4,
-					}
-					// ,
-					//       {
-					//         name: '无效订单',
-					//         type: 5,
-					//       },
-				],
-				init_list: [],
-			};
-		},
-		mounted() {
-			// this.userOrdersPage();
-		},
-		onShow() {
-			let cur = this.$store.state.order.skip_order_type.type;
-			switch (cur) {
-				case 0:
-					this.current = 0;
-					this.userOrdersPage(cur);
-					break;
-				case 1:
-					this.current = 2;
-					this.userOrdersPage(cur);
-					break;
-				case 2:
-					this.current = 3;
-					this.userOrdersPage(cur);
-					break;
-			}
-		},
-		computed: {
-			allNumber() {
-				this.init_list.map(rs => {
-					let sum = 0;
-					let price = 0;
-					rs.goodsInfo.map(rc => {
-						sum += rc.goodsQuantity;
-						price += rc.goodsPrice;
-					});
-					rs.allNumb = sum;
-					rs.allPrice = price;
-				});
-				return;
-			},
-		},
-		methods: {
-			handlerChangeItem(data) {
-				this.current = data.index;
-				this.type = data.type;
-				this.type_name = data.name;
-				this.userOrdersPage(this.type);
-			},
-
-			async userOrdersPage(type) {
-				let orderStatus = type == undefined ? 0 : `${type}`;
-				let res = await getUserOrderList({
-					status: orderStatus,
-					paging: '1,20',
-				});
-				if ((res.code = 200 && res.data)) {
-					this.init_list = res.data.records;
-					this.init_list.map(rs => {
-						rs.createTimeText = uni.$u.timeFormat(rs.createTime, 'yyyy-mm-dd hh:MM:ss');
-					})
-				}
-			},
-
-			// 跳转到订单详情
-			handlerSkipDetail(e) {
-				uni.navigateTo({
-					url: `/PageMine/orderModules/orderDetail?orderList=${JSON.stringify(e)}`,
-				});
-			},
-			// 取消订单
-			handlerCancelOrder(e) {
-				cancelOrder(e.id).then(res => {
-					if (res.code == 'OK') {
-						uni.showToast({
-							title: '订单取消成功',
-							icon: 'none',
-						});
-						this.userOrdersPage(this.type);
-					} else {
-						uni.showToast({
-							title: res.message,
-							icon: 'none',
-						});
-						return
-					}
-				});
-			},
-			// 点击跳转到商品评价
-			handlerSkipComment(item, itm) {
-				uni.navigateTo({
-					url: `/PageMine/orderModules/orderComment?orderList=${JSON.stringify(item)}&goodsList=${JSON.stringify(itm)}`,
-				});
-			},
-		},
-	};
+  export default {
+    data() {
+      return {
+        current: 0,
+        list: [{
+            name: '待付款',
+            type: 0,
+          },
+          {
+            name: '已付款',
+            type: 1,
+          },
+          {
+            name: '已完成',
+            type: 3,
+          },
+          {
+            name: '已关闭',
+            type: 4,
+          }
+
+        ],
+      };
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-	.order {
-		margin-top: 10px;
-		padding: 10rpx 20rpx 20rpx;
-		box-sizing: border-box;
-
-		.order-box {
-			.order-item {
-				margin-bottom: 20rpx;
-				background-color: #fff;
-				border-radius: 20rpx;
-				padding: 20rpx;
-				box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
-
-				.item-top {
-					display: flex;
-					justify-content: space-between;
-					margin-bottom: 10rpx;
-				}
-
-				.item-center {
-					display: flex;
-					align-items: center;
-					margin-bottom: 10rpx;
-
-					.center-left {
-						height: 160rpx;
-
-						.img {
-							width: 160rpx;
-							height: 160rpx;
-						}
-					}
-
-					.center-right {
-						width: 100%;
-						height: 160rpx;
-						display: flex;
-						justify-content: space-between;
-						margin-left: 20rpx;
-
-						.r-l {
-							display: flex;
-							flex-direction: column;
-							justify-content: space-around;
-
-							.right-name {
-								color: #4d5671;
-								font-size: 32rpx;
-								font-weight: bold;
-							}
-
-							.right-descript {
-								font-size: 28rpx;
-								color: #858797;
-							}
-
-							.l-box {
-								display: flex;
-								font-size: 24rpx;
-								align-items: center;
-								font-style: italic;
-
-								.right-price {
-									margin-right: 20rpx;
-									font-weight: bold;
-									font-size: 28rpx;
-									color: #f57f32;
-								}
-
-								.right-numb {
-									font-size: 24rpx;
-									color: #858797;
-								}
-							}
-						}
-
-						.r-r {
-							.r-item {
-								align-items: center;
-							}
-						}
-					}
-				}
-
-				.item-allnumb-box {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					font-weight: bold;
-
-					.allnumb-left {
-						font-size: 32rpx;
-					}
-
-					.allnumb-right {
-						font-size: 26rpx;
-						color: #f57f32;
-
-						.r-text {
-							color: #000;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.item-bottom {
-		width: 100%;
-		margin-top: 20rpx;
-
-		.btn {
-			height: 70rpx;
-			background-color: rgba(248, 213, 53, 0.8);
-			color: #4e5059;
-			font-size: 28rpx;
-			text-align: center;
-			line-height: 70rpx;
-			border-radius: 20rpx;
-		}
-	}
-
-	.gray-color {
-		color: #858797;
-	}
+  .container {
+    font-size: 28rpx;
+    padding: 0 0 30rpx;
+    .order-box {
+      margin-top: 18rpx;
+
+      .order-item {
+        padding: 34rpx 32rpx;
+        background-color: #fff;
+        margin-bottom: 18rpx;
+        .item-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 24rpx;
+
+          .top-left {
+            display: flex;
+            align-items: center;
+
+            .img {
+              width: 32rpx;
+              height: 32rpx;
+            }
+
+            .left-name {
+              margin-left: 8rpx;
+              font-weight: bold;
+            }
+          }
+
+          .top-right {
+            color: #ED4444;
+          }
+        }
+
+        .goods-item {
+          display: flex;
+          margin-bottom: 24rpx;
+          .item-left {
+            margin-right: 24rpx;
+
+            .img {
+              width: 160rpx;
+              height: 160rpx;
+              border-radius: 16rpx;
+            }
+          }
+
+          .item-right {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .right-top {
+              color: #333333;
+            }
+
+            .right-bottom {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .bottom-left {
+                color: #EB3636;
+                font-weight: bold;
+                font-size: 32rpx;
+              }
+
+              .bottom-right {
+                color: #616570;
+                font-size: 24rpx;
+              }
+            }
+          }
+        }
+        .goods-item:last-child{
+          margin:0;
+        }
+        .price-box {
+          display: flex;
+          justify-content: flex-end;
+          margin-bottom: 24rpx;
+          font-size: 30rpx;
+          font-weight: bold;
+        }
+
+        .btn-box {
+          display: flex;
+          justify-content: flex-end;
+
+          .btn {
+            padding: 0 24rpx;
+            border-radius: 8rpx;
+            box-sizing: border-box;
+            margin-right: 24rpx;
+            height: 60rpx;
+            line-height: 60rpx;
+            font-size: 28rpx;
+          }
+
+          .btn:last-child {
+            margin: 0;
+          }
+
+          .btn1 {
+            color: #616570;
+            border: 2rpx solid #616570;
+          }
+
+          .btn2 {
+            color: #215EBE;
+            border: 2rpx solid #215EBE;
+          }
+        }
+      }
+    }
+  }
+</style>
 
-	::deep .u-tabs__wrapper__nav__item__text {
-		font-size: 30px;
-	}
+<style scope>
+  ::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    justify-content: space-between;
+  }
+
+  /* //选中蓝色滑块对应 */
+  ::v-deep .u-tabs__wrapper__nav__item {
+    flex: 1 1 0% !important;
+  }
 </style>