微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > api接口和js数据获取及vue商品视图渲染
博主信息
博文 33
粉丝 0
评论 0
访问量 27288
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
api接口和js数据获取及vue商品视图渲染
李玉峰
原创
1086人浏览过

1.API接口代码：tp\app\api\controller\Api.php

  1. <?php
  2. namespace app\api\controller;
  3. use think\facade\Db;
  4. use think\facade\Request;
  6. class Api{
  7.     // Access to XMLHttpRequest at 'http://www.tp.com/index.php/api/Api/index' 
  8.     // from origin 'http://localhost:8080' has been blocked by CORS policy: No 
  9.     // 'Access-Control-Allow-Origin' header is present on the requested resource.
  10.     // 错误信息：是因为前后端分离导致的。前后端 前端和后端的域名不是一个。不是一个，就会出现这种错误。
  11.     // 跨域名访问的安全错误提示
  13.     public function __construct(){
  14.         // 使用php的header函数，设置为*，全部能访问
  15.         header("Access-Control-Allow-Origin:*");
  16.     }
  17.     public function index(){
  18.         // 如何写一个 前端数据接口呢？app、小程序、vue
  19.         // 接口：让2个以上的项目进行数据联通，数据交互
  20.         // 多个语言 必须有统一的格式， 最后返回值，必须多种语言都能使用
  22.         // 接口的统一数据格式是 json
  24.         // php有json的函数 
  25.         // json_encode 把php的数据加密成json格式
  26.         // json_decode 把json格式转为 php数据格式
  28.         // $arr = [
  29.         //     "ouyangke" => "欧阳克",
  30.         //     "miejue" => "灭绝师太",
  31.         //     "php" => [
  32.         //         "ouyangke",
  33.         //         "miejue"
  34.         //     ],
  35.         //     "tianpeng" => "朱天蓬"
  36.         // ];
  37.         // json格式，是文本，我们就可以echo
  38.         // {"ouyangke":"\u6b27\u9633\u514b","miejue":"\u706d\u7edd\u5e08\u592a","tianpeng":"\u6731\u5929\u84ec"}
  39.         // echo json_encode($arr);
  41.         // 1、接口 必须用json返回数据
  42.         // 2、用数组 转为json数据
  43.         $ad = Db::table('oyk_adver')->where('status',1)->order('sort DESC')->select()->toArray();
  45.         $lists = Db::table('oyk_shop_lists')->where('status',1)->order('add_time DESC')->limit(6)->select()->toArray();
  46.         // & 取之前的地址
  47.         foreach($lists as &$v){
  48.             $img = explode(';',$v['img']);
  49.             $v['img_s'] = $img[0];
  50.         }
  51.         // 3、接口只能一次性返回数据，不能多次
  52.         // echo json_encode($ad);
  53.         // echo json_encode($lists);
  55.         $arr = [
  56.             'ad' => $ad,
  57.             'lists' => $lists
  58.         ];
  59.         echo json_encode($arr);
  60.     }
  62.     public function goods_index(){
  63.         //1.第一种:父子层级获取数据 (更快更好)
  64.         // echo '第一种方法开始时间:' . time() . '<br />';
  65.         $cat = Db::table('oyk_shop_cat')->where('status',1)->order('pid,sort DESC')->select()->toArray();
  66.         // print_r($cat);
  68.         $tmp =[];
  69.         foreach($cat as $v){
  70.             // pid == 0 表示是一级菜单
  71.             if($v['pid'] == 0){
  72.                 //把一级的id,作为下标
  73.                 $tmp[$v['cid']] = $v;
  74.             }else  {
  75.                 //把多个二级放入一级菜单下面
  76.                 $tmp[$v['pid']]['son'][] = $v;
  77.             }
  78.         } 
  79.         // print_r($tmp);
  80.         // echo json_encode($tmp);
  81.         $arr = [
  82.             'code'=>0,
  83.             'msg'=>'成功',
  84.             // 'data'=>$tmp,
  85.             // 第二种显示方式
  86.             'data'=>array_merge($tmp),
  87.         ];
  88.         echo json_encode($arr);
  90.         //把二级菜单放到一级菜单下面
  91.         // foreach($cat as $v){
  92.         //     if($v['pid'] != 0){
  93.         //         //把一个二级放入一级菜单下面
  94.         //         // $tmp[$v['pid']]['son'] = $v;
  95.         //         //把多个二级放入一级菜单下面
  96.         //         $tmp[$v['pid']]['son'][] = $v;
  97.         //     }
  98.         // }
  99.         // print_r($tmp);
  100.         // echo '第一种方法结束时间:' . time() . '<br />';
  102.         // 2.第二种方法
  103.         // echo '第二种方法开始时间:' . time() . '<br />';
  104.         // $cat = Db::table('oyk_shop_cat')->where('status',1)->where('pid',0)->select()->toArray();
  105.         // // print_r($cat);
  106.         // foreach($cat as &$v){
  107.         //     $v['son'] = Db::table('oyk_shop_cat')->where('status',1)->where('pid',$v['cid'])->select()->toArray();
  108.         // }
  109.         // print_r($cat);
  110.         // echo '第二种方法结束时间:' . time() . '<br />';
  112.     }
  114.     // 列表页
  115.     public function goods_lists(){
  116.         // $id = input('post.id');
  117.         $id = input('post.id');
  118.         if(empty($id)){
  119.             echo json_encode([
  120.                 'code' => 1,
  121.                 'msg' => '未找到列表',
  122.             ]);
  123.             exit;
  124.         }
  125.         $page = input('post.p',1);
  126.         $count = Db::table('oyk_shop_lists')->where('status',1)->where('cid',$id)->count();
  127.         // print_r((int)($count/5)+1);
  128.         // ceil 向上取整
  129.         // print_r(ceil($count/5));
  131.         $lists = Db::table('oyk_shop_lists')->where('status',1)->page(1,5)->where('cid',$id)->select()->toArray();
  132.         // 图集处理获取第一张
  133.         foreach($lists as &$v){
  134.             $img = explode(';',$v['img']);
  135.             $v['img_s'] = $img[0];
  136.         }
  138.         $arr = [
  139.             'code' => 0,
  140.             'msg' =>'成功',
  141.             'data' => [
  142.                 'lists' => $lists,
  143.                 'num' => ceil($count/5),
  144.             ],
  145.         ];
  146.         echo json_encode($arr);
  147.     }
  149.     //详情页
  150.     public function goods_details(){
  151.         $id = input('post.id');
  152.         if(empty($id)){
  153.             echo json_encode([
  154.                 'code' =>1,
  155.                 'msg' =>'未找到商品',
  156.             ]);
  157.             exit;
  158.         }
  160.         $find = Db::table('oyk_shop_lists')->where('id',$id)->find();
  161.         // print_r($find);
  162.         if(!empty($find)){
  163.             $find['img_s'] = explode(';',$find['img']);
  164.             $find['info_s'] = explode(';',$find['info']);
  165.         }
  167.         echo json_encode([
  168.             'code' => 0,
  169.             'msg' => '成功',
  170.             'data' => $find,
  171.         ]);
  172.     }
  174. }

2.Js获取数据代码：vue\src\network\index.js

  1. import { request } from "./request.js";
  3. export function Index() {
  4.   return request({
  5.     method: "POST",
  6.     url: "Api/index",
  7.   });
  8. }
  10. export function GoodsIndex() {
  11.   return request({
  12.     method: "POST",
  13.     url: "Api/goods_index",
  14.   });
  15. }
  17. export function GoodsLists(data = {}) {
  18.   return request({
  19.     method: "POST",
  20.     url: "Api/goods_lists",
  21.     // 通过data 向Api接口传值
  22.     data,
  23.   });
  24. }
  26. export function GoodsDetails(data = {}) {
  27.   return request({
  28.     method: "POST",
  29.     url: "Api/goods_details",
  30.     // 通过data 向Api接口传值
  31.     data,
  32.   });
  33. }

3.Index.vue品牌列表渲染代码：vue\src\views\Goods\Index.vue

  1. <template>
  2.   <div class="fui-fullHigh-group">
  3.     <div class="fui-fullHigh-item menu">
  4.       <div
  5.         class="nav"
  6.         :class="on == index ? 'on' : ''"
  7.         @click="edit_cat(index)"
  8.         v-for="(item, index, key) in cat"
  9.         :key="key"
  10.       >
  11.         {{ item.name }}
  12.       </div>
  13.     </div>
  14.     <div class="fui-fullHigh-item container">
  15.       <!-- 第一种遍历方式 :两次循环
  16.       <div
  17.         class="fui-icon-group"
  18.         v-for="(item, index, key) in cat"
  19.         :key="key"
  20.       >
  21.         <div v-if="on == index">
  22.           <router-link to="/goods_lists" v-for="(items, indexs, keys) in item.son" :key="keys">
  23.             <div class="fui-icon-col">
  24.               <div class="icon">
  25.                 <img class="img" :src="items.pic" />
  26.               </div>
  27.               <div class="text">{{ items.name }}</div>
  28.             </div>
  29.           </router-link>
  30.         </div>
  31.       </div> -->
  32.       <!-- 第二种遍历方式 -->
  33.       <div class="fui-icon-group">
  34.         <router-link
  35.           :to="'/goods_lists?id=' + items.cid"
  36.           v-for="(items, indexs, keys) in cat_son"
  37.           :key="keys"
  38.         >
  39.           <div class="fui-icon-col">
  40.             <div class="icon">
  41.               <img class="img" :src="items.pic" />
  42.             </div>
  43.             <div class="text">{{ items.name }}</div>
  44.           </div>
  45.         </router-link>
  46.       </div>
  47.     </div>
  48.   </div>
  49. </template>
  50. <script>
  51. import { reactive, toRefs } from "vue";
  52. import { GoodsIndex } from "../../network/index.js";
  54. export default {
  55.   setup() {
  56.     const data = reactive({
  57.       //   on: 1,
  58.       // 第二种方式
  59.       on: 0,
  60.       cat: [],
  61.       cat_son: [],
  62.     });
  63.     //切换左侧一级分类
  65.     const edit_cat = (e) => {
  66.       data.on = e;
  67.       console.log(e);
  68.       data.cat_son = data.cat[e].son;
  69.     };
  70.     // 获取接口数据
  71.     GoodsIndex().then((e) => {
  72.       console.log(e);
  73.       if (e.code != 0) {
  74.       }
  75.       data.cat = e.data;
  76.       //   第二种方式
  77.       console.log(e.data[0]);
  78.       data.cat_son = e.data[0].son;
  79.     });
  80.     return {
  81.       title: "分类",
  82.       ...toRefs(data),
  83.       edit_cat,
  84.     };
  85.   },
  86. };
  87. </script>
  88. <style scoped>
  89. .fui-fullHigh-group {
  90.   position: absolute;
  91.   top: 0;
  92.   bottom: 0;
  93.   width: 100%;
  94.   display: flex;
  95. }
  96. /* 左侧 */
  97. .fui-fullHigh-item {
  98.   height: inherit;
  99.   width: 100%;
  100.   background: #fff;
  101.   overflow-y: auto;
  102. }
  103. .fui-fullHigh-item.menu {
  104.   width: 5.25rem;
  105.   background: #f8f8f8;
  106. }
  107. .fui-fullHigh-item.menu .nav {
  108.   font-size: 28rpx;
  109.   text-align: center;
  110.   color: #000;
  111.   padding: 0.2rem 0;
  112.   height: 2.5rem;
  113.   text-overflow: ellipsis;
  114.   white-space: nowrap;
  115.   overflow: hidden;
  116.   position: relative;
  117.   display: flex;
  118.   justify-content: center;
  119.   align-items: Center;
  120. }
  121. .fui-fullHigh-item.menu .on {
  122.   background: #fff;
  123.   position: relative;
  124.   color: #ff5555;
  125. }
  126. /* 右侧 */
  127. .fui-fullHigh-item.container {
  128.   position: relative;
  129.   padding: 0.8rem;
  130.   flex: 1;
  131. }
  132. .fui-icon-group {
  133.   position: relative;
  134.   overflow: hidden;
  135.   background: #fff;
  136.   display: flex;
  137.   flex-wrap: wrap;
  138. }
  139. .fui-icon-group .fui-icon-col {
  140.   height: auto;
  141.   position: relative;
  142.   padding: 0.5rem 0;
  143.   text-align: center;
  144.   transition: background-color 300ms;
  145.   -webkit-transition: background-color 300ms;
  146.   float: left;
  147.   border: none !important;
  148. }
  149. .fui-icon-group .fui-icon-col {
  150.   float: left;
  151.   margin-right: 17px;
  152.   padding-top: 10px;
  153. }
  154. .fui-icon-group .fui-icon-col .icon {
  155.   height: 115px;
  156.   width: 100%;
  157.   margin: auto;
  158.   text-align: center;
  159.   line-height: 2.2rem;
  160. }
  161. .icon {
  162.   font-family: "icon" !important;
  163.   font-size: 16px;
  164.   font-style: normal;
  165.   -webkit-font-smoothing: antialiased;
  166.   -moz-osx-font-smoothing: grayscale;
  167. }
  168. .img {
  169.   width: 115px;
  170.   height: 100%;
  171. }
  172. .fui-icon-group .fui-icon-col .text {
  173.   font-size: 24px;
  174.   text-align: center;
  175.   overflow: hidden;
  176.   text-overflow: ellipsis;
  177.   white-space: nowrap;
  178.   padding: 0.2rem;
  179.   color: #000;
  180. }
  181. .fui-icon-group .fui-icon-col .text {
  182.   font-size: 0.55rem;
  183.   line-height: 1.05rem;
  184.   padding-top: 0.5rem;
  185. }
  186. </style>

4.Lists.vue产品列表渲染代码：vue\src\views\Goods\Lists.vue

  1. <template>
  2.   <Header :title="title"></Header>
  3.   <div style="background: #f3f3f3">
  4.     <!-- 商品列表 -->
  5.     <div class="fui-content">
  6.       <div class="fui-content-inner">
  7.         <div class="fui-goods-group block">
  8.           <!-- 单个商品 -->
  9.           <div
  10.             class="fui-goods-item"
  11.             @click="go_url(item.id)"
  12.             v-for="(item, index, key) in lists"
  13.             :key="key"
  14.           >
  15.             <img class="image" :src="item.img_s" />
  16.             <div class="detail">
  17.               <div class="name">{{ item.title }}</div>
  18.               <div
  19.                 style="
  20.                   line-height: 0.7rem;
  21.                   height: 0.7rem;
  22.                   color: #b2b2b2;
  23.                   font-size: 0.6rem;
  24.                   margin-top: 0.2rem;
  25.                   text-decoration: line-through;
  26.                 "
  27.               ></div>
  28.               <div class="price">
  29.                 <span class="text">￥{{ item.price }}</span>
  30.                 <span class="buy">销量：{{ item.num }}</span>
  31.               </div>
  32.             </div>
  33.           </div>
  34.           <!-- 单个商品 -->
  35.         </div>
  36.       </div>
  37.       <button v-if="is_b" class="ant-btn ant-btn-primary" style="width: 100%" @click="xiala()">
  38.         加载更多
  39.       </button>
  40.     </div>
  41.   </div>
  42. </template>
  43. <script>
  44. import Header from "../../components/Header.vue";
  45. import { reactive, toRefs } from "vue";
  46. import { useRoute, useRouter } from "vue-router";
  47. import { GoodsLists } from "../../network/index.js";
  49. export default {
  50.   components: {
  51.     Header,
  52.   },
  53.   setup() {
  54.     const route = useRoute();
  55.     const router = useRouter();
  56.     const go_url = (id) => {
  57.       router.push("/goods_details?id=" + id);
  58.     };
  60.     // 获取数据
  61.     // console.log(route.query.id);
  62.     const data = reactive({
  63.       lists: [],
  64.       page: 1,
  65.       num: 1,
  66.       is_b: true,
  67.     });
  68.     GoodsLists({ id: route.query.id, p: data.page }).then((e) => {
  69.       // console.log(e);
  70.       data.lists = e.data.lists;
  71.       data.num = e.data.num;
  72.       // 取掉加载更多
  73.       if (data.page >= data.num) {
  74.         data.is_b = false;
  75.       }
  76.     });
  78.     // 加载更多
  79.     const xiala = () => {
  80.       data.page = data.page + 1;
  81.       if (data.page <= data.num) {
  82.         GoodsLists({ id: route.query.id }).then((e) => {
  83.           // console.log(e);
  84.           // data.lists = e.data;
  85.           //合并显示页
  86.           data.lists = data.lists.concat(e.data.lists);
  87.           // 取掉加载更多
  88.           if (data.page >= data.num) {
  89.             data.is_b = false;
  90.           }
  91.         });
  92.       }
  93.     };
  94.     return {
  95.       go_url,
  96.       title: "列表",
  97.       ...toRefs(data),
  98.       xiala,
  99.     };
  100.   },
  101. };
  102. </script>
  103. <style scoped>
  104. /* 顶部筛选 */
  105. .sort {
  106.   position: relative;
  107.   width: 100%;
  108.   padding: 0.4rem 0;
  109.   background: #fff;
  110.   -webkit-box-align: center;
  111.   border-bottom: 1px solid #e7e7e7;
  112. }
  113. .sort .item {
  114.   position: relative;
  115.   width: 1%;
  116.   display: table-cell;
  117.   text-align: center;
  118.   font-size: 0.7rem;
  119.   border-left: 1px solid #e7e7e7;
  120.   color: #666;
  121. }
  122. .sort .item:first-child {
  123.   border: 0;
  124. }
  125. .on .text {
  126.   color: #fd5454;
  127. }
  128. /* 商品 */
  129. .fui-content {
  130.   position: absolute;
  131.   right: 0;
  132.   left: 0;
  133.   overflow: auto;
  134.   -webkit-overflow-scrolling: touch;
  135. }
  136. .fui-content-inner {
  137.   box-sizing: border-box;
  138.   border-top: 1px solid transparent;
  139.   margin-top: -1px;
  140. }
  141. .fui-goods-group {
  142.   height: auto;
  143.   overflow: hidden;
  144.   background: #f9f9f9;
  145. }
  146. .fui-goods-group.block {
  147.   padding: 0.2rem;
  148. }
  149. /* 单个商品 */
  150. .fui-goods-group .fui-goods-item {
  151.   width: 50%;
  152.   float: left;
  153.   border-bottom: 0;
  154.   background: none;
  155.   padding: 0.25rem;
  156.   display: block;
  157. }
  158. .fui-goods-item {
  159.   position: relative;
  160.   height: auto;
  161.   padding: 0.8rem;
  162.   border-bottom: 1px solid #e7e7e7;
  163.   background: #fff;
  164.   overflow: hidden;
  165.   display: flex;
  166. }
  167. .image {
  168.   width: 100%;
  169.   overflow: hidden;
  170.   margin: 0;
  171.   background-position: center;
  172.   background-repeat: no-repeat;
  173.   background-size: cover;
  174.   position: relative;
  175.   float: none;
  176. }
  177. /* 商品名 */
  178. .detail {
  179.   -webkit-box-flex: 1;
  180.   -webkit-flex: 1;
  181.   -ms-flex: 1;
  182.   flex: 1;
  183.   background: #fff;
  184.   padding-left: 0.5rem;
  185.   padding: 0.5rem;
  186. }
  187. .name {
  188.   height: 1.7rem;
  189.   overflow: hidden;
  190.   text-overflow: ellipsis;
  191.   display: -webkit-box;
  192.   -webkit-line-clamp: 2;
  193.   -webkit-box-orient: vertical;
  194.   font-size: 0.65rem;
  195.   line-height: 0.9rem;
  196.   margin-top: 0;
  197.   color: #262626;
  198. }
  199. .price {
  200.   position: relative;
  201.   display: flex;
  202.   align-items: center;
  203.   font-size: 0.7rem;
  204.   margin-top: 0;
  205. }
  206. .price .text {
  207.   flex: 1;
  208.   color: #ff5555;
  209.   font-size: 0.8rem;
  210. }
  211. .buy {
  212.   text-align: center;
  213.   color: #666;
  214.   font-size: 0.6rem;
  215. }
  216. .ant-btn {
  217.   line-height: 1.5715;
  218.   position: relative;
  219.   display: inline-block;
  220.   font-weight: 400;
  221.   white-space: nowrap;
  222.   text-align: center;
  223.   background-image: none;
  224.   border: 1px solid transparent;
  225.   box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
  226.   cursor: pointer;
  227.   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  228.   -webkit-user-select: none;
  229.   -moz-user-select: none;
  230.   -ms-user-select: none;
  231.   user-select: none;
  232.   touch-action: manipulation;
  233.   height: 32px;
  234.   padding: 4px 15px;
  235.   font-size: 14px;
  236.   border-radius: 2px;
  237.   color: rgba(0, 0, 0, 0.85);
  238.   background: #fff;
  239.   border-color: #d9d9d9;
  240. }
  241. .ant-btn-primary {
  242.   color: #fff;
  243.   background: #1890ff;
  244.   border-color: #1890ff;
  245.   text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  246.   box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
  247. }
  248. </style>

4.Details.vue详情页渲染代码：vue\src\views\Goods\Details.vue

  1. <template>
  2.   <Header :title="title" :is_img="1"></Header>
  3.   <div class="rele-wrap">
  4.     <div class="has-bottom">
  5.       <swiper
  6.         :modules="modules"
  7.         :loop="true"
  8.         :pagination="swiper_options.pagination"
  9.         :autoplay="swiper_options.autoplay"
  10.         class="swiper"
  11.       >
  12.         <swiper-slide v-for="(item, index, key) in shop.img_s" :key="key">
  13.           <img :src="item" alt="" class="active" />
  14.         </swiper-slide>
  15.       </swiper>
  16.       <div class="idle-panel">
  17.         <div class="p1">
  18.           {{ shop.title }}
  19.         </div>
  20.         <div class="p2">
  21.           <text class="span">{{ shop.price }}元</text>
  22.         </div>
  23.       </div>
  24.       <div class="sale-panel">
  25.         <div class="tit">商品详情</div>
  26.         <div class="all open">
  27.           <img :src="item" v-for="(item, index, key) in shop.info_s" :key="key" />
  28.         </div>
  29.       </div>
  30.     </div>
  31.     <div class="fui-navbar bottom-buttons">
  32.       <button class="btn btn_left">加入购物车</button>
  33.       <button class="btn btn_right" @click="go_url()">立即购买</button>
  34.     </div>
  35.   </div>
  36. </template>
  37. <script>
  38. import { reactive, toRefs } from "vue";
  39. import { useRoute, useRouter } from "vue-router";
  40. import Header from "../../components/Header.vue";
  41. import { GoodsDetails } from "../../network/index.js";
  43. import SwiperCore, { Pagination, Autoplay } from "swiper";
  44. import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
  45. import "swiper/swiper.min.css";
  46. import "swiper/modules/pagination/pagination.min.css";
  47. SwiperCore.use([Autoplay, Pagination]);
  49. export default {
  50.   components: {
  51.     Swiper,
  52.     SwiperSlide,
  53.     Header,
  54.   },
  55.   setup() {
  56.     const swiper_options = new reactive({
  57.       pagination: {
  58.         clickable: true,
  59.       },
  60.       autoplay: {
  61.         disableOnInteraction: false, // 鼠标滑动后继续自动播放
  62.         delay: 2000, //2秒切换一次
  63.         pauseOnMouseEnter: true,
  64.       },
  65.       speed: 500, //切换过渡速度
  66.     });
  68.     //获取数据
  69.     const route = useRoute();
  70.     const router = useRouter();
  71.     const go_url = () => {
  72.       router.push("/cart_index");
  73.     };
  75.     const data = reactive({
  76.       shop: [],
  77.     });
  78.     GoodsDetails({ id: route.query.id }).then((e) => {
  79.       // console.log(e);
  80.       data.shop = e.data;
  81.     });
  82.     return {
  83.       swiper_options,
  84.       go_url,
  85.       title: "详情",
  86.       ...toRefs(data),
  87.     };
  88.   },
  89. };
  90. </script>
  91. <style scoped>
  92. .swiper {
  93.   margin: 0 0.1rem;
  94. }
  95. .swiper .swiper-wrapper {
  96.   /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  97.   height: 1.5rem;
  98.   border-radius: 0.1rem;
  99. }
  100. .swiper .swiper-wrapper img {
  101.   height: 100%;
  102.   width: 100%;
  103.   border-radius: 0.1rem;
  104. }
  105. .swiper {
  106.   --swiper-pagination-color: #fff;
  107.   --swiper-navigation-color: black;
  108. }
  109. .rele-wrap {
  110.   background: #f5f5f5;
  111. }
  112. .has-bottom {
  113.   padding-bottom: 55px !important;
  114. }
  115. .banner {
  116.   position: relative;
  117.   background: #fff;
  118.   overflow: hidden;
  119.   margin: 0;
  120.   visibility: visible;
  121.   height: 315px;
  122. }
  123. .banner .swipe-wrap {
  124.   overflow: hidden;
  125.   position: relative;
  126. }
  127. .vi_img {
  128.   float: left;
  129.   width: 100%;
  130.   height: 100%;
  131.   position: relative;
  132. }
  133. .idle-panel {
  134.   padding: 1px 12px 12px 12px;
  135.   background: #fff;
  136.   padding-left: 12px;
  137.   margin-top: 0;
  138. }
  139. .p1 {
  140.   font-weight: normal;
  141.   line-height: 22px;
  142.   padding-bottom: 0;
  143.   color: #222;
  144.   padding: 15px 10px 8px 0;
  145.   font-size: 100%;
  146.   position: relative;
  147. }
  148. .p2 {
  149.   height: 20px;
  150.   padding-top: 2px;
  151.   padding-right: 10px;
  152.   color: #222;
  153. }
  154. .p2 .span {
  155.   font-size: 16px;
  156.   line-height: 20px;
  157.   color: #ff3600;
  158.   float: right;
  159. }
  160. .sale-panel {
  161.   margin-top: 10px;
  162.   background: #fff;
  163.   padding: 1px 12px 12px 12px;
  164. }
  165. .tit {
  166.   letter-spacing: 1px;
  167.   color: #666;
  168.   height: 14px;
  169.   line-height: 14px;
  170.   font-size: 14px;
  171.   padding-left: 12px;
  172.   position: relative;
  173.   margin: 15px 0 0;
  174. }
  175. .tit::after {
  176.   position: absolute;
  177.   content: "";
  178.   width: 2px;
  179.   height: 100%;
  180.   background: #56b244;
  181.   left: 5px;
  182.   top: 0;
  183. }
  184. .open {
  185.   height: auto;
  186.   text-overflow: inherit;
  187.   -webkit-line-clamp: 100000;
  188.   display: -webkit-box;
  189.   -webkit-box-orient: vertical;
  190.   overflow: hidden;
  191.   line-height: 22px;
  192.   margin-top: 13px;
  193.   font-size: 14px;
  194.   color: #333;
  195.   position: relative;
  196. }
  197. .open img {
  198.   width: 100%;
  199. }
  200. /* 底部按钮 */
  201. .fui-navbar {
  202.   position: fixed;
  203.   width: 100%;
  204.   bottom: 0;
  205.   z-index: 2;
  206. }
  207. .btn {
  208.   border: none;
  209.   font-size: 0.7rem;
  210.   color: #fff;
  211.   border-radius: 0;
  212.   width: 50%;
  213.   height: 49px;
  214. }
  215. .btn_left {
  216.   background: #fe9402;
  217.   float: left;
  218. }
  219. .btn_right {
  220.   float: right;
  221.   background: #fd5555;
  222. }
  223. </style>

参数传递需要注意中间件配置：tp\app\middleware.php

  1. <?php
  2. // 全局中间件定义文件
  3. return [
  4.     // 全局请求缓存
  5.     // \think\middleware\CheckRequestCache::class,
  6.     // 多语言加载
  7.     // \think\middleware\LoadLangPack::class,
  8.     // Session初始化
  9.     // \think\middleware\SessionInit::class
  10.     //允许跨域传值
  11.     \think\middleware\AllowCrossDomain::class,
  12. ];
批改老师：PHPzPHPz

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录