Sfoglia il codice sorgente

feat:购物车页面调整与新增订单详情页面

qianxinyu 4 mesi fa
parent
commit
d4b5ef6aa1

+ 5 - 0
components/SwipeAction/SwipeAction.vue

@@ -47,6 +47,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pIndex: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -70,6 +74,7 @@ export default {
       this.$emit("clickItem", {
         index: this.index,
         id: e.id,
+        pIndex: this.pIndex,
       });
     },
     //重置方法

+ 7 - 0
pages.json

@@ -189,6 +189,13 @@
 			{
 				"navigationBarTitleText" : "订单回执"
 			}
+		},
+		{
+			"path" : "pages/orders/detail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "订单详情"
+			}
 		}
 	],
 	"globalStyle": {

+ 209 - 95
pages/car/index.vue

@@ -1,42 +1,54 @@
 <template>
   <view>
     <view class="car_list">
-      <view @longpress="deleteCar(index)" v-for="(item, index) in cartList" :key="index" style="margin-bottom: 20rpx">
-        <SwipeAction @clickItem="clickItem" :index="index" ref="swipeAction">
-          <view class="car_item">
-            <view class="check_label" @click="checkedItem(index)">
-              <image class="checkbox" :src="item.checked ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'"></image>
-            </view>
-            <view class="box_left">
-              <navigator :url="'/pages/product/index?product_id=' + item.product_id">
-                <image class="car_image" :src="item.thumb" mode=""></image>
-              </navigator>
-            </view>
-            <view class="box_center">
-              <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_name">{{ item.name }}</navigator>
-              <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_spec">{{ item.spec }}</navigator>
-              <view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
-              <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_price">
-                <text class="price">¥{{ item.price }}</text>
-                <text class="market_price">¥{{ item.market_price }}</text>
-              </navigator>
-            </view>
-            <view class="box_right">
-              <view class="buy_num_box">
-                <button class="buy_num_sub" @click="changeQuantity(index, -1)" data-eventsync="true">
-                  <image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
-                </button>
-                <input type="number" class="buy_num" placeholder="数量" v-model="item.buy_num" @blur="changeQuantity(index, 0)" />
-                <button class="buy_num_add" @click="changeQuantity(index, +1)" data-eventsync="true">
-                  <image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
-                </button>
+      <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;
+          {{ pItem.business_name }}
+        </view>
+        <view class="product_group">
+          <view v-for="(item, index) in pItem.products" @longpress="deleteCar(pIndex, index)" :key="index" style="margin-bottom: 20rpx">
+            <SwipeAction @clickItem="clickItem" :index="index" ref="swipeAction" :pIndex="pIndex">
+              <view class="car_item">
+                <view class="check_label" @click="checkedItem(pIndex, index, item.id)">
+                  <image class="checkbox" src="@/static/icon/checkbox_disabled.png" style="width: 30rpx; height: 30rpx" v-if="item.product_status !== 0 || item.stock == 0" />
+                  <image class="checkbox" :src="item.checked ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'" v-else></image>
+                </view>
+                <view class="box_left">
+                  <navigator :url="'/pages/product/index?product_id=' + item.product_id">
+                    <image class="car_image" :src="item.thumb" mode=""></image>
+                    <view class="product_status" v-if="item.product_status !== 0">
+                      {{ item.stock == 0 ? "已售罄" : "已下架" }}
+                    </view>
+                  </navigator>
+                </view>
+                <view class="box_center">
+                  <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_name">{{ item.name }}</navigator>
+                  <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_spec">{{ item.spec }}</navigator>
+                  <view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
+                  <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_price">
+                    <text class="price">¥{{ item.price }}</text>
+                    <text class="market_price">¥{{ item.market_price }}</text>
+                  </navigator>
+                </view>
+                <view class="box_right">
+                  <view class="buy_num_box">
+                    <button class="buy_num_sub" @click="changeQuantity(pIndex, index, -1)" data-eventsync="true">
+                      <image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
+                    </button>
+                    <input type="number" class="buy_num" placeholder="数量" v-model="item.buy_num" @blur="changeQuantity(pIndex, index, 0)" />
+                    <button class="buy_num_add" @click="changeQuantity(pIndex, index, +1)" data-eventsync="true">
+                      <image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
+                    </button>
+                  </view>
+                </view>
               </view>
-            </view>
+            </SwipeAction>
           </view>
-        </SwipeAction>
+        </view>
       </view>
     </view>
-    <Empty v-if="!cartList.length" text="----- 还没有产品啦 -----" />
+    <Empty v-if="cartList.length == 0" text="----- 还没有产品啦 -----" />
     <view class="to_bottom" v-if="cartList.length"> -----到底啦-----</view>
     <view class="bottom_box">
       <view class="check_all_label" @click="checkAll()">
@@ -58,8 +70,6 @@ export default {
   components: { Empty, SwipeAction },
   data() {
     return {
-      // 购物车列表
-      cartList: [],
       // 请求参数
       requestParam: {},
       // 是否全选
@@ -68,6 +78,9 @@ export default {
       priceTotal: "0.00",
       // 是否请求中
       isReqing: false,
+      //购物车列表
+      cartListByGroup: [],
+      cartList: [],
     };
   },
   onLoad() {
@@ -115,6 +128,9 @@ export default {
       // 成功结果
       if (re.code == "success") {
         // 赋值
+
+        this.cartListByGroup = this.formatGroupedData(re.data);
+
         this.cartList = re.data;
         // 计算价格
         this.priceHandler();
@@ -128,7 +144,10 @@ export default {
     this.$http.request("api/shop_cart/get_list", this.requestParam).then((re) => {
       if (re.code == "success") {
         // 赋值
+        this.cartListByGroup = this.formatGroupedData(re.data);
+
         this.cartList = re.data;
+
         // 计算价格
         this.priceHandler();
       }
@@ -137,17 +156,49 @@ export default {
   },
   onReachBottom() {},
   methods: {
+    // 转换为数组格式
+    formatGroupedData(list) {
+      const groupedData = list.reduce((result, item) => {
+        const { business_id, business_name } = item;
+
+        // 如果该 business_id 的分组不存在,则初始化该分组
+        if (!result[business_id]) {
+          result[business_id] = {
+            business_id,
+            business_name,
+            products: [],
+            checked: false,
+          };
+        }
+
+        // 将商品添加到对应的 business_id 分组
+        result[business_id].products.push(item);
+
+        return result;
+      }, {});
+
+      return groupedData;
+    },
+    //选择商业公司下面的所有商品
+    selectBussiness(index) {
+      this.cartListByGroup[index].checked = !this.cartListByGroup[index].checked;
+      this.cartListByGroup[index].products.forEach((item) => {
+        item.checked = this.cartListByGroup[index].checked;
+      });
+      // 计算价格
+      this.priceHandler();
+    },
     // 数量调整
-    changeQuantity(index, number) {
+    changeQuantity(pIndex, index, number) {
       // 如果不是0.表示两侧按钮点击,0表示输入的修改
       if (number != 0) {
         // 计算个数
-        this.cartList[index].buy_num = this.cartList[index].buy_num + number;
+        this.cartListByGroup[pIndex].products[index].buy_num = this.cartListByGroup[pIndex].products[index].buy_num + number;
       }
       // 如果大于库存
-      if (this.cartList[index].buy_num > this.cartList[index].stock) {
+      if (this.cartListByGroup[pIndex].products[index].buy_num > this.cartListByGroup[pIndex].products[index].stock) {
         // 设置为库存
-        this.cartList[index].buy_num = this.cartList[index].stock;
+        this.cartListByGroup[pIndex].products[index].buy_num = this.cartListByGroup[pIndex].products[index].stock;
         // 提示
         uni.showToast({
           title: "购买数量不能大于库存",
@@ -156,9 +207,9 @@ export default {
         return;
       }
       // 如果小于1.设置为1
-      if (this.cartList[index].buy_num < 1) {
+      if (this.cartListByGroup[pIndex].products[index].buy_num < 1) {
         // 恢复1
-        this.cartList[index].buy_num = 1;
+        this.cartListByGroup[pIndex].products[index].buy_num = 1;
         // 提示
         uni.showToast({
           title: "数量不可小于1",
@@ -167,54 +218,85 @@ export default {
         return;
       }
       // 请求列表
-      this.$http.request("api/shop_cart/edit", { id: this.cartList[index].id, buy_num: this.cartList[index].buy_num }).then((re) => {
-        if (re.code == "success") {
-          // 计算价格
-          this.priceHandler();
-        } else {
-          uni.showToast({
-            title: re.msg,
-            icon: "none",
-          });
-        }
-      });
+      this.$http
+        .request("api/shop_cart/edit", {
+          id: this.cartListByGroup[pIndex].products[index].id,
+          buy_num: this.cartListByGroup[pIndex].products[index].buy_num,
+        })
+        .then((re) => {
+          if (re.code == "success") {
+            // 计算价格
+            this.priceHandler();
+          } else {
+            uni.showToast({
+              title: re.msg,
+              icon: "none",
+            });
+          }
+        });
     },
     // 删除购物车
-    deleteCar(index) {
+    deleteCar(pIndex, index) {
       uni.showModal({
         title: "是否删除?",
         success: (re) => {
           if (re.confirm) {
             // 请求列表
-            this.$http.request("api/shop_cart/del", { id: this.cartList[index].id }).then((re) => {
-              // 如果删除成功的话
-              if (re.code == "success") {
-                this.cartList.splice(index, 1);
-                // 计算价格
-                this.priceHandler();
-                if (this.$refs.swipeAction.length) {
-                  this.$refs.swipeAction[this.$refs.swipeAction.length - 1]?.reset();
+            this.$http
+              .request("api/shop_cart/del", {
+                id: this.cartListByGroup[pIndex].products[index].id,
+              })
+              .then((re) => {
+                // 如果删除成功的话
+                if (re.code == "success") {
+                  this.cartListByGroup[pIndex].products.splice(index, 1);
+                  // 计算价格
+                  this.priceHandler();
+                  if (this.$refs.swipeAction.length) {
+                    this.$refs.swipeAction[this.$refs.swipeAction.length - 1]?.reset();
+                  }
                 }
-              }
-            });
+              });
           } else {
             this.$refs.swipeAction[this.$refs.swipeAction.length - 1]?.reset();
           }
         },
       });
     },
-    checkedItem(index) {
-      // 默认全选
-      let checkedAll = 1;
-      // 单个设置选中/未选
-      this.cartList[index].checked = this.cartList[index].checked ? 0 : 1;
-      // 循环处理
-      for (let i in this.cartList) {
-        // 有未选的就不做全选
-        if (!this.cartList[i].checked) checkedAll = 0;
+    checkedItem(pIndex, index, product_id) {
+      const product = this.cartListByGroup[pIndex].products[index];
+
+      // 如果商品不可选中,直接返回
+      if (product.product_status !== 0 || product.stock === 0) {
+        return;
+      }
+
+      // 切换选中状态
+      const isChecked = (product.checked = !product.checked);
+
+      // 找到对应商家组中的商品并更新选中状态
+      const productInGroup = this.cartListByGroup[pIndex].products.find((item) => item.id === product_id);
+      if (productInGroup) {
+        productInGroup.checked = isChecked;
+      }
+
+      // 检查该商家组内所有商品是否都已选中
+      const checkedBussinessAll = this.cartListByGroup[pIndex].products.every((item) => item.checked);
+
+      // 更新商家组的全选状态
+      this.cartListByGroup[pIndex].checked = checkedBussinessAll;
+
+      // 检查是否所有商品都已选中
+      let checkedAll = true;
+      for (const key in this.cartListByGroup) {
+        if (!this.cartListByGroup[key].checked) {
+          checkedAll = false;
+        }
       }
-      // 全选赋值
-      this.checkedAll = checkedAll;
+
+      // 更新全选状态
+      this.checkedAll = checkedAll ? 1 : 0;
+
       // 计算价格
       this.priceHandler();
     },
@@ -222,8 +304,9 @@ export default {
       // 设置全选/单选
       this.checkedAll = this.checkedAll ? 0 : 1;
       // 循环处理
-      for (let index in this.cartList) {
-        this.cartList[index].checked = this.checkedAll;
+      for (const index in this.cartListByGroup) {
+        this.cartListByGroup[index].checked = this.checkedAll;
+        this.cartListByGroup[index].products.forEach((item) => (item.checked = this.checkedAll));
       }
       // 计算价格
       this.priceHandler();
@@ -232,11 +315,12 @@ export default {
       // 总价格
       let priceTotal = 0;
       // 循环处理
-      for (let index in this.cartList) {
-        // 如果选中的
-        if (this.cartList[index].checked) {
-          priceTotal = this.$decimal.add(priceTotal, this.$decimal.mul(this.cartList[index].price, this.cartList[index].buy_num));
-        }
+      for (const index in this.cartListByGroup) {
+        this.cartListByGroup[index].products.forEach((item) => {
+          if (item.checked) {
+            priceTotal = this.$decimal.add(priceTotal, this.$decimal.mul(item.price, item.buy_num));
+          }
+        });
       }
       // 小数点处理
       this.priceTotal = priceTotal.toFixed(2);
@@ -245,20 +329,22 @@ export default {
       // 等待支付的信息
       let waitList = [];
       // 循环处理
-      for (let index in this.cartList) {
+      for (let index in this.cartListByGroup) {
         // 如果选中的
-        if (this.cartList[index].checked) {
-          // 如果库存不足
-          if (this.cartList[index].buy_num < 1) {
-            uni.showToast({ icon: "none", title: "选择的产品至少需要1个" });
-            return;
-          }
-          // 如果库存不足
-          if (this.cartList[index].buy_num > this.cartList[index].stock) {
-            uni.showToast({ icon: "none", title: "产品库存不足" });
-            return;
+        for (const key in this.cartListByGroup[index].products) {
+          if (this.cartListByGroup[index].products[key].checked) {
+            // 如果库存不足
+            if (this.cartListByGroup[index].products[key].buy_num < 1) {
+              uni.showToast({ icon: "none", title: "选择的产品至少需要1个" });
+              return;
+            }
+            // 如果库存不足
+            if (this.cartListByGroup[index].products[key].buy_num > this.cartListByGroup[index].products[key].stock) {
+              uni.showToast({ icon: "none", title: "产品库存不足" });
+              return;
+            }
+            waitList.push(this.cartListByGroup[index].products[key].id);
           }
-          waitList.push(this.cartList[index].id);
         }
       }
       // 如果没有选择
@@ -276,7 +362,7 @@ export default {
       });
     },
     clickItem(e) {
-      this.deleteCar(e.index);
+      this.deleteCar(e.pIndex, e.index);
     },
   },
 };
@@ -288,6 +374,20 @@ export default {
   overflow: hidden;
   margin: 0rpx auto;
   margin-top: 20rpx;
+  padding-bottom: 110rpx;
+  .business_name {
+    padding: 8rpx 10rpx;
+    border: 1px solid #f44336;
+    font-size: 24rpx;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    .checkbox {
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
   .car_item {
     height: 180rpx;
     display: block;
@@ -315,7 +415,9 @@ export default {
       float: left;
       width: 40rpx;
       height: 40rpx;
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       margin-top: 10rpx;
       padding: 50rpx 20rpx;
       .checkbox {
@@ -329,11 +431,23 @@ export default {
       width: 140rpx;
       height: 200rpx;
       margin-top: 10rpx;
+      position: relative;
       .car_image {
         width: 140rpx;
         height: 140rpx;
         border-radius: 5rpx;
       }
+      .product_status {
+        position: absolute;
+        width: 100%;
+        height: 40rpx;
+        bottom: 60rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24rpx;
+        background-color: #999999;
+      }
     }
     .box_center {
       float: left;
@@ -442,7 +556,7 @@ export default {
   }
 }
 .bottom_box {
-  z-index: 9;
+  z-index: 999;
   left: 0rpx;
   width: 100%;
   height: 100rpx;

+ 965 - 912
pages/car/order.vue

@@ -1,939 +1,992 @@
 <template>
-	<view>
-		<view class="custom_addr" @click="showAddrPopup()">
-			<view class="contact_user">
-				<text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
-				<text class="contact_name">{{ checkedAddr.contact_name }}</text>
-				<text class="contact_phone">{{ checkedAddr.contact_phone }}</text>
-				<text class="contact_more">&gt;</text>
-				<view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
-					<text v-if="checkedAddr.shop_type">({{ $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type] }})&nbsp;</text>
-					{{ checkedAddr.contact_shop }}
-				</view>
-			</view>
-			<view class="contact_addr" style="display: flex">
-				{{ checkedAddr.contact_province }} {{ checkedAddr.contact_city }} {{ checkedAddr.contact_area }}
-				{{ checkedAddr.contact_addr }}
-			</view>
-		</view>
-		<view class="car_list">
-			<view class="car_item" v-for="(item, index) in cartList" :key="index">
-				<view class="box_left">
-					<image class="car_image" :src="item.thumb" mode=""></image>
-				</view>
-				<view class="box_center">
-					<view class="car_name">{{ item.name }}</view>
-					<view class="car_spec">{{ item.spec }}</view>
-					<view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
-					<view class="car_price">
-						<text class="price">¥{{ item.price }}</text>
-					</view>
-				</view>
-				<view class="box_right">
-					<view class="buy_num_box">
-						<view class="buy_num">共{{ item.buy_num }}件</view>
-					</view>
-				</view>
-			</view>
-			<view class="car_item" v-for="(item, index) in promoRebateList" :key="index">
-				<view class="box_left">
-					<image class="car_image" :src="item.thumb" mode=""></image>
-				</view>
-				<view class="box_center">
-					<view class="car_name">
-						<text v-if="item.promo_rebate_id">【赠品】</text>
-						{{ item.name }}
-					</view>
-					<view class="car_spec">{{ item.spec }}</view>
-					<view class="car_price">
-						<text class="price">¥{{ item.price }}</text>
-					</view>
-				</view>
-				<view class="box_right">
-					<view class="buy_num_box">
-						<view class="buy_num">共{{ item.buy_num }}件</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view>
-			<view class="to_select_coupon" v-if="couponList.length" @click="popupCoupon()">
-				<text>优惠券</text>
-				<view class="coupon_deduction">{{ couponUsed }}</view>
-			</view>
-			<view class="to_select_coupon" v-if="reduction > 0">
-				<text>满减</text>
-				<view class="coupon_deduction">-{{ reduction }}</view>
-			</view>
-			<view class="to_select_coupon" v-if="discount > 0">
-				<text>商品折扣</text>
-				<view class="coupon_deduction">-{{ discount }}</view>
-			</view>
-		</view>
-		<view class="bottom_box">
-			<view class="price_box">
-				合计:
-				<text class="price_total">¥{{ priceTotal }}</text>
-			</view>
-			<button class="to_order" @click="createOrder()" data-eventsync="true">提交预约</button>
-		</view>
-		<uni-popup ref="popup" type="bottom" class="popup" background-color="#FFFFFF" @touchmove.stop.prevent="() => {}">
-			<view class="coupon_list">
-				<view class="coupon_item" v-for="(item, index) in couponList" :key="index" @click="checkedCoupon(index)">
-					<view class="box_left">
-						<view class="rebate" v-if="item.rebate_type == 1">¥{{ item.rebate }}</view>
-						<view class="rebate" v-if="item.rebate_type == 2">打 {{ item.rebate }} 折</view>
-						<view class="rebate" v-if="item.rebate_type == 3">
-							赠
-							<text v-if="item.rebate_scope.length">{{ item.rebate_scope[0].product_name }}</text>
-						</view>
-						<view class="std_pay">满{{ item.std_pay }}</view>
-					</view>
-					<view class="box_right">
-						<view class="coupon_title">
-							<view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
-							<view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
-							<view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
-						</view>
-						<view class="product_scope">
-							<text class="" v-if="item.type_id == 1">限定商品可用</text>
-							<text class="" v-if="item.type_id == 2">全场可用</text>
-							<view class="check_label">
-								<view class="isstd" v-if="!item.is_std">不可用</view>
-								<image class="checkbox" v-if="item.is_std" :src="item.checked ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'"></image>
-							</view>
-						</view>
-						<view class="coupon_info">
-							<view class="coupon_exp">{{ item.exp_time }} 到期</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</uni-popup>
-		<uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
-			<view class="popup_title">
-				收货地址
-				<navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator>
-			</view>
-			<view class="addr_list">
-				<view class="addr_item" v-for="(item, index) in addrList" :key="index" @click="checkedAddrItem(item)">
-					<view class="radio_label">
-						<image class="radio_icon" :src="item.id == checkedAddr.id ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
-					</view>
-					<view class="contact_user">
-						<text class="contact_name">{{ item.contact_name }}</text>
-						<text class="contact_phone">{{ item.contact_phone }}</text>
-						<text class="contact_default" v-if="item.is_default">默认</text>
-						<view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
-							<text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text>
-							{{ item.contact_shop }}
-						</view>
-					</view>
-					<view class="contact_addr" style="display: flex">{{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }}</view>
-				</view>
-			</view>
-			<view class="create_box">
-				<navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
-			</view>
-		</uni-popup>
-	</view>
+  <view>
+    <view class="custom_addr" @click="showAddrPopup()">
+      <view class="contact_user">
+        <text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
+        <text class="contact_name">{{ checkedAddr.contact_name }}</text>
+        <text class="contact_phone">{{ checkedAddr.contact_phone }}</text>
+        <text class="contact_more">&gt;</text>
+        <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
+          <text v-if="checkedAddr.shop_type">({{ $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type] }})&nbsp;</text>
+          {{ checkedAddr.contact_shop }}
+        </view>
+      </view>
+      <view class="contact_addr" style="display: flex">
+        {{ checkedAddr.contact_province }} {{ checkedAddr.contact_city }} {{ checkedAddr.contact_area }}
+        {{ checkedAddr.contact_addr }}
+      </view>
+    </view>
+    <view class="car_list">
+      <view v-for="(pItem, pIndex) in cartListByGroup" :key="pIndex">
+        <view class="business_name">{{ 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>
+          </view>
+          <view class="box_center">
+            <view class="car_name">{{ item.name }}</view>
+            <view class="car_spec">{{ item.spec }}</view>
+            <view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
+            <view class="car_price">
+              <text class="price">¥{{ item.price }}</text>
+            </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="car_item" v-for="(item, index) in promoRebateList" :key="index">
+        <view class="box_left">
+          <image class="car_image" :src="item.thumb" mode=""></image>
+        </view>
+        <view class="box_center">
+          <view class="car_name">
+            <text v-if="item.promo_rebate_id">【赠品】</text>
+            {{ item.name }}
+          </view>
+          <view class="car_spec">{{ item.spec }}</view>
+          <view class="car_price">
+            <text class="price">¥{{ item.price }}</text>
+          </view>
+        </view>
+        <view class="box_right">
+          <view class="buy_num_box">
+            <view class="buy_num">共{{ item.buy_num }}件</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view>
+      <view class="to_select_coupon" v-if="couponList.length" @click="popupCoupon()">
+        <text>优惠券</text>
+        <view class="coupon_deduction">{{ couponUsed }}</view>
+      </view>
+      <view class="to_select_coupon" v-if="reduction > 0">
+        <text>满减</text>
+        <view class="coupon_deduction">-{{ reduction }}</view>
+      </view>
+      <view class="to_select_coupon" v-if="discount > 0">
+        <text>商品折扣</text>
+        <view class="coupon_deduction">-{{ discount }}</view>
+      </view>
+    </view>
+    <!-- <view class="price_content">
+      <view class="price_content_title">价格明细</view>
+      <view class="price_content_item"> </view>
+    </view> -->
+    <view class="bottom_box">
+      <view class="price_box">
+        合计:
+        <text class="price_total">¥{{ priceTotal }}</text>
+      </view>
+      <button class="to_order" @click="createOrder()" data-eventsync="true">提交预约</button>
+    </view>
+    <uni-popup ref="popup" type="bottom" class="popup" background-color="#FFFFFF" @touchmove.stop.prevent="() => {}">
+      <view class="coupon_list">
+        <view class="coupon_item" v-for="(item, index) in couponList" :key="index" @click="checkedCoupon(index)">
+          <view class="box_left">
+            <view class="rebate" v-if="item.rebate_type == 1">¥{{ item.rebate }}</view>
+            <view class="rebate" v-if="item.rebate_type == 2">打 {{ item.rebate }} 折</view>
+            <view class="rebate" v-if="item.rebate_type == 3">
+              赠
+              <text v-if="item.rebate_scope.length">{{ item.rebate_scope[0].product_name }}</text>
+            </view>
+            <view class="std_pay">满{{ item.std_pay }}</view>
+          </view>
+          <view class="box_right">
+            <view class="coupon_title">
+              <view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
+              <view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
+              <view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
+            </view>
+            <view class="product_scope">
+              <text class="" v-if="item.type_id == 1">限定商品可用</text>
+              <text class="" v-if="item.type_id == 2">全场可用</text>
+              <view class="check_label">
+                <view class="isstd" v-if="!item.is_std">不可用</view>
+                <image class="checkbox" v-if="item.is_std" :src="item.checked ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'"></image>
+              </view>
+            </view>
+            <view class="coupon_info">
+              <view class="coupon_exp">{{ item.exp_time }} 到期</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
+    <uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
+      <view class="popup_title">
+        收货地址
+        <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator>
+      </view>
+      <view class="addr_list">
+        <view class="addr_item" v-for="(item, index) in addrList" :key="index" @click="checkedAddrItem(item)">
+          <view class="radio_label">
+            <image class="radio_icon" :src="item.id == checkedAddr.id ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
+          </view>
+          <view class="contact_user">
+            <text class="contact_name">{{ item.contact_name }}</text>
+            <text class="contact_phone">{{ item.contact_phone }}</text>
+            <text class="contact_default" v-if="item.is_default">默认</text>
+            <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
+              <text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text>
+              {{ item.contact_shop }}
+            </view>
+          </view>
+          <view class="contact_addr" style="display: flex">{{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }}</view>
+        </view>
+      </view>
+      <view class="create_box">
+        <navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
+      </view>
+    </uni-popup>
+  </view>
 </template>
 
 <script>
 export default {
-	data() {
-		return {
-			// 购物车列表
-			cartList: [],
-			// 优惠券列表
-			couponList: [],
-			//赠品列表
-			promoRebateList: [],
-			// 请求参数
-			requestParam: {
-				cart_ids: ''
-			},
-			// 总价
-			priceTotal: '0.00',
-			discount: '0.00',
-			reduction: '0.00',
-			// 优惠券使用
-			couponUsed: '去使用 >',
-			// 扣减金额
-			rebatePrice: 0.0,
-			// 已经选择的优惠券ID
-			customCoupon: 0,
-			// 地址列表
-			addrList: [],
-			// 已选地址
-			checkedAddr: {
-				id: 0,
-				contact_name: '',
-				contact_phone: '',
-				contact_province: '',
-				contact_city: '',
-				contact_area: '',
-				contact_addr: '',
-				is_default: 0
-			}
-		};
-	},
-	onLoad(param) {
-		// 获取路由参数
-		this.requestParam.cart_ids = param.cart_ids;
-		var that = this;
-		// 监听地址变动
-		uni.$on('addr_list_change', function (data) {
-			// 地址列表
-			that.addrList = data.list;
-		});
-	},
-	onShow() {
-		// 结果
-		this.$http.request('api/shop_cart/check_list', this.requestParam).then((re) => {
-			if (re.code == 'success') {
-				// 赋值
-				this.cartList = re.data;
-				this.promoRebateList = re.promoRebateList;
-				this.discount = re.discount;
-				this.reduction = re.reduction;
-				// 结果
-				this.$http.request('api/custom_coupon/get_checked', this.requestParam).then((re) => {
-					if (re.code == 'success') {
-						// 赋值
-						this.couponList = re.data;
-						// 推荐使用的优惠券
-						let rebatePrice = 0;
-						// 循环优惠券
-						for (let i in this.couponList) {
-							/* 商品的总价格,决定是否可用 */
-							var totalPrice = 0.0;
-							// 循环产品,
-							for (let j in this.cartList) {
-								// 如果是商品券
-								if (this.couponList[i].type_id == 1) {
-									// 判断商品是不是在商品范围
-									var isScope = false;
-									// 循环商品范围
-									for (let k in this.couponList[i].product_scope) {
-										// 如果存在商品范围
-										if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
-									}
-									// 范围内的做计算
-									if (isScope) {
-										totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
-									}
-									// 如果排除商品
-								} else if (this.couponList[i].type_id == 3) {
-									// 判断商品是不是在排除范围
-									var isExclude = false;
-									// 循环排除范围
-									for (let k in this.couponList[i].product_exclude) {
-										// 如果存在排除范围
-										if (this.couponList[i].product_exclude[k].product_id == this.cartList[j].product_id) isExclude = true;
-									}
-									// 不在排除内的做计算
-									if (!isExclude) {
-										totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
-									}
-									// 店铺券
-								} else {
-									// 折扣券以及满减券的话,计算价格
-									totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
-								}
-								// 判断价格到不到限额
-								this.couponList[i].is_std = parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2));
-								// 如果可用的话,并且没有主动选择优惠券
-								if (this.couponList[i].is_std) {
-									// 优惠金额
-									let newRebatePrice = 0.0;
-									// 计算满减价格
-									if (this.couponList[i].rebate_type == 1) {
-										// 计算扣减数据
-										newRebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
-									}
-									// 计算折扣价格
-									if (this.couponList[i].rebate_type == 2) {
-										// 折扣
-										newRebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
-										// 减数
-										newRebatePrice = this.$decimal.sub(totalPrice, newRebatePrice.mul(0.1));
-									}
-									// 判断哪个比较优惠
-									if (parseFloat(rebatePrice.toFixed(2)) < parseFloat(newRebatePrice.toFixed(2))) {
-										// 覆盖价格
-										rebatePrice = parseFloat(newRebatePrice.toFixed(2));
-										// 选中
-										this.checkedCoupon(i);
-									}
-								}
-							}
-						}
-					}
-				});
-				// 计算价格
-				this.priceHandler();
-			}
-		});
-		// 地址列表
-		this.getAddrList();
-	},
-	methods: {
-		// 地址弹出层
-		showAddrPopup() {
-			// 显示下单弹出层
-			this.$refs.addrPopup.open('bottom');
-		},
-		// 价格计算
-		priceHandler() {
-			// 总价格
-			let priceTotal = 0;
-			// 循环处理
-			for (let index in this.cartList) {
-				priceTotal = this.$decimal.add(priceTotal, this.$decimal.mul(this.cartList[index].price, this.cartList[index].buy_num));
-			}
-			// 扣减数据
-			priceTotal = this.$decimal.sub(priceTotal, this.rebatePrice);
-			priceTotal = this.$decimal.sub(priceTotal, this.reduction);
-			priceTotal = this.$decimal.sub(priceTotal, this.discount);
-			// 小数点保留
-			this.priceTotal = priceTotal.toFixed(2);
-		},
-		// 创建订单
-		createOrder() {
-			// 不可预约
-			if (!this.$checkAccess.alertCity()) return;
-			// 需要下单的产品列表
-			let productList = [];
-			// 循环列表数据
-			for (let index in this.cartList) {
-				// 购买数量必须大于0的才行
-				if (this.cartList[index].buy_num > 0) {
-					// 追加需要下单的数据
-					productList.push({
-						product_id: this.cartList[index].product_id,
-						buy_num: this.cartList[index].buy_num,
-						product_skuid: this.cartList[index].skuid
-					});
-				}
-			}
-			if (productList.length <= 0) {
-				uni.showToast({
-					title: '未选择可预约的产品',
-					icon: 'none'
-				});
-				return;
-			}
-			// 地址未填
-			if (!this.checkedAddr.id) {
-				uni.showToast({
-					title: '请选择收货地址',
-					icon: 'none'
-				});
-				return;
-			}
-			//需要下单的产品信息参数传给OrederCompletion页面
-			let productInfo = [];
-			for (let index in this.cartList) {
-				// 购买数量必须大于0的才行
-				if (this.cartList[index].buy_num > 0) {
-					// 追加需要下单的数据
-					productInfo.push({
-						name: this.cartList[index].name,
-						spec: this.cartList[index].spec,
-						price: this.cartList[index].price
-					});
-				}
-			}
-			// 转成json字符串
-			productInfo = JSON.stringify(productInfo);
-			//加密json格式成编码数组
-			let encodedArray = encodeURIComponent(productInfo);
-			// 转成json字符串传输
-			productList = JSON.stringify(productList);
-			// 请求接口
-			this.$http
-				.request(
-					'api/orders/create',
-					{
-						product_list: productList,
-						custom_coupon_id: this.customCoupon,
-						is_cart: 1,
-						addr_id: this.checkedAddr.id
-					},
-					'post'
-				)
-				.then((re) => {
-					// 判断结果
-					if (re.code == 'success') {
-						// 跳转到报单完成页面
-						uni.redirectTo({
-							url: `/pages/orders/completion?params=${encodedArray}`
-						});
-						return;
-					} else {
-						uni.showToast({
-							title: re.msg,
-							icon: 'none'
-						});
-					}
-				});
-		},
-		// 弹出优惠券
-		popupCoupon() {
-			this.$refs.popup.open();
-		},
-		// 选择优惠券
-		checkedCoupon(index) {
-			// 单个设置选中/未选
-			this.couponList[index].checked = this.couponList[index].checked ? 0 : 1;
-			// 循环处理
-			for (let i in this.couponList) {
-				// 有未选的就不做全选
-				if (index != i) this.couponList[i].checked = 0;
-			}
-			// 如果未选中,提示可用
-			if (!this.couponList[index].checked) this.couponUsed = '去使用 >';
-			// 已经选择的优惠券ID
-			this.customCoupon = this.couponList[index].checked ? this.couponList[index].id : 0;
-			// 计算扣减
-			this.couponRebate();
-			// 计算价格
-			this.priceHandler();
-			// 关闭弹窗
-			this.$refs.popup.close();
-		},
-		// 计算优惠券扣减
-		couponRebate() {
-			// 默认扣减0
-			this.rebatePrice = 0;
-			// 循环优惠券
-			for (let i in this.couponList) {
-				// 判断是否选中
-				if (!this.couponList[i].checked) {
-					// 未选择的不管
-					continue;
-				}
-				/* 商品的总价格,决定是否可用 */
-				var totalPrice = 0.0;
-				// 循环产品,
-				for (let j in this.cartList) {
-					// 如果是商品券
-					if (this.couponList[i].type_id == 1) {
-						// 判断商品是不是在商品范围
-						var isScope = false;
-						// 循环商品范围
-						for (let k in this.couponList[i].product_scope) {
-							// 如果存在商品范围
-							if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
-						}
-						// 范围内的做计算
-						if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
-						// 店铺券
-					} else {
-						// 折扣券以及满减券的话,计算价格
-						totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
-					}
-				}
-				// 如果是可以用的话
-				if (parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2))) {
-					// 扣减金额
-					let rebatePrice = 0;
-					// 满减
-					if (this.couponList[i].rebate_type == 1) {
-						// 计算扣减数据
-						rebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
-						// 替换文字
-						this.couponUsed = '¥-' + rebatePrice.toFixed(2);
-					}
-					// 折扣
-					if (this.couponList[i].rebate_type == 2) {
-						// 折扣
-						rebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
-						// -0.1 表示折扣
-						rebatePrice = this.$decimal.sub(totalPrice, rebatePrice.mul(0.1));
-						// 替换文字
-						this.couponUsed = '¥-' + rebatePrice.toFixed(2);
-					}
-					//  赠品
-					if (this.couponList[i].rebate_type == 3) {
-						// 替换文字
-						this.couponUsed = '送' + (this.couponList[i].rebate_scope.length ? this.couponList[i].rebate_scope[0].product_name : '');
-					}
-					// 小数点保留
-					this.rebatePrice = rebatePrice.toFixed(2);
-				}
-			}
-		},
-		// 选择地址
-		checkedAddrItem(item) {
-			this.checkedAddr = item;
-			this.$refs.addrPopup.close();
-		},
-		getAddrList() {
-			// 判断数据
-			this.$http.request('api/custom_addr/get_list').then((callback) => {
-				// 获取成功
-				if (callback.code == 'success') {
-					this.addrList = callback.data;
-					// 如果有的话
-					if (this.addrList.length) {
-						// 获取默认的
-						for (let i in this.addrList) {
-							// 如果是默认的
-							if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
-						}
-						// 如果没有默认的话
-						if (!this.checkedAddr.id) {
-							this.checkedAddr = this.addrList[this.addrList.length - 1];
-						}
-					}
-				}
-			});
-		}
-	}
+  data() {
+    return {
+      //序列化购物车列表
+      cartListByGroup: [],
+      // 购物车列表
+      cartList: [],
+      // 优惠券列表
+      couponList: [],
+      //赠品列表
+      promoRebateList: [],
+      // 请求参数
+      requestParam: {
+        cart_ids: "",
+      },
+      // 总价
+      priceTotal: "0.00",
+      discount: "0.00",
+      reduction: "0.00",
+      // 优惠券使用
+      couponUsed: "去使用 >",
+      // 扣减金额
+      rebatePrice: 0.0,
+      // 已经选择的优惠券ID
+      customCoupon: 0,
+      // 地址列表
+      addrList: [],
+      // 已选地址
+      checkedAddr: {
+        id: 0,
+        contact_name: "",
+        contact_phone: "",
+        contact_province: "",
+        contact_city: "",
+        contact_area: "",
+        contact_addr: "",
+        is_default: 0,
+      },
+    };
+  },
+  onLoad(param) {
+    // 获取路由参数
+    this.requestParam.cart_ids = param.cart_ids;
+    var that = this;
+    // 监听地址变动
+    uni.$on("addr_list_change", function (data) {
+      // 地址列表
+      that.addrList = data.list;
+    });
+  },
+  onShow() {
+    // 结果
+    this.$http.request("api/shop_cart/check_list", this.requestParam).then((re) => {
+      if (re.code == "success") {
+        // 赋值
+        this.cartList = re.data;
+        this.cartListByGroup = this.formatGroupedData(re.data);
+        this.promoRebateList = re.promoRebateList;
+        this.discount = re.discount;
+        this.reduction = re.reduction;
+        // 结果
+        this.$http.request("api/custom_coupon/get_checked", this.requestParam).then((re) => {
+          if (re.code == "success") {
+            // 赋值
+            this.couponList = re.data;
+            // 推荐使用的优惠券
+            let rebatePrice = 0;
+            // 循环优惠券
+            for (let i in this.couponList) {
+              /* 商品的总价格,决定是否可用 */
+              var totalPrice = 0.0;
+              // 循环产品,
+              for (let j in this.cartList) {
+                // 如果是商品券
+                if (this.couponList[i].type_id == 1) {
+                  // 判断商品是不是在商品范围
+                  var isScope = false;
+                  // 循环商品范围
+                  for (let k in this.couponList[i].product_scope) {
+                    // 如果存在商品范围
+                    if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
+                  }
+                  // 范围内的做计算
+                  if (isScope) {
+                    totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
+                  }
+                  // 如果排除商品
+                } else if (this.couponList[i].type_id == 3) {
+                  // 判断商品是不是在排除范围
+                  var isExclude = false;
+                  // 循环排除范围
+                  for (let k in this.couponList[i].product_exclude) {
+                    // 如果存在排除范围
+                    if (this.couponList[i].product_exclude[k].product_id == this.cartList[j].product_id) isExclude = true;
+                  }
+                  // 不在排除内的做计算
+                  if (!isExclude) {
+                    totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
+                  }
+                  // 店铺券
+                } else {
+                  // 折扣券以及满减券的话,计算价格
+                  totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
+                }
+                // 判断价格到不到限额
+                this.couponList[i].is_std = parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2));
+                // 如果可用的话,并且没有主动选择优惠券
+                if (this.couponList[i].is_std) {
+                  // 优惠金额
+                  let newRebatePrice = 0.0;
+                  // 计算满减价格
+                  if (this.couponList[i].rebate_type == 1) {
+                    // 计算扣减数据
+                    newRebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
+                  }
+                  // 计算折扣价格
+                  if (this.couponList[i].rebate_type == 2) {
+                    // 折扣
+                    newRebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
+                    // 减数
+                    newRebatePrice = this.$decimal.sub(totalPrice, newRebatePrice.mul(0.1));
+                  }
+                  // 判断哪个比较优惠
+                  if (parseFloat(rebatePrice.toFixed(2)) < parseFloat(newRebatePrice.toFixed(2))) {
+                    // 覆盖价格
+                    rebatePrice = parseFloat(newRebatePrice.toFixed(2));
+                    // 选中
+                    this.checkedCoupon(i);
+                  }
+                }
+              }
+            }
+          }
+        });
+        // 计算价格
+        this.priceHandler();
+      }
+    });
+    // 地址列表
+    this.getAddrList();
+  },
+  methods: {
+    // 转换为数组格式
+    formatGroupedData(list) {
+      const groupedData = list.reduce((result, item) => {
+        const { business_id, business_name } = item;
+
+        // 如果该 business_id 的分组不存在,则初始化该分组
+        if (!result[business_id]) {
+          result[business_id] = {
+            business_id,
+            business_name,
+            products: [],
+            checked: false,
+          };
+        }
+
+        // 将商品添加到对应的 business_id 分组
+        result[business_id].products.push(item);
+
+        return result;
+      }, {});
+
+      return groupedData;
+    },
+    // 地址弹出层
+    showAddrPopup() {
+      // 显示下单弹出层
+      this.$refs.addrPopup.open("bottom");
+    },
+    // 价格计算
+    priceHandler() {
+      // 总价格
+      let priceTotal = 0;
+      // 循环处理
+      for (let index in this.cartList) {
+        priceTotal = this.$decimal.add(priceTotal, this.$decimal.mul(this.cartList[index].price, this.cartList[index].buy_num));
+      }
+      // 扣减数据
+      priceTotal = this.$decimal.sub(priceTotal, this.rebatePrice);
+      priceTotal = this.$decimal.sub(priceTotal, this.reduction);
+      priceTotal = this.$decimal.sub(priceTotal, this.discount);
+      // 小数点保留
+      this.priceTotal = priceTotal.toFixed(2);
+    },
+    // 创建订单
+    createOrder() {
+      // 不可预约
+      if (!this.$checkAccess.alertCity()) return;
+      // 需要下单的产品列表
+      let productList = [];
+      // 循环列表数据
+      for (let index in this.cartList) {
+        // 购买数量必须大于0的才行
+        if (this.cartList[index].buy_num > 0) {
+          // 追加需要下单的数据
+          productList.push({
+            product_id: this.cartList[index].product_id,
+            buy_num: this.cartList[index].buy_num,
+            product_skuid: this.cartList[index].skuid,
+          });
+        }
+      }
+      if (productList.length <= 0) {
+        uni.showToast({
+          title: "未选择可预约的产品",
+          icon: "none",
+        });
+        return;
+      }
+      // 地址未填
+      if (!this.checkedAddr.id) {
+        uni.showToast({
+          title: "请选择收货地址",
+          icon: "none",
+        });
+        return;
+      }
+      //需要下单的产品信息参数传给OrederCompletion页面
+      let productInfo = [];
+      for (let index in this.cartList) {
+        // 购买数量必须大于0的才行
+        if (this.cartList[index].buy_num > 0) {
+          // 追加需要下单的数据
+          productInfo.push({
+            name: this.cartList[index].name,
+            spec: this.cartList[index].spec,
+            price: this.cartList[index].price,
+          });
+        }
+      }
+      // 转成json字符串
+      productInfo = JSON.stringify(productInfo);
+      //加密json格式成编码数组
+      let encodedArray = encodeURIComponent(productInfo);
+      // 转成json字符串传输
+      productList = JSON.stringify(productList);
+      // 请求接口
+      this.$http
+        .request(
+          "api/orders/create",
+          {
+            product_list: productList,
+            custom_coupon_id: this.customCoupon,
+            is_cart: 1,
+            addr_id: this.checkedAddr.id,
+          },
+          "post"
+        )
+        .then((re) => {
+          // 判断结果
+          if (re.code == "success") {
+            // 跳转到报单完成页面
+            uni.redirectTo({
+              url: `/pages/orders/completion?params=${encodedArray}`,
+            });
+            return;
+          } else {
+            uni.showToast({
+              title: re.msg,
+              icon: "none",
+            });
+          }
+        });
+    },
+    // 弹出优惠券
+    popupCoupon() {
+      this.$refs.popup.open();
+    },
+    // 选择优惠券
+    checkedCoupon(index) {
+      // 单个设置选中/未选
+      this.couponList[index].checked = this.couponList[index].checked ? 0 : 1;
+      // 循环处理
+      for (let i in this.couponList) {
+        // 有未选的就不做全选
+        if (index != i) this.couponList[i].checked = 0;
+      }
+      // 如果未选中,提示可用
+      if (!this.couponList[index].checked) this.couponUsed = "去使用 >";
+      // 已经选择的优惠券ID
+      this.customCoupon = this.couponList[index].checked ? this.couponList[index].id : 0;
+      // 计算扣减
+      this.couponRebate();
+      // 计算价格
+      this.priceHandler();
+      // 关闭弹窗
+      this.$refs.popup.close();
+    },
+    // 计算优惠券扣减
+    couponRebate() {
+      // 默认扣减0
+      this.rebatePrice = 0;
+      // 循环优惠券
+      for (let i in this.couponList) {
+        // 判断是否选中
+        if (!this.couponList[i].checked) {
+          // 未选择的不管
+          continue;
+        }
+        /* 商品的总价格,决定是否可用 */
+        var totalPrice = 0.0;
+        // 循环产品,
+        for (let j in this.cartList) {
+          // 如果是商品券
+          if (this.couponList[i].type_id == 1) {
+            // 判断商品是不是在商品范围
+            var isScope = false;
+            // 循环商品范围
+            for (let k in this.couponList[i].product_scope) {
+              // 如果存在商品范围
+              if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
+            }
+            // 范围内的做计算
+            if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
+            // 店铺券
+          } else {
+            // 折扣券以及满减券的话,计算价格
+            totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
+          }
+        }
+        // 如果是可以用的话
+        if (parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2))) {
+          // 扣减金额
+          let rebatePrice = 0;
+          // 满减
+          if (this.couponList[i].rebate_type == 1) {
+            // 计算扣减数据
+            rebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
+            // 替换文字
+            this.couponUsed = "¥-" + rebatePrice.toFixed(2);
+          }
+          // 折扣
+          if (this.couponList[i].rebate_type == 2) {
+            // 折扣
+            rebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
+            // -0.1 表示折扣
+            rebatePrice = this.$decimal.sub(totalPrice, rebatePrice.mul(0.1));
+            // 替换文字
+            this.couponUsed = "¥-" + rebatePrice.toFixed(2);
+          }
+          //  赠品
+          if (this.couponList[i].rebate_type == 3) {
+            // 替换文字
+            this.couponUsed = "送" + (this.couponList[i].rebate_scope.length ? this.couponList[i].rebate_scope[0].product_name : "");
+          }
+          // 小数点保留
+          this.rebatePrice = rebatePrice.toFixed(2);
+        }
+      }
+    },
+    // 选择地址
+    checkedAddrItem(item) {
+      this.checkedAddr = item;
+      this.$refs.addrPopup.close();
+    },
+    getAddrList() {
+      // 判断数据
+      this.$http.request("api/custom_addr/get_list").then((callback) => {
+        // 获取成功
+        if (callback.code == "success") {
+          this.addrList = callback.data;
+          // 如果有的话
+          if (this.addrList.length) {
+            // 获取默认的
+            for (let i in this.addrList) {
+              // 如果是默认的
+              if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
+            }
+            // 如果没有默认的话
+            if (!this.checkedAddr.id) {
+              this.checkedAddr = this.addrList[this.addrList.length - 1];
+            }
+          }
+        }
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less">
 .custom_addr {
-	width: 680rpx;
-	display: block;
-	font-size: 24rpx;
-	overflow: hidden;
-	margin: 0rpx auto;
-	line-height: 40rpx;
-	padding: 20rpx 35rpx;
-	background-color: #ffffff;
-	border-bottom: 2rpx solid #dddddd;
-
-	.contact_user {
-		display: block;
-		font-size: 24rpx;
-		line-height: 50rpx;
-
-		.contact_none {
-			font-size: 26rpx;
-			font-weight: bold;
-		}
-
-		.contact_name {
-			font-size: 26rpx;
-			font-weight: bold;
-			margin-right: 16rpx;
-		}
-
-		.contact_more {
-			float: right;
-			font-size: 40rpx;
-			font-weight: bold;
-		}
-
-		.contact_shop {
-			float: right;
-			font-size: 26rpx;
-			margin-right: 16rpx;
-		}
-	}
-
-	.contact_addr {
-		width: 620rpx;
-		display: block;
-		font-size: 24rpx;
-		line-height: 30rpx;
-		padding: 10rpx 5rpx;
-	}
+  width: 680rpx;
+  display: block;
+  font-size: 24rpx;
+  overflow: hidden;
+  margin: 0rpx auto;
+  line-height: 40rpx;
+  padding: 20rpx 35rpx;
+  background-color: #ffffff;
+  border-bottom: 2rpx solid #dddddd;
+
+  .contact_user {
+    display: block;
+    font-size: 24rpx;
+    line-height: 50rpx;
+
+    .contact_none {
+      font-size: 26rpx;
+      font-weight: bold;
+    }
+
+    .contact_name {
+      font-size: 26rpx;
+      font-weight: bold;
+      margin-right: 16rpx;
+    }
+
+    .contact_more {
+      float: right;
+      font-size: 40rpx;
+      font-weight: bold;
+    }
+
+    .contact_shop {
+      float: right;
+      font-size: 26rpx;
+      margin-right: 16rpx;
+    }
+  }
+
+  .contact_addr {
+    width: 620rpx;
+    display: block;
+    font-size: 24rpx;
+    line-height: 30rpx;
+    padding: 10rpx 5rpx;
+  }
 }
 
 .car_list {
-	display: block;
-	overflow: hidden;
-	margin: 0rpx auto;
-	margin-top: 20rpx;
-	background: #ffffff;
-
-	.car_item {
-		height: 170rpx;
-		display: block;
-		overflow: hidden;
-		margin: 0rpx auto;
-		padding: 20rpx 35rpx;
-		border-bottom: 2rpx solid #dddddd;
-
-		.box_left {
-			float: left;
-			width: 140rpx;
-			height: 190rpx;
-			margin-top: 10rpx;
-
-			.car_image {
-				width: 140rpx;
-				height: 140rpx;
-				border-radius: 5rpx;
-			}
-		}
-
-		.box_center {
-			float: left;
-			width: 300rpx;
-			margin-left: 25rpx;
-
-			.car_name {
-				max-height: 70rpx;
-				font-size: 30rpx;
-				line-height: 40rpx;
-				overflow: hidden;
-				white-space: nowrap;
-				/* 不换行 */
-				overflow: hidden;
-				/* 隐藏超出的内容 */
-				text-overflow: ellipsis;
-				/* 用省略号表示被隐藏的部分 */
-			}
-
-			.car_spec {
-				color: #999999;
-				font-size: 24rpx;
-				line-height: 60rpx;
-				max-height: 60rpx;
-				overflow: hidden;
-			}
-
-			.promo_title {
-				max-height: 80rpx;
-				font-size: 20rpx;
-				line-height: 40rpx;
-				overflow: hidden;
-				padding: 0rpx 0rpx;
-				color: #dd524d;
-			}
-
-			.car_price {
-				font-size: 30rpx;
-				line-height: 60rpx;
-
-				.price {
-					color: red;
-				}
-			}
-		}
-
-		.box_right {
-			float: right;
-			width: 185rpx;
-
-			.buy_num_box {
-				float: right;
-				color: #333333;
-				overflow: hidden;
-				font-size: 24rpx;
-				margin-top: 130rpx;
-				text-align: center;
-
-				.buy_num {
-					float: left;
-					width: 100rpx;
-					height: 30rpx;
-					font-size: 24rpx;
-					line-height: 30rpx;
-					padding: 0rpx 0rpx;
-					border-radius: 8rpx;
-				}
-			}
-		}
-	}
-
-	.car_item:last-child {
-		border-bottom: none;
-	}
+  display: block;
+  overflow: hidden;
+  margin: 0rpx auto;
+  margin-top: 20rpx;
+  background: #ffffff;
+  .business_name {
+    padding: 8rpx 10rpx;
+    border: 1px solid #f44336;
+    font-size: 24rpx;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+  }
+  .car_item {
+    height: 170rpx;
+    display: block;
+    overflow: hidden;
+    margin: 0rpx auto;
+    padding: 20rpx 35rpx;
+    border-bottom: 2rpx solid #dddddd;
+
+    .box_left {
+      float: left;
+      width: 140rpx;
+      height: 190rpx;
+      margin-top: 10rpx;
+
+      .car_image {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 5rpx;
+      }
+    }
+
+    .box_center {
+      float: left;
+      width: 300rpx;
+      margin-left: 25rpx;
+
+      .car_name {
+        max-height: 70rpx;
+        font-size: 30rpx;
+        line-height: 40rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        /* 不换行 */
+        overflow: hidden;
+        /* 隐藏超出的内容 */
+        text-overflow: ellipsis;
+        /* 用省略号表示被隐藏的部分 */
+      }
+
+      .car_spec {
+        color: #999999;
+        font-size: 24rpx;
+        line-height: 60rpx;
+        max-height: 60rpx;
+        overflow: hidden;
+      }
+
+      .promo_title {
+        max-height: 80rpx;
+        font-size: 20rpx;
+        line-height: 40rpx;
+        overflow: hidden;
+        padding: 0rpx 0rpx;
+        color: #dd524d;
+      }
+
+      .car_price {
+        font-size: 30rpx;
+        line-height: 60rpx;
+
+        .price {
+          color: red;
+        }
+      }
+    }
+
+    .box_right {
+      float: right;
+      width: 185rpx;
+
+      .buy_num_box {
+        float: right;
+        color: #333333;
+        overflow: hidden;
+        font-size: 24rpx;
+        margin-top: 130rpx;
+        text-align: center;
+
+        .buy_num {
+          float: left;
+          width: 100rpx;
+          height: 30rpx;
+          font-size: 24rpx;
+          line-height: 30rpx;
+          padding: 0rpx 0rpx;
+          border-radius: 8rpx;
+        }
+      }
+    }
+  }
+
+  .car_item:last-child {
+    border-bottom: none;
+  }
 }
 
 .to_select_coupon {
-	display: block;
-	height: 120rpx;
-	font-size: 30rpx;
-	margin: 20rpx auto;
-	background: #ffffff;
-	padding: 0rpx 35rpx;
-	line-height: 120rpx;
-
-	.coupon_deduction {
-		color: red;
-		float: right;
-		font-size: 26rpx;
-	}
+  display: block;
+  height: 120rpx;
+  font-size: 30rpx;
+  margin: 20rpx auto;
+  background: #ffffff;
+  padding: 0rpx 35rpx;
+  line-height: 120rpx;
+
+  .coupon_deduction {
+    color: red;
+    float: right;
+    font-size: 26rpx;
+  }
 }
 
 .to_select_coupon:last-child {
-	margin-bottom: 160rpx;
+  margin-bottom: 160rpx;
 }
 
 .bottom_box {
-	left: 0rpx;
-	z-index: 9;
-	width: 100%;
-	height: 140rpx;
-	display: block;
-	position: fixed;
-	overflow: hidden;
-	background: #ffffff;
-	padding: 0rpx 35rpx;
-	bottom: var(--window-bottom);
-
-	.price_box {
-		float: left;
-		width: 500rpx;
-		display: block;
-		color: #666666;
-		font-size: 26rpx;
-		text-align: right;
-		line-height: 100rpx;
-		margin-right: 20rpx;
-
-		.price_total {
-			color: red;
-			font-size: 30rpx;
-		}
-	}
-
-	.to_order {
-		float: left;
-		width: 180rpx;
-		height: 80rpx;
-		display: block;
-		color: #ffffff;
-		font-size: 28rpx;
-		margin-top: 10rpx;
-		line-height: 80rpx;
-		padding: 0rpx 0rpx;
-		text-align: center;
-		border-radius: 40rpx;
-		background-color: #e03519;
-	}
+  left: 0rpx;
+  z-index: 9;
+  width: 100%;
+  height: 140rpx;
+  display: block;
+  position: fixed;
+  overflow: hidden;
+  background: #ffffff;
+  padding: 0rpx 35rpx;
+  bottom: var(--window-bottom);
+
+  .price_box {
+    float: left;
+    width: 500rpx;
+    display: block;
+    color: #666666;
+    font-size: 26rpx;
+    text-align: right;
+    line-height: 100rpx;
+    margin-right: 20rpx;
+
+    .price_total {
+      color: red;
+      font-size: 30rpx;
+    }
+  }
+
+  .to_order {
+    float: left;
+    width: 180rpx;
+    height: 80rpx;
+    display: block;
+    color: #ffffff;
+    font-size: 28rpx;
+    margin-top: 10rpx;
+    line-height: 80rpx;
+    padding: 0rpx 0rpx;
+    text-align: center;
+    border-radius: 40rpx;
+    background-color: #e03519;
+  }
 }
 
 .popup {
-	.popup_title {
-		display: block;
-		overflow: hidden;
-		margin: 0rpx auto;
-		font-size: 36rpx;
-		height: 120rpx;
-		line-height: 120rpx;
-		padding: 0rpx 20rpx;
-		border-bottom: 10rpx solid #f8f8f8;
-
-		.to_addr_page {
-			float: right;
-			color: #f59a23;
-			display: block;
-			height: 120rpx;
-			line-height: 120rpx;
-			font-size: 26rpx;
-			padding: 0rpx 10rpx;
-		}
-	}
-
-	.coupon_list {
-		display: block;
-		overflow: hidden;
-		margin: 10rpx auto;
-		min-height: 600rpx;
-		background: #ffffff;
-		padding-bottom: 50rpx;
-
-		.coupon_item {
-			height: 200rpx;
-			display: block;
-			margin: 10rpx auto;
-			border-bottom: 2rpx solid #dddddd;
-
-			.box_left {
-				float: left;
-				width: 160rpx;
-				height: 160rpx;
-				font-size: 20rpx;
-				text-align: center;
-				margin-left: 35rpx;
-				line-height: 60rpx;
-				margin-top: 20rpx;
-				background: pink;
-
-				.rebate {
-					width: 120rpx;
-					height: 60rpx;
-					margin: 0rpx auto;
-					line-height: 60rpx;
-					margin-top: 20rpx;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-			}
-
-			.box_right {
-				float: left;
-				width: 485rpx;
-				margin-left: 35rpx;
-				padding-top: 20rpx;
-
-				.coupon_title {
-					width: 485rpx;
-					max-height: 80rpx;
-					font-size: 30rpx;
-					overflow: hidden;
-					line-height: 40rpx;
-					padding: 0rpx 0rpx;
-
-					.coupon_name {
-						float: left;
-						height: 40rpx;
-						width: 380rpx;
-					}
-
-					.coupon_status {
-						width: 85rpx;
-						float: right;
-						color: #999999;
-						font-size: 24rpx;
-					}
-				}
-
-				.product_scope {
-					width: 485rpx;
-					height: 80rpx;
-					color: #999999;
-					font-size: 24rpx;
-					overflow: hidden;
-					line-height: 80rpx;
-
-					.check_label {
-						float: right;
-						display: block;
-						overflow: hidden;
-						padding: 20rpx 20rpx;
-
-						.isstd {
-							line-height: 40rpx;
-						}
-
-						.checkbox {
-							float: right;
-							width: 40rpx;
-							height: 40rpx;
-						}
-					}
-				}
-
-				.coupon_info {
-					width: 485rpx;
-					max-height: 80rpx;
-					font-size: 30rpx;
-					overflow: hidden;
-					line-height: 40rpx;
-					padding: 0rpx 0rpx;
-
-					.coupon_exp {
-						float: left;
-						font-size: 20rpx;
-					}
-				}
-			}
-		}
-
-		.coupon_item:last-child {
-			border-bottom: none;
-		}
-	}
-
-	.addr_list {
-		width: 730rpx;
-		display: block;
-		overflow: hidden;
-		margin: 0rpx auto;
-		min-height: 500rpx;
-
-		.addr_item {
-			display: block;
-			font-size: 24rpx;
-			overflow: hidden;
-			line-height: 40rpx;
-			padding: 15rpx 10rpx;
-			border-radius: 15rpx;
-			border-bottom: 2rpx solid #dddddd;
-
-			.radio_label {
-				width: 40rpx;
-				float: left;
-				height: 50rpx;
-				padding-top: 30rpx;
-				margin-right: 20rpx;
-
-				.radio_icon {
-					float: left;
-					width: 40rpx;
-					height: 40rpx;
-				}
-			}
-
-			.contact_user {
-				float: left;
-				width: 640rpx;
-				display: block;
-				height: 50rpx;
-				font-size: 24rpx;
-				line-height: 50rpx;
-
-				.contact_name {
-					font-size: 26rpx;
-					font-weight: bold;
-					margin-right: 16rpx;
-				}
-
-				.contact_default {
-					color: #f59a23;
-					font-size: 20rpx;
-					margin-left: 16rpx;
-					border: 1rpx solid #f59a23;
-				}
-
-				.contact_shop {
-					float: right;
-					font-size: 26rpx;
-					margin-right: 16rpx;
-				}
-			}
-
-			.contact_addr {
-				float: left;
-				width: 640rpx;
-				display: block;
-				font-size: 24rpx;
-				line-height: 30rpx;
-				padding: 10rpx 5rpx;
-			}
-		}
-	}
-
-	.create_box {
-		height: 140rpx;
-		display: block;
-
-		.create_addr {
-			width: 700rpx;
-			height: 80rpx;
-			display: block;
-			color: #ffffff;
-			font-size: 30rpx;
-			overflow: hidden;
-			line-height: 80rpx;
-			padding: 0rpx 0rpx;
-			text-align: center;
-			margin: 0rpx auto;
-			margin-top: 20rpx;
-			border-radius: 40rpx;
-			background-color: #e03519;
-		}
-	}
+  .popup_title {
+    display: block;
+    overflow: hidden;
+    margin: 0rpx auto;
+    font-size: 36rpx;
+    height: 120rpx;
+    line-height: 120rpx;
+    padding: 0rpx 20rpx;
+    border-bottom: 10rpx solid #f8f8f8;
+
+    .to_addr_page {
+      float: right;
+      color: #f59a23;
+      display: block;
+      height: 120rpx;
+      line-height: 120rpx;
+      font-size: 26rpx;
+      padding: 0rpx 10rpx;
+    }
+  }
+
+  .coupon_list {
+    display: block;
+    overflow: hidden;
+    margin: 10rpx auto;
+    min-height: 600rpx;
+    background: #ffffff;
+    padding-bottom: 50rpx;
+
+    .coupon_item {
+      height: 200rpx;
+      display: block;
+      margin: 10rpx auto;
+      border-bottom: 2rpx solid #dddddd;
+
+      .box_left {
+        float: left;
+        width: 160rpx;
+        height: 160rpx;
+        font-size: 20rpx;
+        text-align: center;
+        margin-left: 35rpx;
+        line-height: 60rpx;
+        margin-top: 20rpx;
+        background: pink;
+
+        .rebate {
+          width: 120rpx;
+          height: 60rpx;
+          margin: 0rpx auto;
+          line-height: 60rpx;
+          margin-top: 20rpx;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .box_right {
+        float: left;
+        width: 485rpx;
+        margin-left: 35rpx;
+        padding-top: 20rpx;
+
+        .coupon_title {
+          width: 485rpx;
+          max-height: 80rpx;
+          font-size: 30rpx;
+          overflow: hidden;
+          line-height: 40rpx;
+          padding: 0rpx 0rpx;
+
+          .coupon_name {
+            float: left;
+            height: 40rpx;
+            width: 380rpx;
+          }
+
+          .coupon_status {
+            width: 85rpx;
+            float: right;
+            color: #999999;
+            font-size: 24rpx;
+          }
+        }
+
+        .product_scope {
+          width: 485rpx;
+          height: 80rpx;
+          color: #999999;
+          font-size: 24rpx;
+          overflow: hidden;
+          line-height: 80rpx;
+
+          .check_label {
+            float: right;
+            display: block;
+            overflow: hidden;
+            padding: 20rpx 20rpx;
+
+            .isstd {
+              line-height: 40rpx;
+            }
+
+            .checkbox {
+              float: right;
+              width: 40rpx;
+              height: 40rpx;
+            }
+          }
+        }
+
+        .coupon_info {
+          width: 485rpx;
+          max-height: 80rpx;
+          font-size: 30rpx;
+          overflow: hidden;
+          line-height: 40rpx;
+          padding: 0rpx 0rpx;
+
+          .coupon_exp {
+            float: left;
+            font-size: 20rpx;
+          }
+        }
+      }
+    }
+
+    .coupon_item:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .addr_list {
+    width: 730rpx;
+    display: block;
+    overflow: hidden;
+    margin: 0rpx auto;
+    min-height: 500rpx;
+
+    .addr_item {
+      display: block;
+      font-size: 24rpx;
+      overflow: hidden;
+      line-height: 40rpx;
+      padding: 15rpx 10rpx;
+      border-radius: 15rpx;
+      border-bottom: 2rpx solid #dddddd;
+
+      .radio_label {
+        width: 40rpx;
+        float: left;
+        height: 50rpx;
+        padding-top: 30rpx;
+        margin-right: 20rpx;
+
+        .radio_icon {
+          float: left;
+          width: 40rpx;
+          height: 40rpx;
+        }
+      }
+
+      .contact_user {
+        float: left;
+        width: 640rpx;
+        display: block;
+        height: 50rpx;
+        font-size: 24rpx;
+        line-height: 50rpx;
+
+        .contact_name {
+          font-size: 26rpx;
+          font-weight: bold;
+          margin-right: 16rpx;
+        }
+
+        .contact_default {
+          color: #f59a23;
+          font-size: 20rpx;
+          margin-left: 16rpx;
+          border: 1rpx solid #f59a23;
+        }
+
+        .contact_shop {
+          float: right;
+          font-size: 26rpx;
+          margin-right: 16rpx;
+        }
+      }
+
+      .contact_addr {
+        float: left;
+        width: 640rpx;
+        display: block;
+        font-size: 24rpx;
+        line-height: 30rpx;
+        padding: 10rpx 5rpx;
+      }
+    }
+  }
+
+  .create_box {
+    height: 140rpx;
+    display: block;
+
+    .create_addr {
+      width: 700rpx;
+      height: 80rpx;
+      display: block;
+      color: #ffffff;
+      font-size: 30rpx;
+      overflow: hidden;
+      line-height: 80rpx;
+      padding: 0rpx 0rpx;
+      text-align: center;
+      margin: 0rpx auto;
+      margin-top: 20rpx;
+      border-radius: 40rpx;
+      background-color: #e03519;
+    }
+  }
+}
+
+.price_content {
+  background-color: #fff;
+  position: fixed;
+  bottom: 140rpx;
+  padding: 16rpx 26rpx;
+  width: 100%;
+  .price_content_title {
+    font-weight: bold;
+    margin-bottom: 20rpx;
+  }
 }
 </style>

+ 258 - 0
pages/orders/detail.vue

@@ -0,0 +1,258 @@
+<template>
+  <view>
+    <view class="addr_item">
+      <view class="contact_user" style="display: flex; justify-content: space-between; width: 100%">
+        <view style="display: flex">
+          <text class="contact_name">{{ order_datail.order_addr?.contact_name }}</text>
+          <text class="contact_phone">{{ order_datail.order_addr?.contact_phone }}</text>
+        </view>
+        <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
+          <text v-if="order_datail.order_addr?.shop_type">({{ $CONSTANTS.SHOP_TYPES[order_datail.order_addr?.shop_type] }})&nbsp;</text>
+          {{ order_datail.order_addr?.contact_shop }}
+        </view>
+      </view>
+      <view class="contact_addr"
+        >{{ 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 class="car_list">
+      <view class="business_name">{{ order_datail?.business_name }}</view>
+
+      <view class="car_item" v-for="(item, index) in order_datail.order_items" :key="index">
+        <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>
+        <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>
+      <view class="price_content_item">
+        <view>优惠价格</view>
+        <view>¥-{{ order_datail?.coupon_total }}</view>
+      </view>
+      <view class="price_content_item">
+        <view>订单金额</view>
+        <view>¥{{ order_datail?.pay_total }}</view>
+      </view>
+      <view class="price_content_title">更多订单信息</view>
+      <view class="price_content_item">
+        <view>订单编号</view>
+        <view>{{ order_datail?.order_code }}</view>
+      </view>
+      <view class="price_content_item">
+        <view>下单时间</view>
+        <view>{{ order_datail?.insert_time }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      order_datail: {},
+    };
+  },
+  onLoad(param) {
+    this._getOrderDetail(param.order_id); // 获取并打印订单详情
+  },
+  methods: {
+    _getOrderDetail(orderId) {
+      this.$http
+        .request("api/orders/get_detail", { id: orderId })
+        .then((response) => {
+          if (response.code == "success") {
+            this.order_datail = response.data; // 打印订单详情
+          }
+        })
+        .catch((error) => {
+          uni.showToast({
+            title: "获取订单详情失败",
+            icon: "error",
+            duration: 2000,
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.addr_item {
+  font-size: 24rpx;
+  overflow: hidden;
+  line-height: 40rpx;
+  padding: 15rpx 10rpx;
+  border-radius: 15rpx;
+  padding-bottom: 0rpx;
+  margin-bottom: 10rpx;
+  background-color: #ffffff;
+  .contact_user {
+    font-size: 24rpx;
+    line-height: 50rpx;
+    .contact_name {
+      font-size: 26rpx;
+      font-weight: bold;
+      margin-right: 16rpx;
+    }
+    .contact_shop {
+      float: right;
+    }
+  }
+  .contact_addr {
+    font-size: 24rpx;
+    line-height: 30rpx;
+    padding: 10rpx 5rpx;
+    border-bottom: 2rpx solid #dddddd;
+  }
+}
+
+.car_list {
+  display: block;
+  overflow: hidden;
+  margin: 0rpx auto;
+  margin-top: 20rpx;
+  background: #ffffff;
+  padding-bottom: 210rpx;
+  .business_name {
+    padding: 8rpx 10rpx;
+    border: 1px solid #f44336;
+    font-size: 24rpx;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+  }
+  .car_item {
+    height: 170rpx;
+    display: block;
+    overflow: hidden;
+    margin: 0rpx auto;
+    padding: 20rpx 35rpx;
+    border-bottom: 2rpx solid #dddddd;
+
+    .box_left {
+      float: left;
+      width: 140rpx;
+      height: 190rpx;
+      margin-top: 10rpx;
+
+      .car_image {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 5rpx;
+      }
+    }
+
+    .box_center {
+      float: left;
+      width: 300rpx;
+      margin-left: 25rpx;
+
+      .car_name {
+        max-height: 70rpx;
+        font-size: 30rpx;
+        line-height: 40rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        /* 不换行 */
+        overflow: hidden;
+        /* 隐藏超出的内容 */
+        text-overflow: ellipsis;
+        /* 用省略号表示被隐藏的部分 */
+      }
+
+      .car_spec {
+        color: #999999;
+        font-size: 24rpx;
+        line-height: 60rpx;
+        max-height: 60rpx;
+        overflow: hidden;
+      }
+
+      .promo_title {
+        max-height: 80rpx;
+        font-size: 20rpx;
+        line-height: 40rpx;
+        overflow: hidden;
+        padding: 0rpx 0rpx;
+        color: #dd524d;
+      }
+
+      .car_price {
+        font-size: 30rpx;
+        line-height: 60rpx;
+
+        .price {
+          color: red;
+        }
+      }
+    }
+
+    .box_right {
+      float: right;
+      width: 185rpx;
+
+      .buy_num_box {
+        float: right;
+        color: #333333;
+        overflow: hidden;
+        font-size: 24rpx;
+        margin-top: 130rpx;
+        text-align: center;
+
+        .buy_num {
+          float: left;
+          width: 100rpx;
+          height: 30rpx;
+          font-size: 24rpx;
+          line-height: 30rpx;
+          padding: 0rpx 0rpx;
+          border-radius: 8rpx;
+        }
+      }
+    }
+  }
+
+  .car_item:last-child {
+    border-bottom: none;
+  }
+}
+
+.price_content {
+  background-color: #fff;
+  position: fixed;
+  bottom: var(--window-bottom);
+  padding: 16rpx 26rpx;
+  width: 100%;
+  box-sizing: border-box;
+  .price_content_title {
+    font-weight: bold;
+    margin-bottom: 20rpx;
+  }
+  .price_content_item {
+    margin-bottom: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 24rpx;
+  }
+}
+</style>

+ 8 - 1
pages/orders/index.vue

@@ -7,7 +7,7 @@
       <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">
+      <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>
@@ -207,6 +207,11 @@ export default {
         url: "/pages/orders/receipt?order_id=" + item.id,
       });
     },
+    goDetail(id) {
+      uni.navigateTo({
+        url: "/pages/orders/detail?order_id=" + id,
+      });
+    },
   },
 };
 </script>
@@ -260,6 +265,7 @@ export default {
       height: 100rpx;
       overflow: hidden;
       margin: 15rpx auto;
+      transition: all 1s ease-out; /* 添加过渡效果 */
       .product_item {
         display: block;
         height: 100rpx;
@@ -309,6 +315,7 @@ export default {
     .product_list.active {
       height: auto !important;
     }
+
     .order_price {
       display: block;
       height: 60rpx;

+ 337 - 345
pages/orders/receipt.vue

@@ -1,353 +1,345 @@
 <template>
-	<view>
-		<view class="order_info"  >
-			<view class="order_title" >
-				<view class="business_name">{{orderInfo.business_name}}</view>
-			</view>
-			<view  class="product_list" >
-				<view class="product_item" v-for="(product_info,k) in orderInfo.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>
-		</view>
-		<view class="upload_box">
-			<view class="image_box" @click="chooseImage()">
-				<image class="upload_image" :src="localImage" v-if="localImage"></image>
-				<text  class="upload_text" v-if="!localImage" >请点此处上传图片</text>
-			</view>
-		</view>
-		<view class="info_alter">
-			<view class="">
-				请谨慎上传回执,上传后无法修改
-			</view>
-			<view class="">
-				上传后有机会获得积分
-			</view>
-		</view>
-		<view class="btn_box">
-			<button class="upload_btn" v-if="localImage" @click="toApply()">提交</button>
-			<button class="upload_btn disable" v-if="!localImage">提交</button>
-		</view>
-		<uni-popup ref="sharePopup" type="center" :mask-click="false">
-			<view class="share_info">
-				<view class="state_icon">
-					<uni-icons type="checkbox" color="#07C160"></uni-icons>
-				</view>
-				<view class="state_text">图片上传成功</view>
-				<button class="share_btn" open-type="share">
-					<uni-icons type="weixin" color="#FFFFFF"></uni-icons>
-					<text>立即分享到微信群</text>
-				</button>
-				<view class="info_text">工作人员审核通过后将发放积分</view>
-			</view>
-		</uni-popup>
-	</view>
+  <view>
+    <view class="order_info">
+      <view class="order_title">
+        <view class="business_name">{{ orderInfo.business_name }}</view>
+      </view>
+      <view class="product_list">
+        <view class="product_item" v-for="(product_info, k) in orderInfo.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>
+    </view>
+    <view class="upload_box">
+      <view class="image_box" @click="chooseImage()">
+        <image class="upload_image" :src="localImage" v-if="localImage"></image>
+        <text class="upload_text" v-if="!localImage">请点此处上传图片</text>
+      </view>
+    </view>
+    <view class="info_alter">
+      <view class=""> 请谨慎上传回执,上传后无法修改 </view>
+      <view class=""> 上传后有机会获得积分 </view>
+    </view>
+    <view class="btn_box">
+      <button class="upload_btn" v-if="localImage" @click="toApply()">提交</button>
+      <button class="upload_btn disable" v-if="!localImage">提交</button>
+    </view>
+    <uni-popup ref="sharePopup" type="center" :mask-click="false">
+      <view class="share_info">
+        <view class="state_icon">
+          <uni-icons type="checkbox" color="#07C160"></uni-icons>
+        </view>
+        <view class="state_text">图片上传成功</view>
+        <button class="share_btn" open-type="share">
+          <uni-icons type="weixin" color="#FFFFFF"></uni-icons>
+          <text>立即分享到微信群</text>
+        </button>
+        <view class="info_text">工作人员审核通过后将发放积分</view>
+      </view>
+    </uni-popup>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				order_id:0,
-				localImage:"",
-				orderInfo:{},
-				shareInfo:{
-					title: "我已经完成一笔订单,你也快来吧",
-					path: '/pages/index/index',
-					imageUrl:"",
-				}
-			}
-		},
-		onLoad(param){
-			this.order_id = param.order_id;
-		},
-		onShow() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )	return ;
-			// 判断订单ID
-			if( this.order_id <= 0 ) {
-				uni.showModal({
-					content:"未知的活动ID",
-					showCancel:false,
-				})
-				return ;
-			}
-			// 没有数据的话,或者请求中,不允许刷新
-			if( this.isReqing ) 	return ;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/orders/get_item',{id:this.order_id}).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					this.orderInfo = re.data;
-				}else{
-					if( re.code != 'no_login' ){
-						uni.showModal({
-							content:re.msg,
-							showCancel:false,
-						})
-					}
-				}
-			});
-		},
-		onShareAppMessage(obj) {
-			return this.shareInfo;
-		},
-		methods: {
-			chooseImage(){
-				uni.chooseImage({
-					count: 1, // 默认9,设置图片的数量
-					sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
-					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
-					success: (chooseImageRes) => {
-						let tempFilePaths = chooseImageRes.tempFilePaths;
-						this.localImage = tempFilePaths[0];
-					},
-				})
-			},
-			toApply(){
-				// 判断订单ID
-				if( this.order_id <= 0 ) {
-					uni.showModal({
-						content:"未知的活动ID",
-						showCancel:false,
-					})
-					return ;
-				}
-				// 判断订单ID
-				if( !this.localImage ) {
-					uni.showModal({
-						content:"请上传图片",
-						showCancel:false,
-					})
-					return ;
-				}
-				// 没有数据的话,或者请求中,不允许刷新
-				if( this.isReqing ) 	return ;
-				// 请求中
-				uni.showLoading();
-				// 设置请求中
-				this.isReqing			= true;
-				// 请求列表
-				this.$http.fileupload('api/orders_receipt/apply',this.localImage,{order_id:this.order_id}).then((re)=>{
-					// 设置非请求中
-					uni.hideLoading();
-					// 成功结果
-					if( re.code == 'success' ){
-						// 赋值
-						this.shareInfo		= re.data.share_info;
-						// 弹出提示
-						this.$refs.sharePopup.open('center');
-					}else{
-						if( re.code != 'no_login' ){
-							// 设置请求中
-							this.isReqing	= false;
-							// 允许请求
-							uni.showModal({
-								content:re.msg,
-								showCancel:false,
-							})
-						}
-					}
-				});
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      order_id: 0,
+      localImage: "",
+      orderInfo: {},
+      shareInfo: {
+        title: "我已经完成一笔订单,你也快来吧",
+        path: "/pages/index/index",
+        imageUrl: "",
+      },
+    };
+  },
+  onLoad(param) {
+    this.order_id = param.order_id;
+  },
+  onShow() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 判断订单ID
+    if (this.order_id <= 0) {
+      uni.showModal({
+        content: "未知的活动ID",
+        showCancel: false,
+      });
+      return;
+    }
+    // 没有数据的话,或者请求中,不允许刷新
+    if (this.isReqing) return;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/orders/get_item", { id: this.order_id }).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        this.orderInfo = re.data;
+      } else {
+        if (re.code != "no_login") {
+          uni.showModal({
+            content: re.msg,
+            showCancel: false,
+          });
+        }
+      }
+    });
+  },
+  onShareAppMessage(obj) {
+    return this.shareInfo;
+  },
+  methods: {
+    chooseImage() {
+      uni.chooseImage({
+        count: 1, // 默认9,设置图片的数量
+        sizeType: ["compressed"], // 可以指定是原图还是压缩图,默认二者都有
+        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
+        success: (chooseImageRes) => {
+          let tempFilePaths = chooseImageRes.tempFilePaths;
+          this.localImage = tempFilePaths[0];
+        },
+      });
+    },
+    toApply() {
+      // 判断订单ID
+      if (this.order_id <= 0) {
+        uni.showModal({
+          content: "未知的活动ID",
+          showCancel: false,
+        });
+        return;
+      }
+      // 判断订单ID
+      if (!this.localImage) {
+        uni.showModal({
+          content: "请上传图片",
+          showCancel: false,
+        });
+        return;
+      }
+      // 没有数据的话,或者请求中,不允许刷新
+      if (this.isReqing) return;
+      // 请求中
+      uni.showLoading();
+      // 设置请求中
+      this.isReqing = true;
+      // 请求列表
+      this.$http.fileupload("api/orders_receipt/apply", this.localImage, { order_id: this.order_id }).then((re) => {
+        // 设置非请求中
+        uni.hideLoading();
+        // 成功结果
+        if (re.code == "success") {
+          // 赋值
+          this.shareInfo = re.data.share_info;
+          // 弹出提示
+          this.$refs.sharePopup.open("center");
+        } else {
+          if (re.code != "no_login") {
+            // 设置请求中
+            this.isReqing = false;
+            // 允许请求
+            uni.showModal({
+              content: re.msg,
+              showCancel: false,
+            });
+          }
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.order_info{
-		display: block;
-		background: #FFFFFF;
-		margin: 0rpx auto;
-		padding: 0rpx 35rpx;
-		margin-bottom: 10rpx;
-		.order_title{
-			width: 100%;
-			height: 60rpx;
-			display: block;
-			overflow: hidden;
-			line-height: 60rpx;
-			.business_name{
-				float: left;
-				font-size: 32rpx;
-			}
-			.order_status{
-				float: right;
-				color: #999999;
-				font-size: 24rpx;
-			}
-		}
-		.product_list{
-			display: block;
-			overflow: hidden;
-			margin: 15rpx auto;
-			.product_item{
-				display: block;
-				height: 100rpx;
-				overflow: hidden;
-				.product_img{
-					float: left;
-					width: 80rpx;
-					height: 80rpx;
-					display: block;
-					margin-top: 10rpx;
-					margin-right: 30rpx;
-				}
-				.product_info{
-					float: left;
-					width: 480rpx;
-					height: 100rpx;
-					display: block;
-					overflow: hidden;
-					.product_name{
-						display: block;
-						height: 60rpx;
-						display: block;
-						font-size: 28rpx;
-						line-height: 60rpx;
-						overflow: hidden;
-					}
-					.product_spec{
-						color: #999999;
-						height: 40rpx;
-						display: block;
-						font-size: 24rpx;
-						line-height: 40rpx;
-						overflow: hidden;
-					}
-				}
-				.buy_num{
-					float: right;
-					height: 100rpx;
-					color: #999999;
-					font-size: 26rpx;
-					text-align: right;
-					position: relative;
-					line-height: 100rpx;
-				}
-			}
-		}
-		.product_list.active{
-			height: auto !important;
-		}
-	}
-	.upload_box{
-		display: block;
-		width: 750rpx;
-		height: 410rpx;
-		margin-top: 20rpx;
-		text-align: center;
-		padding: 20rpx 0rpx;
-		background-color: #FFFFFF;
-		.image_box{
-			width: 400rpx;
-			height: 400rpx;
-			display: block;
-			color: #999999;
-			font-size: 28rpx;
-			margin: 0rpx auto;
-			line-height: 400rpx;
-			border: 2rpx solid #999999;
-			.upload_image{
-				width: 400rpx;
-				height: 400rpx;
-			}
-		}
-	}
-	.info_alter{
-		// color: #E03519;
-		display: block;
-		font-size: 26rpx;
-		overflow: hidden;
-		line-height: 60rpx;
-		text-align: center;
-		margin: 0rpx auto;
-		background-color: #FFFFFF;
-	}
-	.btn_box{
-		display: block;
-		overflow: hidden;
-		margin: 20rpx auto;
-		.upload_btn{
-			color: #FFFFFF;
-			display: block;
-			width: 680rpx;
-			height: 80rpx;
-			margin: 0 auto;
-			font-size: 28rpx;
-			line-height: 80rpx;
-			padding: 0rpx 0rpx;
-			border-radius: 10rpx;
-			background-color: #07C160;
-		}
-		.upload_btn.disable{
-			background-color: #999999;
-		}
-		.upload_btn::after{
-			border: none;
-		}
-	}
-	.share_info{
-		width: 600rpx;
-		height: 600rpx;
-		background-color: #FFFFFF;
-		.state_icon{
-			width: 240rpx;
-			height: 240rpx;
-			display: block;
-			margin: 20rpx auto;
-			text-align: center;
-			font-size: 240rpx !important;
-			.uni-icons{
-				font-size: 240rpx !important;
-			}
-		}
-		.state_text{
-			height: 80rpx;
-			display: block;
-			font-size: 32rpx;
-			margin: 20rpx auto;
-			line-height: 80rpx;
-			text-align: center;
-		}
-		.share_btn{
-			color: #FFFFFF;
-			display: block;
-			width: 560rpx;
-			height: 80rpx;
-			font-size: 30rpx;
-			margin: 20rpx auto;
-			line-height: 80rpx;
-			padding: 0rpx 0rpx;
-			border-radius: 10rpx;
-			background-color: #07C160;
-			.uni-icons{
-				margin-right: 20rpx;
-				font-size: 36rpx !important;
-			}
-		}
-		.info_text{
-			height: 60rpx;
-			display: block;
-			font-size: 26rpx;
-			margin-top: 20rpx;
-			line-height: 60rpx;
-			text-align: center;
-		}
-	}
+.order_info {
+  display: block;
+  background: #ffffff;
+  margin: 0rpx auto;
+  padding: 0rpx 35rpx;
+  margin-bottom: 10rpx;
+  .order_title {
+    width: 100%;
+    height: 60rpx;
+    display: block;
+    overflow: hidden;
+    line-height: 60rpx;
+    .business_name {
+      float: left;
+      font-size: 32rpx;
+    }
+    .order_status {
+      float: right;
+      color: #999999;
+      font-size: 24rpx;
+    }
+  }
+  .product_list {
+    display: block;
+    overflow: hidden;
+    margin: 15rpx auto;
+    .product_item {
+      display: block;
+      height: 100rpx;
+      overflow: hidden;
+      .product_img {
+        float: left;
+        width: 80rpx;
+        height: 80rpx;
+        display: block;
+        margin-top: 10rpx;
+        margin-right: 30rpx;
+      }
+      .product_info {
+        float: left;
+        width: 480rpx;
+        height: 100rpx;
+        display: block;
+        overflow: hidden;
+        .product_name {
+          display: block;
+          height: 60rpx;
+          display: block;
+          font-size: 28rpx;
+          line-height: 60rpx;
+          overflow: hidden;
+        }
+        .product_spec {
+          color: #999999;
+          height: 40rpx;
+          display: block;
+          font-size: 24rpx;
+          line-height: 40rpx;
+          overflow: hidden;
+        }
+      }
+      .buy_num {
+        float: right;
+        height: 100rpx;
+        color: #999999;
+        font-size: 26rpx;
+        text-align: right;
+        position: relative;
+        line-height: 100rpx;
+      }
+    }
+  }
+  .product_list.active {
+    height: auto !important;
+  }
+}
+.upload_box {
+  display: block;
+  width: 750rpx;
+  height: 410rpx;
+  margin-top: 20rpx;
+  text-align: center;
+  padding: 20rpx 0rpx;
+  background-color: #ffffff;
+  .image_box {
+    width: 400rpx;
+    height: 400rpx;
+    display: block;
+    color: #999999;
+    font-size: 28rpx;
+    margin: 0rpx auto;
+    line-height: 400rpx;
+    border: 2rpx solid #999999;
+    .upload_image {
+      width: 400rpx;
+      height: 400rpx;
+    }
+  }
+}
+.info_alter {
+  // color: #E03519;
+  display: block;
+  font-size: 26rpx;
+  overflow: hidden;
+  line-height: 60rpx;
+  text-align: center;
+  margin: 0rpx auto;
+  background-color: #ffffff;
+}
+.btn_box {
+  display: block;
+  overflow: hidden;
+  margin: 20rpx auto;
+  .upload_btn {
+    color: #ffffff;
+    display: block;
+    width: 680rpx;
+    height: 80rpx;
+    margin: 0 auto;
+    font-size: 28rpx;
+    line-height: 80rpx;
+    padding: 0rpx 0rpx;
+    border-radius: 10rpx;
+    background-color: #07c160;
+  }
+  .upload_btn.disable {
+    background-color: #999999;
+  }
+  .upload_btn::after {
+    border: none;
+  }
+}
+.share_info {
+  width: 600rpx;
+  height: 600rpx;
+  background-color: #ffffff;
+  .state_icon {
+    width: 240rpx;
+    height: 240rpx;
+    display: block;
+    margin: 20rpx auto;
+    text-align: center;
+    font-size: 240rpx !important;
+    .uni-icons {
+      font-size: 240rpx !important;
+    }
+  }
+  .state_text {
+    height: 80rpx;
+    display: block;
+    font-size: 32rpx;
+    margin: 20rpx auto;
+    line-height: 80rpx;
+    text-align: center;
+  }
+  .share_btn {
+    color: #ffffff;
+    display: block;
+    width: 560rpx;
+    height: 80rpx;
+    font-size: 30rpx;
+    margin: 20rpx auto;
+    line-height: 80rpx;
+    padding: 0rpx 0rpx;
+    border-radius: 10rpx;
+    background-color: #07c160;
+    .uni-icons {
+      margin-right: 20rpx;
+      font-size: 36rpx !important;
+    }
+  }
+  .info_text {
+    height: 60rpx;
+    display: block;
+    font-size: 26rpx;
+    margin-top: 20rpx;
+    line-height: 60rpx;
+    text-align: center;
+  }
+}
 </style>

BIN
static/icon/checkbox_disabled.png