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>