search

博客列表 >api接口和js数据获取及vue商品视图渲染

api接口和js数据获取及vue商品视图渲染

李玉峰
李玉峰原创
2022年05月23日 08:43:06840浏览

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. ];
上一条：三元运算符下一条：CSS:flex布局：项目上的属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议