Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > VUE：购物车页面：全选按钮 & 代码练习
Blogger Information
Blog 38
fans 0
comment 0
visits 19158
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
VUE：购物车页面：全选按钮 & 代码练习
Blackeye
Original
1388 people have browsed it

index.vue

  1. <template>
  2. <div>
  3.       <div class="fui-content" style="height:854px;background:#f3f3f3;">
  4.         <div class="content-empty" v-if="shop_show==0">
  5.             <img class="img" src="http://d.vsd.cc/addons/ewei_shopv2/static/images/nogoods.png"/>
  6.             <div class="title">您的购物车中没有商品哦！</div>
  7.             <button style='width:50%;margin-top:1rem;'>去看看商品吧</button>
  8.         </div>
  9.         <div v-if="shop_show==1" style="padding-bottom: 64px;">
  10.             <div class="fui-list goods-item align-start" v-for="(item,index,key) in shop" :key="key">
  11.               <div class="fui-list-media">
  12.                   <input name="sid" type="checkbox" :value="item.id" @click="checkOne" v-model="item.check"/>
  13.               </div>
  14.               <div class="fui-list-media image-media">
  15.                   <img class="img" :src="item.shop.img_s"/>
  16.               </div>
  17.               <div class="fui-list-inner">
  18.                   <div class="subtitle">{{item.shop.title}}</div>      
  19.                   <div class="price" style='margin-top:30px;'>
  20.                     <span class="bigprice text-danger">
  21.                         <span>¥</span>
  22.                         <span>{{item.shop.price}}</span>
  23.                     </span>
  24.                     <div class="fui-number small">
  25.                         <button class="minus" @click="jian(item.id)">-</button>
  26.                         <input class="num" disabled="true" :value="item.num" />
  27.                         <button class="plus" @click="jia(item.id)">+</button>
  28.                     </div>
  29.                   </div>
  30.               </div>
  31.             </div>
  32.         </div>
  33.     </div>
  34.     <div class="fui-footer">
  35.         <div class="fui-footer-list">
  36.             <div class="editmode" style="font-size: 0.7rem;color: #666;">
  37.                 <input name="Fruit" type="checkbox" value="" v-model="is_check" @click="checkall"/>全选
  38.             </div>
  39.             <div class="fui-footer-inner">
  40.                 <div class="footer-subtitle">合计:<span class="text-danger size0-75rem"> ￥{{price}}</span></div>
  41.             </div>
  42.             <div class="fui-list-angle">
  43.                 <button class="btn" @click="order()">结算({{number}})</button>
  44.             </div>
  45.         </div>
  46.     </div>
  47. </div>
  48. </template>
  49. <script>
  50. import Header from '../../components/Header.vue';
  51. import { reactive, toRefs } from "vue";
  52. import { useRoute,useRouter } from "vue-router";
  53. import { CartIndex,EidtCart } from "../../network/index.js";
  54. export default({
  55.   setup() {
  56.     const token = window.localStorage.getItem('token');
  57.     const route = useRoute();
  58.     const router = useRouter();
  59.     if(!token){
  60.       alert('请您先登录');
  61.       router.push({
  62.           path: "/login"
  63.       });
  64.     }
  65.     const order = ()=>{
  66.       let ids = '';
  67.       for(let i=0;i<data.shop.length;i++){
  68.         ids += data.shop[i].id + ';';
  69.       }
  70.       router.push("/cart_order?t=1&id="+ids);
  71.     }
  72.     const data = reactive({
  73.       shop : [],
  74.       number : 0,
  75.       price : 0,
  76.       is_check : false,
  77.       check_help: 0
  78.     })
  80.     CartIndex({token:token}).then( (e)=>{
  81.       for(let i=0;i<e.data.length;i++){
  82.         e.data[i].check = false;
  83.       }
  84.       data.shop = e.data;
  85.     } )
  86.     const checkOne = (e)=>{
  87.       for(let i=0;i<data.shop.length;i++){
  88.         if(data.shop[i].id == e.target.value){
  89.           if(e.target.checked == true){
  90.             data.number += data.shop[i].num;
  91.             data.price += data.shop[i].num * data.shop[i].shop.price;
  92.             data.check_help++;
  93.           }else{
  94.             data.number -= data.shop[i].num;
  95.             data.price -= data.shop[i].num * data.shop[i].shop.price;
  96.             data.check_help--;
  97.           }
  98.         }
  99.       }
  100.       if(data.check_help == data.shop.length){
  101.         checkall();
  102.       }else{
  103.         data.is_check = false;
  104.       }
  105.     }
  106.     const jian = (id)=>{
  107.       for(let i=0;i<data.shop.length;i++){
  108.         if(data.shop[i].num > 1){
  109.         if(data.shop[i].id == id){
  110.           data.shop[i].num --;
  111.           EidtCart({token:token,id:id,num:data.shop[i].num}).then( ()=>{
  113.           } )
  114.           if(data.shop[i].check == true){
  115.           data.number -= 1;
  116.           data.price -= data.shop[i].shop.price;
  117.         }
  118.         }
  119.         }else{
  120.           if(window.confirm('确定删除吗?')){
  121.             alert('确定');
  122.             return true;
  123.           }
  124.         }
  125.       }
  126.     }
  127.     const jia = (id)=>{
  128.       for(let i=0;i<data.shop.length;i++){
  129.         if(data.shop[i].id == id){
  130.           data.shop[i].num ++;
  131.           EidtCart({token:token,id:id,num:data.shop[i].num}).then( ()=>{
  133.           } )
  134.           if(data.shop[i].check == true){
  135.           data.number += 1;
  136.           data.price += data.shop[i].shop.price;
  137.         }
  138.         }
  139.       }
  140.     }
  141.     const checkall = ()=>{
  142.       data.is_check = !data.is_check;
  143.       let tmp_number = 0;
  144.       let tmp_price = 0;
  145.       for(let i=0;i<data.shop.length;i++){
  146.         data.shop[i].check = data.is_check;
  147.         tmp_number += data.shop[i].num;
  148.         tmp_price += data.shop[i].num * data.shop[i].shop.price;
  149.       }
  150.       if(data.is_check == true){
  151.         data.number = tmp_number;
  152.         data.price = tmp_price;
  153.         data.check_help = 2;
  154.       }else{
  155.         data.number = 0;
  156.         data.price = 0;
  157.         data.check_help = 0;
  158.       }
  159.     }
  160.     return{
  161.       order,
  162.       shop_show:1,
  163.       ...toRefs(data),
  164.       checkOne,
  165.       jian,
  166.       jia,
  167.       checkall
  168.     }
  169.   },
  170. })
  171. </script>
  173. <style scoped>
  174. .fui-content {
  175.   position: absolute;
  176.   right: 0;
  177.   left: 0;
  178.   overflow: auto;
  179.   padding-bottom: 2.2rem;
  180. }
  181. .content-empty {
  182.   position: relative;
  183.   text-align: center;
  184.   margin-top: 3rem;
  185.   color: #ccc;
  186.   -webkit-box-align: center;
  187. }
  188. .img{
  189.   width: 198rpx;
  190.   margin-bottom: .5rem;
  191. }
  192. .title{
  193.   color: #999;
  194.   font-size: .75rem
  195. }
  196. .url{
  197.   border-radius: 100px;
  198.   height: 1.9rem;
  199.   line-height:1.9rem;
  200.   width:7rem;
  201.   font-size:0.75rem;
  202. }
  203. /* 有商品 */
  204. .fui-list {
  205.   position: relative;
  206.   display: flex;
  207.   transition-duration: 300ms;
  208.   align-items: center;
  209.   overflow: hidden;
  210.   -webkit-box-align: start;
  211.   padding: 0.65rem 0.6rem;
  212.   margin-top: 0.5rem;
  213.   background-color: #fff;
  214. }
  215. .fui-list-media {
  216.   display: flex;
  217.   flex-shrink: 0;
  218.   -webkit-box-lines: single;
  219.   flex-wrap: nowrap;
  220.   box-sizing: border-box;
  221.   -webkit-box-align: center;
  222.   align-items: center;
  223.   margin-right: 0.6rem;
  224.   color: #aaa;
  225.   position: relative;
  226. }
  227. .img{
  228.   width: 86px;
  229.   height: 86px;
  230. }
  231. image-media {
  232.   margin-left: 1rem;
  233.   align-self: center;
  234. }
  235. .fui-list-inner {
  236.   position: relative;
  237.   width: 100%;
  238.   overflow: hidden;
  239.   box-sizing: border-box;
  240.   -webkit-box-flex: 1;
  241.   flex: 1;
  242.   justify-content: space-between;
  243.   flex-direction: column;
  244.   -webkit-box-pack: justify;
  245.   min-height: 4.6rem;
  246.   align-self: center;
  247. }
  248. .subtitle{
  249.   align-items: center;
  250.   position: relative;
  251.   font-size: 0.7rem;
  252.   margin-top: 0.2rem;
  253.   overflow: hidden;
  254.   text-overflow: ellipsis;
  255.   display: -webkit-box;
  256.   -webkit-line-clamp: 2;
  257.   -webkit-box-orient: vertical;
  258.   white-space: normal;
  259.   color: #000;
  260. }
  261. .price {
  262.   display: flex;
  263.   -webkit-box-pack: justify;
  264.   justify-content: space-between;
  265.   height: 1.2rem;
  266.   font-size: 0.65rem;
  267.   color: #000;
  268. }
  269. .bigprice {
  270.   font-size: 0.75rem;
  271. }
  272. .text-danger {
  273.   color: #ff5555;
  274. }
  275. .fui-number {
  276.   backface-visibility: hidden;
  277.   box-sizing: border-box;
  278.   position: relative;
  279.   display: flex;
  280.   font-size: 0.8rem;
  281.   -webkit-box-pack: justify;
  282.   justify-content: space-between;
  283.   margin: 0;
  284. }
  285. .small {
  286.   height: 1.1rem;
  287.   width: 79px;
  288.   line-height: 1.2rem;
  289. }
  290. .minus {
  291.   height: inherit;
  292.   font-weight: bold;
  293.   position: relative;
  294.   text-align: center;
  295.   z-index: 1;
  296.   font-size: 0.65rem;
  297.   color: #666;
  298.   background: #fff;
  299.   width: 1.1rem;
  300.   line-height: 1.1rem;
  301. }
  302. .num {
  303.   -webkit-box-flex: 1;
  304.   flex: 1;
  305.   overflow: hidden;
  306.   line-height: inherit;
  307.   color: #666;
  308.   text-align: center;
  309.   border: 0;
  310.   font-size: 0.7rem;
  311. }
  312. .plus {
  313.   height: inherit;
  314.   font-weight: bold;
  315.   position: relative;
  316.   text-align: center;
  317.   z-index: 1;
  318.   font-size: 0.65rem;
  319.   color: #666;
  320.   background: #fff;
  321.   width: 1.1rem;
  322.   line-height: 1.1rem;
  323. }
  324. /* 底部按钮 */
  325. .fui-footer {
  326.   position: fixed;
  327.   width: 100%;
  328.   height: 2.45rem;
  329.   background: #fff;
  330.   box-shadow: 0 0 4px rgba(0,0,0,0.1);
  331.   -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.1);
  332.   -moz-box-shadow: 0 0 4px rgba(0,0,0,0.1);
  333.   z-index: 2;
  334.   padding: 0 0 90px 0;
  335.   margin: 0;
  336.   bottom: 0;
  337. }
  338. .fui-footer-list{
  339.   align-items: center;
  340.   overflow: hidden;
  341.   transition-duration: 300ms;
  342.   -webkit-box-align: center;
  343.   display: flex;
  344.   position: relative;
  345.   justify-content: space-between;padding: 0 0 0 .6rem;
  346.   height: 2.45rem;
  347.   -webkit-box-pack: justify;
  348. }
  349. .editmode{
  350.   align-items: center;
  351.   margin-right: .6rem;
  352.   color: #aaa;
  353.   position: relative;
  354.   flex-wrap: nowrap;
  355.   box-sizing: border-box;
  356.   -webkit-box-align: center;
  357.   flex-shrink: 0;
  358.   -webkit-box-lines: single;
  359. }
  360. .fui-footer-inner{
  361.   box-sizing: border-box;
  362.   -webkit-tap-highlight-color: transparent;
  363.   margin: 0;
  364.   padding: 0;
  365.   position: relative;
  366.   font-size: .7rem;
  367.   color: #666;
  368.   padding-left: 1.2rem;
  369.   vertical-align: middle;
  370. }
  371. .footer-subtitle{
  372.   -webkit-line-clamp: 1;
  373.   -webkit-box-orient: vertical;
  374.   overflow: hidden;
  375.   text-overflow: ellipsis;
  376.   position: relative;
  377.   color: #000;
  378.   font-size: .7rem;
  379.   margin-top: .2rem;
  380.   display: flex;
  381.   align-items: flex-end;
  382.   padding: 0;
  383.   justify-content: flex-end;
  384.   -webkit-box-pack: end;
  385. }
  386. .fui-list-angle{
  387.   position: relative;
  388.   vertical-align: middle;
  389.   padding: 0;
  390.   display: flex;
  391.   margin: 0;
  392. }
  393. .btn{
  394.   background: #ff5555;
  395.   border: 0;
  396.   padding: 0;
  397.   margin: 0;
  398.   border-radius: 0;
  399.   height: 100%;
  400.   line-height: 2.45rem;
  401.   font-size: .7rem;
  402.   color: #fff;
  403.   margin-left: .05rem;
  404.   width: 5rem;
  405. }
  406. </style>

Order.vue

  1. <template>
  2. <div>
  3.       <Header :title="title"></Header>
  4.     <div class="fui-page order-create-page fui-page-current" style="height:100%;margin-top:40px;">
  5.         <div class='fui-content navbar'>
  6.             <!-- 地址 -->
  7.             <div class="fui-list-group" @click="is_a()">
  8.                 <div class="fui-list">
  9.                     <div class="fui-list-inner">
  10.                         <div class="title">
  11.                             收货人：
  12.                             <span class="realname">{{address_se.name}}</span>
  13.                             <span class="mobile">{{address_se.phone}}</span>
  14.                         </div>
  15.                         <div class="title">
  16.                             <span class="address">{{address_se.address}}</span>
  17.                         </div>
  18.                     </div>
  19.                     <div class="address_img">
  20.                       <img src="@/assets/images/right.png" />
  21.                     </div>
  22.                 </div>
  23.             </div>
  24.             <div v-if="is_address">
  25.               <div class="ant-modal-mask"></div>
  26.               <div class="fui-list-group" style="position:fixed;top:30%;z-index:1000;position: fixed;inset: 0;overflow: auto;outline: 0;">
  27.                   <div class="fui-list" @click="is_a_se(index)" v-for="(item,index,key) in address" :key="key">
  28.                       <div class="fui-list-inner">
  29.                           <div class="title">
  30.                               收货人：
  31.                               <span class="realname">{{item.name}}</span>
  32.                               <span class="mobile">{{item.phone}}</span>
  33.                           </div>
  34.                           <div class="title">
  35.                               <span class="address">{{item.address}}</span>
  36.                           </div>
  37.                       </div>
  38.                   </div>
  39.                 <div style="text-align:center;font-size:20px;margin-top:20px;" @click="is_a()">X</div>
  40.               </div>
  41.             </div>
  42.             <!-- 地址end -->
  43.             <!-- 商品 -->
  44.             <div class='fui-shop'>
  45.                 <div class='fui-shop-list' v-for="(item,index,key) in shop" :key="key">
  46.                     <div class="fui-shop-list-media">
  47.                         <img class="img" :src="item.img_s"/>
  48.                     </div>
  49.                     <div class="shops" style='folat:left;width:250px;'>
  50.                         <div class="subtitle">{{item.title}}</div>
  51.                     </div>
  52.                     <div class="fui-list-angle">
  53.                         <span style="font-size: 0.65rem;color: #000">￥<span class="marketprice">{{item.price}}</span></span>
  54.                         <div style='color: #999;'>x{{item.number}}</div>
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.             <!-- 商品end -->
  59.             <!-- 买家留言 -->
  60.             <div class="fui-cell-group">
  61.                 <div class="fui-cell fui-cell-textarea">
  62.                     <div class="fui-cell-label">
  63.                         买家留言
  64.                     </div>
  65.                     <div class="fui-cell-info">
  66.                         <textarea class='textarea' rows="2" placeholder="50字以内（选填）"></textarea>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.             <!-- 买家留言end -->
  71.             <!-- 支付按钮 -->
  72.             <div class="fui-navbar">
  73.                 <div class="nav-item total">
  74.                     需付：<span class="text-danger size0-75rem">¥ {{total}}</span>
  75.                     <button class="nav-item btn btn-danger buybtn" style="width:200px;margin-left:10px;" @click="order()">确定订单</button>
  76.                 </div>
  77.             </div>
  78.             <!-- 支付按钮end -->
  79.         </div>
  80.     </div>
  81. </div>
  82. </template>
  83. <script>
  84. import { reactive, toRefs } from "vue";
  85. import Header from '../../components/Header.vue';
  86. import { useRoute,useRouter } from "vue-router";
  87. import { ShopOne,AddOrder } from "../../network/index.js";
  90. export default({
  91.   components: {
  92.     Header
  93.   },
  94.   setup() {
  95.     const token = window.localStorage.getItem('token');
  96.     const route = useRoute();
  97.     const router = useRouter();
  98.     if(!token){
  99.       alert('请您先登录');
  100.       router.push({
  101.           path: "/login"
  102.       });
  103.     }
  105.     // 2022年5月18日作业：
  106.     // 1、课上代码练习：商品详情页，登录页，下单页
  107.     // 2、提前复习：订单支付页，展示数据，支付成功（不需要支付宝和微信）
  109.     const order = ()=>{
  110.       AddOrder({token:token,id:route.query.id,address:data.address_se.id}).then( (e)=>{
  111.         alert(e.msg);
  112.         if(e.code == 0){
  113.           router.push({
  114.               path: "/cart_pay",
  115.               query: { id: e.data }
  116.           });
  117.         }
  118.       } )
  119.     }
  120.     const data = reactive({
  121.         shop : [],
  122.         address : [
  123.           {
  124.             id : 1,
  125.             name : "欧阳克",
  126.             phone : "18811112222",
  127.             address : "安徽省合肥市政务区银泰城609"
  128.           },
  129.           {
  130.             id : 2,
  131.             name : "朱天蓬",
  132.             phone : "18811113333",
  133.             address : "安徽省合肥市政务区银泰城609"
  134.           },
  135.           {
  136.             id : 3,
  137.             name : "灭绝师太",
  138.             phone : "18811114444",
  139.             address : "安徽省合肥市政务区银泰城609"
  140.           }
  141.         ],
  142.         is_address : false,
  143.         address_se : [],
  144.         total:0
  145.     });
  146.     const is_a = ()=>{
  147.       if(data.is_address == true){
  148.         data.is_address = false;
  149.       }else{
  150.         data.is_address = true;
  151.       }
  152.     }
  153.     const is_a_se = (e)=>{
  154.       data.is_address = false;
  156.       data.address_se = data.address[e];
  157.     }
  159.     ShopOne({id:route.query.id,token:token,t:route.query.t}).then( (e)=>{
  160.       data.address = e.data.address;
  161.       data.shop = e.data.shop;
  162.       data.total = e.data.total;
  163.       data.address_se = e.data.address[0];
  164.     } )
  166.     return {
  167.         title:"下单",
  168.         order,
  169.         ...toRefs(data),
  170.         is_a,
  171.         is_a_se
  172.     };
  173.   }
  174. })
  175. </script>
  176. <style scoped>
  177. .fui-page {
  178.   position: absolute;
  179.   left: 0;
  180.   top: 0;
  181.   width: 100%;
  182.   height: 100%;
  183.   background: #f3f3f3;
  184.   box-sizing: border-box;
  185.   display: none;
  186. }
  187. .order-create-page {
  188.   margin: 0;
  189.   bottom: 2rem;
  190.   padding-bottom: 2rem;
  191.   display: block;
  192.   overflow: hidden;
  193. }
  194. .fui-content {
  195.   position: absolute;
  196.   top: 0;
  197.   right: 0;
  198.   bottom: 0;
  199.   left: 0;
  200.   overflow: auto;
  201.   -webkit-overflow-scrolling: touch;
  202. }
  203. .fui-content.navbar {
  204.   bottom: 2.5rem;
  205.   padding-bottom: 2.2rem;
  206. }
  207. /* 地址 */
  208. .fui-list-group {
  209.   background-color: #fff;
  210.   position: relative;
  211.   margin: 0 0 0.5rem;
  212. }
  213. .fui-list {
  214.   position: relative;
  215.   display: flex;
  216.   padding: .4rem .6rem;
  217.   transition-duration: 300ms;
  218.   align-items: center;
  219.   overflow: hidden;
  220.   padding-top: 0.8rem;
  221.   padding-bottom: 0.83rem;
  222. }
  223. .fui-list-inner {
  224.   position: relative;
  225.   width: 100%;
  226.   overflow: hidden;
  227.   box-sizing: border-box;
  228.   -ms-flex: 1;
  229.   flex: 1;
  230.   display: block;
  231.   align-self: flex-start;
  232. }
  233. .fui-list-inner .text {
  234.   position: relative;
  235.   font-size: .7rem;
  236.   color: #000;
  237.   text-align: center;
  238. }
  239. .fui-list-inner .title {
  240.   position: relative; 
  241.   white-space: nowrap;
  242.   text-overflow: ellipsis;
  243.   overflow: hidden;
  244.   display: flex;
  245.   color: #000;
  246.   font-size: .7rem;
  247.   line-height: 1.2rem;
  248.   height: 1.2rem;
  249. }
  250. .realname {
  251.   display: inline-block;
  252.   max-width: 9rem;
  253.   white-space: nowrap;
  254.   text-overflow: ellipsis;
  255.   overflow: hidden;
  256.   padding-right: 1.2rem;
  257. }
  258. .mobile {
  259.   display: inline-block;
  260.   overflow: hidden;
  261. }
  262. .address{
  263.   overflow: hidden;
  264.   text-overflow: ellipsis;
  265.   font-size: 0.65rem;
  266.   color: #666;
  267. }
  268. .address_img{
  269.   float: right;
  270.   display: block;
  271. }
  272. /* 地址end */
  273. /* 商品 */
  274. .fui-shop {
  275.   background-color: #fff;
  276.   position: relative;
  277.   margin-top: 0.5rem;
  278. }
  279. .fui-shop-list {
  280.   align-items: center;
  281.   overflow: hidden;
  282.   transition-duration: 300ms;
  283.   display: flex;
  284.   padding: 0.4rem 0.6rem;
  285.   position: relative;
  286.   -webkit-box-align: start;
  287. }
  288. .fui-shop-list-media{
  289.   display: flex;
  290.   align-items: center;
  291.   margin-right: 0.6rem;
  292.   color: #aaa;
  293.   position: relative;
  294.   flex-wrap: nowrap;
  295.   box-sizing: border-box;
  296.   -webkit-box-align: center;
  297.   flex-shrink: 0;
  298.   -webkit-box-lines: single;
  299. }
  300. .img{
  301.   width: 4rem;
  302.   height: 4rem;
  303. }
  304. .shops {
  305.   height: 3.5rem;
  306.   align-self: center;
  307.   justify-content: space-between;
  308.   flex-direction: column;
  309.   -webkit-box-pack: justify;
  310.   display: flex;
  311. }
  312. .subtitle {
  313.   color: #000;
  314.   font-size: 0.7rem;    
  315.   overflow: hidden;
  316.   text-overflow: ellipsis;
  317.   display: -webkit-box;
  318.   -webkit-line-clamp: 2;
  319.   -webkit-box-orient: vertical;
  320.   white-space: normal;
  321. }
  322. .fui-list-angle {
  323.   text-align: right;
  324.   font-size: 0.7rem;
  325.   color: #666;
  326.   margin-right: 0.1rem;
  327.   right: 20px; 
  328.   position:absolute;
  329.   vertical-align: middle;
  330.   height: 3.5rem;
  331.   align-self: center;
  332.   width: 3.5rem
  333. }
  334. /* 买家留言 */
  335. .fui-cell-group {
  336.   margin-top: 0.5rem;
  337.   background-color: #fff;
  338.   line-height: 1.4;
  339.   font-size: 0.8rem;
  340.   overflow: hidden;
  341.   position: relative;
  342.   display: block;
  343. }
  344. .fui-cell-group .fui-cell {
  345.   position: relative;
  346.   padding: 0.75rem 0.6rem 0.65rem;
  347.   display: flex;
  348.   transition-duration: 300ms;
  349.   line-height: 1.2;
  350.   height: 2.5rem;
  351.   align-items: flex-start;
  352. }
  353. .fui-cell-group .fui-cell .fui-cell-label {
  354.   position: relative;
  355.   display: block;
  356.   width: 3.85rem;
  357.   font-size: 0.7rem;
  358.   color: #666;
  359.   margin: 0.15rem 0 0 0;
  360. }
  361. .fui-cell-group .fui-cell .fui-cell-info {
  362.   -webkit-box-flex: 1;
  363.   flex: 1;
  364.   white-space: nowrap;
  365.   text-overflow: ellipsis;
  366.   overflow: hidden;
  367.   font-size: 0.7rem;
  368.   color: #000;
  369. }
  370. .textarea {
  371.   width: 100%;
  372.   background: transparent;
  373.   border: none;
  374.   resize: none;
  375.   font-size: 0.7rem;
  376.   font-family: "Helvetica Neue", Helvetica, sans-serif;
  377. }
  378. /* 支付按钮 */
  379. .fui-navbar{
  380.   position: fixed;
  381.   width: 100%;
  382.   bottom: 0;
  383.   height: 2.45rem;
  384.   background: #fff;
  385.   z-index: 2;
  386. }
  387. .fui-navbar .nav-item {
  388.   position: relative;
  389.   display: table-cell;
  390.   height: 2.45rem;
  391.   text-align: center;
  392.   vertical-align: middle;
  393.   width: 1%;
  394.   color: #999;
  395. }
  396. .total {
  397.   padding-left: 0;
  398.   padding-right: 0.5rem;
  399.   font-size: 0.7rem;
  400.   height: 2.45rem;
  401. }
  402. .order-create-page .buybtn {
  403.   border: none;
  404.   font-size: 0.7rem;
  405.   color: #fff;
  406.   border-radius: 0;
  407.   width: 0.2%;
  408. }
  409. .fui-navbar .nav-item.btn {
  410.   color: #fff;
  411.   border-radius: 0;
  412. }
  413. .btn.btn-danger {
  414.   background: #ff5555;
  415.   color: #fff;
  416.   border: 1px solid #ff5555;
  417. }
  418. </style>

Pay.vue

  1. <template>
  2. <div>
  3.     <Header :title="title"></Header>
  4.     <div class="fui-page order-create-page fui-page-current" style="height:100%;margin-top:40px;">
  5.         <div class='fui-content navbar'>
  6.             <div class="totals">
  7.                 <span>订单号</span>
  8.                 <div class="num">{{order.oid}}</div>
  9.             </div>
  10.             <div class="totals">
  11.                 <span>总计</span>
  12.                 <div class="num"><span class="iconfont icon-renminbi1688"></span>{{order.money}}</div>
  13.             </div>
  14.             <div class="pay">
  15.                 <div class="channel">
  16.                     <div class="left">
  17.                         <span class="wx iconfont icon-weixin"></span>
  18.                         <span>微信支付</span>
  19.                     </div>
  20.                     <div class="right">
  21.                         <label>
  22.                             <input type="radio" value="1" name="pay_type" checked="checked" v-model="is_pay">
  23.                         </label>
  24.                     </div>
  25.                 </div>
  27.                 <div class="channel">
  28.                     <div class="left">
  29.                         <span class="zfb iconfont icon-zhifubaozhifu"></span>
  30.                         <span>支付宝</span>
  31.                     </div>
  32.                     <div class="right">
  33.                         <label>
  34.                             <input type="radio" value="2" name="pay_type" v-model="is_pay">
  35.                         </label>
  36.                     </div>
  37.                 </div>
  38.             </div>
  39.             <!-- 支付按钮 -->
  40.             <div class="fui-navbar">
  41.                 <div class="nav-item total">
  42.                     需付：<span class="text-danger size0-75rem">¥ {{order.money}}</span>
  43.                     <button class="nav-item btn btn-danger buybtn" style="width:200px;margin-left:10px;" @click="go_order()">确定支付</button>
  44.                 </div>
  45.             </div>
  46.             <!-- 支付按钮end -->
  47.         </div>
  48.     </div>
  49. </div>
  50. </template>
  51. <script>
  52. import Header from '../../components/Header.vue';
  53. import { reactive, toRefs } from "vue";
  54. import { useRoute,useRouter } from "vue-router";
  55. import { PayOrder, Pay } from "../../network/index.js";
  57.   export default {
  58.     components:{
  59.         Header
  60.     },
  61.     setup() {
  62.     const token = window.localStorage.getItem('token');
  63.     const route = useRoute();
  64.     const router = useRouter();
  65.     if(!token){
  66.       alert('请您先登录');
  67.       router.push({
  68.           path: "/login"
  69.       });
  70.     }
  71.     const data = reactive({
  72.         order : [],
  73.         is_pay : 1
  74.     })
  75.     PayOrder({token:token,id:route.query.id}).then( (e)=>{
  76.         console.log(e);
  77.         data.order = e.data;
  78.     })
  79.     const go_order = ()=>{
  80.         Pay({token:token,id:route.query.id,is_pay:data.is_pay}).then( ()=>{
  81.             router.push({
  82.                 path: "/my_order_details?id="+route.query.id
  83.             });
  84.         } )
  85.     }
  86.     return {
  87.         title : '购买课程',
  88.         ...toRefs(data),
  89.         go_order
  90.     }
  91.     }
  92. }
  93. </script>
  94. <style scoped>
  95. .fui-page {
  96.   position: absolute;
  97.   left: 0;
  98.   top: 0;
  99.   width: 100%;
  100.   height: 100%;
  101.   background: #f3f3f3;
  102.   box-sizing: border-box;
  103.   display: none;
  104. }
  105. .order-create-page {
  106.   margin: 0;
  107.   bottom: 2rem;
  108.   padding-bottom: 2rem;
  109.   display: block;
  110.   overflow: hidden;
  111. }
  112. .fui-content {
  113.   position: absolute;
  114.   top: 0;
  115.   right: 0;
  116.   bottom: 0;
  117.   left: 0;
  118.   overflow: auto;
  119.   -webkit-overflow-scrolling: touch;
  120. }
  121. .fui-content.navbar {
  122.   bottom: 2.5rem;
  123.   padding-bottom: 2.2rem;
  124. }
  125. /* 支付按钮 */
  126. .fui-navbar{
  127.   position: fixed;
  128.   width: 100%;
  129.   bottom: 0;
  130.   height: 2.45rem;
  131.   background: #fff;
  132.   z-index: 2;
  133. }
  134. .fui-navbar .nav-item {
  135.   position: relative;
  136.   display: table-cell;
  137.   height: 2.45rem;
  138.   text-align: center;
  139.   vertical-align: middle;
  140.   width: 1%;
  141.   color: #999;
  142. }
  143. .total {
  144.   padding-left: 0;
  145.   padding-right: 0.5rem;
  146.   font-size: 0.7rem;
  147.   height: 2.45rem;
  148. }
  149. .order-create-page .buybtn {
  150.   border: none;
  151.   font-size: 0.7rem;
  152.   color: #fff;
  153.   border-radius: 0;
  154.   width: 0.2%;
  155. }
  156. .fui-navbar .nav-item.btn {
  157.   color: #fff;
  158.   border-radius: 0;
  159. }
  160. .btn.btn-danger {
  161.   background: #ff5555;
  162.   color: #fff;
  163.   border: 1px solid #ff5555;
  164. }
  165. .totals {
  166.     background-color: #fff;
  167.     padding: 20px;
  168.     height: 60px;
  169.     display: flex;
  170.     place-content: space-between;
  171.     color: gray;
  172.     font-size: large;
  173.     margin: 20px 0;
  174. }
  175. .pay {
  176.     background-color: #fff;
  177.     padding: 20px;
  178.     height: 140px;
  179.     margin: 20px 0;
  180.     color: gray;
  181.     font-size: 12px;
  182. }
  183. .pay .channel {
  184.     padding: 10px;
  185.     display: flex;
  186.     place-items: center;
  187.     place-content: space-between;
  188. }
  189. .pay .channel .left {
  190.     font-size: larger;
  191.     display: flex;
  192.     place-items: center;
  193. }
  194. .pay .channel .left .wx {
  195.     color: forestgreen;
  196. }
  197. .pay .channel .left .zfb {
  198.     color: deepskyblue;
  199. }
  200. .pay .channel .left .iconfont {
  201.     font-size: xx-large;
  202.     margin-right: 10px;
  203. }
  204. .pay .channel + * {
  205.     border-top: 1px solid lightgray;
  206. }
  207. </style>

Details.vue

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

index.js

  1. import {request} from "./request.js";
  3. export function Index(){
  4.     return request( {
  5.         method : "POST",
  6.         url : "Api/index"
  7.     } )
  8. }
  9. export function GoodsIndex(){
  10.     return request( {
  11.         method : "POST",
  12.         url : "Api/goods_index"
  13.     } )
  14. }
  15. export function GoodsLists(data={}){
  16.     return request( {
  17.         method : "POST",
  18.         url : "Api/goods_lists",
  19.         data
  20.     } )
  21. }
  22. export function GoodsDetails(data={}){
  23.     return request( {
  24.         method : "POST",
  25.         url : "Api/goods_details",
  26.         data
  27.     } )
  28. }
  29. export function AddCart(data={}){
  30.     return request( {
  31.         method : "POST",
  32.         url : "Api/add_cart",
  33.         data
  34.     } )
  35. }
  36. export function Login(data={}){
  37.     return request( {
  38.         method : "POST",
  39.         url : "Api/login",
  40.         data
  41.     } )
  42. }
  43. export function ShopOne(data={}){
  44.     return request( {
  45.         method : "POST",
  46.         url : "Api/shop_one",
  47.         data
  48.     } )
  49. }
  50. export function AddOrder(data={}){
  51.     return request( {
  52.         method : "POST",
  53.         url : "Api/add_order",
  54.         data
  55.     } )
  56. }
  58. export function PayOrder(data={}){
  59.     return request( {
  60.         method : "POST",
  61.         url : "Api/pay_order",
  62.         data
  63.     } )
  64. }
  66. export function Pay(data={}){
  67.     return request( {
  68.         method : "POST",
  69.         url : "Api/pay",
  70.         data
  71.     } )
  72. }
  74. export function CartIndex(data={}){
  75.     return request( {
  76.         method : "POST",
  77.         url : "Api/cart_index",
  78.         data
  79.     } )
  80. }
  82. export function EidtCart(data={}){
  83.     return request( {
  84.         method : "POST",
  85.         url : "Api/eidt_cart",
  86.         data
  87.     } )
  88. }

Api.php

  1. <?php
  2. namespace app\api\controller;
  3. use think\facade\Db;
  4. use think\facade\Request;
  5. use ouyangke\Ticket;
  7. class Api{
  8.     // Access to XMLHttpRequest at 'http://www.tp.com/index.php/api/Api/index' 
  9.     // from origin 'http://localhost:8080' has been blocked by CORS policy: No 
  10.     // 'Access-Control-Allow-Origin' header is present on the requested resource.
  11.     // 错误信息：是因为前后端分离导致的。前后端 前端和后端的域名不是一个。不是一个，就会出现这种错误。
  12.     // 跨域名访问的安全错误提示
  14.     public function __construct(){
  15.         // 使用php的header函数，设置为*，全部能访问
  16.         header("Access-Control-Allow-Origin:*");
  17.     }
  18.     public function index(){
  19.         // 如何写一个 前端数据接口呢？app、小程序、vue
  20.         // 接口：让2个以上的项目进行数据联通，数据交互
  21.         // 多个语言 必须有统一的格式， 最后返回值，必须多种语言都能使用
  23.         // 接口的统一数据格式是 json
  25.         // php有json的函数 
  26.         // json_encode 把php的数据加密成json格式
  27.         // json_decode 把json格式转为 php数据格式
  29.         // $arr = [
  30.         //     "ouyangke" => "欧阳克",
  31.         //     "miejue" => "灭绝师太",
  32.         //     "php" => [
  33.         //         "ouyangke",
  34.         //         "miejue"
  35.         //     ],
  36.         //     "tianpeng" => "朱天蓬"
  37.         // ];
  38.         // json格式，是文本，我们就可以echo
  39.         // {"ouyangke":"\u6b27\u9633\u514b","miejue":"\u706d\u7edd\u5e08\u592a","tianpeng":"\u6731\u5929\u84ec"}
  40.         // echo json_encode($arr);
  42.         // 1、接口 必须用json返回数据
  43.         // 2、用数组 转为json数据
  44.         $ad = Db::table('oyk_adver')->where('status',1)->order('sort DESC')->select()->toArray();
  46.         $lists = Db::table('oyk_shop_lists')->where('status',1)->order('add_time DESC')->limit(6)->select()->toArray();
  47.         // & 取之前的地址
  48.         foreach($lists as &$v){
  49.             $img = explode(';',$v['img']);
  50.             $v['img_s'] = $img[0];
  51.         }
  52.         // 3、接口只能一次性返回数据，不能多次
  53.         // echo json_encode($ad);
  54.         // echo json_encode($lists);
  56.         $arr = [
  57.             'ad' => $ad,
  58.             'lists' => $lists
  59.         ];
  60.         echo json_encode($arr);
  61.     }
  64.     public function goods_index(){
  65.         // 第一种方法：会好一些。以为php自己执行数据，比查询数据库要快
  66.         // echo time();
  67.         // echo '<br>';
  68.         $cat = Db::table('oyk_shop_cat')->where('status',1)->order('pid,sort DESC')->select()->toArray();
  69.         $tmp = [];
  70.         foreach($cat as $v){
  71.             if($v['pid'] == 0){
  72.                 // 我们可以把一级的id，作为下标。下次找的话，直接用它的id，就能找到
  73.                 $tmp[$v['cid']] = $v;
  74.             }else{
  75.                 $tmp[$v['pid']]['son'][] = $v;
  76.             }
  77.         }
  78.         // 成功是0，失败就是1，2，3，4
  79.         // 4、处理接口整理数据
  80.         $arr = [
  81.             'code' => 0,
  82.             'msg' => '成功',
  83.             'data' => array_merge($tmp)
  84.             // 'data' => $tmp
  85.         ];
  86.         echo json_encode($arr);
  87.         // echo time();
  88.         // echo '<br>';
  89.         // 能不能跟上面结合呢？
  90.         // foreach($cat  as $v){
  91.         //     if($v['pid'] != 0){
  92.         //         $tmp[$v['pid']]['son'][] = $v;
  93.         //     }
  94.         // }
  95.         // print_r($tmp);
  97.         // 第二种方法
  98.         // echo time();
  99.         // echo '<br>';
  100.         // $cat = Db::table('oyk_shop_cat')->where('status',1)->where('pid',0)->select()->toArray();
  101.         // foreach($cat as &$v){
  102.         //     $v['son'] = Db::table('oyk_shop_cat')->where('status',1)->where('pid',$v['cid'])->select()->toArray();
  103.         // }
  104.         // echo time();
  105.         // echo '<br>';
  106.         // print_r($cat);
  107.     }
  109.     public function goods_lists(){
  110.         $id = input('post.id');
  111.         if(empty($id)){
  112.             echo json_encode([
  113.                 'code' => 1,
  114.                 'msg' => '未找到列表'
  115.             ]);
  116.             exit;
  117.         }
  118.         $page = input('post.p',1);
  119.         $count = Db::table('oyk_shop_lists')->where('status',1)->where('cid',$id)->count();
  120.         // print_r((int)($count/5) + 1 );
  121.         // ceil 函数，向上取整
  122.         // print_r(ceil($count/5));
  123.         $lists = Db::table('oyk_shop_lists')->where('status',1)->where('cid',$id)->page($page,5)->select()->toArray();
  124.         foreach($lists as &$v){
  125.             $img = explode(';',$v['img']);
  126.             $v['img_s'] = $img[0];
  127.         }
  128.         $arr = [
  129.             'code' => 0,
  130.             'msg' => '成功',
  131.             'data' => [
  132.                 "lists" => $lists,
  133.                 'num' => ceil($count/5)
  134.             ]
  135.         ];
  136.         echo json_encode($arr);
  137.         // exit; 不要停止
  138.     }
  140.     public function goods_details(){
  141.         $id = input('post.id');
  142.         if(empty($id)){
  143.             echo json_encode([
  144.                 'code' => 1,
  145.                 'msg' => '未找到商品'
  146.             ]);
  147.             exit;
  148.         }
  150.         $find = Db::table('oyk_shop_lists')->where('id',$id)->find();
  151.         if(!empty($find)){
  152.             $find['img_s'] = explode(';',$find['img']);
  153.             $find['info_s'] = explode(';',$find['info']);
  154.         }
  155.         echo json_encode([
  156.             'code' => 0,
  157.             'msg' => '成功',
  158.             'data' => $find
  159.         ]);
  160.     }
  162.     public function add_cart(){
  163.         $uid = input('post.uid');
  164.         if(empty($uid)){
  165.             echo json_encode([
  166.                 'code' => 1,
  167.                 'msg' => '未找到用户'
  168.             ]);
  169.             exit;
  170.         }
  171.         $sid = input('post.sid');
  172.         if(empty($sid)){
  173.             echo json_encode([
  174.                 'code' => 1,
  175.                 'msg' => '未找到商品'
  176.             ]);
  177.             exit;
  178.         }
  180.         $find = Db::table('oyk_cart')->where('sid',$sid)->where('uid',$uid)->find();
  181.         if(empty($find)){
  182.             $ret = Db::table('oyk_cart')->insert([
  183.                 'sid' => $sid,
  184.                 'uid' => $uid,
  185.                 'num' => 1,
  186.                 'status' => 1,
  187.                 'add_time' => time()
  188.             ]);
  189.         }else{
  190.             $ret =Db::table('oyk_cart')->where('id',$find['id'])->update([
  191.                 'num' => $find['num'] + 1,
  192.                 'add_time' => time()
  193.             ]);
  194.         }
  195.         if(empty($ret)){
  196.             echo json_encode([
  197.                 'code' => 1,
  198.                 'msg' => '添加失败'
  199.             ]);
  200.             exit;
  201.         }
  202.         echo json_encode([
  203.             'code' => 0,
  204.             'msg' => '添加成功'
  205.         ]);
  206.     }
  208.     public function login(){
  209.         $phone = input('post.phone');
  210.         if(empty($phone)){
  211.             echo json_encode([
  212.                 'code' => 1,
  213.                 'msg' => '手机号不能为空'
  214.             ]);
  215.             exit;
  216.         }
  217.         $password = input('post.password');
  218.         if(empty($password)){
  219.             echo json_encode([
  220.                 'code' => 1,
  221.                 'msg' => '密码不能为空'
  222.             ]);
  223.             exit;
  224.         }
  225.         // 如果查询用户时，用密码作为条件，我们也不知道用户是没有，还是密码错误
  226.         $user = Db::table('oyk_user')->where('phone',$phone)->find();
  227.         if(empty($user)){
  228.             echo json_encode([
  229.                 'code' => 1,
  230.                 'msg' => '用户未找到'
  231.             ]);
  232.             exit;
  233.         }
  235.         if($user['password'] != md5($password)){
  236.             echo json_encode([
  237.                 'code' => 1,
  238.                 'msg' => '密码错误'
  239.             ]);
  240.             exit;
  241.         }
  242.         unset($user['password']);
  244.         $user['ticket'] = Ticket::create(1,'ouyangke');
  245.         // j7bjkL9ifDhuQyxjjPQMQnLMi0c4lSYy
  246.         // uV7FEN7jeJJi93RijvRP4LNCyrpiJTIg
  247.         // rRTFsg3K5IuC4fzJtvYCRonI4ipKSLbr
  248.         echo json_encode([
  249.             'code' => 1,
  250.             'msg' => '登录成功',
  251.             'data' => $user
  252.         ]);
  253.     }
  255.     public function shop_one(){
  256.         $token = input('post.token');
  257.         if(empty($token)){
  258.             echo json_encode([
  259.                 'code' => 1,
  260.                 'msg' => '未登录'
  261.             ]);
  262.             exit;
  263.         }
  264.         $uid = Ticket::get($token,'ouyangke');
  265.         $id = input('post.id');
  266.         $t = input('post.t',0);
  267.         if($t == 0){
  268.             $shop = Db::table('oyk_shop_lists')->where('id',$id)->select()->toArray();
  269.         }else{
  270.             $ids = explode(';',$id);
  271.             $cart = Db::table('oyk_cart')->where('id','in',$ids)->select()->toArray();
  272.             $tmp = [];
  273.             foreach($cart as $v){
  274.                 $tmp[] = $v['sid'];
  275.             }
  276.             $shop = Db::table('oyk_shop_lists')->where('id','in',$tmp)->select()->toArray();
  277.             $tmp_id = [];
  278.             foreach($shop as $v){
  279.                 $tmp_id[$v['id']] = $v;
  280.             }
  281.             foreach($cart as $v){
  282.                 if($v['sid'] == $tmp_id[$v['sid']]['id'] ){
  283.                     $tmp_id[$v['sid']]['number'] = $v['num'];
  284.                 }
  285.             }
  286.             $shop = $tmp_id;
  287.         }
  289.         $total= 0;
  290.         foreach($shop as &$shop_v){
  291.             $img = explode(';',$shop_v['img']);
  292.             $shop_v['img_s'] = $img[0];
  293.             $total = $shop_v['number'] * $shop_v['price'];
  294.         }
  296.         $address = Db::table('oyk_user_address')->where('uid',$uid)->order('is DESC')->select()->toArray();
  298.         $data = [
  299.             'shop' => $shop,
  300.             'address' => $address,
  301.             'total' => $total
  302.         ];
  303.         echo json_encode([
  304.             'code' => 0,
  305.             'msg' => '成功',
  306.             'data' => $data
  307.         ]);
  308.     }
  310.     public function add_order(){
  311.         $token = input('post.token');
  312.         if(empty($token)){
  313.             echo json_encode([
  314.                 'code' => 1,
  315.                 'msg' => '未登录'
  316.             ]);
  317.             exit;
  318.         }
  319.         $uid = Ticket::get($token,'ouyangke');
  321.         $id = input('post.id');
  322.         $shop = Db::table('oyk_shop_lists')->where('id',$id)->find();
  323.         // 1、商品也需要判断id是否传
  324.         // 2、在去查询商品表，是否有这个商品
  325.         // 3、判断这个商品，是否被关闭status==0
  327.         $data = [
  328.             'oid' => date('YmdHis',time()) . mt_rand(1000,9999) . mt_rand(1000,9999),
  329.             'uid' => $uid,
  330.             'shop_id' => $id,
  331.             'money' => $shop['price'],
  332.             'add_time' => time(),
  333.             'info' => ''
  334.         ];
  335.         $order_id = Db::table('oyk_user_order')->insertGetId($data);
  337.         if(empty($order_id)){
  338.             echo json_encode([
  339.                 'code' => 1,
  340.                 'msg' => '下单失败，请重试'
  341.             ]);
  342.             exit;
  343.         }
  344.         echo json_encode([
  345.             'code' => 0,
  346.             'msg' => '下单成功',
  347.             'data' => $order_id
  348.         ]);
  349.     }
  350.     public function pay_order(){
  351.         $token = input('post.token');
  352.         if(empty($token)){
  353.             echo json_encode([
  354.                 'code' => 1,
  355.                 'msg' => '未登录'
  356.             ]);
  357.             exit;
  358.         }
  359.         $uid = Ticket::get($token,'ouyangke');
  360.         $id = input('post.id');
  361.         $find = Db::table('oyk_user_order')->where('id',$id)->find();
  362.         if(empty($find)){
  363.             echo json_encode([
  364.                 'code'=>1,
  365.                 'msg'=>'未找到订单'
  366.             ]);
  367.             exit;
  368.         }
  369.         if($find['uid'] != $uid){
  370.             echo json_encode([
  371.                 'code'=>1,
  372.                 'msg'=>'未找到订单'
  373.             ]);
  374.             exit;
  375.         }
  376.         if($find['status'] == 0){
  377.             echo json_encode([
  378.                 'code'=>1,
  379.                 'msg'=>'订单已关闭'
  380.             ]);
  381.             exit;
  382.         }
  383.         if($find['status'] != 1){
  384.             echo json_encode([
  385.                 'code'=>1,
  386.                 'msg'=>'订单已支付'
  387.             ]);
  388.             exit;
  389.         }
  390.         echo json_encode([
  391.             'code' => 0,
  392.             'msg' => '成功',
  393.             'data' => $find
  394.         ]);
  395.     }
  397.     public function pay(){
  398.         $token = input('post.token');
  399.         if(empty($token)){
  400.             echo json_encode([
  401.                 'code' => 1,
  402.                 'msg' => '未登录'
  403.             ]);
  404.             exit;
  405.         }
  406.         $uid = Ticket::get($token,'ouyangke');
  407.         $id = input('post.id');
  408.         $is_pay = input('post.is_pay');
  409.         $update = Db::table('oyk_user_order')->where('id',$id)->update([
  410.             'pay_type' => $is_pay,
  411.             'pay_time' => time(),
  412.             'status' => 2
  413.         ]);
  414.         if(empty($update)){
  415.             echo json_encode([
  416.                 'code' => 1,
  417.                 'msg' => '支付失败'
  418.             ]);
  419.             exit;
  420.         }
  421.         echo json_encode([
  422.             'code' => 0,
  423.             'msg' => '支付成功'
  424.         ]);
  425.     }
  426.     public function cart_index(){
  427.         $token = input('post.token');
  428.         if(empty($token)){
  429.             echo json_encode([
  430.                 'code' => 1,
  431.                 'msg' => '未登录'
  432.             ]);
  433.             exit;
  434.         }
  435.         $uid = Ticket::get($token,'ouyangke');
  437.         $cart = Db::table('oyk_cart')->where('uid',$uid)->order('add_time DESC')->select()->toArray();
  438.         if(!empty($cart)){
  439.             $tmp = [];
  440.             foreach($cart as $v){
  441.                 $tmp[] = $v['sid'];
  442.             }
  443.             $shop = Db::table('oyk_shop_lists')->where('id','in',$tmp)->select()->toArray();
  444.             $tmp_shop = [];
  446.             foreach($shop as $shop_v){
  447.                 $img = explode(';',$shop_v['img']);
  448.                 $shop_v['img_s'] = $img[0];
  449.                 $tmp_shop[$shop_v['id']] = $shop_v;
  450.             }
  451.             foreach($cart as &$cart_v){
  452.                 if($tmp_shop[$cart_v['sid']]['id'] == $cart_v['sid'] )
  453.                 $cart_v['shop'] = $tmp_shop[$cart_v['sid']];
  454.             }
  455.         }
  456.         echo json_encode([
  457.             'code' => 0,
  458.             'msg' => '成功',
  459.             'data' => $cart
  460.         ]);
  461.     }
  462.     public function eidt_cart(){
  463.         $token = input('post.token');
  464.         if(empty($token)){
  465.             echo json_encode([
  466.                 'code' => 1,
  467.                 'msg' => '未登录'
  468.             ]);
  469.             exit;
  470.         }
  471.         $uid = Ticket::get($token,'ouyangke');
  473.         $id = input('post.id');
  474.         $num = input('post.num');
  475.         $update = Db::table('oyk_cart')->where('id',$id)->update([
  476.             'num' => $num
  477.         ]);
  478.         if(empty($update)){
  479.             echo json_encode([
  480.                 'code' => 1,
  481.                 'msg' => '修改失败'
  482.             ]);
  483.             exit;
  484.         }
  485.         echo json_encode([
  486.             'code' => 0,
  487.             'msg' => '成功'
  488.         ]);
  489.     }
  490. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post