├── .gitignore
├── App.vue
├── LICENSE
├── README.md
├── api
    └── backend.js
├── app.js
├── colorui
    ├── animation.css
    ├── components
    │   └── cu-custom.vue
    ├── icon.css
    └── main.css
├── components
    ├── FabBtn
    │   └── index.vue
    ├── ListCell
    │   └── index.vue
    ├── LoadMore
    │   └── index.vue
    ├── Loading
    │   └── index.vue
    ├── ProductList
    │   ├── BoxLayout.vue
    │   ├── HorizontalLayout.vue
    │   ├── HorizontalLayout2.vue
    │   └── HorizontalScrollLayout.vue
    ├── Refresh
    │   └── index.vue
    ├── Share
    │   └── index.vue
    ├── SortNavbar
    │   └── index.vue
    ├── SortNavbar2
    │   └── index.vue
    ├── Tab
    │   └── index.vue
    └── Tab2
    │   └── index.vue
├── config.js
├── main.js
├── manifest.json
├── pages.json
├── pages
    ├── category
    │   └── category.vue
    ├── collect
    │   ├── collect.vue
    │   └── components
    │   │   └── CollectList.vue
    ├── collocation
    │   ├── component
    │   │   ├── CollocationBox.vue
    │   │   ├── CollocationCard.vue
    │   │   └── CollocationList.vue
    │   ├── detail.vue
    │   └── index.vue
    ├── halfPrice
    │   └── index.vue
    ├── index
    │   └── index.vue
    ├── nine
    │   └── nine.vue
    ├── product
    │   ├── list.vue
    │   └── product.vue
    ├── public
    │   ├── guide.vue
    │   └── login.vue
    ├── rank
    │   └── rank.vue
    ├── search
    │   ├── result.vue
    │   └── search.vue
    ├── user
    │   ├── message.vue
    │   ├── set.vue
    │   └── user.vue
    └── webview
    │   └── index.vue
├── static
    ├── errorImage.jpg
    ├── female.png
    ├── logo.png
    ├── male.png
    ├── refresh
    │   ├── loading.png
    │   └── xiangxia.png
    ├── splash.9.png
    └── tab
    │   ├── circle.png
    │   ├── circle_cur.png
    │   ├── home.png
    │   ├── home_cur.png
    │   ├── my.png
    │   ├── my_cur.png
    │   ├── shop.png
    │   └── shop_cur.png
├── store
    └── index.js
├── style
    └── app.scss
├── uni.scss
└── utils
    ├── cache.js
    ├── http.js
    └── mcUtils.js


/.gitignore:
--------------------------------------------------------------------------------
1 | unpackage
2 | .idea
3 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   /**
 3 |    * vuex管理登陆状态，具体可以参考官方登陆模板示例
 4 |    */
 5 |   import app from 'app.js'
 6 |   import {mapMutations} from 'vuex'
 7 | 
 8 |   export default {
 9 |     onLaunch: function () {
10 |       app.initTitleNav();
11 |       app.initShareMenu();
12 | 
13 |       this.$api.backend.getLoginUser().then(resp => {
14 |         if (resp.responseCode === 7002) {
15 |           this.logout();
16 |         } else {
17 |           this.storeUser(resp.data)
18 |         }
19 |       })
20 | 
21 |     },
22 |     onShow: function (res) {
23 |       if (res.shareTicket) {
24 |         this.storeShareTicket(res.shareTicket)
25 |       }
26 |     },
27 |     onHide: function () {
28 |     },
29 |     methods: {
30 |       ...mapMutations(['storeUser', 'logout', 'storeShareTicket'])
31 |     }
32 |   }
33 | </script>
34 | 
35 | <style lang="scss">
36 |   @import "colorui/icon.css";
37 |   @import "colorui/main.css";
38 |   @import "style/app.scss";
39 | 
40 |   .container {
41 |     background: $page-color-base;
42 |   }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 项目已被迁移到新的地址：https://github.com/silently9527/coupons
2 | 


--------------------------------------------------------------------------------
/api/backend.js:
--------------------------------------------------------------------------------
  1 | import httpRequest from '../utils/http'
  2 | 
  3 | module.exports = {
  4 |   login: function (provider, code) {
  5 |     let url = '/auth/miniprogram';
  6 |     if (provider === 'qq') {
  7 |       url = '/auth/QQMiniProgram'
  8 |     }
  9 |     return httpRequest.get(url, {code: code})
 10 |   },
 11 |   htmlLogin: function (mobile, code) {
 12 |     return httpRequest.post('/login', {mobile: mobile, code: code})
 13 |   },
 14 |   logout: function () {
 15 |     return httpRequest.get('/logout')
 16 |   },
 17 |   getLoginUser: function () {
 18 |     return httpRequest.get('/user/current_user', {})
 19 |   },
 20 |   sendEmailCode: function (params) {
 21 |     return httpRequest.post('/mi/send_email_code', params)
 22 |   },
 23 |   updatePassword: function (params) {
 24 |     return httpRequest.post('/mi/update_password', params)
 25 |   },
 26 |   register: function (user) {
 27 |     return httpRequest.post('/mi/register', user)
 28 |   },
 29 |   updateUserInfo: function (user) {
 30 |     return httpRequest.post('/user/update', user)
 31 |   },
 32 |   initUserInfo: function (user) {
 33 |     return httpRequest.post('/user/init_current_user', user)
 34 |   },
 35 |   getCate: function () {
 36 |     return httpRequest.get('/mi/load_cate', {})
 37 |   },
 38 |   recommendGoods: function (page) {
 39 |     return httpRequest.get('/mi/load_recommend_goods', {page: page})
 40 |   },
 41 |   getGoodsDetail: function (id, goodsId) {
 42 |     let params = {};
 43 |     if (id) {
 44 |       params.id = id
 45 |     }
 46 |     if (goodsId) {
 47 |       params.goodsId = goodsId
 48 |     }
 49 |     return httpRequest.get('/mi/goods_detail', params)
 50 |   },
 51 |   getGoodsByCate: function (subcid, page, sort) {
 52 |     return httpRequest.get('/mi/load_goods_by_cate', {subcid: subcid, page: page, sort: sort})
 53 |   },
 54 |   getPrivilegeLink: function (goodsId) {
 55 |     return httpRequest.get('/mi/get_privilege_link', {goodsId: goodsId})
 56 |   },
 57 |   getHotSearch: function () {
 58 |     return httpRequest.get('/mi/get_hot_search', {})
 59 |   },
 60 |   search: function (keyword, page, sort) {
 61 |     return httpRequest.get('/mi/search', {keyword: keyword, page: page, sort: sort})
 62 |   },
 63 |   search2: function (keyword, page, sort, hasCoupon) {
 64 |     return httpRequest.get('/mi/search2', {keyword: keyword, page: page, sort: sort, hasCoupon: hasCoupon})
 65 |   },
 66 |   favoriteGoods: function (goodsId) {
 67 |     return httpRequest.get('/collection/product/add', {productId: goodsId})
 68 |   },
 69 |   unFavoriteGoods: function (goodsId) {
 70 |     return httpRequest.get('/collection/product/remove', {productId: goodsId})
 71 |   },
 72 |   favoriteList: function (page, size) {
 73 |     return httpRequest.get('/collection/product/list', {page: page, size: size})
 74 |   },
 75 |   getNineGoods: function (page, size, nineCid) {
 76 |     return httpRequest.get('/mi/load_nine_goods', {page: page, size: size, nineCid: nineCid})
 77 |   },
 78 |   getRankGoods: function (cid) {
 79 |     return httpRequest.get('/mi/load_rank_goods', {cid: cid})
 80 |   },
 81 |   getSimilarGoods: function (daTaoKeGoodsId) {
 82 |     return httpRequest.get('/mi/get_similar_goods', {daTaoKeGoodsId: daTaoKeGoodsId})
 83 |   },
 84 |   listCarousel: function () {
 85 |     return httpRequest.post('/mi/list_carousel', {})
 86 |   },
 87 |   listMenus: function () {
 88 |     return httpRequest.post('/mi/list_menus', {})
 89 |   },
 90 |   recommendCollocations: function (page) {
 91 |     return httpRequest.get('/mi/collocation/load_recommend', {page})
 92 |   },
 93 |   collocationsList: function (page, sex) {
 94 |     if (sex) {
 95 |       return httpRequest.get('/mi/collocation/list', {page: page, sex: sex})
 96 |     }
 97 |     return httpRequest.get('/mi/collocation/list', {page})
 98 |   },
 99 |   recommendCollocations2: function (page) {
100 |     return httpRequest.get('/mi/collocation/load_recommend2', {page})
101 |   },
102 |   addCollocationAppreciate: function (collocationId) {
103 |     return httpRequest.get('/collocation/add_appreciate', {collocationId})
104 |   },
105 |   cancelCollocationAppreciate: function (collocationId) {
106 |     return httpRequest.get('/collocation/cancel_appreciate', {collocationId})
107 |   },
108 |   collocationSimpleDetail: function (collocationId) {
109 |     return httpRequest.get('/mi/collocation/simple_detail', {collocationId})
110 |   },
111 |   collocationProduct: function (collocationId) {
112 |     return httpRequest.get('/mi/collocation/product', {collocationId})
113 |   }
114 | }
115 | 
116 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | export default {
 4 |   initTitleNav() {
 5 |     uni.getSystemInfo({
 6 |       success: function (e) {
 7 |         // #ifndef MP
 8 |         Vue.prototype.StatusBar = e.statusBarHeight;
 9 |         if (e.platform === 'android') {
10 |           Vue.prototype.CustomBar = e.statusBarHeight + 50;
11 |         } else {
12 |           Vue.prototype.CustomBar = e.statusBarHeight + 45;
13 |         }
14 |         // #endif
15 |         // #ifdef MP-WEIXIN
16 |         Vue.prototype.StatusBar = e.statusBarHeight;
17 |         let custom = wx.getMenuButtonBoundingClientRect();
18 |         Vue.prototype.Custom = custom;
19 |         Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
20 |         // #endif
21 |         // #ifdef MP-ALIPAY
22 |         // Vue.prototype.StatusBar = e.statusBarHeight;
23 |         // Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
24 |         // #endif
25 |         // #ifdef MP-QQ
26 |         Vue.prototype.StatusBar = e.statusBarHeight;
27 |         let customQQ = qq.getMenuButtonBoundingClientRect();
28 |         Vue.prototype.Custom = customQQ;
29 |         Vue.prototype.CustomBar = customQQ.bottom + customQQ.top - e.statusBarHeight;
30 |         if (e.model.indexOf("iPhone X") > -1) {
31 |           Vue.prototype.CustomBar = 82;
32 |         } else {
33 |           Vue.prototype.CustomBar = 60;
34 |         }
35 |         // #endif
36 |         // #ifdef MP-TOUTIAO
37 |         // Vue.prototype.StatusBar = e.statusBarHeight;
38 |         // let customTT = tt.getMenuButtonBoundingClientRect();
39 |         // Vue.prototype.Custom = customTT;
40 |         // Vue.prototype.CustomBar = customTT.bottom + customTT.top - e.statusBarHeight
41 |         // #endif
42 |       }
43 |     })
44 |   },
45 |   initShareMenu() {
46 |     // #ifdef MP-WEIXIN
47 |     wx.showShareMenu({
48 |       withShareTicket: true,
49 |       menus: ['shareAppMessage', 'shareTimeline']
50 |     })
51 |     // #endif
52 |     // #ifdef MP-QQ
53 |     uni.showShareMenu({
54 |       withShareTicket: true
55 |     })
56 |     // #endif
57 |   }
58 | 
59 | };
60 | 


--------------------------------------------------------------------------------
/colorui/animation.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 |   Animation 微动画  
  3 |   基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
  4 |  */
  5 | 
  6 | /* css 滤镜 控制黑白底色gif的 */
  7 | .gif-black{  
  8 |   mix-blend-mode: screen;  
  9 | }
 10 | .gif-white{  
 11 |   mix-blend-mode: multiply; 
 12 | }
 13 | 
 14 | 
 15 | /* Animation css */
 16 | [class*=animation-] {
 17 |     animation-duration: .5s;
 18 |     animation-timing-function: ease-out;
 19 |     animation-fill-mode: both
 20 | }
 21 | 
 22 | .animation-fade {
 23 |     animation-name: fade;
 24 |     animation-duration: .8s;
 25 |     animation-timing-function: linear
 26 | }
 27 | 
 28 | .animation-scale-up {
 29 |     animation-name: scale-up
 30 | }
 31 | 
 32 | .animation-scale-down {
 33 |     animation-name: scale-down
 34 | }
 35 | 
 36 | .animation-slide-top {
 37 |     animation-name: slide-top
 38 | }
 39 | 
 40 | .animation-slide-bottom {
 41 |     animation-name: slide-bottom
 42 | }
 43 | 
 44 | .animation-slide-left {
 45 |     animation-name: slide-left
 46 | }
 47 | 
 48 | .animation-slide-right {
 49 |     animation-name: slide-right
 50 | }
 51 | 
 52 | .animation-shake {
 53 |     animation-name: shake
 54 | }
 55 | 
 56 | .animation-reverse {
 57 |     animation-direction: reverse
 58 | }
 59 | 
 60 | @keyframes fade {
 61 |     0% {
 62 |         opacity: 0
 63 |     }
 64 | 
 65 |     100% {
 66 |         opacity: 1
 67 |     }
 68 | }
 69 | 
 70 | @keyframes scale-up {
 71 |     0% {
 72 |         opacity: 0;
 73 |         transform: scale(.2)
 74 |     }
 75 | 
 76 |     100% {
 77 |         opacity: 1;
 78 |         transform: scale(1)
 79 |     }
 80 | }
 81 | 
 82 | @keyframes scale-down {
 83 |     0% {
 84 |         opacity: 0;
 85 |         transform: scale(1.8)
 86 |     }
 87 | 
 88 |     100% {
 89 |         opacity: 1;
 90 |         transform: scale(1)
 91 |     }
 92 | }
 93 | 
 94 | @keyframes slide-top {
 95 |     0% {
 96 |         opacity: 0;
 97 |         transform: translateY(-100%)
 98 |     }
 99 | 
100 |     100% {
101 |         opacity: 1;
102 |         transform: translateY(0)
103 |     }
104 | }
105 | 
106 | @keyframes slide-bottom {
107 |     0% {
108 |         opacity: 0;
109 |         transform: translateY(100%)
110 |     }
111 | 
112 |     100% {
113 |         opacity: 1;
114 |         transform: translateY(0)
115 |     }
116 | }
117 | 
118 | @keyframes shake {
119 | 
120 |     0%,
121 |     100% {
122 |         transform: translateX(0)
123 |     }
124 | 
125 |     10% {
126 |         transform: translateX(-9px)
127 |     }
128 | 
129 |     20% {
130 |         transform: translateX(8px)
131 |     }
132 | 
133 |     30% {
134 |         transform: translateX(-7px)
135 |     }
136 | 
137 |     40% {
138 |         transform: translateX(6px)
139 |     }
140 | 
141 |     50% {
142 |         transform: translateX(-5px)
143 |     }
144 | 
145 |     60% {
146 |         transform: translateX(4px)
147 |     }
148 | 
149 |     70% {
150 |         transform: translateX(-3px)
151 |     }
152 | 
153 |     80% {
154 |         transform: translateX(2px)
155 |     }
156 | 
157 |     90% {
158 |         transform: translateX(-1px)
159 |     }
160 | }
161 | 
162 | @keyframes slide-left {
163 |     0% {
164 |         opacity: 0;
165 |         transform: translateX(-100%)
166 |     }
167 | 
168 |     100% {
169 |         opacity: 1;
170 |         transform: translateX(0)
171 |     }
172 | }
173 | 
174 | @keyframes slide-right {
175 |     0% {
176 |         opacity: 0;
177 |         transform: translateX(100%)
178 |     }
179 | 
180 |     100% {
181 |         opacity: 1;
182 |         transform: translateX(0)
183 |     }
184 | }


--------------------------------------------------------------------------------
/colorui/components/cu-custom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view>
 3 |         <view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
 4 |             <view class="cu-bar fixed" :style="style" :class="[bgImage!==''?'none-bg text-white bg-img':'',bgColor]">
 5 |                 <slot name="left"></slot>
 6 |                 <view class="action padding-top-xs padding-bottom-xs padding-right-xs" @tap="BackPage" v-if="isBack">
 7 |                     <text class="icon icon-back"></text>
 8 |                     <slot name="backText"></slot>
 9 |                 </view>
10 |                 <view class="content" :style="[{top:StatusBar + 'px'}]">
11 |                     <slot name="content"></slot>
12 |                 </view>
13 |                 <slot name="right"></slot>
14 |                 <slot name="custom"></slot>
15 |             </view>
16 |         </view>
17 |     </view>
18 | </template>
19 | 
20 | <script>
21 |     export default {
22 |         data() {
23 |             return {
24 |                 StatusBar: this.StatusBar,
25 |                 CustomBar: this.CustomBar
26 |             };
27 |         },
28 |         name: 'cu-custom',
29 |         computed: {
30 |             style() {
31 |                 var StatusBar = this.StatusBar;
32 |                 var CustomBar = this.CustomBar;
33 |                 var bgImage = this.bgImage;
34 |                 var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
35 |                 if (this.bgImage) {
36 |                     style = `${style}background-image:url(${bgImage});`;
37 |                 }
38 |                 return style
39 |             }
40 |         },
41 |         props: {
42 |             bgColor: {
43 |                 type: String,
44 |                 default: ''
45 |             },
46 |             url: {
47 |                 type: String,
48 |                 default: ''
49 |             },
50 |             tab: {
51 |                 type: Boolean,
52 |                 default: false
53 |             },
54 |             isBack: {
55 |                 type: [Boolean, String],
56 |                 default: false
57 |             },
58 |             bgImage: {
59 |                 type: String,
60 |                 default: ''
61 |             }
62 |         },
63 |         methods: {
64 |             BackPage() {
65 |                 if (this.url) {
66 |                     if (this.tab) {
67 |                         return uni.switchTab({
68 |                             url: this.url
69 |                         });
70 |                     } else {
71 |                         return uni.redirectTo({
72 |                             url: this.url
73 |                         })
74 |                     }
75 |                 }
76 |                 if (getCurrentPages().length < 2) {
77 |                     let url = '/pages/collocation/index'
78 |                     return uni.switchTab({
79 |                         url
80 |                     })
81 |                 }
82 |                 uni.navigateBack({
83 |                     delta: 1
84 |                 });
85 |             }
86 |         }
87 |     }
88 | </script>
89 | 
90 | <style>
91 | 
92 | </style>
93 | 


--------------------------------------------------------------------------------
/components/FabBtn/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view>
  3 | 		<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop)" :class="{
  4 |         'uni-fab--leftBottom': leftBottom,
  5 |         'uni-fab--rightBottom': rightBottom,
  6 |         'uni-fab--leftTop': leftTop,
  7 |         'uni-fab--rightTop': rightTop
  8 |       }"
  9 | 		 class="uni-fab">
 10 | 			<view :class="{
 11 |           'uni-fab__content--left': horizontal === 'left',
 12 |           'uni-fab__content--right': horizontal === 'right',
 13 |           'uni-fab__content--flexDirection': direction === 'vertical',
 14 |           'uni-fab__content--flexDirectionStart': flexDirectionStart,
 15 |           'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
 16 | 		  'uni-fab__content--other-platform': !isAndroidNvue
 17 |         }"
 18 | 			 :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" class="uni-fab__content"
 19 | 			 elevation="5">
 20 | 				<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
 21 | 				<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" class="uni-fab__item"
 22 | 				 @click="_onItemClick(index, item)">
 23 | 					<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
 24 | 					<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
 25 | 				</view>
 26 | 				<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
 27 | 			</view>
 28 | 		</view>
 29 | 		<view :class="{
 30 | 		  'uni-fab__circle--leftBottom': leftBottom,
 31 | 		  'uni-fab__circle--rightBottom': rightBottom,
 32 | 		  'uni-fab__circle--leftTop': leftTop,
 33 | 		  'uni-fab__circle--rightTop': rightTop,
 34 | 		  'uni-fab__content--other-platform': !isAndroidNvue
 35 | 		}"
 36 | 		 class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick">
 37 | 			<view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow}"></view>
 38 | 			<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow}"></view>
 39 | 		</view>
 40 | 	</view>
 41 | </template>
 42 | 
 43 | <script>
 44 | 	let platform = 'other'
 45 | 	// #ifdef APP-NVUE
 46 | 	platform = uni.getSystemInfoSync().platform
 47 | 	// #endif
 48 | 
 49 | 	/**
 50 | 	 * Fab 悬浮按钮
 51 | 	 * @description 点击可展开一个图形按钮菜单
 52 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=144
 53 | 	 * @property {Object} pattern 可选样式配置项
 54 | 	 * @property {Object} horizontal = [left | right] 水平对齐方式
 55 | 	 * 	@value left 左对齐
 56 | 	 * 	@value right 右对齐
 57 | 	 * @property {Object} vertical = [bottom | top] 垂直对齐方式
 58 | 	 * 	@value bottom 下对齐
 59 | 	 * 	@value top 上对齐
 60 | 	 * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
 61 | 	 * 	@value horizontal 水平显示
 62 | 	 * 	@value vertical 垂直显示
 63 | 	 * @property {Array} content 展开菜单内容配置项
 64 | 	 * @property {Boolean} popMenu 是否使用弹出菜单
 65 | 	 * @event {Function} trigger 展开菜单点击事件，返回点击信息
 66 | 	 * @event {Function} fabClick 悬浮按钮点击事件
 67 | 	 */
 68 | 	export default {
 69 | 		name: 'UniFab',
 70 | 		props: {
 71 | 			pattern: {
 72 | 				type: Object,
 73 | 				default () {
 74 | 					return {}
 75 | 				}
 76 | 			},
 77 | 			horizontal: {
 78 | 				type: String,
 79 | 				default: 'left'
 80 | 			},
 81 | 			vertical: {
 82 | 				type: String,
 83 | 				default: 'bottom'
 84 | 			},
 85 | 			direction: {
 86 | 				type: String,
 87 | 				default: 'horizontal'
 88 | 			},
 89 | 			content: {
 90 | 				type: Array,
 91 | 				default () {
 92 | 					return []
 93 | 				}
 94 | 			},
 95 | 			show: {
 96 | 				type: Boolean,
 97 | 				default: false
 98 | 			},
 99 | 			popMenu: {
100 | 				type: Boolean,
101 | 				default: true
102 | 			}
103 | 		},
104 | 		data() {
105 | 			return {
106 | 				fabShow: false,
107 | 				isShow: false,
108 | 				isAndroidNvue: platform === 'android',
109 | 				styles: {
110 | 					color: '#3c3e49',
111 | 					selectedColor: '#007AFF',
112 | 					backgroundColor: '#fff',
113 | 					buttonColor: '#3c3e49'
114 | 				}
115 | 			}
116 | 		},
117 | 		computed: {
118 | 			contentWidth(e) {
119 | 				return (this.content.length + 1) * 55 + 10 + 'px'
120 | 			},
121 | 			contentWidthMin() {
122 | 				return 55 + 'px'
123 | 			},
124 | 			// 动态计算宽度
125 | 			boxWidth() {
126 | 				return this.getPosition(3, 'horizontal')
127 | 			},
128 | 			// 动态计算高度
129 | 			boxHeight() {
130 | 				return this.getPosition(3, 'vertical')
131 | 			},
132 | 			// 计算左下位置
133 | 			leftBottom() {
134 | 				return this.getPosition(0, 'left', 'bottom')
135 | 			},
136 | 			// 计算右下位置
137 | 			rightBottom() {
138 | 				return this.getPosition(0, 'right', 'bottom')
139 | 			},
140 | 			// 计算左上位置
141 | 			leftTop() {
142 | 				return this.getPosition(0, 'left', 'top')
143 | 			},
144 | 			rightTop() {
145 | 				return this.getPosition(0, 'right', 'top')
146 | 			},
147 | 			flexDirectionStart() {
148 | 				return this.getPosition(1, 'vertical', 'top')
149 | 			},
150 | 			flexDirectionEnd() {
151 | 				return this.getPosition(1, 'vertical', 'bottom')
152 | 			},
153 | 			horizontalLeft() {
154 | 				return this.getPosition(2, 'horizontal', 'left')
155 | 			},
156 | 			horizontalRight() {
157 | 				return this.getPosition(2, 'horizontal', 'right')
158 | 			}
159 | 		},
160 | 		watch: {
161 | 			pattern(newValue, oldValue) {
162 | 				//console.log(JSON.stringify(newValue))
163 | 				this.styles = Object.assign({}, this.styles, newValue)
164 | 			}
165 | 		},
166 | 		created() {
167 | 			this.isShow = this.show
168 | 			if (this.top === 0) {
169 | 				this.fabShow = true
170 | 			}
171 | 			// 初始化样式
172 | 			this.styles = Object.assign({}, this.styles, this.pattern)
173 | 		},
174 | 		methods: {
175 | 			_onClick() {
176 | 				this.$emit('fabClick')
177 | 				if (!this.popMenu) {
178 | 					return
179 | 				}
180 | 				this.isShow = !this.isShow
181 | 			},
182 | 			open() {
183 | 				this.isShow = true
184 | 			},
185 | 			close() {
186 | 				this.isShow = false
187 | 			},
188 | 			/**
189 | 			 * 按钮点击事件
190 | 			 */
191 | 			_onItemClick(index, item) {
192 | 				this.$emit('trigger', {
193 | 					index,
194 | 					item
195 | 				})
196 | 			},
197 | 			/**
198 | 			 * 获取 位置信息
199 | 			 */
200 | 			getPosition(types, paramA, paramB) {
201 | 				if (types === 0) {
202 | 					return this.horizontal === paramA && this.vertical === paramB
203 | 				} else if (types === 1) {
204 | 					return this.direction === paramA && this.vertical === paramB
205 | 				} else if (types === 2) {
206 | 					return this.direction === paramA && this.horizontal === paramB
207 | 				} else {
208 | 					return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
209 | 				}
210 | 			}
211 | 		}
212 | 	}
213 | </script>
214 | 
215 | <style lang="scss" scoped>
216 | 	.uni-fab {
217 | 		position: fixed;
218 | 		/* #ifndef APP-NVUE */
219 | 		display: flex;
220 | 		/* #endif */
221 | 		justify-content: center;
222 | 		align-items: center;
223 | 		z-index: 10;
224 | 	}
225 | 
226 | 	.uni-fab--active {
227 | 		opacity: 1;
228 | 	}
229 | 
230 | 	.uni-fab--leftBottom {
231 | 		left: 5px;
232 | 		bottom: 20px;
233 | 		/* #ifdef H5 */
234 | 		bottom: calc(20px + var(--window-bottom));
235 | 		/* #endif */
236 | 		padding: 10px;
237 | 	}
238 | 
239 | 	.uni-fab--leftTop {
240 | 		left: 5px;
241 | 		top: 30px;
242 | 		/* #ifdef H5 */
243 | 		top: calc(30px + var(--window-top));
244 | 		/* #endif */
245 | 		padding: 10px;
246 | 	}
247 | 
248 | 	.uni-fab--rightBottom {
249 | 		right: 5px;
250 | 		bottom: 20px;
251 | 		/* #ifdef H5 */
252 | 		bottom: calc(20px + var(--window-bottom));
253 | 		/* #endif */
254 | 		padding: 10px;
255 | 	}
256 | 
257 | 	.uni-fab--rightTop {
258 | 		right: 5px;
259 | 		top: 30px;
260 | 		/* #ifdef H5 */
261 | 		top: calc(30px + var(--window-top));
262 | 		/* #endif */
263 | 		padding: 10px;
264 | 	}
265 | 
266 | 	.uni-fab__circle {
267 | 		position: fixed;
268 | 		/* #ifndef APP-NVUE */
269 | 		display: flex;
270 | 		/* #endif */
271 | 		justify-content: center;
272 | 		align-items: center;
273 | 		width: 55px;
274 | 		height: 55px;
275 | 		background-color: #3c3e49;
276 | 		border-radius: 55px;
277 | 		z-index: 11;
278 | 	}
279 | 
280 | 	.uni-fab__circle--leftBottom {
281 | 		left: 15px;
282 | 		bottom: 30px;
283 | 		/* #ifdef H5 */
284 | 		bottom: calc(30px + var(--window-bottom));
285 | 		/* #endif */
286 | 	}
287 | 
288 | 	.uni-fab__circle--leftTop {
289 | 		left: 15px;
290 | 		top: 40px;
291 | 		/* #ifdef H5 */
292 | 		top: calc(40px + var(--window-top));
293 | 		/* #endif */
294 | 	}
295 | 
296 | 	.uni-fab__circle--rightBottom {
297 | 		right: 15px;
298 | 		bottom: 30px;
299 | 		/* #ifdef H5 */
300 | 		bottom: calc(30px + var(--window-bottom));
301 | 		/* #endif */
302 | 	}
303 | 
304 | 	.uni-fab__circle--rightTop {
305 | 		right: 15px;
306 | 		top: 40px;
307 | 		/* #ifdef H5 */
308 | 		top: calc(40px + var(--window-top));
309 | 		/* #endif */
310 | 	}
311 | 
312 | 	.uni-fab__circle--left {
313 | 		left: 0;
314 | 	}
315 | 
316 | 	.uni-fab__circle--right {
317 | 		right: 0;
318 | 	}
319 | 
320 | 	.uni-fab__circle--top {
321 | 		top: 0;
322 | 	}
323 | 
324 | 	.uni-fab__circle--bottom {
325 | 		bottom: 0;
326 | 	}
327 | 
328 | 	.uni-fab__plus {
329 | 		font-weight: bold;
330 | 	}
331 | 
332 | 	.fab-circle-v {
333 | 		position: absolute;
334 | 		width: 3px;
335 | 		height: 31px;
336 | 		left: 26px;
337 | 		top: 12px;
338 | 		background-color: white;
339 | 		transform: rotate(0deg);
340 | 		transition: transform 0.3s;
341 | 	}
342 | 
343 | 	.fab-circle-h {
344 | 		position: absolute;
345 | 		width: 31px;
346 | 		height: 3px;
347 | 		left: 12px;
348 | 		top: 26px;
349 | 		background-color: white;
350 | 		transform: rotate(0deg);
351 | 		transition: transform 0.3s;
352 | 	}
353 | 
354 | 	.uni-fab__plus--active {
355 | 		transform: rotate(135deg);
356 | 	}
357 | 
358 | 	.uni-fab__content {
359 | 		/* #ifndef APP-NVUE */
360 | 		box-sizing: border-box;
361 | 		display: flex;
362 | 		/* #endif */
363 | 		flex-direction: row;
364 | 		border-radius: 55px;
365 | 		overflow: hidden;
366 | 		transition-property: width, height;
367 | 		transition-duration: 0.2s;
368 | 		width: 55px;
369 | 		border-color: #DDDDDD;
370 | 		border-width: 1rpx;
371 | 		border-style: solid;
372 | 	}
373 | 
374 | 	.uni-fab__content--other-platform {
375 | 		border-width: 0px;
376 | 		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
377 | 	}
378 | 
379 | 	.uni-fab__content--left {
380 | 		justify-content: flex-start;
381 | 	}
382 | 
383 | 	.uni-fab__content--right {
384 | 		justify-content: flex-end;
385 | 	}
386 | 
387 | 	.uni-fab__content--flexDirection {
388 | 		flex-direction: column;
389 | 		justify-content: flex-end;
390 | 	}
391 | 
392 | 	.uni-fab__content--flexDirectionStart {
393 | 		flex-direction: column;
394 | 		justify-content: flex-start;
395 | 	}
396 | 
397 | 	.uni-fab__content--flexDirectionEnd {
398 | 		flex-direction: column;
399 | 		justify-content: flex-end;
400 | 	}
401 | 
402 | 	.uni-fab__item {
403 | 		/* #ifndef APP-NVUE */
404 | 		display: flex;
405 | 		/* #endif */
406 | 		flex-direction: column;
407 | 		justify-content: center;
408 | 		align-items: center;
409 | 		width: 55px;
410 | 		height: 55px;
411 | 		opacity: 0;
412 | 		transition: opacity 0.2s;
413 | 	}
414 | 
415 | 	.uni-fab__item--active {
416 | 		opacity: 1;
417 | 	}
418 | 
419 | 	.uni-fab__item-image {
420 | 		width: 25px;
421 | 		height: 25px;
422 | 		margin-bottom: 3px;
423 | 	}
424 | 
425 | 	.uni-fab__item-text {
426 | 		color: #FFFFFF;
427 | 		font-size: 12px;
428 | 	}
429 | 
430 | 	.uni-fab__item--first {
431 | 		width: 55px;
432 | 	}
433 | </style>
434 | 


--------------------------------------------------------------------------------
/components/ListCell/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 
  4 | 		<view class="mix-list-cell" :class="border" @click="eventClick" hover-class="cell-hover"  :hover-stay-time="50">
  5 | 			<text
  6 | 				v-if="icon"
  7 | 				class="icon"
  8 | 				:style="[{
  9 | 					color: iconColor,
 10 | 				}]"
 11 | 				:class="icon"
 12 | 			></text>
 13 | 			<text class="margin-left-xs cell-tit clamp">{{title}}</text>
 14 | 			<text v-if="tips" class="cell-tip">{{tips}}</text>
 15 | 			<text class="icon icon-right text-gray"
 16 | 				:class="typeList[navigateType]"
 17 | 			></text>
 18 | 		</view>
 19 | 
 20 | 	</view>
 21 | </template>
 22 | 
 23 | <script>
 24 | 	/**
 25 | 	 *  简单封装了下， 应用范围比较狭窄，可以在此基础上进行扩展使用
 26 | 	 *  比如加入image， iconSize可控等
 27 | 	 */
 28 | 	export default {
 29 | 		data() {
 30 | 			return {
 31 | 				typeList: {
 32 | 					left: 'icon-zuo',
 33 | 					right: 'icon-you',
 34 | 					up: 'icon-shang',
 35 | 					down: 'icon-xia'
 36 | 				},
 37 | 			}
 38 | 		},
 39 | 		props: {
 40 | 			icon: {
 41 | 				type: String,
 42 | 				default: ''
 43 | 			},
 44 | 			title: {
 45 | 				type: String,
 46 | 				default: '标题'
 47 | 			},
 48 | 			tips: {
 49 | 				type: String,
 50 | 				default: ''
 51 | 			},
 52 | 			navigateType: {
 53 | 				type: String,
 54 | 				default: 'right'
 55 | 			},
 56 | 			border: {
 57 | 				type: String,
 58 | 				default: 'b-b'
 59 | 			},
 60 | 			hoverClass: {
 61 | 				type: String,
 62 | 				default: 'cell-hover'
 63 | 			},
 64 | 			iconColor: {
 65 | 				type: String,
 66 | 				default: '#333'
 67 | 			}
 68 | 		},
 69 | 		methods: {
 70 | 			eventClick(){
 71 | 				this.$emit('eventClick');
 72 | 			}
 73 | 		},
 74 | 	}
 75 | </script>
 76 | 
 77 | <style lang='scss' scoped>
 78 | 
 79 | 	.icon .mix-list-cell.b-b:after{
 80 | 		left: 90upx;
 81 | 	}
 82 | 	.mix-list-cell{
 83 | 		display:flex;
 84 | 		align-items:center;
 85 | 		padding: 20upx $page-row-spacing;
 86 | 		line-height:60upx;
 87 | 		position:relative;
 88 | 
 89 | 		&.cell-hover{
 90 | 			background:#fafafa;
 91 | 		}
 92 | 		&.b-b:after{
 93 | 			left: 30upx;
 94 | 		}
 95 | 
 96 | 		.cell-icon{
 97 | 			align-self:center;
 98 | 			width:56upx;
 99 | 			max-height:60upx;
100 | 			font-size:38upx;
101 | 		}
102 | 		.cell-more{
103 | 			align-self: center;
104 | 			font-size:30upx;
105 | 			color:$font-color-base;
106 | 			margin-left:$uni-spacing-row-sm;
107 | 		}
108 | 		.cell-tit{
109 | 			flex: 1;
110 | 			font-size: $font-base;
111 | 			color: $font-color-dark;
112 | 			margin-right:10upx;
113 | 		}
114 | 		.cell-tip{
115 | 			font-size: $font-sm+2upx;
116 | 			color: $font-color-light;
117 | 		}
118 | 	}
119 | </style>
120 | 


--------------------------------------------------------------------------------
/components/LoadMore/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-load-more">
  3 | 		<view class="uni-load-more__img" v-show="status === 'loading' && showIcon">
  4 | 			<view class="load1">
  5 | 				<view :style="{background:color}"></view>
  6 | 				<view :style="{background:color}"></view>
  7 | 				<view :style="{background:color}"></view>
  8 | 				<view :style="{background:color}"></view>
  9 | 			</view>
 10 | 			<view class="load2">
 11 | 				<view :style="{background:color}"></view>
 12 | 				<view :style="{background:color}"></view>
 13 | 				<view :style="{background:color}"></view>
 14 | 				<view :style="{background:color}"></view>
 15 | 			</view>
 16 | 			<view class="load3">
 17 | 				<view :style="{background:color}"></view>
 18 | 				<view :style="{background:color}"></view>
 19 | 				<view :style="{background:color}"></view>
 20 | 				<view :style="{background:color}"></view>
 21 | 			</view>
 22 | 		</view>
 23 | 		<text class="uni-load-more__text" :style="{color:color}">{{status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore)}}</text>
 24 | 	</view>
 25 | </template>
 26 | 
 27 | <script>
 28 | 	export default {
 29 | 		name: "load-more",
 30 | 		props: {
 31 | 			status: {
 32 | 				//上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
 33 | 				type: String,
 34 | 				default: 'more'
 35 | 			},
 36 | 			showIcon: {
 37 | 				type: Boolean,
 38 | 				default: true
 39 | 			},
 40 | 			color: {
 41 | 				type: String,
 42 | 				default: "#777777"
 43 | 			},
 44 | 			contentText: {
 45 | 				type: Object,
 46 | 				default () {
 47 | 					return {
 48 | 						contentdown: "",
 49 | 						contentrefresh: "正在加载...",
 50 | 						contentnomore: "没有更多数据了"
 51 | 					};
 52 | 				}
 53 | 			}
 54 | 		},
 55 | 		data() {
 56 | 			return {}
 57 | 		}
 58 | 	}
 59 | </script>
 60 | 
 61 | <style scoped>
 62 | 	@charset "UTF-8";
 63 | 
 64 | 	.uni-load-more {
 65 | 		/*background-color: #f1f1f1;*/
 66 | 		display: flex;
 67 | 		flex-direction: row;
 68 | 		height: 80upx;
 69 | 		align-items: center;
 70 | 		justify-content: center
 71 | 	}
 72 | 
 73 | 	.uni-load-more__text {
 74 | 		font-size: 28upx;
 75 | 		color: #999
 76 | 	}
 77 | 
 78 | 	.uni-load-more__img {
 79 | 		height: 24px;
 80 | 		width: 24px;
 81 | 		margin-right: 10px
 82 | 	}
 83 | 
 84 | 	.uni-load-more__img>view {
 85 | 		position: absolute
 86 | 	}
 87 | 
 88 | 	.uni-load-more__img>view view {
 89 | 		width: 6px;
 90 | 		height: 2px;
 91 | 		border-top-left-radius: 1px;
 92 | 		border-bottom-left-radius: 1px;
 93 | 		background: #f1f1f1;
 94 | 		position: absolute;
 95 | 		opacity: .2;
 96 | 		transform-origin: 50%;
 97 | 		animation: load 1.56s ease infinite
 98 | 	}
 99 | 
100 | 	.uni-load-more__img>view view:nth-child(1) {
101 | 		transform: rotate(90deg);
102 | 		top: 2px;
103 | 		left: 9px
104 | 	}
105 | 
106 | 	.uni-load-more__img>view view:nth-child(2) {
107 | 		transform: rotate(180deg);
108 | 		top: 11px;
109 | 		right: 0
110 | 	}
111 | 
112 | 	.uni-load-more__img>view view:nth-child(3) {
113 | 		transform: rotate(270deg);
114 | 		bottom: 2px;
115 | 		left: 9px
116 | 	}
117 | 
118 | 	.uni-load-more__img>view view:nth-child(4) {
119 | 		top: 11px;
120 | 		left: 0
121 | 	}
122 | 
123 | 	.load1,
124 | 	.load2,
125 | 	.load3 {
126 | 		height: 24px;
127 | 		width: 24px
128 | 	}
129 | 
130 | 	.load2 {
131 | 		transform: rotate(30deg)
132 | 	}
133 | 
134 | 	.load3 {
135 | 		transform: rotate(60deg)
136 | 	}
137 | 
138 | 	.load1 view:nth-child(1) {
139 | 		animation-delay: 0s
140 | 	}
141 | 
142 | 	.load2 view:nth-child(1) {
143 | 		animation-delay: .13s
144 | 	}
145 | 
146 | 	.load3 view:nth-child(1) {
147 | 		animation-delay: .26s
148 | 	}
149 | 
150 | 	.load1 view:nth-child(2) {
151 | 		animation-delay: .39s
152 | 	}
153 | 
154 | 	.load2 view:nth-child(2) {
155 | 		animation-delay: .52s
156 | 	}
157 | 
158 | 	.load3 view:nth-child(2) {
159 | 		animation-delay: .65s
160 | 	}
161 | 
162 | 	.load1 view:nth-child(3) {
163 | 		animation-delay: .78s
164 | 	}
165 | 
166 | 	.load2 view:nth-child(3) {
167 | 		animation-delay: .91s
168 | 	}
169 | 
170 | 	.load3 view:nth-child(3) {
171 | 		animation-delay: 1.04s
172 | 	}
173 | 
174 | 	.load1 view:nth-child(4) {
175 | 		animation-delay: 1.17s
176 | 	}
177 | 
178 | 	.load2 view:nth-child(4) {
179 | 		animation-delay: 1.3s
180 | 	}
181 | 
182 | 	.load3 view:nth-child(4) {
183 | 		animation-delay: 1.43s
184 | 	}
185 | 
186 | 	@-webkit-keyframes load {
187 | 		0% {
188 | 			opacity: 1
189 | 		}
190 | 
191 | 		100% {
192 | 			opacity: .2
193 | 		}
194 | 	}
195 | </style>
196 | 


--------------------------------------------------------------------------------
/components/Loading/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view class="cu-load load-modal" v-if="show">
 3 |         <image src="/static/logo.png" mode="aspectFit"></image>
 4 |     </view>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         name: "Loading",
10 |         data() {
11 |             return {
12 |                 show: true
13 |             };
14 |         }
15 |     }
16 | </script>
17 | 
18 | <style scoped>
19 | 
20 | </style>
21 | 


--------------------------------------------------------------------------------
/components/ProductList/BoxLayout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="good-list">
  3 |         <view v-for="(item, index) in list" :key="index" @click="navToDetailPage(item)" class="good-item">
  4 |             <view class="image-wrapper">
  5 |                 <image :src="item.mainPic" lazy-load mode="aspectFill"></image>
  6 |             </view>
  7 |             <view class="product-title">
  8 |                 <!--#ifndef MP-WEIXIN || MP-QQ-->
  9 |                 <text :class="{'tm':item.shopType===1,'tb':item.shopType===0}"></text>
 10 |                 <!-- #endif -->
 11 |                 <text class="title-text clamp">{{item.title}}</text>
 12 |             </view>
 13 |             <view class="product-price">
 14 |                 <text style="font-size: 20upx;">券后</text>
 15 |                 <text style="font-size: 20upx;color:red">￥</text>
 16 |                 <text class="price-text">{{item.actualPrice}}</text>
 17 |             </view>
 18 |             <view class="label-box">
 19 |                 <text class="label" v-if="item.brand === 1">{{item.brandName}}</text>
 20 |                 <!-- <text class="label" v-if="item.yunfeixian === 1">包运费</text> -->
 21 |                 <text class="label" v-if="item.activityType === 2">淘抢购</text>
 22 |                 <text class="label" v-if="item.activityType === 3">聚划算</text>
 23 |                 <text class="juan" v-if="item.couponPrice>0"><text class="text">劵</text>{{item.couponPrice}}元</text>
 24 |             </view>
 25 |             <view class="salse">
 26 |                 <view class="text">30天销量:{{item.monthSales}}</view>
 27 |                 <view class="text" v-if="item.couponReceiveNum>0">领券量:{{item.couponReceiveNum}}</view>
 28 |             </view>
 29 |         </view>
 30 |     </view>
 31 | </template>
 32 | 
 33 | <script>
 34 |     export default {
 35 |         props: {
 36 |             list: {
 37 |                 type: Array,
 38 |                 default: []
 39 |             },
 40 |         },
 41 |         data() {
 42 |             return {}
 43 |         },
 44 |         methods: {
 45 |             //详情页
 46 |             navToDetailPage(item) {
 47 |                 uni.navigateTo({
 48 |                     url: `/pages/product/product?goodsId=${item.goodsId}`
 49 |                 })
 50 |             }
 51 |         }
 52 |     }
 53 | </script>
 54 | 
 55 | <style lang="scss" scoped>
 56 |     .good-list{
 57 |         display:flex;
 58 |         flex-wrap:wrap;
 59 |         padding: 0 30upx;
 60 |         background: #fff;
 61 |         padding-top: 5px;
 62 |         .good-item{
 63 |             display:flex;
 64 |             flex-direction: column;
 65 |             width: 48%;
 66 |             padding-bottom: 40upx;
 67 |             &:nth-child(2n+1){
 68 |                 margin-right: 4%;
 69 |             }
 70 |         }
 71 |         .image-wrapper{
 72 |             width: 100%;
 73 |             height: 330upx;
 74 |             border-radius: 3px;
 75 |             overflow: hidden;
 76 |             image{
 77 |                 width: 100%;
 78 |                 height: 100%;
 79 |                 opacity: 1;
 80 |             }
 81 |         }
 82 | 
 83 |         .product-title {
 84 |             color: #666;
 85 |             display: flex;
 86 |             align-items: center;
 87 | 
 88 |             .label-top {
 89 |                 position: relative;
 90 |                 z-index: 1;
 91 |                 zoom: 1;
 92 |                 top: 2px;
 93 |             }
 94 | 
 95 |             .title-text {
 96 |                 font-size: $font-sm;
 97 |                 color: $font-color-dark;
 98 |                 line-height: 60upx;
 99 |             }
100 | 
101 |         }
102 | 
103 |         .product-price {
104 |             color: #666;
105 |             .price-text {
106 |                 font-size: $font-lg;
107 |                 font-weight: 500;
108 |                 color: $uni-color-primary;
109 |                 line-height: 1;
110 |             }
111 |         }
112 | 
113 |         .label-box {
114 |             .label {
115 |                 height: 14px;
116 |                 border-radius: 2px;
117 |                 font-size: 9.5px;
118 |                 font-weight: 400;
119 |                 padding: 0 3px;
120 |                 margin-right: 5px;
121 |                 display: inline-block;
122 |                 line-height: 14px;
123 |                 vertical-align: middle;
124 |                 border: 1px solid rgba(255, 1, 55, .55);
125 |                 color: #FF0137;
126 |             }
127 | 
128 |             .juan {
129 |                 height: 14px;
130 |                 background: linear-gradient(90deg,#ff8873 0,#ff4f4f 100%);
131 |                 border-radius: 2px;
132 |                 padding: 0 5px 0 1px;
133 |                 font-size: 9.5px;
134 |                 font-weight: 400;
135 |                 color: #fff;
136 |                 line-height: 14px;
137 |                 display: inline-block;
138 |                 position: relative;
139 |                 z-index: 1;
140 |                 zoom: 1;
141 |                 top: 0;
142 |                 vertical-align: middle;
143 | 
144 |                 .text {
145 |                     background: #fff;
146 |                     border-radius: 1px 0 0 1px;
147 |                     color: #FE3A33;
148 |                     margin: auto 5px auto 0;
149 |                     min-width: 12px;
150 |                     max-width: 12px;
151 |                     min-height: 12px;
152 |                     max-height: 12px;
153 |                     display: inline-block;
154 |                     line-height: 12px;
155 |                     text-align: center;
156 |                 }
157 |             }
158 | 
159 |         }
160 | 
161 |         .salse {
162 |             display: flex;
163 |             justify-content: space-between;
164 |             font-size: 14px;
165 |             margin: 0!important;
166 |             .text {
167 |                 font-size: 10px;
168 |                 font-weight: 400;
169 |                 color: #888;
170 |             }
171 |         }
172 | 
173 |     }
174 | </style>
175 | 


--------------------------------------------------------------------------------
/components/ProductList/HorizontalLayout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="cart-list">
  3 |         <block v-for="(item, index) in list" :key="item.id">
  4 |             <view class="cart-item solid-bottom" @tap="navToDetailPage(item)">
  5 |                 <view class="image-wrapper2">
  6 |                     <view class="top___nr1M_">
  7 |                         <view style="font-size: 16upx">TOP</view>
  8 |                         <view style="font-size: 14upx">{{index+1}}</view>
  9 |                     </view>
 10 |                     <image :src="item.mainPic || item.marketingMainPic"
 11 |                            :class="[item.loaded]"
 12 |                            mode="aspectFill"
 13 |                            lazy-load
 14 |                            @load="onImageLoad('list', index)"
 15 |                            @error="onImageError('list', index)"
 16 |                     ></image>
 17 |                 </view>
 18 |                 <view class="item-right">
 19 |                     <text class="clamp title">{{item.dtitle}}</text>
 20 |                     <view>
 21 |                         <view class="flex align-center justify-between">
 22 |                             <view>
 23 |                                 <text class="text-grey text-xs">券后：</text>
 24 |                                 <text class="price text-price text-red">{{item.actualPrice}}</text>
 25 |                             </view>
 26 |                             <text class="juan"><text class="text">劵</text>{{item.couponPrice - 0}}元</text>
 27 |                         </view>
 28 |                         <view class="salse">
 29 |                             <view class="text">30天销量:{{item.monthSales}}</view>
 30 |                             <view class="text">领券量:{{item.couponReceiveNum}}</view>
 31 |                         </view>
 32 |                         <view class="margin-top-sm text-xs padding-top-xs padding-bottom-xs padding-left-xs two-hour">
 33 |                             近2小时疯抢
 34 |                             <text class="text-orange margin-left-xs margin-right-xs amount">{{item.twoHoursSales}}</text>件
 35 |                         </view>
 36 | 
 37 |                     </view>
 38 |                 </view>
 39 | 
 40 |             </view>
 41 |         </block>
 42 |     </view>
 43 | </template>
 44 | 
 45 | <script>
 46 | export default {
 47 |     props: {
 48 |         list: {
 49 |             type: Array,
 50 |             default: []
 51 |         }
 52 |     },
 53 |     data() {
 54 |         return {}
 55 |     },
 56 |     methods: {
 57 |         //详情页
 58 |         navToDetailPage(item) {
 59 |             uni.navigateTo({
 60 |                 url: `/pages/product/product?goodsId=${item.goodsId}`
 61 |             })
 62 |         },
 63 |         onImageLoad(key, index) {
 64 |             // this.$set(this[key][index], 'loaded', 'loaded');
 65 |         },
 66 |         onImageError(key, index) {
 67 |             // this[key][index].image = '/static/errorImage.jpg';
 68 |         }
 69 |     }
 70 | }
 71 | </script>
 72 | 
 73 | 
 74 | <style lang="scss" scoped>
 75 |     .cart-item{
 76 |         display: flex;
 77 |         position: relative;
 78 |         padding: 20upx 40upx;
 79 |         background-color: white;
 80 |         .image-wrapper2{
 81 |             width: 200upx;
 82 |             height: 200upx;
 83 |             flex-shrink: 0;
 84 |             position:relative;
 85 |             image{
 86 |                 width: 100%;
 87 |                 height: 100%;
 88 |                 border-radius: 8upx;
 89 |             }
 90 | 
 91 |             .top___nr1M_ {
 92 |                 z-index: 50;
 93 |                 width: 40upx;
 94 |                 height: 50upx;
 95 |                 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAA0CAMAAADCKvr4AAABrVBMVEUAAAD/AAD/f3//Zmb/gGb/b2T/emT/aWH/eGH/f2n/Zmb/fGb/hmX/mmv/oWv/c2f/eWf/a2L/eWL/Z2P/gGf/aWX/fmX/cWT/d2T/e2X/amT/b2T/eGT/aWP/e2X/dmT/dmb/dGX/d2X/bWP/e2X/g2b/hmf/nGn/cGX/eGX/a2T/e2X/ZmT/f2X/dGX/d2X/bmT/eGX/Z2T/fWb/aGT/fGX/cmX/eGX/hGb/nGj/bGP/emb/gmb/hWf/nGj/aGT/gGb/cGT/eGX/Z2T/fmb/aWP/emX/ZmP/Z2P/Z2T/aGP/aGT/aWP/aWT/amT/a2T/bGT/bWT/bmT/b2T/cGT/cWT/cmT/c2T/c2X/dGT/dGX/dWT/dWX/dmT/dmX/d2T/d2X/eGX/eWX/emX/e2X/fGX/fWX/fmX/f2X/gGX/gGb/gWX/gWb/gmX/gmb/g2X/g2b/hGX/hGb/hWb/hmb/h2b/iGb/iWb/imb/i2b/jGb/jWb/jWf/jmb/jmf/j2b/j2f/kGb/kGf/kWb/kWf/kmf/k2f/lGf/lWf/lmf/l2f/mGf/mWf/mmf/m2fu0pAeAAAAR3RSTlMAAQQKChcXIiIiIyMmJiYqKjk5Pj5JSU9PXV51dYODioqLi5qara2tsbG/v8DAysrW1tzc4eHo6O7u8fHx8fH29/r6+/v+/tE6UUEAAALTSURBVEjHlZbLil1FFIa/ZUpyAW9tOoegImYmOgg+gW/gyKlv5GsFHCUDCQ5tpQ2dQ7c2KIJx/b+Dql2X3UG0zmhXrb1qrf+y9gnefnj4CmNs2k+RIQth0/e/u/jl93jr86+9i8YZiYRp0W37yfe3PvlmjTa2ERLs0vjDF+XQt+opCiOhrYot1mEd4tu6Nd2ZkQjtC5RtlXHVtqtQzE3WAyWhKLWGKUeQZG8Sg7FwOMky34exW93LpVuFLvOJbW8A9miwnWGEmbLXF8QNAJFqbjy3mqEp94asZdOiXUbmGFR6ajXDFqrPpXOkSk5DoxckktF8K0ZYe8rBtkIKxfbccW9IecdDZJCo3deQychI0TgZ0RlZC9zeLmzRcEPIGVlx7wIstk3WC9c2M8SaG5fWZo8e6sFbO6P9YoUqwSwmSUJzdMNdZCNhBRF10Xdd4lLrYzYfqvxq50rkNwiE7VkpkbJCU17b4HBZNNXulCLJOXejXpPeh6HUFTgJDlkULXpn09UCYM1t06ztQV2GquR2nk+EVcbrYNS0NmhvZrWI1Kb3gbs2Aa4zqfKw6Z1u1T3cXdxa9F7r3SbjMktUZTz0vk3BKrVVVRixXTnjLtaJRLPO5OHiLojVUH02RsZoZ8PdEhnchHtkNrQ5Q4YIcke7yUCRY+5U3FOxzMaGe6IQORmy1G6wbsKtWsxsp0LHdc5bVbLyUHEXiv5NZMhNkdFhHXOmz9f1RB6VDCaKpvk6GwonWjIYU3L+NnfcZdUiZ5OACnrNvHt67Xc+i6nEhnsUkV4+/Tw/Xv0GnJ2cfsw6CK0ilip+fPHrSwFwfX129t7Dk0nGyPHlp9N/hKfHl38xrzcfnD6q5wpLf5bLTtsPF1dX7Nar8/Ozk8MpdbBxGfcfP8L4p/Or49+8ft06vPvBHdl+9Sx48NEXPLu4/IN/W/feP9z38ecjEHfv8B/W7dv87/UPTd+XB6c88FYAAAAASUVORK5CYII=) no-repeat 50%;
 96 |                 background-size: 60upx 50upx;
 97 |                 position: absolute;
 98 |                 top: 0;
 99 |                 left: 0;
100 |                 display: -webkit-flex;
101 |                 display: -ms-flexbox;
102 |                 display: flex;
103 |                 -webkit-flex-direction: column;
104 |                 -ms-flex-direction: column;
105 |                 flex-direction: column;
106 |                 -webkit-align-items: center;
107 |                 -ms-flex-align: center;
108 |                 align-items: center;
109 |                 color: #fff;
110 |             }
111 |         }
112 |         .item-right{
113 |             display:flex;
114 |             flex-direction: column;
115 |             flex: 1;
116 |             justify-content: space-between;
117 |             overflow: hidden;
118 |             position:relative;
119 |             padding-left: 30upx;
120 |             .title,.price{
121 |                 font-size:$font-base + 2upx;
122 |                 height: 40upx;
123 |                 line-height: 40upx;
124 |             }
125 |             .attr{
126 |                 font-size: $font-sm + 2upx;
127 |                 color: $font-color-light;
128 |                 height: 50upx;
129 |                 line-height: 50upx;
130 |             }
131 |             .price{
132 |                 height: 50upx;
133 |                 line-height:50upx;
134 |             }
135 |         }
136 | 
137 |         .juan {
138 |             height: 14px;
139 |             background: linear-gradient(90deg,#ff8873 0,#ff4f4f 100%);
140 |             border-radius: 2px;
141 |             padding: 0 5px 0 1px;
142 |             font-size: 9.5px;
143 |             font-weight: 400;
144 |             color: #fff;
145 |             line-height: 14px;
146 |             display: inline-block;
147 |             position: relative;
148 |             z-index: 1;
149 |             zoom: 1;
150 |             top: 0;
151 |             vertical-align: middle;
152 | 
153 |             .text {
154 |                 background: #fff;
155 |                 border-radius: 1px 0 0 1px;
156 |                 color: #FE3A33;
157 |                 margin: auto 5px auto 0;
158 |                 min-width: 12px;
159 |                 max-width: 12px;
160 |                 min-height: 12px;
161 |                 max-height: 12px;
162 |                 display: inline-block;
163 |                 line-height: 12px;
164 |                 text-align: center;
165 |             }
166 |         }
167 | 
168 |         .salse {
169 |             display: flex;
170 |             justify-content: space-between;
171 |             font-size: 14px;
172 |             margin: 0!important;
173 |             .text {
174 |                 font-size: 10px;
175 |                 font-weight: 400;
176 |                 color: #888;
177 |             }
178 |         }
179 | 
180 |         .quan-msg {
181 |             line-height: 200upx;
182 |             top: 0;
183 |             height: 100%;
184 |             position: absolute;
185 |             zoom: 1;
186 |             z-index: 5;
187 |             left: 0;
188 |             width: 100%;
189 |             background: rgba(0,0,0,.5);
190 |             color: #fff;
191 |             text-align: center;
192 |         }
193 | 
194 |         .two-hour{
195 |             background: #ffeee6;
196 |             border-radius: 5px;
197 |             color: #893c11;
198 | 
199 |             .amount {
200 |                 font-size: 24upx;
201 |             }
202 |         }
203 | 
204 |     }
205 | 
206 | 
207 | </style>
208 | 


--------------------------------------------------------------------------------
/components/ProductList/HorizontalLayout2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view class="product-list">
 3 |     <view class="product">
 4 |       <view class="image">
 5 |         <image mode="widthFix" src="https://gju2.alicdn.com/tps/i3/2206474208919/O1CN01NlKcu12Fkx8eYx8pU_!!0-item_pic.jpg_310x310.jpg_.webp" class="loaded"></image>
 6 |       </view>
 7 |       <view class="info">
 8 |         <view class="title"></view>
 9 |         <view class="tag"></view>
10 |         <view class="desc"></view>
11 |         <view class="toolbar">
12 | 
13 |         </view>
14 |       </view>
15 |     </view>
16 |   </view>
17 | </template>
18 | 
19 | <script>
20 |   export default {
21 |     props: {
22 |       list: {
23 |         type: Array,
24 |         default: []
25 |       }
26 |     },
27 |     data() {
28 |       return {}
29 |     },
30 |     methods: {
31 |       //详情页
32 |       navToDetailPage(item) {
33 |         uni.navigateTo({
34 |           url: `/pages/product/product?goodsId=${item.goodsId}`
35 |         })
36 |       }
37 |     }
38 |   }
39 | </script>
40 | 
41 | 
42 | <style lang="scss" scoped>
43 | 
44 | </style>
45 | 


--------------------------------------------------------------------------------
/components/ProductList/HorizontalScrollLayout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="flex padding-left-xs">
  3 |     <view v-for="(item, index) in list" :key="index" @tap="itemTap(item)" class="good-item">
  4 |       <view class="image-wrapper">
  5 |         <image :src="item.mainPic" lazy-load mode="aspectFill"></image>
  6 |       </view>
  7 |       <view class="product-title">
  8 |         <!--#ifndef MP-WEIXIN || MP-QQ-->
  9 |         <text :class="{'tm':item.shopType===1,'tb':item.shopType===0}"></text>
 10 |         <!-- #endif -->
 11 |         <text class="title-text clamp">{{item.title}}</text>
 12 |       </view>
 13 |       <view class="product-price">
 14 |         <text style="font-size: 20upx;" v-if="item.couponPrice !== '0'">券后</text>
 15 |         <text class="text-price text-red">{{item.actualPrice}}</text>
 16 |       </view>
 17 |       <view class="label-box">
 18 |         <text class="label" v-if="item.brand === 1">{{item.brandName}}</text>
 19 |         <text class="label" v-if="item.activityType === 2">淘抢购</text>
 20 |         <text class="label" v-if="item.activityType === 3">聚划算</text>
 21 |         <text class="juan" v-if="item.couponPrice !== '0'"><text class="text">劵</text>{{item.couponPrice}}元</text>
 22 |       </view>
 23 |     </view>
 24 |   </view>
 25 | </template>
 26 | 
 27 | <script>
 28 |   export default {
 29 |     name: "HorizontalScrollLayout",
 30 |     props: {
 31 |       list: {
 32 |         type: Array,
 33 |         default:() => []
 34 |       }
 35 |     },
 36 |     data() {
 37 |       return {
 38 |       }
 39 |     },
 40 |     methods: {
 41 |       itemTap(item) {
 42 |         this.$emit('itemtap', item);
 43 |       }
 44 |     }
 45 |   }
 46 | </script>
 47 | 
 48 | <style scoped lang="scss">
 49 |   .good-item{
 50 |     display:flex;
 51 |     flex-direction: column;
 52 |     width: 35%;
 53 |     padding-bottom: 40upx;
 54 |     margin-right: 15upx;
 55 |   }
 56 |   .image-wrapper{
 57 |     width: 100%;
 58 |     height: 330upx;
 59 |     border-radius: 3px;
 60 |     overflow: hidden;
 61 |     image{
 62 |       width: 100%;
 63 |       height: 100%;
 64 |       opacity: 1;
 65 |     }
 66 |   }
 67 |   .product-price {
 68 |     color: #666;
 69 |     .price-text {
 70 |       font-size: 28upx;
 71 |       font-weight: 500;
 72 |       color: $uni-color-primary;
 73 |       line-height: 1;
 74 |     }
 75 |   }
 76 |   .product-title {
 77 |     color: #666;
 78 |     display: flex;
 79 |     align-items: center;
 80 | 
 81 |     .label-top {
 82 |       position: relative;
 83 |       z-index: 1;
 84 |       zoom: 1;
 85 |       top: 2px;
 86 |     }
 87 | 
 88 |     .title-text {
 89 |       font-size: $font-sm;
 90 |       color: $font-color-dark;
 91 |       line-height: 60upx;
 92 |     }
 93 | 
 94 |   }
 95 |   .label-box {
 96 |     .label {
 97 |       height: 14px;
 98 |       border-radius: 2px;
 99 |       font-size: 9.5px;
100 |       font-weight: 400;
101 |       padding: 0 3px;
102 |       margin-right: 5px;
103 |       display: inline-block;
104 |       line-height: 14px;
105 |       vertical-align: middle;
106 |       border: 1px solid rgba(255, 1, 55, .55);
107 |       color: #FF0137;
108 |     }
109 | 
110 |     .juan {
111 |       height: 14px;
112 |       background: linear-gradient(90deg,#ff8873 0,#ff4f4f 100%);
113 |       border-radius: 2px;
114 |       padding: 0 5px 0 1px;
115 |       font-size: 9.5px;
116 |       font-weight: 400;
117 |       color: #fff;
118 |       line-height: 14px;
119 |       display: inline-block;
120 |       position: relative;
121 |       z-index: 1;
122 |       zoom: 1;
123 |       top: 0;
124 |       vertical-align: middle;
125 | 
126 |       .text {
127 |         background: #fff;
128 |         border-radius: 1px 0 0 1px;
129 |         color: #FE3A33;
130 |         margin: auto 5px auto 0;
131 |         min-width: 12px;
132 |         max-width: 12px;
133 |         min-height: 12px;
134 |         max-height: 12px;
135 |         display: inline-block;
136 |         line-height: 12px;
137 |         text-align: center;
138 |       }
139 |     }
140 |   }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/components/Refresh/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<scroll-view style="height: 100%;"
  3 | 				:scroll-y="allow_scroll_y"
  4 | 				@scroll="scroll"
  5 | 				@scrolltolower="scrolltolower">
  6 | 		<view class="refresh-moudle"
  7 | 			@touchstart="touchStart($event)"
  8 | 			@touchmove="touchMove($event)"
  9 | 			@touchend="touchEnd($event)"
 10 | 			:style="{transform: 'translate3d(0,' + top + 'px, 0)'}">
 11 | 		  <view class="pull-refresh">
 12 | 			<slot name="pull-refresh">
 13 | 			  <view class="down-tip" v-if="dropDownState===1">
 14 | 				<image v-if="dropDownInfo.downImg" class="down-img" :src="dropDownInfo.downImg"></image>
 15 | 				<view class="down-text">{{dropDownInfo.downText}}</view>
 16 | 			  </view>
 17 | 			  <view class="up-tip" v-if="dropDownState===2">
 18 | 				<image v-if="dropDownInfo.upImg" class="up-img" :src="dropDownInfo.upImg"></image>
 19 | 				<view class="up-text">{{dropDownInfo.upText}}</view>
 20 | 			  </view>
 21 | 			  <view class="refresh-tip" v-if="dropDownState===3">
 22 | 				<image v-if="dropDownInfo.refreshImg" class="refresh-img" :src="dropDownInfo.refreshImg"></image>
 23 | 				<view class="refresh-text">{{dropDownInfo.refreshText}}</view>
 24 | 			  </view>
 25 | 			</slot>
 26 | 		  </view>
 27 | 		  <slot></slot>
 28 | 		  <uni-load-more :status="pullupLoadingType"></uni-load-more>
 29 | 		</view>
 30 | 	</scroll-view>
 31 | </template>
 32 | 
 33 | <script>
 34 | 	import uniLoadMore from '@/components/LoadMore';
 35 | 	export default {
 36 | 		name: "ygcRefresh",
 37 | 		components: {
 38 | 			uniLoadMore
 39 | 		},
 40 | 		//属性
 41 | 		props: {
 42 | 			pullupLoadingType: {
 43 | 				type: String,
 44 | 				default: 'more'
 45 | 			}
 46 | 		},
 47 | 		data () {
 48 | 			return {
 49 | 			  defaultOffset: 40, // 下拉偏移高度, 如果要改建议相应的修改.releshMoudle的margin-top和.down-tip, .up-tip, .refresh-tip的height
 50 | 			  top: 0,
 51 | 			  startY: 0,
 52 | 			  isDropDown: false, // 是否下拉
 53 | 			  isRefreshing: false, // 是否正在刷新
 54 | 			  dropDownState: 1, // 显示1:下拉可以刷新, 2:松开立即刷新, 3:正在刷新数据中...
 55 | 			  dropDownInfo: {
 56 | 				downText: '下拉可以刷新',
 57 | 				downImg: '/static/refresh/xiangxia.png',
 58 | 				upText: '松开立即刷新',
 59 | 				upImg: '/static/refresh/xiangxia.png',
 60 | 				refreshText: '正在刷新数据...',
 61 | 				refreshImg: '/static/refresh/loading.png'
 62 | 			  },
 63 | 			  scrollTop: 0,
 64 | 			  allow_scroll_y: true ,//1.0.2版新增代码，解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题
 65 | 			  allowTouchMove: true //1.0.6版新增代码,控制是否允许touchMove事件
 66 | 			}
 67 | 		},
 68 | 		//组件生命周期
 69 | 		created:function(e){
 70 | 		},
 71 | 		methods: {
 72 | 			scrolltolower() {
 73 | 				this.$emit('scrolltolower');
 74 | 			},
 75 | 			scroll: function(e) {
 76 | 				this.$nextTick(function() {
 77 | 					this.scrollTop = e.detail.scrollTop;
 78 | 				});
 79 | 			},
 80 | 			/**
 81 | 			 * 触摸开始，手指点击屏幕时
 82 | 			 * @param {object} e Touch 对象包含的属性
 83 | 			 */
 84 | 			touchStart (e) {
 85 | 				// console.log('startPageY:',e.changedTouches[0].pageY);
 86 | 				this.startY = e.changedTouches[0].pageY;
 87 | 				this.startScrollTop = this.scrollTop;
 88 | 
 89 | 				this.allowTouchMove = true; //1.0.6版新增代码,控制是否允许touchMove事件
 90 | 			},
 91 | 
 92 | 			/**
 93 | 			 * 接触点改变，滑动时
 94 | 			 * @param {object} e Touch 对象包含的属性
 95 | 			 */
 96 | 			touchMove (e) {
 97 | 				//1.0.6版新增代码,控制是否允许touchMove事件
 98 | 				if(!this.allowTouchMove) {
 99 | 					return;
100 | 				}
101 | 
102 | 				//1.0.2版新增代码，解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题
103 | 				this.$nextTick(function() {
104 | 					if(this.scrollTop<0) {
105 | 						this.allow_scroll_y = false;
106 | 					} else {
107 | 						this.allow_scroll_y = true;
108 | 					}
109 | 				});
110 | 
111 | 				if(this.scrollTop <= 0) {
112 | 					if (e.changedTouches[0].pageY > this.startY) {
113 | 						// 下拉
114 | 						this.isDropDown = true
115 | 						if (!this.isRefreshing) {
116 | 						  // 获取拉取的间隔差  当前移动的y点          初始的y点        初始顶部距离
117 | 						  let diff = e.changedTouches[0].pageY - this.startY -  this.startScrollTop;
118 | 						  this.top = Math.pow(diff, 0.8) + (this.dropDownState === 3 ? this.defaultOffset : 0);
119 | 						  if (this.top >= this.defaultOffset) {
120 | 							// console.log('top:',this.top);
121 | 							this.dropDownState = 2;
122 | 							e.preventDefault();
123 | 						  } else {
124 | 							this.dropDownState = 1;
125 | 							// 去掉会导致ios无法刷新
126 | 							e.preventDefault();
127 | 						  }
128 | 						}
129 | 					} else {
130 | 						this.isDropDown = false;
131 | 						this.dropDownState = 1;
132 | 					}
133 | 				}
134 | 			},
135 | 
136 | 			/**
137 | 			 * 触摸结束，手指离开屏幕时
138 | 			 * @param {object} e Touch 对象包含的属性
139 | 			 */
140 | 			touchEnd (e) {
141 | 			  //1.0.2版新增代码，解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题
142 | 			  this.$nextTick(function() {
143 | 				  this.allow_scroll_y = true;
144 | 			  });
145 | 
146 | 			  if (this.isDropDown && !this.isRefreshing) {
147 | 				if (this.top >= this.defaultOffset) {
148 | 				  // do refresh
149 | 				  this.isRefreshing = true;
150 | 				  this.refresh();
151 | 				} else {
152 | 				  // cancel refresh
153 | 				  this.isRefreshing = false;
154 | 				  this.isDropDown = false;
155 | 				  this.dropDownState = 1;
156 | 				  this.top = 0;
157 | 				}
158 | 			  }
159 | 			},
160 | 
161 | 			/**
162 | 			 * 刷新
163 | 			 */
164 | 			refresh () {
165 | 			  this.dropDownState = 3;
166 | 			  this.top = this.defaultOffset;
167 | 			  // 延时1200毫秒结束正在刷新动画，给用户一个刷新的感觉，或者可以直接去掉本组件正在刷新的动画状态，配合官方uni-load-more组件的正在刷新动画
168 | 			  this.$emit('onRefresh');
169 | 			  setTimeout(() => {
170 | 				this.refreshDone();
171 | 			  }, 1200)
172 | 
173 | 			  /****好吧，粗暴点，就是把上面的代码注释掉，用下面的代码*****/
174 | 			  // this.$emit('onRefresh');
175 | 			  // this.refreshDone();
176 | 
177 | 			},
178 | 
179 | 			/**
180 | 			 * 刷新完成
181 | 			 */
182 | 			refreshDone () {
183 | 			  this.isRefreshing = false;
184 | 			  this.isDropDown = false;
185 | 			  this.dropDownState = 1;
186 | 			  this.top = 0;
187 | 			}
188 | 		}
189 | 	}
190 | </script>
191 | 
192 | <!-- Add "scoped" attribute to limit CSS to this component only -->
193 | <style lang="scss" scoped>
194 | 	$height: 40px;
195 | 	.refresh-moudle {
196 | 		width: 100%;
197 | 		margin-top: -$height;
198 | 		-webkit-overflow-scrolling: touch; /* ios5+ */
199 | 		.pull-refresh {
200 | 			width: 100%;
201 | 			color: #999;
202 | 			transition-duration: 200ms;
203 | 			font-size: 28upx;
204 | 			.down-tip,
205 | 			.up-tip,
206 | 			.refresh-tip {
207 | 				display: flex;
208 | 				align-items: center;
209 | 				justify-content: center;
210 | 				height: $height;
211 | 			}
212 | 			.down-img,
213 | 			.up-img,
214 | 			.refresh-img{
215 | 				width: 50upx;
216 | 				height: 50upx;
217 | 				margin-right: 30upx;
218 | 			}
219 | 			.down-img {
220 | 			  transform: rotate(0deg);
221 | 			  animation: anticlockwise 0.8s ease;
222 | 			}
223 | 			@keyframes anticlockwise {
224 | 			  0% {
225 | 				transform: rotate(-180deg);
226 | 			  }
227 | 			  100% {
228 | 				transform: rotate(0deg);
229 | 			  }
230 | 			}
231 | 			.up-img {
232 | 			  transform: rotate(180deg);
233 | 			  animation: clockwise 0.8s ease;
234 | 			}
235 | 			@keyframes clockwise {
236 | 			  0% {
237 | 				transform: rotate(0deg);
238 | 			  }
239 | 			  100% {
240 | 				transform: rotate(-180deg);
241 | 			  }
242 | 			}
243 | 			.refresh-img {
244 | 			  animation: rotating 1.5s linear infinite;
245 | 			}
246 | 			@keyframes rotating {
247 | 			  0% {
248 | 				transform: rotate(0deg);
249 | 			  }
250 | 			  100% {
251 | 				transform: rotate(1turn);
252 | 			  }
253 | 			}
254 | 		}
255 | 	}
256 | 	.uni-load-more {
257 | 		display: flex;
258 | 		flex-direction: row;
259 | 		height: 80upx;
260 | 		align-items: center;
261 | 		justify-content: center
262 | 	}
263 | </style>
264 | 


--------------------------------------------------------------------------------
/components/Share/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent"
  3 | 		:style="{backgroundColor: backgroundColor}"
  4 | 	>
  5 | 		<view
  6 | 			class="mask-content"
  7 | 			@click.stop.prevent="stopPrevent"
  8 | 			:style="[{
  9 | 				height: config.height,
 10 | 				transform: transform
 11 | 			}]"
 12 | 		>
 13 | 			<scroll-view class="view-content" scroll-y>
 14 | 				<view class="share-header">
 15 | 					分享到
 16 | 				</view>
 17 | 				<view class="share-list">
 18 | 					<view
 19 | 						v-for="(item, index) in shareList" :key="index"
 20 | 						class="share-item"
 21 | 						@click="shareToFriend(item.text)"
 22 | 					>
 23 | 						<image :src="item.icon" mode=""></image>
 24 | 						<text>{{item.text}}</text>
 25 | 					</view>
 26 | 				</view>
 27 | 			</scroll-view>
 28 | 			<view class="bottom b-t" @click="toggleMask">取消</view>
 29 | 		</view>
 30 | 	</view>
 31 | </template>
 32 | 
 33 | <script>
 34 | 	export default {
 35 | 		data() {
 36 | 			return {
 37 | 				transform: 'translateY(50vh)',
 38 | 				timer: 0,
 39 | 				backgroundColor: 'rgba(0,0,0,0)',
 40 | 				show: false,
 41 | 				config: {},
 42 | 			};
 43 | 		},
 44 | 		props:{
 45 | 			contentHeight:{
 46 | 				type: Number,
 47 | 				default: 0
 48 | 			},
 49 | 			//是否是tabbar页面
 50 | 			hasTabbar:{
 51 | 				type: Boolean,
 52 | 				default: false
 53 | 			},
 54 | 			shareList:{
 55 | 				type: Array,
 56 | 				default: function(){
 57 | 					return [];
 58 | 				}
 59 | 			}
 60 | 		},
 61 | 		created() {
 62 | 			const height = uni.upx2px(this.contentHeight) + 'px';
 63 | 			this.config = {
 64 | 				height: height,
 65 | 				transform: `translateY(${height})`,
 66 | 				backgroundColor: 'rgba(0,0,0,.4)',
 67 | 			}
 68 | 			this.transform = this.config.transform;
 69 | 		},
 70 | 		methods:{
 71 | 			toggleMask(){
 72 | 				//防止高频点击
 73 | 				if(this.timer == 1){
 74 | 					return;
 75 | 				}
 76 | 				this.timer = 1;
 77 | 				setTimeout(()=>{
 78 | 					this.timer = 0;
 79 | 				}, 500)
 80 | 
 81 | 				if(this.show){
 82 | 					this.transform = this.config.transform;
 83 | 					this.backgroundColor = 'rgba(0,0,0,0)';
 84 | 					setTimeout(()=>{
 85 | 						this.show = false;
 86 | 						this.hasTabbar && uni.showTabBar();
 87 | 					}, 200)
 88 | 					return;
 89 | 				}
 90 | 
 91 | 				this.show = true;
 92 | 				//等待mask重绘完成执行
 93 | 				if(this.hasTabbar){
 94 | 					uni.hideTabBar({
 95 | 						success: () => {
 96 | 							setTimeout(()=>{
 97 | 								this.backgroundColor = this.config.backgroundColor;
 98 | 								this.transform = 'translateY(0px)';
 99 | 							}, 10)
100 | 						}
101 | 					});
102 | 				}else{
103 | 					setTimeout(()=>{
104 | 						this.backgroundColor = this.config.backgroundColor;
105 | 						this.transform = 'translateY(0px)';
106 | 					}, 10)
107 | 				}
108 | 			},
109 | 			//防止冒泡和滚动穿透
110 | 			stopPrevent(){},
111 | 			//分享操作
112 | 			shareToFriend(type){
113 | 				this.$api.msg(`分享给${type}`);
114 | 				this.toggleMask();
115 | 			},
116 | 		}
117 | 	}
118 | </script>
119 | 
120 | <style lang='scss' scoped>
121 | 	.mask{
122 | 		position:fixed;
123 | 		left: 0;
124 | 		top: 0;
125 | 		right: 0;
126 | 		bottom: 0;
127 | 		display:flex;
128 | 		justify-content: center;
129 | 		align-items: flex-end;
130 | 		z-index: 998;
131 | 		transition: .3s;
132 | 		.bottom{
133 | 			position:absolute;
134 | 			left: 0;
135 | 			bottom: 0;
136 | 			display:flex;
137 | 			justify-content: center;
138 | 			align-items: center;
139 | 			width: 100%;
140 | 			height: 90upx;
141 | 			background: #fff;
142 | 			z-index: 9;
143 | 			font-size: $font-base + 2upx;
144 | 			color: $font-color-dark;
145 | 		}
146 | 	}
147 | 
148 | 	.mask-content{
149 | 		width: 100%;
150 | 		height: 580upx;
151 | 		transition: .3s;
152 | 		background: #fff;
153 | 		&.has-bottom{
154 | 			padding-bottom: 90upx;
155 | 		}
156 | 		.view-content{
157 | 			height: 100%;
158 | 		}
159 | 	}
160 | 	.share-header{
161 | 		height: 110upx;
162 | 		font-size: $font-base+2upx;
163 | 		color: font-color-dark;
164 | 		display:flex;
165 | 		align-items:center;
166 | 		justify-content: center;
167 | 		padding-top: 10upx;
168 | 		&:before, &:after{
169 | 			content: '';
170 | 			width: 240upx;
171 | 			heighg: 0;
172 | 			border-top: 1px solid $border-color-base;
173 | 			transform: scaleY(.5);
174 | 			margin-right: 30upx;
175 | 		}
176 | 		 &:after{
177 | 			 margin-left: 30upx;
178 | 			 margin-right: 0;
179 | 		 }
180 | 	}
181 | 	.share-list{
182 | 		display:flex;
183 | 		flex-wrap: wrap;
184 | 	}
185 | 	.share-item{
186 | 		min-width: 33.33%;
187 | 		display:flex;
188 | 		flex-direction: column;
189 | 		justify-content: center;
190 | 		align-items: center;
191 | 		height: 180upx;
192 | 		image{
193 | 			width: 80upx;
194 | 			height: 80upx;
195 | 			margin-bottom: 16upx;
196 | 		}
197 | 		text{
198 | 			font-size: $font-base;
199 | 			color: $font-color-base;
200 | 		}
201 | 	}
202 | </style>
203 | 


--------------------------------------------------------------------------------
/components/SortNavbar/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="navbar" :style="{position:headerPosition,top:headerTop}">
  3 | 		<view class="nav-item" :class="{current: filterSort === 0}" @click="sortClick(0)">
  4 | 			人气
  5 | 		</view>
  6 | 		<view class="nav-item" :class="{current: filterSort === 2}" @click="sortClick(2)">
  7 | 			销量
  8 | 		</view>
  9 | 		<view class="nav-item" :class="{current: filterSort === 1}" @click="sortClick(1)">
 10 | 			最新
 11 | 		</view>
 12 | 		<view class="nav-item" :class="{current: filterSort === 10}" @click="sortClick(10)">
 13 | 			<text>价格</text>
 14 | 			<view class="p-box">
 15 | 				<text :class="{active: priceSort === 6 && filterSort === 10}" class="yticon icon icon-triangleupfill"></text>
 16 | 				<text :class="{active: priceSort === 5 && filterSort === 10}" class="yticon margin-top-ss icon icon-triangledownfill"></text>
 17 | 			</view>
 18 | 		</view>
 19 | 	</view>
 20 | </template>
 21 | 
 22 | <script>
 23 | 	export default {
 24 | 		name: "SortNavbar",
 25 | 		props: {
 26 |             headerTop: {
 27 |                 type: String,
 28 | 				default: ()=> {
 29 | 				    return '0px'
 30 | 				}
 31 | 			}
 32 | 		},
 33 | 		data() {
 34 | 			return {
 35 |                 filterSort: 0,
 36 |                 priceSort: 0,
 37 |                 headerPosition:"fixed"
 38 | 			}
 39 | 		},
 40 |         methods: {
 41 |             sortClick(sort){
 42 |                 if(this.filterSort === sort && sort !== 10){
 43 |                     return;
 44 |                 }
 45 |                 this.filterSort = sort;
 46 |                 if(sort === 10){
 47 |                     this.priceSort = this.priceSort === 5 ? 6: 5;
 48 |                     this.$emit('sort',  this.priceSort);
 49 |                 }else{
 50 |                     this.priceSort = 0;
 51 |                     this.$emit('sort', sort);
 52 |                 }
 53 |             }
 54 |         }
 55 | 	}
 56 | </script>
 57 | 
 58 | <style lang="scss" scoped>
 59 | 	.navbar{
 60 | 		position: fixed;
 61 | 		left: 0;
 62 | 		top: var(--window-top);
 63 | 		display: flex;
 64 | 		width: 100%;
 65 | 		height: 80upx;
 66 | 		background: #fff;
 67 | 		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
 68 | 		z-index: 10;
 69 | 		.nav-item{
 70 | 			flex: 1;
 71 | 			display: flex;
 72 | 			justify-content: center;
 73 | 			align-items: center;
 74 | 			height: 100%;
 75 | 			font-size: 30upx;
 76 | 			color: $font-color-dark;
 77 | 			position: relative;
 78 | 			&.current{
 79 | 				color: #e54d42;
 80 | 				&:after{
 81 | 					content: '';
 82 | 					position: absolute;
 83 | 					left: 50%;
 84 | 					bottom: 0;
 85 | 					transform: translateX(-50%);
 86 | 					width: 120upx;
 87 | 					height: 0;
 88 | 					border-bottom: 4upx solid $base-color;
 89 | 				}
 90 | 			}
 91 | 		}
 92 | 		.p-box{
 93 | 			display: flex;
 94 | 			flex-direction: column;
 95 | 			.yticon{
 96 | 				display: flex;
 97 | 				align-items: center;
 98 | 				justify-content: center;
 99 | 				width: 30upx;
100 | 				height: 12upx;
101 | 				line-height: 1;
102 | 				margin-left: 4upx;
103 | 				font-size: 11px;
104 | 				color: #d8d8d8;
105 | 				&.active{
106 | 					color: $base-color;
107 | 				}
108 | 			}
109 | 			.xia{
110 | 				transform: scaleY(-1);
111 | 			}
112 | 		}
113 | 		.cate-item{
114 | 			display: flex;
115 | 			justify-content: center;
116 | 			align-items: center;
117 | 			height: 100%;
118 | 			width: 80upx;
119 | 			position: relative;
120 | 			font-size: 44upx;
121 | 			&:after{
122 | 				content: '';
123 | 				position: absolute;
124 | 				left: 0;
125 | 				top: 50%;
126 | 				transform: translateY(-50%);
127 | 				border-left: 1px solid #ddd;
128 | 				width: 0;
129 | 				height: 36upx;
130 | 			}
131 | 		}
132 | 	}
133 | 
134 | 	.margin-top-ss {
135 | 		margin-top: 5upx;
136 | 	}
137 | </style>
138 | 


--------------------------------------------------------------------------------
/components/SortNavbar2/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="navbar" :style="{position:headerPosition,top:headerTop}">
  3 |     <view class="nav-item" :class="{current: filterSort === 'tk_total_sales_des'}" @click="sortClick('tk_total_sales_des')">
  4 |       人气
  5 |     </view>
  6 |     <view class="nav-item" :class="{current: filterSort === 'total_sales_des'}" @click="sortClick('total_sales_des')">
  7 |       销量
  8 |     </view>
  9 |     <view class="nav-item" :class="{current: filterSort.indexOf('price')>-1}" @click="sortClick('price')">
 10 |       <text>价格</text>
 11 |       <view class="p-box">
 12 |         <text :class="{active: priceSort === 'asc' && filterSort.indexOf('price')>-1}" class="yticon icon icon-triangleupfill"></text>
 13 |         <text :class="{active: priceSort === 'des' && filterSort.indexOf('price')>-1}"
 14 |               class="yticon margin-top-ss icon icon-triangledownfill"></text>
 15 |       </view>
 16 |     </view>
 17 |     <view class="nav-item" @click="clickCoupon">
 18 |       <text class="icon" :class="hasCoupon?'icon-squarecheckfill text-red':'icon-square text-grey'"></text>
 19 |       <text>优惠券</text>
 20 |     </view>
 21 |   </view>
 22 | </template>
 23 | 
 24 | <script>
 25 |   export default {
 26 |     name: "SortNavbar",
 27 |     props: {
 28 |       headerTop: {
 29 |         type: String,
 30 |         default: () => {
 31 |           return '0px'
 32 |         }
 33 |       }
 34 |     },
 35 |     data() {
 36 |       return {
 37 |         headerPosition: "fixed",
 38 |         filterSort: 'tk_total_sales_des',
 39 |         hasCoupon: false,
 40 |         priceSort: 'asc'
 41 |       }
 42 |     },
 43 |     methods: {
 44 |       clickCoupon() {
 45 |         this.hasCoupon = !this.hasCoupon
 46 |         this.sortClick(this.filterSort, 2)
 47 |       },
 48 |       sortClick(sort, type=1) {
 49 |         if (this.filterSort === sort && sort !== 'price' && type===1) {
 50 |           return;
 51 |         }
 52 |         if (sort === 'price') {
 53 |           this.priceSort = this.priceSort === 'des' ? 'asc' : 'des';
 54 |           this.filterSort = sort + '_' + this.priceSort;
 55 |           this.$emit('sort', {
 56 |             sort: this.filterSort,
 57 |             hasCoupon: this.hasCoupon
 58 |           });
 59 |         } else {
 60 |           this.filterSort = sort;
 61 |           this.$emit('sort', {sort: this.filterSort, hasCoupon: this.hasCoupon});
 62 |         }
 63 |       }
 64 |     }
 65 |   }
 66 | </script>
 67 | 
 68 | <style lang="scss" scoped>
 69 | 	.navbar{
 70 | 		position: fixed;
 71 | 		left: 0;
 72 | 		top: var(--window-top);
 73 | 		display: flex;
 74 | 		width: 100%;
 75 | 		height: 80upx;
 76 | 		background: #fff;
 77 | 		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
 78 | 		z-index: 10;
 79 | 		.nav-item{
 80 | 			flex: 1;
 81 | 			display: flex;
 82 | 			justify-content: center;
 83 | 			align-items: center;
 84 | 			height: 100%;
 85 | 			font-size: 30upx;
 86 | 			color: $font-color-dark;
 87 | 			position: relative;
 88 | 			&.current{
 89 |         color: #e54d42;
 90 | 				&:after{
 91 | 					content: '';
 92 | 					position: absolute;
 93 | 					left: 50%;
 94 | 					bottom: 0;
 95 | 					transform: translateX(-50%);
 96 | 					width: 120upx;
 97 | 					height: 0;
 98 | 					border-bottom: 4upx solid $base-color;
 99 | 				}
100 | 			}
101 | 		}
102 | 		.p-box{
103 | 			display: flex;
104 | 			flex-direction: column;
105 | 			.yticon{
106 | 				display: flex;
107 | 				align-items: center;
108 | 				justify-content: center;
109 | 				width: 30upx;
110 | 				height: 12upx;
111 | 				line-height: 1;
112 | 				margin-left: 4upx;
113 | 				font-size: 11px;
114 | 				color: #d8d8d8;
115 | 				&.active{
116 | 					color: $base-color;
117 | 				}
118 | 			}
119 | 			.xia{
120 | 				transform: scaleY(-1);
121 | 			}
122 | 		}
123 | 		.cate-item{
124 | 			display: flex;
125 | 			justify-content: center;
126 | 			align-items: center;
127 | 			height: 100%;
128 | 			width: 80upx;
129 | 			position: relative;
130 | 			font-size: 44upx;
131 | 			&:after{
132 | 				content: '';
133 | 				position: absolute;
134 | 				left: 0;
135 | 				top: 50%;
136 | 				transform: translateY(-50%);
137 | 				border-left: 1px solid #ddd;
138 | 				width: 0;
139 | 				height: 36upx;
140 | 			}
141 | 		}
142 | 	}
143 | 
144 | 	.margin-top-ss {
145 | 		margin-top: 5upx;
146 | 	}
147 | </style>
148 | 


--------------------------------------------------------------------------------
/components/Tab/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <scroll-view scroll-x class="bg-white nav solid-bottom" scroll-with-animation :scroll-left="scrollLeft">
 3 |     <view class="cu-item"
 4 |           :class="index===tabCur?'text-red cur':''"
 5 |           v-for="(item,index) in items"
 6 |           :key="index"
 7 |           @tap="tabSelect(index, item)">
 8 |       {{item[textProp]}}
 9 |     </view>
10 |   </scroll-view>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     data() {
16 |       return {
17 |         tabCur: 0,
18 |         scrollLeft: 0
19 |       }
20 |     },
21 |     props: {
22 |       items: {
23 |         type: Array,
24 |         default: []
25 |       },
26 |       textProp: {
27 |         type: String,
28 |         default: 'text'
29 |       }
30 |     },
31 |     methods: {
32 |       tabSelect(index, item) {
33 |         this.tabCur = index;
34 |         this.scrollLeft = (index - 1) * 60
35 |         this.$emit('tabselect', index, item);
36 |       }
37 |     }
38 |   }
39 | </script>
40 | 
41 | <style scoped>
42 | </style>
43 | 


--------------------------------------------------------------------------------
/components/Tab2/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <scroll-view scroll-x class="bg-white nav solid-bottom" scroll-with-animation :scroll-left="scrollLeft">
 3 |     <view :class="index===tabCur?'text-red cur':''" class="cu-item"
 4 |           v-for="(item,index) in items"
 5 |           :key="index"
 6 |           @tap="tabSelect(index, item)">
 7 |       <view class="text-center text-xl">{{item[textProp]+':00'}}</view>
 8 |       <view class="text-center">{{item[textStatus] | formatStatus}}</view>
 9 |     </view>
10 |   </scroll-view>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     filters: {
16 |       formatStatus(value) {
17 |         if (value === 'before') {
18 |           return '已开抢'
19 |         } else if (value === 'current') {
20 |           return '正在抢购'
21 |         } else if (value === 'after') {
22 |           return '即将开始'
23 |         }
24 |       }
25 |     },
26 |     data() {
27 |       return {
28 |         tabCur: 0,
29 |         scrollLeft: 0
30 |       }
31 |     },
32 |     watch: {
33 |       tabCur: function (val, oldVal) {
34 |         this.scrollLeft = (val - 1) * 60
35 |       },
36 |       items: function (val, oldVal) {
37 |         console.log('=====>')
38 |         this.tabCur = val.findIndex(o => {
39 |           console.log(o[this.textStatus])
40 |           return o[this.textStatus] === 'current'
41 |         });
42 |       }
43 |     },
44 |     props: {
45 |       items: {
46 |         type: Array,
47 |         default: []
48 |       },
49 |       textProp: {
50 |         type: String,
51 |         default: 'time'
52 |       },
53 |       textStatus: {
54 |         type: String,
55 |         default: 'status'
56 |       }
57 |     },
58 |     methods: {
59 |       tabSelect(index, item) {
60 |         this.tabCur = index;
61 |         this.$emit('tabselect', index, item);
62 |       }
63 |     },
64 |   }
65 | </script>
66 | 
67 | <style scoped>
68 |   .cu-item {
69 |     height: 120upx;
70 |     line-height: 60upx !important;
71 |   }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     // APIHOST: "http://localhost:9090"
3 | }
4 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import store from './store'
 3 | import App from './App.vue'
 4 | 
 5 | import backend from './api/backend'
 6 | import cache from './utils/cache'
 7 | import mcUtils from './utils/mcUtils'
 8 | 
 9 | import TitleNav from './colorui/components/cu-custom.vue'
10 | 
11 | Vue.component('title-nav',TitleNav)
12 | 
13 | const message = (title, duration=1500, mask=false, icon='none')=>{
14 | 	//统一提示方便全局修改
15 | 	if(Boolean(title) === false){
16 | 		return;
17 | 	}
18 | 	uni.showToast({
19 | 		title,
20 | 		duration,
21 | 		mask,
22 | 		icon
23 | 	});
24 | }
25 | 
26 | Vue.config.productionTip = false
27 | Vue.prototype.$store = store;
28 | Vue.prototype.$cache = cache;
29 | Vue.prototype.$utils = mcUtils;
30 | Vue.prototype.$message = message;
31 | Vue.prototype.$api = { backend };
32 | 
33 | App.mpType = 'app'
34 | 
35 | const app = new Vue({
36 |     ...App
37 | })
38 | app.$mount()
39 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "name" : "FASHION",
  3 |     "appid" : "__UNI__AA9534D",
  4 |     "description" : "我不塑造时尚，我就是时尚",
  5 |     "versionName" : "1.6.1",
  6 |     "versionCode" : 161,
  7 |     "transformPx" : false,
  8 |     "app-plus" : {
  9 |         /* 5+App特有相关 */
 10 |         "usingComponents" : true,
 11 |         "splashscreen" : {
 12 |             "alwaysShowBeforeRender" : true,
 13 |             "waiting" : true,
 14 |             "autoclose" : true,
 15 |             "delay" : 0
 16 |         },
 17 |         "modules" : {},
 18 |         /* 模块配置 */
 19 |         "distribute" : {
 20 |             /* 应用发布信息 */
 21 |             "android" : {
 22 |                 /* android打包配置 */
 23 |                 "permissions" : [
 24 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
 25 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
 26 |                     "<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
 27 |                     "<uses-permission android:name=\"android.permission.INTERNET\"/>",
 28 |                     "<uses-permission android:name=\"android.permission.READ_SMS\"/>",
 29 |                     "<uses-permission android:name=\"android.permission.RECEIVE_SMS\"/>"
 30 |                 ],
 31 |                 "abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ],
 32 |                 "autoSdkPermissions" : false
 33 |             },
 34 |             "ios" : {},
 35 |             /* ios打包配置 */
 36 |             "sdkConfigs" : {
 37 |                 "ad" : {}
 38 |             },
 39 |             "icons" : {
 40 |                 "android" : {
 41 |                     "hdpi" : "unpackage/res/icons/72x72.png",
 42 |                     "xhdpi" : "unpackage/res/icons/96x96.png",
 43 |                     "xxhdpi" : "unpackage/res/icons/144x144.png",
 44 |                     "xxxhdpi" : "unpackage/res/icons/192x192.png"
 45 |                 },
 46 |                 "ios" : {
 47 |                     "appstore" : "unpackage/res/icons/1024x1024.png",
 48 |                     "ipad" : {
 49 |                         "app" : "unpackage/res/icons/76x76.png",
 50 |                         "app@2x" : "unpackage/res/icons/152x152.png",
 51 |                         "notification" : "unpackage/res/icons/20x20.png",
 52 |                         "notification@2x" : "unpackage/res/icons/40x40.png",
 53 |                         "proapp@2x" : "unpackage/res/icons/167x167.png",
 54 |                         "settings" : "unpackage/res/icons/29x29.png",
 55 |                         "settings@2x" : "unpackage/res/icons/58x58.png",
 56 |                         "spotlight" : "unpackage/res/icons/40x40.png",
 57 |                         "spotlight@2x" : "unpackage/res/icons/80x80.png"
 58 |                     },
 59 |                     "iphone" : {
 60 |                         "app@2x" : "unpackage/res/icons/120x120.png",
 61 |                         "app@3x" : "unpackage/res/icons/180x180.png",
 62 |                         "notification@2x" : "unpackage/res/icons/40x40.png",
 63 |                         "notification@3x" : "unpackage/res/icons/60x60.png",
 64 |                         "settings@2x" : "unpackage/res/icons/58x58.png",
 65 |                         "settings@3x" : "unpackage/res/icons/87x87.png",
 66 |                         "spotlight@2x" : "unpackage/res/icons/80x80.png",
 67 |                         "spotlight@3x" : "unpackage/res/icons/120x120.png"
 68 |                     }
 69 |                 }
 70 |             },
 71 |             "splashscreen" : {
 72 |                 "android" : {
 73 |                     "hdpi" : "/static/splash.9.png",
 74 |                     "xhdpi" : "/static/splash.9.png",
 75 |                     "xxhdpi" : "/static/splash.9.png"
 76 |                 },
 77 |                 "ios" : {
 78 |                     "iphone" : {
 79 |                         "retina55" : "/Users/huaan9527/Desktop/170券/引导页.png",
 80 |                         "retina55l" : "/Users/huaan9527/Desktop/170券/引导页.png",
 81 |                         "retina47" : "/Users/huaan9527/Desktop/170券/引导页.png",
 82 |                         "retina47l" : "/Users/huaan9527/Desktop/170券/引导页.png",
 83 |                         "portrait-896h@2x" : "/Users/huaan9527/Desktop/170券/引导页.png",
 84 |                         "landscape-896h@3x" : "/Users/huaan9527/Desktop/170券/引导页.png"
 85 |                     },
 86 |                     "storyboard" : "/Users/huaan9527/Documents/mall-app/storyboard/storyboard.zip"
 87 |                 },
 88 |                 "iosStyle" : "storyboard",
 89 |                 "androidStyle" : "default"
 90 |             }
 91 |         },
 92 |         "uniStatistics" : {
 93 |             "enable" : false
 94 |         },
 95 |         "nativePlugins" : {
 96 |             "Hs-MobMessage" : {
 97 |                 "MOBAppKey" : "",
 98 |                 "MOBAppSecret" : "",
 99 |                 "__plugin_info__" : {
100 |                     "name" : "MobSMS免费短信验证码android+ios，苹果已过审",
101 |                     "description" : "已有应用通过苹果审核，每月免费10000条，可用短信模板ID,可发送文字和语言验证码",
102 |                     "platforms" : "Android,iOS",
103 |                     "url" : "https://ext.dcloud.net.cn/plugin?id=2189",
104 |                     "android_package_name" : "com.huaan9527.mall",
105 |                     "ios_bundle_id" : "com.huaan9527.mall",
106 |                     "isCloud" : true,
107 |                     "bought" : 1,
108 |                     "pid" : "2189",
109 |                     "parameters" : {
110 |                         "MOBAppKey" : {
111 |                             "des" : "MOBAppKey",
112 |                             "key" : "MOBAppKey",
113 |                             "value" : ""
114 |                         },
115 |                         "MOBAppSecret" : {
116 |                             "des" : "MOBAppSecret",
117 |                             "key" : "MOBAppSecret",
118 |                             "value" : ""
119 |                         }
120 |                     }
121 |                 }
122 |             }
123 |         }
124 |     },
125 |     /* SDK配置 */
126 |     "quickapp" : {},
127 |     /* 快应用特有相关 */
128 |     "mp-weixin" : {
129 |         /* 小程序特有相关 */
130 |         "usingComponents" : true,
131 |         "appid" : "",
132 |         "setting" : {
133 |             "urlCheck" : true,
134 |             "es6" : true,
135 |             "postcss" : true,
136 |             "minified" : true
137 |         },
138 |         "uniStatistics" : {
139 |             "enable" : false
140 |         }
141 |     },
142 |     "mp-qq" : {
143 |         "appid" : "",
144 |         "setting" : {
145 |             "minified" : true,
146 |             "es6" : true,
147 |             "postcss" : true,
148 |             "urlCheck" : true
149 |         },
150 |         "uniStatistics" : {
151 |             "enable" : false
152 |         }
153 |     },
154 |     "mp-toutiao" : {
155 |         "appid" : "",
156 |         "setting" : {
157 |             "es6" : true,
158 |             "postcss" : true,
159 |             "minified" : true
160 |         },
161 |         "uniStatistics" : {
162 |             "enable" : false
163 |         }
164 |     },
165 |     "uniStatistics" : {
166 |         "enable" : false
167 |     },
168 |     "h5" : {
169 |         "uniStatistics" : {
170 |             "enable" : false
171 |         },
172 |         "domain" : "http://m.szjx.top",
173 |         "title" : "FASHION搭配助手",
174 |         "router" : {
175 |             "mode" : "hash"
176 |         }
177 |     },
178 |     "mp-alipay" : {
179 |         "uniStatistics" : {
180 |             "enable" : false
181 |         }
182 |     },
183 |     "mp-baidu" : {
184 |         "uniStatistics" : {
185 |             "enable" : false
186 |         }
187 |     }
188 | }
189 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "pages": [
  3 |     {
  4 |       "path": "pages/collocation/index",
  5 |       "style": {}
  6 |     },
  7 |     {
  8 |       "path": "pages/collocation/detail",
  9 |       "style": {}
 10 |     },
 11 |     {
 12 |       "path": "pages/index/index",
 13 |       "style": {
 14 |       }
 15 |     },
 16 |     {
 17 |       "path": "pages/webview/index",
 18 |       "style": {
 19 |         "navigationStyle": "default",
 20 |         "app-plus": {
 21 |           "titleNView": {
 22 |             "titleText": "加载中"
 23 |           }
 24 |         }
 25 |       }
 26 |     },
 27 |     {
 28 |       "path": "pages/nine/nine",
 29 |       "style": {
 30 |       }
 31 |     },
 32 |     {
 33 |       "path": "pages/rank/rank",
 34 |       "style": {
 35 |       }
 36 |     },
 37 |     {
 38 |       "path": "pages/halfPrice/index",
 39 |       "style": {
 40 |       }
 41 |     },
 42 |     {
 43 |       "path": "pages/product/product",
 44 |       "style": {}
 45 |     },
 46 |     {
 47 |       "path": "pages/collect/collect",
 48 |       "style": {}
 49 |     },
 50 |     {
 51 |       "path": "pages/user/user",
 52 |       "style": {}
 53 |     },
 54 |     {
 55 |       "path": "pages/public/guide",
 56 |       "style": {}
 57 |     },
 58 |     {
 59 |       "path": "pages/category/category",
 60 |       "style": {}
 61 |     },
 62 |     {
 63 |       "path": "pages/product/list",
 64 |       "style": {}
 65 |     },
 66 |     {
 67 |       "path": "pages/search/search",
 68 |       "style": {}
 69 |     },
 70 |     {
 71 |       "path": "pages/search/result",
 72 |       "style": {}
 73 |     },
 74 |     {
 75 |       "path": "pages/public/login",
 76 |       "style": {}
 77 |     },
 78 |     {
 79 |       "path": "pages/user/set",
 80 |       "style": {}
 81 |     },
 82 |     {
 83 |       "path": "pages/user/message",
 84 |       "style": {}
 85 |     }
 86 |   ],
 87 |   "globalStyle": {
 88 |     "navigationBarTextStyle": "black",
 89 |     "navigationBarTitleText": "FASHION搭配助手",
 90 |     "navigationBarBackgroundColor": "#FFFFFF",
 91 |     "backgroundColor": "#f8f8f8",
 92 |     "navigationStyle": "custom"
 93 |   },
 94 |   "tabBar": {
 95 |     "backgroundColor": "#ffffff",
 96 |     "color": "#000000",
 97 |     "selectedColor": "#000000",
 98 |     "list": [
 99 |       {
100 |         "pagePath": "pages/collocation/index",
101 |         "iconPath": "static/tab/home.png",
102 |         "text": "",
103 |         "selectedIconPath": "static/tab/home_cur.png"
104 |       },
105 |       {
106 |         "pagePath": "pages/category/category",
107 |         "iconPath": "static/tab/circle.png",
108 |         "text": "",
109 |         "selectedIconPath": "static/tab/circle_cur.png"
110 |       },
111 |       {
112 |         "pagePath": "pages/index/index",
113 |         "iconPath": "static/tab/shop.png",
114 |         "text": "",
115 |         "selectedIconPath": "static/tab/shop_cur.png"
116 |       },
117 |       {
118 |         "pagePath": "pages/user/user",
119 |         "iconPath": "static/tab/my.png",
120 |         "text": "",
121 |         "selectedIconPath": "static/tab/my_cur.png"
122 |       }
123 |     ]
124 |   }
125 | }
126 | 


--------------------------------------------------------------------------------
/pages/category/category.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="container">
  3 |     <title-nav bg-color="bg-white solid-bottom">
  4 |       <block slot="content">商品分类</block>
  5 |     </title-nav>
  6 |     <view class="VerticalBox">
  7 |       <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh)">
  8 |         <view class="cu-item"
  9 |               :class="index===tabCur?'cur':''" v-for="(item,index) in list"
 10 |               :key="index"
 11 |               @tap="TabSelect"
 12 |               :data-id="index">{{item.cname}}
 13 |         </view>
 14 |       </scroll-view>
 15 |       <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh)" :scroll-into-view="'main-'+mainCur"
 16 |                    @scroll="VerticalMain">
 17 |         <view class="padding-tlr5" v-for="(item,index) in list" :key="index" :id="'main-'+index">
 18 |           <view class="cu-bar solid-bottom bg-white justify-center">
 19 |             <view class="action">
 20 |               <text class="text">{{item.cname}}</text>
 21 |             </view>
 22 |           </view>
 23 | 
 24 |           <view class="cu-list grid col-3 no-border">
 25 |             <view class="cu-item align-center" :key="subItem.subcid" v-for="subItem in item.subcategories"
 26 |                   @tap='navToList(item.cid, subItem.subcid)'>
 27 |               <view class="cu-avatar round" :style="'background-image:url('+subItem.scpic+');'"></view>
 28 |               <text>{{subItem.subcname}}</text>
 29 |             </view>
 30 |           </view>
 31 |         </view>
 32 |       </scroll-view>
 33 |     </view>
 34 |   </view>
 35 | </template>
 36 | 
 37 | <script>
 38 |   export default {
 39 |     data() {
 40 |       return {
 41 |         list: [],
 42 |         tabCur: 0,
 43 |         mainCur: 0,
 44 |         verticalNavTop: 0,
 45 |         load: true
 46 |       };
 47 |     },
 48 |     onLoad() {
 49 |       this.loadData();
 50 |     },
 51 |     onReady() {
 52 |     },
 53 |     methods: {
 54 |       async loadData() {
 55 |         this.list = this.$cache.get('category_cached', []);
 56 |         if (this.list.length === 0) {
 57 |           let result = await this.$api.backend.getCate();
 58 |           this.list = result.data;
 59 |           this.$cache.put('category_cached', this.list, 60 * 60 * 7)
 60 |         }
 61 |       },
 62 |       navToList(cid, subcid) {
 63 |         uni.navigateTo({
 64 |           url: `/pages/product/list?subcid=${subcid}`
 65 |         })
 66 |       },
 67 |       TabSelect(e) {
 68 |         this.tabCur = e.currentTarget.dataset.id;
 69 |         this.mainCur = e.currentTarget.dataset.id;
 70 |         this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
 71 |       },
 72 |       VerticalMain(e) {
 73 |         let that = this;
 74 |         let tabHeight = 0;
 75 |         if (this.load) {
 76 |           for (let i = 0; i < this.list.length; i++) {
 77 |             let view = uni.createSelectorQuery().select("#main-" + i);
 78 |             view.fields({
 79 |               size: true
 80 |             }, data => {
 81 |               this.list[i].top = tabHeight;
 82 |               tabHeight = tabHeight + data.height;
 83 |               this.list[i].bottom = tabHeight;
 84 |             }).exec();
 85 |           }
 86 |           this.load = false
 87 |         }
 88 |         let scrollTop = e.detail.scrollTop + 10;
 89 |         for (let i = 0; i < this.list.length; i++) {
 90 |           if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
 91 |             this.verticalNavTop = (i - 1) * 50
 92 |             this.tabCur = i
 93 |             return false
 94 |           }
 95 |         }
 96 |       }
 97 |     },
 98 |   }
 99 | </script>
100 | 
101 | <style lang='scss' scoped>
102 |   page, .container {
103 |     height: 100%;
104 |     background-color: $page-color-base;
105 |   }
106 | 
107 |   .fixed {
108 |     position: fixed;
109 |     z-index: 99;
110 |   }
111 | 
112 |   .VerticalNav.nav {
113 |     width: 200upx;
114 |     white-space: initial;
115 |   }
116 | 
117 |   .VerticalNav.nav .cu-item {
118 |     width: 100%;
119 |     text-align: center;
120 |     background-color: #fff;
121 |     color: grey;
122 |     margin: 0;
123 |     border: none;
124 |     height: 50px;
125 |     line-height: 50px;
126 |     position: relative;
127 |   }
128 | 
129 |   .VerticalNav.nav .cu-item.cur {
130 |     background-color: $page-color-base;
131 |     color: #e54d42;
132 |   }
133 | 
134 |   .VerticalNav.nav .cu-item.cur::after {
135 |     content: "";
136 |     width: 6upx;
137 |     height: 90upx;
138 |     /* border-radius: 10upx 0 0 10upx; */
139 |     position: absolute;
140 |     background-color: currentColor;
141 |     top: 0;
142 |     left: 0;
143 |     bottom: 0;
144 |     margin: auto;
145 |   }
146 | 
147 |   .VerticalBox {
148 |     display: flex;
149 |   }
150 | 
151 |   .VerticalMain {
152 |     background-color: $page-color-base;
153 |     flex: 1;
154 |   }
155 | 
156 |   .padding-tlr5 {
157 |     padding-top: 5px;
158 |     padding-left: 5px;
159 |     padding-right: 5px;
160 |   }
161 | </style>
162 | 


--------------------------------------------------------------------------------
/pages/collect/collect.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="container">
  3 |         <title-nav bg-color="bg-white solid-bottom" :isBack="true">
  4 |             <block slot="content">我的收藏</block>
  5 |         </title-nav>
  6 |         <!-- 空白页 -->
  7 |         <view v-if="empty===true" class="empty">
  8 |             <view class="collect-img"></view>
  9 |             <view class="empty-tips">
 10 |                 空空如也
 11 |                 <navigator class="navigator" url="../index/index" open-type="switchTab">
 12 |                     随便逛逛>
 13 |                 </navigator>
 14 |             </view>
 15 |         </view>
 16 |         <view v-else>
 17 |             <refresh @onRefresh="onRefresh" :pullupLoadingType="loadingType">
 18 |                 <collect-list :list="list" @deleteitem="removeCollection"></collect-list>
 19 |             </refresh>
 20 |         </view>
 21 | 
 22 |     </view>
 23 | </template>
 24 | 
 25 | <script>
 26 |     import {mapGetters} from 'vuex';
 27 |     import CollectList from "./components/CollectList"
 28 |     import Refresh from '@/components/Refresh'
 29 | 
 30 |     export default {
 31 |         components: { CollectList, Refresh },
 32 |         data() {
 33 |             return {
 34 |                 loadingType: 'more',
 35 |                 empty: false,
 36 |                 hasLogin: true,
 37 |                 page: 0,
 38 |                 size: 20,
 39 |                 list: []
 40 |             };
 41 |         },
 42 |         watch:{
 43 |             //显示空白页
 44 |             list(e){
 45 |                 let empty = e.length === 0;
 46 |                 if(this.empty !== empty){
 47 |                     this.empty = empty;
 48 |                 }
 49 |             }
 50 |         },
 51 |         onLoad() {
 52 |             this.init()
 53 |         },
 54 |         onShow() {
 55 |             if(this.empty) {
 56 |                 this.init()
 57 |             }
 58 |         },
 59 |         onReachBottom(){
 60 |             this.loadData();
 61 |         },
 62 |         computed: {},
 63 |         methods: {
 64 |             init(){
 65 |                 this.page = 0
 66 |                 this.loadingType = 'loading'
 67 |                 this.list = []
 68 |                 this.loadData();
 69 |             },
 70 |             //请求数据
 71 |             async loadData(type='add'){
 72 |                 if(type === 'add'){
 73 |                     if(this.loadingType === 'nomore'){
 74 |                         return;
 75 |                     }
 76 |                     this.loadingType = 'loading';
 77 |                 }else{
 78 |                     this.loadingType = 'more'
 79 |                 }
 80 |                 if(type === 'refresh'){
 81 |                     this.page = 0;
 82 |                 }
 83 |                 this.loadingType = 'loading'
 84 |                 uni.showLoading()
 85 |                 let result = await this.$api.backend.favoriteList(this.page++, this.size)
 86 |                 if(type === 'refresh'){
 87 |                     this.list = [];
 88 |                 }
 89 |                 let list = result.data.content || []
 90 |                 this.list = this.list.concat(list)
 91 |                 this.loadingType = list.length === 0 || list.length < this.size? 'nomore':'more'
 92 |                 uni.hideLoading()
 93 |             },
 94 |             removeCollection(index, item){
 95 |                 this.list.splice(index, 1);
 96 |                 this.$api.backend.unFavoriteGoods(item.data.goodsId)
 97 |             },
 98 |             onRefresh() {
 99 |                 this.loadData('refresh');
100 |                 this.loadingType = 'loading'
101 |             }
102 |         }
103 |     }
104 | </script>
105 | 
106 | <style lang='scss' scoped>
107 |     page, .container{
108 |         background: $page-color-base;
109 |         height: 100%;
110 |         // 加上以下代码下拉刷新的体验会好一点
111 |         /* #ifdef MP-WEIXIN || APP-PLUS */
112 |         position: fixed;
113 |         left: 0;
114 |         width: 100%;
115 |         top: 0;
116 |         /* #endif */
117 |     }
118 | 
119 |     .user-collect {
120 |         text-align: center;
121 |         height: 100vh;
122 |         background-color: #fff;
123 | 
124 |         .cu-btn {
125 |             padding:15px 30px;
126 |         }
127 |     }
128 | 
129 |     .collect-img {
130 |         background: url(https://cmsstatic.ffquan.cn/wap_new/user/images/user_sc.svg) center bottom no-repeat;
131 |         width: 100%;
132 |         height: 35vh;
133 |         margin-bottom: 60upx;
134 |     }
135 | 
136 |     .empty{
137 |         position:fixed;
138 |         left: 0;
139 |         top:0;
140 |         width: 100%;
141 |         height: 100vh;
142 |         padding-bottom: 300upx;
143 |         display:flex;
144 |         justify-content: center;
145 |         flex-direction: column;
146 |         align-items:center;
147 |         background: #fff;
148 |         image{
149 |             height: 35vh;
150 |             margin-bottom: 80upx;
151 |         }
152 |         .empty-tips{
153 |             display:flex;
154 |             font-size: $font-sm+2upx;
155 |             color: $font-color-disabled;
156 |             .navigator{
157 |                 color: $uni-color-primary;
158 |                 margin-left: 16upx;
159 |             }
160 |         }
161 |     }
162 | </style>
163 | 


--------------------------------------------------------------------------------
/pages/collect/components/CollectList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="cart-list">
  3 |         <block v-for="(item, index) in list" :key="item.collectionId">
  4 |             <view class="cart-item solid-bottom" @tap="navToDetailPage(item)">
  5 |                 <view class="image-wrapper2">
  6 |                     <!--<text class="quan-msg" v-if="item.invalid === 1">券已失效</text>-->
  7 |                     <image :src="item.data.mainPic || item.data.marketingMainPic"
  8 |                            :class="[item.loaded]"
  9 |                            mode="aspectFill"
 10 |                            lazy-load
 11 |                            @load="onImageLoad('list', index)"
 12 |                            @error="onImageError('list', index)">
 13 |                     </image>
 14 |                 </view>
 15 |                 <view class="item-right">
 16 |                     <text class="clamp title">{{item.data.title}}</text>
 17 |                     <view>
 18 |                         <view class="flex align-center justify-between">
 19 |                             <view>
 20 |                                 <text class="text-grey text-xs">券后：</text>
 21 |                                 <text class="price text-price text-red">{{item.data.actualPrice}}</text>
 22 |                             </view>
 23 |                             <text class="juan" v-if="(item.data.couponPrice-0)>0"><text class="text">劵</text>{{item.data.couponPrice - 0}}元</text>
 24 |                         </view>
 25 |                         <view class="salse">
 26 |                             <view class="text">30天销量:{{item.data.monthSales}}</view>
 27 |                             <view class="text" v-if="item.data.couponReceiveNum>0">领券量:{{item.data.couponReceiveNum}}</view>
 28 |                         </view>
 29 |                         <view class="flex align-center justify-end">
 30 |                           <view class="cu-btn sm margin-top-sm">
 31 |                             <text class="icon text-lg text-black icon-delete_light" @tap.stop="deleteItem(index, item)"></text>
 32 |                           </view>
 33 |                         </view>
 34 |                        <!-- <button class="cu-btn sm bg-gradual-red margin-top-sm">
 35 |                             <text class="text-white">找相似</text>
 36 |                             <text class="icon text-sm text-white icon-delete_light" @tap.stop="deleteItem(index, item)">删除</text>
 37 |                         </button> -->
 38 |                     </view>
 39 |                 </view>
 40 | 
 41 |             </view>
 42 |         </block>
 43 |     </view>
 44 | </template>
 45 | 
 46 | <script>
 47 | export default {
 48 |     props: {
 49 |         list: {
 50 |             type: Array,
 51 |             default: []
 52 |         },
 53 |     },
 54 |     data() {
 55 |         return {}
 56 |     },
 57 |     methods: {
 58 |         //详情页
 59 |         navToDetailPage(item) {
 60 |             // if(item.invalid === 1) {
 61 |             //     return
 62 |             // }
 63 |             uni.navigateTo({
 64 |                 url: `/pages/product/product?goodsId=${item.data.goodsId}`
 65 |             })
 66 |         },
 67 |         onImageLoad(key, index) {
 68 |             this.$set(this[key][index], 'loaded', 'loaded');
 69 |         },
 70 |         onImageError(key, index) {
 71 |             this[key][index].image = '/static/errorImage.jpg';
 72 |         },
 73 |         deleteItem(index, item) {
 74 |             this.$emit('deleteitem', index, item);
 75 |         }
 76 |     }
 77 | }
 78 | </script>
 79 | 
 80 | <style lang="scss" scoped>
 81 | .cart-item{
 82 |     display: flex;
 83 |     position: relative;
 84 |     padding: 20upx 40upx;
 85 |     background-color: white;
 86 |     .image-wrapper2{
 87 |         width: 200upx;
 88 |         height: 200upx;
 89 |         flex-shrink: 0;
 90 |         position:relative;
 91 |         image{
 92 |             width: 100%;
 93 |             height: 100%;
 94 |             border-radius: 8upx;
 95 |         }
 96 |     }
 97 |     .item-right{
 98 |         display:flex;
 99 |         flex-direction: column;
100 |         flex: 1;
101 |         justify-content: space-between;
102 |         overflow: hidden;
103 |         position:relative;
104 |         padding-left: 30upx;
105 |         .title,.price{
106 |             font-size:$font-base + 2upx;
107 |             height: 40upx;
108 |             line-height: 40upx;
109 |         }
110 |         .attr{
111 |             font-size: $font-sm + 2upx;
112 |             color: $font-color-light;
113 |             height: 50upx;
114 |             line-height: 50upx;
115 |         }
116 |         .price{
117 |             height: 50upx;
118 |             line-height:50upx;
119 |         }
120 |     }
121 | 
122 |     .juan {
123 |         height: 14px;
124 |         background: linear-gradient(90deg,#ff8873 0,#ff4f4f 100%);
125 |         border-radius: 2px;
126 |         padding: 0 5px 0 1px;
127 |         font-size: 9.5px;
128 |         font-weight: 400;
129 |         color: #fff;
130 |         line-height: 14px;
131 |         display: inline-block;
132 |         position: relative;
133 |         z-index: 1;
134 |         zoom: 1;
135 |         top: 0;
136 |         vertical-align: middle;
137 | 
138 |         .text {
139 |             background: #fff;
140 |             border-radius: 1px 0 0 1px;
141 |             color: #FE3A33;
142 |             margin: auto 5px auto 0;
143 |             min-width: 12px;
144 |             max-width: 12px;
145 |             min-height: 12px;
146 |             max-height: 12px;
147 |             display: inline-block;
148 |             line-height: 12px;
149 |             text-align: center;
150 |         }
151 |     }
152 | 
153 |     .salse {
154 |         display: flex;
155 |         justify-content: space-between;
156 |         font-size: 14px;
157 |         margin: 0!important;
158 |         .text {
159 |             font-size: 10px;
160 |             font-weight: 400;
161 |             color: #888;
162 |         }
163 |     }
164 | 
165 |     .quan-msg {
166 |         line-height: 200upx;
167 |         top: 0;
168 |         height: 100%;
169 |         position: absolute;
170 |         zoom: 1;
171 |         z-index: 5;
172 |         left: 0;
173 |         width: 100%;
174 |         background: rgba(0,0,0,.5);
175 |         color: #fff;
176 |         text-align: center;
177 |     }
178 | }
179 | </style>
180 | 


--------------------------------------------------------------------------------
/pages/collocation/component/CollocationBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <scroll-view scroll-y="true">
 3 |     <view class="list">
 4 |       <view class="item" v-for="item in list" :key="item.collocationId" @tap="navToCollocation(item)">
 5 |         <image mode="widthFix" :lazy-load="true" :src="item.mainImage"></image>
 6 |         <view class="margin-top-xs text-center">
 7 |           <text class="icon icon-hotfill text-sm margin-right-xs"></text>
 8 |           <text class="text-black text-sm">{{item.appreciateCount}}</text>
 9 |         </view>
10 |       </view>
11 |     </view>
12 |   </scroll-view>
13 | </template>
14 | 
15 | <script>
16 |   export default {
17 |     name: "CollocationBox",
18 |     components: {},
19 |     props: {
20 |       list: {
21 |         type: Array,
22 |         default: ()=>[]
23 |       }
24 |     },
25 |     data() {
26 |       return {
27 |       };
28 |     },
29 |     methods: {
30 |       navToCollocation(item){
31 |         uni.navigateTo({ url: `/pages/collocation/detail?collocationId=${item.collocationId}` });
32 |       }
33 |     }
34 |   }
35 | </script>
36 | 
37 | <style lang="scss" scoped>
38 | .list {
39 |   display: flex;
40 |   flex-wrap: wrap;
41 |   padding: 20upx;
42 |   justify-content: space-around;
43 | 
44 |   .item {
45 |     width: 32%;
46 |     margin-bottom: 20upx;
47 | 
48 |     .image-wrapper{
49 |       border-radius: 3px;
50 |       overflow: hidden;
51 |       image{
52 |         opacity: 1;
53 |       }
54 |     }
55 | 
56 |   }
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/pages/collocation/component/CollocationCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view class="cu-card case" @tap="itemTap(item)">
 3 |     <view class="cu-item shadow">
 4 |       <view class="image">
 5 |         <image mode="widthFix" :src="item.mainImage"></image>
 6 |         <view class="favor-btn" @tap.stop="doAppreciate(item)">
 7 |           <text class="icon icon-appreciatefill text-xxl" :class="item.appreciate?'text-red':'text-gray'"></text>
 8 |         </view>
 9 |       </view>
10 |       <view class="solid-top flex justify-between align-center padding-top padding-left padding-right">
11 |         <view>
12 |           <text class="icon icon-attentionfill text-gray text-sm margin-right-xs"> {{item.viewCount}} 浏览</text>
13 |           <text class="padding-left icon icon-appreciatefill text-gray text-sm"> {{item.appreciateCount}} 赞</text>
14 |         </view>
15 |         <view class="text-sm">
16 |           <text class="text-grey ">{{item.formatCreatedDate}}</text>
17 |         </view>
18 |       </view>
19 |       <view class="cu-list padding-sm">
20 |         <view class="cu-item">
21 |           <view v-for="tag in item.tags" :key="tag.tagId" class='cu-tag line-gray radius padding-sm'>{{tag.name}}</view>
22 |         </view>
23 |         <view class="cu-item padding-top">
24 |           <text class="text-grey">{{item.description}}</text>
25 |         </view>
26 |       </view>
27 |     </view>
28 |   </view>
29 | </template>
30 | 
31 | <script>
32 | 
33 |   export default {
34 |     components: {},
35 |     props: {
36 |       item: {
37 |         type: Object,
38 |         default: null
39 |       },
40 |     },
41 |     data() {
42 |       return {};
43 |     },
44 |     methods: {
45 |       itemTap(item) {
46 |         this.$emit('detail', item);
47 |       },
48 |       doAppreciate(item) {
49 |         this.$emit('appreciate', item);
50 |       }
51 |     }
52 |   }
53 | </script>
54 | 
55 | <style lang="scss" scoped>
56 |   .favor-btn {
57 |     width: 40px;
58 |     height: 40px;
59 |     text-align: center;
60 |     line-height: 40px;
61 |     background-color: $page-color-base;
62 |     border-radius: 20px;
63 |     position: absolute;
64 |     right: 10px;
65 |     top: 10px;
66 |   }
67 |   .cu-tag {
68 |     margin-left: 0!important;
69 |     margin-right: 5px;
70 |     margin-top: 5px;
71 |   }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/pages/collocation/component/CollocationList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view class="list">
 3 |     <view class="column" style="margin-right: 4%">
 4 | 
 5 |       <view class="item" v-for="item in list1" :key="item.collocationId" @tap="navToCollocation(item)">
 6 |         <view class="image-wrapper">
 7 |           <image :src="item.mainImage" lazy-load mode="widthFix"></image>
 8 |         </view>
 9 |         <view class="title margin-top-xs">
10 |           <text class="title-text text-black text-sm">{{item.description}}</text>
11 |         </view>
12 |         <view class="bar margin-top-xs flex justify-between">
13 |           <view><text class="icon icon-attentionfill text-gray text-sm margin-right-xs">{{item.viewCount}}</text></view>
14 |           <view><text class="padding-left icon icon-appreciatefill text-sm" :class="item.appreciate?'text-red':'text-gray'">{{item.appreciateCount}}</text></view>
15 |         </view>
16 |       </view>
17 | 
18 |     </view>
19 | 
20 |     <view class="column">
21 |       <view class="item" v-for="item in list2" :key="item.collocationId" @tap="navToCollocation(item)">
22 |         <view class="image-wrapper">
23 |           <image :src="item.mainImage" lazy-load mode="widthFix"></image>
24 |         </view>
25 |         <view class="title margin-top-xs">
26 |           <text class="title-text text-black text-sm">{{item.description}}</text>
27 |         </view>
28 |         <view class="bar margin-top-xs flex justify-between">
29 |           <view><text class="icon icon-attentionfill text-gray text-sm margin-right-xs">{{item.viewCount}}</text></view>
30 |           <view><text class="padding-left icon icon-appreciatefill text-sm" :class="item.appreciate?'text-red':'text-gray'">{{item.appreciateCount}}</text></view>
31 |         </view>
32 |       </view>
33 |     </view>
34 | 
35 |   </view>
36 | </template>
37 | 
38 | <script>
39 |   export default {
40 |     name: "CollocationList",
41 |     components: {},
42 |     props: {
43 |       list1: {
44 |         type: Array,
45 |         default: ()=>[]
46 |       },
47 |       list2: {
48 |         type: Array,
49 |         default: ()=>[]
50 |       }
51 |     },
52 |     data() {
53 |       return {};
54 |     },
55 |     methods: {
56 |       navToCollocation(item){
57 |         uni.navigateTo({ url: `/pages/collocation/detail?collocationId=${item.collocationId}` });
58 |       }
59 |     }
60 |   }
61 | </script>
62 | 
63 | <style lang="scss" scoped>
64 | .list {
65 |   display: flex;
66 |   padding: 0 30upx;
67 | 
68 |   .column {
69 |     width: 48%;
70 |   }
71 | 
72 |   .item {
73 |     width: 100%;
74 |     margin-bottom: 40upx;
75 | 
76 |     .image-wrapper{
77 |       border-radius: 3px;
78 |       overflow: hidden;
79 |       image{
80 |         opacity: 1;
81 |       }
82 |     }
83 | 
84 |   }
85 | 
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/pages/collocation/detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<title-nav bg-color="bg-white solid-bottom" :isBack="true">
  4 | 			<block slot="content">搭配详情</block>
  5 | 		</title-nav>
  6 | 		<view class="carousel">
  7 | 			<swiper indicator-dots circular=true duration="400">
  8 | 				<swiper-item class="swiper-item" v-for="(image,index) in detail.imagePaths" :key="index">
  9 | 					<view class="image-wrapper">
 10 | 						<image :src="image" class="loaded" mode="aspectFill"></image>
 11 | 					</view>
 12 | 				</swiper-item>
 13 | 			</swiper>
 14 | 		</view>
 15 | 
 16 |     <view class="introduce">
 17 |       <view class="flex justify-between align-center">
 18 |         <view>
 19 |           <text class="icon icon-attentionfill text-gray text-sm margin-right-xs"> {{detail.viewCount}} 浏览</text>
 20 |           <text class="padding-left icon icon-appreciatefill text-sm" :class="detail.appreciate?'text-red':'text-gray'"> {{detail.appreciateCount}} 赞</text>
 21 |         </view>
 22 |         <view class="text-sm">
 23 |           <text class="text-grey ">{{detail.formatCreatedDate}}</text>
 24 |         </view>
 25 |       </view>
 26 |       <view class="describe margin-top-sm">
 27 |         <text class="text-black">{{detail.description}}</text>
 28 |       </view>
 29 |       <view class="tags margin-top-sm">
 30 |         <view v-for="tag in detail.tags" :key="tag.tagId" class='cu-tag line-gray radius padding-sm'>{{tag.name}}</view>
 31 |       </view>
 32 |     </view>
 33 | 
 34 |     <view class="detail-desc" v-if="products.length>0">
 35 |       <view class="d-header">
 36 |         <text class="text-gray">同款商品传送</text>
 37 |       </view>
 38 |       <scroll-view scroll-x scroll-with-animation>
 39 |         <HorizontalScrollLayout class="padding-30" :list="products" @itemtap="navToDetailPage"/>
 40 |       </scroll-view>
 41 |     </view>
 42 | 
 43 | 
 44 |     <view class="detail-desc">
 45 |       <view class="d-header">
 46 |         <text class="text-gray">推荐搭配</text>
 47 |       </view>
 48 |       <CollocationList :list1="list1" :list2="list2"></CollocationList>
 49 |       <load-more :status="loadingType"></load-more>
 50 |     </view>
 51 | 
 52 | 
 53 |   </view>
 54 | </template>
 55 | 
 56 | <script>
 57 |   import {mapGetters} from 'vuex';
 58 |   import HorizontalScrollLayout from "@/components/ProductList/HorizontalScrollLayout"
 59 |   import CollocationList from "./component/CollocationList"
 60 |   import LoadMore from '@/components/LoadMore'
 61 | 
 62 |   export default {
 63 |     components: { HorizontalScrollLayout, CollocationList, LoadMore },
 64 |     filters: {
 65 |     },
 66 |     data() {
 67 |       return {
 68 |         loadingType: 'more',
 69 |         detail: {},
 70 |         products: [],
 71 |         page: 0,
 72 |         list1: [],
 73 |         list2: []
 74 |       };
 75 |     },
 76 |     computed: {
 77 |       ...mapGetters(['hasLogin'])
 78 |     },
 79 |     async onLoad(options) {
 80 |       this.loadCollocationDetail(options.collocationId)
 81 |       this.recommendCollocations2();
 82 |     },
 83 |     onReachBottom() {
 84 |       this.recommendCollocations2();
 85 |     },
 86 |     onShareAppMessage(res) {
 87 |       return {
 88 |         title: this.detail.description.substring(0, this.detail.description.length > 20 ? 20 : this.detail.description.length),
 89 |         path: `/pages/collocation/detail?collocationId=${this.detail.collocationId}`,
 90 |         imageUrl: this.detail.imagePaths[0]
 91 |       }
 92 |     },
 93 |     methods: {
 94 |       async loadCollocationDetail(collocationId){
 95 |         let result = await this.$api.backend.collocationSimpleDetail(collocationId);
 96 |         this.detail = result.data
 97 |         this.$api.backend.collocationProduct(collocationId).then((response)=>{
 98 |           this.products = response.data
 99 |         });
100 |       },
101 | 
102 |       async recommendCollocations2(){
103 |         this.$api.backend.recommendCollocations2(this.page++).then((response)=>{
104 |           let recommend = response.data.content
105 |           this.loadingType = recommend.length === 0 || recommend.length < 20 ? 'nomore' : 'more';
106 |           let list2 = recommend.slice(0, recommend.length/2)
107 |           let list1 = recommend.slice(recommend.length/2, recommend.length)
108 |           this.list1 = this.list1.concat(list1);
109 |           this.list2 = this.list2.concat(list2);
110 |         })
111 |       },
112 | 
113 |       navToDetailPage(item) {
114 |         uni.navigateTo({
115 |           url: `/pages/product/product?goodsId=${item.goodsId}`
116 |         })
117 |       }
118 |     }
119 | 
120 |   }
121 | </script>
122 | 
123 | <style lang='scss' scoped>
124 | 	page, .container{
125 | 		background: $page-color-base;
126 | 	}
127 | 	.carousel {
128 | 		height: 722upx;
129 | 		position:relative;
130 | 		swiper{
131 | 			height: 100%;
132 | 		}
133 | 		.image-wrapper{
134 | 			width: 100%;
135 | 			height: 100%;
136 | 		}
137 | 		.swiper-item {
138 | 			display: flex;
139 | 			justify-content: center;
140 | 			align-content: center;
141 | 			height: 750upx;
142 | 			overflow: hidden;
143 | 			image {
144 | 				width: 100%;
145 | 				height: 100%;
146 | 			}
147 | 		}
148 | 	}
149 | 
150 | 	.introduce {
151 | 		background: #fff;
152 | 		padding: 50upx 30upx;
153 | 
154 |     .cu-tag {
155 |       margin-left: 0!important;
156 |       margin-right: 5px;
157 |       margin-top: 5px;
158 |     }
159 | 	}
160 | 
161 |   .detail-desc{
162 |     background: #fff;
163 |     margin-top: 16upx;
164 |     .d-header{
165 |       display: flex;
166 |       justify-content: center;
167 |       align-items: center;
168 |       height: 80upx;
169 |       font-size: $font-base + 2upx;
170 |       color: $font-color-dark;
171 |       position: relative;
172 | 
173 |       text{
174 |         padding: 0 20upx;
175 |         background: #fff;
176 |         position: relative;
177 |         z-index: 1;
178 |       }
179 |       &:after{
180 |         position: absolute;
181 |         left: 50%;
182 |         top: 50%;
183 |         transform: translateX(-50%);
184 |         width: 300upx;
185 |         height: 0;
186 |         content: '';
187 |         border-bottom: 1px solid #ccc;
188 |       }
189 |     }
190 | 
191 |   }
192 | 
193 | </style>
194 | 


--------------------------------------------------------------------------------
/pages/collocation/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="container">
  3 |     <view class="bg-white fixed nav text-center" style="font-size: 32rpx;" :style="[{height:CustomBar + 'px'}]">
  4 |       <view class="cu-item" :class="isRecommend?'cur text-red':''" @tap="showRecommend()"
  5 |             :style="[{height:CustomBar + 'px',lineHeight:(CustomBar+20)+'px'}]">
  6 |         推荐
  7 |       </view>
  8 |       <view class="cu-item" :class="isShopping?'cur text-red':''" @tap="showShopping()"
  9 |             :style="[{height:CustomBar + 'px',lineHeight:(CustomBar+20)+'px'}]">
 10 |         逛街
 11 |       </view>
 12 |     </view>
 13 |     <view v-if="isRecommend" :style="[{marginTop: CustomBar+'px'}]">
 14 |       <refresh @onRefresh="onRecommendRefresh" :pullupLoadingType="loadingType">
 15 |         <collocation-card v-for="item in collocations" :key="item.collocationId" :item="item" @appreciate="appreciate" @detail="navCollocationDetail"/>
 16 |       </refresh>
 17 |     </view>
 18 |     <view v-if="isShopping" :style="[{marginTop: CustomBar+'px'}]">
 19 |       <refresh @onRefresh="onCollocationListRefresh" :pullupLoadingType="loadingType2">
 20 |         <collocation-box :list="collocations2"></collocation-box>
 21 |       </refresh>
 22 |       <fab-btn class="fab-btn" :content="content" :horizontal="'right'" :vertical="'bottom'"
 23 |                :direction="'vertical'" @trigger="clickSex" @fabClick="clearSex">
 24 |       </fab-btn>
 25 |     </view>
 26 |   </view>
 27 | </template>
 28 | 
 29 | <script>
 30 |   import CollocationCard from "./component/CollocationCard"
 31 |   import CollocationBox from "./component/CollocationBox"
 32 |   import Refresh from '@/components/Refresh'
 33 |   import FabBtn from '@/components/FabBtn';
 34 |   import { mapGetters } from 'vuex';
 35 | 
 36 |   export default {
 37 |     components: {
 38 |       CollocationCard, Refresh, CollocationBox, FabBtn
 39 |     },
 40 |     data() {
 41 |       return {
 42 |         CustomBar: this.CustomBar,
 43 |         isRecommend: true,
 44 |         isShopping: false,
 45 |         loadingType: 'more',
 46 |         loadingType2: 'more',
 47 |         collocations: [],
 48 |         collocations2: [],
 49 |         sex: undefined,
 50 |         page: 0,
 51 |         page2: 0,
 52 |         content: [{
 53 |           iconPath: '/static/male.png',
 54 |           text: '男生',
 55 |           value: '1'
 56 |         }, {
 57 |           iconPath: '/static/female.png',
 58 |           text: '女生',
 59 |           value: '0'
 60 |         }]
 61 |       };
 62 |     },
 63 |     computed: {
 64 |       ...mapGetters(['hasLogin'])
 65 |     },
 66 |     onLoad(options) {
 67 |       this.loadRecommendData();
 68 |       this.loadCollocationList();
 69 |     },
 70 |     onReachBottom() {
 71 |       if (this.isRecommend) {
 72 |         this.loadRecommendData();
 73 |       } else if (this.isShopping) {
 74 |         this.loadCollocationList();
 75 |       }
 76 |     },
 77 |     onShareAppMessage(res) {
 78 |       return {
 79 |         title: '大神教会你搭配，购物先领取优惠券，爱穿搭更爱省钱',
 80 |         path: '/pages/index/index',
 81 |         imageUrl: 'http://file.xiaoyizhiku.net/170/share01.png'
 82 |       };
 83 |     },
 84 |     methods: {
 85 |       clickSex(menu) {
 86 |         this.sex = menu.item.value;
 87 |         this.onCollocationListRefresh();
 88 |         uni.pageScrollTo({
 89 |           duration: 300,
 90 |           scrollTop: 0
 91 |         })
 92 |       },
 93 |       clearSex() {
 94 |         if(this.sex){
 95 |           this.sex = undefined;
 96 |           this.onCollocationListRefresh();
 97 |           uni.pageScrollTo({
 98 |             duration: 300,
 99 |             scrollTop: 0
100 |           })
101 |         }
102 |       },
103 |       showRecommend() {
104 |         this.isRecommend = true;
105 |         this.isShopping = false;
106 |       },
107 |       showShopping() {
108 |         this.isRecommend = false;
109 |         this.isShopping = true;
110 |       },
111 |       onRecommendRefresh(){
112 |         this.loadingType = 'more'
113 |         this.page = 0
114 |         this.loadRecommendData('refresh')
115 |       },
116 |       onCollocationListRefresh(){
117 |         this.loadingType2 = 'more'
118 |         this.page2 = 0
119 |         this.loadCollocationList('refresh')
120 |       },
121 |       async loadRecommendData(type) {
122 |         let result = await this.$api.backend.recommendCollocations(this.page++);
123 |         let list = result.data.content || [];
124 |         if (type === 'refresh') {
125 |           this.collocations = list;
126 |         } else {
127 |           this.collocations = this.collocations.concat(list);
128 |         }
129 |         this.loadingType = list.length === 0 || list.length < 20 ? 'nomore' : 'more';
130 |       },
131 |       async loadCollocationList(type) {
132 |         let result = await this.$api.backend.collocationsList(this.page2++, this.sex);
133 |         let list = result.data.content || [];
134 |         if (type === 'refresh') {
135 |           this.collocations2 = list;
136 |         } else {
137 |           this.collocations2 = this.collocations2.concat(list);
138 |         }
139 |         this.loadingType2 = list.length === 0 || list.length < 24 ? 'nomore' : 'more';
140 |       },
141 |       navCollocationDetail(item) {
142 |         uni.navigateTo({ url: `/pages/collocation/detail?collocationId=${item.collocationId}` });
143 |       },
144 |       appreciate(item) {
145 |         if(!this.hasLogin){
146 |           uni.showToast({
147 |             title: '您还未登录，请先登录',
148 |             icon: 'none',
149 |             duration: 2000
150 |           });
151 |           return;
152 |         }
153 |         let item2 = this.collocations.find(data=>{
154 |           return data.collocationId === item.collocationId
155 |         });
156 | 
157 |         if(item2.appreciate){
158 |           this.$api.backend.cancelCollocationAppreciate(item2.collocationId).then(()=>{
159 |             item2.appreciate = false;
160 |             item2.appreciateCount -= 1;
161 |           });
162 |         }else{
163 |           this.$api.backend.addCollocationAppreciate(item2.collocationId).then(()=>{
164 |             item2.appreciate = true;
165 |             item2.appreciateCount += 1;
166 |           });
167 |         }
168 |       }
169 |     }
170 |   }
171 | </script>
172 | 
173 | <style lang="scss" scoped>
174 |   page, .container {
175 |     background: $page-color-base;
176 |   }
177 | </style>
178 | 


--------------------------------------------------------------------------------
/pages/halfPrice/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view class="container">
 3 |     <title-nav bg-color="bg-white solid-bottom" :isBack="true">
 4 |       <block slot="content">每日半价</block>
 5 |     </title-nav>
 6 |     <tab2 class="nav fixed" :items="items" @tabselect="tabSelect" :style="'top:'+CustomBar+'px'"></tab2>
 7 |     <view style="height: 51px"></view>
 8 |     <image src="https://img.alicdn.com/imgextra/i4/2053469401/O1CN01bxRFEY2JJhz5KNm0P_!!2053469401.png?v=662917" class="loaded" mode="widthFix"></image>
 9 |     <view class="main-content">
10 |       <product-list :list="goodsList"></product-list>
11 |     </view>
12 |   </view>
13 | </template>
14 | 
15 | <script>
16 |   import {mapState} from 'vuex';
17 |   import ProductList from "@/components/ProductList/HorizontalLayout2"
18 |   import Refresh from '@/components/Refresh'
19 |   import Tab2 from '@/components/Tab2'
20 | 
21 |   export default {
22 |     components: {ProductList, Tab2, Refresh},
23 |     data() {
24 |       return {
25 |         CustomBar: this.CustomBar,
26 |         goodsList: [],
27 |         loadingType: 'loading', //加载更多状态
28 |         nineCid: -1,
29 |         items: []
30 |       };
31 |     },
32 |     onLoad() {
33 |       this.initialItems()
34 |       console.log(this.items)
35 |       // this.loadData()
36 |     },
37 |     onShareAppMessage(res) {
38 |       return {
39 |         title: '有人@我，9块9还包邮，花小钱过小资生活',
40 |         path: '/pages/nine/nine',
41 |         imageUrl: 'http://file.szjx.top/fashion/nine-nine.jpeg'
42 |       };
43 |     },
44 |     computed: {},
45 |     methods: {
46 |       initialItems() {
47 |         uni.request({
48 |           url: 'http://cmsjapi.ffquan.cn/api/goods/price/half-of-daily-session',
49 |           success: res => {
50 |             this.items = res.data.data;
51 |           }
52 |         });
53 |       },
54 |       //请求数据
55 |       async loadData(type = 'add') {
56 |         //没有更多直接返回
57 |         if (type === 'add') {
58 |           if (this.loadingType === 'nomore') {
59 |             return;
60 |           }
61 |           this.loadingType = 'loading';
62 |         } else {
63 |           this.loadingType = 'more'
64 |         }
65 |         if (type === 'refresh') {
66 |           this.page = 1;
67 |         }
68 | 
69 |         let result = await this.$api.backend.getNineGoods(this.page++, this.size, this.nineCid);
70 |         if (type === 'refresh') {
71 |           this.goodsList = [];
72 |         }
73 |         let items = result.data.list;
74 |         this.goodsList = this.goodsList.concat(items);
75 |         this.loadingType = items.length === 0 || items.length < this.size ? 'nomore' : 'more';
76 |         uni.hideLoading()
77 |       },
78 |       tabSelect(index, item) {
79 |         // uni.showLoading()
80 |         // this.nineCid = item.value
81 |         // this.loadData('refresh');
82 |         // this.loadingType = 'loading'
83 |         // uni.pageScrollTo({
84 |         //   duration: 300,
85 |         //   scrollTop: 0
86 |         // })
87 |       }
88 |     }
89 |   }
90 | </script>
91 | 
92 | <style lang='scss' scoped>
93 |   page, .container {
94 |     background: $page-color-base;
95 |     height: 100%;
96 |   }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<title-nav bg-color="bg-white solid-bottom text-black">
  4 | 			<block slot="custom">
  5 | 				<view class="cu-bar search bg-white" style="width: 100%;">
  6 | 					<view class="search-form padding-left-xs">
  7 | 						<text class="icon icon-search text-grey"></text>
  8 | 						<input class="margin-left-xs" type="text" disabled placeholder="搜索时尚商品" @tap="navToNative('/pages/search/search')"/>
  9 | 					</view>
 10 | 				</view>
 11 | 			</block>
 12 | 		</title-nav>
 13 | 		<refresh @onRefresh="onRefresh" :pullupLoadingType="loadingType">
 14 | 			<!-- 头部轮播 -->
 15 | 			<view class="carousel">
 16 | 				<swiper indicator-dots circular=true duration="400">
 17 | 					<swiper-item class="swiper-item" v-for="(item,index) in carouselList" :key="index"  @click="navTo(item)">
 18 | 						<view class="image-wrapper">
 19 | 							<image :src="item.image" class="loaded"	mode="aspectFill"></image>
 20 | 						</view>
 21 | 					</swiper-item>
 22 | 				</swiper>
 23 | 			</view>
 24 | 
 25 | 			<!-- <view class="ad-1" @click="navToWebView('http://szjx.top/index.php?r=a/t&i=322a9b4d6cc839e9&banner=3')">
 26 | 				<image src="https://img.alicdn.com/imgextra/i1/2053469401/O1CN01Cs3hlT2JJi1SVQsV6_!!2053469401.gif" mode="scaleToFill"></image>
 27 | 			</view> -->
 28 | 			<!-- 分类 -->
 29 | 			<view class="cate-section" style="padding-top: 30upx;">
 30 | 				<view class="cate-item" :style="'width:'+200/menus.length+'%'" v-for="menu in menus"  :key="menu.id" @click="navTo(menu)">
 31 | 					<image :src="menu.icon"></image>
 32 | 					<text>{{menu.label}}</text>
 33 | 				</view>
 34 | 			</view>
 35 | 
 36 | 			<!-- 猜你喜欢 -->
 37 | 			<view class="nine_h3bt h3bt_bg margin-top-sm">
 38 | 				<view class="title">
 39 | 					<text class="left"></text>
 40 | 					<text class="colout">精选推荐</text>
 41 | 					<text class="right"></text>
 42 | 				</view>
 43 | 			</view>
 44 | 			<product-list :list="goodsList"></product-list>
 45 | 		</refresh>
 46 | 	</view>
 47 | </template>
 48 | 
 49 | <script>
 50 | import LoadMore from '@/components/LoadMore'
 51 | import ProductList from '@/components/ProductList/BoxLayout'
 52 | import Refresh from '@/components/Refresh'
 53 | 
 54 | export default {
 55 | 	components: {
 56 | 		ProductList,
 57 | 		LoadMore,
 58 |     Refresh
 59 | 	},
 60 | 	data() {
 61 | 		return {
 62 | 			swiperCurrent: 0,
 63 | 			swiperLength: 0,
 64 | 			carouselList: [],
 65 | 			menus: [],
 66 | 			loadingType: 'more',
 67 | 			page: 1,
 68 | 			goodsList: []
 69 | 		};
 70 | 	},
 71 | 	onLoad() {
 72 | 		this.loadData();
 73 | 	},
 74 | 	onReachBottom() {
 75 | 		this.loadData();
 76 | 	},
 77 | 	onShareAppMessage(res) {
 78 | 		return {
 79 | 			title: '有人@我，快来免费领取购物优惠券',
 80 | 			path: '/pages/index/index',
 81 | 			imageUrl: 'http://file.xiaoyizhiku.net/170/share01.png'
 82 | 		};
 83 | 	},
 84 | 	methods: {
 85 |     onRefresh(){
 86 |       this.carouselList = []
 87 |       this.menus = []
 88 |       this.goodsList = []
 89 |       this.loadingType = 'more'
 90 | 			this.swiperCurrent = 0
 91 | 			this.swiperLength = 0
 92 | 			this.page = 1
 93 | 			this.loadData()
 94 |     },
 95 | 		async loadData() {
 96 | 			let resultdata = await this.$api.backend.listCarousel();
 97 | 			let carouselList = resultdata.data
 98 | 			this.swiperLength = carouselList.length;
 99 | 			this.carouselList = carouselList;
100 | 
101 | 			let menusResult = await this.$api.backend.listMenus();
102 | 			this.menus = menusResult.data;
103 | 
104 | 			if (this.loadingType === 'nomore') {
105 | 				return;
106 | 			}
107 | 			this.loadingType = 'loading';
108 | 			let result = await this.$api.backend.recommendGoods(this.page++);
109 | 			let list = result.data.list || [];
110 | 			this.goodsList = this.goodsList.concat(list);
111 | 			this.loadingType = list.length === 0 || list.length < 50 ? 'nomore' : 'more';
112 | 		},
113 | 		//轮播图切换修改背景色
114 | 		swiperChange(e) {
115 | 			const index = e.detail.current;
116 | 			this.swiperCurrent = index;
117 | 		},
118 | 		toProductList(subcid) {
119 | 			uni.navigateTo({
120 | 				url: `/pages/product/list?subcid=${subcid}`
121 | 			});
122 | 		},
123 | 		navTo(item) {
124 | 			if(item.urlType === 'H5'){
125 | 				this.navToWebView(item.title, item.top, item.url);
126 | 			} else {
127 | 				this.navToNative(item.url)
128 | 			}
129 | 		},
130 | 		navToNative(url) {
131 | 			uni.navigateTo({ url });
132 | 		},
133 | 		navToWebView(title, top, url) {
134 | 			if (url.indexOf('taobao.com') > -1 || url.indexOf('tmall.com') > -1) {
135 | 				this.openTaobao(url);
136 | 				return;
137 | 			}
138 | 			uni.navigateTo({
139 | 				url: '/pages/webview/index?top=' + top + '&title=' + title + '&url=' + encodeURIComponent(url)
140 | 			});
141 | 		},
142 | 		openTaobao(url) {
143 |       // #ifdef H5
144 |       window.open(url)
145 |       // #endif
146 |       // #ifdef APP-PLUS
147 |       plus.runtime.openURL(url.replace('https:', 'taobao:'), res => {
148 |         plus.runtime.openURL(url);
149 |       });
150 |       // #endif
151 | 		}
152 | 	}
153 | };
154 | </script>
155 | 
156 | <style lang="scss" scoped>
157 | 	page, .container{
158 | 		background: $page-color-base;
159 | 	}
160 | 	/* 头部 轮播图 */
161 | 	.carousel {
162 | 		height: 300upx;
163 | 		position:relative;
164 | 		swiper{
165 | 			height: 100%;
166 | 		}
167 | 		.image-wrapper{
168 | 			width: 100%;
169 | 			height: 100%;
170 | 		}
171 | 		.swiper-item {
172 | 			display: flex;
173 | 			justify-content: center;
174 | 			align-content: center;
175 | 			height: 400upx;
176 | 			overflow: hidden;
177 | 			image {
178 | 				width: 100%;
179 | 				height: 100%;
180 | 			}
181 | 		}
182 | 
183 | 	}
184 | 	.cate-section {
185 | 		display: flex;
186 | 		justify-content: space-around;
187 | 		align-items: center;
188 | 		flex-wrap: wrap;
189 | 		padding: 10upx 22upx;
190 | 		background: #fff;
191 | 		.cate-item {
192 | 			display: flex;
193 | 			flex-direction: column;
194 | 			align-items: center;
195 | 			font-size: $font-sm + 2upx;
196 | 			color: $font-color-dark;
197 | 		}
198 | 		image {
199 | 			width: 88upx;
200 | 			height: 88upx;
201 | 			margin-bottom: 14upx;
202 | 		}
203 | 	}
204 | 
205 | 	.ad-1 {
206 | 		width: 100%;
207 | 		height: 210upx;
208 | 		padding: 10upx 0;
209 | 		background: #fff;
210 | 		image {
211 | 			width: 100%;
212 | 			height: 100%;
213 | 		}
214 | 	}
215 | 
216 | 	.nine_h3bt {
217 | 		display: flex;
218 | 		justify-content: center;
219 | 		align-items: center;
220 | 
221 | 		&.h3bt_bg {
222 | 			height: 40px;
223 | 			background: url(https://cmsstatic.ffquan.cn/web/nine_special/images/nine_tab_bg.svg?v=20201295417226) center center no-repeat #fff;
224 | 			background-size: auto 100%;
225 | 		}
226 | 
227 | 		.title {
228 | 			display: flex;
229 | 			align-items: center;
230 | 
231 | 			.left {
232 | 				height: 10px;
233 | 				width: 30px;
234 | 				display: inline-block;
235 | 				background-size: 100% auto;
236 | 				background: url(https://cmsstatic.ffquan.cn/web/nine_special/images/nine_tab_left_tow.svg?v=20201295417226) no-repeat;
237 | 				margin-right: 25upx;
238 | 			}
239 | 
240 | 			.colout {
241 | 				font-size: 15px;
242 | 				color: #c043fc;
243 | 				background-image: -webkit-gradient(linear, left 20, right 0, from(#873cfe), to(#fd295e));
244 | 				-webkit-background-clip: text;
245 | 				-webkit-text-fill-color: transparent;
246 | 			}
247 | 
248 | 			.right {
249 | 				height: 10px;
250 | 				width: 30px;
251 | 				display: inline-block;
252 | 				background-size: 100% auto;
253 | 				background: url(https://cmsstatic.ffquan.cn/web/nine_special/images/nine_tab_right_tow.svg?v=20201295417226) no-repeat;
254 | 				margin-left: 25upx;
255 | 			}
256 | 		}
257 | 	}
258 | </style>
259 | 


--------------------------------------------------------------------------------
/pages/nine/nine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="container">
  3 |     <title-nav bg-color="bg-white solid-bottom" :isBack="true">
  4 |       <block slot="content">9.9包邮</block>
  5 |     </title-nav>
  6 |     <tab class="nav fixed" :items="items" @tabselect="tabSelect" :style="'top:'+CustomBar+'px'"></tab>
  7 |     <view style="height: 45px"></view>
  8 |     <view class="main-content">
  9 |       <refresh @onRefresh="onRefresh" :pullupLoadingType="loadingType">
 10 |         <product-list :list="goodsList"></product-list>
 11 |       </refresh>
 12 |     </view>
 13 |   </view>
 14 | </template>
 15 | 
 16 | <script>
 17 |   import {mapState} from 'vuex';
 18 |   import ProductList from "@/components/ProductList/BoxLayout"
 19 |   import Refresh from '@/components/Refresh'
 20 |   import Tab from '@/components/Tab'
 21 | 
 22 |   export default {
 23 |     components: {ProductList, Tab, Refresh},
 24 |     data() {
 25 |       return {
 26 |         CustomBar: this.CustomBar,
 27 |         goodsList: [],
 28 |         loadingType: 'loading', //加载更多状态
 29 |         page: 1,
 30 |         size: 20,
 31 |         nineCid: -1,
 32 |         items: [{
 33 |           text: '精选',
 34 |           value: '-1'
 35 |         }, {
 36 |           text: '5.9元区',
 37 |           value: '1'
 38 |         }, {
 39 |           text: '9.9元区',
 40 |           value: '2'
 41 |         }, {
 42 |           text: '19.9元区',
 43 |           value: '3'
 44 |         }]
 45 |       };
 46 |     },
 47 |     onLoad() {
 48 |       this.loadData()
 49 |     },
 50 |     onReachBottom() {
 51 |       this.loadData();
 52 |     },
 53 |     onShareAppMessage(res) {
 54 |       return {
 55 |         title: '有人@我，9块9还包邮，花小钱过小资生活',
 56 |         path: '/pages/nine/nine',
 57 |         imageUrl: 'http://file.szjx.top/fashion/nine-nine.jpeg'
 58 |       };
 59 |     },
 60 |     computed: {},
 61 |     methods: {
 62 |       //请求数据
 63 |       async loadData(type = 'add') {
 64 |         //没有更多直接返回
 65 |         if (type === 'add') {
 66 |           if (this.loadingType === 'nomore') {
 67 |             return;
 68 |           }
 69 |           this.loadingType = 'loading';
 70 |         } else {
 71 |           this.loadingType = 'more'
 72 |         }
 73 |         if (type === 'refresh') {
 74 |           this.page = 1;
 75 |         }
 76 | 
 77 |         let result = await this.$api.backend.getNineGoods(this.page++, this.size, this.nineCid);
 78 |         if (type === 'refresh') {
 79 |           this.goodsList = [];
 80 |         }
 81 |         let items = result.data.list;
 82 |         this.goodsList = this.goodsList.concat(items);
 83 |         this.loadingType = items.length === 0 || items.length < this.size ? 'nomore' : 'more';
 84 |         uni.hideLoading()
 85 |       },
 86 |       onRefresh() {
 87 |         this.loadData('refresh');
 88 |         this.loadingType = 'loading'
 89 |       },
 90 |       tabSelect(index, item) {
 91 |         uni.showLoading()
 92 |         this.nineCid = item.value
 93 |         this.loadData('refresh');
 94 |         this.loadingType = 'loading'
 95 |         uni.pageScrollTo({
 96 |           duration: 300,
 97 |           scrollTop: 0
 98 |         })
 99 |       }
100 |     }
101 |   }
102 | </script>
103 | 
104 | <style lang='scss' scoped>
105 |   page, .container {
106 |     background: $page-color-base;
107 |     height: 100%;
108 |   }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/pages/product/list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="container">
 3 | 		<title-nav bg-color="bg-white solid-bottom" :isBack="true">
 4 | 			<block slot="content">商品列表</block>
 5 | 		</title-nav>
 6 | 		<sort-navbar :headerTop="CustomBar+'px'" @sort="sortClick"></sort-navbar>
 7 | 		<view style="height: 40px"></view>
 8 | 		<view class="main-content">
 9 | 			<refresh @onRefresh="onRefresh" :pullupLoadingType="loadingType">
10 | 				<product-list :list="goodsList"></product-list>
11 | 			</refresh>
12 | 		</view>
13 | 	</view>
14 | </template>
15 | 
16 | <script>
17 |   import SortNavbar from "@/components/SortNavbar"
18 |   import ProductList from "@/components/ProductList/BoxLayout"
19 |   import Refresh from '@/components/Refresh'
20 | 
21 |   export default {
22 |     components: {
23 |       ProductList, SortNavbar, Refresh
24 |     },
25 |     data() {
26 |       return {
27 |         CustomBar: this.CustomBar,
28 |         loadingType: 'loading', //加载更多状态
29 |         goodsList: [],
30 |         subcid: undefined,
31 |         page: 1,
32 |         sort: 4,
33 |       };
34 |     },
35 |     onLoad(options) {
36 |       this.subcid = options.subcid;
37 |       this.loadData();
38 |     },
39 |     onReachBottom() {
40 |       this.loadData();
41 |     },
42 |     methods: {
43 |       async loadData(type = 'add') {
44 |         //没有更多直接返回
45 |         if (type === 'add') {
46 |           if (this.loadingType === 'nomore') {
47 |             return;
48 |           }
49 |           this.loadingType = 'loading';
50 |         } else {
51 |           this.loadingType = 'more'
52 |         }
53 |         if (type === 'refresh') {
54 |           this.page = 1;
55 |         }
56 |         // uni.showLoading()
57 |         let result = await this.$api.backend.getGoodsByCate(this.subcid, this.page++, this.sort);
58 |         if (type === 'refresh') {
59 |           this.goodsList = [];
60 |         }
61 |         this.goodsList = this.goodsList.concat(result.data.list);
62 |         this.loadingType = this.goodsList.length === 0 ? 'nomore' : 'more';
63 |         // uni.hideLoading()
64 |       },
65 |       onRefresh() {
66 |         this.loadData('refresh');
67 |         this.loadingType = 'loading'
68 |       },
69 |       sortClick(sort) {
70 |         this.sort = sort;
71 |         this.loadData('refresh');
72 |         this.loadingType = 'loading'
73 |         uni.pageScrollTo({
74 |           duration: 300,
75 |           scrollTop: 0
76 |         })
77 |       }
78 |     }
79 |   }
80 | </script>
81 | 
82 | <style lang="scss" scoped>
83 | 	page, .main-content{
84 | 		background: $page-color-base;
85 | 		height: 100%;
86 | 	}
87 | </style>
88 | 


--------------------------------------------------------------------------------
/pages/product/product.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<title-nav bg-color="bg-white solid-bottom" :isBack="true">
  4 | 			<block slot="content">商品详情</block>
  5 | 		</title-nav>
  6 | 		<view class="carousel">
  7 | 			<swiper indicator-dots circular=true duration="400">
  8 | 				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
  9 | 					<view class="image-wrapper">
 10 | 						<image :src="item" class="loaded" mode="aspectFill"></image>
 11 | 					</view>
 12 | 				</swiper-item>
 13 | 			</swiper>
 14 | 		</view>
 15 | 
 16 | 		<view class="introduce-section">
 17 | 			<view>
 18 | 				<!--#ifndef MP-WEIXIN || MP-QQ-->
 19 | 				<text class="tm"></text>
 20 | 				<!-- #endif -->
 21 | 				<text class="title">{{detail.title}}</text>
 22 | 			</view>
 23 | 			<view class="price-box">
 24 | 				<text v-if="detail.couponPrice > 0" class="price-tip margin-right-xs">券后价</text>
 25 | 				<text class="price-tip">¥</text>
 26 | 				<text class="price">{{detail.actualPrice}}</text>
 27 | 				<text class="m-price" v-if="detail.actualPrice !== detail.originalPrice">原价 ¥{{detail.originalPrice}}</text>
 28 | 			</view>
 29 | 			<view class="bot-row">
 30 | 				<text v-if="detail.monthSales > 0">30天销量: {{detail.monthSales}}</text>
 31 | 				<text v-if="detail.dailySales > 0">当天销量: {{detail.dailySales}}</text>
 32 | 				<text v-if="detail.couponPrice > 0">已领券量: {{detail.couponReceiveNum}}</text>
 33 | 			</view>
 34 | 		</view>
 35 | 
 36 | 		<!--  领取优惠券 -->
 37 | 		<view v-if="detail.couponPrice > 0" style="background-color: white;padding-bottom:20upx">
 38 | 			<view class="coupon">
 39 | 				<view class="div-left">
 40 | 					<view>
 41 | 						<text style="font-size: 20px;font-weight: 500;">{{detail.couponPrice}}</text>
 42 | 						<text style="font-size: 13px;font-weight: 500;">元优惠券</text>
 43 | 					</view>
 44 | 					<view style="font-size: 11px">{{detail.couponStartTime | formatDate}} ~ {{detail.couponEndTime | formatDate}}</view>
 45 | 				</view>
 46 | 				<!--#ifdef MP-QQ || MP-WEIXIN-->
 47 | 				<view class="div-right" v-if="audit==='0'" @click="toggleTpwd">立即领券</view>
 48 | 				<!-- #endif -->
 49 | 				<!--#ifdef APP-PLUS || H5-->
 50 | 				<view class="div-right" @click="toggleTpwd">立即领券</view>
 51 | 				<!-- #endif -->
 52 | 			</view>
 53 | 		</view>
 54 | 
 55 | 		<view class="good-desc">
 56 | 			<text>{{detail.desc}}</text>
 57 | 		</view>
 58 | 
 59 | 		<view class="store-info">
 60 | 			<view class="store-title">
 61 | 				<view>
 62 | 					<text>店铺: {{detail.shopName}}</text>
 63 | 				</view>
 64 | 			</view>
 65 | 			<view class="store-evaluate">
 66 | 				<text>宝贝描述：{{detail.descScore}}</text>
 67 | 				<text>卖家服务：{{detail.serviceScore}}</text>
 68 | 				<text>物流服务：{{detail.shipScore}}</text>
 69 | 			</view>
 70 | 		</view>
 71 | 
 72 | 		<view class="detail-desc" v-if="similerGoods.length > 0">
 73 | 			<view class="d-header">
 74 | 				<text class="text-gray">相似推荐</text>
 75 | 			</view>
 76 | 			<scroll-view scroll-x scroll-with-animation>
 77 | 				<HorizontalScrollLayout :list="similerGoods" @itemtap="navToDetailPage"></HorizontalScrollLayout>
 78 | 			</scroll-view>
 79 | 		</view>
 80 | 
 81 | 		<view class="detail-desc">
 82 | 			<view class="d-header">
 83 | 				<text class="text-gray">图文详情</text>
 84 | 			</view>
 85 | 			<rich-text :nodes="descImgs"></rich-text>
 86 | 		</view>
 87 | 
 88 | 		<!-- 底部操作菜单 -->
 89 | 		<view class="page-bottom">
 90 | 			<navigator url="/pages/collocation/index" open-type="switchTab" class="p-b-btn">
 91 | 				<text class="icon icon-home text-xxl"></text>
 92 | 				<text>首页</text>
 93 | 			</navigator>
 94 | 			<view class="p-b-btn" @tap="toFavorite()">
 95 | 				<text class="icon text-xxl"
 96 |                       :class="{'icon-favor': !favorite, 'icon-favorfill text-red': favorite}">
 97 |                 </text>
 98 | 				<text>收藏</text>
 99 | 			</view>
100 | 			<!-- <view class="p-b-btn">
101 | 				<text class="icon icon-share text-xxl"></text>
102 | 				<text>分享</text>
103 | 			</view> -->
104 | 
105 | 			<view class="action-btn-group">
106 | 				<!--#ifdef MP-QQ || MP-WEIXIN-->
107 | 				<button type="primary" open-type="share" class="action-btn no-border share-btn buy-now-btn">
108 | 					<text class="icon icon-share text-lg margin-right-xs"></text>
109 | 					<text>分享</text>
110 | 				</button>
111 | 				<!-- #endif -->
112 | 
113 | 				<!--#ifdef MP-QQ || MP-WEIXIN-->
114 | 				<button type="primary" v-if="audit==='0'" class="action-btn no-border" @click="toggleTpwd">
115 | 					口令购买
116 | 				</button>
117 | 				<!-- #endif -->
118 | 				<!--#ifdef APP-PLUS || H5-->
119 | 				<button type="primary" class="action-btn no-border" @click="toggleTpwd">
120 | 					口令购买
121 | 				</button>
122 | 				<!-- #endif -->
123 | 				<!--#ifdef H5-->
124 | 				<button type="primary" class="action-btn no-border" @click="openWebLink(couponClickUrl)">领券链接</button>
125 | 				<!-- #endif -->
126 | 
127 | 				<!--#ifdef APP-PLUS-->
128 | 				<button type="primary" class="action-btn no-border" @click="openTaobao">领券购买</button>
129 | 				<!-- #endif -->
130 | 			</view>
131 | 		</view>
132 | 
133 | 
134 | 		<!-- 规格-模态层弹窗 -->
135 | 		<view
136 | 			class="popup spec"
137 | 			:class="specClass"
138 | 			@touchmove.stop.prevent="stopPrevent"
139 | 			@click="toggleTpwd">
140 | 			<!-- 遮罩层 -->
141 | 			<view class="mask"></view>
142 | 			<view class="layer attr-content" @click.stop="stopPrevent">
143 | 				<view class="a-t">
144 | 					<image :src="detail.mainPic"></image>
145 | 					<view class="right margin-top-sm">
146 | 						<view>
147 | 							<text v-if="detail.couponPrice > 0" class="margin-right-xs" style="font-size: 22upx;color: red;">券后</text>
148 | 							<text class="text-price text-red text-xl">{{detail.actualPrice}}</text>
149 | 						</view>
150 | 						<text v-if="detail.couponPrice > 0" class="stock">已领优惠券：{{detail.couponReceiveNum}}</text>
151 | 					</view>
152 | 				</view>
153 | 				<view class="center-text margin-top-xl">
154 | 					<text :selectable="true">{{tpwdTxt}}</text>
155 | 				</view>
156 | 				<view style="text-align: center;">
157 | 					<text class="tip">长按文字区域手动复制</text>
158 | 				</view>
159 | 				<button class="btn margin-top-xl" :class="alreadyCopy?'bg-green':'bg-red'" @click="copy(tpwdValue)">
160 | 					{{alreadyCopy? tips : '一键复制'}}
161 | 				</button>
162 | 			</view>
163 | 		</view>
164 | 	</view>
165 | </template>
166 | 
167 | <script>
168 |   import {mapGetters} from 'vuex';
169 |   import HorizontalScrollLayout from "@/components/ProductList/HorizontalScrollLayout"
170 | 
171 |   export default {
172 |     components: { HorizontalScrollLayout },
173 |     filters: {
174 |       formatDate(value) {
175 |         if (value) {
176 |           return value.substr(0, 10);
177 |         }
178 |       }
179 |     },
180 |     data() {
181 |       return {
182 |         specClass: 'none',
183 |         favorite: false,
184 |         detail: {},
185 |         tpwdTxt: '',
186 |         tpwdTip: '',
187 |         tpwdValue: '',
188 |         audit: '1',
189 |         couponClickUrl: undefined,
190 |         itemUrl: undefined,
191 |         imgList: [],
192 |         descImgs: undefined,
193 |         alreadyCopy: false,
194 |         tips: '',
195 |         similerGoods: []
196 |       };
197 |     },
198 |     computed: {
199 |       ...mapGetters(['hasLogin', 'shareTicket'])
200 |     },
201 |     async onLoad(options) {
202 |       uni.showLoading();
203 |       let goodsId = options.goodsId;
204 |       this.$api.backend.getPrivilegeLink(goodsId).then(response => {
205 |         this.tpwdValue = response.data.tpwdValue;
206 |         this.tpwdTxt = response.data.tpwdTxt;
207 |         this.tpwdTip = response.data.tpwdTip;
208 |         this.audit = response.data.audit;
209 |         this.couponClickUrl = response.data.couponClickUrl;
210 |         this.itemUrl = response.data.itemUrl;
211 |       })
212 | 
213 |       let result = await this.$api.backend.getGoodsDetail(null, goodsId)
214 |       if (!result.success) {
215 |         uni.showToast({
216 |           title: '该商品已下架', icon: 'none', duration: 2000
217 |         });
218 |         setTimeout(()=>{
219 |           uni.navigateBack({delta: 1});
220 |         }, 1000)
221 |         return;
222 |       }
223 | 
224 |       uni.hideLoading();
225 |       this.detail = result.data
226 | 	  	goodsId = this.detail.goodsId
227 |       this.imgList.push(this.detail.mainPic)
228 |       this.favorite = this.detail.favorite
229 | 
230 |       let imgs = this.detail.imgs.split(",");
231 |       if (imgs && imgs.length > 0) {
232 |         imgs.forEach(img => {
233 |           if (img) {
234 |             this.imgList.push(img)
235 |           }
236 |         })
237 |       }
238 |       if(this.detail.id !== -1){
239 |         this.$api.backend.getSimilarGoods(this.detail.id).then(response => {
240 |           this.similerGoods = response.data || [];
241 |         })
242 | 			}
243 | 
244 |       this.buildDescImgs(this.detail.imgs.split(','))
245 |     },
246 |     onShareAppMessage(res) {
247 |       return {
248 |         title: this.detail.title,
249 |         path: `/pages/product/product?goodsId=${this.detail.goodsId}`,
250 |         imageUrl: this.detail.marketingMainPic
251 |       }
252 |     },
253 |     methods: {
254 |       openWebLink(url) {
255 |         window.open(url)
256 | 			},
257 |       buildDescImgs(imgs) {
258 |         let children = []
259 |         imgs.forEach(item => {
260 |           children.push({
261 |             name: "img",
262 |             attrs: {
263 |               src: item,
264 |               style: "width:100%;display:block;"
265 |             }
266 |           })
267 |         })
268 |         this.descImgs = [{
269 |           name: "div",
270 |           attrs: {
271 |             style: "width:100%"
272 |           },
273 |           children: children
274 |         }]
275 |       },
276 |       toggleTpwd() {
277 |         if (this.specClass === 'show') {
278 |           this.specClass = 'hide';
279 |           setTimeout(() => {
280 |             this.specClass = 'none';
281 |             this.alreadyCopy = false;
282 |           }, 250);
283 |         } else if (this.specClass === 'none') {
284 |           this.specClass = 'show';
285 |         }
286 |       },
287 |       openTaobao() {
288 |         let couponLink = this.couponClickUrl ? this.couponClickUrl : this.itemUrl;
289 |         // #ifdef H5
290 | 				window.open(couponLink)
291 |         // #endif
292 |         // #ifdef APP-PLUS
293 |         plus.runtime.openURL(couponLink.replace('https:', 'taobao:'), (res) => {
294 |           plus.runtime.openURL(couponLink)
295 |         });
296 |         // #endif
297 |       },
298 |       toFavorite() {
299 |         if (!this.hasLogin) {
300 |           uni.showToast({
301 |             title: '您还未登录，请先登录',
302 |             icon: 'none',
303 |             duration: 2000
304 |           });
305 |           return;
306 |         }
307 |         if (this.favorite) {
308 |           this.$api.backend.unFavoriteGoods(this.detail.goodsId)
309 |         } else {
310 |           this.$api.backend.favoriteGoods(this.detail.goodsId)
311 |         }
312 |         this.favorite = !this.favorite
313 |       },
314 |       copy(data) {
315 |         let me = this;
316 |         me.alreadyCopy = true
317 |         // #ifndef H5
318 |         uni.setClipboardData({
319 |           data: data,
320 |           success() {
321 |             me.tips = me.tpwdTip?me.tpwdTip:'复制成功'
322 |           },
323 |           fail(res) {
324 |             me.tips = '复制失败,请您长按复制'
325 |           }
326 |         });
327 |         // #endif
328 |         // #ifdef H5
329 |         this.copyToClipboard(data)
330 |         me.tips = '口令复制成功，请打开手机淘宝'
331 |         // #endif
332 | 
333 | 				this.$utils.getShareInfo()
334 | 
335 |       },
336 |       copyToClipboard(text) {
337 |         let textArea = document.createElement('textarea');
338 |         textArea.style.position = 'fixed';
339 |         textArea.style.zIndex = -1;
340 |         textArea.style.top = '0';
341 |         textArea.style.left = '0';
342 |         textArea.style.width = '1em';
343 |         textArea.style.height = '1em';
344 |         textArea.style.padding = '0';
345 |         textArea.style.border = 'none';
346 |         textArea.style.outline = 'none';
347 |         textArea.style.boxShadow = 'none';
348 |         textArea.style.background = 'transparent';
349 |         textArea.value = text;
350 |         document.body.appendChild(textArea);
351 |         textArea.select();
352 | 
353 |         try {
354 |           document.execCommand('copy');
355 |         } catch (err) {
356 |           console.log('该浏览器不支持点击复制到剪贴板');
357 |         }
358 | 
359 |         document.body.removeChild(textArea);
360 |       },
361 |       stopPrevent() {
362 |       },
363 |       //详情页
364 |       navToDetailPage(item) {
365 |         uni.navigateTo({
366 |           url: `/pages/product/product?goodsId=${item.goodsId}`
367 |         })
368 |       }
369 |     },
370 | 
371 |   }
372 | </script>
373 | 
374 | <style lang='scss' scoped>
375 | 	page, .container{
376 | 		padding-bottom: 160upx;
377 | 		background: $page-color-base;
378 | 
379 | 	}
380 | 	.carousel {
381 | 		height: 722upx;
382 | 		position:relative;
383 | 		swiper{
384 | 			height: 100%;
385 | 		}
386 | 		.image-wrapper{
387 | 			width: 100%;
388 | 			height: 100%;
389 | 		}
390 | 		.swiper-item {
391 | 			display: flex;
392 | 			justify-content: center;
393 | 			align-content: center;
394 | 			height: 750upx;
395 | 			overflow: hidden;
396 | 			image {
397 | 				width: 100%;
398 | 				height: 100%;
399 | 			}
400 | 		}
401 | 
402 | 	}
403 | 
404 | 	.introduce-section{
405 | 		background: #fff;
406 | 		padding: 20upx 30upx;
407 | 
408 | 		.title{
409 | 			font-size: 32upx;
410 | 			color: $font-color-dark;
411 | 			height: 50upx;
412 | 			line-height: 50upx;
413 | 		}
414 | 		.price-box{
415 | 			display:flex;
416 | 			align-items:baseline;
417 | 			height: 64upx;
418 | 			padding: 10upx 0;
419 | 			font-size: 26upx;
420 | 			color:$uni-color-primary;
421 | 		}
422 | 
423 | 		.price-tip{
424 | 			font-size: $font-sm - 2upx;
425 | 		}
426 | 
427 | 		.price{
428 | 			font-weight: 500;
429 | 			font-size: $font-lg + 2upx;
430 | 		}
431 | 		.m-price{
432 | 			font-size: $font-sm - 4upx;
433 | 			margin:0 12upx;
434 | 			color: $font-color-light;
435 | 			text-decoration: line-through;
436 | 		}
437 | 		.coupon-tip{
438 | 			align-items: center;
439 | 			padding: 4upx 10upx;
440 | 			background: $uni-color-primary;
441 | 			font-size: $font-sm;
442 | 			color: #fff;
443 | 			border-radius: 6upx;
444 | 			line-height: 1;
445 | 			transform: translateY(-4upx);
446 | 		}
447 | 		.bot-row{
448 | 			display:flex;
449 | 			align-items:center;
450 | 			height: 50upx;
451 | 			font-size: $font-sm - 2upx;
452 | 			color: $font-color-light;
453 | 			text{
454 | 				flex: 1;
455 | 			}
456 | 		}
457 | 	}
458 | 
459 | 	/*  详情 */
460 | 	.detail-desc{
461 | 		background: #fff;
462 | 		margin-top: 16upx;
463 | 		.d-header{
464 | 			display: flex;
465 | 			justify-content: center;
466 | 			align-items: center;
467 | 			height: 80upx;
468 | 			font-size: $font-base + 2upx;
469 | 			color: $font-color-dark;
470 | 			position: relative;
471 | 
472 | 			text{
473 | 				padding: 0 20upx;
474 | 				background: #fff;
475 | 				position: relative;
476 | 				z-index: 1;
477 | 			}
478 | 			&:after{
479 | 				position: absolute;
480 | 				left: 50%;
481 | 				top: 50%;
482 | 				transform: translateX(-50%);
483 | 				width: 300upx;
484 | 				height: 0;
485 | 				content: '';
486 | 				border-bottom: 1px solid #ccc;
487 | 			}
488 | 		}
489 | 	}
490 | 
491 | 	/* 规格选择弹窗 */
492 | 	.attr-content{
493 | 		padding: 10upx 30upx;
494 | 		.a-t{
495 | 			display: flex;
496 | 			image{
497 | 				width: 170upx;
498 | 				height: 170upx;
499 | 				flex-shrink: 0;
500 | 				margin-top: -40upx;
501 | 				border-radius: 8upx;;
502 | 			}
503 | 			.right{
504 | 				display: flex;
505 | 				flex-direction: column;
506 | 				padding-left: 24upx;
507 | 				font-size: $font-sm + 2upx;
508 | 				color: $font-color-base;
509 | 				line-height: 42upx;
510 | 				.price{
511 | 					font-size: $font-lg;
512 | 					color: $uni-color-primary;
513 | 					margin-bottom: 10upx;
514 | 				}
515 | 				.selected-text{
516 | 					margin-right: 10upx;
517 | 				}
518 | 			}
519 | 		}
520 | 		.attr-list{
521 | 			display: flex;
522 | 			flex-direction: column;
523 | 			font-size: $font-base + 2upx;
524 | 			color: $font-color-base;
525 | 			padding-top: 30upx;
526 | 			padding-left: 10upx;
527 | 		}
528 | 		.item-list{
529 | 			padding: 20upx 0 0;
530 | 			display: flex;
531 | 			flex-wrap: wrap;
532 | 			text{
533 | 				display: flex;
534 | 				align-items: center;
535 | 				justify-content: center;
536 | 				background: #eee;
537 | 				margin-right: 20upx;
538 | 				margin-bottom: 20upx;
539 | 				border-radius: 100upx;
540 | 				min-width: 60upx;
541 | 				height: 60upx;
542 | 				padding: 0 20upx;
543 | 				font-size: $font-base;
544 | 				color: $font-color-dark;
545 | 			}
546 | 			.selected{
547 | 				background: #fbebee;
548 | 				color: $uni-color-primary;
549 | 			}
550 | 		}
551 | 	}
552 | 
553 | 	/*  弹出层 */
554 | 	.popup {
555 | 		position: fixed;
556 | 		left: 0;
557 | 		top: 0;
558 | 		right: 0;
559 | 		bottom: 0;
560 | 		z-index: 99;
561 | 
562 | 		&.show {
563 | 			display: block;
564 | 			.mask{
565 | 				animation: showPopup 0.2s linear both;
566 | 			}
567 | 			.layer {
568 | 				animation: showLayer 0.2s linear both;
569 | 			}
570 | 		}
571 | 		&.hide {
572 | 			.mask{
573 | 				animation: hidePopup 0.2s linear both;
574 | 			}
575 | 			.layer {
576 | 				animation: hideLayer 0.2s linear both;
577 | 			}
578 | 		}
579 | 		&.none {
580 | 			display: none;
581 | 		}
582 | 		.mask{
583 | 			position: fixed;
584 | 			top: 0;
585 | 			width: 100%;
586 | 			height: 100%;
587 | 			z-index: 1;
588 | 			background-color: rgba(0, 0, 0, 0.4);
589 | 		}
590 | 		.layer {
591 | 			position: fixed;
592 | 			z-index: 99;
593 | 			bottom: 0;
594 | 			width: 100%;
595 | 			min-height: 40vh;
596 | 			border-radius: 10upx 10upx 0 0;
597 | 			background-color: #fff;
598 | 			padding-bottom: 60upx;
599 | 
600 | 			.btn{
601 | 				height: 66upx;
602 | 				line-height: 66upx;
603 | 				border-radius: 4px;
604 | 				font-size: $font-base + 2upx;
605 | 				color: #fff;
606 | 			}
607 | 		}
608 | 		@keyframes showPopup {
609 | 			0% {
610 | 				opacity: 0;
611 | 			}
612 | 			100% {
613 | 				opacity: 1;
614 | 			}
615 | 		}
616 | 		@keyframes hidePopup {
617 | 			0% {
618 | 				opacity: 1;
619 | 			}
620 | 			100% {
621 | 				opacity: 0;
622 | 			}
623 | 		}
624 | 		@keyframes showLayer {
625 | 			0% {
626 | 				transform: translateY(120%);
627 | 			}
628 | 			100% {
629 | 				transform: translateY(0%);
630 | 			}
631 | 		}
632 | 		@keyframes hideLayer {
633 | 			0% {
634 | 				transform: translateY(0);
635 | 			}
636 | 			100% {
637 | 				transform: translateY(120%);
638 | 			}
639 | 		}
640 | 	}
641 | 
642 | 	/* 底部操作菜单 */
643 | 	.page-bottom{
644 | 		position:fixed;
645 | 		left: 30upx;
646 | 		bottom:30upx;
647 | 		z-index: 95;
648 | 		display: flex;
649 | 		justify-content: center;
650 | 		align-items: center;
651 | 		width: 690upx;
652 | 		height: 100upx;
653 | 		background: rgba(255,255,255,.9);
654 | 		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
655 | 		border-radius: 16upx;
656 | 
657 | 		.p-b-btn{
658 | 			display:flex;
659 | 			flex-direction: column;
660 | 			align-items: center;
661 | 			justify-content: center;
662 | 			font-size: $font-sm;
663 | 			color: $font-color-base;
664 | 			width: 96upx;
665 | 			height: 80upx;
666 | 		}
667 | 		.action-btn-group{
668 | 			display: flex;
669 | 			height: 76upx;
670 | 			border-radius: 100px;
671 | 			overflow: hidden;
672 | 			box-shadow: 0 20upx 40upx -16upx #fa436a;
673 | 			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
674 | 			background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
675 | 			margin-left: 60upx;
676 | 			position:relative;
677 | 			&:after{
678 | 				content: '';
679 | 				position:absolute;
680 | 				top: 50%;
681 | 				right: 50%;
682 | 				transform: translateY(-50%);
683 | 				height: 28upx;
684 | 				width: 0;
685 | 				border-right: 1px solid rgba(255,255,255,.5);
686 | 			}
687 | 			.action-btn{
688 | 				display:flex;
689 | 				align-items: center;
690 | 				justify-content: center;
691 | 				width: 160upx;
692 | 				height: 100%;
693 | 				font-size: $font-base ;
694 | 				padding: 0;
695 | 				border-radius: 0;
696 | 				background: transparent;
697 | 			}
698 | 		}
699 | 	}
700 | 
701 | 	.coupon {
702 | 		height: 70px;
703 | 		background: url(https://cmsstatic.ffquan.cn/wap_new/main/images/icon-bg-001.png?v=2020-02-29) no-repeat;
704 | 		background-size: 100% 100%;
705 | 		display: flex;
706 | 		color: #fff;
707 | 		align-content: center;
708 | 		margin: 0 20upx 10upx 20upx;
709 | 
710 | 		.div-left {
711 | 			flex: 1;
712 | 			padding-left: 30upx;
713 | 			padding-top: 14px;
714 | 		}
715 | 
716 | 		.div-right {
717 | 			height: 70px;
718 | 			line-height: 70px;
719 | 			background-size: auto 100%;
720 | 			width: 120px;
721 | 			text-align: center;
722 | 			color: #FE3738;
723 | 			font-size: 13px;
724 | 			padding-left: 30upx;
725 | 
726 | 		}
727 | 	}
728 | 
729 | 	.good-desc {
730 | 		padding: 0 30upx 20upx 30upx;
731 | 		font-size: $font-sm - 2upx;
732 | 		color: $font-color-light;
733 | 		background-color: white;
734 | 	}
735 | 
736 | 	.store-info{
737 | 		background-color: white;
738 | 		margin-top: 16upx;
739 | 		padding: 20upx 30upx;
740 | 
741 | 		.store-evaluate {
742 | 			margin-top: 10upx;
743 | 			text {
744 | 				display: inline-block;
745 | 				width: 33.3%;
746 | 				font-size: 12px;
747 | 				color: gray;
748 | 			}
749 | 		}
750 | 	}
751 | 
752 | 	.spec{
753 | 		.center-text {
754 | 			border: 1px solid #FF3739;
755 | 			background: #FFF4F4;
756 | 			color: #333;
757 | 			border-radius: 4px;
758 | 			text-align: center;
759 | 			padding: 40upx 10upx;
760 | 			text {
761 | 				color: #333;
762 | 				font-size: 12px;
763 | 			}
764 | 		}
765 | 
766 | 		.tip {
767 | 			font-size: 11px;
768 | 			color: gray;
769 | 		}
770 | 
771 | 		.stock {
772 | 			font-size: 11px;
773 | 		}
774 | 	}
775 | 
776 | 
777 | </style>
778 | 


--------------------------------------------------------------------------------
/pages/public/guide.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view class="container">
 3 |         <title-nav bg-color="bg-white solid-bottom" :isBack="true">
 4 |             <block slot="content">新手引导</block>
 5 |         </title-nav>
 6 |         <rich-text :nodes="images"></rich-text>
 7 |     </view>
 8 | </template>
 9 | 
10 | <script>
11 |     export default {
12 |         components: {},
13 |         data() {
14 |             return {
15 |                 images: [{
16 |                     name: "div",
17 |                     attrs: {
18 |                         style: "width:100%"
19 |                     },
20 |                     children: [{
21 |                         name: "img",
22 |                         attrs: {
23 |                             src: 'https://cmsstatic.ffquan.cn//wap_new/activity/voucher_help/ant_01.jpg?v=202003091818',
24 |                             style: "width:100%;display:block;"
25 |                         }
26 |                     }, {
27 |                         name: "img",
28 |                         attrs: {
29 |                             src: 'https://cmsstatic.ffquan.cn//wap_new/activity/voucher_help/ant_02.jpg?v=202003091818',
30 |                             style: "width:100%;display:block;"
31 |                         }
32 |                     }, {
33 |                         name: "img",
34 |                         attrs: {
35 |                             src: 'https://cmsstatic.ffquan.cn//wap_new/activity/voucher_help/ant_03.jpg?v=202003091818',
36 |                             style: "width:100%;display:block;"
37 |                         }
38 |                     }, {
39 |                         name: "img",
40 |                         attrs: {
41 |                             src: 'https://cmsstatic.ffquan.cn//wap_new/activity/voucher_help/ant_04.jpg?v=202003091818',
42 |                             style: "width:100%;display:block;"
43 |                         }
44 |                     }, {
45 |                         name: "img",
46 |                         attrs: {
47 |                             src: 'https://cmsstatic.ffquan.cn//wap_new/activity/voucher_help/ant_05.jpg?v=202003091818',
48 |                             style: "width:100%;display:block;"
49 |                         }
50 |                     }, {
51 |                         name: "img",
52 |                         attrs: {
53 |                             src: 'https://cmsstatic.ffquan.cn//wap_new/activity/voucher_help/ant_06.jpg?v=202003091818',
54 |                             style: "width:100%;display:block;"
55 |                         }
56 |                     }, {
57 |                         name: "img",
58 |                         attrs: {
59 |                             src: 'https://cmsstatic.ffquan.cn//wap_new/activity/voucher_help/ant_07.jpg?v=202003091818',
60 |                             style: "width:100%;display:block;"
61 |                         }
62 |                     }]
63 |                 }]
64 |             };
65 |         },
66 |         onLoad() {
67 |         },
68 |         onShareAppMessage(res) {
69 |             return {
70 |                 title: '新手教程',
71 |                 path: '/pages/user/guide',
72 |                 imageUrl: 'https://cmsstatic.ffquan.cn//wap_new/activity/voucher_help/ant_01.jpg?v=202003091818'
73 |             }
74 |         },
75 |         methods: {}
76 |     }
77 | </script>
78 | 
79 | <style lang='scss' scoped>
80 | 
81 | </style>
82 | 


--------------------------------------------------------------------------------
/pages/public/login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="container">
  3 |     <title-nav bg-color="bg-white solid-bottom text-black" :isBack="true">
  4 |       <block slot="content">登录</block>
  5 |     </title-nav>
  6 | 
  7 |     <view class="logo margin-top-xl flex justify-center">
  8 |       <image mode="aspectFit" src="/static/logo.png"></image>
  9 |     </view>
 10 | 
 11 |     <view class="login-form margin-top-xl">
 12 |       <form>
 13 |         <view class="cu-form-group">
 14 |           <view class="title">
 15 |             <text class="icon icon-mobilefill text-black"></text>
 16 |           </view>
 17 |           <input placeholder="请输入手机号" v-model="mobile" name="input"/>
 18 |         </view>
 19 | 
 20 |         <view class="cu-form-group">
 21 |           <view class="title">
 22 |             <text class="icon icon-messagefill text-black"></text>
 23 |           </view>
 24 |           <input placeholder="请输入验证码" v-model="code" name="input"/>
 25 |           <text class='text-orange' v-if="coding === false" @tap="generateCode()">获取验证码</text>
 26 |           <view v-else><text class="text-orange text-sm">{{ authTime }}秒后获取</text></view>
 27 |         </view>
 28 |       </form>
 29 | 
 30 |       <view class="login-btn flex justify-center">
 31 |         <text class="icon icon-roundrightfill text-lg text-orange" @tap="doLogin"></text>
 32 |       </view>
 33 | 
 34 |       <view class="tips flex justify-center margin-top-xl">
 35 |         <view>
 36 |           <text class="text-gray text-sm">登录即表示同意</text>
 37 |           <text class="text-gray text-sm agreement"
 38 |                 @tap="navToWebView('用户协议', 40, 'http://static.szjx.top/agreement.html')">用户协议</text>
 39 |         </view>
 40 |       </view>
 41 | 
 42 |     </view>
 43 | 
 44 |   </view>
 45 | </template>
 46 | 
 47 | <script>
 48 |   import { mapMutations } from 'vuex';
 49 |   // #ifdef APP-PLUS
 50 |   const hsMobmessage = uni.requireNativePlugin('Hs-MobMessage');
 51 |   // #endif
 52 | 
 53 |   export default {
 54 |     data() {
 55 |       return {
 56 |         mobile: '',
 57 |         code: '',
 58 |         coding: false,
 59 |         authTime: 60
 60 |       }
 61 |     },
 62 |     onLoad() {
 63 |     },
 64 |     methods: {
 65 |       ...mapMutations(['storeToken', 'storeUser']),
 66 |       // 获取验证码
 67 |       async generateCode() {
 68 |         if(!this.mobile) {
 69 |           uni.showToast({ icon: 'none', title: '手机号必填' });
 70 |           return false;
 71 |         }
 72 |         let myReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
 73 |         if (!myReg.test(this.mobile)) {
 74 |           uni.showToast({ icon: 'none', title: '请输入正确的手机号' });
 75 |           return false;
 76 |         }
 77 |         //设置倒计时秒
 78 |         this.authTime = 60;
 79 |         this.coding = true;
 80 |         let authTimer = setInterval(() => {
 81 |           this.authTime--;
 82 |           if (this.authTime < 0) {
 83 |             this.coding = false;
 84 |             clearInterval(authTimer);
 85 |           }
 86 |         }, 1000);
 87 |         //发送验证码
 88 |         // #ifdef APP-PLUS
 89 |         hsMobmessage.sendCode({
 90 |           phoneNumber: this.mobile,
 91 |           zone: "86",
 92 |           template: '',
 93 |           getCodeMethod: 'SMS',
 94 |         }, result => {
 95 |           if(result === 'error') {
 96 |             uni.showToast({ icon: 'none', title: '操作太频繁，请稍后再试' });
 97 |           }
 98 |         });
 99 |         // #endif
100 |       },
101 |       navToWebView(title, top, url) {
102 |         // #ifdef H5
103 |         window.open(url)
104 |         // #endif
105 |         // #ifndef H5
106 |         uni.navigateTo({
107 |           url: '/pages/webview/index?top=' + top + '&title=' + title + '&url=' + encodeURIComponent(url)
108 |         });
109 |         // #endif
110 |       },
111 |       doLogin() {
112 |         let phoneReg = /^1[1-9][0-9]\d{8}$/;
113 |         try {
114 |           if (this.mobile === '') {
115 |             throw '请填写手机号';
116 |           }
117 |           if (!phoneReg.test(this.mobile)) {
118 |             throw '手机号格式有误';
119 |           }
120 |           if (this.code === '') {
121 |             throw '请填写验证码';
122 |           }
123 |         } catch (err) {
124 |           uni.showToast({ title: err, icon: 'none', duration: 2000 });
125 |           return;
126 |         }
127 | 
128 |         this.$api.backend.htmlLogin(this.mobile, this.code).then(resp => {
129 |           if(resp.responseCode === 7001){
130 |             uni.showToast({ title: "验证码错误或已过期", icon: 'none', duration: 2000 });
131 |             return
132 |           }
133 |           this.storeToken(resp.data.xAuthToken)
134 |           this.$api.backend.getLoginUser().then(resp => {
135 |             this.storeUser(resp.data)
136 |             this.navBack()
137 |           })
138 |         })
139 |       },
140 |       navBack(){
141 |         let url = '/pages/user/user'
142 |         return uni.switchTab({ url })
143 |       }
144 | 
145 |     }
146 | 
147 |   }
148 | </script>
149 | 
150 | <style lang='scss' scoped>
151 |   page{
152 |     background: #fff;
153 |   }
154 | 
155 |   .container{
156 |     position:relative;
157 |     width: 100vw;
158 |     height: 100vh;
159 |     overflow: hidden;
160 |     background: #fff;
161 |   }
162 | 
163 |   .logo {
164 | 		image{
165 |       height: 100px;
166 |     }
167 |   }
168 | 
169 |   .agreement {
170 |     text-decoration: underline;
171 |   }
172 | 
173 |   .login-btn {
174 |     margin-top: 90upx;
175 | 
176 |     text{
177 |       font-size: 60px;
178 | 
179 |     }
180 |   }
181 | 
182 | </style>
183 | 


--------------------------------------------------------------------------------
/pages/rank/rank.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view class="container">
 3 |         <title-nav bg-color="bg-white solid-bottom" :isBack="true">
 4 |             <block slot="content">实时疯抢榜</block>
 5 |         </title-nav>
 6 |         <tab class="nav fixed" :items="items" :textProp="'cname'" @tabselect="tabSelect" :style="'top:'+CustomBar+'px'"></tab>
 7 |         <view style="height: 45px"></view>
 8 |         <view class="main-content">
 9 |             <refresh @onRefresh="onRefresh" :pullupLoadingType="loadingType">
10 |                 <product-list :list="goodsList"></product-list>
11 |             </refresh>
12 |         </view>
13 |     </view>
14 | </template>
15 | 
16 | <script>
17 |     import {mapState} from 'vuex';
18 |     import ProductList from "@/components/ProductList/HorizontalLayout"
19 |     import Refresh from '@/components/Refresh'
20 |     import Tab from '@/components/Tab'
21 | 
22 |     export default {
23 |         components: { ProductList, Tab, Refresh },
24 |         data() {
25 |             return {
26 |                 CustomBar: this.CustomBar,
27 |                 goodsList: [],
28 |                 loadingType: 'loading', //加载更多状态
29 |                 cid: 1,
30 |                 items: []
31 |             };
32 |         },
33 |         async onLoad() {
34 |             this.items = this.$cache.get('category_cached', []);
35 |             if (this.items.length === 0) {
36 |                 let list = await this.$api.backend.getCate();
37 |                 this.items = list.data;
38 |                 this.$cache.put('category_cached', this.items, 60*60*7)
39 |             }
40 |             this.cid = this.items[0].cid
41 |             this.loadData()
42 |         },
43 |         onReachBottom(){
44 |         },
45 |         computed: {},
46 |         methods: {
47 |             //请求数据
48 |             async loadData(type='add'){
49 |                 //没有更多直接返回
50 |                 if(type === 'add'){
51 |                     this.loadingType = 'loading';
52 |                 }else{
53 |                     this.loadingType = 'more'
54 |                 }
55 |                 let result = await this.$api.backend.getRankGoods(this.cid);
56 |                 if(type === 'refresh'){
57 |                     this.goodsList = [];
58 |                 }
59 |                 let items = result.data;
60 |                 this.goodsList = this.goodsList.concat(items);
61 |                 this.loadingType  = 'nomore'
62 |                 uni.hideLoading()
63 |             },
64 |             onRefresh() {
65 |                 this.loadData('refresh');
66 |                 this.loadingType = 'loading'
67 |             },
68 |             tabSelect(index, item) {
69 | 				uni.showLoading()
70 |                 this.cid = item.cid
71 |                 this.loadData('refresh');
72 |                 this.loadingType = 'loading'
73 |                 uni.pageScrollTo({
74 |                     duration: 300,
75 |                     scrollTop: 0
76 |                 })
77 |             }
78 |         }
79 |     }
80 | </script>
81 | 
82 | <style lang='scss' scoped>
83 | page, .main-content {
84 |     background: $page-color-base;
85 |     height: 100%;
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/pages/search/result.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="container">
 3 | 		<title-nav bg-color="bg-white solid-bottom" :isBack="true">
 4 | 			<block slot="content">搜索结果</block>
 5 | 		</title-nav>
 6 | 		<sort-navbar :headerTop="CustomBar+'px'" @sort="sortClick"></sort-navbar>
 7 | 		<view style="height: 40px"></view>
 8 | 		<view class="main-content">
 9 | 			<refresh @onRefresh="onRefresh" :pullupLoadingType="loadingType">
10 | 				<product-list :list="goodsList"></product-list>
11 | 			</refresh>
12 | 		</view>
13 | 	</view>
14 | </template>
15 | 
16 | <script>
17 |   import SortNavbar from "@/components/SortNavbar2"
18 |   import ProductList from "@/components/ProductList/BoxLayout"
19 |   import Refresh from '@/components/Refresh'
20 | 
21 |   export default {
22 |     components: {
23 |       ProductList, SortNavbar, Refresh
24 |     },
25 |     data() {
26 |       return {
27 |         CustomBar: this.CustomBar,
28 |         loadingType: 'loading', //加载更多状态
29 |         goodsList: [],
30 |         page: 1,
31 |         sort: 'tk_total_sales_des',
32 |         hasCoupon: false,
33 |         keyword: null
34 |       };
35 |     },
36 |     onLoad(options) {
37 |       this.keyword = options.keyword;
38 |       this.loadData();
39 |     },
40 |     onReachBottom() {
41 |       this.loadData();
42 |     },
43 |     methods: {
44 |       async loadData(type = 'add') {
45 |         //没有更多直接返回
46 |         if (type === 'add') {
47 |           if (this.loadingType === 'nomore') {
48 |             return;
49 |           }
50 |           this.loadingType = 'loading';
51 |         } else {
52 |           this.loadingType = 'more'
53 |         }
54 |         if (type === 'refresh') {
55 |           this.page = 1;
56 |         }
57 |         // uni.showLoading()
58 | 				let result = await this.$api.backend.search2(this.keyword, this.page++, this.sort, this.hasCoupon);
59 | 				if(!result.data || result.data.length === 0) {
60 | 					this.loadingType = 'nomore'
61 | 					return;
62 | 				}
63 | 				if (type === 'refresh') {
64 | 					this.goodsList = [];
65 | 				}
66 | 				this.goodsList = this.goodsList.concat(result.data);
67 |         this.loadingType = this.goodsList.length === 0 ? 'nomore' : 'more';
68 |         // uni.hideLoading()
69 |       },
70 |       onRefresh() {
71 |         this.loadData('refresh');
72 |         this.loadingType = 'loading'
73 |       },
74 |       sortClick(eventData) {
75 |         this.sort = eventData.sort;
76 |         this.hasCoupon = eventData.hasCoupon;
77 |         this.loadData('refresh');
78 |         this.loadingType = 'loading'
79 |         uni.pageScrollTo({
80 |           duration: 300,
81 |           scrollTop: 0
82 |         })
83 |       }
84 |     }
85 |   }
86 | </script>
87 | 
88 | <style lang="scss" scoped>
89 | 	page, .main-content{
90 | 		background: $page-color-base;
91 | 		height: 100%;
92 | 	}
93 | </style>
94 | 


--------------------------------------------------------------------------------
/pages/search/search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<title-nav bg-color="bg-white solid-bottom text-black" :isBack="true">
  4 | 			<!--#ifdef APP-PLUS || H5-->
  5 | 			<block slot="custom">
  6 | 				<view class="cu-bar search bg-white" style="width: 100%;">
  7 | 					<view class="search-form padding-left-xs">
  8 | 						<text class="icon icon-search text-grey"></text>
  9 | 						<input class="margin-left-xs" v-model="keyword" type="search" @input="inputChange" @confirm="doSearch(false)" :placeholder="defaultKeyword"/>
 10 | 					</view>
 11 | 				</view>
 12 | 				<view class="action" style="width:100px;">
 13 | 					<button class="cu-btn shadow-blur" @tap="doSearch(false)">搜索</button>
 14 | 				</view>
 15 | 			</block>
 16 | 			<!-- #endif -->
 17 | 			<!--#ifdef MP-WEIXIN || MP-QQ-->
 18 | 			<block slot="content">搜索</block>
 19 | 			<!-- #endif -->
 20 | 		</title-nav>
 21 | 
 22 | 		<!--#ifdef MP-WEIXIN || MP-QQ-->
 23 | 		<view style="display: flex;">
 24 | 			<view class="cu-bar search bg-white" style="width: 100%;padding-top:5px;">
 25 | 				<view class="search-form padding-left-xs">
 26 | 					<text class="icon icon-search text-grey"></text>
 27 | 					<input class="margin-left-xs" v-model="keyword" type="search" @input="inputChange" @confirm="doSearch(false)" :placeholder="defaultKeyword"/>
 28 | 				</view>
 29 | 			</view>
 30 | 			<view class="action" style="width:100px;background-color: white;padding-top:5px;">
 31 | 				<button class="cu-btn shadow-blur" @tap="doSearch(false)">搜索</button>
 32 | 			</view>
 33 | 		</view>
 34 | 		<!-- #endif -->
 35 | 
 36 | 		<view class="search-keyword">
 37 | 			<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
 38 | 				<view class="keyword-entry" hover-class="keyword-entry-tap" v-for="row in keywordList" :key="row.keyword">
 39 | 					<view class="keyword-text" @tap="doSearch(row.keyword)"><rich-text :nodes="row.htmlStr"></rich-text></view>
 40 | 				</view>
 41 | 			</scroll-view>
 42 | 			<scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
 43 | 				<view class="keyword-block" v-if="oldKeywordList.length > 0">
 44 | 					<view class="keyword-list-header solid-bottom">
 45 | 						<view>历史搜索</view>
 46 | 						<view @tap="oldDelete"><text class="icon icon-delete text-grey"></text></view>
 47 | 					</view>
 48 | 					<view class="keyword">
 49 | 						<view v-for="(keyword, index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view>
 50 | 					</view>
 51 | 				</view>
 52 | 				<view class="keyword-block">
 53 | 					<view class="keyword-list-header solid-bottom">
 54 | 						<view>热门搜索</view>
 55 | 						<view @tap="hotToggle"><text class="icon text-grey" :class="!forbid?'icon-attention':'icon-attentionforbid'"></text></view>
 56 | 					</view>
 57 | 					<view class="keyword" v-if="!forbid">
 58 | 						<view v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view>
 59 | 					</view>
 60 | 					<view class="hide-hot-tis padding-top-xs" v-else><view>当前搜热门搜索已隐藏</view></view>
 61 | 				</view>
 62 | 			</scroll-view>
 63 | 		</view>
 64 | 
 65 | 
 66 | 	</view>
 67 | </template>
 68 | 
 69 | <script>
 70 |   export default {
 71 |     components: {},
 72 |     data() {
 73 |       return {
 74 |         defaultKeyword: '',
 75 |         keyword: '',
 76 |         oldKeywordList: [],
 77 |         hotKeywordList: [],
 78 |         keywordList: [],
 79 |         forbid: false,
 80 |         isShowKeywordList: false
 81 |       };
 82 |     },
 83 |     onLoad() {
 84 |       this.init();
 85 |     },
 86 |     methods: {
 87 |       init() {
 88 |         this.loadDefaultKeyword();
 89 |         this.loadOldKeyword();
 90 |         this.loadHotKeyword();
 91 |       },
 92 |       //加载默认搜索关键字
 93 |       loadDefaultKeyword() {
 94 |         uni.getStorage({
 95 |           key: 'oldkeys',
 96 |           success: res => {
 97 |             var oldkeys = JSON.parse(res.data);
 98 |             this.defaultKeyword = oldkeys[0];
 99 |           },
100 |           fail: res => {
101 |             this.defaultKeyword = "请搜索时尚商品"
102 |           }
103 |         });
104 |       },
105 |       //加载历史搜索,自动读取本地Storage
106 |       loadOldKeyword() {
107 |         uni.getStorage({
108 |           key: 'oldkeys',
109 |           success: res => {
110 |             this.oldKeywordList = JSON.parse(res.data);
111 |           }
112 |         });
113 |       },
114 |       //加载热门搜索
115 |       async loadHotKeyword() {
116 |         this.hotKeywordList = this.$cache.get('hot_keywords', []);
117 |         if (this.hotKeywordList.length === 0) {
118 |           let response = await this.$api.backend.getHotSearch();
119 |           this.$cache.put('hot_keywords', response.data, 60 * 60 * 24)
120 |           this.hotKeywordList = response.data
121 |         }
122 |         if (!this.defaultKeyword) {
123 |           this.defaultKeyword = this.hotKeywordList[0]
124 |         }
125 |       },
126 |       //监听输入
127 |       inputChange(event) {
128 |         //兼容引入组件时传入参数情况
129 |         var keyword = event.detail ? event.detail.value : event;
130 |         if (!keyword) {
131 |           this.keywordList = [];
132 |           this.isShowKeywordList = false;
133 |           return;
134 |         }
135 |         this.isShowKeywordList = true;
136 |         //以下示例截取淘宝的关键字，请替换成你的接口
137 |         uni.request({
138 |           url: 'https://suggest.taobao.com/sug?code=utf-8&q=' + keyword, //仅为示例
139 |           success: res => {
140 |             this.keywordList = this.drawCorrelativeKeyword(res.data.result, keyword);
141 |           }
142 |         });
143 |       },
144 |       //高亮关键字
145 |       drawCorrelativeKeyword(keywords, keyword) {
146 |         var len = keywords.length,
147 |           keywordArr = [];
148 |         for (var i = 0; i < len; i++) {
149 |           var row = keywords[i];
150 |           //定义高亮#9f9f9f
151 |           var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + '</span>');
152 |           html = '<div>' + html + '</div>';
153 |           var tmpObj = {
154 |             keyword: row[0],
155 |             htmlStr: html
156 |           };
157 |           keywordArr.push(tmpObj);
158 |         }
159 |         return keywordArr;
160 |       },
161 |       //清除历史搜索
162 |       oldDelete() {
163 |         uni.showModal({
164 |           content: '确定清除历史搜索记录？',
165 |           success: res => {
166 |             if (res.confirm) {
167 |               this.oldKeywordList = [];
168 |               uni.removeStorage({
169 |                 key: 'oldkeys'
170 |               });
171 |             } else if (res.cancel) {
172 |             }
173 |           }
174 |         });
175 |       },
176 |       //热门搜索开关
177 |       hotToggle() {
178 |         this.forbid = !this.forbid;
179 |       },
180 |       //执行搜索
181 |       async doSearch(key) {
182 |         key = key ? key : this.keyword ? this.keyword : this.defaultKeyword;
183 |         this.keyword = key;
184 |         this.saveKeyword(key); //保存为历史
185 |         uni.navigateTo({
186 |           url: `/pages/search/result?keyword=${key}`
187 |         });
188 |       },
189 |       //保存关键字到历史记录
190 |       saveKeyword(keyword) {
191 |         uni.getStorage({
192 |           key: 'oldkeys',
193 |           success: res => {
194 |             var oldkeys = JSON.parse(res.data);
195 |             var findIndex = oldkeys.indexOf(keyword);
196 |             if (findIndex === -1) {
197 |               oldkeys.unshift(keyword);
198 |             } else {
199 |               oldkeys.splice(findIndex, 1);
200 |               oldkeys.unshift(keyword);
201 |             }
202 |             //最多10个纪录
203 |             oldkeys.length > 10 && oldkeys.pop();
204 |             uni.setStorage({
205 |               key: 'oldkeys',
206 |               data: JSON.stringify(oldkeys)
207 |             });
208 |             this.oldKeywordList = oldkeys; //更新历史搜索
209 |           },
210 |           fail: e => {
211 |             var oldkeys = [keyword];
212 |             uni.setStorage({
213 |               key: 'oldkeys',
214 |               data: JSON.stringify(oldkeys)
215 |             });
216 |             this.oldKeywordList = oldkeys; //更新历史搜索
217 |           }
218 |         });
219 |       }
220 |     }
221 |   };
222 | </script>
223 | <style scoped>
224 | view {
225 | 	display: block;
226 | }
227 | .search-keyword {
228 | 	width: 100%;
229 | 	background-color: rgb(242, 242, 242);
230 | }
231 | .keyword-list-box {
232 | 	height: calc(100vh - 110upx);
233 | 	padding-top: 10upx;
234 | 	background-color: #fff;
235 | }
236 | .keyword-entry {
237 | 	width: 94%;
238 | 	height: 80upx;
239 | 	margin: 0 3%;
240 | 	font-size: 30upx;
241 | 	color: #333;
242 | 	display: flex;
243 | 	justify-content: space-between;
244 | 	align-items: center;
245 | 	border-bottom: solid 1upx #e7e7e7;
246 | }
247 | .keyword-entry image {
248 | 	width: 60upx;
249 | 	height: 60upx;
250 | }
251 | .keyword-entry .keyword-text,
252 | .keyword-entry .keyword-img {
253 | 	height: 80upx;
254 | 	display: flex;
255 | 	align-items: center;
256 | }
257 | .keyword-entry .keyword-text {
258 | 	width: 90%;
259 | }
260 | .keyword-entry .keyword-img {
261 | 	width: 10%;
262 | 	justify-content: center;
263 | }
264 | .keyword-box {
265 | 	height: calc(100vh - 110upx);
266 | 	background-color: #fff;
267 | }
268 | .keyword-box .keyword-block {
269 | 	padding: 10upx 0;
270 | }
271 | .keyword-box .keyword-block .keyword-list-header {
272 | 	width: 100%;
273 | 	padding: 10upx 3%;
274 | 	font-size: 27upx;
275 | 	color: #333;
276 | 	display: flex;
277 | 	justify-content: space-between;
278 | }
279 | .keyword-box .keyword-block .keyword-list-header image {
280 | 	width: 40upx;
281 | 	height: 40upx;
282 | }
283 | .keyword-box .keyword-block .keyword {
284 | 	width: 100%;
285 | 	padding: 3px 3%;
286 | 	display: flex;
287 | 	flex-flow: wrap;
288 | 	justify-content: flex-start;
289 | }
290 | .keyword-box .keyword-block .hide-hot-tis {
291 | 	display: flex;
292 | 	justify-content: center;
293 | 	font-size: 28upx;
294 | 	color: #6b6b6b;
295 | }
296 | .keyword-box .keyword-block .keyword > view {
297 | 	display: flex;
298 | 	justify-content: center;
299 | 	align-items: center;
300 | 	border-radius: 10upx;
301 | 	padding: 0 30upx;
302 | 	margin: 10upx 20upx 10upx 0;
303 | 	height: 60upx;
304 | 	font-size: 28upx;
305 | 	background-color: rgb(242, 242, 242);
306 | 	color: #6b6b6b;
307 | }
308 | </style>
309 | 


--------------------------------------------------------------------------------
/pages/user/message.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<title-nav bg-color="bg-white solid-bottom" :isBack="true">
  4 | 			<block slot="content">消息中心</block>
  5 | 		</title-nav>
  6 | 		<view class="notice-item">
  7 | 			<text class="time">11:30</text>
  8 | 			<view class="content">
  9 | 				<text class="title">新品上市，全场满199减50</text>
 10 | 				<view class="img-wrapper">
 11 | 					<image class="pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556465765776&di=57bb5ff70dc4f67dcdb856e5d123c9e7&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01fd015aa4d95fa801206d96069229.jpg%401280w_1l_2o_100sh.jpg"></image>
 12 | 				</view>
 13 | 				<text class="introduce">
 14 | 					虽然做了一件好事，但很有可能因此招来他人的无端猜测，例如被质疑是否藏有其他利己动机等，乃至谴责。即便如此，还是要做好事。
 15 | 				</text>
 16 | 				<view class="bot b-t">
 17 | 					<text>查看详情</text>
 18 | 					<text class="more-icon yticon icon-you"></text>
 19 | 				</view>
 20 | 			</view>
 21 | 		</view>
 22 | 		<view class="notice-item">
 23 | 			<text class="time">昨天 12:30</text>
 24 | 			<view class="content">
 25 | 				<text class="title">新品上市，全场满199减50</text>
 26 | 				<view class="img-wrapper">
 27 | 					<image class="pic" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3761064275,227090144&fm=26&gp=0.jpg"></image>
 28 | 					<view class="cover">
 29 | 						活动结束
 30 | 					</view>
 31 | 				</view>
 32 | 				<view class="bot b-t">
 33 | 					<text>查看详情</text>
 34 | 					<text class="more-icon yticon icon-you"></text>
 35 | 				</view>
 36 | 			</view>
 37 | 		</view>
 38 | 		<view class="notice-item">
 39 | 			<text class="time">2019-07-26 12:30</text>
 40 | 			<view class="content">
 41 | 				<text class="title">新品上市，全场满199减50</text>
 42 | 				<view class="img-wrapper">
 43 | 					<image class="pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556465765776&di=57bb5ff70dc4f67dcdb856e5d123c9e7&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01fd015aa4d95fa801206d96069229.jpg%401280w_1l_2o_100sh.jpg"></image>
 44 | 					<view class="cover">
 45 | 						活动结束
 46 | 					</view>
 47 | 				</view>
 48 | 				<text class="introduce">新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起</text>
 49 | 				<view class="bot b-t">
 50 | 					<text>查看详情</text>
 51 | 					<text class="more-icon yticon icon-you"></text>
 52 | 				</view>
 53 | 			</view>
 54 | 		</view>
 55 | 	</view>
 56 | </template>
 57 | 
 58 | <script>
 59 | 	export default {
 60 | 		data() {
 61 | 			return {
 62 | 
 63 | 			}
 64 | 		},
 65 | 		methods: {
 66 | 
 67 | 		}
 68 | 	}
 69 | </script>
 70 | 
 71 | <style lang='scss'>
 72 | 	page {
 73 | 		background-color: #f7f7f7;
 74 | 		padding-bottom: 30upx;
 75 | 	}
 76 | 
 77 | 	.notice-item {
 78 | 		display: flex;
 79 | 		flex-direction: column;
 80 | 		align-items: center;
 81 | 	}
 82 | 
 83 | 	.time {
 84 | 		display: flex;
 85 | 		align-items: center;
 86 | 		justify-content: center;
 87 | 		height: 80upx;
 88 | 		padding-top: 10upx;
 89 | 		font-size: 26upx;
 90 | 		color: #7d7d7d;
 91 | 	}
 92 | 
 93 | 	.content {
 94 | 		width: 710upx;
 95 | 		padding: 0 24upx;
 96 | 		background-color: #fff;
 97 | 		border-radius: 4upx;
 98 | 	}
 99 | 
100 | 	.title {
101 | 		display: flex;
102 | 		align-items: center;
103 | 		height: 90upx;
104 | 		font-size: 32upx;
105 | 		color: #303133;
106 | 	}
107 | 
108 | 	.img-wrapper {
109 | 		width: 100%;
110 | 		height: 260upx;
111 | 		position: relative;
112 | 	}
113 | 
114 | 	.pic {
115 | 		display: block;
116 | 		width: 100%;
117 | 		height: 100%;
118 | 		border-radius: 6upx;
119 | 	}
120 | 
121 | 	.cover {
122 | 		display: flex;
123 | 		justify-content: center;
124 | 		align-items: center;
125 | 		position: absolute;
126 | 		left: 0;
127 | 		top: 0;
128 | 		width: 100%;
129 | 		height: 100%;
130 | 		background-color: rgba(0, 0, 0, .5);
131 | 		font-size: 36upx;
132 | 		color: #fff;
133 | 	}
134 | 
135 | 	.introduce {
136 | 		display: inline-block;
137 | 		padding: 16upx 0;
138 | 		font-size: 28upx;
139 | 		color: #606266;
140 | 		line-height: 38upx;
141 | 	}
142 | 
143 | 	.bot {
144 | 		display: flex;
145 | 		align-items: center;
146 | 		justify-content: space-between;
147 | 		height: 80upx;
148 | 		font-size: 24upx;
149 | 		color: #707070;
150 | 		position: relative;
151 | 	}
152 | 
153 | 	.more-icon {
154 | 		font-size: 32upx;
155 | 	}
156 | </style>
157 | 


--------------------------------------------------------------------------------
/pages/user/set.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<title-nav bg-color="bg-white solid-bottom" :isBack="true">
  4 | 			<block slot="content">设置</block>
  5 | 		</title-nav>
  6 | 
  7 | 		<!--<view class="list-cell m-t">-->
  8 | 			<!--<text class="cell-tit">消息推送</text>-->
  9 | 			<!--<switch checked color="#fa436a" @change="switchChange" />-->
 10 | 		<!--</view>-->
 11 | 		<!--<view class="list-cell m-t b-b" @click="navTo('清除缓存')" hover-class="cell-hover" :hover-stay-time="50">-->
 12 | 			<!--<text class="cell-tit">清除缓存</text>-->
 13 | 			<!--<text class="cell-more icon icon-right"></text>-->
 14 | 		<!--</view>-->
 15 | 		<!--<view class="list-cell b-b" @click="navTo('关于美券')" hover-class="cell-hover" :hover-stay-time="50">-->
 16 | 			<!--<text class="cell-tit">关于美券</text>-->
 17 | 			<!--<text class="cell-more icon icon-right"></text>-->
 18 | 		<!--</view>-->
 19 | 		<view class="list-cell">
 20 | 			<text class="cell-tit">检查更新</text>
 21 | 			<text class="cell-tip">当前版本 1.0.3</text>
 22 | 			<text class="cell-more icon icon-right"></text>
 23 | 		</view>
 24 | 		<view class="list-cell log-out-btn" v-if="hasLogin" @click="toLogout">
 25 | 			<text class="cell-tit">退出登录</text>
 26 | 		</view>
 27 | 	</view>
 28 | </template>
 29 | 
 30 | <script>
 31 |   import {
 32 | 	    mapMutations, mapGetters
 33 | 	} from 'vuex';
 34 | 	export default {
 35 |     components: {
 36 |     },
 37 | 		data() {
 38 | 			return {
 39 | 
 40 | 			};
 41 | 		},
 42 | 		computed: {
 43 | 		  ...mapGetters(['hasLogin'])
 44 | 		},
 45 | 		methods:{
 46 | 			...mapMutations(['logout']),
 47 | 
 48 | 			navTo(url){
 49 | 				this.$api.msg(`跳转到${url}`);
 50 | 			},
 51 | 			//退出登录
 52 | 			toLogout(){
 53 | 				uni.showModal({
 54 | 				    content: '确定要退出登录么',
 55 | 				    success: (e)=>{
 56 | 				    	if(e.confirm){
 57 | 				    		this.logout();
 58 | 				    		setTimeout(()=>{
 59 | 				    			uni.navigateBack();
 60 | 				    		}, 1000)
 61 | 				    	}
 62 | 				    }
 63 | 				});
 64 | 			},
 65 | 			//switch
 66 | 			switchChange(e){
 67 | 				let statusTip = e.detail.value ? '打开': '关闭';
 68 | 				this.$api.msg(`${statusTip}消息推送`);
 69 | 			},
 70 | 
 71 | 		}
 72 | 	}
 73 | </script>
 74 | 
 75 | <style lang='scss'>
 76 | 	page, .container{
 77 | 		background: $page-color-base;
 78 | 	}
 79 | 	.list-cell{
 80 | 		display:flex;
 81 | 		align-items:baseline;
 82 | 		padding: 20upx $page-row-spacing;
 83 | 		line-height:60upx;
 84 | 		position:relative;
 85 | 		background: #fff;
 86 | 		justify-content: center;
 87 | 		&.log-out-btn{
 88 | 			margin-top: 40upx;
 89 | 			.cell-tit{
 90 | 				color: $uni-color-primary;
 91 | 				text-align: center;
 92 | 				margin-right: 0;
 93 | 			}
 94 | 		}
 95 | 		&.cell-hover{
 96 | 			background:#fafafa;
 97 | 		}
 98 | 		&.b-b:after{
 99 | 			left: 30upx;
100 | 		}
101 | 		&.m-t{
102 | 			margin-top: 16upx;
103 | 		}
104 | 		.cell-more{
105 | 			align-self: baseline;
106 | 			font-size:$font-lg;
107 | 			color:$font-color-light;
108 | 			margin-left:10upx;
109 | 		}
110 | 		.cell-tit{
111 | 			flex: 1;
112 | 			font-size: $font-base + 2upx;
113 | 			color: $font-color-dark;
114 | 			margin-right:10upx;
115 | 		}
116 | 		.cell-tip{
117 | 			font-size: $font-base;
118 | 			color: $font-color-light;
119 | 		}
120 | 		switch{
121 | 			transform: translateX(16upx) scale(.84);
122 | 		}
123 | 	}
124 | </style>
125 | 


--------------------------------------------------------------------------------
/pages/user/user.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container">
  3 | 		<title-nav bg-color="bg-white solid-bottom">
  4 | 			<block slot="content">我</block>
  5 | 		</title-nav>
  6 | 
  7 | 		<view class="cu-list menu padding-top-sm">
  8 | 			<view v-if="hasLogin" class="cu-item user">
  9 | 				<view class="content flex align-center">
 10 | 					<view class="cu-avatar round xl inline" :style="'background-image:url('+avatar+')'"></view>
 11 | 					<text class="text-black margin-left text-xl">{{userInfo.nick}}</text>
 12 | 				</view>
 13 | 			</view>
 14 | 			<view v-else class="cu-item user">
 15 | 				<!--#ifdef APP-PLUS || H5-->
 16 | 				<view class="content flex align-center" @tap="toLogin">
 17 | 					<view class="cu-avatar round xl inline" style="background-image:url(http://file.szjx.top/fashion/missing-face.png)"></view>
 18 | 					<text class="text-black margin-left text-xl">登录/注册></text>
 19 | 				</view>
 20 | 				<!-- #endif -->
 21 | 				<!--#ifdef MP-WEIXIN || MP-QQ-->
 22 | 				<view class="content flex align-center">
 23 | 					<view class="cu-avatar round xl inline margin-right" style="background-image:url(http://file.szjx.top/fashion/missing-face.png)"></view>
 24 | 					<button class="username login-btn" open-type="getUserInfo" @getuserinfo="minProgramLogin">登录/注册></button>
 25 | 				</view>
 26 | 				<!-- #endif -->
 27 | 			</view>
 28 | 		</view>
 29 | 
 30 | 		<view class="cu-list menu">
 31 | 			<view class="cu-item arrow" @tap="navTo('/pages/collect/collect', true)">
 32 | 				<view class="content">
 33 | 					<text class="text-black">收藏夹</text>
 34 | 				</view>
 35 | 			</view>
 36 | 			<!--#ifdef H5 || APP-PLUS-->
 37 | 			<view class="cu-item arrow" @tap="navTo('/pages/public/guide')">
 38 | 				<view class="content">
 39 | 					<text class="text-black">新手教程</text>
 40 | 				</view>
 41 | 			</view>
 42 | 			<!-- #endif -->
 43 | 			<view class="cu-item" @tap="copy('silently9527')">
 44 | 				<view class="content">
 45 | 					<!--#ifdef MP-WEIXIN || H5 || APP-PLUS-->
 46 | 					<text class="text-black">客户微信</text>
 47 | 					<!-- #endif -->
 48 | 					<!--#ifdef MP-QQ-->
 49 | 					<text class="text-black">客户QQ</text>
 50 | 					<!-- #endif -->
 51 | 				</view>
 52 | 				<view class="action">
 53 | 					<text class="text-grey">silently9527</text>
 54 | 				</view>
 55 | 			</view>
 56 | 		</view>
 57 | 
 58 | 		<view class="cu-list menu">
 59 | 			<view class="cu-item arrow" @tap="navTo('/pages/user/set')">
 60 | 				<view class="content">
 61 | 					<text class="text-black">设置</text>
 62 | 				</view>
 63 | 			</view>
 64 | 		</view>
 65 | 
 66 | 		<!--#ifdef H5-->
 67 | 		<view class="cu-list menu">
 68 | 			<view class="cu-item arrow" @tap="downloadApp">
 69 | 				<view class="content">
 70 | 					<text class="text-black">App下载</text>
 71 | 				</view>
 72 | 			</view>
 73 | 		</view>
 74 | 		<!-- #endif -->
 75 | 
 76 | 	</view>
 77 | </template>
 78 | <script>
 79 |   import { mapGetters, mapMutations } from 'vuex';
 80 |   export default {
 81 |     components: {
 82 |     },
 83 |     data(){
 84 |       return {
 85 |       }
 86 |     },
 87 |     onLoad(){
 88 |     },
 89 |     computed: {
 90 |       ...mapGetters(['hasLogin','userInfo','avatar'])
 91 |     },
 92 |     methods: {
 93 |       ...mapMutations(['storeUser','login']),
 94 |       navTo(url, loginCheck = false){
 95 |         if(loginCheck && !this.hasLogin){
 96 |           uni.showToast({
 97 |             title: '您还未登录，请先登录',
 98 |             icon: 'none',
 99 |             duration: 2000
100 |           });
101 |           return;
102 |         }
103 |         uni.navigateTo({ url })
104 |       },
105 |       downloadApp(){
106 |         window.open("http://static.szjx.top/download/index.html")
107 | 			},
108 | 			toLogin(){
109 |         // #ifndef H5
110 |         this.navTo('/pages/public/login')
111 |         // #endif
112 | 
113 | 				// #ifdef H5
114 |         uni.showModal({
115 |           title: '提示',
116 |           content: '请先下载App后再登录',
117 |           confirmText: '下载',
118 |           success:  (res) => {
119 |             if (res.confirm) {
120 | 							this.downloadApp();
121 |             } else if (res.cancel) {
122 |             }
123 |           }
124 |         });
125 |         // #endif
126 | 			},
127 |       copy(data) {
128 |         // #ifndef H5
129 |         uni.setClipboardData({
130 |           data: data
131 |         });
132 |         // #endif
133 |       },
134 |       minProgramLogin(res){
135 |         let userInfo = res.detail.userInfo;
136 |         uni.getProvider({
137 |           service: 'oauth',
138 |           success: (res) => {
139 |             if (~res.provider.indexOf('qq')) {
140 |               this.login({provider: 'qq', userInfo: userInfo});
141 |             } else if (~res.provider.indexOf('weixin')) {
142 |               this.login({provider: 'weixin', userInfo: userInfo});
143 |             }
144 |           }
145 |         });
146 |       }
147 |     }
148 |   }
149 | </script>
150 | <style lang='scss' scoped>
151 | 	page, .container{
152 | 		background: $page-color-base;
153 | 	}
154 | 	.user {
155 | 		padding: 10px 12px !important;
156 | 	}
157 | 	.cu-list+.cu-list {
158 | 		margin-top: 8px !important;
159 | 	}
160 | 	button {
161 | 		background-color:transparent;
162 | 		border-style:none;
163 | 		border: none;
164 | 		padding: 0;
165 | 		margin: 0;
166 | 	}
167 | 
168 | 	button::after {
169 | 		border: none;
170 | 	}
171 | </style>
172 | 


--------------------------------------------------------------------------------
/pages/webview/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view></view>
 3 | </template>
 4 | 
 5 | <script>
 6 | let wv;
 7 | export default {
 8 | 	onLoad(option) {
 9 | 		if (!option.url) {
10 | 			return;
11 | 		}
12 | 		this.url = option.url;
13 | 		if(option.title){
14 | 			this.title = option.title
15 | 		}
16 | 		if(option.top){
17 | 			this.top = option.top
18 | 		}
19 | 		// #ifdef APP-PLUS
20 | 		let currentWebview = this.$scope.$getAppWebview();
21 | 		wv = plus.webview.create(this.url, 'webview', {
22 | 			plusrequire: 'none',
23 | 			'uni-app': 'none',
24 | 			top: uni.getSystemInfoSync().statusBarHeight + (this.top-0)
25 | 		});
26 | 		wv.addEventListener(
27 | 			'loaded',
28 | 			() => {
29 | 				currentWebview.setStyle({
30 | 					titleNView: {
31 | 						titleText: this.title ? this.title : wv.getTitle()
32 | 					}
33 | 				});
34 | 			},
35 | 			false
36 | 		);
37 | 		wv.overrideUrlLoading({
38 | 			mode: 'reject',
39 | 			match:'.*taobao\.com.*|.*tmall\.com.*|.*index\.php.*p/d&id=.*'
40 | 		 }, e => {
41 | 			console.log('reject url: ' + e.url);
42 | 			this.handle(e.url);
43 | 		});
44 | 		currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
45 | 		// #endif
46 | 	},
47 | 	data() {
48 | 		return {
49 | 			title: '',
50 | 			top: 44,
51 | 			url: ''
52 | 		};
53 | 	},
54 | 	methods: {
55 | 		handle(url) {
56 | 			if (url.indexOf('taobao.com') > -1 || url.indexOf('tmall.com') > -1) {
57 | 				this.openTaobao(url);
58 | 				return;
59 | 			}
60 | 			if (url.indexOf('http://szjx.top/index.php?r=p/d&id=') > -1) {
61 | 				let id = this.getQueryVariable(url, 'id');
62 | 				uni.navigateTo({
63 | 				    url: `/pages/product/product?goodsId=${id}`
64 | 				})
65 | 				return;
66 | 			}
67 | 			wv.loadURL(url);
68 | 		},
69 | 		openTaobao(url) {
70 | 			plus.runtime.openURL(url.replace('https:', 'taobao:'), res => {
71 | 				plus.runtime.openURL(url);
72 | 			});
73 | 		},
74 | 		getQueryVariable(query, variable) {
75 | 			var vars = query.split('&');
76 | 			for (var i = 0; i < vars.length; i++) {
77 | 				var pair = vars[i].split('=');
78 | 				if (pair[0] == variable) {
79 | 					return pair[1];
80 | 				}
81 | 			}
82 | 			return false;
83 | 		}
84 | 	}
85 | };
86 | </script>
87 | 
88 | <style scoped></style>
89 | 


--------------------------------------------------------------------------------
/static/errorImage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/errorImage.jpg


--------------------------------------------------------------------------------
/static/female.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/female.png


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/logo.png


--------------------------------------------------------------------------------
/static/male.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/male.png


--------------------------------------------------------------------------------
/static/refresh/loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/refresh/loading.png


--------------------------------------------------------------------------------
/static/refresh/xiangxia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/refresh/xiangxia.png


--------------------------------------------------------------------------------
/static/splash.9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/splash.9.png


--------------------------------------------------------------------------------
/static/tab/circle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/tab/circle.png


--------------------------------------------------------------------------------
/static/tab/circle_cur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/tab/circle_cur.png


--------------------------------------------------------------------------------
/static/tab/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/tab/home.png


--------------------------------------------------------------------------------
/static/tab/home_cur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/tab/home_cur.png


--------------------------------------------------------------------------------
/static/tab/my.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/tab/my.png


--------------------------------------------------------------------------------
/static/tab/my_cur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/tab/my_cur.png


--------------------------------------------------------------------------------
/static/tab/shop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/tab/shop.png


--------------------------------------------------------------------------------
/static/tab/shop_cur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silently9527/mall-coupons/f843dcefa1f3d12173dd02ab3da8c2de76cebc88/static/tab/shop_cur.png


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | import api from "../api/backend";
  4 | 
  5 | Vue.use(Vuex)
  6 | 
  7 | const store = new Vuex.Store({
  8 |   state: {
  9 |     accessToken: undefined,
 10 |     hasLogin: false,
 11 |     userInfo: undefined,
 12 |     shareTicket: undefined
 13 |   },
 14 |   getters: {
 15 |     accessToken: state => {
 16 |       if (state.accessToken) {
 17 |         return state.accessToken;
 18 |       }
 19 |       return uni.getStorageSync('mall_coupons_access_token');
 20 |     },
 21 |     hasLogin: state => {
 22 |       if (state.hasLogin) {
 23 |         return state.hasLogin;
 24 |       }
 25 |       return uni.getStorageSync('mall_coupons_has_login');
 26 |     },
 27 |     userInfo: state => {
 28 |       if (state.userInfo) {
 29 |         return state.userInfo;
 30 |       }
 31 |       return uni.getStorageSync('mall_coupons_user_info')
 32 |     },
 33 |     avatar: state => {
 34 |       if (state.userInfo && state.userInfo.avatarUrl) {
 35 |         return state.userInfo.avatarUrl;
 36 |       }
 37 |       return 'http://file.szjx.top/fashion/missing-face.png';
 38 |     }
 39 |   },
 40 |   mutations: {
 41 |     login(state, param) {
 42 |       uni.login({
 43 |         provider: param.provider,
 44 |         success: (response) => {
 45 |           api.login(param.provider, response.code).then(resp => {
 46 |             let token = resp.data.xAuthToken
 47 |             state.accessToken = token;
 48 |             uni.setStorage({key: 'mall_coupons_access_token', data: token});
 49 | 
 50 |             api.getLoginUser().then(resp => {
 51 |               state.hasLogin = true;
 52 |               state.userInfo = resp.data
 53 |               if (!resp.data.nick) {
 54 |                 api.initUserInfo({
 55 |                   nick: param.userInfo.nickName,
 56 |                   avatarUrl: param.userInfo.avatarUrl,
 57 |                   city: param.userInfo.city,
 58 |                   country: param.userInfo.country,
 59 |                   province: param.userInfo.province,
 60 |                   sex: param.userInfo.gender
 61 |                 }).then((user) => {
 62 |                   let userinfo = user.data
 63 |                   state.hasLogin = true;
 64 |                   state.userInfo = userinfo;
 65 |                   uni.setStorage({key: 'mall_coupons_has_login', data: true});
 66 |                   uni.setStorage({key: 'mall_coupons_user_info', data: userinfo});
 67 |                 });
 68 |               }
 69 |             })
 70 |           })
 71 |         }
 72 |       });
 73 |     },
 74 |     storeShareTicket(state, shareTicket) {
 75 |       state.shareTicket = shareTicket;
 76 |     },
 77 |     storeToken(state, token) {
 78 |       state.accessToken = token;
 79 |       uni.setStorage({key: 'mall_coupons_access_token', data: token});
 80 |     },
 81 |     storeUser(state, user) {
 82 |       state.hasLogin = true;
 83 |       state.userInfo = user;
 84 |       uni.setStorage({key: 'mall_coupons_has_login', data: true});
 85 |       uni.setStorage({key: 'mall_coupons_user_info', data: user});
 86 |     },
 87 |     logout(state) {
 88 |       api.logout();
 89 |       state.hasLogin = false;
 90 |       state.userInfo = undefined;
 91 |       uni.removeStorage({
 92 |         key: 'mall_coupons_access_token'
 93 |       });
 94 |       uni.removeStorage({
 95 |         key: 'mall_coupons_has_login'
 96 |       });
 97 |       uni.removeStorage({
 98 |         key: 'mall_coupons_user_info'
 99 |       });
100 |     }
101 |   },
102 |   actions: {}
103 | })
104 | 
105 | export default store
106 | 


--------------------------------------------------------------------------------
/style/app.scss:
--------------------------------------------------------------------------------
  1 | view,
  2 | scroll-view,
  3 | swiper,
  4 | swiper-item,
  5 | cover-view,
  6 | cover-image,
  7 | icon,
  8 | text,
  9 | rich-text,
 10 | progress,
 11 | button,
 12 | checkbox,
 13 | form,
 14 | input,
 15 | label,
 16 | radio,
 17 | slider,
 18 | switch,
 19 | textarea,
 20 | navigator,
 21 | audio,
 22 | camera,
 23 | image,
 24 | video {
 25 |   box-sizing: border-box;
 26 | }
 27 | 
 28 | /* 图片载入替代方案 */
 29 | .image-wrapper {
 30 |   font-size: 0;
 31 |   background: #f3f3f3;
 32 |   border-radius: 4px;
 33 | 
 34 |   image {
 35 |     width: 100%;
 36 |     height: 100%;
 37 |     transition: .6s;
 38 |     opacity: 0;
 39 | 
 40 |     &.loaded {
 41 |       opacity: 1;
 42 |     }
 43 |   }
 44 | }
 45 | 
 46 | .clamp {
 47 |   overflow: hidden;
 48 |   text-overflow: ellipsis;
 49 |   white-space: nowrap;
 50 |   display: block;
 51 | }
 52 | 
 53 | .common-hover {
 54 |   background: #f5f5f5;
 55 | }
 56 | 
 57 | /*边框*/
 58 | .b-b:after,
 59 | .b-t:after {
 60 |   position: absolute;
 61 |   z-index: 3;
 62 |   left: 0;
 63 |   right: 0;
 64 |   height: 0;
 65 |   content: '';
 66 |   transform: scaleY(.5);
 67 |   border-bottom: 1px solid $border-color-base;
 68 | }
 69 | 
 70 | .b-b:after {
 71 |   bottom: 0;
 72 | }
 73 | 
 74 | .b-t:after {
 75 |   top: 0;
 76 | }
 77 | 
 78 | /* button样式改写 */
 79 | uni-button,
 80 | button {
 81 |   height: 80upx;
 82 |   line-height: 80upx;
 83 |   font-size: $font-lg + 2upx;
 84 |   font-weight: normal;
 85 | 
 86 |   &.no-border:before,
 87 |   &.no-border:after {
 88 |     border: 0;
 89 |   }
 90 | }
 91 | 
 92 | uni-button[type=default],
 93 | button[type=default] {
 94 |   color: $font-color-dark;
 95 | }
 96 | 
 97 | /* input 样式 */
 98 | .input-placeholder {
 99 |   color: #999999;
100 | }
101 | 
102 | .placeholder {
103 |   color: #999999;
104 | }
105 | 
106 | .tm {
107 |   min-width: 23px;
108 |   height: 13px;
109 |   border-radius: 2px;
110 |   background-image: url(https://cmsstatic.ffquan.cn/wap_new/common/images/tm.png);
111 |   display: inline-block;
112 |   margin-right: 3px;
113 |   background-size: 23px 13px;
114 |   background-repeat: no-repeat;
115 |   background-position: center;
116 | }
117 | 
118 | .tb {
119 |   min-width: 29px;
120 |   height: 13px;
121 |   background-color: linear-gradient(142deg,#ff8c02 0,#ff5000 100%);
122 |   border-radius: 2px;
123 |   background-image: url(https://cmsstatic.ffquan.cn/wap_new/common/images/tb.png);
124 |   display: inline-block;
125 |   background-size: 29px 13px;
126 |   background-repeat: no-repeat;
127 |   background-position: center;
128 |   margin-right: 2px;
129 | }
130 | 


--------------------------------------------------------------------------------
/uni.scss:
--------------------------------------------------------------------------------
 1 | /* 页面左右间距 */
 2 | $page-row-spacing: 30upx;
 3 | $page-color-base: #f8f8f8;
 4 | $page-color-light: #f8f6fc;
 5 | $base-color: #fa436a;
 6 | 
 7 | /* 文字尺寸 */
 8 | $font-sm: 24upx;
 9 | $font-base: 28upx;
10 | $font-lg: 32upx;
11 | /*文字颜色*/
12 | $font-color-dark: #303133;
13 | $font-color-base: #606266;
14 | $font-color-light: #909399;
15 | $font-color-disabled: #C0C4CC;
16 | $font-color-spec: #4399fc;
17 | /* 边框颜色 */
18 | $border-color-dark: #DCDFE6;
19 | $border-color-base: #E4E7ED;
20 | $border-color-light: #EBEEF5;
21 | /* 图片加载中颜色 */
22 | $image-bg-color: #eee;
23 | /* 行为相关颜色 */
24 | $uni-color-primary:#fa436a;
25 | $uni-color-success: #4cd964;
26 | $uni-color-warning: #f0ad4e;
27 | $uni-color-error: #dd524d;
28 | 
29 | 
30 | 
31 | 


--------------------------------------------------------------------------------
/utils/cache.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 缓存数据优化
 3 |  * var cache = require('utils/cache.js');
 4 |  * import cache from '../cache'
 5 |  * 使用方法 【
 6 |  *     一、设置缓存
 7 |  *         string    cache.put('k', 'string你好啊');
 8 |  *         json      cache.put('k', { "b": "3" }, 2);
 9 |  *         array     cache.put('k', [1, 2, 3]);
10 |  *         boolean   cache.put('k', true);
11 |  *     二、读取缓存
12 |  *         默认值    cache.get('k')
13 |  *         string    cache.get('k', '你好')
14 |  *         json      cache.get('k', { "a": "1" })
15 |  *     三、移除/清理  
16 |  *         移除: cache.remove('k');
17 |  *         清理：cache.clear(); 
18 |  * 】
19 |  * @type {String}
20 |  */
21 | var postfix = '_mallStore'; // 缓存前缀 
22 | /**
23 |  * 设置缓存 
24 |  * @param  {[type]} k [键名]
25 |  * @param  {[type]} v [键值]
26 |  * @param  {[type]} t [时间、单位秒]
27 |  */
28 | function put(k, v, t) {
29 |     uni.setStorageSync(k, v) 
30 |     var seconds = parseInt(t);
31 |     if (seconds > 0) {
32 |         var timestamp = Date.parse(new Date());
33 |         timestamp = timestamp / 1000 + seconds;
34 |         uni.setStorageSync(k + postfix, timestamp + "")
35 |     } else {
36 |         uni.removeStorageSync(k + postfix)
37 |     }
38 | }
39 | 
40 | 
41 | /**
42 |  * 获取缓存 
43 |  * @param  {[type]} k   [键名]
44 |  * @param  {[type]} def [获取为空时默认]
45 |  */
46 | function get(k, def) {
47 |     var deadtime = parseInt(uni.getStorageSync(k + postfix)) 
48 |     if (deadtime) {
49 |         if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
50 |             if (def) {
51 |                 return def;
52 |             } else {
53 |                 return false;
54 |             }
55 |         }
56 |     }
57 |     var res = uni.getStorageSync(k);
58 |     if (res) {
59 |         return res;
60 |     } else {
61 |         if (def === undefined  || def === "") {
62 |             def = false; 
63 |         }
64 |         return def;
65 |     }
66 | }
67 | 
68 | function remove(k) {
69 |     uni.removeStorageSync(k);
70 |     uni.removeStorageSync(k + postfix);
71 | }
72 | 
73 | /**
74 |  * 清理所有缓存
75 |  * @return {[type]} [description]
76 |  */
77 | function clear() {
78 |     uni.clearStorageSync();
79 | }
80 | 
81 | 
82 | module.exports = {
83 |     put: put,
84 |     get: get,
85 |     remove: remove,
86 |     clear: clear,
87 | }


--------------------------------------------------------------------------------
/utils/http.js:
--------------------------------------------------------------------------------
 1 | import configdata from '../config'
 2 | import cache from './cache'
 3 | import store from '../store/index';
 4 | 
 5 | module.exports = {
 6 | 	config: function(name) {
 7 | 		var info = null;
 8 | 		if (name) {
 9 | 			var name2 = name.split("."); //字符分割
10 | 			if (name2.length > 1) {
11 | 				info = configdata[name2[0]][name2[1]] || null;
12 | 			} else {
13 | 				info = configdata[name] || null;
14 | 			}
15 | 			if (info == null) {
16 | 				let web_config = cache.get("web_config");
17 | 				if (web_config) {
18 | 					if (name2.length > 1) {
19 | 						info = web_config[name2[0]][name2[1]] || null;
20 | 					} else {
21 | 						info = web_config[name] || null;
22 | 					}
23 | 				}
24 | 			}
25 | 		}
26 | 		return info;
27 | 	},
28 | 	post: function(url, data, xAuthToken = true) {
29 | 		url = this.config("APIHOST")+url;
30 | 		let header = {
31 |             "content-type": "application/x-www-form-urlencoded"
32 |         }
33 |         if (xAuthToken) {
34 |             header = {
35 |                 "content-type": "application/x-www-form-urlencoded",
36 |                 "X-Auth-Token": store.getters.accessToken
37 |             }
38 |         }
39 | 		return new Promise((succ, error) => {
40 | 			uni.request({
41 | 				url: url,
42 | 				data: data,
43 | 				method: "POST",
44 | 				header: header,
45 | 				success: function(result) {
46 | 					succ.call(self, result.data)
47 | 				},
48 | 				fail: function(e) {
49 | 					error.call(self, e)
50 | 				}
51 | 			})
52 | 		})
53 | 	},
54 | 	get: function(url, data, xAuthToken = true) {
55 | 		url = this.config("APIHOST")+url;
56 |         let header = {
57 |             "content-type": "application/x-www-form-urlencoded"
58 |         }
59 |         if (xAuthToken) {
60 |             header = {
61 |                 "content-type": "application/x-www-form-urlencoded",
62 |                 "X-Auth-Token": store.getters.accessToken
63 |             }
64 |         }
65 | 		return new Promise((succ, error) => {
66 | 			uni.request({
67 | 				url: url,
68 | 				data: data,
69 | 				method: "GET",
70 | 				header: header,
71 | 				success: function(result) {
72 | 					succ.call(self, result.data)
73 | 				},
74 | 				fail: function(e) {
75 | 					error.call(self, e)
76 | 				}
77 | 			})
78 | 		})
79 | 	}
80 | }
81 | 


--------------------------------------------------------------------------------
/utils/mcUtils.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   getShareInfo: (shareTicket, callback) => {
 3 |     if (!shareTicket) {
 4 |       return;
 5 |     }
 6 |     // #ifdef MP-WEIXIN
 7 |     wx.getShareInfo({
 8 |       shareTicket: shareTicket,
 9 |       timeout: 5000,
10 |       success: callback
11 |     })
12 |     // #endif
13 |     // #ifdef MP-QQ
14 |     qq.getShareInfo({
15 |       shareTicket: shareTicket,
16 |       timeout: 5000,
17 |       success: callback
18 |     })
19 |     // #endif
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------