'save'

package-lock.json

@@ -3780,6 +3780,22 @@
         "axios": "^0.19.2"
       }
     },
+    "axios-mock-adapter": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npm.taobao.org/axios-mock-adapter/download/axios-mock-adapter-1.19.0.tgz",
+      "integrity": "sha1-nXLjIabFQY4e/wZ6qZdhqGxRiKQ=",
+      "requires": {
+        "fast-deep-equal": "^3.1.3",
+        "is-buffer": "^2.0.3"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.5.tgz?cache=0&sync_timestamp=1604429452232&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-buffer%2Fdownload%2Fis-buffer-2.0.5.tgz",
+          "integrity": "sha1-68JS5ADSL/jXf6CYiIIaJKZYwZE="
+        }
+      }
+    },
     "babel-jest": {
       "version": "25.5.1",
       "resolved": "https://registry.nlark.com/babel-jest/download/babel-jest-25.5.1.tgz",
@@ -5850,6 +5866,11 @@
         "whatwg-url": "^7.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.5",
+      "resolved": "https://registry.nlark.com/dayjs/download/dayjs-1.10.5.tgz?cache=0&sync_timestamp=1622012271727&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdayjs%2Fdownload%2Fdayjs-1.10.5.tgz",
+      "integrity": "sha1-VgDfRUj8JFOz8WPrsqu+llzPuYY="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",
@@ -11240,6 +11261,14 @@
         "minimist": "^1.2.5"
       }
     },
+    "mockjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/mockjs/download/mockjs-1.1.0.tgz",
+      "integrity": "sha1-5qDDeOkZBtuv8gkRzAJzs8fXWwY=",
+      "requires": {
+        "commander": "*"
+      }
+    },
     "module-alias": {
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/module-alias/download/module-alias-2.2.2.tgz",
@@ -11247,7 +11276,7 @@
     },
     "moment": {
       "version": "2.29.1",
-      "resolved": "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz?cache=0&sync_timestamp=1601983320283&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.29.1.tgz",
       "integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M="
     },
     "move-concurrently": {

package.json

@@ -58,17 +58,20 @@
     "@dcloudio/uni-quickapp-webview": "^2.0.0-31920210514002",
     "@dcloudio/uni-stat": "^2.0.0-31920210514002",
     "@vue/shared": "^3.0.0",
+    "axios-miniprogram-adapter": "^0.3.2",
+    "axios-mock-adapter": "^1.19.0",
     "core-js": "^3.6.5",
+    "crypto-js": "^4.0.0",
+    "dayjs": "^1.10.5",
     "flyio": "^0.6.2",
+    "mockjs": "^1.1.0",
     "node-sass": "^4.14.1",
+    "qrcode": "^1.4.4",
+    "qs": "^6.10.1",
     "regenerator-runtime": "^0.12.1",
     "sass-loader": "^7.3.1",
     "vue": "^2.6.11",
-    "vuex": "^3.2.0",
-    "axios-miniprogram-adapter": "^0.3.2",
-    "crypto-js": "^4.0.0",
-    "qrcode": "^1.4.4",
-    "qs": "^6.10.1"
+    "vuex": "^3.2.0"
   },
   "devDependencies": {
     "@babel/runtime": "~7.12.0",

src/api/amap.js

@@ -1,14 +0,0 @@
-import request from '@/utils/request'
-
-
-// 高德逆地理编码
-export function amapRegeo(params) {
-	return request({
-		url: 'https://restapi.amap.com/v3/geocode/regeo',
-		method: 'get',
-		params:{
-			key:'6476cd358ddea091d7da6d59e92b0659',
-			...params
-		}
-	})
-}

src/api/answer.js

@@ -1,49 +0,0 @@
-import request from '@/utils/request'
-
-// 获取题库列表
-export function questionList(params) {
-	return request({
-		url: '/student/question/info/getQuestionInfoList',
-		method: 'get',
-		params
-	})
-}
-
-// 获取随机题库列表
-export function questionListRandom(params) {
-	return request({
-		url: '/student/question/info/getRandQuestionInfoList',
-		method: 'get',
-		params
-	})
-}
-
-// 获取错题收藏列表
-export function questionErrorList(params) {
-	return request({
-		url: '/student/question/error/getQuestionErrorList',
-		method: 'get',
-		params
-	})
-}
-
-// 新增错题
-export function questionErrorAdd(id) {
-	return request({
-		url: '/student/question/error',
-		method: 'post',
-		data: {
-			questionId: id
-		}
-	})
-}
-
-// 删除错题
-export function questionErrorDel(ids) {
-	return request({
-		url: `/student/question/error/${ids}`,
-		method: 'delete'
-	})
-}
-
-

src/api/applist.js

@@ -1,77 +0,0 @@
-import request from '@/utils/request'
-
-// 按品类查询商家列表
-export function getTypeAppList(id,params) {
-	return request({
-		url: `/student/applet/customer/getCustomerListByProductId/${id}`,
-		method: 'get',
-		params
-	})
-}
-
-// 查询用户收藏列表
-export function collectionList(params) {
-	return request({
-		url: '/student/applet/collection/collectionList',
-		method: 'get',
-		params
-	})
-}
-
-// 查询用户浏览记录
-export function getBrowseRecordInfoList(params) {
-	return request({
-		url: '/student/applet/record/info/getBrowseRecordInfoList',
-		method: 'get',
-		params
-	})
-}
-
-// 查询品类列表
-export function typeList(params) {
-	return request({
-		url: '/student/applet/product/info/list',
-		method: 'get',
-		params
-	})
-}
-
-// 收藏商家
-export function addFavorites(id) {
-	return request({
-		url: `/student/applet/collection/collectionBusiness/${id}`,
-		method: 'put'
-	})
-}
-
-// 删除收藏
-export function delFavorites(ids) {
-	return request({
-		url: `/student/applet/collection/cancelCollection/${ids}`,
-		method: 'delete'
-	})
-}
-
-// 新增记录
-export function BrowseRecordAdd(id) {
-	return request({
-		url: `/student/applet/record/info/insertBrowseRecord/${id}`,
-		method: 'put'
-	})
-}
-
-// 删除记录
-export function BrowseRecordDel(ids) {
-	return request({
-		url: `/student/applet/record/info/${ids}`,
-		method: 'delete'
-	})
-}
-
-// 查询轮播图列表
-export function getCarouselChartList() {
-	return request({
-		url: `/student/applet/homePage/getHomePageDataList`,
-		method: 'get'
-	})
-}

src/api/cinema.js

@@ -1,141 +0,0 @@
-import request from '@/utils/request'
-import qs from 'qs'
-
-let fileCommonApiUrl='/student/film/order/fileCommonApi'
-
-// 获取电影后台折扣参数
-export function getFilmDiscount(data) {
-	return request({
-		url: `/system/config/configKey/film_discount`,
-	})
-}
-
-// 获取即将上映电影列表
-export function getSoonList(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'movieapi/movie-info/get-soon-list',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 包含某电影的日期
-export function getShowDate(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'movieapi/movie-info/get-show-date',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 获取正在热映电影列表
-export function getHotList(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'movieapi/movie-info/get-hot-list',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 获取城市列表
-export function getCityList(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'movieapi/movie-info/get-city-list',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 获取影院列表
-export function getCinemaList(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'movieapi/movie-info/get-cinema-list',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 包含某电影的影院
-export function getShowList(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'movieapi/movie-info/get-show-list',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 某电影在某影院的场次排期
-export function getScheduleList(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'movieapi/movie-info/get-schedule-list',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 查账户余额
-export function getInfo(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'api/user/info',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 根据订单查影票信息
-export function orderQuery(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'api/order/query',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 某次电影的座位
-export function getSeat(data) {
-	return request({
-		url: fileCommonApiUrl,
-		method: 'post',
-		data: {
-			url: 'movieapi/movie-info/get-seat',
-			paramData: qs.stringify(data)
-		}
-	})
-}
-
-// 获取电影票支付数据
-export function prepareOrder(data) {
-	return request({
-		url: '/student/wx/prepareOrder',
-		method: 'post',
-		data
-	})
-}
-

src/api/home.js

@@ -1,89 +0,0 @@
-import request from '@/utils/request'
-import md5 from 'crypto-js/md5'
-
-// 查询轮播图列表
-export function getHomePageDataList() {
-	return request({
-		url: `/student/applet/homePage/getHomePageDataList`,
-		method: 'get'
-	})
-}
-
-//拼多多密钥计算
-function calcAuth(params, client_secret) {
-
-	var arr = []
-	Object.keys(params).sort().forEach((key) => {
-		arr.push(key + params[key])
-	})
-	arr[0] = client_secret + arr[0]
-	arr[arr.length - 1] += client_secret
-
-
-	return md5(arr.join('')).toString().toUpperCase()
-}
-
-// 查询轮播图列表
-export function getPDD(data) {
-
-	let params = {
-		type: 'pdd.ddk.goods.recommend.get',
-		data_type: 'JSON',
-		client_id: 'fa0f2debb5b0444b9719919d7b8204d1',
-		pid: '1642187_203462988',
-		timestamp: new Date().getTime().toString().slice(0, 10),
-		...data
-	}
-
-	let client_secret = '3305b6bb37252495848e67fd991134651e308495'
-
-	params.sign = calcAuth(params, client_secret)
-
-	return request({
-		url: `https://gw-api.pinduoduo.com/api/router`,
-		method: 'get',
-		params
-	})
-}
-
-
-
-// 查询小程序跳转参数
-export async function getPddWxData(data) {
-
-	let params = {
-		type: 'pdd.ddk.goods.promotion.url.generate',
-		data_type: 'JSON',
-		client_id: 'fa0f2debb5b0444b9719919d7b8204d1',
-		p_id: '1642187_203462988',
-		timestamp: new Date().getTime().toString().slice(0, 10),
-		generate_we_app: true
-	}
-
-	let getPDDRes = await getPDD(data)
-	params.search_id = getPDDRes.goods_basic_detail_response.list[0].search_id
-	let arr = '['
-	getPDDRes.goods_basic_detail_response.list.map((val) => {
-		arr += '"' + val.goods_sign + '",'
-	})
-	params.goods_sign_list = arr.slice(0, -1) + ']'
-
-
-	let client_secret = '3305b6bb37252495848e67fd991134651e308495'
-
-	params.sign = calcAuth(params, client_secret)
-
-	let wxDataRes = await request({
-		url: `https://gw-api.pinduoduo.com/api/router`,
-		method: 'get',
-		params
-	})
-
-	let dataArr = []
-
-	getPDDRes.goods_basic_detail_response.list.map((val, index) => {
-		val.we_app_info = wxDataRes.goods_promotion_url_generate_response.goods_promotion_url_list[index].we_app_info
-	})
-	
-	return getPDDRes.goods_basic_detail_response.list
-}

src/api/index.js

@@ -0,0 +1,8 @@
+//批量引入modules文件夹下的js
+const api = {}
+const modules = require.context('./modules', false, /\.js$/)
+modules.keys().forEach(key=>{
+	api[key.slice(2,-3)]=modules(key).default
+})
+
+export default api

src/api/login.js

@@ -1,57 +0,0 @@
-import request from '@/utils/request'
-
-
-//微信小程序登录code
-async function wxlogin() {
-	let wxLogin = await wx.login()
-	return wxLogin
-}
-
-// 登录方法
-export async function login() {
-	let res = await wxlogin();
-	return request({
-		url: '/login/jscode',
-		method: 'post',
-		params: {
-			jscode: res.code
-		},
-		headers: {
-			isLogin: true
-		}
-	})
-}
-
-// 更新用户信息
-export function updateUserInfo(data) {
-	return request({
-		url: '/student/user/info',
-		method: 'post',
-		data
-	})
-}
-
-// 获取用户详细信息
-export async function getInfo() {
-	return request({
-		url: '/getInfo',
-		method: 'get'
-	})
-}
-
-// 退出方法
-export function logout() {
-	return request({
-		url: '/logout',
-		method: 'post'
-	})
-}
-
-// 绑定用户身份证信息
-export function bindUserCard(data) {
-	return request({
-		url: '/gzpt/userInfo/bind',
-		method: 'put',
-		data
-	})
-}

src/api/mock/data/carVideo - 副本.js

@@ -0,0 +1,41 @@
+import Mock from 'mockjs'
+
+let Random = Mock.Random
+const data = Mock.mock({
+	code: 200,
+	msg: '请求成功',
+	'data|5-10': [{
+		chapterName: '@ctitle(5, 10)',
+		'list|5-10': [{
+			videoUrl: 'http://1305573081.vod2.myqcloud.com/10abdb63vodcq1305573081/c5d1c7a53701925920473528049/dfEdqef12AMA.mp4',
+			cover: Random.image('200x100', '#50B347', '#FFF', '@ctitle(5, 12)'),
+			title: '@ctitle(5, 12)',
+			remarks: '@ctitle(5, 12)',
+			duration: '@datetime("HH:mm:ss")',
+		}]
+	}]
+})
+
+const search = Mock.mock({
+	code: 200,
+	msg: '请求成功',
+	'list|5-10': [{
+		videoUrl: 'http://1305573081.vod2.myqcloud.com/10abdb63vodcq1305573081/c5d1c7a53701925920473528049/dfEdqef12AMA.mp4',
+		cover: Random.image('200x100', '#50B347', '#FFF', '@ctitle(5, 12)'),
+		title: '@ctitle(5, 12)',
+		remarks: '@ctitle(5, 12)',
+		duration: '@datetime("HH:mm:ss")',
+		type: '类型',
+	}]
+})
+
+const fulu = {
+	getCarVideoList() {
+		return [200, data]
+	},
+	getSearch() {
+		return [200, search]
+	}
+}
+
+export default fulu

src/api/mock/data/carVideo.js

@@ -0,0 +1,43 @@
+import Mock from 'mockjs'
+
+let Random = Mock.Random
+const data = Mock.mock({
+	code: 200,
+	msg: '请求成功',
+	'data|5-10': [{
+		chapterName: '@ctitle(5, 10)',
+		'list|5-10': [{
+			videoUrl: 'http://1305573081.vod2.myqcloud.com/10abdb63vodcq1305573081/c5d1c7a53701925920473528049/dfEdqef12AMA.mp4',
+			cover: Random.image('200x100', '#50B347', '#FFF', '@ctitle(5, 12)'),
+			title: '@ctitle(5, 12)',
+			remarks: '@ctitle(5, 12)',
+			duration: '@datetime("HH:mm:ss")',
+		}]
+	}]
+})
+
+const search = Mock.mock({
+	code: 200,
+	msg: '请求成功',
+	data: {
+		chapterName: '@ctitle(5, 10)',
+		'list|5-10': [{
+			videoUrl: 'http://1305573081.vod2.myqcloud.com/10abdb63vodcq1305573081/c5d1c7a53701925920473528049/dfEdqef12AMA.mp4',
+			cover: Random.image('200x100', '#50B347', '#FFF', '@ctitle(5, 12)'),
+			title: '@ctitle(5, 12)',
+			remarks: '@ctitle(5, 12)',
+			duration: '@datetime("HH:mm:ss")',
+		}]
+	}
+})
+
+const fulu = {
+	getCarVideoList() {
+		return [200, data]
+	},
+	getSearch() {
+		return [200, search]
+	}
+}
+
+export default fulu

src/api/mock/data/fulu.js

@@ -0,0 +1,50 @@
+import Mock from 'mockjs'
+
+const data = Mock.mock({
+	code: 200,
+	msg: '请求成功',
+	'data|1-1': [{
+			type_name: '视频会员',
+			'list|1-1': [{
+					icon: 'https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E7%88%B1%E5%A5%87%E8%89%BA.png',
+					name: '爱奇艺',
+					introduction: "立即充值享折扣",
+					remark: ['请确保充值账号无误，充值成功后不支持退换'],
+					product_ids: [11549658, 16681765, 17736621, 18229248, 10971544, 15757712]
+				},
+				{
+					icon: 'https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E8%85%BE%E8%AE%AF%E8%A7%86%E9%A2%91.png',
+					name: '腾讯视频',
+					introduction: "立即充值享折扣",
+					remark: ['请确保充值账号无误，充值成功后不支持退换', '仅支持QQ号充值'],
+					product_ids: [18387970, 11032040, 16894978, 14983719]
+				},
+				{
+					icon: 'https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9.png',
+					name: '哔哩哔哩',
+					introduction: "立即充值享折扣",
+					remark: ['请确保充值账号无误，充值成功后不支持退换'],
+					product_ids: [10645834]
+				}
+			]
+		},
+		{
+			type_name: '虚拟卡币',
+			'list|1-1': [{
+				icon: 'https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E7%88%B1%E5%A5%87%E8%89%BA.png',
+				name: '斗鱼直播',
+				introduction: "立即充值享折扣",
+				remark: ['请确保充值账号无误，充值成功后不支持退换'],
+				product_ids: [12664416]
+			}]
+		}
+	]
+})
+
+const fulu = {
+	getTypeList() {
+		return [200, data]
+	}
+}
+
+export default fulu

src/api/mock/index.js

@@ -0,0 +1,14 @@
+import MockAdapter from 'axios-mock-adapter'
+import fulu from './data/fulu.js'
+import carVideo from './data/carVideo.js'
+
+export default {
+	init(request) {
+		let mock = new MockAdapter(request, {
+			onNoMatch: 'passthrough'
+		});
+		// mock.onGet('student/applet/fulu/list').reply(fulu.getTypeList);
+		mock.onGet('carVideo').reply(carVideo.getCarVideoList);
+		mock.onGet('carVideo/search').reply(carVideo.getSearch);
+	}
+}

src/api/modules/amap.js

@@ -0,0 +1,24 @@
+import request from '../request'
+
+//高德web服务 api
+const amap={
+	/**
+	 * 逆地理编码
+	 * @param {
+		 location: string '经纬度坐标:经度在前，纬度在后，经纬度间以“,”分割'
+		 ...其他参数去高德官网看
+	 } params
+	 */
+	regeo(params) {
+		return request({
+			url: 'https://restapi.amap.com/v3/geocode/regeo',
+			method: 'get',
+			params: {
+				key: '6476cd358ddea091d7da6d59e92b0659',
+				...params
+			}
+		})
+	}
+}
+
+export default amap

src/api/modules/applist.js

@@ -0,0 +1,102 @@
+import request from '../request'
+
+//发现模块
+const appList = {
+	/**
+	 * 按品类查询商家列表
+	 * @param {Object} id
+	 * @param {Object} params
+	 */
+	getTypeAppList(id,params) {
+		return request({
+			url: `/student/applet/customer/getCustomerListByProductId/${id}`,
+			method: 'get',
+			params
+		})
+	},
+	/**
+	 * 查询用户收藏列表
+	 * @param {Object} params
+	 */
+	collectionList(params) {
+		return request({
+			url: '/student/applet/collection/collectionList',
+			method: 'get',
+			params
+		})
+	},
+	/**
+	 * 查询用户浏览记录
+	 * @param {Object} params
+	 */
+	getBrowseRecordInfoList(params) {
+		return request({
+			url: '/student/applet/record/info/getBrowseRecordInfoList',
+			method: 'get',
+			params
+		})
+	},
+	/**
+	 * 查询品类列表
+	 * @param {Object} params
+	 */
+	typeList(params) {
+		return request({
+			url: '/student/applet/product/info/list',
+			method: 'get',
+			params
+		})
+	},
+	/**
+	 * 收藏商家
+	 * @param {Object} id
+	 */
+	addFavorites(id) {
+		return request({
+			url: `/student/applet/collection/collectionBusiness/${id}`,
+			method: 'put'
+		})
+	},
+	/**
+	 * 删除收藏
+	 * @param {Object} ids
+	 */
+	delFavorites(ids) {
+		return request({
+			url: `/student/applet/collection/cancelCollection/${ids}`,
+			method: 'delete'
+		})
+	},
+	/**
+	 * 新增记录
+	 * @param {Object} id
+	 */
+	BrowseRecordAdd(id) {
+		return request({
+			url: `/student/applet/record/info/insertBrowseRecord/${id}`,
+			method: 'put'
+		})
+	},
+	/**
+	 * 删除记录
+	 * @param {Object} ids
+	 */
+	BrowseRecordDel(ids) {
+		return request({
+			url: `/student/applet/record/info/${ids}`,
+			method: 'delete'
+		})
+	},
+	/**
+	 * 查询轮播图列表
+	 */
+	getCarouselChartList() {
+		return request({
+			url: `/student/applet/homePage/getHomePageDataList`,
+			method: 'get'
+		})
+	}
+}
+
+
+export default appList

src/api/modules/carVideo.js

@@ -0,0 +1,70 @@
+import request from '../request'
+import dayjs from 'dayjs'
+
+//学车视频api
+const carVideo = {
+	async getCarVideoList(id) {
+		// return request({
+		// 	url: `/carVideo`
+		// })
+		let res = await request({
+			url: `student/teachingVideo/info/list/${id}`
+		})
+
+		res.data = res.data.map(obj => {
+			let newObj = {}
+			newObj.chapterName = obj.typeName
+			newObj.list = obj.list.map(item => {
+				return {
+					pid: item.pid,
+					videoUrl: item.fileUrl,
+					cover: item.coverFileUrl,
+					title: item.title,
+					remarks: item.videoDescribe,
+					duration: dayjs(item.videoDuration * 1000).subtract(8, 'hour').format(
+						'HH:mm:ss'),
+				}
+			})
+			return newObj
+		})
+		res.data = res.data.filter(obj => {
+			return obj.list.length > 0
+		})
+		return res
+	},
+	getTypeList() {
+		return request({
+			url: `student/teachingVideo/info/typeList`
+		})
+	},
+	async getSearchList(keyword) {
+
+		let res = await request({
+			url: `student/teachingVideo/info/search`,
+			params: {
+				keyword
+			}
+		})
+
+		let newObj = {}
+		newObj.list = res.data.map(item => {
+
+			return {
+				pid: item.pid,
+				videoUrl: item.fileUrl,
+				cover: item.coverFileUrl,
+				title: item.title,
+				remarks: item.videoDescribe,
+				duration: dayjs(item.videoDuration * 1000).subtract(8, 'hour').format(
+					'HH:mm:ss'),
+			}
+
+		})
+		newObj.chapterName = keyword
+		res.data = newObj
+		
+		return res
+	},
+}
+
+export default carVideo

src/api/modules/cinema.js

@@ -0,0 +1,171 @@
+import request from '../request'
+import qs from 'qs'
+
+let fileCommonApiUrl='/student/film/order/fileCommonApi'
+
+//电影模块API
+const cinema = {
+	/**
+	 * 获取电影后台折扣参数
+	 * @param {Object} data
+	 */
+	getFilmDiscount(data) {
+		return request({
+			url: `/system/config/configKey/film_discount`,
+		})
+	},
+	/**
+	 * 获取即将上映电影列表
+	 * @param {Object} data
+	 */
+	getSoonList(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'movieapi/movie-info/get-soon-list',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 包含某电影的日期
+	 * @param {Object} data
+	 */
+	getShowDate(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'movieapi/movie-info/get-show-date',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 获取正在热映电影列表
+	 * @param {Object} data
+	 */
+	getHotList(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'movieapi/movie-info/get-hot-list',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 获取城市列表
+	 * @param {Object} data
+	 */
+	getCityList(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'movieapi/movie-info/get-city-list',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 获取影院列表
+	 * @param {Object} data
+	 */
+	getCinemaList(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'movieapi/movie-info/get-cinema-list',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 包含某电影的影院
+	 * @param {Object} data
+	 */
+	getShowList(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'movieapi/movie-info/get-show-list',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 某电影在某影院的场次排期
+	 * @param {Object} data
+	 */
+	getScheduleList(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'movieapi/movie-info/get-schedule-list',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 查账户余额
+	 * @param {Object} data
+	 */
+	getInfo(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'api/user/info',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 根据订单查影票信息
+	 * @param {Object} data
+	 */
+	orderQuery(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'api/order/query',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 某次电影的座位
+	 * @param {Object} data
+	 */
+	getSeat(data) {
+		return request({
+			url: fileCommonApiUrl,
+			method: 'post',
+			data: {
+				url: 'movieapi/movie-info/get-seat',
+				paramData: qs.stringify(data)
+			}
+		})
+	},
+	/**
+	 * 获取电影票支付数据
+	 * @param {Object} data
+	 */
+	prepareOrder(data) {
+		return request({
+			url: '/student/wx/prepareOrder',
+			method: 'post',
+			data
+		})
+	}
+}
+
+export default cinema 
+

src/api/modules/fulu.js

@@ -0,0 +1,125 @@
+import request from '../request'
+
+//福禄会员api
+const fulu = {
+	/**
+	 * 获取福禄商品折扣
+	 */
+	getPriceKeyword() {
+		return request({
+			url: `/system/config/configKey/fulu_vip_discount`,
+		})
+	},
+	/**
+	 * @param {
+		 buy_num: Number			购买数量
+		 charge_account: string		充值账号
+		 goodsPictureUrl: string	商品图片地址
+		 product_id: Number 		商品编号
+	 } data
+	 * 微信支付福禄下单
+	 */
+	prepareOrder(data) {
+		return request({
+			url: `/student/wx/prepareOrderForFulu`,
+			method: 'post',
+			data
+		})
+	},
+	/**
+	 * @param {
+		 customer_order_no:string  外部订单号
+	 } data
+	 */
+	orderInfoGet(data) {
+		return request({
+			url: `student/fulu/fuluCommonApi`,
+			method: 'post',
+			data: {
+				method: 'fulu.order.info.get',
+				biz_content: JSON.stringify(data)
+			}
+		})
+	},
+	//商品api
+	goods: {
+		/**
+		 * 获取福禄商品类型列表
+		 * mock
+		 */
+		async getTypeList() {
+			let res = await request({
+				url: `student/applet/fulu/list`
+			})
+
+			res.data = res.data.map(val => {
+				val.type_name = val.typeName
+				val.list = val.list.map(val2 => {
+					val2.icon = val2.iconUrl
+					val2.product_ids = val2.productIds.split(',')
+					val2.remark = val2.remark.split('|')
+					return val2
+				})
+				return val
+			})
+			
+			return res
+		},
+		/**
+		 * 获取商品信息
+		 * @param {
+			 product_id: string '商品ID'
+		 } data
+		 */
+		infoGet(data) {
+			return request({
+				url: `student/fulu/fuluCommonApi`,
+				method: 'post',
+				data: {
+					method: 'fulu.goods.info.get',
+					biz_content: JSON.stringify(data)
+				}
+			})
+		},
+		/**
+		 * 获取商品模板
+		 * @param {
+			 template_id: string '商品模板编号'
+		 } data
+		 */
+		templateGet(data) {
+			return request({
+				url: `student/fulu/fuluCommonApi`,
+				method: 'post',
+				data: {
+					method: 'fulu.goods.template.get',
+					biz_content: JSON.stringify(data)
+				}
+			})
+		},
+		/**
+		 * 获取商品列表
+		 * @param {
+			 first_category_id?: int 	'商品分类Id（一级）'
+			 second_category_id?: int 	'商品分类Id（二级）'
+			 third_category_id?: int 	'商品分类Id（三级）'
+			 product_id?: int 			'商品编号'
+			 product_name?: string 		'商品名称'
+			 product_type?: string 		'库存类型：卡密、直充'
+			 face_value?: double 		'面值'
+		 } data
+		 */
+		listGet(data) {
+			return request({
+				url: `student/fulu/fuluCommonApi`,
+				method: 'post',
+				data: {
+					method: 'fulu.goods.list.get',
+					biz_content: JSON.stringify(data)
+				}
+			})
+		}
+	}
+}
+
+export default fulu

src/api/modules/home.js

@@ -0,0 +1,104 @@
+import request from '../request'
+import md5 from 'crypto-js/md5'
+
+let pddKeyword = [],
+	keyIndex = 0
+
+//首页模块
+const home = {
+	/**
+	 * 查询轮播图列表
+	 */
+	getHomePageDataList(keys) {
+		return request({
+			url: `student/applet/homePage/dictValueHomePageDataList/` + keys,
+			method: 'get'
+		})
+	},
+	async getPddKeyword() {
+		if (pddKeyword.length != 0) {
+			keyIndex++
+			return pddKeyword[keyIndex % pddKeyword.length]
+		}
+		let {
+			data
+		} = await request({
+			url: `/system/config/configKey/pdd_keyword`,
+		})
+		pddKeyword = data.split('/')
+		return pddKeyword[keyIndex % pddKeyword.length]
+	},
+	/**
+	 * 查询轮播图列表
+	 * @param {Object} data
+	 */
+	async getPDD(data) {
+		let keyword = await home.getPddKeyword()
+		let params = {
+			// type: 'pdd.ddk.goods.recommend.get',
+			type: 'pdd.ddk.goods.search',
+			data_type: 'JSON',
+			client_id: 'fa0f2debb5b0444b9719919d7b8204d1',
+			pid: '1642187_203462988',
+			timestamp: new Date().getTime().toString().slice(0, 10),
+			keyword,
+			...data
+		}
+		let client_secret = '3305b6bb37252495848e67fd991134651e308495'
+		params.sign = calcAuth(params, client_secret)
+		return request({
+			url: `https://gw-api.pinduoduo.com/api/router`,
+			method: 'get',
+			params
+		})
+	},
+	/**
+	 * 查询小程序跳转参数
+	 * @param {Object} data
+	 */
+	async getPddWxData(data) {
+		let params = {
+			type: 'pdd.ddk.goods.promotion.url.generate',
+			data_type: 'JSON',
+			client_id: 'fa0f2debb5b0444b9719919d7b8204d1',
+			p_id: '1642187_203462988',
+			timestamp: new Date().getTime().toString().slice(0, 10),
+			generate_we_app: true
+		}
+		let getPDDRes = await home.getPDD(data)
+		params.search_id = getPDDRes.goods_search_response.search_id
+		let arr = '['
+		getPDDRes.goods_search_response.goods_list.map((val) => {
+			arr += '"' + val.goods_sign + '",'
+		})
+		params.goods_sign_list = arr.slice(0, -1) + ']'
+		let client_secret = '3305b6bb37252495848e67fd991134651e308495'
+		params.sign = calcAuth(params, client_secret)
+		let wxDataRes = await request({
+			url: `https://gw-api.pinduoduo.com/api/router`,
+			method: 'get',
+			params
+		})
+		let dataArr = []
+		getPDDRes.goods_search_response.goods_list.map((val, index) => {
+			val.we_app_info = wxDataRes.goods_promotion_url_generate_response.goods_promotion_url_list[
+				index].we_app_info
+		})
+		return getPDDRes.goods_search_response.goods_list
+	}
+
+}
+
+//拼多多密钥计算
+function calcAuth(params, client_secret) {
+	var arr = []
+	Object.keys(params).sort().forEach((key) => {
+		arr.push(key + params[key])
+	})
+	arr[0] = client_secret + arr[0]
+	arr[arr.length - 1] += client_secret
+	return md5(arr.join('')).toString().toUpperCase()
+}
+
+
+export default home

src/api/modules/order.js

@@ -0,0 +1,136 @@
+import request from '../request'
+
+//订单模块
+const order = {
+	/**
+	 * 查询订单列表
+	 * @param {Object} params
+	 */
+	async getOrderList(params) {
+		let res = await request({
+			url: '/student/wx/order/list',
+			params
+		})
+
+		const orderStatusMap = new Map([
+			['1', '等待发货'],
+			['2', '交易完成'],
+			['3', '退款/售后']
+		])
+
+		const orderNameMap = new Map([
+			['1', (json) => {
+				return json.cinemaData.filmName
+			}],
+			['2', (json) => {
+				let nameArr = json.wxFuluOrderDetailDTO.product_name.split('-')
+				return nameArr[1] + '-' + nameArr[2]
+			}],
+			['3', (json) => {
+				let nameArr = json.rechargePhoneNo+'话费充值'
+				return nameArr
+			}]
+		])
+
+		res.rows = res.rows.map(val => {
+
+			try {
+				var orderDataJson = JSON.parse(val.orderDataJson)
+			} catch {
+				orderDataJson = {
+					wxFuluOrderDetailDTO: {
+						product_name: ''
+					}
+				}
+			}
+
+			return {
+				createTime: val.createTime,
+				goodsPictureUrl: val.goodsPictureUrl,
+				orderName: orderNameMap.get(val.goodsType)(orderDataJson),
+				outTradeNo: val.outTradeNo,
+				total: val.total / 100,
+				orderStatus: orderStatusMap.get(val.orderStatus),
+				id: val.id,
+				goodsType: val.goodsType
+			}
+		})
+
+		return res
+	},
+	/**
+	 * 查询订单详情
+	 * @param path:string 订单号
+	 */
+	async getWxOrder(path) {
+		let res = await request({
+			url: `/student/wx/${path}`,
+		})
+
+		const orderStatusMap = new Map([
+			['1', '等待发货'],
+			['2', '交易完成'],
+			['3', '退款/售后']
+		])
+
+		const jsonMap = new Map([
+			['1', (data) => {
+				return {
+					filmName: data.orderDataJson.cinemaData.filmName,
+					showTime: data.orderDataJson.cinemaData.showTime,
+					cinemaName: data.orderDataJson.cinemaData.cinemaName,
+					hallName: data.orderDataJson.cinemaData.hallName,
+					seat: data.orderDataJson.wxOrderCreateDTO.seat.split(','),
+					total: data.total / 100,
+					orderStatus: data.orderStatus,
+					orderStatusDesc: orderStatusMap.get(data.orderStatus),
+				}
+			}],
+			['2', (data) => {
+				return {
+					charge_account: data.orderDataJson.wxFuluOrderDetailDTO.charge_account,
+					product_name: data.orderDataJson.wxFuluOrderDetailDTO.product_name,
+					create_time: data.orderDataJson.wxFuluOrderDetailDTO.create_time,
+					buy_num: data.orderDataJson.wxFuluOrderDetailDTO.buy_num,
+					recharge_description: data.orderDataJson.wxFuluOrderDetailDTO.recharge_description,
+					total: data.total / 100,
+					orderStatus: data.orderStatus,
+					orderStatusDesc: orderStatusMap.get(data.orderStatus),
+					goodsPictureUrl: data.goodsPictureUrl
+				}
+			}],
+			['3', (data) => {
+				let operatorsMap = new Map([
+					[1,'移动'],
+					[2,'联通'],
+					[3,'电信'],
+				])
+				return {
+					rechargePhoneNo: data.orderDataJson.rechargePhoneNo,
+					tmallNo: data.orderDataJson.tmallNo,
+					operators: operatorsMap.get(data.orderDataJson.operators),
+					create_time: data.createTime,
+					total: data.total / 100,
+					orderStatus: data.orderStatus,
+					orderStatusDesc: orderStatusMap.get(data.orderStatus),
+					goodsPictureUrl: data.goodsPictureUrl
+				}
+			}]
+		])
+
+		try {
+			res.data.orderDataJson = JSON.parse(res.data.orderDataJson)
+		} catch {
+			res.data.orderDataJson = {
+				wxFuluOrderDetailDTO: {
+					product_name: ''
+				}
+			}
+		}
+		res.data = jsonMap.get(res.data.goodsType)(res.data)
+
+		return res
+	}
+}
+
+export default order

src/api/modules/phoneBill.js

@@ -0,0 +1,28 @@
+import request from '../request'
+
+//福禄会员api
+const phoneBill = {
+	/**
+	 * @param {
+		 operators: Number			运营商：1-移动 2-联通 3-电信
+		 recharge_phone_no: Number		充值号码
+		 goodsPictureUrl: string	商品图片地址
+		 tmall_no: string 		天猫订单号
+	 } data
+	 * 微信支付福禄下单
+	 */
+	prepareOrder(data) {
+		return request({
+			url: `/student/wx/prepareOrderForPhoneBill`,
+			method: 'post',
+			data
+		})
+	},
+	getPriceKeyword() {
+		return request({
+			url: `/system/config/configKey/activities_phone_bill`,
+		})
+	},
+}
+
+export default phoneBill

src/api/modules/user.js

@@ -0,0 +1,63 @@
+import request from '../request'
+
+//用户模块
+const user = {
+	/**
+	 * 用户登录获取token
+	 */
+	async login() {
+		let res = await wx.login()
+		return request({
+			url: '/login/jscode',
+			method: 'post',
+			params: {
+				jscode: res.code
+			},
+			headers: {
+				isLogin: true
+			}
+		})
+	},
+	/**
+	 * 更新用户信息
+	 * @param {Object} data
+	 */
+	updateUserInfo(data) {
+		return request({
+			url: '/student/user/info',
+			method: 'post',
+			data
+		})
+	},
+	/**
+	 * 获取用户详细信息
+	 */
+	getInfo() {
+		return request({
+			url: '/getInfo',
+			method: 'get'
+		})
+	},
+	/**
+	 * 退出登录
+	 */
+	logout() {
+		return request({
+			url: '/logout',
+			method: 'post'
+		})
+	},
+	/**
+	 * 绑定用户身份证信息
+	 * @param {Object} data
+	 */
+	bindUserCard(data) {
+		return request({
+			url: '/gzpt/userInfo/bind',
+			method: 'put',
+			data
+		})
+	}
+}
+
+export default user

src/api/order.js

@@ -1,16 +0,0 @@
-import request from '@/utils/request'
-
-// 查询订单列表
-export function getOrderList(params) {
-	return request({
-		url: '/student/wx/order/list',
-		params
-	})
-}
-
-// 查询订单列表
-export function getWxOrder(path) {
-	return request({
-		url: `/student/wx/${path}`,
-	})
-}

src/api/pay.js

@@ -1,11 +0,0 @@
-import request from '@/utils/request'
-
-
-// 微信支付获取订单接口
-export function getPayData(data) {
-	return request({
-		url: '/student/wx/prepareOrder',
-		method: 'post',
-		data
-	})
-}

src/utils/request.js → src/api/request.js

@@ -1,23 +1,25 @@
-import {
-	getToken,
-	refreshToken
-} from '@/utils/auth'
-import errorCode from '@/utils/errorCode'
+import store from '@/store'
+import errorCode from '@/config/errorCode'
 import axios from 'axios'
 import mpAdapter from 'axios-miniprogram-adapter'
 axios.defaults.adapter = mpAdapter
 
-// export const baseUrl = 'http://192.168.8.219:8080';
-// export const baseUrl = 'http://192.168.8.213:8080/zzjs-admin';
+import mock from './mock'
+
+
+// const baseUrl = 'http://192.168.8.219:8080';
+const baseUrl = 'http://192.168.8.213:8080/zzjs-admin';
+// const baseUrl = 'https://zzjs.zzxcx.net/prod-api';
 
 // 创建axios实例
 const service = axios.create({
 	// axios中请求配置有baseURL选项，表示请求URL公共部分
 	// baseURL: process.env.VUE_APP_BASE_API,
-	baseURL: 'https://zzjs.zzxcx.net/prod-api',
+	baseURL: baseUrl,
 	// 超时
 	// timeout: 10000
 })
+mock.init(service)
 
 // request拦截器
 service.interceptors.request.use(
@@ -26,11 +28,10 @@ service.interceptors.request.use(
 			if (config.headers.isLogin) {
 				return config
 			}
-			config.headers['Authorization'] = 'Bearer ' + await getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+			config.headers['Authorization'] = 'Bearer ' + await store.dispatch("getToken") // 让每个请求携带自定义token 请根据实际情况自行修改
 			return config
 		},
 		error => {
-			console.log(error)
 			Promise.reject(error)
 		}
 )
@@ -43,21 +44,27 @@ service.interceptors.response.use(
 		// 获取错误信息
 		const msg = errorCode[code] || res.data.msg || errorCode['default']
 		//重置Authorization时间
-		if (code !== 401) refreshToken()
+		if (code !== 401) store.commit('REFRESH_TOKEN')
 
-		if (code === 401) {
-			console.log('拦截器信息:' + msg)
-		} else if (code === 500) {
-			console.log('拦截器信息:' + msg)
-		} else if (code === 502) {
-			console.log('拦截器信息:' + msg)
-		} else if (code !== 200) {
-			console.log('拦截器信息:' + msg)
+		if (code !== 200) {
+			if (code == 500) {
+				console.log('code' + code + ':' + msg)
+				wx.showToast({
+					title: 'code' + code + ':系统错误' ,
+					icon: 'none'
+				})
+			}else{
+				console.log('code' + code + ':' + msg)
+				wx.showToast({
+					title: 'code' + code + ':' + msg,
+					icon: 'none'
+				})
+			}
 		}
+		
 		return res.data
 	},
 	error => {
-		console.log('err' + error)
 		let {
 			message
 		} = error;
@@ -68,11 +75,10 @@ service.interceptors.response.use(
 		} else if (message.includes("Request failed with status code")) {
 			message = "系统接口" + message.substr(message.length - 3) + "异常";
 		}
-		// Message({
-		// 	message: message,
-		// 	type: 'error',
-		// 	duration: 5 * 1000
-		// })
+		wx.showToast({
+			title: message,
+			icon: 'none'
+		})
 		return Promise.reject(error)
 	}
 )

src/api/studytime.js

@@ -1,34 +0,0 @@
-import request from '@/utils/request'
-
-// 上传学时
-export function addTime(data) {
-	return request({
-		url: '/student/gzpt-train-record',
-		method: 'post',
-		data
-	})
-}
-
-// 查询已完成科目学时
-export function getTime(data) {
-	return request({
-		url: '/student/gzpt-train-record/getTrainFinishKm',
-		method: 'get'
-	})
-}
-
-// 查询额定学时
-export function getTimeInfo(data) {
-	return request({
-		url: '/student/gzpt-train-record/getTrainSubjectCredit',
-		method: 'get'
-	})
-}
-
-// 获取学员详细信息
-export function getStudentInfo(data) {
-	return request({
-		url: '/student/gzpt/userInfo',
-		method: 'get'
-	})
-}

src/components/m-banner/m-banner.vue

@@ -0,0 +1,38 @@
+<template>
+	<swiper class="swiper-box" :style="{height:`${height}rpx`}" :current="current" autoplay circular indicator-dots>
+		<swiper-item v-for="(item,index) in bannerList" :key='item.id'>
+			<image @click="$utils.route.clickJumpType(item)" class="image" :src="item.fileUrl" mode="scaleToFill"
+				:draggable="false" />
+		</swiper-item>
+	</swiper>
+</template>
+
+<script>
+	export default {
+		props: {
+			bannerList: {
+				type: Array,
+				default: []
+			},
+			height: {
+				type: String,
+				default: '342'
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.swiper-box {
+		width: 690rpx;
+		margin: 20rpx auto;
+		border-radius: 20rpx;
+		overflow: hidden;
+
+		.image {
+			width: 100%;
+			height: 100%;
+			border-radius: 20rpx;
+		}
+	}
+</style>

src/components/m-carvideo-sidebar/m-carvideo-sidebar.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="sidebar-box">
+		<van-sidebar custom-class='van-sidebar' :active-key="activeKey" @change='sidebarOnChange'>
+			<van-sidebar-item :title="item.chapterName" v-for="(item,index) in carVideoList" :key='index' />
+		</van-sidebar>
+		<view class="video-box">
+			<m-video-leftright :carVideoItem='item' v-for="(item,index) in carVideoList[activeKey].list" :key='index'>
+			</m-video-leftright>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			carVideoList: {
+				type: Array,
+				default: []
+			}
+		},
+		name: "m-carvideo-sidebar",
+		data: () => ({
+			activeKey: 0
+		}),
+		methods: {
+			sidebarOnChange(e) {
+				this.activeKey = e.detail
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.sidebar-box {
+		display: flex;
+		background-color: #FFFFFF;
+		height: calc(100vh - 98px - 190rpx);
+
+		/deep/ .van-sidebar {
+			width: 220rpx;
+			height: 100%;
+			overflow-y: auto;
+			font-size: 26rpx;
+			font-weight: 400;
+			line-height: 39rpx;
+			color: #0F0404;
+		}
+
+		.video-box {
+			height: 100%;
+			overflow-y: auto;
+		}
+	}
+</style>

src/components/m-home-bottomad/m-home-bottomad.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="bottom-ad" v-for="(item,index) in bottomAD" :key='item.id' @click="$utils.route.clickJumpType(item.$orig)">
+		<image style="width: 100%;" :src="item.fileUrl" mode="widthFix"></image>
+		<text>今日仅剩{{index|dynamicQuantity}}个</text>
+		<button>免费领取</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "m-home-bottomad",
+		props:{
+			bottomAD:{
+				type: Array,
+				default:[]
+			}
+		},
+		filters: {
+			dynamicQuantity(index) {
+				index++
+				let x = new Date().getHours() / 3
+				let num = ((x - 8) ** 2) + index * (8 - x) * 1 + index * 3 + 1
+				return parseInt(num)
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.bottom-ad {
+		margin-top: 15rpx;
+		position: relative;
+
+		&:nth-child(2) {
+			margin-top: 20rpx;
+		}
+
+		text {
+			position: absolute;
+			top: 104rpx;
+			left: 220rpx;
+			padding: 10rpx 15rpx;
+			background: #FFE1D9;
+			font-size: 22rpx;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #A40303;
+		}
+
+		button {
+			position: absolute;
+			top: 67rpx;
+			right: 40rpx;
+			display: inline-block;
+			margin: 0;
+			padding: 0rpx 26rpx;
+			background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
+			border-radius: 30rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #FFFFFF;
+		}
+	}
+</style>

src/components/m-home-coupon/m-home-coupon.vue

@@ -0,0 +1,75 @@
+<template>
+	<view class="eat-box">
+		<view class="eat" v-for="(item,index) in couponList" :key='item.id' @click="$utils.route.clickJumpType(item.$orig)">
+			<image :src="item.fileUrl" mode="scaleToFill" class="img"></image>
+			<view class="text-box">
+				<text class="text-1">{{item.pictureName}}</text>
+				<text class="text-2">{{item.dataDescribe.split(' ')[0]}}</text>
+				<text class="text-3">{{item.dataDescribe.split(' ')[1]}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"m-home-coupon",
+		props:{
+			couponList:{
+				type: Array,
+				default:[]
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+		.eat-box {
+			margin-top: 30rpx;
+			display: flex;
+			justify-content: space-between;
+
+			.eat {
+				width: 158rpx;
+				height: 240rpx;
+				position: relative;
+
+				.img {
+					width: 100%;
+					height: 100%;
+				}
+
+				.text-box {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					position: absolute;
+					bottom: 10rpx;
+					left: 50%;
+					width: 100%;
+					transform: translateX(-50%);
+
+					.text-1 {
+						font-size: 24rpx;
+						color: #0F0404;
+						text-align: center;
+					}
+
+					.text-2 {
+						margin-top: 5rpx;
+						font-size: 20rpx;
+						color: #FE3232;
+						text-align: center;
+					}
+
+					.text-3 {
+						font-size: 20rpx;
+						color: #666666;
+						text-align: center;
+					}
+				}
+
+			}
+		}
+</style>

src/components/m-home-menu/m-home-menu.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="menu-box">
+		<view class="menu" v-for="(item,index) in menuList" :key='item.id' @click="$utils.route.clickJumpType(item)">
+			<image :src="item.fileUrl" mode="scaleToFill" class="img"></image>
+			<text class="text-1">{{item.pictureName}}</text>
+			<text class="text-2">{{item.dataDescribe || '暂无描述'}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "m-home-menu",
+		props:{
+			menuList:{
+				type: Array,
+				default:[]
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.menu-box {
+		display: flex;
+		justify-content: flex-start;
+		flex-wrap: wrap;
+		margin: 0 -10rpx;
+
+		.menu {
+			width: 20%;
+			padding: 0 10rpx;
+			box-sizing: border-box;
+			// height: 121rpx;
+			margin-top: 40rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
+
+			.img {
+				flex-shrink: 0;
+				width: 83rpx;
+				height: 83rpx;
+				border-radius: 50%;
+			}
+
+			.text-1 {
+				margin-top: 10rpx;
+				font-size: 24rpx;
+				color: #0F0404;
+				text-align: center;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.text-2 {
+				font-size: 20rpx;
+				color: #666666;
+				text-align: center;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+	}
+</style>

src/components/m-home-pdd/m-home-pdd.vue

@@ -0,0 +1,194 @@
+<template>
+	<view class="item-box">
+		<view class="item-titBox">
+			<text class="item-tit">学车必备</text>
+			<!-- <text class="item-tit-right" @click="$utils.route.goPage('/pages/carVideo/index')">更多类型 ></text> -->
+		</view>
+		<loadSke :loading='pddLoading' :list='pddList'>
+			<view class="flex-box">
+				<view class="film-box" v-for="(item,index) in pddList" :key='index'
+					@click="pddGoApp({appId:item.we_app_info.app_id,path:item.we_app_info.page_path})">
+					<image :src="item.goods_image_url" mode="widthFix" class="img" draggable></image>
+					<view class="bottom-box">
+						<view class="tit">
+							<text class="text-1">{{item.goods_name}}</text>
+						</view>
+						<view class="des-box">
+							<view class="des">{{item.unified_tags}}</view>
+						</view>
+						<view class="buy-box">
+							<text class="price">{{'¥'+(item.min_group_price)/100}}</text>
+							<button type="default" class="buy">活动价
+								{{'¥'+(item.min_group_price-item.coupon_discount)/100}}</button>
+						</view>
+					</view>
+				</view>
+				<view v-if="pddDataLoading" class="bottom-loading">
+					<loading />
+				</view>
+			</view>
+		</loadSke>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"m-home-pdd",
+		data:()=>({
+			pddList: [],
+			pddLoading: true,
+			limit: 6,
+			page: 0,
+			pddDataLoading: false,
+		}),
+		mounted() {
+			this.init()
+		},
+		methods: {
+			pddGoApp(data) {
+				this.$utils.goMiniApp(JSON.stringify(data))
+			},
+			onBottom() {
+				if (this.pddDataLoading) return
+				this.pddDataLoading = true
+				this.page++
+				this.$api.home.getPddWxData({
+					limit: this.limit,
+					offset: this.page * this.limit
+				}).then(res => {
+					this.pddList = this.pddList.concat(res)
+					this.$nextTick(() => {
+						this.pddLoading = false
+						this.pddDataLoading = false
+					})
+				})
+			},
+			init() {
+				this.$api.home.getPddWxData({
+					limit: this.limit,
+					offset: this.page * this.limit
+				}).then(res => {
+					this.pddList = res
+					this.$nextTick(() => {
+						this.pddLoading = false
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.item-box {
+		background-color: #fff;
+		// margin-top: 40rpx;
+
+		.item-titBox {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 20rpx;
+			border-bottom: 1rpx solid #e8e8e8;
+
+			.item-tit {
+				border-left: 8rpx solid #E31818;
+				font-size: 30rpx;
+				padding: 11rpx;
+				margin-left: 20rpx;
+			}
+
+			.item-tit-right {
+				font-size: 26rpx;
+				color: #666666;
+				line-height: 58rpx;
+				padding: 11rpx;
+			}
+		}
+
+		.flex-box {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: flex-start;
+			flex-wrap: wrap;
+			background-color: #F8F8F8;
+			padding-bottom: 20rpx;
+
+			.film-box {
+				width: 334rpx;
+				border-radius: 20rpx;
+				overflow: hidden;
+				background: #FFFFFF;
+				margin: 30rpx 11rpx 0;
+
+				.img {
+					width: 100%;
+				}
+
+				.bottom-box {
+					padding: 30rpx 20rpx;
+
+					.tit {
+						display: flex;
+						justify-content: space-between;
+
+						.text-1 {
+							width: 100%;
+							font-size: 26rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							// white-space: nowrap;
+						}
+					}
+
+					.des-box {
+						margin-top: 10rpx;
+
+						.des {
+							width: 100%;
+							font-size: 22rpx;
+							color: #666666;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+
+					.buy-box {
+						margin-top: 20rpx;
+						display: flex;
+						justify-content: flex-start;
+						align-items: center;
+
+						.price {
+							// color: #E31818;
+							text-decoration: line-through;
+							font-size: 34rpx;
+						}
+
+						.buy {
+							height: 40rpx;
+							background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
+							border-radius: 20rpx;
+							margin-left: 10rpx;
+							font-size: 20rpx;
+							color: #FFFFFF;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							white-space: nowrap;
+						}
+					}
+
+				}
+
+			}
+
+		}
+
+		.bottom-loading {
+			margin-top: 5rpx;
+			padding: 10rpx;
+		}
+	}
+</style>

src/components/m-icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/components/m-icon/demo_index.html

@@ -0,0 +1,1198 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2599049" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe611;</span>
+                <div class="name">设置</div>
+                <div class="code-name">&amp;#xe611;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ad;</span>
+                <div class="name">替换视频</div>
+                <div class="code-name">&amp;#xe6ad;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe634;</span>
+                <div class="name">详情</div>
+                <div class="code-name">&amp;#xe634;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xf5fe;</span>
+                <div class="name">升序</div>
+                <div class="code-name">&amp;#xf5fe;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">升序</div>
+                <div class="code-name">&amp;#xe632;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61f;</span>
+                <div class="name">叉</div>
+                <div class="code-name">&amp;#xe61f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">勾</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">删除</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61b;</span>
+                <div class="name">非全屏</div>
+                <div class="code-name">&amp;#xe61b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">上传视频</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">学车视频</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">锁头</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">解锁</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">全屏</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">暂停</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">箭头</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">播放视频</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xf5fd;</span>
+                <div class="name">二手车</div>
+                <div class="code-name">&amp;#xf5fd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">相机</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">添加图片</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe70e;</span>
+                <div class="name">编辑</div>
+                <div class="code-name">&amp;#xe70e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">联系客服</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">电话</div>
+                <div class="code-name">&amp;#xe60f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">微信</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">关闭</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">勾</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">向下2</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8ba;</span>
+                <div class="name">向下2</div>
+                <div class="code-name">&amp;#xe8ba;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">向下</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">选中</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">type_name_right</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">type_name_left</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe665;</span>
+                <div class="name">arrow-right</div>
+                <div class="code-name">&amp;#xe665;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">意见反馈</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">待发货</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f2;</span>
+                <div class="name">退款 售后02</div>
+                <div class="code-name">&amp;#xe6f2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">全部订单</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">交易-完成</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe86a;</span>
+                <div class="name">定位</div>
+                <div class="code-name">&amp;#xe86a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8b9;</span>
+                <div class="name">当地玩乐2</div>
+                <div class="code-name">&amp;#xe8b9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">我 的</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">主页</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe642;</span>
+                <div class="name">电影</div>
+                <div class="code-name">&amp;#xe642;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1626664251518') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shezhi"></span>
+            <div class="name">
+              设置
+            </div>
+            <div class="code-name">.icon-shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-thsp"></span>
+            <div class="name">
+              替换视频
+            </div>
+            <div class="code-name">.icon-thsp
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiangqing"></span>
+            <div class="name">
+              详情
+            </div>
+            <div class="code-name">.icon-xiangqing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiangxu-copy"></span>
+            <div class="name">
+              升序
+            </div>
+            <div class="code-name">.icon-jiangxu-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qiehuan"></span>
+            <div class="name">
+              升序
+            </div>
+            <div class="code-name">.icon-qiehuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cha"></span>
+            <div class="name">
+              叉
+            </div>
+            <div class="code-name">.icon-cha
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gou1"></span>
+            <div class="name">
+              勾
+            </div>
+            <div class="code-name">.icon-gou1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shanchu"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.icon-shanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-feiquanping"></span>
+            <div class="name">
+              非全屏
+            </div>
+            <div class="code-name">.icon-feiquanping
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shangchuanshipin"></span>
+            <div class="name">
+              上传视频
+            </div>
+            <div class="code-name">.icon-shangchuanshipin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xcsp"></span>
+            <div class="name">
+              学车视频
+            </div>
+            <div class="code-name">.icon-xcsp
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-suotou"></span>
+            <div class="name">
+              锁头
+            </div>
+            <div class="code-name">.icon-suotou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiesuo"></span>
+            <div class="name">
+              解锁
+            </div>
+            <div class="code-name">.icon-jiesuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-quanping"></span>
+            <div class="name">
+              全屏
+            </div>
+            <div class="code-name">.icon-quanping
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zanting"></span>
+            <div class="name">
+              暂停
+            </div>
+            <div class="code-name">.icon-zanting
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiantou"></span>
+            <div class="name">
+              箭头
+            </div>
+            <div class="code-name">.icon-jiantou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bofangshipin"></span>
+            <div class="name">
+              播放视频
+            </div>
+            <div class="code-name">.icon-bofangshipin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ershouche"></span>
+            <div class="name">
+              二手车
+            </div>
+            <div class="code-name">.icon-ershouche
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiangji"></span>
+            <div class="name">
+              相机
+            </div>
+            <div class="code-name">.icon-xiangji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tianjia"></span>
+            <div class="name">
+              添加图片
+            </div>
+            <div class="code-name">.icon-tianjia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bianji"></span>
+            <div class="name">
+              编辑
+            </div>
+            <div class="code-name">.icon-bianji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-lxkf"></span>
+            <div class="name">
+              联系客服
+            </div>
+            <div class="code-name">.icon-lxkf
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianhua"></span>
+            <div class="name">
+              电话
+            </div>
+            <div class="code-name">.icon-dianhua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-weixin"></span>
+            <div class="name">
+              微信
+            </div>
+            <div class="code-name">.icon-weixin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gou"></span>
+            <div class="name">
+              勾
+            </div>
+            <div class="code-name">.icon-gou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sousuo"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.icon-sousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiangxia2"></span>
+            <div class="name">
+              向下2
+            </div>
+            <div class="code-name">.icon-xiangxia2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiangshang"></span>
+            <div class="name">
+              向下2
+            </div>
+            <div class="code-name">.icon-xiangshang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiangxia"></span>
+            <div class="name">
+              向下
+            </div>
+            <div class="code-name">.icon-xiangxia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xuanzhong"></span>
+            <div class="name">
+              选中
+            </div>
+            <div class="code-name">.icon-xuanzhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-name_left"></span>
+            <div class="name">
+              type_name_right
+            </div>
+            <div class="code-name">.icon-name_left
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-name_right"></span>
+            <div class="name">
+              type_name_left
+            </div>
+            <div class="code-name">.icon-name_right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-arrow-right"></span>
+            <div class="name">
+              arrow-right
+            </div>
+            <div class="code-name">.icon-arrow-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yjfk"></span>
+            <div class="name">
+              意见反馈
+            </div>
+            <div class="code-name">.icon-yjfk
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dfh"></span>
+            <div class="name">
+              待发货
+            </div>
+            <div class="code-name">.icon-dfh
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tksh"></span>
+            <div class="name">
+              退款 售后02
+            </div>
+            <div class="code-name">.icon-tksh
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qbdd"></span>
+            <div class="name">
+              全部订单
+            </div>
+            <div class="code-name">.icon-qbdd
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jywc"></span>
+            <div class="name">
+              交易-完成
+            </div>
+            <div class="code-name">.icon-jywc
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dingwei"></span>
+            <div class="name">
+              定位
+            </div>
+            <div class="code-name">.icon-dingwei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ddwl"></span>
+            <div class="name">
+              当地玩乐2
+            </div>
+            <div class="code-name">.icon-ddwl
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wode"></span>
+            <div class="name">
+              我 的
+            </div>
+            <div class="code-name">.icon-wode
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouye"></span>
+            <div class="name">
+              主页
+            </div>
+            <div class="code-name">.icon-shouye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianying"></span>
+            <div class="name">
+              电影
+            </div>
+            <div class="code-name">.icon-dianying
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shezhi"></use>
+                </svg>
+                <div class="name">设置</div>
+                <div class="code-name">#icon-shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-thsp"></use>
+                </svg>
+                <div class="name">替换视频</div>
+                <div class="code-name">#icon-thsp</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangqing"></use>
+                </svg>
+                <div class="name">详情</div>
+                <div class="code-name">#icon-xiangqing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiangxu-copy"></use>
+                </svg>
+                <div class="name">升序</div>
+                <div class="code-name">#icon-jiangxu-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qiehuan"></use>
+                </svg>
+                <div class="name">升序</div>
+                <div class="code-name">#icon-qiehuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cha"></use>
+                </svg>
+                <div class="name">叉</div>
+                <div class="code-name">#icon-cha</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gou1"></use>
+                </svg>
+                <div class="name">勾</div>
+                <div class="code-name">#icon-gou1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shanchu"></use>
+                </svg>
+                <div class="name">删除</div>
+                <div class="code-name">#icon-shanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-feiquanping"></use>
+                </svg>
+                <div class="name">非全屏</div>
+                <div class="code-name">#icon-feiquanping</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangchuanshipin"></use>
+                </svg>
+                <div class="name">上传视频</div>
+                <div class="code-name">#icon-shangchuanshipin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xcsp"></use>
+                </svg>
+                <div class="name">学车视频</div>
+                <div class="code-name">#icon-xcsp</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-suotou"></use>
+                </svg>
+                <div class="name">锁头</div>
+                <div class="code-name">#icon-suotou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiesuo"></use>
+                </svg>
+                <div class="name">解锁</div>
+                <div class="code-name">#icon-jiesuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-quanping"></use>
+                </svg>
+                <div class="name">全屏</div>
+                <div class="code-name">#icon-quanping</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zanting"></use>
+                </svg>
+                <div class="name">暂停</div>
+                <div class="code-name">#icon-zanting</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiantou"></use>
+                </svg>
+                <div class="name">箭头</div>
+                <div class="code-name">#icon-jiantou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bofangshipin"></use>
+                </svg>
+                <div class="name">播放视频</div>
+                <div class="code-name">#icon-bofangshipin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ershouche"></use>
+                </svg>
+                <div class="name">二手车</div>
+                <div class="code-name">#icon-ershouche</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangji"></use>
+                </svg>
+                <div class="name">相机</div>
+                <div class="code-name">#icon-xiangji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tianjia"></use>
+                </svg>
+                <div class="name">添加图片</div>
+                <div class="code-name">#icon-tianjia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bianji"></use>
+                </svg>
+                <div class="name">编辑</div>
+                <div class="code-name">#icon-bianji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-lxkf"></use>
+                </svg>
+                <div class="name">联系客服</div>
+                <div class="code-name">#icon-lxkf</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianhua"></use>
+                </svg>
+                <div class="name">电话</div>
+                <div class="code-name">#icon-dianhua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weixin"></use>
+                </svg>
+                <div class="name">微信</div>
+                <div class="code-name">#icon-weixin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi"></use>
+                </svg>
+                <div class="name">关闭</div>
+                <div class="code-name">#icon-guanbi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gou"></use>
+                </svg>
+                <div class="name">勾</div>
+                <div class="code-name">#icon-gou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sousuo"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#icon-sousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangxia2"></use>
+                </svg>
+                <div class="name">向下2</div>
+                <div class="code-name">#icon-xiangxia2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangshang"></use>
+                </svg>
+                <div class="name">向下2</div>
+                <div class="code-name">#icon-xiangshang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangxia"></use>
+                </svg>
+                <div class="name">向下</div>
+                <div class="code-name">#icon-xiangxia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuanzhong"></use>
+                </svg>
+                <div class="name">选中</div>
+                <div class="code-name">#icon-xuanzhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-name_left"></use>
+                </svg>
+                <div class="name">type_name_right</div>
+                <div class="code-name">#icon-name_left</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-name_right"></use>
+                </svg>
+                <div class="name">type_name_left</div>
+                <div class="code-name">#icon-name_right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrow-right"></use>
+                </svg>
+                <div class="name">arrow-right</div>
+                <div class="code-name">#icon-arrow-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yjfk"></use>
+                </svg>
+                <div class="name">意见反馈</div>
+                <div class="code-name">#icon-yjfk</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dfh"></use>
+                </svg>
+                <div class="name">待发货</div>
+                <div class="code-name">#icon-dfh</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tksh"></use>
+                </svg>
+                <div class="name">退款 售后02</div>
+                <div class="code-name">#icon-tksh</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qbdd"></use>
+                </svg>
+                <div class="name">全部订单</div>
+                <div class="code-name">#icon-qbdd</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jywc"></use>
+                </svg>
+                <div class="name">交易-完成</div>
+                <div class="code-name">#icon-jywc</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dingwei"></use>
+                </svg>
+                <div class="name">定位</div>
+                <div class="code-name">#icon-dingwei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ddwl"></use>
+                </svg>
+                <div class="name">当地玩乐2</div>
+                <div class="code-name">#icon-ddwl</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wode"></use>
+                </svg>
+                <div class="name">我 的</div>
+                <div class="code-name">#icon-wode</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouye"></use>
+                </svg>
+                <div class="name">主页</div>
+                <div class="code-name">#icon-shouye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianying"></use>
+                </svg>
+                <div class="name">电影</div>
+                <div class="code-name">#icon-dianying</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/components/m-icon/iconfont.css

@@ -0,0 +1,189 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2599049 */
+  src: url('iconfont.ttf?t=1626664251518') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shezhi:before {
+  content: "\e611";
+}
+
+.icon-thsp:before {
+  content: "\e6ad";
+}
+
+.icon-xiangqing:before {
+  content: "\e634";
+}
+
+.icon-jiangxu-copy:before {
+  content: "\f5fe";
+}
+
+.icon-qiehuan:before {
+  content: "\e632";
+}
+
+.icon-cha:before {
+  content: "\e61f";
+}
+
+.icon-gou1:before {
+  content: "\e61e";
+}
+
+.icon-shanchu:before {
+  content: "\e61c";
+}
+
+.icon-feiquanping:before {
+  content: "\e61b";
+}
+
+.icon-shangchuanshipin:before {
+  content: "\e61a";
+}
+
+.icon-xcsp:before {
+  content: "\e619";
+}
+
+.icon-suotou:before {
+  content: "\e618";
+}
+
+.icon-jiesuo:before {
+  content: "\e617";
+}
+
+.icon-quanping:before {
+  content: "\e616";
+}
+
+.icon-zanting:before {
+  content: "\e614";
+}
+
+.icon-jiantou:before {
+  content: "\e62f";
+}
+
+.icon-bofangshipin:before {
+  content: "\e613";
+}
+
+.icon-ershouche:before {
+  content: "\f5fd";
+}
+
+.icon-xiangji:before {
+  content: "\e61d";
+}
+
+.icon-tianjia:before {
+  content: "\e612";
+}
+
+.icon-bianji:before {
+  content: "\e70e";
+}
+
+.icon-lxkf:before {
+  content: "\e610";
+}
+
+.icon-dianhua:before {
+  content: "\e60f";
+}
+
+.icon-weixin:before {
+  content: "\e60e";
+}
+
+.icon-guanbi:before {
+  content: "\e60d";
+}
+
+.icon-gou:before {
+  content: "\e60c";
+}
+
+.icon-sousuo:before {
+  content: "\e60b";
+}
+
+.icon-xiangxia2:before {
+  content: "\e60a";
+}
+
+.icon-xiangshang:before {
+  content: "\e8ba";
+}
+
+.icon-xiangxia:before {
+  content: "\e609";
+}
+
+.icon-xuanzhong:before {
+  content: "\e606";
+}
+
+.icon-name_left:before {
+  content: "\e604";
+}
+
+.icon-name_right:before {
+  content: "\e601";
+}
+
+.icon-arrow-right:before {
+  content: "\e665";
+}
+
+.icon-yjfk:before {
+  content: "\e603";
+}
+
+.icon-dfh:before {
+  content: "\e608";
+}
+
+.icon-tksh:before {
+  content: "\e6f2";
+}
+
+.icon-qbdd:before {
+  content: "\e600";
+}
+
+.icon-jywc:before {
+  content: "\e602";
+}
+
+.icon-dingwei:before {
+  content: "\e86a";
+}
+
+.icon-ddwl:before {
+  content: "\e8b9";
+}
+
+.icon-wode:before {
+  content: "\e607";
+}
+
+.icon-shouye:before {
+  content: "\e615";
+}
+
+.icon-dianying:before {
+  content: "\e642";
+}
+

src/components/m-icon/iconfont.json

@@ -0,0 +1,317 @@
+{
+  "id": "2599049",
+  "name": "极速生活圈",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "20361165",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "20995187",
+      "name": "替换视频",
+      "font_class": "thsp",
+      "unicode": "e6ad",
+      "unicode_decimal": 59053
+    },
+    {
+      "icon_id": "4996801",
+      "name": "详情",
+      "font_class": "xiangqing",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "22593389",
+      "name": "升序",
+      "font_class": "jiangxu-copy",
+      "unicode": "f5fe",
+      "unicode_decimal": 62974
+    },
+    {
+      "icon_id": "12004692",
+      "name": "升序",
+      "font_class": "qiehuan",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "22584404",
+      "name": "叉",
+      "font_class": "cha",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "22584317",
+      "name": "勾",
+      "font_class": "gou1",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "22584301",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "22584277",
+      "name": "非全屏",
+      "font_class": "feiquanping",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "22575197",
+      "name": "上传视频",
+      "font_class": "shangchuanshipin",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "22574627",
+      "name": "学车视频",
+      "font_class": "xcsp",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "22548098",
+      "name": "锁头",
+      "font_class": "suotou",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "22547394",
+      "name": "解锁",
+      "font_class": "jiesuo",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "22547378",
+      "name": "全屏",
+      "font_class": "quanping",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "22547353",
+      "name": "暂停",
+      "font_class": "zanting",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "2279253",
+      "name": "箭头",
+      "font_class": "jiantou",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "22510836",
+      "name": "播放视频",
+      "font_class": "bofangshipin",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "21830671",
+      "name": "二手车",
+      "font_class": "ershouche",
+      "unicode": "f5fd",
+      "unicode_decimal": 62973
+    },
+    {
+      "icon_id": "6170868",
+      "name": "相机",
+      "font_class": "xiangji",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "22363247",
+      "name": "添加图片",
+      "font_class": "tianjia",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "4933277",
+      "name": "编辑",
+      "font_class": "bianji",
+      "unicode": "e70e",
+      "unicode_decimal": 59150
+    },
+    {
+      "icon_id": "22349357",
+      "name": "联系客服",
+      "font_class": "lxkf",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "22349245",
+      "name": "电话",
+      "font_class": "dianhua",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "22348890",
+      "name": "微信",
+      "font_class": "weixin",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "22326326",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "22317764",
+      "name": "勾",
+      "font_class": "gou",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "22315857",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "22315652",
+      "name": "向下2",
+      "font_class": "xiangxia2",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "22318192",
+      "name": "向下2",
+      "font_class": "xiangshang",
+      "unicode": "e8ba",
+      "unicode_decimal": 59578
+    },
+    {
+      "icon_id": "22314879",
+      "name": "向下",
+      "font_class": "xiangxia",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "22203897",
+      "name": "选中",
+      "font_class": "xuanzhong",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "22190051",
+      "name": "type_name_right",
+      "font_class": "name_left",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "22190016",
+      "name": "type_name_left",
+      "font_class": "name_right",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "15838431",
+      "name": "arrow-right",
+      "font_class": "arrow-right",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "22128889",
+      "name": "意见反馈",
+      "font_class": "yjfk",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "17610317",
+      "name": "待发货",
+      "font_class": "dfh",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "8266393",
+      "name": "退款 售后02",
+      "font_class": "tksh",
+      "unicode": "e6f2",
+      "unicode_decimal": 59122
+    },
+    {
+      "icon_id": "13001981",
+      "name": "全部订单",
+      "font_class": "qbdd",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "13522645",
+      "name": "交易-完成",
+      "font_class": "jywc",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "9626852",
+      "name": "定位",
+      "font_class": "dingwei",
+      "unicode": "e86a",
+      "unicode_decimal": 59498
+    },
+    {
+      "icon_id": "2076362",
+      "name": "当地玩乐2",
+      "font_class": "ddwl",
+      "unicode": "e8b9",
+      "unicode_decimal": 59577
+    },
+    {
+      "icon_id": "6997483",
+      "name": "我 的",
+      "font_class": "wode",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "6427825",
+      "name": "主页",
+      "font_class": "shouye",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "6446340",
+      "name": "电影",
+      "font_class": "dianying",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    }
+  ]
+}

src/components/m-icon/m-icon.vue

@@ -0,0 +1,34 @@
+<template>
+	<view class="iconfont" :class="['icon-'+type]" :style="{color:color,'font-size':size}" @click="onClick()"></view>
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+      * 图标类型
+      */
+    type: String,
+    /**
+      * 图标颜色
+      */
+    color: String,
+    /**
+      * 图标大小
+      */
+    size: {
+      type: String,
+      default: '24px'
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style>
+	@import "./iconfont.css";
+</style>

src/components/m-video-box/m-video-box.vue

@@ -0,0 +1,97 @@
+<template>
+	<view>
+		<van-cell @click='clickCell' :title="carVideoList.chapterName" is-link value="更多" />
+		<!-- <view class="cell">
+			<text class="item-tit">{{carVideoList.chapterName}}</text>
+			<view class="right-box" @click='clickCell'>
+				<text class="item-tit-right">更多</text>
+				<m-icon type="arrow-right"></m-icon>
+			</view>
+		</view> -->
+		<view class="video-box" v-if="type=='top-bottom'">
+			<m-video-topbottom :column='column' :carVideoItem='item' v-for="(item,index) in carVideoList.list"
+				:key='index' :palyObj='palyObj' @click='returnData(item)' />
+		</view>
+		<view class="video-box" v-if="type=='left-right'">
+			<m-video-leftright @click='returnData(item)' :palyObj='palyObj' :carVideoItem='item'
+				v-for="(item,index) in carVideoList.list" :key='index' />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			type: {
+				type: String,
+				default: 'top-bottom'
+			},
+			column: {
+				type: Number,
+				default: 2
+			},
+			carVideoList: {
+				type: Object,
+				default: {}
+			},
+			palyObj: {
+				type: Object,
+				default: null
+			}
+		},
+		name: "m-video-box",
+		methods: {
+			returnData(item) {
+				if (this.palyObj) {
+					this.$emit('update:palyObj', item)
+				}
+			},
+			clickCell() {
+				this.$utils.route.goPage('/pages/carVideo/more', null, {
+					carVideoList: this.carVideoList
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.cell {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #FFFFFF;
+		padding: 10rpx 20rpx;
+		border-bottom: 1rpx solid #e8e8e8;
+
+		.item-tit {
+			border-left: 8rpx solid #E31818;
+			font-size: 30rpx;
+			font-weight: 400;
+			padding: 5rpx;
+		}
+
+		.right-box {
+			display: flex;
+			align-items: center;
+
+			.item-tit-right {
+				font-size: 26rpx;
+				color: #666666;
+				line-height: 58rpx;
+				padding: 11rpx;
+			}
+		}
+
+	}
+
+	.video-box {
+		background-color: #FFFFFF;
+		display: flex;
+		flex-wrap: wrap;
+		padding-left: 30rpx;
+		padding-bottom: 30rpx;
+		margin-bottom: 30rpx;
+		z-index: 0;
+	}
+</style>

src/components/m-video-leftright/m-video-leftright.vue

@@ -0,0 +1,89 @@
+<template>
+	<view class="video-item" @click="gotoPaly">
+		<view class="img-box">
+			<image class="image" :src="carVideoItem.cover" mode="aspectFill"></image>
+			<m-icon class="icon" type="bofangshipin"></m-icon>
+		</view>
+		<view class="tit-box">
+			<text>{{carVideoItem.title}}</text>
+			<text>{{carVideoItem.duration}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			carVideoItem: {
+				type: Object,
+				default: {}
+			},
+			palyObj: {
+				type: Object,
+				default: null
+			}
+		},
+		name: "m-video-leftright",
+		data() {
+			return {
+
+			};
+		},
+		methods:{
+			gotoPaly(){
+				if(!this.palyObj){
+					this.$utils.route.goPage('/pages/carVideo/play',null,{carVideoItem:this.carVideoItem})
+				}else{
+					this.$emit('click')
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.video-item {
+		display: flex;
+		margin: 20rpx;
+
+		.img-box {
+			flex-shrink: 0;
+			width: 240rpx;
+			height: 160rpx;
+			position: relative;
+
+			.image {
+				width: 100%;
+				height: 100%;
+			}
+			.icon {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+
+
+		.tit-box {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			padding: 16rpx 16rpx;
+
+			text {
+				&:nth-child(1) {
+					font-size: 30rpx;
+					font-weight: 400;
+					color: #0F0404;
+				}
+
+				&:nth-child(2) {
+					font-size: 26rpx;
+					font-weight: 400;
+					color: #999999;
+				}
+			}
+		}
+	}
+</style>

src/components/m-video-topbottom/m-video-topbottom.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="video-item" :style="{width: `${(750-30*column-30)/column}rpx`}"
+		@click="gotoPaly">
+		<view class="image-box">
+			<view class="img-box">
+				<image class="image" :src="carVideoItem.cover" mode="aspectFill"></image>
+			</view>
+			<text>{{carVideoItem.duration}}</text>
+			<m-icon class="icon" type="bofangshipin"></m-icon>
+		</view>
+		<text>{{carVideoItem.title}}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			carVideoItem: {
+				type: Object,
+				default: {}
+			},
+			column: {
+				type: Number,
+				default: 2
+			},
+			palyObj: {
+				type: Object,
+				default: null
+			}
+		},
+		name: "m-video-topbottom",
+		methods:{
+			gotoPaly(){
+				if(!this.palyObj){
+					this.$utils.route.goPage('/pages/carVideo/play',null,{carVideoItem:this.carVideoItem})
+				}else{
+					this.$emit('click')
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.video-item {
+		margin-right: 30rpx;
+		margin-top: 30rpx;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		text-align: center;
+
+		.image-box {
+			position: relative;
+
+			.img-box {
+				width: 100%;
+				padding-bottom: 64%;
+				position: relative;
+
+				.image {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+
+			text {
+				position: absolute;
+				color: red;
+				right: 2rpx;
+				bottom: 2rpx;
+
+			}
+
+			.icon {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+
+		text {
+			font-size: 30rpx;
+			font-weight: 400;
+			line-height: 39rpx;
+			color: #0F0404;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+	}
+</style>

src/components/square/square.vue

@@ -1,66 +0,0 @@
-<template>
-	<view class="square">
-		<view class="content">
-			<view class="box">
-				<image :src="icon" mode="aspectFit" class="icon"></image>
-				<text class='font'>{{title}}</text>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			icon: String,
-			title: String
-		},
-		data() {
-			return {}
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.square {
-		padding: 10rpx;
-	}
-
-	.content {
-		width: 100%;
-		padding-bottom: 100%;
-		background-color: #FFFFFF;
-		position: relative;
-		border-radius: 10rpx;
-		overflow: hidden;
-
-		.box {
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			align-items: center;
-			width: 100%;
-			height: 100%;
-
-			.icon {
-				flex: 1;
-			}
-
-			.font {
-				font-size: 26rpx;
-				font-family: PingFang SC;
-				font-weight: 400;
-				color: #0F0404;
-				margin-top: -0.5em;
-				margin-bottom: 0.5em;
-			}
-		}
-	}
-</style>

src/main.js

@@ -1,19 +1,24 @@
 import Vue from 'vue'
 import App from './App'
 //引入vuex
-import store from './store'
+import store from '@/store'
 //引入所有工具函数
-import utils from '@/utils/utils.js'
+import utils from '@/utils'
+//引入所有接口函数
+import api from '@/api'
 
 Vue.config.productionTip = false
 App.mpType = 'app'
 
 //goPageGetData中存在this需要引用当前
 Vue.prototype.goPageGetData = utils.goPageGetData
+//挂载工具类
 Vue.prototype.$utils = utils
+//挂载请求接口
+Vue.prototype.$api = api
 
 const app = new Vue({
 	store,
 	...App
 })
-app.$mount()
+app.$mount()

src/pages.json

@@ -1,11 +1,17 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/home/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "极速生活圈",
-				"navigationStyle": "custom",
-				"disableScroll": true
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -29,7 +35,7 @@
 		{
 			"path": "pages/webview/webview",
 			"style": {
-				"navigationBarTitleText": "WEB页面",
+				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}
 
@@ -67,7 +73,7 @@
 		}, {
 			"path": "pages/user/order",
 			"style": {
-				"navigationBarTitleText": "全部订单",
+				"navigationBarTitleText": "我的订单",
 				"enablePullDownRefresh": false
 			}
 
@@ -77,34 +83,108 @@
 				"navigationBarTitleText": "订单详情",
 				"enablePullDownRefresh": false
 			}
-
 		}, {
 			"path": "pages/cinema/citylist",
 			"style": {
 				"navigationBarTitleText": "选择城市",
 				"enablePullDownRefresh": false
 			}
+		}, {
+			"path": "pages/fulu/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		}, {
+			"path": "pages/fulu/placeorder",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		}, {
+			"path": "pages/fulu/orderdes",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		}, {
+			"path": "pages/carVideo/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "pages/phoneBill/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		}, {
+			"path": "pages/phoneBill/orderdes",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		}, {
+			"path": "pages/carVideo/play",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
 
+		}, {
+			"path": "pages/carVideo/more",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/user/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/cinema/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
 		}
-	    ,{
-            "path" : "pages/recharge/index",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/recharge/placeorder",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+	],
+	"tabBar": {
+		"color": "#7A7E83",
+		"selectedColor": "#E31818",
+		"borderStyle": "white",
+		"backgroundColor": "#ffffff",
+		"list": [{
+				"pagePath": "pages/home/index",
+				"iconPath": "static/imgs/home.png",
+				"selectedIconPath": "static/imgs/home-avtive.png",
+				"text": "首页"
+			},
+			{
+				"pagePath": "pages/carVideo/index",
+				"iconPath": "static/imgs/video.png",
+				"selectedIconPath": "static/imgs/video-avtive.png",
+				"text": "学车"
+			},
+			{
+				"pagePath": "pages/cinema/index",
+				"iconPath": "static/imgs/theFilm.png",
+				"selectedIconPath": "static/imgs/theFilm-avtive.png",
+				"text": "电影" 
+			},
+			{
+				"pagePath": "pages/user/index",
+				"iconPath": "static/imgs/user.png",
+				"selectedIconPath": "static/imgs/user-avtive.png",
+				"text": "我的"
+			}
+		]
+	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "",
@@ -115,7 +195,6 @@
 			"van-tabbar-item": "./wxcomponents/vant/tabbar-item/index",
 			"van-search": "./wxcomponents/vant/search/index",
 			"van-icon": "./wxcomponents/vant/icon/index",
-			"van-toast": "./wxcomponents/vant/toast/index",
 			"van-row": "./wxcomponents/vant/row/index",
 			"van-col": "./wxcomponents/vant/col/index",
 			"van-transition": "./wxcomponents/vant/transition/index",
@@ -139,7 +218,10 @@
 			"van-tabs": "./wxcomponents/vant/tabs/index",
 			"van-share-sheet": "./wxcomponents/vant/share-sheet/index",
 			"van-index-bar": "./wxcomponents/vant/index-bar/index",
-			"van-index-anchor": "./wxcomponents/vant/index-anchor/index"
+			"van-index-anchor": "./wxcomponents/vant/index-anchor/index",
+			"van-stepper": "./wxcomponents/vant/stepper/index",
+			"van-sidebar": "wxcomponents/vant/sidebar/index",
+			"van-sidebar-item": "wxcomponents/vant/sidebar-item/index"
 		}
 	},
 	"condition": { //模式配置，仅开发期间生效
@@ -150,4 +232,4 @@
 			"query": "" //启动参数，在页面的onLoad函数里面得到
 		}]
 	}
-}
+}

src/pages/carVideo/components/branchOne.vue

@@ -0,0 +1,39 @@
+<template>
+	<loading v-if="loading"></loading>
+	<view v-else class="branch-one">
+		<m-banner :bannerList="bannerList" height="150"></m-banner>
+		<m-carvideo-sidebar class="sidebar" :carVideoList='carVideoList'></m-carvideo-sidebar>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			pid:{
+				type:Number
+			}
+		},
+		data: () => ({
+			bannerList: [],
+			carVideoList:[],
+			loading: true
+		}),
+		async mounted() {
+			let {
+				data: bannerListData
+			} = await this.$api.home.getHomePageDataList(['carouselChart'])
+			this.bannerList = bannerListData.carouselChart
+			let {
+				data: carVideoData
+			} = await this.$api.carVideo.getCarVideoList(this.pid)
+			this.carVideoList = carVideoData
+			this.$nextTick(() => {
+				this.loading = false
+			})
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/carVideo/components/branchTwo.vue

@@ -0,0 +1,40 @@
+<template>
+	<loading v-if="loading"></loading>
+	<view v-else>
+		<m-banner :bannerList="bannerList" height="150"></m-banner>
+		<m-video-box :column="[2, 1, 3][index % 3]" :type="[2, 1, 3][index % 3]==1?'left-right':'top-bottom'"
+			:carVideoList='item' v-for="(item,index) in carVideoList" :key='index'></m-video-box>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			pid: {
+				type: Number
+			}
+		},
+		data: () => ({
+			bannerList: [],
+			carVideoList: [],
+			loading: true
+		}),
+		async mounted() {
+			let {
+				data: bannerListData
+			} = await this.$api.home.getHomePageDataList(['carouselChart'])
+			this.bannerList = bannerListData.carouselChart
+			let {
+				data: carVideoData
+			} = await this.$api.carVideo.getCarVideoList(this.pid)
+			this.carVideoList = carVideoData
+			this.$nextTick(() => {
+				this.loading = false
+			})
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/recharge/placeorder.vue → src/pages/carVideo/components/getCert.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		腾讯会员
+		
 	</view>
 </template>
 

src/pages/carVideo/index.vue

@@ -0,0 +1,64 @@
+<template>
+	<loading v-if="loading"></loading>
+	<view v-else class="carVideo">
+		<topbar>
+			<van-search shape="round" placeholder="搜索学车视频" @search='search' />
+		</topbar>
+		<van-tabs id='tabs' :active="active" :sticky='true'>
+			<van-tab :title="item.typeName" v-for="(item,index) in typeList" :key='index'>
+				<branch-one v-if="index==0" :pid='item.id'></branch-one>
+				<branch-two v-else-if="index==1" :pid='item.id'></branch-two>
+				<branch-two v-else-if="index==2" :pid='item.id'></branch-two>
+				<branch-one v-else-if="index==3" :pid='item.id'></branch-one>
+				<get-cert v-else-if="index==4"></get-cert>
+				<branch-two v-else :pid='item.id'></branch-two>
+			</van-tab>
+		</van-tabs>
+	</view>
+</template>
+
+<script>
+	import branchOne from './components/branchOne.vue'
+	import branchTwo from './components/branchTwo.vue'
+	import getCert from './components/getCert.vue'
+	export default {
+		components: {
+			branchOne,
+			branchTwo,
+			getCert
+		},
+		data: () => ({
+			active: 0,
+			typeList: [],
+			loading: true
+		}),
+		async mounted() {
+			let {
+				data
+			} = await this.$api.carVideo.getTypeList()
+			console.log(data)
+			this.typeList = data
+			this.loading = false
+			this.$nextTick(() => {
+				this.selectComponent('#tabs').resize();
+			})
+		},
+		methods: {
+			async search(e) {
+				let {
+					data
+				} = await this.$api.carVideo.getSearchList(e.detail)
+				console.log(data)
+				this.$utils.route.goPage('/pages/carVideo/more', null, {
+					carVideoList: data
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.carVideo {
+		position: relative;
+	}
+</style>

src/pages/carVideo/more.vue

@@ -0,0 +1,24 @@
+<template>
+	<page-meta>
+		<navigation-bar :title="carVideoList.chapterName"/>
+	</page-meta>
+	<view>
+		<m-video-leftright :carVideoItem='item' v-for="(item,index) in carVideoList.list" :key='index'></m-video-leftright>
+	</view>
+</template>
+
+<script>
+	export default {
+		data: () => ({
+			carVideoList: []
+		}),
+		onLoad: async function(option) {
+			let data = await this.goPageGetData()
+			this.carVideoList = data.carVideoList
+		},
+	}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/carVideo/play.vue

@@ -0,0 +1,89 @@
+<template>
+	<view>
+		<view class="video-box">
+			<video unit-id="adunit-c169acee32b4aa9f" class="video" :src="carVideoItem.videoUrl" controls
+				autoplay></video>
+			<view class="des">
+				<text>{{carVideoItem.title}}</text>
+				<text>{{carVideoItem.remarks}}</text>
+			</view>
+		</view>
+
+		<loading v-if="loading"></loading>
+		<view v-else>
+			<m-video-box :palyObj.sync='carVideoItem' :column="[2, 1, 3][index % 3]"
+				:type="[1, 1, 1][index % 3]==1?'left-right':'top-bottom'" :carVideoList='item'
+				v-for="(item,index) in carVideoList" :key='index'></m-video-box>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data: () => ({
+			loading: true,
+			carVideoList: [],
+			carVideoItem: {},
+			videoAd: null,
+			switchingTimes: 1,
+		}),
+		watch: {
+			carVideoItem() {
+				//用于激励广告计数
+				this.switchingTimes++
+			}
+		},
+		onLoad: async function(option) {
+			let data = await this.goPageGetData()
+			this.carVideoItem = data.carVideoItem
+		},
+		async mounted() {
+			let {
+				data: carVideoData
+			} = await this.$api.carVideo.getCarVideoList(this.carVideoItem.pid)
+			this.carVideoList = carVideoData
+			this.loading = false
+		}
+	}
+</script>
+
+<style lang="scss">
+	.video-box {
+		width: 100vw;
+		box-sizing: border-box;
+		margin-bottom: 30rpx;
+		background-color: #FFFFFF;
+		position: sticky;
+		top: 0;
+		z-index: 100;
+
+		.video {
+			width: 100%;
+		}
+
+		.des {
+			display: flex;
+			flex-direction: column;
+			padding: 30rpx;
+			padding-top: 24rpx;
+
+			text {
+				&:nth-of-type(1) {
+					font-size: 30rpx;
+					font-weight: 400;
+					line-height: 39rpx;
+					color: #0F0404;
+				}
+
+				&:nth-of-type(2) {
+					margin-top: 6rpx;
+					font-size: 26rpx;
+					font-weight: 400;
+					line-height: 20rpx;
+					color: #666666;
+				}
+			}
+		}
+	}
+</style>

src/pages/cinema/cinemalist.vue

@@ -1,15 +1,11 @@
 <template>
-	<view>
+	<loading v-if="dateLoading"></loading>
+	<view v-else>
 		<van-tabs :active='active' :swipe-threshold='3' animated sticky id='tabs'>
 			<van-tab :title="$utils.getDay(dateItem)+' '+dateItem.slice(5)" v-for='(dateItem,dateIndex) in showDate' :key='index'>
 				<loadSke :loading='cinemaLoading' :list='cinemaList[dateItem]'>
-					<view class="cinema-box" v-for="(item,index) in cinemaList[dateItem]" :key='index' @click='$utils.goPage(`/pages/cinema/schedulelist?cinemaId=${item.cinemaId}&filmId=${filmId}`)'>
-						<view class="tit">
-							<text>{{item.cinemaName}}</text>
-							<text class="text-2">{{item.distance}}</text>
-						</view>
-						<text class="address">{{item.address}}</text>
-					</view>
+					<cinema-Item @tap='$utils.goPage(`/pages/cinema/schedulelist?cinemaId=${item.cinemaId}&filmId=${filmId}`)'
+					 v-for="(item,index) in cinemaList[dateItem]" :key='index' :cinema='item'></cinema-Item>
 				</loadSke>
 			</van-tab>
 		</van-tabs>
@@ -17,12 +13,11 @@
 </template>
 
 <script>
-	import {
-		getCinemaList,
-		getShowList,
-		getShowDate
-	} from '@/api/cinema.js'
+	import cinemaItem from '@/pages/cinema/components/cinema-Item.vue'
 	export default {
+		components: {
+			cinemaItem
+		},
 		data: () => ({
 			active: 0,
 			cinemaList: {},
@@ -43,7 +38,7 @@
 		},
 		methods: {
 			async init() {
-				let showDateRes = await getShowDate({
+				let showDateRes = await this.$api.cinema.getShowDate({
 					cityId: this.cityId,
 					filmId: this.filmId,
 				})
@@ -53,7 +48,7 @@
 					this.selectComponent('#tabs').resize();
 				})
 				this.showDate.forEach(async val => {
-					let showListRes = await getShowList({
+					let showListRes = await this.$api.cinema.getShowList({
 						cityId: this.cityId,
 						filmId: this.filmId,
 						latitude: this.location[1],
@@ -72,37 +67,4 @@
 </script>
 
 <style lang="scss">
-	.cinema-box {
-		padding: 30rpx;
-		border-top: 1rpx solid #E8E8E8;
-		background-color: #FFFFFF;
-		display: flex;
-		flex-direction: column;
-
-		.tit {
-			display: flex;
-			justify-content: space-between;
-
-			.text-1 {
-				font-size: 30rpx;
-				color: #0F0404;
-			}
-
-			.text-2 {
-				font-size: 26rpx;
-				color: #999999;
-				white-space: nowrap;
-			}
-		}
-
-		.address {
-			margin-top: 20rpx;
-			width: 600rpx;
-			font-size: 26rpx;
-			color: #666666;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
 </style>

src/pages/cinema/components/cinema-Item.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="cinema-box">
+		<view class="tit">
+			<text>{{cinema.cinemaName}}</text>
+			<text class="text-2"
+				@click.stop="openLocation(cinema)">{{cinema.distance.includes('m') ? cinema.distance : cinema.distance+' km'}}</text>
+		</view>
+		<view class="tit">
+			<text class="address">{{cinema.address}}</text>
+			<view @click.stop="openLocation(cinema)">
+				<m-icon type="dingwei" color="#304ECE" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			cinema: Object,
+		},
+		methods: {
+			openLocation(item) {
+				uni.openLocation({
+					latitude: item.latitude,
+					longitude: item.longitude
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.cinema-box {
+		padding: 30rpx;
+		border-top: 1rpx solid #E8E8E8;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+
+		.tit {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.text-1 {
+				font-size: 30rpx;
+				color: #0F0404;
+			}
+
+			.text-2 {
+				font-size: 26rpx;
+				color: #999999;
+				white-space: nowrap;
+			}
+		}
+
+		.address {
+			margin-top: 20rpx;
+			width: 600rpx;
+			font-size: 26rpx;
+			color: #666666;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+</style>

src/pages/index/components/cinema.vue → src/pages/cinema/index.vue

@@ -40,13 +40,8 @@
 				</van-tab>
 				<van-tab title="影院">
 					<loadSke :loading='cinemaLoading' :list='cinemaList'>
-						<view class="cinema-box" v-for="(item) in cinemaList" :key='item.cinemaId' @click='$utils.goPage(`/pages/cinema/schedulelist?cinemaId=${item.cinemaId}&filmId=${filmId}`)'>
-							<view class="tit">
-								<text>{{item.cinemaName}}</text>
-								<text class="text-2">{{item.distance}}km</text>
-							</view>
-							<text class="address">{{item.address}}</text>
-						</view>
+						<cinema-Item @tap='$utils.goPage(`/pages/cinema/schedulelist?cinemaId=${item.cinemaId}&filmId=${filmId}`)'
+						 v-for="item in cinemaList" :key='item.cinemaId' :cinema='item'></cinema-Item>
 					</loadSke>
 				</van-tab>
 				<van-tab title="即将上映">
@@ -82,18 +77,11 @@
 
 
 <script>
-	import {
-		amapRegeo
-	} from '@/api/amap.js'
-	import {
-		getHotList,
-		getSoonList,
-		getCityList,
-		getInfo,
-		getFilmDiscount,
-		getCinemaList
-	} from '@/api/cinema.js'
+	import cinemaItem from '@/pages/cinema/components/cinema-Item.vue'
 	export default {
+		components: {
+			cinemaItem
+		},
 		data: () => ({
 			tabActive: 0,
 			hotList: [],
@@ -155,17 +143,17 @@
 			},
 			tabsChange(e) {
 				let listMap = new Map([
-					[0, ()=>this.hotList = this.searchList],
-					[1, ()=>this.cinemaList = this.searchList],
-					[2, ()=>this.soonList = this.searchList]
+					[0, () => this.hotList = this.searchList],
+					[1, () => this.cinemaList = this.searchList],
+					[2, () => this.soonList = this.searchList]
 				])
 				//切换搜索前复原数据
 				this.searchList && listMap.get(this.searchType)()
-				
+
 				this.tabActive = e.detail.index
 				this.searchType = e.detail.index
 				this.searchList = null
-				
+
 				let aMap = new Map([
 					[0, '请输入电影名称'],
 					[1, '请输入影院名称'],
@@ -175,7 +163,7 @@
 				this.searchTitle = aMap.get(e.detail.index)
 			},
 			setFilmDiscount() {
-				getFilmDiscount().then(res => {
+				this.$api.cinema.getFilmDiscount().then(res => {
 					this.$store.commit('SET_FILMDISCOUNT', res.data)
 				})
 			},
@@ -183,16 +171,17 @@
 				try {
 					let location = await wx.getLocation()
 					this.location = [location.longitude.toFixed(6), location.latitude.toFixed(6)]
-					let address = await amapRegeo({
+					let address = await this.$api.amap.regeo({
 						location: this.location.toString()
 					})
 					this.address = address.regeocode.addressComponent.city.slice(0, -1)
-				} catch {
+				} catch (e) {
+					console.log(e)
 					this.address = '北京'
 				}
 			},
 			async getCityList() {
-				let cityListRes = await getCityList()
+				let cityListRes = await this.$api.cinema.getCityList()
 				let cityList = cityListRes.data.data.list
 				let cityObj = {}
 				cityList.map((val) => {
@@ -207,7 +196,7 @@
 			async init() {
 				this.hotLoading = true
 				this.soonLoading = true
-				let hotListRes = await getHotList({
+				let hotListRes = await this.$api.cinema.getHotList({
 					cityId: this.cityId
 				})
 				this.hotList = hotListRes.data.data.list
@@ -215,7 +204,7 @@
 					this.hotLoading = false
 				})
 
-				let soonListRes = await getSoonList({
+				let soonListRes = await this.$api.cinema.getSoonList({
 					cityId: this.cityId
 				})
 				let soonListObj = {}
@@ -231,7 +220,7 @@
 			},
 			async cinemaListInit() {
 				this.cinemaLoading = true
-				let showListRes = await getCinemaList({
+				let showListRes = await this.$api.cinema.getCinemaList({
 					cityId: this.cityId,
 					latitude: this.location[1],
 					longitude: this.location[0],
@@ -262,7 +251,7 @@
 	}
 
 	.topbar {
-		position: fixed;
+		position: sticky;
 		top: 0;
 		left: 0;
 		right: 0;
@@ -287,46 +276,6 @@
 		}
 	}
 
-	.tabs-box {
-		margin-top: 160rpx;
-	}
-
-
-
-	.cinema-box {
-		padding: 30rpx;
-		border-top: 1rpx solid #E8E8E8;
-		background-color: #FFFFFF;
-		display: flex;
-		flex-direction: column;
-
-		.tit {
-			display: flex;
-			justify-content: space-between;
-
-			.text-1 {
-				font-size: 30rpx;
-				color: #0F0404;
-			}
-
-			.text-2 {
-				font-size: 26rpx;
-				color: #999999;
-				white-space: nowrap;
-			}
-		}
-
-		.address {
-			margin-top: 20rpx;
-			width: 600rpx;
-			font-size: 26rpx;
-			color: #666666;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-
 	.tab {
 		display: flex;
 		justify-content: space-around;

src/pages/cinema/orderdes.vue

@@ -1,68 +1,57 @@
 <template>
-	<view>
+	<view class="page">
 		<loadSke :loading='loading'>
-			<view class="remind">请到影院现场柜台或取票机取票</view>
+			<view class="remind-top">首页->我的->我的订单</view>
 			<view class="des-box">
 				<loadSke :loading='qrcodeLoading'>
-					<view v-if="ticketType==2">
-						<view v-if="orderDes.orderDataJson.filmMcpData" class="code-box">
-							<view class="code">
-								<text>取票码</text>
-								<text>{{orderDes.orderDataJson.filmMcpData.ticket.slice(4)}}</text>
-							</view>
-							<image class="qrcode" :src="filmDes.qrcode" mode="widthFix"></image>
-						</view>
-						<view v-else class="code-box">
-							<image src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E8%AE%A2%E5%8D%95%E5%85%B3%E9%97%AD.png"
-							 class="qrcode-loading" mode="widthFix"></image>
-						</view>
+					<view v-if="filmDes.orderStatus < 4" class="code-box">
+						<image
+							src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E7%94%B5%E5%BD%B1%E7%A5%A8%E7%AD%89%E5%BE%85.png"
+							class="qrcode-loading" mode="widthFix"></image>
 					</view>
-					<view v-else-if="ticketType!=2">
-						<view v-if="filmDes.orderStatus < 4" class="code-box">
-							<image src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E7%94%B5%E5%BD%B1%E7%A5%A8%E7%AD%89%E5%BE%85.png"
-							 class="qrcode-loading" mode="widthFix"></image>
-						</view>
-						<view v-else-if="filmDes.orderStatus != 10" class="code-box"  v-for="(item,index) in filmDes.qrcode" :key='index'>
-							<view class="code">
-								<text>取票码</text>
-								<text>{{item.code}}</text>
-							</view>
-							<image class="qrcode" :src="item.qrcode" mode="widthFix"></image>
-						</view>
-						<view v-else class="code-box">
-							<image src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E8%AE%A2%E5%8D%95%E5%85%B3%E9%97%AD.png"
-							 class="qrcode-loading" mode="widthFix"></image>
+					<view v-else-if="filmDes.orderStatus != 10" class="code-box" v-for="(item,index) in filmDes.qrcode"
+						:key='index'>
+						<view class="code">
+							<text>取票码</text>
+							<text>{{item.code}}</text>
 						</view>
+						<image class="qrcode" :src="item.qrcode" mode="widthFix"></image>
+					</view>
+					<view v-else class="code-box">
+						<image
+							src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E8%AE%A2%E5%8D%95%E5%85%B3%E9%97%AD.png"
+							class="qrcode-loading" mode="widthFix"></image>
 					</view>
 				</loadSke>
 				<view class="order-num">
-					<text>订单号：{{orderDes.outTradeNo}}</text>
-					<text>{{filmDes.orderStatusStr}}</text>
+					<text>订单号：{{outTradeNo}}</text>
+					<text>{{orderDes.orderStatusDesc}}</text>
+					<text v-if="filmDes.closeCause">{{filmDes.closeCause}}</text>
 				</view>
 				<view class="des">
-					<text class="film-name">{{orderDes.orderDataJson.cinemaData.filmName}}</text>
+					<text class="film-name">{{orderDes.filmName}}</text>
 					<view class="film-time">
 						<text>时间</text>
-						<text>{{orderDes.orderDataJson.cinemaData.showTime}}</text>
+						<text>{{orderDes.showTime}}</text>
 					</view>
 					<view class="film-address">
 						<text>影院</text>
-						<text>{{orderDes.orderDataJson.cinemaData.cinemaName}}</text>
+						<text>{{orderDes.cinemaName}}</text>
 					</view>
 					<view class="film-video">
 						<text>影厅</text>
-						<text>{{orderDes.orderDataJson.cinemaData.hallName}}</text>
+						<text>{{orderDes.hallName}}</text>
 					</view>
 					<view class="film-seat">
 						<text>座位</text>
 						<view class="seat-box">
-							<text v-for="(item,index) in seatList" :key='index'>{{item}}</text>
+							<text v-for="(item,index) in orderDes.seat" :key='index'>{{item}}</text>
 						</view>
 					</view>
 				</view>
 				<view class="price">
 					<text>总价</text>
-					<text>¥{{orderDes.total/100}}</text>
+					<text>¥{{orderDes.total}}</text>
 				</view>
 			</view>
 		</loadSke>
@@ -70,24 +59,15 @@
 </template>
 
 <script>
-	import {
-		getWxOrder
-	} from '@/api/order.js'
-	import {
-		orderQuery
-	} from '@/api/cinema.js'
-	import QRCode from 'qrcode'
 	export default {
 		data: () => ({
 			orderDes: {},
-			seatList: [],
 			outTradeNo: null,
 			loading: true,
 			pollingTiemId: null,
 			filmDes: {},
 			qrcode: null,
-			qrcodeLoading: true,
-			ticketType: null
+			qrcodeLoading: true
 		}),
 		onLoad: function(option) {
 			this.outTradeNo = option.outTradeNo
@@ -95,36 +75,27 @@
 		mounted() {
 			this.init()
 		},
-		computed: {},
 		methods: {
 			async init() {
-				let orderRes = await getWxOrder(this.outTradeNo)
-				orderRes.data.orderDataJson = JSON.parse(orderRes.data.orderDataJson)
+				let orderRes = await this.$api.order.getWxOrder(this.outTradeNo)
 				this.orderDes = orderRes.data
-				this.seatList = this.orderDes.orderDataJson.wxOrderCreateDTO.seat.split(',')
-				this.ticketType = this.orderDes.orderDataJson.wxOrderCreateDTO.ticketType
-				if (this.ticketType == 2) {
-					if (this.orderDes.orderDataJson.filmMcpData) {
-						this.qrcode = await this.qrcodeGenerate(this.orderDes.orderDataJson.filmMcpData.ticket.slice(4))
-					}
-				}
-				if (this.ticketType != 2) {
-					let filmRes = await orderQuery({
-						thirdOrderId: this.outTradeNo
-					})
-					this.filmDes = filmRes.data.data
-					if (this.filmDes.orderStatus < 4) {
-						this.polling()
-					} else if (this.filmDes.orderStatus < 10) {
-						this.qrcodeShow()
-					}
+
+				let filmRes = await this.$api.cinema.orderQuery({
+					thirdOrderId: this.outTradeNo
+				})
+				this.filmDes = filmRes.data.data
+				if (this.filmDes.orderStatus < 4) {
+					this.polling()
+				} else if (this.filmDes.orderStatus < 10) {
+					this.qrcodeShow()
 				}
+
 				this.loading = false
 				this.qrcodeLoading = false
 			},
 			polling() {
 				this.pollingTiemId = setInterval(async () => {
-					let filmRes = await orderQuery({
+					let filmRes = await this.$api.cinema.orderQuery({
 						thirdOrderId: this.outTradeNo
 					})
 					this.filmDes = filmRes.data.data
@@ -138,7 +109,7 @@
 				let qrcode = []
 				this.filmDes.ticketCode.forEach(async val => {
 					if (val.type == 1) {
-						let qr = await this.qrcodeGenerate(val.code)
+						let qr = await this.$utils.qrcodeGenerate(val.code)
 						qrcode.push({
 							qrcode: qr,
 							code: val.code
@@ -146,13 +117,6 @@
 					}
 				})
 				this.$set(this.filmDes, 'qrcode', qrcode)
-			},
-			async qrcodeGenerate(data) {
-				let qrcodeRes = await QRCode.toString(data, {
-					margin: 0,
-					errorCorrectionLevel: 'H'
-				});
-				return 'data:image/svg+xml;base64,' + Buffer(qrcodeRes).toString('base64');
 			}
 		},
 		beforeDestroy() {
@@ -162,14 +126,26 @@
 </script>
 
 <style lang="scss">
+	.page {
+		padding-bottom: 20rpx;
+	}
+
 	.remind {
-		margin-top: 36rpx;
+		padding-top: 36rpx;
 		font-size: 26rpx;
 		font-weight: 400;
 		color: #0F0404;
 		text-align: center;
 	}
 
+	.remind-top {
+		margin-top: 36rpx;
+		font-size: 26rpx;
+		font-weight: 400;
+		color: #ff0000;
+		text-align: center;
+	}
+
 	.des-box {
 		width: 564rpx;
 		background: #FFFFFF;
@@ -212,6 +188,7 @@
 
 		.order-num {
 			display: flex;
+			flex-direction: column;
 			justify-content: space-between;
 			align-items: center;
 			padding: 34rpx 31rpx;
@@ -245,21 +222,37 @@
 
 			text {
 				&:nth-child(1) {
-					width: 60%;
+					margin-top: 60rpx;
 					word-break: break-all;
-					font-size: 26rpx;
+					font-size: 22rpx;
 					font-weight: 400;
 					color: #666666;
 				}
 
 				&:nth-child(2) {
+					margin-top: 10rpx;
 					padding: 10rpx;
 					display: flex;
 					justify-content: center;
 					align-items: center;
 					background: #FFE5E5;
-					border: 1rpx solid #E31818;
 					border-radius: 20rpx;
+					border-top-left-radius: 0;
+					border-bottom-left-radius: 0;
+					font-size: 20rpx;
+					font-weight: 400;
+					color: #E31818;
+					position: absolute;
+					left: 0;
+					top: 20rpx;
+				}
+
+				&:nth-child(3) {
+					margin-top: 10rpx;
+					padding: 10rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
 					font-size: 20rpx;
 					font-weight: 400;
 					color: #E31818;
@@ -294,14 +287,24 @@
 			}
 
 			.film-address {
+				display: flex;
+				justify-content: flex-start;
+				align-items: stretch;
+				
 				text:nth-child(2) {
 					color: #999999;
+					white-space: pre-wrap;
 				}
 			}
 
 			.film-video {
+				display: flex;
+				justify-content: flex-start;
+				align-items: stretch;
+				
 				text:nth-child(2) {
 					color: #999999;
+					white-space: pre-wrap;
 				}
 			}
 

src/pages/cinema/placeorder.vue

@@ -83,6 +83,11 @@
 			<text class="tit-text">无座时接受系统调座</text>
 			<van-switch :checked="acceptChangeSeat==1" @change="onChange" size="24px" />
 		</view>
+		<!-- <button class="server" open-type="getPhoneNumber" @getphonenumber='getPhoneNumber' :plain="true">
+			<van-cell title="手机号(非必填)" :value="userPhone">
+				<m-icon slot="icon" type="lxkf" color="#d81e06"/>
+			</van-cell>
+		</button> -->
 		<view class="seat-des">
 			<view class="tit-text">
 				购票须知
@@ -114,15 +119,13 @@
 </template>
 
 <script>
-	import {
-		prepareOrder
-	} from '@/api/cinema.js'
 	export default {
 		data: () => ({
 			showItem: {},
 			seatResult: [],
 			radioType: 1,
 			acceptChangeSeat: 0,
+			userPhone:null,
 			orderRes: {}
 		}),
 		onLoad: async function(option) {
@@ -184,6 +187,10 @@
 			},
 		},
 		methods: {
+			getPhoneNumber(e){
+				console.log(e)
+				this.userPhone=e.phoneNumber
+			},
 			radioOnChange(e) {
 				this.orderRes = {}
 				this.radioType = e.detail
@@ -214,23 +221,25 @@
 					seatNo.push(val.seatNo)
 					seatId.push(val.seatId)
 				})
-				prepareOrder({
-					acceptChangeSeat: this.acceptChangeSeat,
-					seat: seat.join(','),
-					seatId: seatId.join('|'),
-					seatNo: seatNo.join('|'),
-					showId: this.showItem.showId,
-					cinemaId: this.showItem.cinemaId,
-					goodsPictureUrl: this.filmDes.pic,
-					goodsType: '1',
-					ticketType: this.radioType
-				}).then(async res => {
-					this.orderRes = res
-					let payRes = await wx.requestPayment(this.orderRes.data)
-					if (payRes.errMsg == 'requestPayment:ok') {
-						this.$utils.goPage(`/pages/cinema/orderdes?outTradeNo=${this.orderRes.data.outTradeNo}`, 'reLaunch')
-					}
-					console.log(payRes)
+				this.$utils.wxUtils.subscribeToNews().then(toNew=>{
+					console.log(toNew)
+					this.$api.cinema.prepareOrder({
+						acceptChangeSeat: this.acceptChangeSeat,
+						seat: seat.join(','),
+						seatId: seatId.join('|'),
+						seatNo: seatNo.join('|'),
+						showId: this.showItem.showId,
+						cinemaId: this.showItem.cinemaId,
+						goodsPictureUrl: this.filmDes.pic,
+						goodsType: '1',
+						ticketType: this.radioType
+					}).then(async res => {
+						this.orderRes = res
+						let payRes = await wx.requestPayment(this.orderRes.data)
+						if (payRes.errMsg == 'requestPayment:ok') {
+							this.$utils.goPage(`/pages/cinema/orderdes?outTradeNo=${this.orderRes.data.outTradeNo}`, 'reLaunch')
+						}
+					})
 				})
 			}
 		}
@@ -282,6 +291,15 @@
 			}
 		}
 	}
+	
+	.server {
+		border: none;
+		background-color: none;
+		margin: 0;
+		padding: 0;
+		text-align: left;
+		display: flexbox;
+	}
 
 	.select-des {
 		background-color: #FFFFFF;

src/pages/cinema/schedulelist.vue

@@ -24,7 +24,8 @@
 
 			<view class="schedule-box">
 				<van-tabs :active='tabActive' :swipe-threshold='3' animated swipeable id="tabs" @change='tabsChange'>
-					<van-tab class='schedule-tab' :title="$utils.getDay(index)+' '+index.slice(5)" v-for='(item,index) in scheduleItem' :key='index'>
+					<van-tab class='schedule-tab' :title="$utils.getDay(index)+' '+index.slice(5)" v-for='(item,index) in scheduleItem'
+					 :key='index'>
 						<view v-for="(sonItem,sonIndex) in item" :key='sonItem.showId' class="schedule-des" @click="clickBuy(sonItem)">
 							<view class="left-box">
 								<view class="item-box">
@@ -53,10 +54,6 @@
 </template>
 
 <script>
-	import {
-		getScheduleList,
-		getfilmInfo
-	} from '@/api/cinema.js'
 	export default {
 		data: () => ({
 			listLoading: true,
@@ -101,14 +98,17 @@
 			},
 			init() {
 				this.listLoading = true
-				getScheduleList({
+				this.$api.cinema.getScheduleList({
 					cinemaId: this.cinemaId
 				}).then(res => {
 					this.scheduleList = {}
 					this.discountRule = res.data.data.discountRule
 					this.$store.commit('SET_DISCOUNTRULE', res.data.data.discountRule)
 					this.cinemaName = res.data.data.list[0].cinemaName
-					res.data.data.list.map((val) => {
+					res.data.data.list.sort((a, b) => {
+						return this.$utils.dayjs(a.showTime).isAfter(b.showTime) ? 1 : -1
+					})
+					res.data.data.list.forEach((val) => {
 						this.scheduleList[val.filmId] || (this.scheduleList[val.filmId] = {})
 						this.scheduleList[val.filmId][val.showDate] || (this.scheduleList[val.filmId][val.showDate] = [])
 						this.scheduleList[val.filmId][val.showDate].push(val)

src/pages/cinema/selectseat.vue

@@ -76,9 +76,6 @@
 </template>
 
 <script>
-	import {
-		getSeat
-	} from '@/api/cinema.js'
 	export default {
 		data: () => ({
 			showItem: null,
@@ -150,7 +147,7 @@
 				return flag
 			},
 			async init() {
-				let seatRes = await getSeat({
+				let seatRes = await this.$api.cinema.getSeat({
 					showId: this.showItem.showId
 				})
 				console.log(seatRes)
@@ -239,15 +236,16 @@
 			opacity: 1;
 			background: #47CB79;
 		}
-		
-		.loveSeatLeft{
+
+		.loveSeatLeft {
 			position: relative;
 			overflow: initial;
-			&::after{
+
+			&::after {
 				content: '';
 				position: absolute;
 				right: 0;
-				transform: translate(50%,-50%);
+				transform: translate(50%, -50%);
 				top: 50%;
 				width: 50%;
 				height: 80%;
@@ -255,15 +253,16 @@
 				z-index: 10;
 			}
 		}
-		
-		.loveSeatRight{
+
+		.loveSeatRight {
 			position: relative;
 			overflow: initial;
-			&::after{
+
+			&::after {
 				content: '';
 				position: absolute;
 				left: 0;
-				transform: translate(-50%,-50%);
+				transform: translate(-50%, -50%);
 				top: 50%;
 				width: 50%;
 				height: 80%;

src/pages/fulu/index.vue

@@ -0,0 +1,196 @@
+<template>
+	<view class="page">
+		<loadSke :loading="loading" :list="typeList">
+			<view class="tabs">
+				<view class="tab" :class="{selected:index==active}" @click="tabClick(index)"
+					v-for="(item,index) in typeList" :key='index'>
+					{{item.type_name}}
+				</view>
+			</view>
+			<scroll-view class='scroll-view' :scroll-into-view="scrollId" :scroll-y='true' :scroll-with-animation='true' @scroll='scrollChange'>
+				<view class="box" v-for="(item,index) in typeList" :key='index' :id="'scroll'+index">
+					<view class="type_name">
+						<m-icon type="name_left" color="red" />
+						<text>{{item.type_name}}</text>
+						<m-icon type="name_right" color="red" />
+					</view>
+					<view class="type-box">
+						<view class="type" v-for="(itemSon,indexSon) in item.list" :key='indexSon'
+							@click="$utils.goPage('/pages/fulu/placeorder',null,{product_ids:itemSon.product_ids,icon:itemSon.icon,remark:itemSon.remark})">
+							<view class="top-des">
+								<image class="icon" :src="itemSon.icon" mode="scaleToFill"></image>
+								<view class="right">
+									<text class="name">{{itemSon.name}}</text>
+									<text class="introduction">{{itemSon.introduction}}</text>
+								</view>
+							</view>
+							<text class="btn">立即充值</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</loadSke>
+	</view>
+
+</template>
+
+<script>
+	export default {
+		data: () => ({
+			active: 0,
+			typeList: [],
+			loading: true,
+			scrollId: 'scroll0'
+		}),
+		async mounted() {
+			this.loading = true
+			let res = await this.$api.fulu.goods.getTypeList()
+			console.log(res)
+			this.typeList = res.data
+			this.$nextTick(() => {
+				this.loading = false
+			})
+		},
+		methods: {
+			tabClick(index) {
+				this.active = index
+				this.scrollId = 'scroll' + index
+			},
+			scrollChange(e){
+				console.log(e)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.page {
+		.tabs {
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+			background-color: #FFFFFF;
+			padding: 0 20rpx;
+			position: sticky;
+			top: 0;
+			left: 0;
+			z-index: 1;
+			overflow-x: auto;
+
+			.tab {
+				text-align: center;
+				flex-shrink: 0;
+				width: 250rpx;
+				padding: 20rpx 0;
+				height: 80rpx;
+				box-sizing: border-box;
+			}
+
+			.selected {
+				position: relative;
+
+				&::after {
+					content: '';
+					width: 80rpx;
+					height: 6rpx;
+					background-color: red;
+					position: absolute;
+					bottom: 0;
+					left: 50%;
+					transform: translateX(-50%);
+				}
+			}
+		}
+		
+		.scroll-view{
+			height: calc(100vh - 100rpx);
+		}
+
+		.box {
+			margin-top: 20rpx;
+			background-color: #FFFFFF;
+
+			&:nth-last-of-type(1) {
+				height: calc(100vh - 100rpx);
+			}
+
+			.type_name {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: 20rpx;
+			}
+
+			.type-box {
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				flex-wrap: wrap;
+				padding-left: 20rpx;
+
+				.type {
+					width: 345rpx;
+					background: linear-gradient(0deg, #FDDEAF, #FDF3D8);
+					margin-right: auto;
+					margin-bottom: 20rpx;
+					border-radius: 20rpx;
+					padding: 30rpx;
+					box-sizing: border-box;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+
+					.top-des {
+						width: 100%;
+						display: flex;
+						justify-content: flex-start;
+						align-items: center;
+
+						.icon {
+							width: 91rpx;
+							height: 75rpx;
+							margin-right: 20rpx;
+						}
+
+						.right {
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+
+							.name {
+								color: #744520;
+								font-size: 30rpx;
+								font-weight: 500;
+							}
+
+							.introduction {
+								margin-top: 15rpx;
+								font-weight: 400;
+								color: #744520;
+								font-size: 26rpx;
+								white-space: nowrap;
+							}
+						}
+					}
+
+					.btn {
+						margin-top: 30rpx;
+						width: 166rpx;
+						height: 60rpx;
+						background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
+						border-radius: 30px;
+						padding: 18rpx;
+						box-sizing: border-box;
+						font-size: 26rpx;
+						font-weight: 400;
+						color: #FFFFFF;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/fulu/orderdes.vue

@@ -0,0 +1,307 @@
+<template>
+	<view class="page">
+		<loadSke :loading='loading'>
+			<view class="remind-top">首页->我的->我的订单</view>
+			<view class="des-box">
+				<view>
+					<view v-if="true" class="code-box">
+						<image class="qrcode" :src="orderDes.goodsPictureUrl" mode="widthFix"></image>
+						<view class="code">
+							<text>充值用户</text>
+							<text>{{orderDes.charge_account}}</text>
+						</view>
+					</view>
+				</view>
+				<view class="order-num">
+					<text>订单号：{{outTradeNo}}</text>
+					<text>{{orderDes.orderStatusDesc}}</text>
+					<text v-if="orderDes.orderStatus==3">{{orderDes.recharge_description}}</text>
+				</view>
+				<view class="des">
+					<text class="film-name">充值商品</text>
+					<view class="film-time">
+						<text>购买时间</text>
+						<text>{{orderDes.create_time}}</text>
+					</view>
+					<view class="film-address">
+						<text>购买商品</text>
+						<text>{{orderDes.product_name}}</text>
+					</view>
+					<view class="film-video">
+						<text>购买数量</text>
+						<text>{{orderDes.buy_num}}</text>
+					</view>
+					<view class="film-seat">
+						<text>购买价格</text>
+						<text>{{orderDes.total}}</text>
+					</view>
+				</view>
+			</view>
+		</loadSke>
+	</view>
+</template>
+
+<script>
+	export default {
+		data: () => ({
+			orderDes: {},
+			loading: true,
+			outTradeNo: null,
+			pollingTiemId: null
+		}),
+		onLoad: function(option) {
+			this.outTradeNo = option.outTradeNo
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			async init() {
+				let orderRes = await this.$api.order.getWxOrder(this.outTradeNo)
+				this.orderDes = orderRes.data
+				// 直接查询的接口
+				// await this.$api.fulu.orderInfoGet({
+				// 	customer_order_no: this.outTradeNo
+				// })
+				this.loading = false
+				if (this.orderDes.orderStatus == 1) {
+					this.polling()
+				}
+			},
+			polling() {
+				this.pollingTiemId = setInterval(async () => {
+					let orderRes = await this.$api.order.getWxOrder(this.outTradeNo)
+					this.orderDes = orderRes.data
+					if (this.orderDes.orderStatus != 1) {
+						clearInterval(this.pollingTiemId)
+					}
+				}, 3000)
+			}
+		},
+		beforeDestroy() {
+			clearInterval(this.pollingTiemId)
+		}
+	}
+</script>
+
+<style lang="scss">
+	.page {
+		padding-bottom: 20rpx;
+	}
+
+	.remind {
+		padding-top: 36rpx;
+		font-size: 26rpx;
+		font-weight: 400;
+		color: #0F0404;
+		text-align: center;
+	}
+
+	.remind-top {
+		margin-top: 36rpx;
+		font-size: 26rpx;
+		font-weight: 400;
+		color: #ff0000;
+		text-align: center;
+	}
+
+	.des-box {
+		width: 564rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+		margin: auto;
+		margin-top: 30rpx;
+
+		.code-box {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-bottom: 38rpx;
+
+			.code {
+				margin-top: 43rpx;
+
+				text {
+					font-size: 26rpx;
+					font-weight: 400;
+					color: #666666;
+					margin-right: 20rpx;
+
+					&:nth-child(2) {
+						color: #0F0404;
+					}
+				}
+			}
+
+			.qrcode {
+				margin-top: 43rpx;
+				width: 360rpx;
+				height: 360rpx;
+			}
+
+			.qrcode-loading {
+				margin-top: 43rpx;
+				width: 100%;
+			}
+		}
+
+		.order-num {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
+			padding: 34rpx 31rpx;
+			border-top: 1rpx dashed #D9D9D9;
+			border-bottom: 1rpx dashed #D9D9D9;
+			position: relative;
+
+			&::after {
+				content: '';
+				width: 24rpx;
+				height: 24rpx;
+				border-radius: 50%;
+				background-color: #F1F1F1;
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: translate(-50%, -50%);
+			}
+
+			&::before {
+				content: '';
+				width: 24rpx;
+				height: 24rpx;
+				border-radius: 50%;
+				background-color: #F1F1F1;
+				position: absolute;
+				top: 0;
+				right: 0;
+				transform: translate(50%, -50%);
+			}
+
+			text {
+				&:nth-child(1) {
+					margin-top: 60rpx;
+					word-break: break-all;
+					font-size: 22rpx;
+					font-weight: 400;
+					color: #666666;
+				}
+
+				&:nth-child(2) {
+					margin-top: 10rpx;
+					padding: 10rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background: #FFE5E5;
+					border-radius: 20rpx;
+					border-top-left-radius: 0;
+					border-bottom-left-radius: 0;
+					font-size: 20rpx;
+					font-weight: 400;
+					color: #E31818;
+					position: absolute;
+					left: 0;
+					top: 20rpx;
+				}
+
+				&:nth-child(3) {
+					margin-top: 10rpx;
+					padding: 10rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 20rpx;
+					font-weight: 400;
+					color: #E31818;
+				}
+			}
+		}
+
+		.des {
+			padding: 45rpx 30rpx;
+			border-bottom: 1rpx dashed #D9D9D9;
+			display: flex;
+			flex-direction: column;
+
+			.film-name {
+				font-size: 30rpx;
+				font-weight: 400;
+				color: #0F0404;
+			}
+
+			text {
+				font-size: 26rpx;
+				font-weight: 400;
+				color: #666666;
+				margin-right: 20rpx;
+				white-space: nowrap;
+			}
+
+			.film-time {
+				text:nth-child(2) {
+					color: #999999;
+				}
+			}
+
+			.film-address {
+				display: flex;
+				justify-content: flex-start;
+				align-items: stretch;
+
+				text:nth-child(2) {
+					color: #999999;
+					white-space: pre-wrap;
+				}
+			}
+
+			.film-video {
+				display: flex;
+				justify-content: flex-start;
+				align-items: stretch;
+
+				text:nth-child(2) {
+					color: #999999;
+					white-space: pre-wrap;
+				}
+			}
+
+			.film-seat {
+				display: flex;
+				justify-content: flex-start;
+				align-items: stretch;
+				margin-top: 10rpx;
+
+				.seat-box {
+					display: flex;
+					flex-wrap: wrap;
+
+					text {
+						height: 40rpx;
+						padding: 4rpx 15rpx;
+						margin-bottom: 10rpx;
+						background: #EBEBEB;
+						border-radius: 4rpx;
+						color: #999999;
+					}
+				}
+			}
+		}
+
+		.price {
+			padding: 40rpx 30rpx;
+
+			text {
+				font-size: 26rpx;
+				font-weight: 400;
+				color: #666666;
+				margin-right: 20rpx;
+
+				&:nth-child(2) {
+					color: #E31818;
+				}
+			}
+		}
+	}
+</style>

src/pages/fulu/placeorder.vue

@@ -0,0 +1,277 @@
+<template>
+	<loading v-if="loading"></loading>
+	<view v-else>
+		<view class="top">
+			<image class="left-icon" :src="icon" mode="scaleToFill"></image>
+			<text class="tit">{{goodsInfoList[current].product_name.split('-')[1]}}</text>
+		</view>
+		<view class="user-data">
+			<van-cell-group>
+				<van-field v-for="(item,index) in goodsTemplate.ElementInfo.Inputs" :key='item.SortId'
+					:value="charge_account" @change='fieldChange' required clearable :label="item.Name"
+					icon="question-o" :placeholder="'请输入'+item.Name" @click-icon="onClickIcon('请输入'+item.Name)" />
+				<van-cell :title="goodsTemplate.ElementInfo.ChargeNum.Name">
+					<van-stepper slot="right-icon" :value="buy_num" integer @change="stepperChange" :min="1" />
+				</van-cell>
+			</van-cell-group>
+		</view>
+
+		<view class="prompt">
+			<text class="top-tit">购买须知</text>
+			<view class="dex-box">
+				<text v-for="(item,index) in remark" :key='index'>{{index+1}}、{{item}}</text>
+			</view>
+		</view>
+
+		<view class="commodity-selection">
+			<text class="top-tit">充值类型</text>
+			<view class="selection-box">
+				<view class="commodity" :class="{selected:current==index}" @click="current=index"
+					v-for="(item,index) in goodsInfoList" :key='item.product_id'>
+					<text>{{item.product_name.split('-')[1]}}</text>
+					<text>{{item.product_name.split('-')[2]}}</text>
+					<text>¥{{item.purchase_price*fulu_vip_discount}}</text>
+					<text>¥{{item.face_value}}</text>
+					<m-icon v-if="current==index" class="xuanzhong-icon" type="xuanzhong" color="#47CB79"></m-icon>
+				</view>
+			</view>
+		</view>
+
+		<view class="buy-btn-box"></view>
+		<view class="buy-btn" @click="buy">
+			立即充值
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data: () => ({
+			current: 0,
+			goodsInfoList: [],
+			goodsTemplate: {},
+			product_ids: [],
+			icon: null,
+			remark: [],
+			loading: true,
+			buy_num: 1,
+			charge_account: null,
+			fulu_vip_discount: 1,
+		}),
+		onLoad: async function(option) {
+			let data = await this.goPageGetData()
+			this.product_ids = data.product_ids
+			this.icon = data.icon
+			this.remark = data.remark
+		},
+		async mounted() {
+			let keywordRes = await this.$api.fulu.getPriceKeyword()
+			if(keywordRes.code == 200){
+				this.fulu_vip_discount = keywordRes.data
+			}
+			this.loading = true
+			let arr = []
+			this.product_ids.forEach(id => {
+				arr.push(this.$api.fulu.goods.infoGet({
+					product_id: id
+				}))
+			})
+			await Promise.all(arr).then(res => {
+				res.forEach(resObj => {
+					if (resObj.code == 200)
+						resObj.data.code == 0 && this.goodsInfoList.push(JSON.parse(resObj.data
+							.result))
+				})
+			})
+			let tempRes = await this.$api.fulu.goods.templateGet({
+				template_id: this.goodsInfoList[this.current].template_id
+			})
+			this.goodsTemplate = JSON.parse(tempRes.data.result)
+			this.$nextTick(() => {
+				this.loading = false
+			})
+		},
+		methods: {
+			async buy() {
+				this.$utils.wxUtils.subscribeToNews().then(async res => {
+					let orderRes = await this.$api.fulu.prepareOrder({
+						buy_num: this.buy_num,
+						charge_account: this.charge_account,
+						goodsPictureUrl: this.icon,
+						product_id: this.goodsInfoList[this.current].product_id
+					})
+					let payRes = await wx.requestPayment(orderRes.data)
+					if (payRes.errMsg == 'requestPayment:ok') {
+						this.$utils.goPage(
+							`/pages/fulu/orderdes?outTradeNo=${orderRes.data.outTradeNo}`,
+							'reLaunch')
+					}
+				})
+			},
+			stepperChange(e) {
+				this.buy_num = e.detail
+			},
+			fieldChange(e) {
+				this.charge_account = e.detail
+			},
+			onClickIcon(msg) {
+				wx.showToast({
+					title: msg,
+					icon: 'none'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.top {
+		margin-top: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #FFFFFF;
+		padding: 23rpx;
+
+		.left-icon {
+			width: 87rpx;
+			height: 79rpx;
+			margin-right: 22rpx;
+		}
+
+		.tit {
+			white-space: nowrap;
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #0F0404;
+		}
+	}
+
+	.user-data {
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.commodity-selection {
+		margin-top: 20rpx;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+
+		.top-tit {
+			font-size: 26rpx;
+			font-weight: 400;
+			color: #666666;
+			line-height: 39rpx;
+			border-bottom: 1rpx solid #e8e8e8;
+			padding: 28rpx;
+		}
+
+		.selection-box {
+			margin-top: 30rpx;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			padding-left: 15rpx;
+
+			.selected {
+				border: 1rpx solid #ECBF7A !important;
+				background-color: #FDF3D7;
+			}
+
+			.commodity {
+				margin-bottom: 15rpx;
+				margin-right: 15rpx;
+				width: 230rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				border: 1rpx solid #E8E8E8;
+				box-sizing: border-box;
+				padding: 30rpx 20rpx;
+				border-radius: 6rpx;
+				position: relative;
+
+				.xuanzhong-icon {
+					position: absolute;
+					right: 0;
+					bottom: 0;
+				}
+
+				text {
+					&:nth-child(1) {
+						color: #999999;
+						font-size: 26rpx;
+					}
+
+					&:nth-child(2) {
+						color: #999999;
+						font-size: 26rpx;
+					}
+
+					&:nth-child(3) {
+						color: #E31818;
+						font-size: 40rpx;
+					}
+
+					&:nth-child(4) {
+						color: #999999;
+						font-size: 26rpx;
+						text-decoration: line-through;
+					}
+				}
+			}
+		}
+	}
+
+	.prompt {
+		margin-top: 20rpx;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+
+		.top-tit {
+			font-size: 26rpx;
+			font-weight: 400;
+			color: #666666;
+			line-height: 39rpx;
+			border-bottom: 1rpx solid #e8e8e8;
+			padding: 28rpx;
+		}
+
+		.dex-box {
+			padding: 28rpx;
+			display: flex;
+			flex-direction: column;
+			font-size: 26rpx;
+			font-weight: 400;
+			color: #666666;
+			line-height: 39rpx;
+		}
+	}
+
+	.buy-btn-box {
+		margin-top: 30rpx;
+		width: 600rpx;
+		height: 80rpx;
+		opacity: 0;
+	}
+
+	.buy-btn {
+		position: fixed;
+		bottom: 30rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 600rpx;
+		height: 80rpx;
+		background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
+		border-radius: 40rpx;
+		font-size: 30rpx;
+		font-weight: 400;
+		color: #FFFFFF;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

src/pages/home/index.vue

@@ -0,0 +1,101 @@
+<template>
+	<view class="home">
+		<view class="top-list">
+			<image class="background-img" style="width: 100vw;"
+				src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E9%A1%B6%E9%83%A8%E8%83%8C%E6%99%AF3.png"
+				mode="widthFix"></image>
+			<topbar class="topbar-slot">
+				<view>
+					<text style="color: #FFFFFF;">极速生活圈</text>
+				</view>
+			</topbar>
+
+			<loadSke :loading='topLoading' :list='bannerList'>
+				<m-banner :bannerList="bannerList"></m-banner>
+				<m-home-coupon :couponList="couponList"></m-home-coupon>
+				<m-home-menu :menuList="menuList"></m-home-menu>
+			</loadSke>
+		</view>
+		
+		<m-home-bottomad :bottomAD="bottomAD"></m-home-bottomad>
+
+		<m-home-pdd ref="pdd"></m-home-pdd>
+	</view>
+</template>
+
+<script>
+	import utils from '@/utils'
+	export default {
+		data: () => ({
+			bannerList: [],
+			couponList: [],
+			menuList: [],
+			bottomAD: [],
+			topLoading: true,
+		}),
+		mounted() {
+			this.init()
+		},
+		onReachBottom(){
+			this.onBottom()
+		},
+		methods: {
+			onBottom() {
+				this.$refs.pdd.onBottom()
+			},
+			init() {
+				this.$api.home.getHomePageDataList(['bottomAD','menu','coupon','carouselChart']).then(res => {
+					this.bannerList = res.data.carouselChart
+					this.couponList = res.data.coupon.slice(0, 4)
+					this.menuList = res.data.menu
+					this.bottomAD = res.data.bottomAD
+					this.$nextTick(() => {
+						this.topLoading = false
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.home {
+		height: 100%;
+	}
+
+	.top-list {
+		padding: 30rpx;
+		padding-top: 0;
+		box-sizing: border-box;
+		width: 100%;
+		background-color: #FFFFFF;
+		position: relative;
+
+		.topbar-slot {
+			z-index: 1;
+			align-self: center;
+			display: flex;
+			justify-content: center;
+		}
+
+		.background-img {
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+
+		.swiper-box {
+			width: 690rpx;
+			height: 342rpx;
+			overflow: hidden;
+
+			.image {
+				width: 100%;
+				height: 100%;
+				border-radius: 10px;
+			}
+		}
+
+
+	}
+</style>

src/pages/index/components/applist.vue

@@ -51,9 +51,7 @@
 
 					</view>
 				</view>
-				<view v-if="bottomLoading" class="bottom-loading">
-					正在加载中...
-				</view>
+				<loading v-if="bottomLoading" class="bottom-loading" />
 				<view class="ad-box list-item">
 					<ad unit-id="adunit-d8c1548cc9663765"></ad>
 				</view>
@@ -76,15 +74,7 @@
 <script>
 	import {
 		debounce
-	} from '@/utils/utils.js'
-	import {
-		typeList,
-		getTypeAppList,
-		addFavorites,
-		delFavorites,
-		BrowseRecordAdd,
-		getCarouselChartList
-	} from '@/api/applist.js'
+	} from '@/utils'
 	export default {
 		data() {
 			return {
@@ -128,7 +118,7 @@
 				this.customerName = ''
 				this.pageNum = 1
 				this.loading = true
-				getTypeAppList(val, {
+				this.$api.applist.getTypeAppList(val, {
 					pageNum: this.pageNum,
 					pageSize: this.pageSize
 				}).then(res => {
@@ -158,7 +148,7 @@
 			onSearch(e) {
 				this.pageNum = 1
 				this.loading = true
-				getTypeAppList(this.listType, {
+				this.$api.applist.getTypeAppList(this.listType, {
 					pageNum: this.pageNum,
 					pageSize: this.pageSize,
 					customerName: e.detail
@@ -171,12 +161,12 @@
 				})
 			},
 			initAppList() {
-				typeList({
+				this.$api.applist.typeList({
 					pid: 0
 				}).then(res => {
 					this.typeList = res.rows.slice(0, 8)
 				})
-				getTypeAppList(0, {
+				this.$api.applist.getTypeAppList(0, {
 					pageNum: 1,
 					pageSize: 10
 				}).then(res => {
@@ -194,7 +184,7 @@
 				}
 				this.bottomLoading=true
 				this.pageNum++
-				getTypeAppList(this.listType, {
+				this.$api.applist.getTypeAppList(this.listType, {
 					pageNum: this.pageNum,
 					pageSize: this.pageSize,
 					customerName: this.customerName
@@ -217,7 +207,7 @@
 				}
 			},
 			addSc(index) {
-				addFavorites(this.applist[index].id).then(res => {
+				this.$api.applist.addFavorites(this.applist[index].id).then(res => {
 					if (res.code == 200) {
 						this.$set(this.applist[index], 'collectionStatus', '1')
 						this.$utils.Toast('收藏成功!');
@@ -225,7 +215,7 @@
 				})
 			},
 			delSc(index) {
-				delFavorites(this.applist[index].id).then(res => {
+				this.$api.applist.delFavorites(this.applist[index].id).then(res => {
 					if (res.code == 200) {
 						this.$set(this.applist[index], 'collectionStatus', '0')
 						this.$utils.Toast('取消收藏成功!');
@@ -240,7 +230,7 @@
 				this.onClose();
 			},
 			getAppList() {
-				featuredAppList({
+				this.$api.applist.featuredAppList({
 					pageNum: 1,
 					pageSize: 10
 				}).then(res => {

src/pages/index/components/home.vue

@@ -1,440 +0,0 @@
-<template>
-	<scroll-view class="home" scroll-y @scrolltolower='onBottom'>
-		<!-- <van-tabs >
-		  <van-tab title="标签 1">内容 1</van-tab>
-		  <van-tab title="标签 2">内容 2</van-tab>
-		  <van-tab title="标签 3">内容 3</van-tab>
-		  <van-tab title="标签 4">内容 4</van-tab>
-		</van-tabs> -->
-		<view class="top-list">
-			<image class="background-img" style="width: 100vw;" src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E9%A1%B6%E9%83%A8%E8%83%8C%E6%99%AF3.png"
-			 mode="widthFix"></image>
-			<topbar class="topbar-slot">
-				<view>
-					<text style="color: #FFFFFF;">极速生活圈</text>
-				</view>
-			</topbar>
-
-			<loadSke :loading='topLoading' :list='bannerList'>
-				<swiper class="swiper-box" :current="current" autoplay circular indicator-dots>
-					<swiper-item v-for="(item,index) in bannerList" :key='index'>
-						<image @click="$utils.clickJumpType(item)" class="image" :src="item.fileUrl" mode="scaleToFill" :draggable="false" />
-					</swiper-item>
-				</swiper>
-
-				<view class="eat-box">
-					<view class="eat" v-for="(item,index) in couponList" :key='index' @click="$utils.clickJumpType(item)">
-						<image :src="item.fileUrl" mode="scaleToFill" class="img"></image>
-						<view class="text-box">
-							<text class="text-1">{{item.pictureName}}</text>
-							<text class="text-2">{{item.dataDescribe.split(' ')[0]}}</text>
-							<text class="text-3">{{item.dataDescribe.split(' ')[1]}}</text>
-						</view>
-					</view>
-				</view>
-
-				<view class="menu-box">
-					<view class="menu" v-for="(item,index) in menuList" :key='index' @click="$utils.clickJumpType(item)">
-						<image :src="item.fileUrl" mode="scaleToFill" class="img"></image>
-						<text class="text-1">{{item.pictureName}}</text>
-						<text class="text-2">{{item.dataDescribe || '暂无描述'}}</text>
-					</view>
-				</view>
-			</loadSke>
-		</view>
-
-		<view class="bottom-ad" v-for="(item,index) in bottomAD" :key='index' @click="$utils.clickJumpType(item)">
-			<image style="width: 100%;" :src="item.fileUrl" mode="widthFix"></image>
-			<text>今日仅剩{{dynamicQuantity(index)}}个</text>
-			<button>免费领取</button>
-		</view>
-
-		<view class="item-box">
-			<view class="item-titBox">
-				<text class="item-tit">限时特价</text>
-				<text class="item-tit-right">更多类型 ></text>
-			</view>
-			<loadSke :loading='pddLoading' :list='pddList'>
-				<view class="flex-box">
-					<view class="film-box" v-for="(item,index) in pddList" :key='index' @click="pddGoApp({appId:item.we_app_info.app_id,path:item.we_app_info.page_path})">
-						<image :src="item.goods_image_url" mode="widthFix" class="img" draggable></image>
-						<view class="bottom-box">
-							<view class="tit">
-								<text class="text-1">{{item.goods_name}}</text>
-							</view>
-							<view class="des-box">
-								<view class="des">{{item.unified_tags}}</view>
-							</view>
-							<view class="buy-box">
-								<text class="price">{{'¥'+(item.min_group_price)/100}}</text>
-								<button type="default" class="buy">活动价 {{'¥'+(item.min_group_price-item.coupon_discount)/100}}</button>
-							</view>
-						</view>
-					</view>
-					<view v-if="pddDataLoading" class="bottom-loading">
-						<loading />
-					</view>
-				</view>
-			</loadSke>
-		</view>
-	</scroll-view>
-</template>
-
-<script>
-	import {
-		getHomePageDataList,
-		getPddWxData
-	} from '@/api/home.js'
-	export default {
-		data: () => ({
-			bannerList: [],
-			couponList: [],
-			menuList: [],
-			bottomAD: [],
-			topLoading: true,
-			pddList: [],
-			pddLoading: true,
-			limit: 6,
-			page: 0,
-			pddDataLoading: false,
-		}),
-		mounted() {
-			this.init()
-		},
-		methods: {
-			pddGoApp(data) {
-				this.$utils.goMiniApp(JSON.stringify(data))
-			},
-			onBottom() {
-				if (this.pddDataLoading) return
-				this.pddDataLoading = true
-				this.page++
-				getPddWxData({
-					limit: this.limit,
-					offset: this.page * this.limit
-				}).then(res => {
-					this.pddList = this.pddList.concat(res)
-					this.$nextTick(() => {
-						this.pddLoading = false
-						this.pddDataLoading = false
-					})
-				})
-			},
-			dynamicQuantity(index) {
-				index++
-				let x = new Date().getHours() / 3
-				let num = ((x - 8) ** 2) + index * (8 - x) * 1 + index * 3 + 1
-				return parseInt(num)
-			},
-			init() {
-				getHomePageDataList().then(res => {
-					this.bannerList = res.data.carouselChart
-					this.couponList = res.data.coupon.slice(0, 4)
-					this.menuList = res.data.menu
-					this.bottomAD = res.data.bottomAD
-					this.$nextTick(() => {
-						this.topLoading = false
-					})
-				})
-				getPddWxData({
-					limit: this.limit,
-					offset: this.page * this.limit
-				}).then(res => {
-					this.pddList = res
-					this.$nextTick(() => {
-						this.pddLoading = false
-					})
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.home {
-		height: 100%;
-	}
-
-	.top-list {
-		padding: 30rpx;
-		padding-top: 0;
-		box-sizing: border-box;
-		width: 100%;
-		background-color: #FFFFFF;
-		position: relative;
-
-		.topbar-slot {
-			z-index: 1;
-			align-self: center;
-			display: flex;
-			justify-content: center;
-		}
-
-		.background-img {
-			position: absolute;
-			top: 0;
-			left: 0;
-		}
-
-		.swiper-box {
-			width: 690rpx;
-			height: 342rpx;
-			overflow: hidden;
-
-			.image {
-				width: 100%;
-				height: 100%;
-				border-radius: 10px;
-			}
-		}
-
-		.eat-box {
-			margin-top: 30rpx;
-			display: flex;
-			justify-content: space-between;
-
-			.eat {
-				width: 158rpx;
-				height: 240rpx;
-				position: relative;
-
-				.img {
-					width: 100%;
-					height: 100%;
-				}
-
-				.text-box {
-					display: flex;
-					flex-direction: column;
-					justify-content: center;
-					align-items: center;
-					position: absolute;
-					bottom: 10rpx;
-					left: 50%;
-					width: 100%;
-					transform: translateX(-50%);
-
-					.text-1 {
-						font-size: 24rpx;
-						color: #0F0404;
-						text-align: center;
-					}
-
-					.text-2 {
-						margin-top: 5rpx;
-						font-size: 20rpx;
-						color: #FE3232;
-						text-align: center;
-					}
-
-					.text-3 {
-						font-size: 20rpx;
-						color: #666666;
-						text-align: center;
-					}
-				}
-
-			}
-		}
-
-		.menu-box {
-			display: flex;
-			justify-content: flex-start;
-			flex-wrap: wrap;
-			margin: 0 -10rpx;
-
-			.menu {
-				width: 20%;
-				padding: 0 10rpx;
-				box-sizing: border-box;
-				// height: 121rpx;
-				margin-top: 40rpx;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				align-items: center;
-
-				.img {
-					flex-shrink: 0;
-					width: 83rpx;
-					height: 83rpx;
-					border-radius: 50%;
-				}
-
-				.text-1 {
-					margin-top: 10rpx;
-					font-size: 24rpx;
-					color: #0F0404;
-					text-align: center;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-
-				.text-2 {
-					font-size: 20rpx;
-					color: #666666;
-					text-align: center;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-		}
-
-
-	}
-
-	.bottom-ad {
-		margin-top: -15rpx;
-		position: relative;
-
-		&:nth-child(2) {
-			margin-top: 20rpx;
-		}
-
-		text {
-			position: absolute;
-			top: 104rpx;
-			left: 220rpx;
-			padding: 10rpx 15rpx;
-			background: #FFE1D9;
-			font-size: 22rpx;
-			font-family: PingFang SC;
-			font-weight: 400;
-			color: #A40303;
-		}
-
-		button {
-			position: absolute;
-			top: 67rpx;
-			right: 40rpx;
-			display: inline-block;
-			margin: 0;
-			padding: 0rpx 26rpx;
-			background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
-			border-radius: 30rpx;
-			font-size: 26rpx;
-			font-family: PingFang SC;
-			font-weight: 400;
-			color: #FFFFFF;
-		}
-	}
-
-	.item-box {
-		background-color: #fff;
-		// margin-top: 40rpx;
-
-		.item-titBox {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 20rpx;
-			border-bottom: 1rpx solid #e8e8e8;
-
-			.item-tit {
-				border-left: 8rpx solid #E31818;
-				font-size: 30rpx;
-				padding: 11rpx;
-				margin-left: 20rpx;
-			}
-
-			.item-tit-right {
-				font-size: 26rpx;
-				color: #666666;
-				line-height: 58rpx;
-				padding: 11rpx;
-			}
-		}
-
-		.flex-box {
-			width: 100%;
-			display: flex;
-			justify-content: center;
-			align-items: flex-start;
-			flex-wrap: wrap;
-			background-color: #F8F8F8;
-			padding-bottom: 20rpx;
-
-			.film-box {
-				width: 334rpx;
-				border-radius: 20rpx;
-				overflow: hidden;
-				background: #FFFFFF;
-				margin: 30rpx 11rpx 0;
-
-				.img {
-					width: 100%;
-				}
-
-				.bottom-box {
-					padding: 30rpx 20rpx;
-
-					.tit {
-						display: flex;
-						justify-content: space-between;
-
-						.text-1 {
-							width: 100%;
-							font-size: 26rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							// white-space: nowrap;
-						}
-					}
-
-					.des-box {
-						margin-top: 10rpx;
-
-						.des {
-							width: 100%;
-							font-size: 22rpx;
-							color: #666666;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-					}
-
-					.buy-box {
-						margin-top: 20rpx;
-						display: flex;
-						justify-content: flex-start;
-						align-items: center;
-
-						.price {
-							// color: #E31818;
-							text-decoration: line-through;
-							font-size: 34rpx;
-						}
-
-						.buy {
-							height: 40rpx;
-							background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
-							border-radius: 20rpx;
-							margin-left: 10rpx;
-							font-size: 20rpx;
-							color: #FFFFFF;
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							white-space: nowrap;
-						}
-					}
-
-				}
-
-			}
-
-		}
-
-		.bottom-loading {
-			margin-top: 5rpx;
-			padding: 10rpx;
-		}
-	}
-
-	.ad-video {
-		margin-top: 40rpx;
-	}
-</style>

src/pages/index/components/login.vue

@@ -16,8 +16,7 @@ export default {
       if (loginRes.code == 200) {
         this.$emit("update:login", true);
       } else {
-        this.$utils.Toast("登录失败");
-        this.$emit("update:login", true);
+        
       }
     },
   },

src/pages/index/components/user.vue

@@ -1,195 +0,0 @@
-<template>
-  <scroll-view scroll-y class="content">
-    <view class="top">
-      <view class="avabox">
-        <van-image
-          round
-          class="img"
-          width="200rpx"
-          height="200rpx"
-          :src="userData.headImage"
-        />
-        <view class="avatitbox">
-          <text>{{ userData.nickName }}</text>
-          <text v-if="userData.gzptUserId">{{ studentInfo.logincode }}</text>
-          <view class="sync-btn" @tap="getUserProfile"
-            >点击同步用户头像昵称</view
-          >
-        </view>
-      </view>
-    </view>
-
-    <view class="serviceBox">
-      <view class="tit">
-        <text>我的服务</text>
-      </view>
-      <view class="btnBox">
-        <button
-          class="item-box"
-          :plain="true"
-          @click="$utils.goPage('/pages/user/order')"
-        >
-          <van-icon name="/static/imgs/order-icon.png" size="22px" />
-          <text class="text">我的订单</text>
-        </button>
-        <button
-          class="item-box"
-          :plain="true"
-          @click="$utils.goPage('/pages/user/collectionList')"
-        >
-          <van-icon name="/static/imgs/wdsc.png" size="22px" />
-          <text class="text">我的收藏</text>
-        </button>
-        <button
-          class="item-box"
-          :plain="true"
-          @click="$utils.goPage('/pages/user/browserecord')"
-        >
-          <van-icon name="/static/imgs/llzj.png" size="22px" />
-          <text class="text">浏览足迹</text>
-        </button>
-        <button class="item-box" :plain="true" open-type="feedback">
-          <van-icon name="/static/imgs/yjfk.png" size="22px" />
-          <text class="text">意见反馈</text>
-        </button>
-      </view>
-    </view>
-
-    <view class="serviceBox">
-      <view class="tit">
-        <text>我的信息</text>
-      </view>
-      <van-cell
-        title="我的设置"
-        icon="/static/imgs/wdsz.png"
-        is-link
-        @tap="$utils.goPage('/pages/user/set')"
-      />
-      <button class="server" open-type="contact" :plain="true">
-        <van-cell title="联系客服" icon="/static/imgs/lxkf.png" is-link />
-      </button>
-    </view>
-
-    <view class="ad-box serviceBox">
-      <ad unit-id="adunit-d8c1548cc9663765"></ad>
-    </view>
-  </scroll-view>
-</template>
-
-<script>
-import { updateUserInfo } from "@/api/login.js";
-export default {
-  computed: {
-    userData() {
-      return this.$store.state.user.userInfo;
-    },
-  },
-  mounted() {
-    this.$store.dispatch("GetInfo");
-  },
-  methods: {
-    async getUserProfile(e) {
-      let userInfo = await wx.getUserProfile({
-        desc: "业务需要",
-      });
-      let updateRes = await updateUserInfo({
-        headImage: userInfo.userInfo.avatarUrl,
-        nickName: userInfo.userInfo.nickName,
-      });
-      if (updateRes.code == 200) {
-        this.$store.state.user.userInfo.headImage = userInfo.userInfo.avatarUrl;
-        this.$store.state.user.userInfo.nickName = userInfo.userInfo.nickName;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.content {
-  height: 100%;
-}
-
-.ad-box {
-  margin: 40rpx;
-  padding: 20rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.top {
-  padding-top: 100rpx;
-  background-image: url("/static/imgs/bg.png");
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-
-  .avabox {
-    display: flex;
-    padding: 10%;
-
-    .img {
-      border-radius: 50%;
-    }
-
-    .sync-btn {
-      margin-top: 20rpx;
-      height: 40rpx;
-    }
-
-    .avatitbox {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      padding: 30rpx;
-      color: #ffffff;
-      height: 100rpx;
-    }
-  }
-}
-
-.serviceBox {
-  background-color: #fff;
-  margin: 30rpx;
-  border-radius: 10rpx;
-
-  .tit {
-    padding: 26rpx;
-    border-bottom: 1rpx solid #e8e8e8;
-  }
-
-  .btnBox {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .item-box {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      width: 200rpx;
-      margin-top: 20rpx;
-      padding: 20rpx;
-      border: none;
-
-      .text {
-        font-size: 26rpx;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #666666;
-      }
-    }
-  }
-
-  .server {
-    border: none;
-    background-color: none;
-    margin: 0;
-    padding: 0;
-    text-align: left;
-    display: flexbox;
-  }
-}
-</style>

src/pages/index/index.vue

@@ -2,55 +2,57 @@
 	<view>
 		<login v-if="!login" :login.sync="login" />
 		<view v-else>
-			<swiper class="swiper-box" :current-item-id="active" @change="swiperChange" easing-function="easeInCubic">
-				<swiper-item class="swiper-item" item-id="home">
+			<!-- <swiper circular class="swiper-box" :current-item-id="active" @change="swiperChange" easing-function="default">
+				<swiper-item class="swiper-item" item-id="home" @touchmove.stop="stopMove">
 					<home v-if="activeObj.home" ref="home" />
 				</swiper-item>
-				<swiper-item class="swiper-item" item-id="cinema">
+				<swiper-item class="swiper-item" item-id="cinema" @touchmove.stop="stopMove">
 					<cinema v-if="activeObj.cinema" ref="cinema" />
 				</swiper-item>
-				<swiper-item class="swiper-item" item-id="applist">
+				<swiper-item class="swiper-item" item-id="applist" @touchmove.stop="stopMove">
 					<applist v-if="activeObj.applist" ref="applist" />
 				</swiper-item>
-				<swiper-item class="swiper-item" item-id="user">
+				<swiper-item class="swiper-item" item-id="user" @touchmove.stop="stopMove">
 					<user v-if="activeObj.user" ref="user" />
 				</swiper-item>
-			</swiper>
+			</swiper> -->
+			<home v-if="activeObj.home" v-show="active==='home'" ref="home" />
+			<cinema v-if="activeObj.cinema" v-show="active==='cinema'" ref="cinema" />
+			<applist v-if="activeObj.applist" v-show="active==='applist'" ref="applist" />
+			<user v-if="activeObj.user" v-show="active==='user'" ref="user" />
 
 			<van-tabbar :active="active" @change="onChange" :placeholder="true" active-color="#E31818" inactive-color="#999999">
-				<van-tabbar-item name="home" icon="wap-home">
-					<!-- <van-icon slot="icon" name="/static/imgs/fxh.png" /> -->
-					<!-- <van-icon slot="icon-active" name="/static/imgs/fx.png" /> -->
+				<van-tabbar-item name="home">
+					<m-icon slot="icon" type="shouye" size="24px"></m-icon>
+					<m-icon slot="icon-active" type="shouye" size="34px"></m-icon>
 					首页
 				</van-tabbar-item>
-				<van-tabbar-item name="cinema" icon="video">
-					<!-- <van-icon slot="icon" name="/static/imgs/fxh.png" /> -->
-					<!-- <van-icon slot="icon-active" name="/static/imgs/fx.png" /> -->
+				<van-tabbar-item name="cinema">
+					<m-icon slot="icon" type="dianying" size="24px"></m-icon>
+					<m-icon slot="icon-active" type="dianying" size="34px"></m-icon>
 					电影
 				</van-tabbar-item>
-				<van-tabbar-item name="applist" icon="search">
-					<!-- <van-icon slot="icon" name="/static/imgs/zth.png" /> -->
-					<!-- <van-icon slot="icon-active" name="/static/imgs/zt.png" /> -->
+				<van-tabbar-item name="applist">
+					<m-icon slot="icon" type="ddwl" size="24px"></m-icon>
+					<m-icon slot="icon-active" type="ddwl" size="34px"></m-icon>
 					发现
 				</van-tabbar-item>
-				<van-tabbar-item name="user" icon="manager">
-					<!-- <van-icon slot="icon" name="/static/imgs/wdh.png" /> -->
-					<!-- <van-icon slot="icon-active" name="/static/imgs/wd.png" /> -->
+				<van-tabbar-item name="user">
+					<m-icon slot="icon" type="wode" size="24px"></m-icon>
+					<m-icon slot="icon-active" type="wode" size="34px"></m-icon>
 					我的
 				</van-tabbar-item>
 			</van-tabbar>
 		</view>
-
-		<van-toast id="van-toast" />
 	</view>
 </template>
 
 <script>
 	import applist from "./components/applist.vue";
-	import user from "./components/user.vue";
+	import user from "@/pages/user/index.vue";
 	import login from "./components/login.vue";
-	import home from "./components/home.vue";
-	import cinema from "./components/cinema.vue";
+	import home from "@/pages/home/index.vue";
+	import cinema from "@/pages/cinema/index.vue";
 	export default {
 		components: {
 			applist,
@@ -66,6 +68,12 @@
 				activeObj: {},
 			};
 		},
+		mounted() {
+
+		},
+		onReachBottom() {
+			this.$refs[this.active].onBottom && this.$refs[this.active].onBottom()
+		},
 		onLoad: function(option) {
 			if (option.active) {
 				this.active = option.active;
@@ -74,10 +82,16 @@
 		},
 		onShareAppMessage: function() {},
 		methods: {
+			stopMove() {
+				return true
+			},
 			onChange(event) {
 				// event.detail 的值为当前选中项的索引
 				this.active = event.detail;
 				this.activeObj[this.active] = true;
+				uni.pageScrollTo({
+					scrollTop: 0
+				})
 			},
 			swiperChange(event) {
 				this.active = event.detail.currentItemId;

src/pages/phoneBill/index.vue

@@ -0,0 +1,241 @@
+<template>
+	<view>
+		<view class="top">
+			<image class="left-icon" :src="icon" mode="scaleToFill"></image>
+			<text class="tit">100元话费,限时{{price}}元</text>
+		</view>
+		<view class="user-data">
+			<van-cell-group>
+				<van-field :value="tmallNo" @change='tmallNo_fieldChange' type="text" required clearable label="天猫订单号"
+					icon="question-o" placeholder="请输入天猫订单号" @click-icon="onClickIcon('买了山泉心品才有的单号')" />
+				<van-field :value="rechargePhoneNo" @change='rechargePhoneNo_fieldChange' type="number" label="手机号码"
+					placeholder="请输入手机号码" required />
+			</van-cell-group>
+		</view>
+
+		<view class="commodity-selection">
+			<text class="top-tit">充值运营商类型</text>
+			<view class="selection-box">
+				<view class="commodity" :class="{selected:current==index}" @click="current=index"
+					v-for="(item,index) in goodsInfoList" :key='index'>
+					<text>{{item}}</text>
+					<m-icon v-if="current==index" class="xuanzhong-icon" type="xuanzhong" color="#47CB79"></m-icon>
+				</view>
+			</view>
+		</view>
+
+		<view class="prompt">
+			<text class="top-tit">购买须知</text>
+			<view class="dex-box">
+				<text v-for="(item,index) in remark" :key='index'>{{index+1}}、{{item}}</text>
+			</view>
+		</view>
+
+		<view class="buy-btn-box"></view>
+		<view class="buy-btn" @click="buy">
+			立即充值
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data: () => ({
+			current: 0,
+			goodsInfoList: ['移动', '联通', '电信'],
+			remark: ['请注意,买了就不给退钱'],
+			tmallNo: null,
+			rechargePhoneNo: null,
+			icon: 'https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E5%A4%A9%E7%8C%AB%E6%B4%BB%E5%8A%A8%E8%AF%9D%E8%B4%B9.png',
+			price: null
+		}),
+		async mounted() {
+			let {
+				data
+			} = await this.$api.phoneBill.getPriceKeyword()
+			this.price = data
+		},
+		methods: {
+			async buy() {
+				this.$utils.wxUtils.subscribeToNews().then(async res => {
+					let orderRes = await this.$api.phoneBill.prepareOrder({
+						tmallNo: this.tmallNo,
+						rechargePhoneNo: this.rechargePhoneNo,
+						operators: this.current + 1,
+						goodsPictureUrl: this.icon,
+					})
+					let payRes = await wx.requestPayment(orderRes.data)
+					if (payRes.errMsg == 'requestPayment:ok') {
+						this.$utils.goPage(
+							`/pages/phoneBill/orderdes?outTradeNo=${orderRes.data.outTradeNo}`,
+							'reLaunch')
+					}
+				})
+			},
+			tmallNo_fieldChange(e) {
+				this.tmallNo = e.detail
+			},
+			rechargePhoneNo_fieldChange(e) {
+				this.rechargePhoneNo = e.detail
+			},
+			onClickIcon(msg) {
+				wx.showToast({
+					title: msg,
+					icon: 'none'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.top {
+		margin-top: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #FFFFFF;
+		padding: 23rpx;
+
+		.left-icon {
+			width: 87rpx;
+			height: 79rpx;
+			margin-right: 22rpx;
+		}
+
+		.tit {
+			white-space: nowrap;
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #0F0404;
+		}
+	}
+
+	.user-data {
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.commodity-selection {
+		margin-top: 20rpx;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+
+		.top-tit {
+			font-size: 26rpx;
+			font-weight: 400;
+			color: #666666;
+			line-height: 39rpx;
+			border-bottom: 1rpx solid #e8e8e8;
+			padding: 28rpx;
+		}
+
+		.selection-box {
+			margin-top: 30rpx;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			padding-left: 15rpx;
+
+			.selected {
+				border: 1rpx solid #ECBF7A !important;
+				background-color: #FDF3D7;
+			}
+
+			.commodity {
+				margin-bottom: 15rpx;
+				margin-right: 15rpx;
+				width: 230rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				border: 1rpx solid #E8E8E8;
+				box-sizing: border-box;
+				padding: 30rpx 20rpx;
+				border-radius: 6rpx;
+				position: relative;
+
+				.xuanzhong-icon {
+					position: absolute;
+					right: 0;
+					bottom: 0;
+				}
+
+				text {
+					&:nth-child(1) {
+						color: #999999;
+						font-size: 26rpx;
+					}
+
+					&:nth-child(2) {
+						color: #999999;
+						font-size: 26rpx;
+					}
+
+					&:nth-child(3) {
+						color: #E31818;
+						font-size: 40rpx;
+					}
+
+					&:nth-child(4) {
+						color: #999999;
+						font-size: 26rpx;
+						text-decoration: line-through;
+					}
+				}
+			}
+		}
+	}
+
+	.prompt {
+		margin-top: 20rpx;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+
+		.top-tit {
+			font-size: 26rpx;
+			font-weight: 400;
+			color: #666666;
+			line-height: 39rpx;
+			border-bottom: 1rpx solid #e8e8e8;
+			padding: 28rpx;
+		}
+
+		.dex-box {
+			padding: 28rpx;
+			display: flex;
+			flex-direction: column;
+			font-size: 26rpx;
+			font-weight: 400;
+			color: #666666;
+			line-height: 39rpx;
+		}
+	}
+
+	.buy-btn-box {
+		margin-top: 30rpx;
+		width: 600rpx;
+		height: 80rpx;
+		opacity: 0;
+	}
+
+	.buy-btn {
+		position: fixed;
+		bottom: 30rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 600rpx;
+		height: 80rpx;
+		background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
+		border-radius: 40rpx;
+		font-size: 30rpx;
+		font-weight: 400;
+		color: #FFFFFF;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

src/pages/phoneBill/orderdes.vue

@@ -0,0 +1,300 @@
+<template>
+	<view class="page">
+		<loadSke :loading='loading'>
+			<view class="remind-top">首页->我的->我的订单</view>
+			<view class="des-box">
+				<view>
+					<view v-if="true" class="code-box">
+						<image class="qrcode" :src="orderDes.goodsPictureUrl" mode="widthFix"></image>
+						<view class="code">
+							<text>充值号码</text>
+							<text>{{orderDes.rechargePhoneNo}}</text>
+						</view>
+					</view>
+				</view>
+				<view class="order-num">
+					<text>订单号：{{outTradeNo}}</text>
+					<text>{{orderDes.orderStatusDesc}}</text>
+					<text>天猫单号：{{orderDes.tmallNo}}</text>
+				</view>
+				<view class="des">
+					<text class="film-name">充值商品</text>
+					<view class="film-time">
+						<text>购买时间</text>
+						<text>{{orderDes.create_time}}</text>
+					</view>
+					<view class="film-address">
+						<text>充值号码</text>
+						<text>{{orderDes.rechargePhoneNo}}</text>
+					</view>
+					<view class="film-video">
+						<text>运营商型</text>
+						<text>{{orderDes.operators}}</text>
+					</view>
+					<view class="film-seat">
+						<text>购买价格</text>
+						<text>{{orderDes.total}}</text>
+					</view>
+				</view>
+			</view>
+		</loadSke>
+	</view>
+</template>
+
+<script>
+	export default {
+		data: () => ({
+			orderDes: {},
+			loading: true,
+			outTradeNo: null,
+			pollingTiemId: null
+		}),
+		onLoad: function(option) {
+			this.outTradeNo = option.outTradeNo
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			async init() {
+				let orderRes = await this.$api.order.getWxOrder(this.outTradeNo)
+				this.orderDes = orderRes.data
+				this.loading = false
+				if (this.orderDes.orderStatus == 1) {
+					this.polling()
+				}
+			},
+			polling() {
+				this.pollingTiemId = setInterval(async () => {
+					let orderRes = await this.$api.order.getWxOrder(this.outTradeNo)
+					this.orderDes = orderRes.data
+					if (this.orderDes.orderStatus != 1) {
+						clearInterval(this.pollingTiemId)
+					}
+				}, 30000)
+			}
+		},
+		beforeDestroy() {
+			clearInterval(this.pollingTiemId)
+		}
+	}
+</script>
+
+<style lang="scss">
+	.page {
+		padding-bottom: 20rpx;
+	}
+
+	.remind {
+		padding-top: 36rpx;
+		font-size: 26rpx;
+		font-weight: 400;
+		color: #0F0404;
+		text-align: center;
+	}
+
+	.remind-top {
+		margin-top: 36rpx;
+		font-size: 26rpx;
+		font-weight: 400;
+		color: #ff0000;
+		text-align: center;
+	}
+
+	.des-box {
+		width: 564rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+		margin: auto;
+		margin-top: 30rpx;
+
+		.code-box {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-bottom: 38rpx;
+
+			.code {
+				margin-top: 43rpx;
+
+				text {
+					font-size: 26rpx;
+					font-weight: 400;
+					color: #666666;
+					margin-right: 20rpx;
+
+					&:nth-child(2) {
+						color: #0F0404;
+					}
+				}
+			}
+
+			.qrcode {
+				margin-top: 43rpx;
+				width: 360rpx;
+				height: 360rpx;
+			}
+
+			.qrcode-loading {
+				margin-top: 43rpx;
+				width: 100%;
+			}
+		}
+
+		.order-num {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
+			padding: 34rpx 31rpx;
+			border-top: 1rpx dashed #D9D9D9;
+			border-bottom: 1rpx dashed #D9D9D9;
+			position: relative;
+
+			&::after {
+				content: '';
+				width: 24rpx;
+				height: 24rpx;
+				border-radius: 50%;
+				background-color: #F1F1F1;
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: translate(-50%, -50%);
+			}
+
+			&::before {
+				content: '';
+				width: 24rpx;
+				height: 24rpx;
+				border-radius: 50%;
+				background-color: #F1F1F1;
+				position: absolute;
+				top: 0;
+				right: 0;
+				transform: translate(50%, -50%);
+			}
+
+			text {
+				&:nth-child(1) {
+					margin-top: 60rpx;
+					word-break: break-all;
+					font-size: 22rpx;
+					font-weight: 400;
+					color: #666666;
+				}
+
+				&:nth-child(2) {
+					margin-top: 10rpx;
+					padding: 10rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background: #FFE5E5;
+					border-radius: 20rpx;
+					border-top-left-radius: 0;
+					border-bottom-left-radius: 0;
+					font-size: 20rpx;
+					font-weight: 400;
+					color: #E31818;
+					position: absolute;
+					left: 0;
+					top: 20rpx;
+				}
+
+				&:nth-child(3) {
+					margin-top: 10rpx;
+					word-break: break-all;
+					font-size: 22rpx;
+					font-weight: 400;
+					color: #666666;
+				}
+			}
+		}
+
+		.des {
+			padding: 45rpx 30rpx;
+			border-bottom: 1rpx dashed #D9D9D9;
+			display: flex;
+			flex-direction: column;
+
+			.film-name {
+				font-size: 30rpx;
+				font-weight: 400;
+				color: #0F0404;
+			}
+
+			text {
+				font-size: 26rpx;
+				font-weight: 400;
+				color: #666666;
+				margin-right: 20rpx;
+				white-space: nowrap;
+			}
+
+			.film-time {
+				text:nth-child(2) {
+					color: #999999;
+				}
+			}
+
+			.film-address {
+				display: flex;
+				justify-content: flex-start;
+				align-items: stretch;
+
+				text:nth-child(2) {
+					color: #999999;
+					white-space: pre-wrap;
+				}
+			}
+
+			.film-video {
+				display: flex;
+				justify-content: flex-start;
+				align-items: stretch;
+
+				text:nth-child(2) {
+					color: #999999;
+					white-space: pre-wrap;
+				}
+			}
+
+			.film-seat {
+				display: flex;
+				justify-content: flex-start;
+				align-items: stretch;
+				margin-top: 10rpx;
+
+				.seat-box {
+					display: flex;
+					flex-wrap: wrap;
+
+					text {
+						height: 40rpx;
+						padding: 4rpx 15rpx;
+						margin-bottom: 10rpx;
+						background: #EBEBEB;
+						border-radius: 4rpx;
+						color: #999999;
+					}
+				}
+			}
+		}
+
+		.price {
+			padding: 40rpx 30rpx;
+
+			text {
+				font-size: 26rpx;
+				font-weight: 400;
+				color: #666666;
+				margin-right: 20rpx;
+
+				&:nth-child(2) {
+					color: #E31818;
+				}
+			}
+		}
+	}
+</style>

src/pages/recharge/index.vue

@@ -1,70 +0,0 @@
-<template>
-	<view class="page">
-		<image src="../../static/imgs/banner.png" class="top-img" mode="widthFix"></image>
-		<swiper class="swiper-box" previous-margin='140rpx' next-margin='140rpx' indicator-dots>
-			<swiper-item class="swiper-item" v-for="(item,index) in 3" :key='index'>
-				<image class="swiper-img" src="../../static/imgs/shmr.png" mode="scaleToFill"></image>
-				<button class="swiper-btn" @click="$utils.goPage('/pages/recharge/placeorder')">立即充值</button>
-			</swiper-item>
-		</swiper>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-	.page {
-		width: 100vw;
-		height: 100vh;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.top-img {
-		width: 100vw;
-	}
-
-	.swiper-box {
-		margin-top: 50rpx;
-		width: 100vw;
-		height: 690rpx;
-		position: relative;
-		
-		.swiper-item{
-			display: flex;
-			align-items: center;
-			.swiper-img {
-				margin: auto;
-				width: 412rpx;
-				height: 690rpx;
-				border-radius: 30rpx;
-			}
-			
-			.swiper-btn {
-				position: absolute;
-				left: 50%;
-				transform: translateX(-50%);
-				bottom: 108rpx;
-				width: 211rpx;
-				height: 80rpx;
-				background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
-				border-radius: 40rpx;
-				font-size: 30rpx;
-				font-weight: 400;
-				color: #FFFFFF;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-		}
-	}
-</style>

src/pages/user/browserecord.vue

@@ -22,10 +22,6 @@
 </template>
 
 <script>
-	import {
-		getBrowseRecordInfoList,
-		BrowseRecordDel
-	} from '@/api/applist.js'
 	export default {
 		data() {
 			return {
@@ -47,7 +43,7 @@
 				return
 			}
 			this.pageNum++
-			getBrowseRecordInfoList({
+			this.$api.applist.getBrowseRecordInfoList({
 				pageNum: this.pageNum,
 				pageSize: this.pageSize
 			}).then(res => {
@@ -56,7 +52,7 @@
 		},
 		methods: {
 			initAppList() {
-				getBrowseRecordInfoList({
+				this.$api.applist.getBrowseRecordInfoList({
 					pageNum: this.pageNum,
 					pageSize: this.pageSize
 				}).then(res => {
@@ -68,7 +64,7 @@
 				})
 			},
 			delSc(index) {
-				BrowseRecordDel(this.applist[index].id).then(res => {
+				this.$api.applist.BrowseRecordDel(this.applist[index].id).then(res => {
 					if (res.code == 200) {
 						this.$set(this.applist[index], 'collectionStatus', '0')
 						this.$utils.Toast('取消收藏成功!');

src/pages/user/collectionList.vue

@@ -22,10 +22,6 @@
 </template>
 
 <script>
-	import {
-		collectionList,
-		delFavorites
-	} from '@/api/applist.js'
 	export default {
 		data() {
 			return {
@@ -47,7 +43,7 @@
 				return
 			}
 			this.pageNum++
-			collectionList({
+			this.$api.applist.collectionList({
 				pageNum: this.pageNum,
 				pageSize: this.pageSize
 			}).then(res => {
@@ -56,7 +52,7 @@
 		},
 		methods: {
 			initAppList() {
-				collectionList({
+				this.$api.applist.collectionList({
 					pageNum: this.pageNum,
 					pageSize: this.pageSize
 				}).then(res => {
@@ -68,7 +64,7 @@
 				})
 			},
 			delSc(index) {
-				delFavorites(this.applist[index].customerId).then(res => {
+				this.$api.applist.delFavorites(this.applist[index].customerId).then(res => {
 					if (res.code == 200) {
 						this.$set(this.applist[index], 'collectionStatus', '0')
 						this.$utils.Toast('取消收藏成功!');

src/pages/user/index.vue

@@ -0,0 +1,177 @@
+<template>
+	<scroll-view scroll-y class="content">
+		<view class="top">
+			<view class="avabox">
+				<van-image round class="img" width="200rpx" height="200rpx" :src="userData.headImage" />
+				<view class="avatitbox">
+					<text>{{ userData.nickName }}</text>
+					<text v-if="userData.gzptUserId">{{ studentInfo.logincode }}</text>
+					<view class="sync-btn" @tap="getUserProfile">点击同步用户头像昵称</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="serviceBox">
+			<view class="tit">
+				<text>我的订单</text>
+			</view>
+			<view class="btnBox">
+				<view class="item-box" :plain="true" @click="$utils.goPage('/pages/user/order?active=0')">
+					<m-icon type="qbdd" font-size='22px' />
+					<text class="text">全部订单</text>
+				</view>
+				<view class="item-box" :plain="true" @click="$utils.goPage('/pages/user/order?active=1')">
+					<m-icon type="dfh" font-size='22px' />
+					<text class="text">等待发货</text>
+				</view>
+				<view class="item-box" :plain="true" @click="$utils.goPage('/pages/user/order?active=2')">
+					<m-icon type="jywc" font-size='22px' />
+					<text class="text">交易完成</text>
+				</view>
+				<view class="item-box" :plain="true" @click="$utils.goPage('/pages/user/order?active=3')">
+					<m-icon type="tksh" font-size='22px' />
+					<text class="text">退款/售后</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="serviceBox">
+			<view class="tit">
+				<text>我的信息</text>
+			</view>
+			<van-cell title="我的设置" is-link @tap="$utils.goPage('/pages/user/set')">
+				<m-icon slot="icon" type="shezhi" color="#d81e06"/>
+			</van-cell>
+			<button class="server" open-type="feedback" :plain="true">
+				<van-cell title="意见反馈" is-link>
+					<m-icon slot="icon" type="yjfk" color="#d81e06"/>
+				</van-cell>
+			</button>
+			<button class="server" open-type="contact" :plain="true">
+				<van-cell title="联系客服" is-link>
+					<m-icon slot="icon" type="lxkf" color="#d81e06"/>
+				</van-cell>
+			</button>
+		</view>
+
+		<!-- <view class="ad-box serviceBox">
+			<ad unit-id="adunit-d8c1548cc9663765"></ad>
+		</view> -->
+		
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		computed: {
+			userData() {
+				return this.$store.state.user.userInfo;
+			},
+		},
+		mounted() {
+			this.$store.dispatch("GetInfo");
+		},
+		methods: {
+			async getUserProfile(e) {
+				let userInfo = await wx.getUserProfile({
+					desc: "业务需要",
+				});
+				let updateRes = await this.$api.user.updateUserInfo({
+					headImage: userInfo.userInfo.avatarUrl,
+					nickName: userInfo.userInfo.nickName,
+				});
+				if (updateRes.code == 200) {
+					this.$store.state.user.userInfo.headImage = userInfo.userInfo.avatarUrl;
+					this.$store.state.user.userInfo.nickName = userInfo.userInfo.nickName;
+				}
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		height: 100%;
+		background-image: url("https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E9%A1%B6%E9%83%A8%E8%83%8C%E6%99%AF3.png");
+		background-repeat: no-repeat;
+		background-size: 100% 90%;
+	}
+
+	.ad-box {
+		margin: 40rpx;
+		padding: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.top {
+		padding-top: 100rpx;
+
+		.avabox {
+			display: flex;
+			padding: 10%;
+
+			.img {
+				border-radius: 50%;
+			}
+
+			.sync-btn {
+				margin-top: 20rpx;
+				height: 40rpx;
+			}
+
+			.avatitbox {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				padding: 30rpx;
+				color: #ffffff;
+				height: 100rpx;
+			}
+		}
+	}
+
+	.serviceBox {
+		background-color: #fff;
+		margin: 30rpx;
+		border-radius: 10rpx;
+
+		.tit {
+			padding: 16rpx 26rpx;
+			border-bottom: 1rpx solid #e8e8e8;
+		}
+
+		.btnBox {
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+
+			.item-box {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				align-items: center;
+				padding: 20rpx;
+				border: none;
+
+				.text {
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 400;
+					color: #666666;
+				}
+			}
+		}
+
+		.server {
+			border: none;
+			background-color: none;
+			margin: 0;
+			padding: 0;
+			text-align: left;
+			display: flexbox;
+		}
+	}
+</style>

src/pages/user/order.vue

@@ -1,94 +1,112 @@
 <template>
 	<view>
-		<van-tabs :active="active" @change="onChange" animated sticky>
-			<van-tab title="近7日订单">
-				<loadSke :loading='orderLoading'>
-					<view class="order-item" v-for="(item,index) in orderList" :key='item' @click="$utils.goPage(`/pages/cinema/orderdes?outTradeNo=${item.outTradeNo}`)">
-						<image class="img" :src="item.goodsPictureUrl" mode="widthFix"></image>
-						<view class="des-box">
-							<text>订单名称：{{item.orderDataJson.cinemaData.filmName}}</text>
-							<text>订单日期：{{item.createTime}}</text>
-							<text> </text>
-							<text>订单价格：{{item.total/100}}</text>
-						</view>
-						<van-icon class='icon' name="arrow" />
-					</view>
-				</loadSke>
-			</van-tab>
-			<van-tab title="历史订单">
-				<loadSke :loading='orderLoading2'>
-					<view class="order-item ios-bottom" v-for="(item,index) in orderList2" :key='item' @click="$utils.goPage(`/pages/cinema/orderdes?outTradeNo=${item.outTradeNo}`)">
-						<image class="img" :src="item.goodsPictureUrl" mode="widthFix"></image>
-						<view class="des-box">
-							<text>订单名称：{{item.orderDataJson.cinemaData.filmName}}</text>
-							<text>订单日期：{{item.createTime}}</text>
-							<text> </text>
-							<text>订单价格：{{item.total/100}}</text>
-						</view>
-						<van-icon class='icon' name="arrow" />
-					</view>
-				</loadSke>
-			</van-tab>
-		</van-tabs>
+		<view class="tabs">
+			<view class="tab" :class="{selected:index==active}" @click="active=index" v-for="(item,index) in orderType"
+				:key='index'>
+				{{item}}
+			</view>
+		</view>
+		<loadSke :loading='orderLoading' :list="orderList">
+			<view class="order-item ios-bottom" v-for="(item,index) in orderList" :key='item.outTradeNo' @click="goOrderDes(item)">
+				<image class="img" :src="item.goodsPictureUrl" mode="aspectFit"></image>
+				<view class="des-box">
+					<text>订单名称：{{item.orderName}}</text>
+					<text>订单日期：{{item.createTime}}</text>
+					<text>订单状态：{{item.orderStatus}}</text>
+					<text>订单价格：{{item.total}}</text>
+				</view>
+				<m-icon class='icon' type="arrow-right"></m-icon>
+			</view>
+		</loadSke>
 	</view>
 </template>
 
 <script>
-	import {
-		getOrderList
-	} from '@/api/order.js'
-	import {
-		orderQuery
-	} from '@/api/cinema.js'
 	export default {
 		data: () => ({
-			active: 0,
+			active: null,
+			orderType: [
+				'全部订单',
+				'等待发货',
+				'交易完成',
+				'退款/售后'
+			],
 			orderLoading: true,
-			orderLoading2: true,
 			orderList: {},
-			orderList2: {}
 		}),
-		mounted() {
-			this.init()
-			this.init2()
-			orderQuery({
-				thirdOrderId: '12021053117040103901269463601171'
-			})
+		onLoad: function(option) {
+			this.active = option.active
+		},
+		watch: {
+			active() {
+				this.init()
+			}
 		},
 		methods: {
 			async init() {
-				let orderListRes = await getOrderList({
-					days: 7,
+				this.orderLoading = true
+				let orderListRes = await this.$api.order.getOrderList({
+					orderStatus: this.active == 0 ? null : this.active,
 					pageNum: 1,
 					pageSize: 10
 				})
-				orderListRes.rows.map(val => {
-					val.orderDataJson = JSON.parse(val.orderDataJson)
-					return val
-				})
 				this.orderList = orderListRes.rows
 				this.orderLoading = false
 			},
-			async init2() {
-				let orderListRes = await getOrderList({
-					pageNum: 1,
-					pageSize: 10
-				})
-				orderListRes.rows.map(val => {
-					val.orderDataJson = JSON.parse(val.orderDataJson)
-					return val
-				})
-				this.orderList2 = orderListRes.rows
-				this.orderLoading2 = false
+			goOrderDes(item) {
+				let pageMap = new Map([
+					['1', () => {
+						this.$utils.goPage(`/pages/cinema/orderdes?outTradeNo=${item.outTradeNo}`)
+					}],
+					['2', () => {
+						this.$utils.goPage(`/pages/fulu/orderdes?outTradeNo=${item.outTradeNo}`)
+					}],
+					['3', () => {
+						this.$utils.goPage(`/pages/phoneBill/orderdes?outTradeNo=${item.outTradeNo}`)
+					}],
+				])
+
+				pageMap.get(item.goodsType)()
 			}
 		}
 	}
 </script>
 
-<style lang="scss">
-	.ios-bottom{
+<style lang="scss" scoped>
+	.tabs {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		background-color: #FFFFFF;
+		padding: 0 20rpx;
+
+		.tab {
+			padding: 20rpx 0;
+		}
+
+		.selected {
+			position: relative;
+
+			&::after {
+				content: '';
+				width: 80rpx;
+				height: 6rpx;
+				background-color: red;
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				transform: translateX(-50%);
+			}
+		}
+	}
+
+	.ios-bottom {
 		padding-bottom: calc(10px + env(safe-area-inset-bottom)/2);
 	}
+
 	.order-item {
 		background-color: #FFFFFF;
 		margin-top: 10rpx;
@@ -104,7 +122,7 @@
 
 		.img {
 			width: 112rpx;
-			height: 156rpx;
+			height: 164rpx;
 			margin-right: 50rpx;
 		}
 

src/pages/user/set.vue

@@ -1,8 +1,8 @@
 <template>
 	<view class="">
-		<van-cell center title="我的昵称" :value="userData.nickName"/>
+		<van-cell center title="我的昵称" :value="userData.nickName" />
 		<van-cell title="我的头像" center>
-		  <image class="image-ava" slot="right-icon" :src="userData.headImage">
+			<image class="image-ava" slot="right-icon" :src="userData.headImage">
 		</van-cell>
 		<van-popup :show="idCardShow" round>
 			<view class="idCard">
@@ -27,11 +27,6 @@
 
 <script>
 	import md5 from 'crypto-js/md5'
-	import {
-		login,
-		getInfo,
-		bindUserCard
-	} from '@/api/login.js'
 	export default {
 		data() {
 			return {
@@ -80,18 +75,18 @@
 			submitBinding() {
 				console.log(this.areaCode, this.idCard, this.password)
 				this.loading = true
-				bindUserCard({
+				this.$api.user.bindUserCard({
 					city: this.areaCode,
 					logincode: this.idCard,
 					password: md5(this.password).toString()
 				}).then((res) => {
 					if (res.code == 200) {
-						this.$utils.Toast.success('绑定成功');
+						this.$utils.Toast('绑定成功');
 						this.idCardShow = false
 					} else if (res.code == 502) {
-						this.$utils.Toast.fail(res.msg);
+						this.$utils.Toast(res.msg);
 					} else {
-						this.$utils.Toast.fail('系统内部错误');
+						this.$utils.Toast('系统内部错误');
 					}
 					this.loading = false
 				})
@@ -110,7 +105,8 @@
 		justify-content: center;
 		align-items: center;
 	}
-	.image-ava{
+
+	.image-ava {
 		width: 100rpx;
 		height: 100rpx;
 		border-radius: 50%;