刘文博 / gulu-vue

Browse Code »

Commit 31b5bebd40ee3a2ead019e8f0c5074943e429c51

Authored by mullins 2020-06-12 11:00:54 +0800

1 parent a658edc461

Exists in master

订单样式修改

Showing 5 changed files with 650 additions and 582 deletions Show diff stats

src/pages/details/details.vue

Diff comments View file @31b5beb

 <template>
   <view class="container">
     <!-- 基础信息 -->
     <view class="basic_info">
       <!-- 轮播图 -->
       <swiper
         class="swiperImage"
         :indicator-dots="true"
         :autoplay="true"
         :interval="4000"
         :duration="500"
       >
         <swiper-item
           v-for="(item, index) in carousel"
           :key="index"
         >
           <image
             :src="item"
             mode="scaleToFill"
           ></image>
         </swiper-item>
       </swiper>
       <!-- 产品价格及购买人数 -->
       <view class="info_pay">
         <view>￥{{goodsInfo.price || '暂无'}}<span
             v-if="goodsInfo.discountPrice"
             class="info_pay_discount"
           >¥{{goodsInfo.discountPrice}}</span></view>
         <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>
       </view>
       <!-- 产品名称 -->
       <view class="info_name">
         <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
         <view
           @tap="confirmShare"
           class="info_name_share"
         >
           <image src="/static/img/detail/share-icon.png"></image>
           <text>分享</text>
         </view>
       </view>
       <!-- 产品售后信息 -->
       <view class="info_after">
         <span>支持7天无理由退货</span>
         <span>顺丰发货</span>
         <span>30天质量保证</span>
       </view>
     </view>
     <!-- 详细信息 -->
     <view class="detail_info">
       <!-- 详细信息菜单 -->
       <view class="screen_bar">
         <view
           v-for="(item, index) in screenItems"
           :key="index"
           @click="tabChange(index)"
         >
           <view
             class="screen_item"
             v-bind:class="{ item_active: item_current === index }"
           >{{ screenItems[index] || '暂无' }}</view>
         </view>
       </view>
       <!-- 商品介绍 -->
       <view
         class="screen_item"
         v-if="item_current === 0"
       >
         <Introduce :tag="tag" />
       </view>
       <!-- 规格参数 -->
       <view
         class="screen_item"
         v-if="item_current === 1"
       >
         <view class="specification">
           <view
             class="spe_item"
             v-for="(item, index) in specification"
             :key="index"
           >
             <image
               class="spe_image"
               v-bind:src="item.img"
             ></image>
             <span>{{item.standard || '暂无'}}</span>
             <span>{{item.slength || '暂无'}}</span>
           </view>
         </view>
       </view>
       <!-- 售后保障 -->
       <view
         class="screen_item"
         v-if="item_current === 2"
       >
         <AfterSails />
       </view>
     </view>
     <!-- 评价 -->
     <template v-if="item_current !== 2">
       <view class="evaluate">
         <!-- 标题 -->
         <view class="evaluate_title">
           <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
           <!-- 星星 -->
           <view class="evaluate_star">
             <view
               class="star"
               v-for="(item, index) in evaluate.star"
               :key="index"
             >
               <image
                 src="../../static/img/detail/d_star.png"
                 mode="aspectFill"
                 style="height: 26rpx; width: 28rpx;"
               ></image>
             </view>
           </view>
         </view>
         <!-- 标签 -->
         <view class="evaluate_tag">
           <view
             v-for="(item, index) in evaluate.tag"
             :key="index"
           >{{item.name}}</view>
         </view>
       </view>
     </template>
     <!-- 商品详情页 -->
     <template v-if="current !==2">
       <view class="more_info">
         <view
           class="more_fixed1"
           @click="consolg(goodInfo.prodIntro1)"
         >
           <image src="/static/img/detail/hr.png"></image>
           <view>商品详情</view>
           <image src="/static/img/detail/hr.png"></image>
         </view>
         <view
           class="more_all"
           v-html="more"
         >
         </view>
       </view>
     </template>
     <!-- 底部菜单 -->
     <view class="menu">
       <view
         @tap="toCart()"
         class="menu_1"
       >
         <view class="cart_icon">
           <image src="/static/tab-cart.png" />
           <text>{{cartNumber}}</text>
         </view>
         <view class="menu_image">购物车</view>
       </view>
       <view class="menu_2">
         <view
           class="menu_input"
           @tap="showBottom(1)"
         >加入购物车</view>
         <view
           class="menu_now"
           @click="showBottom(2)"
         >立即购买</view>
       </view>
     </view>
     <!-- 参数选择 -->
     <template v-if="isShowBottom">
       <BottomSheet
         :isCart="isCart"
         @addCart="addCart"
         :pid="pid"
         :goodInfo="goodInfo"
         :isShowBottom="isShowBottom"
         @closeBottom="closeBottom"
       ></BottomSheet>
     </template>
     <!-- 分享 -->
     <template>
       <uni-popup
         ref="popupShare"
         type="share"
       >
         <uni-popup-share @select="selectShare"></uni-popup-share>
       </uni-popup>
     </template>
     <!-- 分享海报 -->
     <template>
       <uni-popup
         ref="uniPopupPost"
         type="center"
       >
         <uni-popup-post :postUrl="postUrl"></uni-popup-post>
       </uni-popup>
     </template>
   </view>
 </template>
 <script>
 import store from '@/store'
 import Introduce from './components/Introduce' // 商品介绍基本信息组件
 import AfterSails from './components/AfterSails' // 售后保障组件
 import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件
 import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件
 import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件
 export default {
   components: {
     Introduce,
     AfterSails,
     BottomSheet,
     uniPopupShare,
     uniPopupPost,
   },
   data () {
     return {
       pid: 7, // 产品ID
       skId: undefined, // skuId
       // 详细信息菜单
       item_current: 0,
       screenItems: [
         '商品介绍',
         '规格参数',
         '售后保障',
       ],
       showPostImg: false, // 是否展示分享海报
       isShowBottom: false, // 是否展示参数选择
       isCart: 1, // 参数选择 按钮判断
     }
   },
   onLoad({ pid = this.pid, sk_id: skId }) {
     // 根据页面传参请求页面数据
     this.pid = pid
     this.skId = skId
     // 获取产品详情
     this.getDetails({ pid, skId })
     // 获取购物车数据
     this.getCartNum()
   },
   computed: {
     // 获取轮播图数据
     goodInfo() {
       return this.$store.state.details.goodInfo
     },
     // 获取轮播图数据
     carousel() {
       return this.$store.state.details.carousel
     },
     // 商品基本信息
     goodsInfo() {
       return this.$store.state.details.goodsInfo
     },
     // 商品介绍商品标签
     tag() {
       return this.$store.state.details.tag
     },
     // 规格参数
     specification() {
       return this.$store.state.details.specification
     },
     // 评价
     evaluate() {
       return this.$store.state.details.evaluate
     },
     // 商品详情
     more() {
       return this.$store.state.details.more
     },
     // 购物车数目
     cartNumber() {
       return this.$store.state.details.cartNumber
     },
     // 购物车数目
     skuList() {
       return this.$store.state.details.skuList
     },
     // 分享海报
     postUrl() {
       return this.$store.state.details.postUrl
     },
   },
   methods: {
     // 获取产品详情
     getDetails({ pid, skId }) {
       store.dispatch('details/details', {
         pid,
         sk_id: skId,
       })
       store.dispatch('read/fetch', {
         pid,
         sk_id: skId,
       })
     },
     // 获取购物车数目
     getCartNum() {
       store.dispatch('details/getCartNumber')
     },
     // 切换详细信息菜单
     tabChange (e) {
       if (this.current !== e) {
         this.item_current = e
       }
     },
     // 打开分享界面
     confirmShare() {
       this.$refs.popupShare.open()
     },
     // 选择分享
     selectShare(e, done) {
       switch (e.item.name) {
         // 分享到好物圈
         case 'recommend':
           this.shareRecommend()
           break
         // 分享到朋友圈
         case 'friend':
           break
         // 生成海报
         case 'poster':
           uni.showLoading({
             title: '生成图片中',
           })
           this.sharePost()
           break
         default:
           break
       }
       done()
     },
     // 分享到好物圈
     shareRecommend() {
       if (wx.openBusinessView) {
         wx.openBusinessView({
           businessType: 'friendGoodsRecommend',
           extraData: {
             product: {
               item_code: '58_68',
               title: this.goodsInfo.name,
               image_list: this.carousel,
             },
           },
           success: function (res) {
             uni.showToast({
               title: '好物圈分享成功！',
               icon: 'none',
               duration: 2000,
             })
             // 向服务器报告这个事情
             // TODO:::记录这个用户的推广过程。
             console.log('好物圈分享成功！', res)
           },
           fail: function (res) {
             console.log('好物圈分享失败！', res)
           },
         })
       }
     },
     // 分享到朋友/圈
     shareFriend() {
       this.onShareAppMessage()
     },
     // 朋友圈设置页面
     onShareAppMessage() {
       let myName = this.$store.state.user.userInfo.nickName
       if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
         myName = '【神秘人】'
       } else {
         myName = '【' + myName + '】'
       }
       return {
         title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
         path: '/pages/details/details?sid=0&pid=' + this.pid,
         imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
         success: function (res) {
           if (res.errMsg === 'shareAppMessage:ok') {
             console.log('分享成功！', res)
           }
         },
         fail: function (res) {
           if (res.errMsg === 'shareAppMessage:fail cancel') {
             console.log('fail', '放弃分享')
           } else if (res.errMsg === 'shareAppMessage:fail') {
             console.log('fail', '分享失败')
           }
         },
       }
     },
     // 生成海报
     sharePost() {
       const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined'
       store.dispatch('details/post', {
         pid: this.pid,
         sid: fromsid === 'undefined' ? 0 : fromsid,
       }).then((data) => {
         uni.hideLoading()
         this.$refs.uniPopupPost.open()
       })
     },
     // 参数选择弹窗开关
     showBottom(isCart) {
       this.isCart = isCart
       this.isShowBottom = true
     },
     closeBottom() {
       this.isShowBottom = false
     },
     // 前往购物车
     toCart() {
       uni.switchTab({
         url: '/pages/cart/cart',
         success: res => {},
         fail: (error) => { console.log('跳转购物车失败======>', error) },
         complete: () => { console.log('toCart') },
       })
     },
     // 加入购物车
     addCart (mpId, num, checkedSKU, skId, price) {
       const addCartList = {}
       addCartList.mp_id = mpId
       addCartList.sk_id = skId
       addCartList.num = num
       addCartList.checkedSKU = checkedSKU
       addCartList.pid = this.pid
       addCartList.price = price
       console.log('添加购物车的参数', addCartList)
       store.dispatch('cart/addCart', addCartList).then((res) => {
         if (res.code === 1) {
           uni.showToast({
             title: '添加成功~',
             icon: 'success',
           })
         }
         // 再次请求购物车接口，实现实时更新
         store.dispatch('details/getCartNumber')
       })
     },
   },
 }
 </script>
 <style lang="scss">
 .container {
   background-color: #f8f8f8;
   font-family: "PingFangSC-Regular";
   // 板块样式
   > view {
     background: #ffffff;
     margin-bottom: 10px;
     padding: 8px 20px 8px 20px;
     box-sizing: border-box;
   }
   // 基础信息板块
   .basic_info {
     // 轮播图
     .swiperImage {
       width: 684rpx;
       height: 480rpx;
       text-align: center;
       image {
         max-width: 100%;
         max-height: 100%;
         border-radius: 16rpx;
       }
     }
     // 产品价格及购买人数
     .info_pay {
       color: #eb5d3b;
       font-size: 18px;
       margin-top: 5px;
       font-family: "PingFangSC-Semibold";
       display: flex;
       justify-content: space-between;
       .info_pay_discount {
         text-decoration: line-through;
         margin-left: 8rpx;
         color: #999;
         font-size: 14px;
       }
       .info_pay_number {
         color: #999;
         font-size: 14px;
         font-family: PingFangSC-Regular;
       }
     }
     // 产品名称
     .info_name {
       margin-top: 5px;
       display: flex;
       justify-content: space-between;
       .info_name_name {
         margin-right: 10px;
         font-size: 16px;
         font-family: "PingFangSC-Semibold";
         max-width: 592rpx;
       }
       .info_name_share {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
         margin-top: 14rpx;
         > image {
           height: 40rpx;
           width: 40rpx;
         }
         > text {
           font-family: PingFangSC-Regular;
           font-size: 12px;
           color: #999;
           letter-spacing: -0.23px;
         }
       }
     }
     // 售后服务
     .info_after {
       font-size: 10px;
       color: #999;
       margin-top: 20rpx;
       > span {
         height: 14px;
         margin-right: 10px;
       }
     }
   }
   // 详细信息
   .detail_info {
     margin-bottom: 20rpx;
     .screen_bar {
       width: 670rpx;
       margin-top: 20rpx;
       margin-bottom: 24rpx;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       font-size: 14px;
       color: #333333;
       transition: all 0.2s;
     }
     .item_active {
       border-bottom: 4rpx solid #ff6b4a;
     }
     .screen_item {
       font-size: 32rpx;
       color: #333333;
       display: flex;
       transition: all 0.2s;
       // 规格参数
       .specification {
         margin-bottom: 4px;
         .spe_item {
           image {
             width: 50px;
             height: 25px;
             margin-right: 6px;
             vertical-align: middle;
           }
           span {
             margin-left: 24rpx;
           }
         }
       }
     }
     //
   }
   // 宝贝好评率
   .evaluate {
     .evaluate_title {
       font-size: 14px;
       color: #333333;
       display: flex;
       justify-content: space-between;
       .title_rate {
         margin-left: 10rpx;
       }
       .evaluate_star {
         width: 90px;
         display: flex;
         align-items: center;
         justify-content: space-between;
       }
       view {
         font-size: 14px;
         color: #333333;
         font-weight: bold;
       }
     }
     .evaluate_tag {
       view {
         display: inline-block;
         margin-right: 20rpx;
         min-width: 180rpx;
         margin-top: 10px;
         height: 48rpx;
         background: #f2f2f2;
         border-radius: 2px;
         font-family: PingFangSC-Regular;
         font-size: 12px;
         color: #666666;
         letter-spacing: -0.23px;
         text-align: center;
         padding: 0 48rpx;
         line-height: 48rpx;
       }
     }
   }
   // 商品详情
   .more_info {
     .more_fixed1 {
       display: flex;
       justify-content: space-between;
       align-content: center;
       margin-bottom: 12px;
       view {
         font-size: 14px;
         color: #333333;
         font-weight: bold;
         font-family: "PingFangSC-Medium";
         line-height: 24px;
       }
       image {
         width: 240rpx;
         height: 3px;
         margin-top: 10px;
       }
     }
     .more_all {
       width: 100%;
       margin-top: 30rpx;
       margin-right: 30rpx;
       margin-bottom: 180rpx;
       font-family: "PingFangSC-Regular";
     }
   }
   // 菜单
   .menu {
     position: fixed;
     bottom: 0;
     min-height: 74px;
     width: 100%;
     background: #ffffff;
     padding: 20px 20px 8px 20px;
     font-family: "PingFangSC-Regular";
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-content: center;
     margin: 0;
     /* iphonex 等安全区设置，底部安全区适配 */
     /* #ifndef APP-NVUE */
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
+    /* #endif */
     .menu_1 {
       width: 20%;
       height: 100%;
       text-align: center;
       color: #989898;
       .cart_icon {
         position: relative;
         text {
           position: absolute;
           color: white;
           font-size: 17px;
           background-color: red;
           min-height: 24px;
           min-width: 24px;
           line-height: 24px;
           right: -12%;
           top: -12px;
           text-align: center;
           border-radius: 24px;
           padding: 2px;
         }
       }
     }
     image {
       width: 42%;
       height: 26px;
     }
     .menu_image {
       font-size: 12px;
       text-align: center;
     }
     .menu_2 {
       width: 74%;
       height: 80rpx;
       display: grid;
       grid-template-columns: 50% 50%;
     }
     .menu_input {
       display: inline-flex;
       align-items: center;
       justify-content: space-around;
       background: #fff0ec;
       font-size: 16px;
       color: #ff6b4a;
       border-radius: 20px 0 0 20px;
     }
     .menu_now {
       display: inline-flex;
       align-items: center;
       justify-content: space-around;
       background: #ff6b4a;
       font-size: 16px;
       color: #ffffff;
       border-radius: 0 20px 20px 0;
     }
   }
 }
 </style>

src/pages/index/index.vue

Diff comments View file @31b5beb

1	<template>	1	<template>
2	<view class="container">	2	<view class="container">
3	<view	3	<view
4	class="content skeleton"	4	class="content skeleton"
5	v-show="showContent"	5	v-show="showContent"
6	>	6	>
7	<view class="header">	7	<view class="header">
8	<!-- 搜索-->	8	<!-- 搜索-->
9	<view class="searchBar skeleton-rect">	9	<view class="searchBar skeleton-rect">
10	<icon	10	<icon
11	class="searchIcon"	11	class="searchIcon"
12	type="search"	12	type="search"
13	size="14"	13	size="14"
14	></icon>	14	></icon>
15	<input	15	<input
16	v-model="searchText"	16	v-model="searchText"
17	class="searchIpt"	17	class="searchIpt"
18	placeholder="老花镜"	18	placeholder="老花镜"
19	confirm-type="search"	19	confirm-type="search"
20	@blur="searchKey"	20	@blur="searchKey"
21	/>	21	/>
22	</view>	22	</view>
23		23
24	<!-- 筛选栏-->	24	<!-- 筛选栏-->
25	<!-- <view class="screenBar">	25	<!-- <view class="screenBar">
26	<view	26	<view
27	v-for="item in screenItems"	27	v-for="item in screenItems"
28	:key="item.current"	28	:key="item.current"
29	@click="onClickItem(item.current)"	29	@click="onClickItem(item.current)"
30	>	30	>
31	<view	31	<view
32	class="screenItem"	32	class="screenItem"
33	v-bind:class="{ active: current === item.current }"	33	v-bind:class="{ active: current === item.current }"
34	v-if="item.current === 2"	34	v-if="item.current === 2"
35	@click="dropDown"	35	@click="dropDown"
36	>	36	>
37	{{ item.text }}	37	{{ item.text }}
38	<icon	38	<icon
39	type="info"	39	type="info"
40	size="14"	40	size="14"
41	></icon>	41	></icon>
42	</view>	42	</view>
43	<view	43	<view
44	class="screenItem"	44	class="screenItem"
45	v-bind:class="{ active: current === item.current }"	45	v-bind:class="{ active: current === item.current }"
46	v-if="item.current === 4"	46	v-if="item.current === 4"
47	@click="showDrawer('showRight')"	47	@click="showDrawer('showRight')"
48	>	48	>
49	{{ item.text }}	49	{{ item.text }}
50	<icon	50	<icon
51	type="info"	51	type="info"
52	size="14"	52	size="14"
53	></icon>	53	></icon>
54	</view>	54	</view>
55	<view v-if="item.current !== 2&&item.current!==4">	55	<view v-if="item.current !== 2&&item.current!==4">
56	<view	56	<view
57	class="screenItem"	57	class="screenItem"
58	v-bind:class="{ active: current === item.current }"	58	v-bind:class="{ active: current === item.current }"
59	>{{ item.text }}</view>	59	>{{ item.text }}</view>
60	</view>	60	</view>
61	</view>	61	</view>
62	</view> -->	62	</view> -->
63	</view>	63	</view>
64	<Uni-drawer	64	<Uni-drawer
65	ref="showRight"	65	ref="showRight"
66	mask="true"	66	mask="true"
67	maskClick="true"	67	maskClick="true"
68	mode="right"	68	mode="right"
69	:width="320"	69	:width="320"
70	@change="change($event,'showRight')"	70	@change="change($event,'showRight')"
71	>	71	>
72	<view class="close">	72	<view class="close">
73	<view @click="closeDrawer('showRight')">	73	<view @click="closeDrawer('showRight')">
74	<text class="word-btn-white">关闭</text>	74	<text class="word-btn-white">关闭</text>
75	</view>	75	</view>
76	</view>	76	</view>
77	</Uni-drawer>	77	</Uni-drawer>
78		78
79	<!-- 筛选菜单-->	79	<!-- 筛选菜单-->
80	<view class="content-wrap skeleton-rect">	80	<view class="content-wrap skeleton-rect">
81	<view>	81	<view>
82	<HMfilterDropdown	82	<HMfilterDropdown
83	:filterData="categoryList"	83	:filterData="categoryList"
84	:defaultSelected="filterDropdownValue"	84	:defaultSelected="filterDropdownValue"
85	:updateMenuName="true"	85	:updateMenuName="true"
86	@search="search"	86	@search="search"
87	@getList="getList"	87	@getList="getList"
88	data-format="Object"	88	data-format="Object"
89	></HMfilterDropdown>	89	></HMfilterDropdown>
90	<!-- 商品列表 -->	90	<!-- 商品列表 -->
91	<!-- <scroll-view	91	<!-- <scroll-view
92	enable-flex	92	enable-flex
93	@scrolltolower="handleScrolltolower"	93	@scrolltolower="handleScrolltolower"
94	scroll-y	94	scroll-y
95	style="height: 1000px;margin-bottom: 20px;"	95	style="height: 1000px;margin-bottom: 20px;"
96	> -->	96	> -->
97	<view class="goods-list">	97	<view class="goods-list">
98	<view class="product-list">	98	<view class="product-list">
99	<view	99	<view
100	class="product skeleton-rect"	100	class="product skeleton-rect"
101	v-for="(goods) in goodsList"	101	v-for="(goods) in goodsList"
102	:key="goods.id"	102	:key="goods.id"
103	>	103	>
104	<Card	104	<Card
105	:goods="goods"	105	:goods="goods"
106	:scrollTop="scrollTop"	106	:scrollTop="scrollTop"
107	:viewHeight="viewHeight"	107	:viewHeight="viewHeight"
108	></Card>	108	></Card>
109	</view>	109	</view>
110	</view>	110	</view>
111	<view class="loading-text">	111	<view class="loading-text">
112	<text v-if="isLoading==true">{{loadingText}}</text>	112	<text v-if="isLoading==true">{{loadingText}}</text>
113	<text v-else>{{loadedText}}</text>	113	<text v-else>{{loadedText}}</text>
114	</view>	114	</view>
115	</view>	115	</view>
116	<!-- </scroll-view> -->	116	<!-- </scroll-view> -->
117	</view>	117	</view>
118	</view>	118	</view>
119	</view>	119	</view>
120	<!--引用组件-->	120	<!--引用组件-->
121	<skeleton	121	<skeleton
122	:show="showSkeleton"	122	:show="showSkeleton"
123	ref="skeleton"	123	ref="skeleton"
124	loading="chiaroscuro"	124	loading="chiaroscuro"
125	selector="skeleton"	125	selector="skeleton"
126	bgcolor="#FFF"	126	bgcolor="#FFF"
127	></skeleton>	127	></skeleton>
128	</view>	128	</view>
129	</template>	129	</template>
130		130
131	<script>	131	<script>
132	import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'	132	import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
133	import Card from '@/components/CommodityCard/CommodityCard.vue'	133	import Card from '@/components/CommodityCard/CommodityCard.vue'
134	import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'	134	import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
135	import skeleton from '@/components/quick-skeleton/quick-skeleton.vue'	135	import skeleton from '@/components/quick-skeleton/quick-skeleton.vue'
136	import store from '@/store'	136	import store from '@/store'
137		137
138	export default {	138	export default {
139	components: {	139	components: {
140	UniDrawer: UniDrawer,	140	UniDrawer: UniDrawer,
141	HMfilterDropdown: HMfilterDropdown,	141	HMfilterDropdown: HMfilterDropdown,
142	Card: Card,	142	Card: Card,
143	skeleton: skeleton,	143	skeleton: skeleton,
144	},	144	},
145	data() {	145	data() {
146	return {	146	return {
147	indexArr: '',	147	indexArr: '',
148	valueArr: '',	148	valueArr: '',
149	isLoading: true, // 初始化加载状态	149	isLoading: true, // 初始化加载状态
150	loadingText: 'data loading...',	150	loadingText: 'data loading...',
151	loadedText: '~~暂无更多数据~~',	151	loadedText: '~~暂无更多数据~~',
152	filterDropdownValue: [],	152	filterDropdownValue: [],
153	filterData: [],	153	filterData: [],
154	searchText: '',	154	searchText: '',
155	scrollTop: 0,	155	scrollTop: 0,
156	showContent: true,	156	showContent: true,
157	viewHeight: uni.getSystemInfoSync().windowHeight,	157	viewHeight: uni.getSystemInfoSync().windowHeight,
158	showSkeleton: false, // 骨架屏显示隐藏	158	showSkeleton: false, // 骨架屏显示隐藏
159	}	159	}
160	},	160	},
161	onPageScroll({ scrollTop }) {	161	onPageScroll({ scrollTop }) {
162	// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件	162	// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
163	this.scrollTop = scrollTop	163	this.scrollTop = scrollTop
164	},	164	},
165	computed: {	165	computed: {
166	goodsList() {	166	goodsList() {
167	// 也可以从 getters 获取	167	// 也可以从 getters 获取
168	// console.log('index-list=====>',this.$store.state.index.list)	168	// console.log('index-list=====>',this.$store.state.index.list)
169	const list = this.$store.state.index.list	169	const list = this.$store.state.index.list
170	if (list.length == 0) {	170	if (list.length === 0) {
171	this.isLoading = false	171	this.isLoading = false
172	}	172	}
173	this.scrollTop = 0.1	173	this.scrollTop = 0.1
174	return list	174	return list
175	},	175	},
176	categoryList() {	176	categoryList() {
177	return this.$store.state.index.categoryList	177	return this.$store.state.index.categoryList
178	},	178	},
179	},	179	},
180	filters: {	180	filters: {
181	outData(value) {	181	outData(value) {
182	return JSON.stringify(value)	182	return JSON.stringify(value)
183	},	183	},
184	},	184	},
185	/**	185	/**
186	* 页面载入完成后调用子组件的方法生成预加载效果	186	* 页面载入完成后调用子组件的方法生成预加载效果
187	*/	187	*/
188	onReady: function() {	188	onReady: function() {
189	this.getInitData()	189	this.getInitData()
190	},	190	},
191	methods: {	191	methods: {
192	async getInitData () {	192	async getInitData () {
193	this.showSkeleton = true	193	this.showSkeleton = true
194	await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')])	194	await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')])
195	this.showSkeleton = false	195	this.showSkeleton = false
196	this.showContent = true	196	this.showContent = true
197	},	197	},
198	showDrawer(e) {	198	showDrawer(e) {
199	this.$refs[e].open()	199	this.$refs[e].open()
200	},	200	},
201	// 朋友圈设置页面	201	// 朋友圈设置页面
202	onShareAppMessage() {	202	onShareAppMessage() {
203	let myName = this.$store.state.user.userInfo.nickName	203	let myName = this.$store.state.user.userInfo.nickName
204	if (myName === '' \|\| myName.length < 1 \|\| myName === '匿名用户' \|\| typeof myName === 'undefined') {	204	if (myName === '' \|\| myName.length < 1 \|\| myName === '匿名用户' \|\| typeof myName === 'undefined') {
205	myName = '【神秘人】'	205	myName = '【神秘人】'
206	} else {	206	} else {
207	myName = '【' + myName + '】'	207	myName = '【' + myName + '】'
208	}	208	}
209	return {	209	return {
210	title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)	210	title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
211	path: '/pages/index/index',	211	path: '/pages/index/index',
212	// imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4	212	// imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
213	success: function (res) {	213	success: function (res) {
214	if (res.errMsg === 'shareAppMessage:ok') {	214	if (res.errMsg === 'shareAppMessage:ok') {
215	console.log('分享成功！', res)	215	console.log('分享成功！', res)
216	}	216	}
217	},	217	},
218	fail: function (res) {	218	fail: function (res) {
219	if (res.errMsg === 'shareAppMessage:fail cancel') {	219	if (res.errMsg === 'shareAppMessage:fail cancel') {
220	console.log('fail', '放弃分享')	220	console.log('fail', '放弃分享')
221	} else if (res.errMsg === 'shareAppMessage:fail') {	221	} else if (res.errMsg === 'shareAppMessage:fail') {
222	console.log('fail', '分享失败')	222	console.log('fail', '分享失败')
223	}	223	}
224	},	224	},
225	}	225	}
226	},	226	},
227	getList() {	227	getList() {
228	store.dispatch('index/list')	228	store.dispatch('index/list')
229	this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。	229	this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。
230	// 把data里的isLoading 改为false就可以了	230	// 把data里的isLoading 改为false就可以了
231	},	231	},
232	// search(params) {	232	// search(params) {
233	// this.$store.index.	233	// this.$store.index.
234	// },	234	// },
235	closeDrawer(e) {	235	closeDrawer(e) {
236	this.$refs[e].close()	236	this.$refs[e].close()
237	},	237	},
238	change(e, type) {	238	change(e, type) {
239	this[type] = e	239	this[type] = e
240	},	240	},
241	onClickItem(e) {	241	onClickItem(e) {
242	if (this.current !== e) {	242	if (this.current !== e) {
243	this.current = e	243	this.current = e
244	}	244	}
245	},	245	},
246	dropDown() {	246	dropDown() {
247	console.log('下拉')	247	console.log('下拉')
248	},	248	},
249	searchKey(e) {	249	searchKey(e) {
250	const { value: keyword } = e.detail	250	const { value: keyword } = e.detail
251	this.keyWords = keyword	251	this.keyWords = keyword
252	store.dispatch('index/search', {	252	store.dispatch('index/search', {
253	params: {},	253	params: {},
254	keyword,	254	keyword,
255	})	255	})
256	},	256	},
257	// 接收菜单结果	257	// 接收菜单结果
258	search(e) {	258	search(e) {
259	const { on, value, selectedData } = e	259	const { on, value, selectedData } = e
260	let params = {}	260	let params = {}
261	const selectedPayload = {}	261	const selectedPayload = {}
262	for (const key in selectedData) {	262	for (const key in selectedData) {
263	if (Object.prototype.hasOwnProperty.call(selectedData, key)) {	263	if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
264	selectedPayload[key] = selectedData[key].toString()	264	selectedPayload[key] = selectedData[key].toString()
265	}	265	}
266	}	266	}
267	if (on[0] === 1) {	267	if (on[0] === 1) {
268	// 若点击全部	268	// 若点击全部
269	this.searchText = ''	269	this.searchText = ''
270	store.dispatch('index/list')	270	store.dispatch('index/list')
271	} else {	271	} else {
272	for (let i = 1; i <= on.length; i++) {	272	for (let i = 1; i <= on.length; i++) {
273	// on[0]是全部	273	// on[0]是全部
274	if (on[i] === 1) {	274	if (on[i] === 1) {
275	// 若该选项被选中	275	// 若该选项被选中
276	if (this.categoryList[i].value === 'filter') {	276	if (this.categoryList[i].value === 'filter') {
277	params = {	277	params = {
278	...selectedPayload,	278	...selectedPayload,
279	...params,	279	...params,
280	}	280	}
281	} else if (this.categoryList[i].value === 'px') {	281	} else if (this.categoryList[i].value === 'px') {
282	params.orderby = value[i][0]	282	params.orderby = value[i][0]
283	} else {	283	} else {
284	params[`${this.categoryList[i].value}`] = value[i][0]	284	params[`${this.categoryList[i].value}`] = value[i][0]
285	}	285	}
286	}	286	}
287	}	287	}
288	store.dispatch('index/search', {	288	store.dispatch('index/search', {
289	params,	289	params,
290	keyword: this.keyWords,	290	keyword: this.keyWords,
291	})	291	})
292	}	292	}
293	},	293	},
294	},	294	},
295	}	295	}
296	</script>	296	</script>
297		297
298	<style lang="scss">	298	<style lang="scss">
299	.content,	299	.content,
300	.container {	300	.container {
301	display: flex;	301	display: flex;
302	flex-direction: column;	302	flex-direction: column;
303	align-items: center;	303	align-items: center;
304	justify-content: center;	304	justify-content: center;
305	width: 100%;	305	width: 100%;
306	}	306	}
307	.header {	307	.header {
308	display: flex;	308	display: flex;
309	flex-direction: column;	309	flex-direction: column;
310	align-items: center;	310	align-items: center;
311	justify-content: center;	311	justify-content: center;
312	background-color: #f7f6f6;	312	background-color: #f7f6f6;
313	height: 178rpx;	313	height: 178rpx;
314	width: 100%;	314	width: 100%;
315	z-index: 999;	315	z-index: 999;
316	position: fixed;	316	position: fixed;
317	top: 0;	317	top: 0;
318	left: 0;	318	left: 0;
319	}	319	}
320	.searchBar {	320	.searchBar {
321	width: 670rpx;	321	width: 670rpx;
322	display: flex;	322	display: flex;
323	justify-content: center;	323	justify-content: center;
324	align-items: center;	324	align-items: center;
325	box-sizing: border-box;	325	box-sizing: border-box;
326	padding: 0rpx 16rpx;	326	padding: 0rpx 16rpx;
327	border: 1px solid #ff6b4a;	327	border: 1px solid #ff6b4a;
328	border-radius: 8rpx;	328	border-radius: 8rpx;
329	background-color: #ffffff;	329	background-color: #ffffff;
330	}	330	}
331		331
332	.searchIpt {	332	.searchIpt {
333	height: 68rpx;	333	height: 68rpx;
334	width: 670rpx;	334	width: 670rpx;
335	padding: 16rpx;	335	padding: 16rpx;
336	font-size: 28rpx;	336	font-size: 28rpx;
337	box-sizing: border-box;	337	box-sizing: border-box;
338	}	338	}
339	.screenBar {	339	.screenBar {
340	width: 670rpx;	340	width: 670rpx;
341	height: 110rpx;	341	height: 110rpx;
342	display: flex;	342	display: flex;
343	flex-direction: row;	343	flex-direction: row;
344	justify-content: space-between;	344	justify-content: space-between;
345	align-items: center;	345	align-items: center;
346	color: #333333;	346	color: #333333;
347	font-size: 32rpx;	347	font-size: 32rpx;
348	}	348	}
349	.active {	349	.active {
350	color: #ff6b4a;	350	color: #ff6b4a;
351	}	351	}
352	.screenItem {	352	.screenItem {
353	display: flex;	353	display: flex;
354	justify-content: center;	354	justify-content: center;
355	align-items: center;	355	align-items: center;
356	}	356	}
357	.content-wrap {	357	.content-wrap {
358	width: 100%;	358	width: 100%;
359	background-color: #ffffff;	359	background-color: #ffffff;
360	}	360	}
361		361
362	.HMfilterDropdown {	362	.HMfilterDropdown {
363	top: 178rpx !important;	363	top: 178rpx !important;
364	}	364	}
365		365
366	.goods-list {	366	.goods-list {
367	padding-top: 286rpx;	367	padding-top: 286rpx;
368	.loading-text {	368	.loading-text {
369	width: 100%;	369	width: 100%;
370	display: flex;	370	display: flex;
371	justify-content: center;	371	justify-content: center;
372	align-items: center;	372	align-items: center;
373	height: 30px;	373	height: 30px;
374	color: #979797;	374	color: #979797;
375	font-size: 12px;	375	font-size: 12px;
376	}	376	}
377	.product-list {	377	.product-list {
378	width: 92%;	378	width: 92%;
379	padding: 0 4% 3vw 4%;	379	padding: 0 4% 3vw 4%;
380	display: flex;	380	display: flex;
381	justify-content: space-between;	381	justify-content: space-between;
382	flex-wrap: wrap;	382	flex-wrap: wrap;
383	.product {	383	.product {
384	width: 48%;	384	width: 48%;
385	min-height: 120rpx;	385	min-height: 120rpx;
386	margin: 0 0 20rpx 0;	386	margin: 0 0 20rpx 0;
387	background: #ffffff;	387	background: #ffffff;
388	border: 1px solid #f2f2f2;	388	border: 1px solid #f2f2f2;
389	}	389	}
390	}	390	}
391	}	391	}
392	</style>	392	</style>
393		393

src/pages/myOrder/components/OrderCard.vue

Diff comments View file @31b5beb

1	<template>	1	<template>
2	<view>	2	<view>
3	<view	3	<view
4	class="card"	4	class="card"
5	v-if="current == status"	5	v-if="current == status"
6	@click="toOrderInfo(status,order.pay_id)"	6	@click="toOrderInfo(status,order.pay_id)"
7	>	7	>
8	<view class="cardHeader">	8	<view class="cardHeader">
9	<text	9	<text
10	class="orderId"	10	class="orderId"
11	v-if="status == '0'\|\|status == '1'"	11	v-if="status == '0'\|\|status == '1'"
12	>订单号：{{order.pay_id}}</text>	12	>订单号：{{order.pay_id}}</text>
13	<text	13	<text
14	class="orderId"	14	class="orderId"
15	v-if="status == '2'\|\|status == '3'"	15	v-if="status == '2'\|\|status == '3'"
16	>下单时间：{{order.pay_time}}</text>	16	>下单时间：{{order.pay_time}}</text>
17	<text	17	<text
18	class="orderType"	18	class="orderType"
19	v-if="status=='0'"	19	v-if="status=='0'"
20	>待付款</text>	20	>待付款</text>
21	<text	21	<text
22	class="orderType"	22	class="orderType"
23	v-if="status=='1'"	23	v-if="status=='1'"
24	>待收货</text>	24	>待收货</text>
25	<text	25	<text
26	class="orderType"	26	class="orderType"
27	v-if="status == '2'\|\|status == '3'"	27	v-if="status == '2'\|\|status == '3'"
28	>已完成</text>	28	>已完成</text>
29	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->	29	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
30	</view>	30	</view>
31	<view	31	<view
32	class="orderCardInfo"	32	class="orderCardInfo"
33	v-for="(orderInfo, index) in orderInfoList"	33	v-for="(orderInfo, index) in orderInfoList"
34	:key="index"	34	:key="index"
35	>	35	>
36	<image	36	<image
37	:src="orderInfo.imgUrl"	37	:src="orderInfo.imgUrl"
38	mode="aspectFill"	38	mode="aspectFill"
39	></image>	39	></image>
40	<view class="infoText">	40	<view class="infoText">
41	<view class="orderName">{{orderInfo.p_name}}</view>	41	<view class="orderName">{{orderInfo.p_name}}</view>
42	<view class="orderDescrib">{{orderInfo.p_name}}</view>	42	<view class="orderDescrib">{{orderInfo.p_name}}</view>
43	<view class="infoText-bottom">	43	<view class="infoText-bottom">
44	<view class="markPrice">{{orderInfo.nowPrice}}</view>	44	<view class="markPrice">{{orderInfo.nowPrice}}</view>
45	<view class="buy-num">X {{orderInfo.num}}</view>	45	<view class="buy-num">X {{orderInfo.num}}</view>
46	</view>	46	</view>
47	</view>	47	</view>
48	</view>	48	</view>
49	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>	49	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
50	<!-- 0待付款 1 已付款待收货 2 已收货待评价 3 已评价 -->	50	<!-- 0待付款 1 已付款待收货 2 已收货待评价 3 已评价 -->
51	<view	51	<view
52	class="btns"	52	class="btns"
53	v-if="status == '0'"	53	v-if="status == '0'"
54	>	54	>
55	<view class="btn-type1">取消订单</view>	55	<view class="btn-type1">取消订单</view>
56	<view class="btn-type2">去支付</view>	56	<view class="btn-type2">去支付</view>
57	</view>	57	</view>
58	<view	58	<view
59	class="btns"	59	class="btns"
60	v-if="status == '1'"	60	v-if="status == '1'"
61	>	61	>
62	<view class="btn-type2">确认收货</view>	62	<view class="btn-type2">确认收货</view>
63	</view>	63	</view>
64	<view	64	<view
65	class="btns"	65	class="btns"
66	v-if="status == '2'"	66	v-if="status == '2'"
67	>	67	>
68	<view class="btn-type2" @click="toDetail">再次购买</view>	68	<view
		69	class="btn-type2"
		70	@click="toDetail"
		71	>再次购买</view>
69	</view>	72	</view>
70	<!-- <view class="btns" v-if="status == '3'">	73	<!-- <view class="btns" v-if="status == '3'">
71	<view class="btn-type2">再次购买</view>	74	<view class="btn-type2">再次购买</view>
72	</view> -->	75	</view> -->
73	</view>	76	</view>
74	<view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">	77	<view
75	<view class="cardHeader">	78	class="card"
76	<text class="orderId" v-if="status == '0'\|\|status == '1'">订单号：{{order.pay_id}}</text>	79	v-if="current == '10'"
77	<text class="orderId" v-if="status == '2'\|\|status == '3'">下单时间：{{order.pay_time}}</text>	80	@click="toOrderInfo(status,order.pay_id)"
78	<text class="orderType" v-if="status=='0'">待付款</text>	81	>
79	<text class="orderType" v-if="status=='1'">待收货</text>	82	<view class="cardHeader">
80	<text class="orderType" v-if="status == '2'\|\|status == '3'">已完成</text>	83	<text
81	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->	84	class="orderId"
82	</view>	85	v-if="status == '0'\|\|status == '1'"
83	<view class="orderCardInfo" v-for="(orderInfo) in orderInfoList" :key="orderInfo">	86	>订单号：{{order.pay_id}}</text>
84	<image :src="orderInfo.imgUrl" mode="aspectFill"></image>	87	<text
85	<view class="infoText">	88	class="orderId"
86	<view class="orderName">{{orderInfo.p_name}}</view>	89	v-if="status == '2'\|\|status == '3'"
87	<view class="orderDescrib">{{orderInfo.p_name}}</view>	90	>下单时间：{{order.pay_time}}</text>
88	<view class="infoText-bottom">	91	<text
89	<view class="markPrice">{{orderInfo.nowPrice}}</view>	92	class="orderType"
90	<view class="buy-num">X {{orderInfo.num}}</view>	93	v-if="status=='0'"
91	</view>	94	>待付款</text>
92	</view>	95	<text
93	</view>	96	class="orderType"
94	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>	97	v-if="status=='1'"
95	<view class="btns" v-if="status == '0'">	98	>待收货</text>
96	<view class="btn-type1" >取消订单</view>	99	<text
97	<view class="btn-type2">去支付</view>	100	class="orderType"
98	</view>	101	v-if="status == '2'\|\|status == '3'"
99	<view class="btns" v-if="status == '1'">	102	>已完成</text>
100	<view class="btn-type2">确认收货</view>	103	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
101	</view>	104	</view>
102	<view class="btns" v-if="status == '2'\|\|status == '3'">	105	<view
103	<view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>	106	class="orderCardInfo"
104	</view>	107	v-for="(orderInfo) in orderInfoList"
105	<!-- <view class="btns" v-if="status == '3'">	108	:key="orderInfo"
		109	>
		110	<image
		111	:src="orderInfo.imgUrl"
		112	mode="aspectFill"
		113	></image>
		114	<view class="infoText">
		115	<view class="orderName">{{orderInfo.p_name}}</view>
		116	<view class="orderDescrib">{{orderInfo.p_name}}</view>
		117	<view class="infoText-bottom">
		118	<view class="markPrice">{{orderInfo.nowPrice}}</view>
		119	<view class="buy-num">X {{orderInfo.num}}</view>
		120	</view>
		121	</view>
		122	</view>
		123	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
		124	<view
		125	class="btns"
		126	v-if="status == '0'"
		127	>
		128	<view class="btn-type1">取消订单</view>
		129	<view class="btn-type2">去支付</view>
		130	</view>
		131	<view
		132	class="btns"
		133	v-if="status == '1'"
		134	>
		135	<view class="btn-type2">确认收货</view>
		136	</view>
		137	<view
		138	class="btns"
		139	v-if="status == '2'\|\|status == '3'"
		140	>
		141	<view
		142	class="btn-type2"
		143	@click="toDetail(order.order_info[0].pid)"
		144	>再次购买</view>
		145	</view>
		146	<!-- <view class="btns" v-if="status == '3'">
106		147
107	<view class="btn-type2">再次购买</view>	148	<view class="btn-type2">再次购买</view>
108	</view> -->	149	</view> -->
109	</view>	150	</view>
110	</view>	151	</view>
111	</template>	152	</template>
112		153
113	<script>	154	<script>
114	export default {	155	export default {
115	props: {	156	props: {
116	/**	157	/**
117	* 订单数据	158	* 订单数据
118	*/	159	*/
119	order: {},	160	order: {},
120	/**	161	/**
121	* 当前选择	162	* 当前选择
122	*/	163	*/
123	current:Number	164	current: Number,
124		165
125	},	166	},
126	created() {	167	created() {
127	console.log('order',this.order);	168	console.log('order', this.order)
128	// console.log(this.order.status );	169	// console.log(this.order.status );
129	// console.log(this.current);	170	// console.log(this.current);
130	},	171	},
131	computed:{	172	computed: {
132	status(){	173	status() {
133	return this.order.status	174	return this.order.status
134	},	175	},
135	orderInfoList(){	176	orderInfoList() {
136	return this.order.order_info	177	const orderInfoList = this.order.order_info
137	}	178	return Array.isArray(orderInfoList) ? orderInfoList : orderInfoList.data
138	},	179	},
139	data() {	180	},
140	return {	181	data() {
141	};	182	return {
142	},	183	}
143	methods:{	184	},
144	toDetail(pid){	185	methods: {
145	console.log('pid',pid)	186	toDetail(pid) {
146	uni.navigateTo({	187	console.log('pid', pid)
147	url: '../details/details?pid='+pid,	188	uni.navigateTo({
148	fail: (res) => {console.log(res)},	189	url: '../details/details?pid=' + pid,
149	});	190	fail: (res) => { console.log(res) },
150	},	191	})
151	toRefundment(){	192	},
152	uni.navigateTo({	193	toRefundment() {
153	url: '../refundment/refundment',	194	uni.navigateTo({
154	success: res => {},	195	url: '../refundment/refundment',
155	fail: () => {},	196	success: res => {},
156	complete: () => {}	197	fail: () => {},
157	});	198	complete: () => {},
158	},	199	})
159	toOrderInfo(status,payId){	200	},
160	console.log(status,payId)	201	toOrderInfo(status, payId) {
161	switch(status){	202	console.log(status, payId)
162	// 0待付款 1待收货 2已收货 3 已评价	203	switch (status) {
163	case '0':	204	// 0待付款 1待收货 2已收货 3 已评价
164	uni.navigateTo({	205	case '0':
165	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	206	uni.navigateTo({
166	fail(errMsg) {	207	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
167	console.log(errMsg)	208	fail(errMsg) {
168	}	209	console.log(errMsg)
169	})	210	},
170	break;	211	})
171	case '1':	212	break
172	uni.navigateTo({	213	case '1':
173	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	214	uni.navigateTo({
174	fail(errMsg) {	215	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
175	console.log(errMsg)	216	fail(errMsg) {
176	}	217	console.log(errMsg)
177	})	218	},
178		219	})
179	break;	220
180	case '2 \|\| 3':	221	break
181	uni.navigateTo({	222	case '2 \|\| 3':
182	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	223	uni.navigateTo({
183	fail(errMsg) {	224	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
184	console.log(errMsg)	225	fail(errMsg) {
185	}	226	console.log(errMsg)
186	})	227	},
187	break;	228	})
188	default:	229	break
189	break;	230	default:
190		231	break
191	}	232	}
192	}	233	},
193	}	234	},
194	}	235	}
195		236
196	</script>	237	</script>
197		238
198	<style lang="scss">	239	<style lang="scss">
199	.card {	240	.card {
200	width: 670rpx;	241	width: 670rpx;
201	height: 478rpx;	242	height: 478rpx;
202	background: #ffffff;	243	background: #ffffff;
203	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);	244	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
204	border-radius: 8px;	245	border-radius: 8px;
205	border-radius: 8px;	246	border-radius: 8px;
206	margin-top: 20rpx;	247	margin-top: 20rpx;
207	padding: 40rpx;	248	padding: 40rpx;
208	box-sizing: border-box;	249	box-sizing: border-box;
209	.cardHeader {	250	.cardHeader {
210	width: 100%;	251	width: 100%;
211	height: 40rpx;	252	height: 40rpx;
212	display: flex;	253	display: flex;
213	justify-content: space-between;	254	justify-content: space-between;
214	align-items: center;	255	align-items: center;
215	.orderId {	256	.orderId {
216	font-size: 12px;	257	font-size: 12px;
217	color: #999999;	258	color: #999999;
218	}	259	}
219	.orderType {	260	.orderType {
220	font-size: 14px;	261	font-size: 14px;
221	color: #ff6b4a;	262	color: #ff6b4a;
222	}	263	}
223	}	264	}
224	.orderCardInfo {	265	.orderCardInfo {
225	width: 100%;	266	width: 100%;
226	height: 188rpx;	267	height: 188rpx;
227	display: flex;	268	display: flex;
228	flex-direction: row;	269	flex-direction: row;
229	justify-content: space-between;	270	justify-content: space-between;
230	align-items: center;	271	align-items: center;
231	margin-top: 40rpx;	272	margin-top: 40rpx;
232	image {	273	image {
233	height: 188rpx;	274	height: 188rpx;
234	width: 188rpx;	275	width: 188rpx;
235	margin-right: 24rpx;	276	margin-right: 24rpx;
236	}	277	}
237	.infoText {	278	.infoText {
238	display: flex;	279	display: flex;
239	flex-direction: column;	280	flex-direction: column;
240	justify-content: space-between;	281	justify-content: space-between;
241	align-items: flex-start;	282	align-items: flex-start;
242	height: 188rpx;	283	height: 188rpx;
243	width: 368rpx;	284	width: 368rpx;
244	}	285	}
245	.orderName {	286	.orderName {
246	font-size: 14px;	287	font-size: 14px;
247	color: #333333;	288	color: #333333;
248	display: -webkit-box;	289	display: -webkit-box;
249	overflow: hidden;	290	overflow: hidden;
250	-webkit-box-orient: vertical;	291	-webkit-box-orient: vertical;
251	-webkit-line-clamp: 2;	292	-webkit-line-clamp: 2;
252	}	293	}
253	.orderDescrib {	294	.orderDescrib {
254	font-size: 12px;	295	font-size: 12px;
255	color: #999999;	296	color: #999999;
256	display: -webkit-box;	297	display: -webkit-box;
257	overflow: hidden;	298	overflow: hidden;
258	-webkit-box-orient: vertical;	299	-webkit-box-orient: vertical;
259	-webkit-line-clamp: 2;	300	-webkit-line-clamp: 2;
260	}	301	}
261	.infoText-bottom {	302	.infoText-bottom {
262	display: flex;	303	display: flex;
263	flex-direction: row;	304	flex-direction: row;
264	justify-content: flex-start;	305	justify-content: flex-start;
265	align-items: center;	306	align-items: center;
266	width: 100%;	307	width: 100%;
267	.markPrice {	308	.markPrice {
268	font-size: 14px;	309	font-size: 14px;
269	color: #ff6b4a;	310	color: #ff6b4a;
270	margin-right: 20rpx;	311	margin-right: 20rpx;
271	}	312	}
272	.buy-num {	313	.buy-num {
273	font-size: 12px;	314	font-size: 12px;
274	color: #999999;	315	color: #999999;
275	}	316	}
276	}	317	}
277	}	318	}
278	.payPrice {	319	.payPrice {
279	text-align: right;	320	text-align: right;
280	margin: 20rpx 0;	321	margin: 20rpx 0;
281	font-size: 14px;	322	font-size: 14px;
282	color: #333333;	323	color: #333333;
283	.priceNum {	324	.priceNum {
284	font-size: 14px;	325	font-size: 14px;
285	color: #ff6b4a;	326	color: #ff6b4a;
286	}	327	}
287	}	328	}
288	.btns {	329	.btns {
289	display: flex;	330	display: flex;
290	justify-content: flex-end;	331	justify-content: flex-end;
291	align-items: center;	332	align-items: center;
292	.btn-type1 {	333	.btn-type1 {
293	height: 48rpx;	334	height: 48rpx;
294	width: 156rpx;	335	width: 156rpx;
295	border: 1px solid #ff6b4a;	336	border: 1px solid #ff6b4a;
296	border-radius: 12px;	337	border-radius: 12px;
297	border-radius: 12px;	338	border-radius: 12px;
298	text-align: center;	339	text-align: center;
299	line-height: 48rpx;	340	line-height: 48rpx;
300	font-size: 12px;	341	font-size: 12px;
301	color: #ff6b4a;	342	color: #ff6b4a;
302	}	343	}
303	.btn-type2 {	344	.btn-type2 {
304	height: 48rpx;	345	height: 48rpx;
305	width: 140rpx;	346	width: 140rpx;
306	background: #ff6b4a;	347	background: #ff6b4a;
307	border-radius: 12px;	348	border-radius: 12px;
308	border-radius: 12px;	349	border-radius: 12px;
309	text-align: center;	350	text-align: center;
310	line-height: 48rpx;	351	line-height: 48rpx;
311	font-size: 12px;	352	font-size: 12px;
312	color: #ffffff;	353	color: #ffffff;
313	margin-left: 20rpx;	354	margin-left: 20rpx;
314	}	355	}
315	}	356	}
316	}	357	}
317	</style>	358	</style>
318		359

src/store/modules/index.js

Diff comments View file @31b5beb

1	import urlAlias from '../url';	1	import urlAlias from '../url'
2	import request from '../request';	2	import request from '../request'
3		3
4	const {	4	const {
5	category,	5	category,
6	shopList,	6	shopList,
7	search,	7	search,
8	} = urlAlias;	8	} = urlAlias
9		9
10	let initData = {"name":"志平防蓝光-防辐射电脑网课眼镜","id":"9","imgurl":"",	10	const initData = {
11	"price":0,"trade_num":"102","rsSon":{"pic":"9_FDB33D.jpg","model_pic":null,"in_price":"6000","sku_value":"80_83",	11	name: '志平防蓝光-防辐射电脑网课眼镜',
12	"discount":"45","kc":"0","sku_name":"1.56非球面防蓝光_黑透+蓝纹","Max_Price":158,"Min_Price":99}}	12	id: '9',
13	var initArr = [1,2,3,4,5,6,7,8]	13	imgurl: '',
14	let list = []	14	price: 0,
		15	trade_num: '102',
		16	rsSon: {
		17	pic: '9_FDB33D.jpg',
		18	model_pic: null,
		19	in_price: '6000',
		20	sku_value: '80_83',
		21	discount: '45',
		22	kc: '0',
		23	sku_name: '1.56非球面防蓝光_黑透+蓝纹',
		24	Max_Price: 158,
		25	Min_Price: 99,
		26	},
		27	}
		28	var initArr = [1, 2, 3, 4, 5, 6, 7, 8]
		29	const list = []
15	initArr.forEach(function (value) {	30	initArr.forEach(function (value) {
16	list.push(initData)	31	list.push(initData)
17	});	32	})
18		33
19	let categoryList = [	34	// let categoryList = [
20	{	35	// {
21	"type": "checkbox",	36	// "type": "checkbox",
22	"name": "产品",	37	// "name": "产品",
23	"value": "category",	38	// "value": "category",
24	"submenu": [	39	// "submenu": [
25	{	40	// {
26	"label": "镜框",	41	// "label": "镜框",
27	"name": "镜框",	42	// "name": "镜框",
28	"value": "1"	43	// "value": "1"
29	},	44	// },
30	{	45	// {
31	"label": "镜片",	46	// "label": "镜片",
32	"name": "镜片",	47	// "name": "镜片",
33	"value": "2"	48	// "value": "2"
34	},	49	// },
35	{	50	// {
36	"label": "特种镜",	51	// "label": "特种镜",
37	"name": "特种镜",	52	// "name": "特种镜",
38	"value": "146"	53	// "value": "146"
39	}	54	// }
40	],	55	// ],
41	"groups": [	56	// "groups": [
42	"001"	57	// "001"
43	]	58	// ]
44	},	59	// },
45	{	60	// {
46	"type": "radio",	61	// "type": "radio",
47	"name": "规则",	62	// "name": "规则",
48	"value": "px",	63	// "value": "px",
49	"submenu": [	64	// "submenu": [
50	{	65	// {
51	"name": "按价格排",	66	// "name": "按价格排",
52	"value": "1"	67	// "value": "1"
53	},	68	// },
54	{	69	// {
55	"name": "按销量排",	70	// "name": "按销量排",
56	"value": "2"	71	// "value": "2"
57	}	72	// }
58	],	73	// ],
59	"groups": [	74	// "groups": [
60	"002"	75	// "002"
61	]	76	// ]
62	},	77	// },
63	{	78	// {
64	"type": "radio",	79	// "type": "radio",
65	"name": "排序",	80	// "name": "排序",
66	"value": "sort",	81	// "value": "sort",
67	"submenu": [	82	// "submenu": [
68	{	83	// {
69	"name": "从高到低",	84	// "name": "从高到低",
70	"value": "1"	85	// "value": "1"
71	},	86	// },
72	{	87	// {
73	"name": "从低到高",	88	// "name": "从低到高",
74	"value": "2"	89	// "value": "2"
75	}	90	// }
76	],	91	// ],
77	"groups": [	92	// "groups": [
78	"003"	93	// "003"
79	]	94	// ]
80	},	95	// },
81	{	96	// {
82	"type": "filter",	97	// "type": "filter",
83	"name": "筛选",	98	// "name": "筛选",
84	"value": "filter",	99	// "value": "filter",
85	"submenu": [	100	// "submenu": [
86	{	101	// {
87	"type": "checkbox",	102	// "type": "checkbox",
88	"name": "性别",	103	// "name": "性别",
89	"value": "sex",	104	// "value": "sex",
90	"submenu": [	105	// "submenu": [
91	{	106	// {
92	"label": "男性",	107	// "label": "男性",
93	"name": "男性",	108	// "name": "男性",
94	"value": "27"	109	// "value": "27"
95	},	110	// },
96	{	111	// {
97	"label": "女性",	112	// "label": "女性",
98	"name": "女性",	113	// "name": "女性",
99	"value": "28"	114	// "value": "28"
100	}	115	// }
101	]	116	// ]
102	},	117	// },
103	{	118	// {
104	"type": "checkbox",	119	// "type": "checkbox",
105	"name": "年龄",	120	// "name": "年龄",
106	"value": "age",	121	// "value": "age",
107	"submenu": [	122	// "submenu": [
108	{	123	// {
109	"label": "通用",	124	// "label": "通用",
110	"name": "通用",	125	// "name": "通用",
111	"value": "24"	126	// "value": "24"
112	}	127	// }
113	]	128	// ]
114	},	129	// },
115	{	130	// {
116	"type": "checkbox",	131	// "type": "checkbox",
117	"name": "适用场景",	132	// "name": "适用场景",
118	"value": "sense",	133	// "value": "sense",
119	"submenu": [	134	// "submenu": [
120	{	135	// {
121	"label": "行政风",	136	// "label": "行政风",
122	"name": "行政风",	137	// "name": "行政风",
123	"value": "53"	138	// "value": "53"
124	},	139	// },
125	{	140	// {
126	"label": "青春学子风",	141	// "label": "青春学子风",
127	"name": "青春学子风",	142	// "name": "青春学子风",
128	"value": "54"	143	// "value": "54"
129	},	144	// },
130	{	145	// {
131	"label": "运动风",	146	// "label": "运动风",
132	"name": "运动风",	147	// "name": "运动风",
133	"value": "55"	148	// "value": "55"
134	},	149	// },
135	{	150	// {
136	"label": "简约-极简文艺范",	151	// "label": "简约-极简文艺范",
137	"name": "简约-极简文艺范",	152	// "name": "简约-极简文艺范",
138	"value": "56"	153	// "value": "56"
139	},	154	// },
140	{	155	// {
141	"label": "奶奶风",	156	// "label": "奶奶风",
142	"name": "奶奶风",	157	// "name": "奶奶风",
143	"value": "57"	158	// "value": "57"
144	},	159	// },
145	{	160	// {
146	"label": "流线洛可可",	161	// "label": "流线洛可可",
147	"name": "流线洛可可",	162	// "name": "流线洛可可",
148	"value": "58"	163	// "value": "58"
149	},	164	// },
150	{	165	// {
151	"label": "自然舒视角",	166	// "label": "自然舒视角",
152	"name": "自然舒视角",	167	// "name": "自然舒视角",
153	"value": "59"	168	// "value": "59"
154	},	169	// },
155	{	170	// {
156	"label": "无界人文系",	171	// "label": "无界人文系",
157	"name": "无界人文系",	172	// "name": "无界人文系",
158	"value": "60"	173	// "value": "60"
159	},	174	// },
160	{	175	// {
161	"label": "有机未来时",	176	// "label": "有机未来时",
162	"name": "有机未来时",	177	// "name": "有机未来时",
163	"value": "61"	178	// "value": "61"
164	},	179	// },
165	{	180	// {
166	"label": "立体巴洛克",	181	// "label": "立体巴洛克",
167	"name": "立体巴洛克",	182	// "name": "立体巴洛克",
168	"value": "62"	183	// "value": "62"
169	},	184	// },
170	{	185	// {
171	"label": "多元新风尚",	186	// "label": "多元新风尚",
172	"name": "多元新风尚",	187	// "name": "多元新风尚",
173	"value": "63"	188	// "value": "63"
174	},	189	// },
175	{	190	// {
176	"label": "理性几何派",	191	// "label": "理性几何派",
177	"name": "理性几何派",	192	// "name": "理性几何派",
178	"value": "64"	193	// "value": "64"
179	},	194	// },
180	{	195	// {
181	"label": "轻简北欧风",	196	// "label": "轻简北欧风",
182	"name": "轻简北欧风",	197	// "name": "轻简北欧风",
183	"value": "65"	198	// "value": "65"
184	},	199	// },
185	{	200	// {
186	"label": "质感哥特潮",	201	// "label": "质感哥特潮",
187	"name": "质感哥特潮",	202	// "name": "质感哥特潮",
188	"value": "66"	203	// "value": "66"
189	},	204	// },
190	{	205	// {
191	"label": "时尚",	206	// "label": "时尚",
192	"name": "时尚",	207	// "name": "时尚",
193	"value": "67"	208	// "value": "67"
194	},	209	// },
195	{	210	// {
196	"label": "复古",	211	// "label": "复古",
197	"name": "复古",	212	// "name": "复古",
198	"value": "68"	213	// "value": "68"
199	},	214	// },
200	{	215	// {
201	"label": "商务",	216	// "label": "商务",
202	"name": "商务",	217	// "name": "商务",
203	"value": "69"	218	// "value": "69"
204	},	219	// },
205	{	220	// {
206	"label": "休闲",	221	// "label": "休闲",
207	"name": "休闲",	222	// "name": "休闲",
208	"value": "70"	223	// "value": "70"
209	},	224	// },
210	{	225	// {
211	"label": "折射率",	226	// "label": "折射率",
212	"name": "折射率",	227	// "name": "折射率",
213	"value": "285"	228	// "value": "285"
214	}	229	// }
215	]	230	// ]
216	},	231	// },
217	{	232	// {
218	"type": "checkbox",	233	// "type": "checkbox",
219	"name": "价格",	234	// "name": "价格",
220	"value": "price",	235	// "value": "price",
221	"submenu": [	236	// "submenu": [
222	{	237	// {
223	"name": "100以下",	238	// "name": "100以下",
224	"value": "1,100"	239	// "value": "1,100"
225	},	240	// },
226	{	241	// {
227	"name": "100-300",	242	// "name": "100-300",
228	"value": "100,300"	243	// "value": "100,300"
229	},	244	// },
230	{	245	// {
231	"name": "300-1000",	246	// "name": "300-1000",
232	"value": "300,1000"	247	// "value": "300,1000"
233	},	248	// },
234	{	249	// {
235	"name": "1000以上",	250	// "name": "1000以上",
236	"value": "1000,-1"	251	// "value": "1000,-1"
237	}	252	// }
238	]	253	// ]
239	},	254	// },
240	{	255	// {
241	"type": "checkbox",	256	// "type": "checkbox",
242	"name": "材质",	257	// "name": "材质",
243	"value": "glasscate",	258	// "value": "glasscate",
244	"submenu": [	259	// "submenu": [
245	{	260	// {
246	"label": "购易",	261	// "label": "购易",
247	"name": "购易",	262	// "name": "购易",
248	"value": "72"	263	// "value": "72"
249	},	264	// },
250	{	265	// {
251	"label": "海俪恩",	266	// "label": "海俪恩",
252	"name": "海俪恩",	267	// "name": "海俪恩",
253	"value": "73"	268	// "value": "73"
254	},	269	// },
255	{	270	// {
256	"label": "沙漠风暴",	271	// "label": "沙漠风暴",
257	"name": "沙漠风暴",	272	// "name": "沙漠风暴",
258	"value": "74"	273	// "value": "74"
259	},	274	// },
260	{	275	// {
261	"label": "古诗",	276	// "label": "古诗",
262	"name": "古诗",	277	// "name": "古诗",
263	"value": "75"	278	// "value": "75"
264	},	279	// },
265	{	280	// {
266	"label": "暴龙",	281	// "label": "暴龙",
267	"name": "暴龙",	282	// "name": "暴龙",
268	"value": "76"	283	// "value": "76"
269	},	284	// },
270	{	285	// {
271	"label": "犀牛",	286	// "label": "犀牛",
272	"name": "犀牛",	287	// "name": "犀牛",
273	"value": "77"	288	// "value": "77"
274	},	289	// },
275	{	290	// {
276	"label": "Ray-Ban雷朋",	291	// "label": "Ray-Ban雷朋",
277	"name": "Ray-Ban雷朋",	292	// "name": "Ray-Ban雷朋",
278	"value": "78"	293	// "value": "78"
279	},	294	// },
280	{	295	// {
281	"label": "PARIM派丽蒙",	296	// "label": "PARIM派丽蒙",
282	"name": "PARIM派丽蒙",	297	// "name": "PARIM派丽蒙",
283	"value": "79"	298	// "value": "79"
284	},	299	// },
285	{	300	// {
286	"label": "石狼",	301	// "label": "石狼",
287	"name": "石狼",	302	// "name": "石狼",
288	"value": "80"	303	// "value": "80"
289	},	304	// },
290	{	305	// {
291	"label": "木九十",	306	// "label": "木九十",
292	"name": "木九十",	307	// "name": "木九十",
293	"value": "81"	308	// "value": "81"
294	}	309	// }
295	]	310	// ]
296	},	311	// },
297	{	312	// {
298	"type": "checkbox",	313	// "type": "checkbox",
299	"name": "品牌",	314	// "name": "品牌",
300	"value": "brand",	315	// "value": "brand",
301	"submenu": [	316	// "submenu": [
302	{	317	// {
303	"label": "购易",	318	// "label": "购易",
304	"name": "购易",	319	// "name": "购易",
305	"value": "72"	320	// "value": "72"
306	},	321	// },
307	{	322	// {
308	"label": "海俪恩",	323	// "label": "海俪恩",
309	"name": "海俪恩",	324	// "name": "海俪恩",
310	"value": "73"	325	// "value": "73"
311	},	326	// },
312	{	327	// {
313	"label": "沙漠风暴",	328	// "label": "沙漠风暴",
314	"name": "沙漠风暴",	329	// "name": "沙漠风暴",
315	"value": "74"	330	// "value": "74"
316	},	331	// },
317	{	332	// {
318	"label": "古诗",	333	// "label": "古诗",
319	"name": "古诗",	334	// "name": "古诗",
320	"value": "75"	335	// "value": "75"
321	},	336	// },
322	{	337	// {
323	"label": "暴龙",	338	// "label": "暴龙",
324	"name": "暴龙",	339	// "name": "暴龙",
325	"value": "76"	340	// "value": "76"
326	},	341	// },
327	{	342	// {
328	"label": "犀牛",	343	// "label": "犀牛",
329	"name": "犀牛",	344	// "name": "犀牛",
330	"value": "77"	345	// "value": "77"
331	},	346	// },
332	{	347	// {
333	"label": "Ray-Ban雷朋",	348	// "label": "Ray-Ban雷朋",
334	"name": "Ray-Ban雷朋",	349	// "name": "Ray-Ban雷朋",
335	"value": "78"	350	// "value": "78"
336	},	351	// },
337	{	352	// {
338	"label": "PARIM派丽蒙",	353	// "label": "PARIM派丽蒙",
339	"name": "PARIM派丽蒙",	354	// "name": "PARIM派丽蒙",
340	"value": "79"	355	// "value": "79"
341	},	356	// },
342	{	357	// {
343	"label": "石狼",	358	// "label": "石狼",
344	"name": "石狼",	359	// "name": "石狼",
345	"value": "80"	360	// "value": "80"
346	},	361	// },
347	{	362	// {
348	"label": "木九十",	363	// "label": "木九十",
349	"name": "木九十",	364	// "name": "木九十",
350	"value": "81"	365	// "value": "81"
351	}	366	// }
352	]	367	// ]
353	}	368	// }
354	],	369	// ],
355	"groups": [	370	// "groups": [
356	"001",	371	// "001",
357	"002",	372	// "002",
358	"003"	373	// "003"
359	],	374	// ],
360	}	375	// }
361	]	376	// ]
362		377
363	//初始化数据是为了显示默认骨架	378	// 初始化数据是为了显示默认骨架
364	const state = {	379	const state = {
365	categoryList: [],	380	categoryList: [],
366	list: list	381	list: list,
367	};	382	}
368
369	const mutations = {
370	LIST: (state, list) => {
371	state.list = list;
372	},
373	CATEGORY: (state, categoryList) => {
374	state.categoryList = categoryList;
375	}
376	};
377		383
378	const actions = {	384	const mutations = {
379	category({	385	LIST: (state, list) => {
380	commit	386	state.list = list
381	}, param) {	387	},
382	return new Promise((resolve) => request({	388	CATEGORY: (state, categoryList) => {
383	url: category,	389	state.categoryList = categoryList
384	success: (res) => {	390	},
385	let data = res.data.data;	391	}
386	for (let i = 0; i <= data.length; i++) {
387	if (data[i] && data[i].type !== 'filter') {
388	data[i].type = 'hierarchy';
389	}
390	}
391	data.unshift({
392	type: "hierarchy",
393	name: "全部",
394	value: "all",
395	isNoPull: true,
396	});
397	commit('CATEGORY', data);
398	resolve(data)
399	},
400	fail: (res) => {
401	console.log("fail status === > ", res);
402	}
403	}))
404
405	},
406	list({
407	commit
408	}, param) {
409	return new Promise((resolve) => request({
410	url: shopList,
411	success: (res) => {
412	commit('LIST', res.data.data)
413	resolve(res.data)
414	},
415	fail: (res) => {
416	console.log("fail status === > ", res);
417	},
418	complete: (res) => {
419	state.isLoading = false;
420	},
421	}))
422	},
423	search({
424	commit
425	}, {
426	params,
427	keyword
428	}) {
429	const uid = uni.getStorageSync('uid');
430	return new Promise((resolve) => request({
431	url: search,
432	data: {
433	params: JSON.stringify(params),
434	uid,
435	way: 1,
436	keyword,
437	},
438	success: (res) => {
439	commit('LIST', res.data.data);
440	resolve(res.data)
441	},
442	fail: (res) => {
443	console.log("fail status === > ", res);
444	}
445	}))
446
447	},
448	};
449		392
450	export default {
451	namespaced: true,
452	state,
453	mutations,
454	actions,

src/store/request.js

Diff comments View file @31b5beb

 const DOMAIN = 'https://api.glass.xiuyetang.com'
+let loading = false
 export default async function request({
   url,
   method = 'post',
   data = {},
   header = {
     'Content-Type': 'application/x-www-form-urlencoded',
   },
   timeout = 3000,
   withCredentials = false, // 跨域请求时是否携带凭证（cookies）
   // sslVerify: true, // 验证 ssl 证书
   success,
   fail = (res) => {
     console.log('fail status === > ', res)
   },
   complete = (res) => {
     console.log('complete status === > ', res)
+    if (loading) {
+      uni.hideLoading()
+    }
   },
+  isLoading = false,
+  loadingText = '加载中',
 }) {
+  if (isLoading) {
+    loading = isLoading
+    uni.showLoading({
+      title: loadingText,
+    })
+  }
   const uid = uni.getStorageSync('uid')
   const openid = uni.getStorageSync('openid')
   data = {
     uid,
     openid,
     ...data,
   }
   uni
     .request({
       url: DOMAIN + url,
       method,
       data,
       header,
       timeout,
       withCredentials,
       success,
       fail,
       complete,
     })
 }