zh_order_food_xcx/pages/order/index.vue

<template>
  <view class="flex-common-css box-border-box">
    <Nav class="nav-b" :leftShow='false' :customNav='true' bgckgroundBox='#fff'>
      <template>
        <view slot="custom" class="text-align-center fw-600 fs-36">
          我的订单
        </view>
      </template>
    </Nav>
    <view class="nav-box box-border-box bgc-f display-flex">
      <view class="nav-item" :class="type == item.id?'fs-36 fw-600':'fs-34 fw-400'" v-for="(item,i) in navList" :key="i"
        @click="selectType(item.id)">
        {{item.name}}
        <view v-if="type == item.id" class="nav-item-x"></view>
      </view>
    </view>
    <scroll-view class="nav-type-box bgc-f p-12-24 box-border-box" :scroll-x="true">
      <view class="nav-type-item text-align-center fs-28" v-for="(item,index) in navTypeData"
        @click="navTypeClick(item.key)"
        :class="navTypeKey== item.key?'bgc-E4F3FD fw-600 fc-41ABF5':'bgc-F4F5F7 fw-400 fc-3'">
        {{item.name}}
      </view>
    </scroll-view>

    <view v-if="list.length == 0" class="scroll-view-css">
      <EnBlank :customSrc='true'>
        <template v-slot:blankImg>
          <image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
        </template>
      </EnBlank>
    </view>

    <scroll-view v-else :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
      <view class="list-box">
        <view class="list-item bgc-f b-rad-20 mb-32 p-24 box-border-box" v-for="(item,index) in list"
          @click="goToInfo(item)">
          <view class="align-items-center flex-justify-space mb-24">
            <view class="align-items-center">
              <image v-if="item.site_logo" class="shops-img" :src="item.site_logo" mode="aspectFit">
              </image>
              <image v-else-if="item.shop_logo" class="shops-img" :src="item.shop_logo" mode="aspectFit">
              </image>
              <image v-else class="shops-img" src="@/static/img/logo/logo.png" mode=""></image>
              <view v-if="item.site_name" class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
                {{item.site_name}}
              </view>
              <view @click="goToShop(item)" v-else-if="item.shop_name"
                class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
                {{item.shop_name}}
              </view>
              <view v-else class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
                君子校园
              </view>
              <!-- <image class="icons" src="@/static/img/toRight.png" mode=""></image> -->
            </view>
            <view class="fc-41ABF5 fs-28">
              {{item.order_status_str}}
            </view>
          </view>
          <view class="align-items-center flex-justify-space mb-24">
            <view class="goods-box" v-if="type == 1 || type == 2 || type == 5">
              <view class="" v-if="item.item.length == 1">
                <view class="align-items-center" v-for="(itemGoods,indexGoods) in item.item">
                  <image class="goods-img flex-shrink0" :src="itemGoods.goods_img" mode="aspectFit">
                  </image>
                  <view class="fs-28 fc-6 text-overflow-ellipsis">
                    {{itemGoods.goods_name}}
                  </view>
                </view>
              </view>
              <view class="align-items-center goods-two" v-else>
                <view class="flex-direction" v-for="(itemGoods,indexGoods) in item.item">
                  <image class="goods-img flex-shrink0" :src="itemGoods.goods_img" mode="aspectFit">
                  </image>
                  <view class="fs-28 fc-6 text-overflow-ellipsis-one goods-two-name text-align-center">
                    {{itemGoods.goods_name}}
                  </view>
                </view>
              </view>
            </view>
            <view class="goods-box" v-else>
              <view class="align-items-center">
                <image class="goods-img flex-shrink0" :src="item.goods_img" mode="aspectFit">
                </image>
                <view class="fs-28 fc-6 text-overflow-ellipsis">
                  {{item.goods_name}}
                </view>
              </view>
            </view>
            <view class="goods-num text-align-center">
              共 {{item.goods_number}} 件
            </view>
          </view>
          <view class="align-items-center flex-justify-space mb-24">
            <view class="fs-24 fc-9">
              下单时间：{{item.created_at}}
            </view>
            <view class="fs-28 fc-9">
              {{item.order_status == 1?'需付':'实付'}} <text class="fs-32 fc-3 fw-600">￥{{item.pay_money}}</text>
            </view>
          </view>
          <view class="align-items-center flex-justify-end">
            <view class="item-but but-class-two fs-28 mr-18" @click="assess(item)"
              v-if="type == 1 && item.order_status == 7 && item.is_comment == 0">
              评价
            </view>
            <view class="item-but but-class-two fs-28 mr-18" @click.stop="tackOut(item)"
              v-if="type == 1 && item.order_status == 2 || type == 1 && item.order_status == 4">
              <!-- 外卖 -->
              取消订单
            </view>
            <view class="item-but but-class-two fs-28 mr-18" @click.stop="cancel(item)"
              v-if="type == 5 && item.order_status == 2">
              <!-- 干洗 -->
              取消订单
            </view>
            <view class="item-but but-class-two fs-28 mr-18" @click.stop="expressCancel(item)"
              v-if="type == 2 && item.order_status == 2">
              <!-- 代取 -->
              取消订单
            </view>
            <view class="item-but but-class-one fs-28 mr-18" @click.stop="orderPay(item)" v-if="item.order_status == 1">
              立即支付
            </view>
            <view class="item-but but-class-one fs-28" @click.stop="openCode(item)"
              v-if="type == 5 && item.order_status == 2 || type == 5 && item.order_status == 4">
              二维码
            </view>
            <view @click.stop="goToUrl('takeOut', item)" class="item-but but-class-one fs-28 mr-18"
              v-if="type == 1 && item.order_status == 3 || type == 1 && item.order_status == 7 || type == 1 && item.order_status == 8 || type == 1 && item.order_status == 9 || type == 1 && item.order_status == 10">
              <!-- 外卖 -->
              再来一单
            </view>
            <view @click.stop="goToUrl('express', item)" class="item-but but-class-one fs-28 mr-18"
              v-if="type == 2 && item.order_status == 4 || type == 2 && item.order_status == 5 || type == 2 && item.order_status == 6">
              <!-- 代取 -->
              再来一单
            </view>
            <view @click.stop="goToUrl('group', item)" class="item-but but-class-one fs-28 mr-18"
              v-if="type == 3 && item.order_status == 2 || type == 3 && item.order_status == 4">
              <!-- 团购 -->
              再来一单
            </view>
            <view @click.stop="goToUrl('ticket', item)" class="item-but but-class-one fs-28 mr-18"
              v-if="type == 4 && item.order_status == 2 || type == 4 && item.order_status == 4">
              <!-- 票务 -->
              再来一单
            </view>
            <view @click.stop="goToUrl('laundry', item)" class="item-but but-class-one fs-28 mr-18"
              v-if="type == 5 && item.order_status == 5 || type == 5 && item.order_status == 6 || type == 5 && item.order_status == 7">
              <!-- 干洗 -->
              再来一单
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <uni-popup ref="popup" border-radius="10px 10px 10px 10px" @maskClick='maskClick'>
      <view class="bgc-f b-rad-20" v-if="qrcodeData">
        <!-- <UniQrcode :text="qrcodeData"></UniQrcode> -->
        <uv-qrcode class="b-rad-20" ref="qrcode" :value="qrcodeData" :options="options2"></uv-qrcode>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  // import UniQrcode from 'uniapp-qrcode'
  import tools from '@/service/tools';
  import EnBlank from "@/components/en-utils/en-blank/en-blank";
  import {
    orderStatus,
    orderList,
    orderCancel,
    orderPay
  } from "@/api/order.js"
  import {
    getExpressPay
  } from "@/api/express.js"
  import {
    expressOrderStatus,
    expressOrderList,
    expressOrderCancel
  } from "@/api/expressOrder.js"
  import {
    groupPay
  } from '@/api/groupOrder.js';
  import {
    groupOrderStatus,
    groupOrderList
  } from "@/api/groupOrder.js"
  import {
    ticketPay
  } from '@/api/ticket.js';
  import {
    ticketOrderStatus,
    ticketOrderList
  } from "@/api/ticketOrder.js"
  import {
    laundryOrderStatus,
    laundryOrderList,
    laundryOrderCancel,
    laundryPay
  } from "@/api/laundryOrder.js"
  export default {
    components: {
      EnBlank
    },
    data() {
      return {
        type: 1,
        navList: [{
            name: '外卖',
            id: 1
          },
          {
            name: '代取',
            id: 2
          },
          {
            name: '团购',
            id: 3
          },
          {
            name: '票务',
            id: 4
          },
          {
            name: '干洗',
            id: 5
          },
        ],
        page: 1,
        list: [],
        total: 0,
        navTypeData: [],
        navTypeKey: 0,
        isAjax: false,
        qrcodeData: '',
        options2: {}
      };
    },
    onShow() {
      let orderPayType = uni.getStorageSync('orderPayType')
      let orderInfoType = uni.getStorageSync('orderInfoType')
      console.log(orderPayType, 'orderPayType');
      if (orderPayType) {
        this.selectType(orderPayType)
        console.log('固定type');
      } else if (orderInfoType) {
        return
      } else {
        this.resetList();
      }
    },
    onLoad() {
      uni.$on('takeOutData', (data) => {
        console.log(data, '^^^^^^^^^^^^^^^^^^^^^^^^^^^^');
        this.list.forEach((v, k) => {
          if (v.id == data.id) {
            v.order_status = data.order_status
            v.order_status_str = data.order_status_str
          }
        })
        this.$forceUpdate()
        uni.removeStorageSync('orderInfoType')
        console.log(this.list, 'this.list');
      })

    },
    onHide() {
      uni.removeStorageSync('orderPayType')
    },
    onUnload() {},
    mounted() {},
    methods: {
      openCode(item) {
        let m_id = uni.getStorageSync('m_id');
        this.qrcodeData = m_id + "_" + item.order_sn
        this.options2 = {
          size: 300,
          margin: 10
        }
        uni.hideTabBar()
        this.$refs.popup.open('center')
      },
      maskClick() {
        this.$refs.popup.close()
        this.qrcodeData = ''
        uni.showTabBar()
      },
      goToShop(item) {
        // 进入店铺
        uni.navigateTo({
          url: '/pages-takeout/shop?shop_id=' + item.shop_id
        })
      },
      goToUrl(type, item) {
        // 再来一单
        if (type == 'takeOut') {
          // uni.navigateTo({
          // 	url: '/pages-takeout/takeout'
          // })
          uni.navigateTo({
            url: '/pages-takeout/shop?shop_id=' + item.shop_id
          })
        } else if (type == 'express') {
          uni.navigateTo({
            url: '/pages-takeout/replace-take'
          })
        } else if (type == 'group') {
          uni.navigateTo({
            url: '/pages-buy/group'
          })
        } else if (type == 'ticket') {
          uni.navigateTo({
            url: '/pages-buy/ticket'
          })
        } else if (type == 'laundry') {
          uni.navigateTo({
            url: '/pages-buy/dry-clean'
          })
        }
      },
      goToInfo(item) {
        if (this.type === 1) {
          uni.navigateTo({
            url: `/pages-order/takeout-info?orderId=` + item.id
          })
        } else if (this.type === 2) {
          uni.navigateTo({
            url: `/pages-order/express-info?orderId=` + item.id
          })
        } else if (this.type === 3) {
          uni.navigateTo({
            url: `/pages-order/group-info?orderId=` + item.id
          })
        } else if (this.type === 4) {
          uni.navigateTo({
            url: `/pages-order/ticket-info?orderId=` + item.id
          })
        } else if (this.type === 5) {
          uni.navigateTo({
            url: `/pages-order/laundry-info?orderId=` + item.id
          })
        }
        uni.setStorageSync('orderInfoType', this.type)
      },
      orderPay(item) {
        // 立即支付
        if (this.type === 1) {
          this.takeawayPay(item.id)
        } else if (this.type === 2) {
          this.getExpressPay(item.id)
        } else if (this.type === 3) {
          this.groupPay(item.id)
        } else if (this.type === 4) {
          this.ticketPay(item.id)
        } else if (this.type === 5) {
          this.laundryPay(item.id)
        }
      },
      navTypeClick(key) {
        if (this.navTypeKey != key) {
          this.navTypeKey = key
          this.page = 1
          this.list = []
          if (this.type === 1) {
            this.orderList()
          } else if (this.type === 2) {
            this.expressOrderList()
          } else if (this.type === 3) {
            this.groupOrderList()
          } else if (this.type === 4) {
            this.ticketOrderList()
          } else if (this.type === 5) {
            this.laundryOrderList()
          }
        }
      },
      resetList() {
        this.page = 1;
        this.list = [];
        this.getList();
        uni.removeStorageSync('orderPayType')
      },
      selectType(type) {
        let orderPayType = uni.getStorageSync('orderPayType')
        if (type != this.type || orderPayType) {
          this.type = type;
          this.navTypeKey = 0
          this.resetList();
        }
      },
      assess(item) {
        // 外卖评价
        uni.navigateTo({
          url: `/pages-my/appraise?orderId=` + item.id + '&shopName=' + item.shop_name + '&shopLogo=' +
            item.shop_logo
        })
      },
      tackOut(item) {
        // 外卖取消订单
        uni.showModal({
          title: '提示',
          content: '是否取消订单？',
          confirmText: '确定',
          confirmColor: '#FB3D03',
          success: (res) => {
            if (res.confirm === true) {
              if (this.isAJAX) {
                return
              }
              this.isAJAX = true;
              orderCancel({
                order_id: item.id
              }).then((res) => {
                if (res.code == 1) {
                  tools.success(res.msg)
                  setTimeout(() => {
                    this.page = 1;
                    this.list = [];
                    this.orderList()
                  }, 1500)
                  this.isAJAX = false;
                } else {
                  tools.error(res.msg)
                  this.isAJAX = false;
                }
              })
            }
          }
        });
      },
      expressCancel(item) {
        // 代取取消订单
        uni.showModal({
          title: '提示',
          content: '是否取消订单？',
          confirmText: '确定',
          confirmColor: '#FB3D03',
          success: (res) => {
            if (res.confirm === true) {
              if (this.isAJAX) {
                return
              }
              this.isAJAX = true;
              expressOrderCancel({
                order_id: item.id
              }).then((res) => {
                if (res.code == 1) {
                  tools.success(res.msg)
                  setTimeout(() => {
                    this.page = 1;
                    this.list = [];
                    this.expressOrderList()
                  }, 1500)
                  this.isAJAX = false;
                } else {
                  tools.error(res.msg)
                  this.isAJAX = false;
                }
              })
            }
          }
        });
      },
      cancel(item) {
        // 干洗取消订单
        uni.showModal({
          title: '提示',
          content: '是否取消订单？',
          confirmText: '确定',
          confirmColor: '#FB3D03',
          success: (res) => {
            if (res.confirm === true) {
              if (this.isAJAX) {
                return
              }
              this.isAJAX = true;
              laundryOrderCancel({
                order_id: item.id
              }).then((res) => {
                if (res.code == 1) {
                  tools.success(res.msg)
                  setTimeout(() => {
                    this.page = 1;
                    this.list = [];
                    this.laundryOrderList()
                  }, 1500)
                  this.isAJAX = false;
                } else {
                  tools.error(res.msg)
                  this.isAJAX = false;
                }
              })
            }
          }
        });
      },
      scrolltolower() {
        ++this.page
        if (this.type === 1) {
          this.orderList()
        } else if (this.type === 2) {
          this.expressOrderList()
        } else if (this.type === 3) {
          this.groupOrderList()
        } else if (this.type === 4) {
          this.ticketOrderList()
        } else if (this.type === 5) {
          this.laundryOrderList()
        }
        // console.log('触底');
      },
      getList() {
        if (this.type === 1) {
          this.orderStatus()
          this.orderList()
        } else if (this.type === 2) {
          this.expressOrderStatus()
          this.expressOrderList()
        } else if (this.type === 3) {
          this.groupOrderStatus()
          this.groupOrderList()
        } else if (this.type === 4) {
          this.ticketOrderStatus()
          this.ticketOrderList()
        } else if (this.type === 5) {
          this.laundryOrderStatus()
          this.laundryOrderList()
        }
      },
      expressOrderStatus() {
        // 代取订单状态
        expressOrderStatus().then((res) => {
          if (res.code == 1) {
            this.navTypeData = res.data
          }
        })
      },
      orderStatus() {
        // 外卖订单状态
        orderStatus().then((res) => {
          if (res.code == 1) {
            this.navTypeData = res.data
          }
        })
      },
      groupOrderStatus() {
        // 团购订单状态
        groupOrderStatus().then((res) => {
          if (res.code == 1) {
            this.navTypeData = res.data
          }
        })
      },
      ticketOrderStatus() {
        // 票务订单状态
        ticketOrderStatus().then((res) => {
          if (res.code == 1) {
            this.navTypeData = res.data
          }
        })
      },
      laundryOrderStatus() {
        // 干洗订单状态
        laundryOrderStatus().then((res) => {
          if (res.code == 1) {
            this.navTypeData = res.data
          }
        })
      },
      orderList() {
        // 外卖订单列表
        orderList({
          status: this.navTypeKey,
          page: this.page
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.items.length > 0) {
              this.list.push(...res.data.items)
            }
          }
        })
      },
      expressOrderList() {
        // 代取订单列表
        expressOrderList({
          status: this.navTypeKey,
          page: this.page
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.items.length > 0) {
              this.list.push(...res.data.items)
            }
          }
        })
      },
      groupOrderList() {
        // 团购订单列表
        groupOrderList({
          status: this.navTypeKey,
          page: this.page
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.items.length > 0) {
              this.list.push(...res.data.items)
            }
          }
        })
      },
      ticketOrderList() {
        // 票务订单列表
        ticketOrderList({
          status: this.navTypeKey,
          page: this.page
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.items.length > 0) {
              this.list.push(...res.data.items)
            }
          }
        })
      },
      laundryOrderList() {
        // 干洗订单列表
        laundryOrderList({
          status: this.navTypeKey,
          page: this.page
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.items.length > 0) {
              this.list.push(...res.data.items)
            }
          }
        })
      },
      takeawayPay(id) {
        // 外卖支付
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        orderPay({
          order_id: id
        }).then((ret) => {
          if (ret.code === 1) {
            uni.requestPayment({
              provider: "wxpay", //支付类型-固定值
              timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
              nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
              package: ret.data.wx_pay.package, // 固定值
              signType: ret.data.wx_pay.signType, //固定值
              paySign: ret.data.wx_pay.paySign, //签名
              success: (ren) => {
                tools.success("支付成功");
                this.isAJAX = false;
                this.page = 1;
                this.list = [];
                this.orderList()
              },
              fail: (err) => {
                this.isAJAX = false;
                tools.error("支付失败");
              },
            });
          } else {
            this.isAJAX = false;
            tools.error("支付失败");
          }
        })
      },
      getExpressPay(id) {
        // 代取支付
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        getExpressPay({
          order_id: id
        }).then((ret) => {
          if (ret.code === 1) {
            uni.requestPayment({
              provider: "wxpay", //支付类型-固定值
              timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
              nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
              package: ret.data.wx_pay.package, // 固定值
              signType: ret.data.wx_pay.signType, //固定值
              paySign: ret.data.wx_pay.paySign, //签名
              success: (ren) => {
                tools.success("支付成功");
                this.isAJAX = false;
                this.page = 1;
                this.list = [];
                this.expressOrderList()
              },
              fail: (err) => {
                this.isAJAX = false;
                tools.error("支付失败");
              },
            });
          } else {
            this.isAJAX = false;
            tools.error("支付失败");
          }
        })
      },
      groupPay(id) {
        // 团购支付
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        groupPay({
          order_id: id
        }).then((ret) => {
          if (ret.code === 1) {
            uni.requestPayment({
              provider: "wxpay", //支付类型-固定值
              timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
              nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
              package: ret.data.wx_pay.package, // 固定值
              signType: ret.data.wx_pay.signType, //固定值
              paySign: ret.data.wx_pay.paySign, //签名
              success: (ren) => {
                tools.success("支付成功");
                this.isAJAX = false;
                this.page = 1;
                this.list = [];
                this.groupOrderList()
              },
              fail: (err) => {
                this.isAJAX = false;
                tools.error("支付失败");
              },
            });
          } else {
            this.isAJAX = false;
            tools.error("支付失败");
          }
        })
      },
      ticketPay(id) {
        // 票务支付
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        ticketPay({
          order_id: id
        }).then((ret) => {
          if (ret.code === 1) {
            uni.requestPayment({
              provider: "wxpay", //支付类型-固定值
              timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
              nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
              package: ret.data.wx_pay.package, // 固定值
              signType: ret.data.wx_pay.signType, //固定值
              paySign: ret.data.wx_pay.paySign, //签名
              success: (ren) => {
                tools.success("支付成功");
                this.isAJAX = false;
                this.page = 1;
                this.list = [];
                this.ticketOrderList()
              },
              fail: (err) => {
                this.isAJAX = false;
                tools.error("支付失败");
              },
            });
          } else {
            this.isAJAX = false;
            tools.error("支付失败");
          }
        })
      },
      laundryPay(id) {
        // 干洗支付
        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        laundryPay({
          order_id: id
        }).then((ret) => {
          if (ret.code === 1) {
            uni.requestPayment({
              provider: "wxpay", //支付类型-固定值
              timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
              nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
              package: ret.data.wx_pay.package, // 固定值
              signType: ret.data.wx_pay.signType, //固定值
              paySign: ret.data.wx_pay.paySign, //签名
              success: (ren) => {
                tools.success("支付成功");
                this.isAJAX = false;
                this.page = 1;
                this.list = [];
                this.laundryOrderList()
              },
              fail: (err) => {
                this.isAJAX = false;
                tools.error("支付失败");
              },
            });
          } else {
            this.isAJAX = false;
            tools.error("支付失败");
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .nav-b {
    position: relative;
    z-index: -1 !important;
  }

  .nav-box {
    padding: 26rpx 44rpx;
    overflow-x: scroll;

    .nav-item {
      margin-right: 76rpx;
      white-space: nowrap;
      position: relative;

      .nav-item-x {
        position: absolute;
        width: 48rpx;
        height: 6rpx;
        border-radius: 20rpx;
        background-color: #41ABF5;
        left: 12rpx;
        bottom: -10rpx;
      }
    }
  }

  .nav-type-box {
    width: 100%;
    white-space: nowrap;
  }

  .nav-type-item {
    width: 144rpx;
    height: 64rpx;
    line-height: 64rpx;
    margin: 0 24rpx 0 0;
    border-radius: 200rpx;
    display: inline-block;
  }

  .nav-type-item:last-child {
    margin: 0;
  }

  .list-box {
    padding: 20rpx;
    box-sizing: border-box;
  }

  .shops-img {
    width: 48rpx;
    height: 48rpx;
    margin: 0 8rpx 0 0;
    border-radius: 50%;
  }

  .shops-name {
    max-width: 452rpx;
    margin: 0 8rpx 0 0;
  }

  .icons {
    width: 32rpx;
    height: 32rpx;
  }

  .goods-box {
    max-width: 506rpx;
    height: auto;
  }

  .goods-num {
    width: 24rpx;
    height: auto;
  }

  .goods-img {
    width: 144rpx;
    height: 144rpx;
    border-radius: 12rpx;
    margin: 0 16rpx 0 0;
  }

  .goods-two {
    overflow-x: scroll;
    overflow: auto;
  }

  .goods-two-name {
    width: 144rpx;
  }

  .item-but {
    width: 160rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    border-radius: 200rpx;
  }

  .but-class-one {
    background: linear-gradient(225deg, #41ABF5 0%, #5BD8FB 100%);
    color: #fff;
  }

  .but-class-two {
    background: #fff;
    border: 2rpx solid #CCCCCC;
    color: #333;
  }
</style>