商城增加微信支付

components/OrderListCard/index.vue

@@ -2,22 +2,37 @@
   <view class="item">
     <view @click="goOrderDetails(order.orderId)">
       <view class="title acea-row row-between-wrapper">
-        <view class="acea-row row-middle" @click.stop="toMerchant(order.sbMerchant?.id)">
-          <image class="merchantImg" v-if="order.sbMerchant?.merchantLogo" :src="order.sbMerchant.merchantLogo" ></image>
-          <image class="merchantImg" v-else src="@/static/avator.png" ></image>
-          <view style="margin-left: 10rpx;">{{order.sbMerchant?.merchantName||'自营'}}</view>
-          <uni-icons v-if="order.sbMerchant?.id" style="margin-left: 10rpx;" type="right" size="16" color="#999999"></uni-icons>
-<!--          <view>{{ order.createTime }}</view>-->
+        <view
+          class="acea-row row-middle"
+          @click.stop="toMerchant(order.sbMerchant?.id)"
+        >
+          <image
+            class="merchantImg"
+            v-if="order.sbMerchant?.merchantLogo"
+            :src="order.sbMerchant.merchantLogo"
+          ></image>
+          <image class="merchantImg" v-else src="@/static/avator.png"></image>
+          <view style="margin-left: 10rpx">{{
+            order.sbMerchant?.merchantName || "自营"
+          }}</view>
+          <uni-icons
+            v-if="order.sbMerchant?.id"
+            style="margin-left: 10rpx"
+            type="right"
+            size="16"
+            color="#999999"
+          ></uni-icons>
+          <!--          <view>{{ order.createTime }}</view>-->
         </view>
         <view class="font-color">
           <text
-              class="sign cart-color acea-row row-center-wrapper"
-              v-if="
+            class="sign cart-color acea-row row-center-wrapper"
+            v-if="
               order.activityType !== '普通' && order.activityType !== '核销'
             "
-          >{{ order.activityType }}</text
+            >{{ order.activityType }}</text
           >
-          {{ order.status == 6 ? '已取消':order.orderStatus }}
+          {{ order.status == 6 ? "已取消" : order.orderStatus }}
         </view>
       </view>
       <view
@@ -38,7 +53,9 @@
       </view>
       <view class="totalPrice"
         >共{{ order.totalNum }}件商品，总金额
-        <text class="money font-color" v-if="mallType === 0">￥{{ order.payPrice }}</text>
+        <text class="money font-color" v-if="mallType === 0"
+          >￥{{ order.payPrice }}</text
+        >
         <text class="money font-color" v-else>{{ order.useIntegral }}贝币</text>
       </view>
     </view>
@@ -46,6 +63,12 @@
       <view class="bnt cancelBnt" v-if="!order.paid" @click.stop="cancelOrder"
         >取消订单</view
       >
+      <view
+        class="bnt cancelBnt refresh-bnt"
+        v-if="!order.paid"
+        @click.stop="refreshStatus"
+        >更新状态</view
+      >
       <view class="bnt bg-color" v-if="!order.paid" @click.stop="goPay"
         >立即付款</view
       >
@@ -87,6 +110,7 @@ const emit = defineEmits([
   "goPay",
   "goOrderDetails",
   "delOrder",
+  "refreshStatus",
 ]);
 
 function cancelOrder() {
@@ -101,14 +125,18 @@ function goOrderDetails(orderId) {
 function delOrder() {
   emit("delOrder", props.order.id, props.index);
 }
+function refreshStatus() {
+  emit("refreshStatus", props.order.orderId, props.index);
+}
 const toMerchant = (merchantId) => {
-  if(merchantId){
-    uni.navigateTo({ url:"/pages/merchantCenters/merchant?merchantId="+merchantId });
-  }else{
-    return
+  if (merchantId) {
+    uni.navigateTo({
+      url: "/pages/merchantCenters/merchant?merchantId=" + merchantId,
+    });
+  } else {
+    return;
   }
-
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -211,7 +239,7 @@ const toMerchant = (merchantId) => {
     }
   }
 }
-.merchantImg{
+.merchantImg {
   width: 60rpx;
   height: 60rpx;
   border-radius: 50%;

pages/order_details/index.vue

@@ -328,6 +328,14 @@
             <image src="@/static/images/shop/closeOrder@2x.png" mode=""></image>
             <view class="">取消订单</view>
           </view>
+          <view
+            class="qs-btn"
+            v-if="!orderInfo.paid"
+            @click.stop="refreshPayStatus"
+          >
+            <image src="@/static/images/shop/daifukuan@2x.png" mode=""></image>
+            <view class="">更新状态</view>
+          </view>
           <view
             class="buyPlay"
             v-if="!orderInfo.paid"
@@ -423,6 +431,7 @@ import {
   qrcodeApi,
   applyExchange,
 } from "@/api/order.js";
+import { queryPaymentStatus } from "@/api/payment.js";
 import { openOrderRefundSubscribe } from "@/utils/SubscribeMessage.js";
 import payment from "@/components/payment";
 import WechatPayment from "@/components/payment/WechatPayment.vue";
@@ -820,6 +829,28 @@ function cancelOrder() {
   });
 }
 
+function refreshPayStatus() {
+  const orderId = orderInfo.orderId;
+  if (!orderId) return Toast({ title: "缺少订单号" });
+  uni.showLoading({ title: "查询中..." });
+  queryPaymentStatus(orderId)
+    .then((res) => {
+      uni.hideLoading();
+      const isPaid = res.data?.tradeState === "SUCCESS";
+      if (isPaid) {
+        Toast({ title: "支付成功，订单已更新", icon: "success" }, () => {
+          getOrderInfo();
+        });
+      } else {
+        Toast({ title: "订单未支付，状态未变更" });
+      }
+    })
+    .catch((err) => {
+      uni.hideLoading();
+      Toast({ title: err || "查询失败，请稍后重试" });
+    });
+}
+
 // 生命周期
 onLoad((options) => {
   type.value =

pages/order_list/index.vue

@@ -1,375 +1,419 @@
 <template>
-	<view>
-		<view class="my-order">
-			<view class="nav">
-				<up-tabs :scrollable="false" lineColor="#F8C008" :activeStyle="{color:'#F8C008',fontSize:'28rpx'}"
-					:inactiveStyle="{color:'#333333',fontSize:'28rpx'}" :list="list" @click="statusClick"
-					:current="oldOrderStatus"></up-tabs>
-			</view>
-			<view class="list" v-if="orderList.length">
-				<OrderListCard v-for="(item, index) in orderList" :key="index" :order="item" :index="index"
-					@cancelOrder="cancelOrder" @goPay="goPay" @goOrderDetails="goOrderDetails" :mallType="0"
-					@delOrder="delOrder" />
-			</view>
-			<view class="loadingicon acea-row row-center-wrapper" v-if="orderList.length > 0">
-				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>{{ loadTitle }}
-			</view>
-			<view class="empty" v-if="orderList.length == 0">
-				<uni-empty-view />
-			</view>
-		</view>
-		<payment @closePopup="closePayPopup" :payMode="payMode" :showPopup="showPopup" @payComplete="payComplete"
-			@payFail="payFail" @onChangeFun="onChangeFun" :order_id="pay_order_id" :totalPrice="totalPrice"></payment>
-	</view>
+  <view>
+    <view class="my-order">
+      <view class="nav">
+        <up-tabs
+          :scrollable="false"
+          lineColor="#F8C008"
+          :activeStyle="{ color: '#F8C008', fontSize: '28rpx' }"
+          :inactiveStyle="{ color: '#333333', fontSize: '28rpx' }"
+          :list="list"
+          @click="statusClick"
+          :current="oldOrderStatus"
+        ></up-tabs>
+      </view>
+      <view class="list" v-if="orderList.length">
+        <OrderListCard
+          v-for="(item, index) in orderList"
+          :key="index"
+          :order="item"
+          :index="index"
+          @cancelOrder="cancelOrder"
+          @goPay="goPay"
+          @goOrderDetails="goOrderDetails"
+          :mallType="0"
+          @delOrder="delOrder"
+          @refreshStatus="refreshOrderStatus"
+        />
+      </view>
+      <view
+        class="loadingicon acea-row row-center-wrapper"
+        v-if="orderList.length > 0"
+      >
+        <text
+          class="loading iconfont icon-jiazai"
+          :hidden="loading == false"
+        ></text
+        >{{ loadTitle }}
+      </view>
+      <view class="empty" v-if="orderList.length == 0">
+        <uni-empty-view />
+      </view>
+    </view>
+    <payment
+      @closePopup="closePayPopup"
+      :payMode="payMode"
+      :showPopup="showPopup"
+      @payComplete="payComplete"
+      @payFail="payFail"
+      @onChangeFun="onChangeFun"
+      :order_id="pay_order_id"
+      :totalPrice="totalPrice"
+    ></payment>
+  </view>
 </template>
 
 <script setup>
-	import {
-		ref,
-		onMounted
-	} from "vue";
-	import {
-    onLoad,
-		onShow,
-		onReachBottom
-	} from "@dcloudio/uni-app";
-	import OrderListCard from "@/components/OrderListCard";
-	import {
-		useAppStore
-	} from "@/stores/app";
-	import {
-		getOrderList,
-		orderData,
-		orderCancel,
-		orderDel
-	} from "@/api/order.js";
-	import payment from "@/components/payment";
-	import {
-		toLogin
-	} from "@/libs/login.js";
-	import emptyPage from "@/components/emptyPage.vue";
-	import {
-		useToast
-	} from "@/hooks/useToast";
+import { ref, onMounted } from "vue";
+import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
+import OrderListCard from "@/components/OrderListCard";
+import { useAppStore } from "@/stores/app";
+import { getOrderList, orderData, orderCancel, orderDel } from "@/api/order.js";
+import payment from "@/components/payment";
+import { queryPaymentStatus } from "@/api/payment.js";
+import { toLogin } from "@/libs/login.js";
+import emptyPage from "@/components/emptyPage.vue";
+import { useToast } from "@/hooks/useToast";
 
-	const appStore = useAppStore();
-	const {
-		Toast
-	} = useToast();
+const appStore = useAppStore();
+const { Toast } = useToast();
 
-	// 状态
-	const loading = ref(false);
-	const loadend = ref(false);
-	const loadTitle = ref("加载更多");
-	const orderList = ref([]);
-	const orderDataState = ref({});
-	const orderStatus = ref(0);
-	const oldOrderStatus = ref(0); //老数据
-	const page = ref(1);
-	const limit = ref(10);
-	const payMode = ref([{
-			name: "微信支付",
-			icon: "icon-weixinzhifu",
-			value: "weixin",
-			title: "微信快捷支付",
-		},
-		{
-			name: "余额支付",
-			icon: "icon-yuezhifu",
-			value: "yue",
-			title: "可用余额:",
-			number: 0,
-		},
-	]);
-	const showPopup = ref(false);
-	const pay_order_id = ref("");
-	const totalPrice = ref("0");
+// 状态
+const loading = ref(false);
+const loadend = ref(false);
+const loadTitle = ref("加载更多");
+const orderList = ref([]);
+const orderDataState = ref({});
+const orderStatus = ref(0);
+const oldOrderStatus = ref(0); //老数据
+const page = ref(1);
+const limit = ref(10);
+const payMode = ref([
+  {
+    name: "微信支付",
+    icon: "icon-weixinzhifu",
+    value: "weixin",
+    title: "微信快捷支付",
+  },
+  {
+    name: "余额支付",
+    icon: "icon-yuezhifu",
+    value: "yue",
+    title: "可用余额:",
+    number: 0,
+  },
+]);
+const showPopup = ref(false);
+const pay_order_id = ref("");
+const totalPrice = ref("0");
 
-	const list = ref([{
-			name: '待付款',
-			orderStatus: 0,
-      value: 0
-		},
-		{
-			name: '待发货',
-			orderStatus: 1,
-      value: 1
-		},
-		{
-			name: '待收货',
-			orderStatus: 2,
-      value: 2
-		},
-    {
-      name: '退款/换货',
-      orderStatus: -3,
-      value: 3
-    },
-		{
-			name: '已完成',
-			orderStatus: 4,
-      value: 4
-		},
-    {
-      name: '已取消',
-      orderStatus: 6,
-      value: 6
-    },
-	]) //头部导航
+const list = ref([
+  {
+    name: "待付款",
+    orderStatus: 0,
+    value: 0,
+  },
+  {
+    name: "待发货",
+    orderStatus: 1,
+    value: 1,
+  },
+  {
+    name: "待收货",
+    orderStatus: 2,
+    value: 2,
+  },
+  {
+    name: "退款/换货",
+    orderStatus: -3,
+    value: 3,
+  },
+  {
+    name: "已完成",
+    orderStatus: 4,
+    value: 4,
+  },
+  {
+    name: "已取消",
+    orderStatus: 6,
+    value: 6,
+  },
+]); //头部导航
 
-	// 生命周期
-	onMounted(() => {
-		if (appStore.isLogin) {
-			loadend.value = false;
-			page.value = 1;
-			orderList.value = [];
-			getOrderData();
-			getOrderListFn();
-		} else {
-			toLogin();
-		}
-	});
+// 生命周期
+onMounted(() => {
+  if (appStore.isLogin) {
+    loadend.value = false;
+    page.value = 1;
+    orderList.value = [];
+    getOrderData();
+    getOrderListFn();
+  } else {
+    toLogin();
+  }
+});
 
-	// 页面显示时
-	onShow(() => {
-		if (appStore.isLogin) {
-			loadend.value = false;
-			page.value = 1;
-			orderList.value = [];
-			getOrderData();
-			getOrderListFn();
-		} else {
-			toLogin();
-		}
-	});
-  onLoad((options) => {
-    if (options.status) {
-      const statusValue = parseInt(options.status);
+// 页面显示时
+onShow(() => {
+  if (appStore.isLogin) {
+    loadend.value = false;
+    page.value = 1;
+    orderList.value = [];
+    getOrderData();
+    getOrderListFn();
+  } else {
+    toLogin();
+  }
+});
+onLoad((options) => {
+  if (options.status) {
+    const statusValue = parseInt(options.status);
 
-      // 验证状态是否有效
-      const validStatuses = [0, 1, 2, 4, -3];
-      if (validStatuses.includes(statusValue)) {
-        // 设置状态
-        orderStatus.value = statusValue;
-        // 找到对应的索引
-        const index = list.value.findIndex(item => item.orderStatus === statusValue);
-        if (index !== -1) {
-          oldOrderStatus.value = index;  // 设置索引值
-        }
-
-        console.log("设置订单状态为:", statusValue, "索引为:", index);
-      } else {
-        console.warn("无效的状态参数:", statusValue);
+    // 验证状态是否有效
+    const validStatuses = [0, 1, 2, 4, -3];
+    if (validStatuses.includes(statusValue)) {
+      // 设置状态
+      orderStatus.value = statusValue;
+      // 找到对应的索引
+      const index = list.value.findIndex(
+        (item) => item.orderStatus === statusValue
+      );
+      if (index !== -1) {
+        oldOrderStatus.value = index; // 设置索引值
       }
+
+      console.log("设置订单状态为:", statusValue, "索引为:", index);
+    } else {
+      console.warn("无效的状态参数:", statusValue);
     }
-  })
-	// 下拉加载
-	onReachBottom(() => {
-		getOrderListFn();
-	});
+  }
+});
+// 下拉加载
+onReachBottom(() => {
+  getOrderListFn();
+});
 
-	function onChangeFun(state) {
-		let action = state.action || null;
-		let value = state.value !== undefined ? state.value : null;
-		if (action && typeof [action] === "function") {
-			[action](value);
-		}
-	}
+function onChangeFun(state) {
+  let action = state.action || null;
+  let value = state.value !== undefined ? state.value : null;
+  if (action && typeof [action] === "function") {
+    [action](value);
+  }
+}
 
-	function getOrderData() {
-		orderData().then((res) => {
-			orderDataState.value = res.data;
-		});
-	}
+function getOrderData() {
+  orderData().then((res) => {
+    orderDataState.value = res.data;
+  });
+}
 
-	function cancelOrder(index, order_id) {
-		if (!order_id) return Toast({
-			title: "缺少订单号无法取消订单"
-		});
-		uni.showLoading({
-			title: "正在删除中"
-		});
-		orderCancel(order_id)
-			.then((res) => {
-				uni.hideLoading();
-				Toast({
-					title: "删除成功",
-					icon: "success"
-				}, () => {
-					orderList.value.splice(index, 1);
-					orderDataState.value.unpaid_count--;
-					getOrderData();
-				});
-			})
-			.catch((err) => {
-				Toast({
-					title: err
-				});
-			});
-	}
+function cancelOrder(index, order_id) {
+  if (!order_id)
+    return Toast({
+      title: "缺少订单号无法取消订单",
+    });
+  uni.showLoading({
+    title: "正在删除中",
+  });
+  orderCancel(order_id)
+    .then((res) => {
+      uni.hideLoading();
+      Toast(
+        {
+          title: "删除成功",
+          icon: "success",
+        },
+        () => {
+          orderList.value.splice(index, 1);
+          orderDataState.value.unpaid_count--;
+          getOrderData();
+        }
+      );
+    })
+    .catch((err) => {
+      Toast({
+        title: err,
+      });
+    });
+}
+
+function goPay(pay_price, order_id) {
+  appStore.USERINFO().then((res) => {
+    if (res.nowMoney) {
+      showPopup.value = true;
+      pay_order_id.value = order_id;
+      totalPrice.value = pay_price;
+    }
+  });
+}
+const closePayPopup = () => {
+  console.log("payClose");
+  showPopup.value = false;
+};
 
-	function goPay(pay_price, order_id) {
-		appStore.USERINFO().then((res) => {
-			if (res.nowMoney) {
-				showPopup.value = true;
-				pay_order_id.value = order_id;
-				totalPrice.value = pay_price;
-			}
-		});
-	}
-	const closePayPopup = () => {
-		console.log("payClose");
-		showPopup.value = false;
-	};
+function payComplete() {
+  console.log("payComplete");
+  loadend.value = false;
+  page.value = 1;
+  orderList.value = [];
+  showPopup.value = false;
+  getOrderData();
+  getOrderListFn();
+}
 
-	function payComplete() {
-		console.log("payComplete");
-		loadend.value = false;
-		page.value = 1;
-		orderList.value = [];
-		showPopup.value = false;
-		getOrderData();
-		getOrderListFn();
-	}
+function payFail() {
+  showPopup.value = false;
+}
 
-	function payFail() {
-		showPopup.value = false;
-	}
+function goOrderDetails(order_id) {
+  if (!order_id)
+    return Toast({
+      title: "缺少订单号无法查看订单详情",
+    });
+  uni.navigateTo({
+    url: "/pages/order_details/index?order_id=" + order_id,
+  });
+}
 
-	function goOrderDetails(order_id) {
-		if (!order_id) return Toast({
-			title: "缺少订单号无法查看订单详情"
-		});
-		uni.navigateTo({
-			url: "/pages/order_details/index?order_id=" + order_id
-		});
-	}
+function toReturnList() {
+  uni.navigateTo({
+    url: "/pages/users/user_return_list/index",
+  });
+}
 
-	function toReturnList() {
-		uni.navigateTo({
-			url: "/pages/users/user_return_list/index"
-		});
-	}
+const changeStatus = (item) => {
+  // oldOrderStatus.value = item.index;
+};
 
-	const changeStatus = (item) => {
-		// oldOrderStatus.value = item.index;
-	}
+function statusClick(item) {
+  console.log(item);
+  if (item.orderStatus === orderStatus.value) return;
 
-	function statusClick(item) {
-    console.log(item)
-		if (item.orderStatus === orderStatus.value) return;
-		
-		orderStatus.value = item.orderStatus;
-		loadend.value = false;
-		page.value = 1;
-		orderList.value = [];
-		getOrderListFn();
-	}
+  orderStatus.value = item.orderStatus;
+  loadend.value = false;
+  page.value = 1;
+  orderList.value = [];
+  getOrderListFn();
+}
 
-	function getOrderListFn() {
-		if (loadend.value || loading.value) return;
-		loading.value = true;
-		loadTitle.value = "加载更多";
-		getOrderList({
-				type: orderStatus.value,
-				page: page.value,
-				limit: limit.value,
-				mallType: 0,
-			})
-			.then((res) => {
-				let list = res.data.list || [];
-				let isLoadend = list.length < limit.value;
-				// orderList.value = uni.$util.SplitArray(list, orderList.value)
-				orderList.value = [...list, ...orderList.value];
-				loadend.value = isLoadend;
-				loading.value = false;
-				loadTitle.value = isLoadend ? "我也是有底线的" : "加载更多";
-				page.value += 1;
-			})
-			.catch(() => {
-				loading.value = false;
-				loadTitle.value = "加载更多";
-			});
-	}
+function getOrderListFn() {
+  if (loadend.value || loading.value) return;
+  loading.value = true;
+  loadTitle.value = "加载更多";
+  getOrderList({
+    type: orderStatus.value,
+    page: page.value,
+    limit: limit.value,
+    mallType: 0,
+  })
+    .then((res) => {
+      let list = res.data.list || [];
+      let isLoadend = list.length < limit.value;
+      // orderList.value = uni.$util.SplitArray(list, orderList.value)
+      orderList.value = [...list, ...orderList.value];
+      loadend.value = isLoadend;
+      loading.value = false;
+      loadTitle.value = isLoadend ? "我也是有底线的" : "加载更多";
+      page.value += 1;
+    })
+    .catch(() => {
+      loading.value = false;
+      loadTitle.value = "加载更多";
+    });
+}
 
-	function delOrder(order_id, index) {
-		orderDel(order_id)
-			.then((res) => {
-				orderList.value.splice(index, 1);
-				orderDataState.value.unpaid_count--;
-				getOrderData();
-				Toast({
-					title: "删除成功",
-					icon: "success"
-				});
-			})
-			.catch((err) => {
-				Toast({
-					title: err
-				});
-			});
-	}
+function refreshOrderStatus(orderId, index) {
+  if (!orderId) return Toast({ title: "缺少订单号" });
+  uni.showLoading({ title: "查询中..." });
+  queryPaymentStatus(orderId)
+    .then((res) => {
+      uni.hideLoading();
+      const isPaid = res.data?.tradeState === "SUCCESS";
+      if (isPaid) {
+        Toast({ title: "支付成功，订单已更新", icon: "success" }, () => {
+          loadend.value = false;
+          page.value = 1;
+          orderList.value = [];
+          getOrderData();
+          getOrderListFn();
+        });
+      } else {
+        Toast({ title: "订单未支付，状态未变更" });
+      }
+    })
+    .catch((err) => {
+      uni.hideLoading();
+      Toast({ title: err || "查询失败，请稍后重试" });
+    });
+}
+
+function delOrder(order_id, index) {
+  orderDel(order_id)
+    .then((res) => {
+      orderList.value.splice(index, 1);
+      orderDataState.value.unpaid_count--;
+      getOrderData();
+      Toast({
+        title: "删除成功",
+        icon: "success",
+      });
+    })
+    .catch((err) => {
+      Toast({
+        title: err,
+      });
+    });
+}
 </script>
 <style>
-	page {
-		background: #F9F7F0;
-	}
+page {
+  background: #f9f7f0;
+}
 </style>
 <style scoped lang="scss">
-	.empty {
-		height: calc(100vh - 44px);
-		/* #ifdef H5 */
-		height: calc(100vh - 88px);
-		/* #endif */
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.my-order {
+.empty {
+  height: calc(100vh - 44px);
+  /* #ifdef H5 */
+  height: calc(100vh - 88px);
+  /* #endif */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-		.nav {
-			background: #FFFFFF;
+.my-order {
+  .nav {
+    background: #ffffff;
 
-			// height: 140rpx;
-			background-color: #fff;
+    // height: 140rpx;
+    background-color: #fff;
 
-			.item {
-				text-align: center;
-				font-size: 26rpx;
-				color: #282828;
-				padding: 26rpx 0;
+    .item {
+      text-align: center;
+      font-size: 26rpx;
+      color: #282828;
+      padding: 26rpx 0;
 
-				&.on {
-					font-weight: bold;
-					border-bottom: 5rpx solid $border-color;
-				}
+      &.on {
+        font-weight: bold;
+        border-bottom: 5rpx solid $border-color;
+      }
 
-				.num {
-					margin-top: 18rpx;
-				}
-			}
-		}
+      .num {
+        margin-top: 18rpx;
+      }
+    }
+  }
 
-		.list {
-			width: 690rpx;
-			margin: 16rpx auto 0 auto;
-		}
-	}
+  .list {
+    width: 690rpx;
+    margin: 16rpx auto 0 auto;
+  }
+}
 
-	.noCart {
-		margin-top: 171rpx;
-		padding-top: 0.1rpx;
+.noCart {
+  margin-top: 171rpx;
+  padding-top: 0.1rpx;
 
-		.pictrue {
-			width: 414rpx;
-			height: 336rpx;
-			margin: 78rpx auto 56rpx auto;
+  .pictrue {
+    width: 414rpx;
+    height: 336rpx;
+    margin: 78rpx auto 56rpx auto;
 
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>