From 10d6c0331f5ae170589f8f713eb949ecf5d7a0d5 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 27 May 2022 17:55:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=93=81=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/modules/course.js             |   4 +
 apis/modules/order.js              |  32 ++---
 apis/request.js                    |   2 +-
 components/sl-filter/sl-filter.vue |   1 -
 pages.json                         |   8 ++
 pages/addCourse/addCourse.vue      |  55 ++++++--
 pages/addStaff/addStaff.vue        |   2 +-
 pages/editCourse/editCourse.vue    |  94 ++++++++-----
 pages/orderDetail/orderDetail.vue  | 141 ++++++++++++-------
 pages/orders/orders.vue            |   6 +-
 pages/products/products.vue        | 216 +++++++++++++++++++++++++++++
 static/{ => image}/qrcode.png      | Bin
 styles/common.scss                 |   6 +
 13 files changed, 451 insertions(+), 116 deletions(-)
 create mode 100644 pages/products/products.vue
 rename static/{ => image}/qrcode.png (100%)

diff --git a/apis/modules/course.js b/apis/modules/course.js
index db4097b..273137a 100644
--- a/apis/modules/course.js
+++ b/apis/modules/course.js
@@ -3,4 +3,8 @@ const { get, post } = request
 
 export const curriculumList = (data) => {
   return post('nakadai/nakadai/curriculum/curriculumList', data)
+}
+
+export const AppletsDataProductList = (data) => {
+  return post('nakadai/nakadai/dataProduct/AppletsDataProductList', data)
 }
\ No newline at end of file
diff --git a/apis/modules/order.js b/apis/modules/order.js
index 14567c9..78b6b3f 100644
--- a/apis/modules/order.js
+++ b/apis/modules/order.js
@@ -1,34 +1,22 @@
 import request from '@/apis/request.js'
 const { get, post } = request
 
-export const queryCustomer = (data) => {
-  return post('nakadai/nakadai/customer/queryCustomer', data)
+export const getOrderOtherTime = (data) => {
+  return post('nakadai/nakadai/orderOther/getOrderOtherTime', data)
 }
 
-export const queryCustomerDetails = (data) => {
-  return get('nakadai/nakadai/customer/queryCustomerDetails', data)
+export const add = (data) => {
+  return post('nakadai/nakadai/order/add', data)
 }
 
-export const querySchool = (data) => {
-  return get('nakadai/nakadai/school/querySchool', data)
+export const update = (data) => {
+  return post('nakadai/nakadai/order/update', data)
 }
 
-export const queryIndustryClass = (data) => {
-  return get('nakadai/nakadai/hrIndustryClass/queryIndustryClass', data)
+export const getDetail = (data) => {
+  return get('nakadai/nakadai/order/get', data)
 }
 
-export const queryIndustry = (data) => {
-  return get('nakadai/nakadai/hrIndustry/queryIndustry', data)
-}
-
-export const queryCustomerIsExists = (data) => {
-  return get('nakadai/nakadai/customer/queryCustomerIsExists', data)
-}
-
-export const addCustomer = (data) => {
-  return post('nakadai/nakadai/customer/addCustomer', data)
-}
-
-export const updateCustomer = (data) => {
-  return post('nakadai/nakadai/customer/updateCustomer', data)
+export const renew = (data) => {
+  return post('nakadai/nakadai/orderOther/renew', data)
 }
\ No newline at end of file
diff --git a/apis/request.js b/apis/request.js
index 40ecc86..368e32d 100644
--- a/apis/request.js
+++ b/apis/request.js
@@ -12,7 +12,7 @@ const request = options => {
 		})
 	}
 	const header = Object.assign({}, config.headers, {
-		token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNjUzNTMwODYyLCJleHAiOjE2NTM1NzQwNjIsImFjY291bnRJZCI6IjEifQ.ZFU5-NtjHBxKLcKUo6OuIrM8Na9HYQB6SqQSd4ZkXbo'
+		token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNjUzNjE3NjI4LCJleHAiOjE2NTM2NjA4MjgsImFjY291bnRJZCI6IjEifQ.AmvmMxWkRD4f8J4oWHoRvm1CCrzBm7TH2QDG4E175_s'
 	})
 	return new Promise((resolve, reject)=>{
 		uni.request({
diff --git a/components/sl-filter/sl-filter.vue b/components/sl-filter/sl-filter.vue
index c0fcce9..f44ac47 100644
--- a/components/sl-filter/sl-filter.vue
+++ b/components/sl-filter/sl-filter.vue
@@ -263,7 +263,6 @@
 	@import 'iconfont/iconfont.css';
 
 	.select-tab {
-		border-bottom: #F7F7F7 1px solid;
 		background-color: #FFFFFF;
 		display: flex;
 		width: 100%;
diff --git a/pages.json b/pages.json
index 779b300..d16266b 100644
--- a/pages.json
+++ b/pages.json
@@ -7,6 +7,14 @@
                 "navigationBarTitleText": "订单列表",
                 "enablePullDownRefresh": false
             }
+        },
+        {
+            "path" : "pages/products/products",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "产品",
+                "enablePullDownRefresh": true
+            }
         },
 		{
             "path" : "pages/clients/clients",
diff --git a/pages/addCourse/addCourse.vue b/pages/addCourse/addCourse.vue
index 95d2966..953df50 100644
--- a/pages/addCourse/addCourse.vue
+++ b/pages/addCourse/addCourse.vue
@@ -10,7 +10,7 @@
 		
 		<ul class="list">
 			<li v-for="item in list">
-				<uni-data-checkbox class="check" multiple v-model="item.check" :localdata="checkData"></uni-data-checkbox>
+				<uni-data-checkbox class="check" multiple v-model="item.check" :localdata="item.checkData"></uni-data-checkbox>
 				<image class="icon" src="../../static/image/course1.png" mode="widthFix"></image>
 				{{ item.curriculumName }}
 			</li>
@@ -25,10 +25,12 @@
 
 <script>
 	import { curriculumList } from '@/apis/modules/course.js'
+	import { renew } from '@/apis/modules/order.js'
 	export default {
 		data() {
 			return {
 				orderType: 0,
+				customerId: '',
 				curTab: '',
 				tabs: [
 					{
@@ -65,6 +67,7 @@
 					text: '全部',
 					value: 1
 				}],
+				courses: uni.getStorageSync('courses') || []
 			}
 		},
 		watch: {
@@ -84,10 +87,13 @@
 		},
 		onShow() {
 			const pages = getCurrentPages()
-			this.orderType = pages[pages.length - 1].options.orderType
+			const { options } = pages[pages.length - 1]
+			this.orderType = options.orderType
+			this.customerId = options.customerId
 			this.getList()
 		},
 		methods: {
+			// 获取课程列表
 			getList() {
 				curriculumList({
 					curriculumName: this.keyword,
@@ -96,8 +102,20 @@
 					pageSize: 10000
 				}).then(({ page }) => {
 					const { records } = page
+					const list = this.courses
+					// 添加选择框字段
 					records.map(e => {
+						const checkData = {
+							text: '',
+							value: 1
+						}
 						e.check = []
+						// 筛选已经勾选的产品
+						if (list.find(n => n.dataOrCourseId == e.cid)) {
+							checkData.disable = true // 已经选择了的则禁止选择
+							e.check = [1]
+						}
+						e.checkData = [checkData]
 					})
 					this.list = records
 				}).catch(e => {})
@@ -140,14 +158,35 @@
 			submit() {
 				const list = this.list.filter(e => e.check.length) // 筛选出选中了的产品
 				if (list.length) {
-					const result = []
+					const result = this.courses
+					const courseIds = []
+					const dataIds = []
+					const { customerId } = this
 					list.map(e => {
-						result.push(this.createParam(e))
-					})
-					uni.setStorageSync('courses', result) // 把选中的产品添加至缓存
-					uni.redirectTo({
-						url: `../editCourse/editCourse`
+						// e.authority ? courseIds.push(e.cid) : dataIds.push(e.cid)
+						courseIds.push(e.cid)
+						result.find(n => n.dataOrCourseId == e.cid) || result.push(this.createParam(e))
 					})
+					// 判断是否为客户已有的课程
+					renew({
+						authority: 1,
+						customerId,
+						productId: courseIds
+					}).then(({ orderOthers }) => {
+						result.map(e => {
+							// const item = orderOthers.map(n => dataOrCourseId == e.dataOrCourseId && n.authority && e.authority)
+							const item = orderOthers.find(n => n.dataOrCourseId == e.dataOrCourseId)
+							if (item) {
+								let date = new Date(item.endTime)
+								date = new Date(date.setDate(date.getDate() + 1))
+								e.startTime = this.$util.formatDate(date, 'yyyy-MM-dd')
+							}
+						})
+						uni.setStorageSync('courses', result) // 把选中的产品添加至缓存
+						uni.redirectTo({
+							url: `../editCourse/editCourse?customerId=${this.customerId}`
+						})
+					}).catch(e => {})
 				} else {
 					this.$util.errMsg('请选择产品！')
 				}
diff --git a/pages/addStaff/addStaff.vue b/pages/addStaff/addStaff.vue
index 3954068..e63c6c3 100644
--- a/pages/addStaff/addStaff.vue
+++ b/pages/addStaff/addStaff.vue
@@ -5,7 +5,7 @@
 				<uni-list-item thumb-size="sm" showArrow title="二维码邀请" clickable>
 					<template v-slot:header>
 						<view class="slot-box">
-							<image class="icon" src="../../static/qrcode2.png" mode="widthFix"></image>
+							<image class="icon" src="../../static/image/qrcode.png" mode="widthFix"></image>
 						</view>
 					</template>
 					<template v-slot:body>
diff --git a/pages/editCourse/editCourse.vue b/pages/editCourse/editCourse.vue
index 986197a..df210e2 100644
--- a/pages/editCourse/editCourse.vue
+++ b/pages/editCourse/editCourse.vue
@@ -16,9 +16,9 @@
 						<view class="name">产品类型</view>
 						<view class="val">{{ item.provinceName }}</view>
 					</view>
-					<view class="line">
+					<view class="line req">
 						<view class="name">使用期限</view>
-						<input type="text" v-model="item.periodOfUse" placeholder="请输入" @change="calcDate(item)">
+						<input type="text" v-model="item.periodOfUse" placeholder="请输入" @change="calcDate(item, !item.authority)">
 					</view>
 					<view class="line">
 						<view class="name">使用期限单位</view>
@@ -26,7 +26,7 @@
 					</view>
 					<view class="line req">
 						<view class="name">起止日期</view>
-						<uni-datetime-picker type="date" v-model="item.startTime" :border="false">
+						<uni-datetime-picker type="date" v-model="item.startTime" :border="false" @change="calcDate(item)">
 							<view :class="['ph', {val: item.startTime}]">
 								{{ item.endTime ? item.startTime + ' - ' + item.endTime : item.startTime}}
 							</view>
@@ -51,7 +51,7 @@
 					</view>
 					<view class="line">
 						<view class="name">平台服务费</view>
-						<view class="val">元</view>
+						<view class="val">{{ item.serviceFee }}元</view>
 					</view>
 					<view class="line req">
 						<view class="name">成交价</view>
@@ -70,9 +70,11 @@
 </template>
 
 <script>
+	import { getOrderOtherTime } from '@/apis/modules/order.js'
 	export default {
 		data() {
 			return {
+				customerId: '',
 				units: [{
 					text: '日',
 					value: 0
@@ -83,11 +85,15 @@
 					text: '年',
 					value: 2
 				}],
-				courses: uni.getStorageSync('courses') // 上一页缓存的产品
+				courses: uni.getStorageSync('courses'), // 上一页缓存的产品
+				orderRepeat: [],
+				repeatMsg: ''
 			}
 		},
-		onLoad(option) {
-			
+		onShow() {
+			const pages = getCurrentPages()
+			const { options } = pages[pages.length - 1]
+			this.customerId = options.customerId
 		},
 		methods: {
 			// 删除课程
@@ -102,7 +108,7 @@
 				})
 			},
 			// 使用期限转换以及计算剩余天数
-			calcDate(row) {
+			calcDate(row, fromData) {
 				const { periodOfUse, options } = row
 				let optionsData = 0
 				if (periodOfUse) {
@@ -133,27 +139,27 @@
 				}
 				this.dealSettlePrice(row)
 				// 只有改变了起止日期才需要调接口查询订单，该接口作用是把开始时间传过去，会返回一个提示或者时间，如果是时间，则把时间+1天，如果是提示，则无法保存
-				// if (isDate) {
-				// 	const cId = row.dataOrCourseId
-				// 	const date = new Date(row.startTime)
-				// 	const orderRepeat = this.orderRepeat
-				// 	this.$post(this.api.getOrderOtherTime, {
-				// 		customerId: this.form.customerId,
-				// 		id: row.dataOrCourseId,
-				// 		startTime: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
-				// 		endTime: row.endTime
-				// 	}).then(res => {
-				// 		orderRepeat.includes(cId) && orderRepeat.splice(orderRepeat.findIndex(e => e === cId), 1)
-				// 		if (res.endTime) {
-				// 			let time = new Date(res.endTime)
-				// 			time = new Date(time.setDate(time.getDate() + 1))
-				// 			row.startTime = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
-				// 		}
-				// 	}).catch(res => {
-				// 		this.repeatMsg = res.message
-				// 		orderRepeat.includes(cId) || orderRepeat.push(cId)
-				// 	})
-				// }
+				if (!fromData) {
+					const cId = row.dataOrCourseId
+					const date = new Date(row.startTime)
+					const orderRepeat = this.orderRepeat
+					getOrderOtherTime({
+						customerId: this.customerId,
+						id: cId,
+						startTime: this.$util.formatDate(date, 'yyyy-MM-dd'),
+						endTime: row.endTime
+					}).then(res => {
+						orderRepeat.includes(cId) && orderRepeat.splice(orderRepeat.findIndex(e => e === cId), 1)
+						if (res.endTime) {
+							let time = new Date(res.endTime)
+							time = new Date(time.setDate(time.getDate() + 1))
+							row.startTime = this.$util.formatDate(time, 'yyyy-MM-dd')
+						}
+					}).catch(res => {
+						this.repeatMsg = res.message
+						orderRepeat.includes(cId) || orderRepeat.push(cId)
+					})
+				}
 				// 折扣率
 				this.calcDiscount(row)
 			},
@@ -171,15 +177,15 @@
 							priceUnit / 12 * useUnit :
 							priceUnit * useUnit) * (row.authority ?
 								1 :
-								row.accountNum)).toFixed(2)
+								row.accountNum)).toFixed((2))
 				} else {
 					// 比例分成。计算规则：成交价*商务分成比例
-					sPrice = row.finalPrice * row.businessProportion / 100
+					sPrice = (row.finalPrice * row.businessProportion / 100).toFixed((2))
 				}
 				row.settlementPrice = this.$util.handleNaN(sPrice)
 				// 平台服务费（结算价*10%）
 				if (row.settlementPrice) {
-					// row.
+					row.serviceFee = (row.settlementPrice * 0.1).toFixed(2)
 				}
 			},
 			// 计算折扣率
@@ -215,6 +221,30 @@
 			},
 			// 确定
 			submit() {
+				const list = this.courses
+				let msg = ''
+				// 必填校验
+				for (const i in list) {
+					const e = list[i]
+					if (e.periodOfUse === '') {
+						msg = '请输入使用期限！'
+						break
+					}
+					if (!e.startTime) {
+						msg = '请选择起止日期！'
+						break
+					}
+					if (e.accountNum === '') {
+						// msg = '请输入数量！'
+						// break
+					}
+					if (e.finalPrice === '') {
+						msg = '请输入成交价！'
+						break
+					}
+				}
+				if (msg) return this.$util.errMsg(msg)
+				if (this.orderRepeat.length) return this.$util.errMsg(this.repeatMsg) // 有重复订单不能提交
 				uni.setStorageSync('courses', this.courses)
 				uni.navigateBack()
 			},
diff --git a/pages/orderDetail/orderDetail.vue b/pages/orderDetail/orderDetail.vue
index fd03c96..b977e44 100644
--- a/pages/orderDetail/orderDetail.vue
+++ b/pages/orderDetail/orderDetail.vue
@@ -83,7 +83,7 @@
 						</view>
 						<view class="line">
 							<view class="label">平台服务费</view>
-							<view class="val">2123元</view>
+							<view class="val">{{ item.serviceFee }}元</view>
 						</view>
 						<view class="line done">
 							<view class="val">成交价格</view>
@@ -95,7 +95,7 @@
 		</view>
 		
 		<view class="bottom">
-			<view class="add-btn" @click="toAdd">
+			<view v-if="!orderId" class="add-btn" @click="toAdd">
 				<uni-icons class="icon" type="plus" color="#007FFF"></uni-icons>
 				添加产品
 			</view>
@@ -104,20 +104,20 @@
 				<view class="text">
 					<view class="total">
 						已选
-						<text class="num">10</text>
+						<text class="num">{{ courses.length }}</text>
 						个产品&emsp;
 						总成交价合计
-						<text class="num">2125523</text>
+						<text class="num">{{ form.orderAmount }}</text>
 						元
 					</view>
 					<view class="info">
 						总采购成本:
-						<text class="num num1">341232</text>
+						<text class="num num1">{{ purchase }}</text>元
 						总产品利润:
-						<text class="num">564123</text>
+						<text class="num">{{ profit }}</text>元
 					</view>
 				</view>
-				<view class="btn">提交</view>
+				<view class="btn" @click="submit">提交</view>
 			</view>
 		</view>
 		
@@ -135,6 +135,7 @@
 
 <script>
 	import { queryCustomer, queryCustomerDetails } from '@/apis/modules/client.js'
+	import { add, update, getDetail } from '@/apis/modules/order.js'
 	export default {
 		data() {
 			return {
@@ -142,10 +143,10 @@
 				orderId: '',
 				orderTypes: [{
 					text: '正式',
-					value: 0
+					value: 1
 				}, {
 					text: '试用',
-					value: 1
+					value: 2
 				}],
 				form: {
 					// orderNumber: '', // 编号
@@ -162,6 +163,16 @@
 					businessManager: ''
 				},
 				courses: [], // 缓存的产品列表
+				purchase: 0,
+				profit: 0,
+				contract: { // 合同信息
+					contractName: '',   // 合同名称
+					contractFile: '',  // 合同文件
+					contractMoney: '', // 合同金额
+					contractNumber: '',// 合同编号
+					startTime: '',     // 期限-头
+					endTime: ''        // 期限-尾
+				},
 				
 				customerVisible: false,
 				keyword: '',
@@ -172,14 +183,19 @@
 		},
 		onShow() {
 			const pages = getCurrentPages()
-			this.orderId = pages[pages.length - 1].options.orderId
-			this.isDetail = !!pages[pages.length - 1].options.show
+			const { options } = pages[pages.length - 1]
+			this.orderId = options.orderId
+			this.isDetail = !!options.show
 			const store = uni.getStorageSync('courses')
 			if (this.orderId) {
 				this.getInfo()
 			} else if (store) {
+				// 新增取缓存，取了删除
 				this.courses = store
-				uni.removeStorageSync('courses')
+				try {
+					uni.removeStorageSync('courses')
+				} catch (e) {}
+				this.calcTotal()
 			}
 			// 非详情才需要查询客户
 			if (!this.isDetail) {
@@ -197,10 +213,14 @@
 		methods: {
 			// 获取详情
 			getInfo() {
-				queryCustomerDetails({
-					orderId: this.orderId
-				}).then(({ result }) => {
-					
+				getDetail({
+					// orderId: this.orderId
+					orderId: 121
+				}).then(({ orderDetails }) => {
+					const order = orderDetails
+					this.contract = order.contractInformation
+					this.form = order.order
+					this.courses = order.orderOther
 				}).catch(e => {})
 			},
 			// 获取客户列表
@@ -247,7 +267,11 @@
 			},
 			// 跳转
 			toAdd() {
-				this.$util.to(`../addCourse/addCourse?orderType=${this.form.orderType}`)
+				uni.setStorageSync('courses', this.courses)
+				const { customerId, orderType } = this.form
+				customerId ?
+					this.$util.to(`../addCourse/addCourse?orderType=${orderType}&customerId=${customerId}`) :
+					this.$util.errMsg('请先选择客户！')
 			},
 			// 删除课程
 			delCourse(i) {
@@ -261,44 +285,59 @@
 				})
 			},
 			// 计算订单总额
-			calcTotal(row) {
-				this.dealSettlePrice(row)
+			calcTotal() {
 				let total = 0
-				const list = [...this.coursePermissions, ...this.dataPlatformPermissions]
-				list.map(e => total += +e.finalPrice)
-				this.form.orderAmount = total * 10000
+				const list = this.courses
+				let purchase = 0 // 总采购成本
+				let profit = 0 // 总利润
+				/**
+				 * 1）总采购成本+总产品利润=总成交价格
+
+					（2）单个产品采购成本 =结算价+平台服务费
+
+					（3）平台服务费=结算价*10%
+
+					（4）单个产品的利润=成交价-采购成本
+
+					总成本和总利润为单个产品的采购成本价和利润的和
+				 */
+				list.map(e => {
+					const curPurchase = +e.settlementPrice + +e.serviceFee
+					purchase += curPurchase
+					profit += +e.finalPrice - curPurchase
+				})
+				this.purchase = Math.round(purchase)
+				this.profit = Math.round(profit)
+				this.form.orderAmount = +this.purchase + +this.profit
 			},
 			// 提交
 			submit() {
-				const refs = this.$refs
-				const { form } = this
-				// 有大量数据的情况下，input输入用v-model会有bug，所以给每个input加ref来手动取值赋值
-				form.name = refs.nameInput.val
-				form.account = refs.accountInput.val
-				form.position = refs.positionInput.val
-				form.phone = refs.phoneInput.val
-				form.email = refs.emailInput.val
-				this.$nextTick(() => {
-					this.$refs.form.validate().then(res => {
-						if (this.nameRepeat) return this.$util.errMsg('客户已存在！')
-						if (this.customerId) {
-							updateCustomer(form).then(res => {
-								this.$util.sucMsg('编辑成功')
-								setTimeout(() => {
-									this.$util.to('../clients/clients')
-								}, 1500)
-							}).catch(res => {})
-						} else {
-							addCustomer(form).then(res => {
-								this.$util.sucMsg('添加成功')
-								setTimeout(() => {
-									uni.navigateBack()
-								}, 1500)
-							}).catch(res => {})
-						}
-					}).catch(err => {})
+				const { form, courses } = this
+				if (!courses.length) return this.$util.errMsg('请选择课程权限或数据权限后再确认订单！')
+				courses.map(e => {
+					e.startTime = this.$util.formatDate(new Date(e.startTime), 'yyyy-MM-dd')
 				})
-			},
+				const data = {
+					contractInformation: this.contract, // 合同信息
+					order: this.form, // 订单基本数据
+					orderOther: courses // 产品列表
+				}
+				if (this.orderId) {
+					update(data).then(res => {
+						this.$util.sucMsg('编辑成功')
+						setTimeout(() => {
+							this.$util.to('../orders/orders')
+						}, 1500)
+					}).catch(res => {})
+				} else {
+					add(data).then(res => {
+						this.$util.sucMsg('添加成功')
+						setTimeout(() => {
+							this.$util.to('../orders/orders')
+						}, 1500)
+					}).catch(res => {})
+				}
+			}
 		}
 	}
 </script>
@@ -373,6 +412,7 @@
 .bottom {
 	position: fixed;
 	bottom: 0;
+	width: 100%;
 }
 /deep/.add-btn {
 	display: flex;
@@ -395,6 +435,7 @@
 .product {
 	display: flex;
 	justify-content: flex-end;
+	align-items: center;
 	padding: 24rpx;
 	margin-top: 40rpx;
 	background-color: #fff;
diff --git a/pages/orders/orders.vue b/pages/orders/orders.vue
index 2ffdd5d..1192dec 100644
--- a/pages/orders/orders.vue
+++ b/pages/orders/orders.vue
@@ -130,7 +130,11 @@
 				this.getList()
 			}
 		},
-		onLoad() {
+		onShow() {
+			// 清除产品缓存
+			try {
+				uni.removeStorageSync('courses')
+			} catch (e) {}
 			// this.getList()
 		},
 		methods: {
diff --git a/pages/products/products.vue b/pages/products/products.vue
new file mode 100644
index 0000000..3e2bf99
--- /dev/null
+++ b/pages/products/products.vue
@@ -0,0 +1,216 @@
+<template>
+	<view>
+		<uni-card :is-shadow="false" :border="false" padding="0" is-full>
+			<view class="filter">
+				<uni-search-bar class="search" radius="5" placeholder="请输入产品名称" v-model="keyword" clearButton="auto" cancelButton="none" />
+				<sl-filter class="sl-filter" :independence="true" :menuList="menuList" @result="result"></sl-filter>
+			</view>
+		</uni-card>
+		
+		<ul class="tab">
+			<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
+		</ul>
+		
+		<ul class="list">
+			<li v-for="item in list">
+				<view class="pro-name">
+					<image class="icon" src="../../static/image/course1.png" mode="widthFix"></image>
+					{{ item.productName }}
+				</view>
+				<view class="info">
+					<view class="line">
+						<text class="name">产品简介：</text>
+						<text class="val">{{ item.briefIntroduction }}</text>
+					</view>
+					<view class="line">
+						<text class="name">产品类型：</text>
+						<text class="val">{{ tabs.find(e => e.id === item.productType).name }}</text>
+					</view>
+					<view class="line">
+						<text class="name">市场单价：</text>
+						<text class="val">{{ item.marketPrice }}元/年</text>
+					</view>
+					<view class="line">
+						<text class="name">结算方式：</text>
+						<text class="val">{{ item.settlementMethod ? '比例分成' : '结算单价' }}</text>
+					</view>
+					<view class="line">
+						<text class="name">供应厂商：</text>
+						<text class="val">{{ item.supplier }}</text>
+					</view>
+				</view>
+			</li>
+		</ul>
+		<uni-load-more :status="status" />
+	</view>
+</template>
+
+<script>
+	import { AppletsDataProductList } from '@/apis/modules/course.js'
+	import slFilter from '@/components/sl-filter/sl-filter.vue'
+	export default {
+		data() {
+			return {
+				menuList: [
+				    {
+				        'title': '排序',
+				        'detailTitle': '请选择排序（按上架时间）',
+				        'key': 'sort',
+				        'isSort': true,
+				        'isMutiple': false,
+				        'detailList': [
+				            {
+				                'title': '顺序',
+				                'value': 'asc'
+				            },
+				            {
+				                'title': '倒序',
+				                'value': 'desc'
+				            }
+				        ]
+				    }
+				],
+				curTab: '',
+				tabs: [
+					{
+						name: '全部',
+						id: ''
+					},
+					{
+						name: '实训课程',
+						id: 1
+					},
+					{
+						name: '理论课程',
+						id: 0
+					},
+					{
+						name: '数据产品',
+						id: 2
+					}
+				],
+				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
+				status: 'more', // 上拉加载状态 more|loading|noMore
+				searchTimer: null,
+				sort: '',
+				keyword: '',
+				list: [],
+				page: 1,
+				pageSize: 10
+			}
+		},
+		components: {
+			slFilter
+		},
+		watch: {
+			keyword () {
+				clearTimeout(this.searchTimer)
+				this.searchTimer = setTimeout(() => {
+					this.initList()
+				}, 500)
+			}
+		},
+		// 下拉刷新
+		onPullDownRefresh() {
+			this.initList()
+			setTimeout(() => {
+				uni.stopPullDownRefresh()
+			}, 1500)
+		},
+		// 上拉加载
+		onReachBottom() {
+			if (this.reachBottom >= 0) {
+				this.reachBottom = 1
+				this.status = 'loading'
+				this.getList()
+			}
+		},
+		onShow() {
+			this.initList()
+		},
+		methods: {
+			getList() {
+				AppletsDataProductList({
+					sort: this.sort,
+					keywords: this.keyword,
+					productType: this.curTab,
+					pageNum: this.page,
+					pageSize: this.pageSize
+				}).then(({ data }) => {
+					// 未加载完所有数据，并且不是筛选，则拼接list，否则直接赋值
+					this.list = this.reachBottom > 0 ? [...this.list, ...data.records] : data.records
+					this.page++ // 每次获取了数据后page+1
+					const noMore = this.list.length === data.total // 是否加载完所有数据
+					this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
+					this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
+				}).catch(e => {})
+			},
+			initList() {
+				this.page = 1
+				this.reachBottom = 0
+				this.getList()
+			},
+			// 筛选确定回调
+			result(val) {
+				this.sort = val.sort
+				this.initList()
+			},
+			// tab切换
+			tabChange(tab) {
+				this.curTab = tab.id
+				this.initList()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.filter {
+	display: flex;
+	align-items: center;
+	.search {
+		flex: 1;
+	}
+	.sl-filter {
+		width: 30%;
+		margin-left: 10%;
+	}
+}
+.list {
+	li {
+		padding: 0 24rpx;
+		margin: 16rpx 24rpx;
+		background-color: #fff;
+		border-radius: 16rpx;
+	}
+	.pro-name {
+		display: flex;
+		align-items: center;
+		padding: 18rpx 0;
+		font-size: 30rpx;
+		color: #333;
+		border-bottom: 1px solid #E6E8ED;
+		.icon {
+			width: 52rpx;
+			margin-right: 20rpx;
+		}
+	}
+	.info {
+		padding: 12rpx 0;
+	}
+	.line {
+		display: flex;
+		padding: 12rpx 0;
+	}
+	.name {
+		margin-right: 10rpx;
+		font-size: 28rpx;
+		color: #999;
+	}
+	.val {
+		max-width: 70%;
+		font-size: 28rpx;
+		color: #333;
+	}
+}
+</style>
diff --git a/static/qrcode.png b/static/image/qrcode.png
similarity index 100%
rename from static/qrcode.png
rename to static/image/qrcode.png
diff --git a/styles/common.scss b/styles/common.scss
index 6cade3c..15289f7 100644
--- a/styles/common.scss
+++ b/styles/common.scss
@@ -4,6 +4,12 @@ button[type=primary] {
 page {
 	height: 100%;
 }
+ul {
+	padding-left: 0;
+	li {
+		list-style: none;
+	}
+}
 .block {
 	padding: 0 24rpx;
 	margin: 20rpx 24rpx;