VUE：购物车页面：全选按钮 & 代码练习

index.vue

<template>
<div>
      <div class="fui-content" style="height:854px;background:#f3f3f3;">
        <div class="content-empty" v-if="shop_show==0">
            <img class="img" src="http://d.vsd.cc/addons/ewei_shopv2/static/images/nogoods.png"/>
            <div class="title">您的购物车中没有商品哦！</div>
            <button style='width:50%;margin-top:1rem;'>去看看商品吧</button>
        </div>
        <div v-if="shop_show==1" style="padding-bottom: 64px;">
            <div class="fui-list goods-item align-start" v-for="(item,index,key) in shop" :key="key">
              <div class="fui-list-media">
                  <input name="sid" type="checkbox" :value="item.id" @click="checkOne" v-model="item.check"/>
              </div>
              <div class="fui-list-media image-media">
                  <img class="img" :src="item.shop.img_s"/>
              </div>
              <div class="fui-list-inner">
                  <div class="subtitle">{{item.shop.title}}</div>      
                  <div class="price" style='margin-top:30px;'>
                    <span class="bigprice text-danger">
                        <span>¥</span>
                        <span>{{item.shop.price}}</span>
                    </span>
                    <div class="fui-number small">
                        <button class="minus" @click="jian(item.id)">-</button>
                        <input class="num" disabled="true" :value="item.num" />
                        <button class="plus" @click="jia(item.id)">+</button>
                    </div>
                  </div>
              </div>
            </div>
        </div>
    </div>
    <div class="fui-footer">
        <div class="fui-footer-list">
            <div class="editmode" style="font-size: 0.7rem;color: #666;">
                <input name="Fruit" type="checkbox" value="" v-model="is_check" @click="checkall"/>全选
            </div>
            <div class="fui-footer-inner">
                <div class="footer-subtitle">合计:<span class="text-danger size0-75rem"> ￥{{price}}</span></div>
            </div>
            <div class="fui-list-angle">
                <button class="btn" @click="order()">结算({{number}})</button>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import Header from '../../components/Header.vue';
import { reactive, toRefs } from "vue";
import { useRoute,useRouter } from "vue-router";
import { CartIndex,EidtCart } from "../../network/index.js";
export default({
  setup() {
    const token = window.localStorage.getItem('token');
    const route = useRoute();
    const router = useRouter();
    if(!token){
      alert('请您先登录');
      router.push({
          path: "/login"
      });
    }
    const order = ()=>{
      let ids = '';
      for(let i=0;i<data.shop.length;i++){
        ids += data.shop[i].id + ';';
      }
      router.push("/cart_order?t=1&id="+ids);
    }
    const data = reactive({
      shop : [],
      number : 0,
      price : 0,
      is_check : false,
      check_help: 0
    })
    CartIndex({token:token}).then( (e)=>{
      for(let i=0;i<e.data.length;i++){
        e.data[i].check = false;
      }
      data.shop = e.data;
    } )
    const checkOne = (e)=>{
      for(let i=0;i<data.shop.length;i++){
        if(data.shop[i].id == e.target.value){
          if(e.target.checked == true){
            data.number += data.shop[i].num;
            data.price += data.shop[i].num * data.shop[i].shop.price;
            data.check_help++;
          }else{
            data.number -= data.shop[i].num;
            data.price -= data.shop[i].num * data.shop[i].shop.price;
            data.check_help--;
          }
        }
      }
      if(data.check_help == data.shop.length){
        checkall();
      }else{
        data.is_check = false;
      }
    }
    const jian = (id)=>{
      for(let i=0;i<data.shop.length;i++){
        if(data.shop[i].num > 1){
        if(data.shop[i].id == id){
          data.shop[i].num --;
          EidtCart({token:token,id:id,num:data.shop[i].num}).then( ()=>{
          } )
          if(data.shop[i].check == true){
          data.number -= 1;
          data.price -= data.shop[i].shop.price;
        }
        }
        }else{
          if(window.confirm('确定删除吗?')){
            alert('确定');
            return true;
          }
        }
      }
    }
    const jia = (id)=>{
      for(let i=0;i<data.shop.length;i++){
        if(data.shop[i].id == id){
          data.shop[i].num ++;
          EidtCart({token:token,id:id,num:data.shop[i].num}).then( ()=>{
          } )
          if(data.shop[i].check == true){
          data.number += 1;
          data.price += data.shop[i].shop.price;
        }
        }
      }
    }
    const checkall = ()=>{
      data.is_check = !data.is_check;
      let tmp_number = 0;
      let tmp_price = 0;
      for(let i=0;i<data.shop.length;i++){
        data.shop[i].check = data.is_check;
        tmp_number += data.shop[i].num;
        tmp_price += data.shop[i].num * data.shop[i].shop.price;
      }
      if(data.is_check == true){
        data.number = tmp_number;
        data.price = tmp_price;
        data.check_help = 2;
      }else{
        data.number = 0;
        data.price = 0;
        data.check_help = 0;
      }
    }
    return{
      order,
      shop_show:1,
      ...toRefs(data),
      checkOne,
      jian,
      jia,
      checkall
    }
  },
})
</script>
<style scoped>
.fui-content {
  position: absolute;
  right: 0;
  left: 0;
  overflow: auto;
  padding-bottom: 2.2rem;
}
.content-empty {
  position: relative;
  text-align: center;
  margin-top: 3rem;
  color: #ccc;
  -webkit-box-align: center;
}
.img{
  width: 198rpx;
  margin-bottom: .5rem;
}
.title{
  color: #999;
  font-size: .75rem
}
.url{
  border-radius: 100px;
  height: 1.9rem;
  line-height:1.9rem;
  width:7rem;
  font-size:0.75rem;
}
/* 有商品 */
.fui-list {
  position: relative;
  display: flex;
  transition-duration: 300ms;
  align-items: center;
  overflow: hidden;
  -webkit-box-align: start;
  padding: 0.65rem 0.6rem;
  margin-top: 0.5rem;
  background-color: #fff;
}
.fui-list-media {
  display: flex;
  flex-shrink: 0;
  -webkit-box-lines: single;
  flex-wrap: nowrap;
  box-sizing: border-box;
  -webkit-box-align: center;
  align-items: center;
  margin-right: 0.6rem;
  color: #aaa;
  position: relative;
}
.img{
  width: 86px;
  height: 86px;
}
image-media {
  margin-left: 1rem;
  align-self: center;
}
.fui-list-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
  -webkit-box-pack: justify;
  min-height: 4.6rem;
  align-self: center;
}
.subtitle{
  align-items: center;
  position: relative;
  font-size: 0.7rem;
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  color: #000;
}
.price {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 1.2rem;
  font-size: 0.65rem;
  color: #000;
}
.bigprice {
  font-size: 0.75rem;
}
.text-danger {
  color: #ff5555;
}
.fui-number {
  backface-visibility: hidden;
  box-sizing: border-box;
  position: relative;
  display: flex;
  font-size: 0.8rem;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin: 0;
}
.small {
  height: 1.1rem;
  width: 79px;
  line-height: 1.2rem;
}
.minus {
  height: inherit;
  font-weight: bold;
  position: relative;
  text-align: center;
  z-index: 1;
  font-size: 0.65rem;
  color: #666;
  background: #fff;
  width: 1.1rem;
  line-height: 1.1rem;
}
.num {
  -webkit-box-flex: 1;
  flex: 1;
  overflow: hidden;
  line-height: inherit;
  color: #666;
  text-align: center;
  border: 0;
  font-size: 0.7rem;
}
.plus {
  height: inherit;
  font-weight: bold;
  position: relative;
  text-align: center;
  z-index: 1;
  font-size: 0.65rem;
  color: #666;
  background: #fff;
  width: 1.1rem;
  line-height: 1.1rem;
}
/* 底部按钮 */
.fui-footer {
  position: fixed;
  width: 100%;
  height: 2.45rem;
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 0 4px rgba(0,0,0,0.1);
  z-index: 2;
  padding: 0 0 90px 0;
  margin: 0;
  bottom: 0;
}
.fui-footer-list{
  align-items: center;
  overflow: hidden;
  transition-duration: 300ms;
  -webkit-box-align: center;
  display: flex;
  position: relative;
  justify-content: space-between;padding: 0 0 0 .6rem;
  height: 2.45rem;
  -webkit-box-pack: justify;
}
.editmode{
  align-items: center;
  margin-right: .6rem;
  color: #aaa;
  position: relative;
  flex-wrap: nowrap;
  box-sizing: border-box;
  -webkit-box-align: center;
  flex-shrink: 0;
  -webkit-box-lines: single;
}
.fui-footer-inner{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  position: relative;
  font-size: .7rem;
  color: #666;
  padding-left: 1.2rem;
  vertical-align: middle;
}
.footer-subtitle{
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  color: #000;
  font-size: .7rem;
  margin-top: .2rem;
  display: flex;
  align-items: flex-end;
  padding: 0;
  justify-content: flex-end;
  -webkit-box-pack: end;
}
.fui-list-angle{
  position: relative;
  vertical-align: middle;
  padding: 0;
  display: flex;
  margin: 0;
}
.btn{
  background: #ff5555;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  height: 100%;
  line-height: 2.45rem;
  font-size: .7rem;
  color: #fff;
  margin-left: .05rem;
  width: 5rem;
}
</style>

Order.vue

<template>
<div>
      <Header :title="title"></Header>
    <div class="fui-page order-create-page fui-page-current" style="height:100%;margin-top:40px;">
        <div class='fui-content navbar'>
            <!-- 地址 -->
            <div class="fui-list-group" @click="is_a()">
                <div class="fui-list">
                    <div class="fui-list-inner">
                        <div class="title">
                            收货人：
                            <span class="realname">{{address_se.name}}</span>
                            <span class="mobile">{{address_se.phone}}</span>
                        </div>
                        <div class="title">
                            <span class="address">{{address_se.address}}</span>
                        </div>
                    </div>
                    <div class="address_img">
                      <img src="@/assets/images/right.png" />
                    </div>
                </div>
            </div>
            <div v-if="is_address">
              <div class="ant-modal-mask"></div>
              <div class="fui-list-group" style="position:fixed;top:30%;z-index:1000;position: fixed;inset: 0;overflow: auto;outline: 0;">
                  <div class="fui-list" @click="is_a_se(index)" v-for="(item,index,key) in address" :key="key">
                      <div class="fui-list-inner">
                          <div class="title">
                              收货人：
                              <span class="realname">{{item.name}}</span>
                              <span class="mobile">{{item.phone}}</span>
                          </div>
                          <div class="title">
                              <span class="address">{{item.address}}</span>
                          </div>
                      </div>
                  </div>
                <div style="text-align:center;font-size:20px;margin-top:20px;" @click="is_a()">X</div>
              </div>
            </div>
            <!-- 地址end -->
            <!-- 商品 -->
            <div class='fui-shop'>
                <div class='fui-shop-list' v-for="(item,index,key) in shop" :key="key">
                    <div class="fui-shop-list-media">
                        <img class="img" :src="item.img_s"/>
                    </div>
                    <div class="shops" style='folat:left;width:250px;'>
                        <div class="subtitle">{{item.title}}</div>
                    </div>
                    <div class="fui-list-angle">
                        <span style="font-size: 0.65rem;color: #000">￥<span class="marketprice">{{item.price}}</span></span>
                        <div style='color: #999;'>x{{item.number}}</div>
                    </div>
                </div>
            </div>
            <!-- 商品end -->
            <!-- 买家留言 -->
            <div class="fui-cell-group">
                <div class="fui-cell fui-cell-textarea">
                    <div class="fui-cell-label">
                        买家留言
                    </div>
                    <div class="fui-cell-info">
                        <textarea class='textarea' rows="2" placeholder="50字以内（选填）"></textarea>
                    </div>
                </div>
            </div>
            <!-- 买家留言end -->
            <!-- 支付按钮 -->
            <div class="fui-navbar">
                <div class="nav-item total">
                    需付：<span class="text-danger size0-75rem">¥ {{total}}</span>
                    <button class="nav-item btn btn-danger buybtn" style="width:200px;margin-left:10px;" @click="order()">确定订单</button>
                </div>
            </div>
            <!-- 支付按钮end -->
        </div>
    </div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import Header from '../../components/Header.vue';
import { useRoute,useRouter } from "vue-router";
import { ShopOne,AddOrder } from "../../network/index.js";
export default({
  components: {
    Header
  },
  setup() {
    const token = window.localStorage.getItem('token');
    const route = useRoute();
    const router = useRouter();
    if(!token){
      alert('请您先登录');
      router.push({
          path: "/login"
      });
    }
    // 2022年5月18日作业：
    // 1、课上代码练习：商品详情页，登录页，下单页
    // 2、提前复习：订单支付页，展示数据，支付成功（不需要支付宝和微信）
    const order = ()=>{
      AddOrder({token:token,id:route.query.id,address:data.address_se.id}).then( (e)=>{
        alert(e.msg);
        if(e.code == 0){
          router.push({
              path: "/cart_pay",
              query: { id: e.data }
          });
        }
      } )
    }
    const data = reactive({
        shop : [],
        address : [
          {
            id : 1,
            name : "欧阳克",
            phone : "18811112222",
            address : "安徽省合肥市政务区银泰城609"
          },
          {
            id : 2,
            name : "朱天蓬",
            phone : "18811113333",
            address : "安徽省合肥市政务区银泰城609"
          },
          {
            id : 3,
            name : "灭绝师太",
            phone : "18811114444",
            address : "安徽省合肥市政务区银泰城609"
          }
        ],
        is_address : false,
        address_se : [],
        total:0
    });
    const is_a = ()=>{
      if(data.is_address == true){
        data.is_address = false;
      }else{
        data.is_address = true;
      }
    }
    const is_a_se = (e)=>{
      data.is_address = false;
      data.address_se = data.address[e];
    }
    ShopOne({id:route.query.id,token:token,t:route.query.t}).then( (e)=>{
      data.address = e.data.address;
      data.shop = e.data.shop;
      data.total = e.data.total;
      data.address_se = e.data.address[0];
    } )
    return {
        title:"下单",
        order,
        ...toRefs(data),
        is_a,
        is_a_se
    };
  }
})
</script>
<style scoped>
.fui-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  box-sizing: border-box;
  display: none;
}
.order-create-page {
  margin: 0;
  bottom: 2rem;
  padding-bottom: 2rem;
  display: block;
  overflow: hidden;
}
.fui-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.fui-content.navbar {
  bottom: 2.5rem;
  padding-bottom: 2.2rem;
}
/* 地址 */
.fui-list-group {
  background-color: #fff;
  position: relative;
  margin: 0 0 0.5rem;
}
.fui-list {
  position: relative;
  display: flex;
  padding: .4rem .6rem;
  transition-duration: 300ms;
  align-items: center;
  overflow: hidden;
  padding-top: 0.8rem;
  padding-bottom: 0.83rem;
}
.fui-list-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  -ms-flex: 1;
  flex: 1;
  display: block;
  align-self: flex-start;
}
.fui-list-inner .text {
  position: relative;
  font-size: .7rem;
  color: #000;
  text-align: center;
}
.fui-list-inner .title {
  position: relative; 
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  color: #000;
  font-size: .7rem;
  line-height: 1.2rem;
  height: 1.2rem;
}
.realname {
  display: inline-block;
  max-width: 9rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 1.2rem;
}
.mobile {
  display: inline-block;
  overflow: hidden;
}
.address{
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.65rem;
  color: #666;
}
.address_img{
  float: right;
  display: block;
}
/* 地址end */
/* 商品 */
.fui-shop {
  background-color: #fff;
  position: relative;
  margin-top: 0.5rem;
}
.fui-shop-list {
  align-items: center;
  overflow: hidden;
  transition-duration: 300ms;
  display: flex;
  padding: 0.4rem 0.6rem;
  position: relative;
  -webkit-box-align: start;
}
.fui-shop-list-media{
  display: flex;
  align-items: center;
  margin-right: 0.6rem;
  color: #aaa;
  position: relative;
  flex-wrap: nowrap;
  box-sizing: border-box;
  -webkit-box-align: center;
  flex-shrink: 0;
  -webkit-box-lines: single;
}
.img{
  width: 4rem;
  height: 4rem;
}
.shops {
  height: 3.5rem;
  align-self: center;
  justify-content: space-between;
  flex-direction: column;
  -webkit-box-pack: justify;
  display: flex;
}
.subtitle {
  color: #000;
  font-size: 0.7rem;    
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.fui-list-angle {
  text-align: right;
  font-size: 0.7rem;
  color: #666;
  margin-right: 0.1rem;
  right: 20px; 
  position:absolute;
  vertical-align: middle;
  height: 3.5rem;
  align-self: center;
  width: 3.5rem
}
/* 买家留言 */
.fui-cell-group {
  margin-top: 0.5rem;
  background-color: #fff;
  line-height: 1.4;
  font-size: 0.8rem;
  overflow: hidden;
  position: relative;
  display: block;
}
.fui-cell-group .fui-cell {
  position: relative;
  padding: 0.75rem 0.6rem 0.65rem;
  display: flex;
  transition-duration: 300ms;
  line-height: 1.2;
  height: 2.5rem;
  align-items: flex-start;
}
.fui-cell-group .fui-cell .fui-cell-label {
  position: relative;
  display: block;
  width: 3.85rem;
  font-size: 0.7rem;
  color: #666;
  margin: 0.15rem 0 0 0;
}
.fui-cell-group .fui-cell .fui-cell-info {
  -webkit-box-flex: 1;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 0.7rem;
  color: #000;
}
.textarea {
  width: 100%;
  background: transparent;
  border: none;
  resize: none;
  font-size: 0.7rem;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}
/* 支付按钮 */
.fui-navbar{
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 2.45rem;
  background: #fff;
  z-index: 2;
}
.fui-navbar .nav-item {
  position: relative;
  display: table-cell;
  height: 2.45rem;
  text-align: center;
  vertical-align: middle;
  width: 1%;
  color: #999;
}
.total {
  padding-left: 0;
  padding-right: 0.5rem;
  font-size: 0.7rem;
  height: 2.45rem;
}
.order-create-page .buybtn {
  border: none;
  font-size: 0.7rem;
  color: #fff;
  border-radius: 0;
  width: 0.2%;
}
.fui-navbar .nav-item.btn {
  color: #fff;
  border-radius: 0;
}
.btn.btn-danger {
  background: #ff5555;
  color: #fff;
  border: 1px solid #ff5555;
}
</style>

Pay.vue

<template>
<div>
    <Header :title="title"></Header>
    <div class="fui-page order-create-page fui-page-current" style="height:100%;margin-top:40px;">
        <div class='fui-content navbar'>
            <div class="totals">
                <span>订单号</span>
                <div class="num">{{order.oid}}</div>
            </div>
            <div class="totals">
                <span>总计</span>
                <div class="num"><span class="iconfont icon-renminbi1688"></span>{{order.money}}</div>
            </div>
            <div class="pay">
                <div class="channel">
                    <div class="left">
                        <span class="wx iconfont icon-weixin"></span>
                        <span>微信支付</span>
                    </div>
                    <div class="right">
                        <label>
                            <input type="radio" value="1" name="pay_type" checked="checked" v-model="is_pay">
                        </label>
                    </div>
                </div>
                <div class="channel">
                    <div class="left">
                        <span class="zfb iconfont icon-zhifubaozhifu"></span>
                        <span>支付宝</span>
                    </div>
                    <div class="right">
                        <label>
                            <input type="radio" value="2" name="pay_type" v-model="is_pay">
                        </label>
                    </div>
                </div>
            </div>
            <!-- 支付按钮 -->
            <div class="fui-navbar">
                <div class="nav-item total">
                    需付：<span class="text-danger size0-75rem">¥ {{order.money}}</span>
                    <button class="nav-item btn btn-danger buybtn" style="width:200px;margin-left:10px;" @click="go_order()">确定支付</button>
                </div>
            </div>
            <!-- 支付按钮end -->
        </div>
    </div>
</div>
</template>
<script>
import Header from '../../components/Header.vue';
import { reactive, toRefs } from "vue";
import { useRoute,useRouter } from "vue-router";
import { PayOrder, Pay } from "../../network/index.js";
  export default {
    components:{
        Header
    },
    setup() {
    const token = window.localStorage.getItem('token');
    const route = useRoute();
    const router = useRouter();
    if(!token){
      alert('请您先登录');
      router.push({
          path: "/login"
      });
    }
    const data = reactive({
        order : [],
        is_pay : 1
    })
    PayOrder({token:token,id:route.query.id}).then( (e)=>{
        console.log(e);
        data.order = e.data;
    })
    const go_order = ()=>{
        Pay({token:token,id:route.query.id,is_pay:data.is_pay}).then( ()=>{
            router.push({
                path: "/my_order_details?id="+route.query.id
            });
        } )
    }
    return {
        title : '购买课程',
        ...toRefs(data),
        go_order
    }
    }
}
</script>
<style scoped>
.fui-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  box-sizing: border-box;
  display: none;
}
.order-create-page {
  margin: 0;
  bottom: 2rem;
  padding-bottom: 2rem;
  display: block;
  overflow: hidden;
}
.fui-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.fui-content.navbar {
  bottom: 2.5rem;
  padding-bottom: 2.2rem;
}
/* 支付按钮 */
.fui-navbar{
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 2.45rem;
  background: #fff;
  z-index: 2;
}
.fui-navbar .nav-item {
  position: relative;
  display: table-cell;
  height: 2.45rem;
  text-align: center;
  vertical-align: middle;
  width: 1%;
  color: #999;
}
.total {
  padding-left: 0;
  padding-right: 0.5rem;
  font-size: 0.7rem;
  height: 2.45rem;
}
.order-create-page .buybtn {
  border: none;
  font-size: 0.7rem;
  color: #fff;
  border-radius: 0;
  width: 0.2%;
}
.fui-navbar .nav-item.btn {
  color: #fff;
  border-radius: 0;
}
.btn.btn-danger {
  background: #ff5555;
  color: #fff;
  border: 1px solid #ff5555;
}
.totals {
    background-color: #fff;
    padding: 20px;
    height: 60px;
    display: flex;
    place-content: space-between;
    color: gray;
    font-size: large;
    margin: 20px 0;
}
.pay {
    background-color: #fff;
    padding: 20px;
    height: 140px;
    margin: 20px 0;
    color: gray;
    font-size: 12px;
}
.pay .channel {
    padding: 10px;
    display: flex;
    place-items: center;
    place-content: space-between;
}
.pay .channel .left {
    font-size: larger;
    display: flex;
    place-items: center;
}
.pay .channel .left .wx {
    color: forestgreen;
}
.pay .channel .left .zfb {
    color: deepskyblue;
}
.pay .channel .left .iconfont {
    font-size: xx-large;
    margin-right: 10px;
}
.pay .channel + * {
    border-top: 1px solid lightgray;
}
</style>

Details.vue

<template>
<div>
    <Header :title="title" :is_img="1"></Header>
    <div class="rele-wrap">
        <div class="has-bottom">
            <swiper :modules="modules" :loop="true" :pagination="swiper_options.pagination" :autoplay="swiper_options.autoplay" class="swiper">
                <swiper-slide v-for="(item,index,key) in shop.img_s" :key="key">
                    <img :src="item" alt="" class="active" />
                </swiper-slide>
            </swiper>
            <div class="idle-panel">
                <div class="p1">{{shop.title}}</div>
                <div class="p2"><text class="span">{{shop.price}}元</text></div>
            </div>
            <div class="sale-panel">
                <div class="tit">商品详情</div>
                <div class="all open">
                    <img :src="item" v-for="(item,index,key) in shop.info_s" :key="key" />
                </div>
            </div>
        </div>
        <div class="fui-navbar bottom-buttons">
            <button class="btn btn_left" @click="add()">加入购物车</button>
            <button class="btn btn_right" @click="go_url()">立即购买</button>
        </div>
    </div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRoute,useRouter } from "vue-router";
import Header from '../../components/Header.vue';
import { GoodsDetails,AddCart } from "../../network/index.js";
import SwiperCore,{ Pagination,Autoplay} from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";
SwiperCore.use([Autoplay,Pagination]);
export default {
  components: {
    Swiper,
    SwiperSlide,
    Header
  },
  setup() {
    const swiper_options = new reactive({
      pagination: {
        clickable: true,
      },
      autoplay: {
        disableOnInteraction: false, // 鼠标滑动后继续自动播放
        delay: 2000, //2秒切换一次
        pauseOnMouseEnter: true,
      },
      speed: 500, //切换过渡速度
    })
    const data = reactive({
        shop : [],
        token : 0
    })
    data.token = window.localStorage.getItem('token');
    const route = useRoute();
    const router = useRouter();
    const go_url = ()=>{
        if(data.token == 0){
          router.push('/login');
          return false;
        }
        router.push("/cart_order?t=0&id="+route.query.id);
    }
    GoodsDetails({id:route.query.id}).then( (e)=>{
      data.shop = e.data;
    } )
    const add = ()=>{
      // 判断token是否为0，0未登录
      if(data.token == 0){
        router.push('/login');
        return false;
      }
      AddCart({sid:route.query.id,uid:1}).then( (e)=>{
        console.log(e);
        alert(e.msg);
      } )
    }
    return {
        swiper_options,
        go_url,
        title:"详情",
        ...toRefs(data),
        add
    };
  },
};
</script>
<style scoped>
.swiper{
  margin: 0 0.1rem;
}
.swiper .swiper-wrapper {
  /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  height: 1.5rem;
  border-radius: 0.1rem;
}
 .swiper .swiper-wrapper img{
  height: 100%;
  width: 100%;
  border-radius: 0.1rem;
}
.swiper{
  --swiper-pagination-color:#fff;
  --swiper-navigation-color:black;
}
.rele-wrap {
  background: #f5f5f5;
}
.has-bottom {
  padding-bottom: 55px !important;
}
.banner {
  position: relative;
  background: #fff;
  overflow: hidden;
  margin: 0;
  visibility: visible;
  height: 315px;
}
.banner .swipe-wrap {
  overflow: hidden;
  position: relative;
}
.vi_img{
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.idle-panel {
  padding: 1px 12px 12px 12px;
  background: #fff;
  padding-left: 12px;
  margin-top: 0;
}
.p1{
  font-weight: normal;
  line-height: 22px;
  padding-bottom: 0;
  color: #222;
  padding: 15px 10px 8px 0;
  font-size: 100%;
  position: relative;
}
.p2 {
  height: 20px;
  padding-top: 2px;
  padding-right:10px;
  color: #222;
}
.p2 .span{
  font-size: 16px;
  line-height: 20px;
  color: #ff3600;
  float: right;
}
.sale-panel{
  margin-top: 10px;
  background: #fff;
  padding: 1px 12px 12px 12px;
}
.tit{
  letter-spacing: 1px;
  color: #666;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
  padding-left: 12px;
  position: relative;
  margin: 15px 0 0;
}
.tit::after {
  position: absolute;
  content: '';
  width: 2px;
  height: 100%;
  background: #56b244;
  left: 5px;
  top: 0;
}
.open {
  height: auto;
  text-overflow: inherit;
  -webkit-line-clamp: 100000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 22px;
  margin-top: 13px;
  font-size: 14px;
  color: #333;
  position: relative;
}
.open img{
    width: 100%;
}
/* 底部按钮 */
.fui-navbar{
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 2;
}
.btn{
  border: none;
  font-size: 0.7rem;
  color: #fff;
  border-radius: 0;
  width:50%;
  height: 49px;
}
.btn_left{
  background: #fe9402;
  float:left;
}
.btn_right{
  float:right;
  background: #fd5555;
}
</style>

index.js

import {request} from "./request.js";
export function Index(){
    return request( {
        method : "POST",
        url : "Api/index"
    } )
}
export function GoodsIndex(){
    return request( {
        method : "POST",
        url : "Api/goods_index"
    } )
}
export function GoodsLists(data={}){
    return request( {
        method : "POST",
        url : "Api/goods_lists",
        data
    } )
}
export function GoodsDetails(data={}){
    return request( {
        method : "POST",
        url : "Api/goods_details",
        data
    } )
}
export function AddCart(data={}){
    return request( {
        method : "POST",
        url : "Api/add_cart",
        data
    } )
}
export function Login(data={}){
    return request( {
        method : "POST",
        url : "Api/login",
        data
    } )
}
export function ShopOne(data={}){
    return request( {
        method : "POST",
        url : "Api/shop_one",
        data
    } )
}
export function AddOrder(data={}){
    return request( {
        method : "POST",
        url : "Api/add_order",
        data
    } )
}
export function PayOrder(data={}){
    return request( {
        method : "POST",
        url : "Api/pay_order",
        data
    } )
}
export function Pay(data={}){
    return request( {
        method : "POST",
        url : "Api/pay",
        data
    } )
}
export function CartIndex(data={}){
    return request( {
        method : "POST",
        url : "Api/cart_index",
        data
    } )
}
export function EidtCart(data={}){
    return request( {
        method : "POST",
        url : "Api/eidt_cart",
        data
    } )
}

Api.php

<?php
namespace app\api\controller;
use think\facade\Db;
use think\facade\Request;
use ouyangke\Ticket;
class Api{
    // Access to XMLHttpRequest at 'http://www.tp.com/index.php/api/Api/index' 
    // from origin 'http://localhost:8080' has been blocked by CORS policy: No 
    // 'Access-Control-Allow-Origin' header is present on the requested resource.
    // 错误信息：是因为前后端分离导致的。前后端 前端和后端的域名不是一个。不是一个，就会出现这种错误。
    // 跨域名访问的安全错误提示
    public function __construct(){
        // 使用php的header函数，设置为*，全部能访问
        header("Access-Control-Allow-Origin:*");
    }
    public function index(){
        // 如何写一个 前端数据接口呢？app、小程序、vue
        // 接口：让2个以上的项目进行数据联通，数据交互
        // 多个语言 必须有统一的格式， 最后返回值，必须多种语言都能使用
        // 接口的统一数据格式是 json
        // php有json的函数 
        // json_encode 把php的数据加密成json格式
        // json_decode 把json格式转为 php数据格式
        // $arr = [
        //     "ouyangke" => "欧阳克",
        //     "miejue" => "灭绝师太",
        //     "php" => [
        //         "ouyangke",
        //         "miejue"
        //     ],
        //     "tianpeng" => "朱天蓬"
        // ];
        // json格式，是文本，我们就可以echo
        // {"ouyangke":"\u6b27\u9633\u514b","miejue":"\u706d\u7edd\u5e08\u592a","tianpeng":"\u6731\u5929\u84ec"}
        // echo json_encode($arr);
        // 1、接口 必须用json返回数据
        // 2、用数组 转为json数据
        $ad = Db::table('oyk_adver')->where('status',1)->order('sort DESC')->select()->toArray();
        $lists = Db::table('oyk_shop_lists')->where('status',1)->order('add_time DESC')->limit(6)->select()->toArray();
        // & 取之前的地址
        foreach($lists as &$v){
            $img = explode(';',$v['img']);
            $v['img_s'] = $img[0];
        }
        // 3、接口只能一次性返回数据，不能多次
        // echo json_encode($ad);
        // echo json_encode($lists);
        $arr = [
            'ad' => $ad,
            'lists' => $lists
        ];
        echo json_encode($arr);
    }
    public function goods_index(){
        // 第一种方法：会好一些。以为php自己执行数据，比查询数据库要快
        // echo time();
        // echo '<br>';
        $cat = Db::table('oyk_shop_cat')->where('status',1)->order('pid,sort DESC')->select()->toArray();
        $tmp = [];
        foreach($cat as $v){
            if($v['pid'] == 0){
                // 我们可以把一级的id，作为下标。下次找的话，直接用它的id，就能找到
                $tmp[$v['cid']] = $v;
            }else{
                $tmp[$v['pid']]['son'][] = $v;
            }
        }
        // 成功是0，失败就是1，2，3，4
        // 4、处理接口整理数据
        $arr = [
            'code' => 0,
            'msg' => '成功',
            'data' => array_merge($tmp)
            // 'data' => $tmp
        ];
        echo json_encode($arr);
        // echo time();
        // echo '<br>';
        // 能不能跟上面结合呢？
        // foreach($cat  as $v){
        //     if($v['pid'] != 0){
        //         $tmp[$v['pid']]['son'][] = $v;
        //     }
        // }
        // print_r($tmp);
        // 第二种方法
        // echo time();
        // echo '<br>';
        // $cat = Db::table('oyk_shop_cat')->where('status',1)->where('pid',0)->select()->toArray();
        // foreach($cat as &$v){
        //     $v['son'] = Db::table('oyk_shop_cat')->where('status',1)->where('pid',$v['cid'])->select()->toArray();
        // }
        // echo time();
        // echo '<br>';
        // print_r($cat);
    }
    public function goods_lists(){
        $id = input('post.id');
        if(empty($id)){
            echo json_encode([
                'code' => 1,
                'msg' => '未找到列表'
            ]);
            exit;
        }
        $page = input('post.p',1);
        $count = Db::table('oyk_shop_lists')->where('status',1)->where('cid',$id)->count();
        // print_r((int)($count/5) + 1 );
        // ceil 函数，向上取整
        // print_r(ceil($count/5));
        $lists = Db::table('oyk_shop_lists')->where('status',1)->where('cid',$id)->page($page,5)->select()->toArray();
        foreach($lists as &$v){
            $img = explode(';',$v['img']);
            $v['img_s'] = $img[0];
        }
        $arr = [
            'code' => 0,
            'msg' => '成功',
            'data' => [
                "lists" => $lists,
                'num' => ceil($count/5)
            ]
        ];
        echo json_encode($arr);
        // exit; 不要停止
    }
    public function goods_details(){
        $id = input('post.id');
        if(empty($id)){
            echo json_encode([
                'code' => 1,
                'msg' => '未找到商品'
            ]);
            exit;
        }
        $find = Db::table('oyk_shop_lists')->where('id',$id)->find();
        if(!empty($find)){
            $find['img_s'] = explode(';',$find['img']);
            $find['info_s'] = explode(';',$find['info']);
        }
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $find
        ]);
    }
    public function add_cart(){
        $uid = input('post.uid');
        if(empty($uid)){
            echo json_encode([
                'code' => 1,
                'msg' => '未找到用户'
            ]);
            exit;
        }
        $sid = input('post.sid');
        if(empty($sid)){
            echo json_encode([
                'code' => 1,
                'msg' => '未找到商品'
            ]);
            exit;
        }
        $find = Db::table('oyk_cart')->where('sid',$sid)->where('uid',$uid)->find();
        if(empty($find)){
            $ret = Db::table('oyk_cart')->insert([
                'sid' => $sid,
                'uid' => $uid,
                'num' => 1,
                'status' => 1,
                'add_time' => time()
            ]);
        }else{
            $ret =Db::table('oyk_cart')->where('id',$find['id'])->update([
                'num' => $find['num'] + 1,
                'add_time' => time()
            ]);
        }
        if(empty($ret)){
            echo json_encode([
                'code' => 1,
                'msg' => '添加失败'
            ]);
            exit;
        }
        echo json_encode([
            'code' => 0,
            'msg' => '添加成功'
        ]);
    }
    public function login(){
        $phone = input('post.phone');
        if(empty($phone)){
            echo json_encode([
                'code' => 1,
                'msg' => '手机号不能为空'
            ]);
            exit;
        }
        $password = input('post.password');
        if(empty($password)){
            echo json_encode([
                'code' => 1,
                'msg' => '密码不能为空'
            ]);
            exit;
        }
        // 如果查询用户时，用密码作为条件，我们也不知道用户是没有，还是密码错误
        $user = Db::table('oyk_user')->where('phone',$phone)->find();
        if(empty($user)){
            echo json_encode([
                'code' => 1,
                'msg' => '用户未找到'
            ]);
            exit;
        }
        if($user['password'] != md5($password)){
            echo json_encode([
                'code' => 1,
                'msg' => '密码错误'
            ]);
            exit;
        }
        unset($user['password']);
        $user['ticket'] = Ticket::create(1,'ouyangke');
        // j7bjkL9ifDhuQyxjjPQMQnLMi0c4lSYy
        // uV7FEN7jeJJi93RijvRP4LNCyrpiJTIg
        // rRTFsg3K5IuC4fzJtvYCRonI4ipKSLbr
        echo json_encode([
            'code' => 1,
            'msg' => '登录成功',
            'data' => $user
        ]);
    }
    public function shop_one(){
        $token = input('post.token');
        if(empty($token)){
            echo json_encode([
                'code' => 1,
                'msg' => '未登录'
            ]);
            exit;
        }
        $uid = Ticket::get($token,'ouyangke');
        $id = input('post.id');
        $t = input('post.t',0);
        if($t == 0){
            $shop = Db::table('oyk_shop_lists')->where('id',$id)->select()->toArray();
        }else{
            $ids = explode(';',$id);
            $cart = Db::table('oyk_cart')->where('id','in',$ids)->select()->toArray();
            $tmp = [];
            foreach($cart as $v){
                $tmp[] = $v['sid'];
            }
            $shop = Db::table('oyk_shop_lists')->where('id','in',$tmp)->select()->toArray();
            $tmp_id = [];
            foreach($shop as $v){
                $tmp_id[$v['id']] = $v;
            }
            foreach($cart as $v){
                if($v['sid'] == $tmp_id[$v['sid']]['id'] ){
                    $tmp_id[$v['sid']]['number'] = $v['num'];
                }
            }
            $shop = $tmp_id;
        }
        $total= 0;
        foreach($shop as &$shop_v){
            $img = explode(';',$shop_v['img']);
            $shop_v['img_s'] = $img[0];
            $total = $shop_v['number'] * $shop_v['price'];
        }
        $address = Db::table('oyk_user_address')->where('uid',$uid)->order('is DESC')->select()->toArray();
        $data = [
            'shop' => $shop,
            'address' => $address,
            'total' => $total
        ];
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $data
        ]);
    }
    public function add_order(){
        $token = input('post.token');
        if(empty($token)){
            echo json_encode([
                'code' => 1,
                'msg' => '未登录'
            ]);
            exit;
        }
        $uid = Ticket::get($token,'ouyangke');
        $id = input('post.id');
        $shop = Db::table('oyk_shop_lists')->where('id',$id)->find();
        // 1、商品也需要判断id是否传
        // 2、在去查询商品表，是否有这个商品
        // 3、判断这个商品，是否被关闭status==0
        $data = [
            'oid' => date('YmdHis',time()) . mt_rand(1000,9999) . mt_rand(1000,9999),
            'uid' => $uid,
            'shop_id' => $id,
            'money' => $shop['price'],
            'add_time' => time(),
            'info' => ''
        ];
        $order_id = Db::table('oyk_user_order')->insertGetId($data);
        if(empty($order_id)){
            echo json_encode([
                'code' => 1,
                'msg' => '下单失败，请重试'
            ]);
            exit;
        }
        echo json_encode([
            'code' => 0,
            'msg' => '下单成功',
            'data' => $order_id
        ]);
    }
    public function pay_order(){
        $token = input('post.token');
        if(empty($token)){
            echo json_encode([
                'code' => 1,
                'msg' => '未登录'
            ]);
            exit;
        }
        $uid = Ticket::get($token,'ouyangke');
        $id = input('post.id');
        $find = Db::table('oyk_user_order')->where('id',$id)->find();
        if(empty($find)){
            echo json_encode([
                'code'=>1,
                'msg'=>'未找到订单'
            ]);
            exit;
        }
        if($find['uid'] != $uid){
            echo json_encode([
                'code'=>1,
                'msg'=>'未找到订单'
            ]);
            exit;
        }
        if($find['status'] == 0){
            echo json_encode([
                'code'=>1,
                'msg'=>'订单已关闭'
            ]);
            exit;
        }
        if($find['status'] != 1){
            echo json_encode([
                'code'=>1,
                'msg'=>'订单已支付'
            ]);
            exit;
        }
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $find
        ]);
    }
    public function pay(){
        $token = input('post.token');
        if(empty($token)){
            echo json_encode([
                'code' => 1,
                'msg' => '未登录'
            ]);
            exit;
        }
        $uid = Ticket::get($token,'ouyangke');
        $id = input('post.id');
        $is_pay = input('post.is_pay');
        $update = Db::table('oyk_user_order')->where('id',$id)->update([
            'pay_type' => $is_pay,
            'pay_time' => time(),
            'status' => 2
        ]);
        if(empty($update)){
            echo json_encode([
                'code' => 1,
                'msg' => '支付失败'
            ]);
            exit;
        }
        echo json_encode([
            'code' => 0,
            'msg' => '支付成功'
        ]);
    }
    public function cart_index(){
        $token = input('post.token');
        if(empty($token)){
            echo json_encode([
                'code' => 1,
                'msg' => '未登录'
            ]);
            exit;
        }
        $uid = Ticket::get($token,'ouyangke');
        $cart = Db::table('oyk_cart')->where('uid',$uid)->order('add_time DESC')->select()->toArray();
        if(!empty($cart)){
            $tmp = [];
            foreach($cart as $v){
                $tmp[] = $v['sid'];
            }
            $shop = Db::table('oyk_shop_lists')->where('id','in',$tmp)->select()->toArray();
            $tmp_shop = [];
            foreach($shop as $shop_v){
                $img = explode(';',$shop_v['img']);
                $shop_v['img_s'] = $img[0];
                $tmp_shop[$shop_v['id']] = $shop_v;
            }
            foreach($cart as &$cart_v){
                if($tmp_shop[$cart_v['sid']]['id'] == $cart_v['sid'] )
                $cart_v['shop'] = $tmp_shop[$cart_v['sid']];
            }
        }
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $cart
        ]);
    }
    public function eidt_cart(){
        $token = input('post.token');
        if(empty($token)){
            echo json_encode([
                'code' => 1,
                'msg' => '未登录'
            ]);
            exit;
        }
        $uid = Ticket::get($token,'ouyangke');
        $id = input('post.id');
        $num = input('post.num');
        $update = Db::table('oyk_cart')->where('id',$id)->update([
            'num' => $num
        ]);
        if(empty($update)){
            echo json_encode([
                'code' => 1,
                'msg' => '修改失败'
            ]);
            exit;
        }
        echo json_encode([
            'code' => 0,
            'msg' => '成功'
        ]);
    }
}