• uni-app基于vue实现商城小程序

    目录

    一、前言

    二、功能效果图

    1.首页

    2.分类

    ​3.活动

    4.我的

    ​5.商品详情

    6.购物车

    三、代码实现

    1.项目结构截图 uni-app，Hbuilder

    2.首页源码

    3.数据模拟通讯

    四、总结

    一、前言

    参考“网易严选”小程序

    项目采用传统vue项目结构，即uni-app打包和运行成小程序，使用HBuilder开发工具开发项目，通过运行启动“微信开发者工具”完成项目启动。

    二、功能效果图

    1.首页

     

    2.分类

     3.活动

    4.我的

     5.商品详情

    6.购物车

    代码动态实现商品购物车的增删改查等操作。

    三、代码实现

    1.项目结构截图 uni-app，Hbuilder

    2.首页源码

    1. <template>
    2. 	<view class="Header">
    3. 		<view class="myHeader">
    4. 			<view class="logos">
    5. 				网易严选
    6. 			view>
    7. 			<view class="searchs">
    8. 				<uni-icons type="search" size="30">uni-icons><input type="text" name="" id=""
    9. 					placeholder="请输入想搜索的商品..." @tap="goShowContract">
    10. 			view>
    11. 			<view class="search-button">
    12. 				<view class="button" @click="onSearch">取消view>
    13. 			view>
    14. 		view>
    15. 		
    16. 		<view class="backgroundBanner">
    17. 			<view class="banner">
    18. 				<swiper autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#fff"
    19. 					easing-function="true" indicator-dots='true'>
    20. 					<swiper-item v-for="(item, index) in bannerList" :key="index">
    21. 						<img :src="item.url">img>
    22. 					swiper-item>
    23. 				swiper>
    24. 			view>
    25. 		view>
    26. 		
    27. 		<view class="cates">
    28. 			<view class="cate-item" v-for="(cateItem,cateIndex) in cateList" :key="cateIndex" @tap="selPage(cateItem)">
    29. 				<image :src="cateItem.cateUrl">image>
    30. 				<text>{{cateItem.cateName}}text>
    31. 			view>
    32. 		view>
    33. 		<hr>
    34. 		<view class="time">
    35. 			<view class="timeTop">
    36. 				<view class="logo">
    37. 					<image src="../../static/zhong.jpg" mode="">image>
    38. 					
    39. 					<text>限时秒购text>
    40. 				view>
    41. 				<view class="timeFinish">
    42. 					<text>距结束text>
    43. 					<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF"
    44. 						background-color="#007AFF" />
    45. 				view>
    46. 			view>
    47. 			<view class="timeBottom">
    48. 				<view class="timeItem" v-for="(timeItem,timeIndex) in timeList" :key="timeIndex">
    49. 					<image :src="timeItem.timeUrl">image>
    50. 					<view class="timeText">
    51. 						<text class="timeText1">￥{{timeItem.timeText1}}text>
    52. 						<text class="timeText2">￥{{timeItem.timeText2}}text>
    53. 					view>
    54. 				view>
    55. 			view>
    56. 			<hr>
    57. 			<scroll-view scroll-x class="myNav">
    58. 				<view v-for="(item,index) in indexTypes" :key="index" @tap="selType(item)" :class="'item '+(typeId===item.id?'active':'')" style='font-size: 30rpx;'>{{item.name}}view>
    59. 			scroll-view>
    60. 			<index-type ref="indexType">index-type>	
    61. 			view>	
    62. 		view>
    63. 	view>
    64. 		
    65.  
    66. template>
    67.  
    68. <script>
    69. 	import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
    70. 	import indexType from '@/components/index_type.vue'
    71. 	export default {
    72. 		components:{
    73. 			indexType,
    74. 		},
    75. 		data() {
    76. 			return {
    77. 				typeId: 0,
    78. 				cateList: [{
    79. 						cateId: 0,
    80. 						cateUrl: "../../static/zhong.jpg",
    81. 						cateName: '限时秒杀',
    82. 						path:''
    83. 					},
    84. 					{
    85. 						cateId: 0,
    86. 						cateUrl: '../../static/che.jpg',
    87. 						cateName: '断货清仓',
    88. 						path:'./okoko'
    89. 						
    90. 					},
    91. 					{
    92. 						cateId: 0,
    93. 						cateUrl: "../../static/yi.jpg",
    94. 						cateName: '宝藏女装',
    95. 					},
    96. 					{
    97. 						cateId: 0,
    98. 						cateUrl: "../../static/b3.jpg",
    99. 						cateName: '多多果园',
    100. 					},
    101. 					{
    102. 						cateId: 0,
    103. 						cateUrl: "../../static/9.9.jpg",
    104. 						cateName: '9块9特卖',
    105. 					},
    106. 					{
    107. 						cateId: 0,
    108. 						cateUrl: "../../static/1a.jpg",
    109. 						cateName: '签到',
    110. 					},
    111. 					{
    112. 						cateId: 0,
    113. 						cateUrl: "../../static/yao.jpg",
    114. 						cateName: '医药馆',
    115. 					},
    116. 					{
    117. 						cateId: 0,
    118. 						cateUrl: "../../static/54e.jpg",
    119. 						cateName: '省钱月卡',
    120. 					},
    121.  
    122. 				],
    123. 				// //商品实例图
    124. 				timeList: [{
    125. 						time: 0,
    126. 						timeUrl: '../../static/7b.jpg',
    127. 						timeText1: '388',
    128. 						timeText2: '720',
    129. 					},
    130. 					{
    131. 						time: 0,
    132. 						timeUrl: '../../static/345d.jpg',
    133. 						timeText1: '18',
    134. 						timeText2: '39',
    135. 					},
    136. 					{
    137. 						time: 0,
    138. 						timeUrl: '../../static/3d.jpg',
    139. 						timeText1: '3888',
    140. 						timeText2: '3889',
    141. 					},
    142. 					{
    143. 						time: 0,
    144. 						timeUrl: '../../static/bing.jpg',
    145. 						timeText1: '12.9',
    146. 						timeText2: '18',
    147. 					},
    148. 				],
    149. 				bannerList: [{
    150. 						id: 1,
    151. 						url: '../../static/temp1.jpg'
    152. 					},
    153. 					{
    154. 						id: 2,
    155. 						url: '../../static/temp2.jpg'
    156. 					},
    157. 					{
    158. 						id: 3,
    159. 						url: '../../static/temp3.jpg'
    160. 					},
    161. 					{
    162. 						id: 4,
    163. 						url: '../../static/temp4.jpg'
    164. 					},
    165. 					{
    166. 						id: 5,
    167. 						url: '../../static/temp5.jpg'
    168. 					},
    169. 				],
    170. 			}
    171. 		},
    172. 		computed:{
    173. 			 ...mapState([
    174. 				'products',
    175. 				'indexTypes'
    176. 			])
    177. 		},
    178. 		mounted() {
    179. 			this.typeId = this.indexTypes[0].id;
    180. 			this.$refs.indexType.initProduct(this.indexTypes[0]);
    181. 		},
    182. 		methods: {
    183. 			goShowContract() {
    184. 				uni.navigateTo({
    185. 					url: '/pages/index/show-contract'
    186. 				})
    187. 			},
    188. 			selPage(cateItem){
    189. 				// uni.navigateTo({
    190. 				// 	url:cateItem.path,
    191. 				// })
    192. 			},
    193. 			//选择分类
    194. 			selType(item){
    195. 				this.typeId = item.id;
    196. 				this.$refs.indexType.initProduct(item);
    197. 			}
    198. 		}
    199. 	}
    200. script>
    201.  
    202. <style lang="scss" scoped>
    203. 	* {
    204. 		margin: 0;
    205. 		padding: 0;
    206. 	}
    207.  
    208. 	.myHeader {
    209. 		display: flex;
    210. 		padding: 10rpx;
    211. 		align-items: center;
    212.  
    213. 		.logos {
    214. 			width: 140rpx;
    215. 			height: 40rpx;
    216. 		}
    217.  
    218. 		.searchs {
    219. 			border: 1px solid black;
    220. 			border-radius: 10rpx;
    221. 			flex: 1;
    222. 			margin: 0 10rpx;
    223. 			width: 80rpx;
    224. 			padding-left: 14rpx;
    225. 			display: flex;
    226. 			align-items: center;
    227. 			padding: 4rpx 10rpx;
    228. 			vertical-align: top;
    229. 		}
    230.  
    231. 		.btn {
    232. 			width: 80rpx;
    233. 			text-align: center;
    234. 		}
    235. 	}
    236.  
    237. 	.myNav {
    238. 		white-space: nowrap;
    239. 		display: flex;
    240. 		color: #333;
    241. 		box-sizing: border-box;
    242. 		height: 80rpx;
    243.  
    244. 		.item {
    245. 			flex: 1;
    246. 			margin: 10rpx 20rpx;
    247. 			display: inline-block;
    248.  
    249. 			&.active {
    250. 				color: #ff5555;
    251. 				border-bottom: 2px solid #ff5555;
    252. 				font-size: 24px;
    253. 			}
    254. 		}
    255.  
    256. 		.item:hover {
    257. 			display: inline-block;
    258. 			color: #ff5555;
    259. 			border-bottom: 2px solid #ff5555;
    260. 		}
    261. 	}
    262.  
    263. 	.backgroundBanner {
    264. 		padding: 0 10rpx;
    265. 		box-sizing: border-box;
    266. 	}
    267.  
    268. 	.banner {
    269. 		width: 100%;
    270. 		margin: 0 auto;
    271. 	}
    272.  
    273. 	.banner swiper {
    274. 		height: calc(750rpx / 1.9); //calc(屏幕宽度 / (图片宽度 / 图片高度))
    275. 	}
    276.  
    277. 	.banner img {
    278. 		width: 100%;
    279. 		height: 100%;
    280. 	}
    281.  
    282.  
    283.  
    284. 	.cates {
    285. 		width: 100%;
    286. 		height: 200rpx;
    287. 		background-color: #fff;
    288. 		display: flex;
    289. 		align-items: center;
    290. 		justify-content: space-around;
    291.  
    292. 		.cate-item {
    293. 			width: 20%;
    294. 			height: 160rpx;
    295. 			display: flex;
    296. 			flex-direction: column;
    297. 			align-items: center;
    298. 			justify-content: space-around;
    299.  
    300. 			image {
    301. 				width: 100rpx;
    302. 				height: 100rpx;
    303. 			}
    304. 		}
    305. 	}
    306.  
    307. 	.cates {
    308. 		width: 100%;
    309. 		height: 400rpx;
    310. 		background-color: #fff;
    311. 		display: flex;
    312. 		align-items: center;
    313. 		justify-content: space-around;
    314. 		flex-wrap: wrap;
    315.  
    316. 		.cate-item {
    317. 			width: 22%;
    318. 			height: 160rpx;
    319. 			display: flex;
    320. 			flex-direction: column;
    321. 			align-items: center;
    322. 			justify-content: space-around;
    323. 			// flex-flow: wrap;
    324.  
    325. 			image {
    326. 				width: 100rpx;
    327. 				height: 100rpx;
    328. 			}
    329. 		}
    330. 	}
    331.  
    332.  
    333.  
    334.  
    335. 	.time {
    336. 		width: 100%;
    337. 		background-color: #fff;
    338. 		margin-top: 20rpx;
    339.  
    340. 		.timeTop {
    341. 			height: 80rpx;
    342. 			display: flex;
    343. 			justify-content: space-between;
    344. 			align-items: center;
    345. 			margin-left: 20rpx;
    346.  
    347. 			.logo {
    348. 				image {
    349. 					width: 30rpx;
    350. 					height: 30rpx;
    351. 					margin-right: 10rpx;
    352. 				}
    353.  
    354. 				text {
    355. 					font-size: 16px;
    356. 				}
    357. 			}
    358.  
    359. 			.timeFinish {
    360. 				margin-right: 20rpx;
    361. 				display: flex;
    362. 				align-items: center;
    363.  
    364. 				text {
    365. 					font-size: 14px;
    366. 				}
    367. 			}
    368. 		}
    369.  
    370. 		.timeBottom {
    371. 			width: 100%;
    372. 			display: flex;
    373. 			justify-content: space-around;
    374. 			flex-wrap: wrap;
    375.  
    376. 			.timeItem {
    377. 				width: 25%;
    378. 				justify-content: space-around;
    379. 				display: flex;
    380. 				flex-direction: column;
    381. 				align-items: center;
    382. 				box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    383.  
    384. 				image {
    385. 					width: 160rpx;
    386. 					height: 160rpx;
    387. 				}
    388.  
    389. 				.timeText {
    390. 					display: flex;
    391. 					justify-content: space-between;
    392. 					font-size: 14px;
    393.  
    394. 					.timeText2 {
    395. 						color: #9F9F9F;
    396. 						text-decoration: line-through;
    397. 					}
    398. 				}
    399. 			}
    400. 		}
    401. 	}
    402. style>

    3.数据模拟通讯

    通过vuex实现数据通讯共享和管理

    1. import Vue from 'vue'
    2.  
    3. import Vuex from 'vuex'
    4.  
    5. Vue.use(Vuex)
    6.  
    7. const store = new Vuex.Store({
    8. 	state: {
    9. 		//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变
    10. 		//首页分类
    11. 		indexTypes:[
    12. 			{id: 1,name: '商品推荐'},
    13. 			{id: 2,name: '配饰'},
    14. 			{id: 3,name: '包包'},
    15. 			{id: 4,name: '鞋子'},
    16. 			{id: 5,name: '裙子'},
    17. 			{id: 6,name: '饮品'},
    18. 			{id: 7,name: '衣服'}
    19. 		],
    20. 		//分类菜单
    21. 		allTypes:[
    22. 			{id: 11,name: '推荐'},
    23. 			{id: 12,name: '箱包'},
    24. 			{id: 13,name: '男装'},
    25. 			{id: 14,name: '女装'},
    26. 			{id: 15,name: '鞋子'},
    27. 			{id: 16,name: '裤子'},
    28. 			{id: 17,name: '食品'},
    29. 			{id: 18,name: '维修'},
    30. 			{id: 19,name: '机票'},
    31. 			{id: 20,name: '图书'},
    32. 			{id: 21,name: '宠物'},
    33. 		],
    34. 		//活动商品 商品主键id
    35. 		activeProducts:[
    36. 			1,2,3,4,5
    37. 		],
    38. 		//全部商品
    39. 		products: [{
    40. 				id:1,
    41. 				typeIds:[1,11],
    42. 				cover: require('../../static/0fd.jpg'),
    43. 				imgList: [
    44. 					'https://img11.360buyimg.com/n1/s450x450_jfs/t1/71831/14/25245/39959/6487c621Fca760cf2/769dd8bcf43d82c1.jpg',
    45. 					'https://img.pddpic.com/mms-material-img/2022-08-11/cd9c638d-dac2-474a-aad2-0f141c146102.jpeg.a.jpeg?imageMogr2/quality/90/format/webp',
    46. 					'https://img.pddpic.com/mms-material-img/2022-08-11/b0827f91-083a-4b5b-9461-64e6d6789fcf.jpeg.a.jpeg?imageMogr2/quality/90/format/webp'
    47. 				],
    48. 				name: '联想拯救者Y9000P i7/RTX3060 2022款16英寸电竞游戏笔记本电脑',
    49. 				title: '电脑',
    50. 				price: 2000,
    51. 				oldprice: 5000,
    52. 				saleNumMonth: 120,
    53. 				saleNumTotal: 2000,
    54. 				types: [{
    55. 						name: '类型',
    56. 						items: [{
    57. 								id: 1,
    58. 								name: '13.3英寸 M1芯片 8+7核 8G+256G'
    59. 							},
    60. 							{
    61. 								id: 2,
    62. 								name: '13.3英寸 M1芯片 8+7核 8G+512G'
    63. 							},
    64. 							{
    65. 								id: 3,
    66. 								name: '13.3英寸 M1芯片 8+7核 16G+256G'
    67. 							},
    68. 							{
    69. 								id:4,
    70. 								name: '13.3英寸 M1芯片 8+7核 16G+512G'
    71. 							}
    72. 						],
    73. 					},
    74. 					{
    75. 						name: '数量',
    76. 						items: [{
    77. 							id: 1,
    78. 							name: '英特尔官方21代'
    79. 						}, {
    80. 							id: 2,
    81. 							name: '英特尔官方18代'
    82. 						}, {
    83. 							id: 3,
    84. 							name: '英特尔官方19代'
    85. 						}]
    86. 					}
    87. 				]
    88. 			},
    89. 			{
    90. 				id:2,
    91. 				typeIds:[1,11],
    92. 				cover: require('../../static/13d.jpg'),
    93. 				imgList: [
    94. 					"https://img.pddpic.com/mms-material-img/2021-12-10/6b514989-49fb-4112-b636-33fc82cb1641.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
    95. 					"https://img.pddpic.com/mms-material-img/2022-01-05/6fbb05da-e1ba-4bee-985a-300cdd7ad2e9.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
    96. 					"https://img.pddpic.com/mms-material-img/2021-12-10/21e55b15-a17d-4668-b8a9-9b8616f11cb2.jpeg.a.jpeg?imageMogr2/quality/90/format/webp"
    97. 				],
    98. 				name: '保鲜膜([食品级认证)',
    99. 				title:'保鲜膜',
    100. 				price: 12.99,
    101. 				oldprice: 20.80,
    102. 				saleNumMonth: 120,
    103. 				saleNumTotal: 2000,
    104. 				types: [{
    105. 						name: '型号',
    106. 						items: [{
    107. 								id: 1,
    108. 								name: '1卷宽30厘米6.25斤'
    109. 							},
    110. 							{
    111. 								id: 2,
    112. 								name: '1卷宽50厘米7斤'
    113. 							},
    114. 							{
    115. 								id: 3,
    116. 								name: '整箱宽50厘米4卷28斤'
    117. 							},
    118. 							{
    119. 								id:4,
    120. 								name: '整箱4卷宽50厘米重40斤约720米'
    121. 							}
    122. 						],
    123. 					},
    124. 					{
    125. 						name: '数量',
    126. 						items: [{
    127. 							id: 1,
    128. 							name: '3包'
    129. 						}, {
    130. 							id: 2,
    131. 							name: '5包'
    132. 						}, {
    133. 							id: 3,
    134. 							name: '10包'
    135. 						}]
    136. 					}
    137. 				]
    138. 			},
    139. 			{
    140. 				id:3,
    141. 				typeIds:[1,11],
    142. 				cover: require('../../static/8537c.jpg'),
    143. 				imgList: [
    144. 				"https://img.pddpic.com/mms-material-img/2022-05-28/3329312a-b971-4990-af80-6e15113b0600.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
    145. 				"https://img.pddpic.com/mms-material-img/2022-05-28/e12d134d-c2d8-4aec-8dc3-0e9ff80befd5.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
    146. 				"https://img.pddpic.com/mms-material-img/2022-05-28/1510e448-2d5b-4398-a692-ff679e2587e8.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
    147. 				"https://img.pddpic.com/mms-material-img/2022-05-28/248a3ffb-b4ce-4529-a7a4-8f0c97a4b331.jpeg.a.jpeg?imageMogr2/quality/90/format/webp"
    148. 				],
    149. 				name: '男士斜挎包潮牌ins工装风日系休闲男包大容量单肩包个性邮差包潮',
    150. 				title:'斜挎包',
    151. 				price: 33.00,
    152. 				oldprice: 40.75,
    153. 				saleNumMonth: 120,
    154. 				saleNumTotal: 2000,
    155. 				types: [{
    156. 						name: '颜色',
    157. 						items: [
    158. 							{
    159. 								id: 1,
    160. 								name: '大板黑色'
    161. 							},
    162. 							{
    163. 								id: 2,
    164. 								name: '灰色'
    165. 							},
    166. 							{
    167. 								id: 3,
    168. 								name: '蓝色'
    169. 							},
    170. 							{
    171. 								id:4,
    172. 								name: '白色'
    173. 							}
    174. 						],
    175. 					},
    176. 				]
    177. 					
    178. 			},
    179. 			{
    180. 				id:4,
    181. 				typeIds:[1,11],
    182. 				cover: require('../../static/fa98.jpg'),
    183. 				imgList: [
    184. 				"https://img.pddpic.com/openapi/images/2020-04-27/4cd766b88b0a4e9e8fbebaa221de7b58.jpg?imageMogr2/quality/90/format/webp",
    185. 				"https://img.pddpic.com/openapi/images/2020-04-27/c2090bace7f938f02819fca05e17c4e7.jpg?imageMogr2/quality/90/format/webp",
    186. 				"https://img.pddpic.com/openapi/images/2020-04-27/1492ab8ba1e76cca387583c80180d65e.jpg?imageMogr2/quality/90/format/webp",
    187. 				"https://img.pddpic.com/openapi/images/2020-04-27/13b1af9176580b3e7a035871f4456594.jpg?imageMogr2/quality/90/format/webp",
    188. 				"https://img.pddpic.com/openapi/images/2020-04-27/793db583c0d598c13124af5991f7794e.jpg?imageMogr2/quality/90/format/webp"
    189. 				],
    190. 				name: '高级感韩版原创ins个性多层斜挎包2023夏季新款包包女单肩链条包',
    191. 				title:'休闲 仙女',
    192. 				price: 38.39,
    193. 				oldprice: 57.80,
    194. 				saleNumMonth: 120,
    195. 				saleNumTotal: 2000,
    196. 				types: [{
    197. 						name: '颜色',
    198. 						items: [
    199. 							{
    200. 								id: 1,
    201. 								name: '大板黑色'
    202. 							},
    203. 							{
    204. 								id: 2,
    205. 								name: '灰色'
    206. 							},
    207. 							{
    208. 								id: 3,
    209. 								name: '红色'
    210. 							},
    211. 							{
    212. 								id:4,
    213. 								name: '粉色'
    214. 							},
    215. 							{
    216. 								id:5,
    217. 								name: '白色'
    218. 							},
    219. 						],
    220. 					},
    221. 				]
    222. 				
    223. 					
    224. 			},
    225. 			{
    226. 				id:5,
    227. 				typeIds:[1,11],
    228. 				cover: 'https://img.pddpic.com/goods/images/2020-06-10/52fd0f70-671c-4ab0-a867-094d8301d4e5.jpeg?imageMogr2/quality/90/format/webp',
    229. 				imgList: [
    230. 				"https://img.pddpic.com/goods/images/2020-06-10/52fd0f70-671c-4ab0-a867-094d8301d4e5.jpeg?imageMogr2/quality/90/format/webp",
    231. 				"https://img.pddpic.com/mms-material-img/2020-06-04/a12fe65d-ee77-4b1c-b183-7ce735fb1342.jpeg?imageMogr2/quality/90/format/webp",
    232. 				"https://img.pddpic.com/mms-material-img/2020-06-04/cf0eb9da-efb7-4f24-9703-6450b792b4ec.jpeg?imageMogr2/quality/90/format/webp",
    233. 				"https://img.pddpic.com/mms-material-img/2020-06-04/911b4c63-1212-46e7-a1eb-038b983553b0.jpeg?imageMogr2/quality/90/format/webp",
    234. 				"https://img.pddpic.com/goods/images/2020-06-10/f7e45e61-0a72-4ac9-8f56-f422327799b9.jpeg?imageMogr2/quality/90/format/webp"
    235. 				],
    236. 				name: '【驯龙士】夏季新款冰丝套装男休闲运动短袖男士大码七分裤两件套',
    237. 				title:'驯龙士',
    238. 				price: 99.99,
    239. 				oldprice: 120.80,
    240. 				saleNumMonth: 120,
    241. 				saleNumTotal: 2000,
    242. 				types: [{
    243. 						name: '颜色',
    244. 						items: [
    245. 							{
    246. 								id: 1,
    247. 								name: '军绿色'
    248. 							},
    249. 							{
    250. 								id: 2,
    251. 								name: '灰色'
    252. 							},
    253. 							{
    254. 								id: 3,
    255. 								name: '黑色'
    256. 							},
    257. 						],
    258. 					},
    259. 				]
    260. 					
    261. 			}
    262. 		],
    263. 		
    264. 		
    265.  
    266. 	},
    267. 	mutations: {
    268. 		//相当于同步的操作
    269. 		getarray(state, count) {
    270. 			var shuffled = state.timesList.slice(0),
    271. 				i = state.timesList.length,
    272. 				min = i - count,
    273. 				temp,
    274. 				index;
    275. 			while (i-- > min) {
    276. 				index = Math.floor((i + 1) * Math.random());
    277. 				temp = shuffled[index];
    278. 				shuffled[index] = shuffled[i];
    279. 				shuffled[i] = temp;
    280. 			}
    281. 			return shuffled.slice(min);
    282. 		}
    283. 	},
    284. 	actions: {
    285. 		//相当于异步的操作,不能直接改变state的值，只能通过触发mutations的方法才能改变
    286. 	}
    287. })
    288. export default store

    四、总结

    项目功能完整，后续可能将不断升级。

    关注作者，及时了解更多好项目！

    作者主页也有更多好项目分享！

    获取源码或如需帮助，可通过博客后面名片+作者即可！

     其他作品集合

    1. 《Springboot+Spring Security+OAuth2+redis+mybatis-plus+mysql+vue+elementui实现请假考勤系统》
    2. 《vue+element实现电商商城礼品代发网，商品、订单管理》
    3. 《vue+vant2完美实现香奈儿移动端商城网站》
    4. 《vue+elementui实现联想购物商城，样式美观大方》
    5. 《vue+elementui实现英雄联盟道具城》
    6. 《vue+elementui实现app布局小米商城，样式美观大方，功能完整》
    7. 《vue完美模拟pc版快手，实现短视频，含短视频详情播放》
    8. 《vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网》     
  • 相关阅读:
    风力发电机液压偏航控制系统设计
    JavaScript-操作BOM对象
    错字修改 | 布署1个中文文文本拼蟹纠错模型
    深入浅出排序算法之归并排序
    华为OD机试 - 滑动窗口最大和
    VMware虚拟机如何设置网络
    JavaScript中的基础知识挑战
    工作中何如来合理分配核心线程数？
    F1C100S自制开发板调试过程
    使用docker安装本地pdf工具集合Stirling-PDF
  • 原文地址：https://blog.csdn.net/lucky_fang/article/details/134269531