style:样式优化

App.vue

@@ -1,106 +1,106 @@
 <script>
 export default {
-	data() {
-		return {
-			getOn: true,
-			globalData: {
-				shareList: []
-			}
-		};
-	},
-	onLaunch: function (param) {},
-	onShow: function () {
-		// #ifdef MP
-		// 检查是否升级
-		this.checkForUpdate();
-		// #endif
-		// 进入小程序，如果需要推送客服，请求客户信息，获取最新的微伴ID
-		if (this.$checkAccess.getFollowQrcode()) {
-			if (!this.getOn) return;
-			this.getOn = false;
-			// 判断数据
-			this.$http.request('api/custom/get_info').then((callback) => {
-				this.getOn = true;
-				if (callback.code == 'success') {
-					if (!callback.data.userpic) callback.data.userpic = '../../static/icon/doctor.png';
-					// 赋值
-					this.userInfo = callback.data;
-					// 存储登录标识
-					uni.setStorageSync('userInfo', callback.data);
-				}
-			});
-		}
-		// 判断数据
-		this.$http.request('/api/share_message/get_list').then((callback) => {
-			if (callback.code == 'success') {
-				// 赋值
-				getApp().globalData.shareList = callback.data;
-			}
-		});
-	},
-	onHide: function () {
-		console.log('App Hide');
-	},
-	methods: {
-		// 检查是否升级
-		checkForUpdate() {
-			const _this = this;
-			// 获取升级管理实例
-			const updateManager = uni.getUpdateManager();
-			// 请求版本回调
-			updateManager.onCheckForUpdate(function (res) {
-				console.log(res);
-				// 如果有版本升级
-				if (res && res.hasUpdate) {
-					uni.showModal({
-						title: '更新提示',
-						content: '检测到新版，点击确认升级程序',
-						showCancel: false,
-						success(res) {
-							if (res.confirm) {
-								uni.showLoading({ title: '程序更新中' });
-								// 判断是否准备好升级
-								updateManager.onUpdateReady(function (res) {
-									// 关闭加载
-									uni.hideLoading();
-									// 当新版本下载完成，调用该方法会强制当前uni-app应用上新版本并重启
-									updateManager.applyUpdate();
-								});
-								updateManager.onUpdateFailed(function (err) {
-									// 关闭加载
-									uni.hideLoading();
-								});
-							}
-						}
-					});
-				}
-			});
-		}
-	}
+  data() {
+    return {
+      getOn: true,
+      globalData: {
+        shareList: [],
+      },
+    };
+  },
+  onLaunch: function (param) {},
+  onShow: function () {
+    // #ifdef MP
+    // 检查是否升级
+    this.checkForUpdate();
+    // #endif
+    // 进入小程序，如果需要推送客服，请求客户信息，获取最新的微伴ID
+    if (this.$checkAccess.getFollowQrcode()) {
+      if (!this.getOn) return;
+      this.getOn = false;
+      // 判断数据
+      this.$http.request("api/custom/get_info").then((callback) => {
+        this.getOn = true;
+        if (callback.code == "success") {
+          if (!callback.data.userpic) callback.data.userpic = "../../static/icon/doctor.png";
+          // 赋值
+          this.userInfo = callback.data;
+          // 存储登录标识
+          uni.setStorageSync("userInfo", callback.data);
+        }
+      });
+    }
+    // 判断数据
+    this.$http.request("/api/share_message/get_list").then((callback) => {
+      if (callback.code == "success") {
+        // 赋值
+        getApp().globalData.shareList = callback.data;
+      }
+    });
+  },
+  onHide: function () {
+    console.log("App Hide");
+  },
+  methods: {
+    // 检查是否升级
+    checkForUpdate() {
+      const _this = this;
+      // 获取升级管理实例
+      const updateManager = uni.getUpdateManager();
+      // 请求版本回调
+      updateManager.onCheckForUpdate(function (res) {
+        console.log(res);
+        // 如果有版本升级
+        if (res && res.hasUpdate) {
+          uni.showModal({
+            title: "更新提示",
+            content: "检测到新版，点击确认升级程序",
+            showCancel: false,
+            success(res) {
+              if (res.confirm) {
+                uni.showLoading({ title: "程序更新中" });
+                // 判断是否准备好升级
+                updateManager.onUpdateReady(function (res) {
+                  // 关闭加载
+                  uni.hideLoading();
+                  // 当新版本下载完成，调用该方法会强制当前uni-app应用上新版本并重启
+                  updateManager.applyUpdate();
+                });
+                updateManager.onUpdateFailed(function (err) {
+                  // 关闭加载
+                  uni.hideLoading();
+                });
+              }
+            },
+          });
+        }
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less">
 /*每个页面公共css */
 page {
-	font-family: Arial, Helvetica, sans-serif;
-	background: #f5f5f5;
+  font-family: Arial, Helvetica, sans-serif;
+  background: #f5f5f5;
 }
 // 到底了
 .to_bottom {
-	height: 40rpx;
-	color: #999999;
-	display: block;
-	font-size: 20rpx;
-	margin-top: 20rpx;
-	line-height: 40rpx;
-	text-align: center;
-	padding-bottom: 160rpx;
+  height: 40rpx;
+  color: #999999;
+  display: block;
+  font-size: 20rpx;
+  margin-top: 20rpx;
+  line-height: 40rpx;
+  text-align: center;
+  padding-bottom: 160rpx;
 }
 
 .text-ellipsis {
-	white-space: nowrap; /* 不换行 */
-	overflow: hidden; /* 超出内容隐藏 */
-	text-overflow: ellipsis; /* 超出内容用省略号显示 */
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 超出内容隐藏 */
+  text-overflow: ellipsis; /* 超出内容用省略号显示 */
 }
 </style>

pages/car/index.vue

@@ -4,6 +4,7 @@
       <view v-for="(pItem, pIndex) in cartListByGroup" :key="pIndex">
         <view class="business_name" v-if="pItem.products.length !== 0">
           <image @click="selectBussiness(pIndex)" class="checkbox" :src="pItem.checked ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'"></image>&nbsp;
+          <image src="../../static/icon/shop_fill.png" class="business_icon" />
           {{ pItem.business_name }}
         </view>
         <view class="product_group">
@@ -378,7 +379,7 @@ export default {
   .business_name {
     padding: 8rpx 10rpx;
     border-bottom: 1px solid #f3f3f3;
-    font-size: 24rpx;
+    font-size: 32rpx;
     z-index: 1;
     display: flex;
     align-items: center;
@@ -387,6 +388,11 @@ export default {
       width: 40rpx;
       height: 40rpx;
     }
+    .business_icon {
+      width: 48rpx;
+      height: 48rpx;
+      margin-right: 10rpx;
+    }
   }
   .car_item {
     height: 180rpx;

pages/car/order.vue

@@ -18,7 +18,7 @@
     </view>
     <view class="car_list">
       <view v-for="(pItem, pIndex) in cartListByGroup" :key="pIndex">
-        <view class="business_name">{{ pItem.business_name }}</view>
+        <view class="business_name"><image src="../../static/icon/shop_fill.png" class="business_icon" />{{ pItem.business_name }}</view>
         <view class="car_item" v-for="(item, index) in pItem.products" :key="index">
           <view class="box_left">
             <image class="car_image" :src="item.thumb" mode=""></image>
@@ -588,10 +588,15 @@ export default {
   .business_name {
     padding: 8rpx 10rpx;
     border-bottom: 1px solid #f3f3f3;
-    font-size: 24rpx;
+    font-size: 32rpx;
     z-index: 1;
     display: flex;
     align-items: center;
+    .business_icon {
+      width: 48rpx;
+      height: 48rpx;
+      margin-right: 10rpx;
+    }
   }
   .car_item {
     height: 170rpx;

pages/orders/detail.vue

@@ -15,46 +15,43 @@
         >{{ order_datail.order_addr?.contact_province }} {{ order_datail.order_addr?.contact_city }} {{ order_datail.order_addr?.contact_area }} {{ order_datail.order_addr?.contact_addr }}</view
       >
     </view>
-    <view style="padding-bottom: 210rpx">
-      <view class="car_list">
-        <view class="business_name">{{ order_datail?.business_name }}</view>
+    <view class="car_list">
+      <view class="business_name"><image src="../../static/icon/shop_fill.png" class="business_icon" /> {{ order_datail?.business_name }}</view>
 
-        <view class="car_item" v-for="(item, index) in order_datail.order_items" :key="index" @click="_navToProduct(item.product_id)">
-          <view class="box_left">
-            <image class="car_image" :src="item.product_thumb" mode=""></image>
-          </view>
-          <view class="box_center">
-            <view class="car_name">{{ item.product_name }}</view>
-            <view class="car_spec">{{ item.product_spec }}</view>
-            <view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
-            <view class="car_price">
-              <text class="price">￥{{ item.pay_total }}</text>
-            </view>
+      <view class="car_item" v-for="(item, index) in order_datail.order_items" :key="index" @click="_navToProduct(item.product_id)">
+        <view class="box_left">
+          <image class="car_image" :src="item.product_thumb" mode=""></image>
+        </view>
+        <view class="box_center">
+          <view class="car_name">{{ item.product_name }}</view>
+          <view class="car_spec">{{ item.product_spec }}</view>
+          <view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
+          <view class="car_price">
+            <text class="price">￥{{ item.pay_total }}</text>
           </view>
-          <view class="box_right">
-            <view class="buy_num_box">
-              <view class="buy_num">共{{ item.buy_num }}件</view>
-            </view>
+        </view>
+        <view class="box_right">
+          <view class="buy_num_box">
+            <view class="buy_num">共{{ item.buy_num }}件</view>
           </view>
         </view>
       </view>
     </view>
 
     <view class="price_content">
-      <view class="price_content_title">价格明细</view>
       <view class="price_content_item">
         <view>订单总价</view>
-        <view>￥{{ order_datail?.price_total }}</view>
+        <view class="price">￥{{ order_datail?.price_total }}</view>
       </view>
       <view class="price_content_item">
         <view>优惠价格</view>
-        <view>￥-{{ order_datail?.coupon_total }}</view>
+        <view class="price">￥-{{ order_datail?.coupon_total }}</view>
       </view>
       <view class="price_content_item">
         <view>订单金额</view>
-        <view>￥{{ order_datail?.pay_total }}</view>
+        <view class="price">￥{{ order_datail?.pay_total }}</view>
       </view>
-      <view class="price_content_title">更多订单信息</view>
+      <view class="price_content_title"></view>
       <view class="price_content_item">
         <view>订单编号</view>
         <view>{{ order_datail?.order_code }}</view>
@@ -110,7 +107,7 @@ export default {
   font-size: 24rpx;
   overflow: hidden;
   line-height: 40rpx;
-  padding: 15rpx 10rpx;
+  padding: 20rpx 35rpx;
   border-radius: 15rpx;
   padding-bottom: 0rpx;
   margin-bottom: 10rpx;
@@ -131,7 +128,6 @@ export default {
     font-size: 24rpx;
     line-height: 30rpx;
     padding: 10rpx 5rpx;
-    border-bottom: 2rpx solid #dddddd;
   }
 }
 
@@ -141,13 +137,19 @@ export default {
   margin: 0rpx auto;
   margin-top: 20rpx;
   background: #ffffff;
+  margin-bottom: 20rpx;
   .business_name {
-    padding: 8rpx 10rpx;
+    padding: 8rpx 35rpx;
     border-bottom: 1px solid #f3f3f3;
-    font-size: 24rpx;
+    font-size: 32rpx;
     z-index: 1;
     display: flex;
     align-items: center;
+    .business_icon {
+      width: 48rpx;
+      height: 48rpx;
+      margin-right: 10rpx;
+    }
   }
   .car_item {
     height: 170rpx;
@@ -247,14 +249,13 @@ export default {
 
 .price_content {
   background-color: #fff;
-  position: fixed;
   bottom: var(--window-bottom);
-  padding: 16rpx 26rpx;
+  padding: 40rpx 35rpx 20rpx;
   width: 100%;
   box-sizing: border-box;
   .price_content_title {
-    font-weight: bold;
     margin-bottom: 20rpx;
+    border-bottom: 1px dashed #f3f3f3;
   }
   .price_content_item {
     margin-bottom: 20rpx;
@@ -262,6 +263,10 @@ export default {
     justify-content: space-between;
     align-items: center;
     font-size: 24rpx;
+    color: #00000073;
+    .price {
+      color: red;
+    }
   }
 }
 </style>

pages/orders/index.vue

@@ -7,29 +7,32 @@
       <view class="order_status_item" :class="requestParam.status == 8 ? 'active' : ''" @click="setStatus(8)"> 已完成 </view>
     </view>
     <view class="order_list" v-if="orderList.length">
-      <view class="order_item" v-for="(item, index) in orderList" :key="index" @click.stop="goDetail(item.id)">
-        <view class="order_title">
-          <view class="business_name">{{ item.business_name }}</view>
-          <view class="order_status">{{ item.state }}</view>
-        </view>
-        <view class="product_list" :class="item.contents_class ? 'active' : ''">
-          <view class="product_item" v-for="(product_info, k) in item.product_list" :key="k">
-            <image class="product_img" :src="product_info.product_thumb" mode=""></image>
-            <view class="product_info">
-              <view class="product_name"> <text v-if="product_info.is_rebate">【赠】</text> {{ product_info.product_name }} </view>
-              <view class="product_spec">
-                {{ product_info.product_spec }}
+      <view class="order_item" v-for="(item, index) in orderList" :key="index">
+        <view @click.stop="goDetail(item.id)">
+          <view class="order_title">
+            <view class="business_name"><image src="../../static/icon/shop_fill.png" class="business_icon" />{{ item.business_name }}</view>
+            <view class="order_status">{{ item.state }}</view>
+          </view>
+          <view class="product_list" :class="item.contents_class ? 'active' : ''">
+            <view class="product_item" v-for="(product_info, k) in item.product_list" :key="k">
+              <image class="product_img" :src="product_info.product_thumb" mode=""></image>
+              <view class="product_info">
+                <view class="product_name"> <text v-if="product_info.is_rebate">【赠】</text> {{ product_info.product_name }} </view>
+                <view class="product_spec">
+                  {{ product_info.product_spec }}
+                </view>
               </view>
+              <view class="buy_num"> x{{ product_info.buy_num }} </view>
             </view>
-            <view class="buy_num"> x{{ product_info.buy_num }} </view>
+          </view>
+          <view class="show_more" v-if="item.product_list.length > 1" @click.stop="changeHeight(index)">
+            <uni-icons :type="item.contents_class ? 'up' : 'down'"></uni-icons>
+          </view>
+          <view class="order_price">
+            <view class="pay_total">￥{{ item.pay_total }}</view>
           </view>
         </view>
-        <view class="show_more" v-if="item.product_list.length > 1" @click.stop="changeHeight(index)">
-          <uni-icons :type="item.contents_class ? 'up' : 'down'"></uni-icons>
-        </view>
-        <view class="order_price">
-          <view class="pay_total">￥{{ item.pay_total }}</view>
-        </view>
+
         <view class="order_btn" v-if="item.status == 1">
           <button class="order_cancel" @click="cancelOrder(index)">取消订单</button>
           <button class="order_share" @click="toReceipt(item)">我已收货</button>
@@ -250,9 +253,19 @@ export default {
       display: block;
       overflow: hidden;
       line-height: 60rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       .business_name {
         float: left;
         font-size: 32rpx;
+        display: flex;
+        align-items: center;
+        .business_icon {
+          width: 48rpx;
+          height: 48rpx;
+          margin-right: 10rpx;
+        }
       }
       .order_status {
         float: right;

pages/orders/receipt.vue

@@ -2,7 +2,7 @@
   <view>
     <view class="order_info">
       <view class="order_title">
-        <view class="business_name">{{ orderInfo.business_name }}</view>
+        <view class="business_name"><image src="../../static/icon/shop_fill.png" class="business_icon" />{{ orderInfo.business_name }}</view>
       </view>
       <view class="product_list">
         <view class="product_item" v-for="(product_info, k) in orderInfo.product_list" :key="k">
@@ -177,6 +177,13 @@ export default {
     .business_name {
       float: left;
       font-size: 32rpx;
+      display: flex;
+      align-items: center;
+      .business_icon {
+        width: 48rpx;
+        height: 48rpx;
+        margin-right: 10rpx;
+      }
     }
     .order_status {
       float: right;