Skip to content

S
study
Commit b83a619b authored by linwenqing's avatar linwenqing
Browse files
Options

Merge branch 'dev-v1.0.0' of https://git.banshouhui.com/wuzhenzhe/study into dev-v1.0.0

parents 0963856c 61dad72b
Show whitespace changes
Inline Side-by-side
Showing with 358 additions and 438 deletions
src/App.vue
View file @ b83a619b
...@@ -4,6 +4,7 @@ export default { ...@@ -4,6 +4,7 @@ export default {
globalData: { globalData: {
// 开发环境 // 开发环境
uniEnv: process.uniEnv, uniEnv: process.uniEnv,
questionList: []
}, },
onLaunch: function() { onLaunch: function() {
// 版本更新 // 版本更新
......
src/components/answer-sheet/index.vue
View file @ b83a619b
...@@ -33,7 +33,8 @@ export default { ...@@ -33,7 +33,8 @@ export default {
} }
}, },
watch: { watch: {
answerList(newValue, oldValue) { answerList: {
handler:function (newValue, oldValue) {
if (newValue.length > 0) { if (newValue.length > 0) {
this.lists = newValue.map((v) => { this.lists = newValue.map((v) => {
v.checked = false v.checked = false
...@@ -41,6 +42,8 @@ export default { ...@@ -41,6 +42,8 @@ export default {
}) })
} }
}, },
immediate:true
}
}, },
created() { created() {
......
src/components/page-swiper/index.vue deleted 100644 → 0
View file @ 0963856c
<template>
<view class="pageSwiperBox">
<view
class="pageSwiper"
:style="{
width: swiperWidth + 'px',
transform: 'translateX(' + (nowX + transX) + 'px)',
transition: !dragging ? duration + 'ms' : 'none',
}"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
>
<block v-if="swiperType == 'lite'">
<view
class="pageSwiperItem"
:style="{ width: screenWidth + 'px', height: i != 1 ? 'auto' : '' }"
v-for="(item, i) in 3"
:key="i"
v-show="!waitShow"
>
<slot v-if="i == 1"></slot>
<view
class="pyh-pageSwiperMask"
v-show="i != 1"
@touchstart.stop="returnFalse"
@touchmove.stop.prevent="returnFalse"
@touchend.stop="returnFalse"
>
</view>
</view>
</block>
<block v-else-if="swiperType == 'static'">
<slot></slot>
</block>
</view>
</view>
</template>
<script>
export default {
name: 'pageSwiper',
props: {
swiperType: {
type: String,
default: 'lite',
},
dataLength: {
type: Number,
default: 1,
},
initIndex: {
type: Number,
default: 0,
},
duration: {
type: Number,
default: 200,
},
height: {
type: String,
default: '',
},
},
data() {
return {
swiperWidth: 3 * 375,
screenWidth: 375,
index: 0,
current: 1,
nowX: 0,
transX: 0,
dragging: true,
canMove: true,
showLoading: true,
waitShow: false,
pageTop: 0,
}
},
watch: {
dataLength(newValue, oldValue) {
if (newValue <= 1) this.canMove = false
},
},
created() {
this.index = this.initIndex
uni.getSystemInfo({
success: (res) => {
this.screenWidth = res.windowWidth
if (this.swiperType == 'lite') {
this.swiperWidth = 3 * res.windowWidth
this.nowX = -1 * this.current * this.screenWidth
} else if (this.swiperType == 'static') {
this.swiperWidth = this.dataLength * res.windowWidth
this.current = this.index
this.nowX = -1 * this.index * this.screenWidth
}
this.dragging = false
if (!this.height) {
var sQ = uni.createSelectorQuery().in(this)
var getTop = setInterval(() => {
sQ.select('.pageSwiperBox')
.boundingClientRect((data) => {
if (data) {
clearInterval(getTop)
this.pageTop = data.top
}
})
.exec()
}, 100)
}
},
})
},
methods: {
returnFalse() {},
swiperTap() {
this.$emit('swiperTap', this.current)
},
swiperTo(index) {
this.dragging = false
this.index = index
if (this.swiperType == 'lite') {
this.$emit('swiperChange', index)
} else if (this.swiperType == 'static') {
this.current = this.index
this.nowX = -1 * this.index * this.screenWidth
this.$emit('swiperChange', index)
}
if (!this.height) {
uni.pageScrollTo({
scrollTop: this.pageTop,
duration: 0,
})
}
},
touchStart(e) {
if (!this.canMove) return false
this.touchStartObj = e.mp.touches[0]
this.moveObj = null
},
touchMove(e) {
if (!this.canMove) return false
var moveObj = e.mp.touches[0]
if (!this.moveObj) {
this.moveObj = moveObj
if (Math.abs(this.moveObj.clientY - this.touchStartObj.clientY) <= 5) {
this.dragging = true
} else {
this.dragging = false
return false
}
}
if (!this.dragging) return false
var last = this.dataLength - 1
if (this.index == 0 && moveObj.clientX - this.touchStartObj.clientX > 0) {
this.dragging = false
return false
} else if (
this.index == last &&
moveObj.clientX - this.touchStartObj.clientX < 0
) {
this.dragging = false
return false
}
this.transX = parseInt(moveObj.clientX - this.touchStartObj.clientX)
if (moveObj.clientX < 0 || moveObj.clientX > this.screenWidth) {
this.touchEnd()
}
},
touchEnd() {
if (
Math.abs(this.transX) > this.screenWidth / 4 &&
this.canMove &&
this.dragging
) {
if (this.transX > 0) {
this.nowX += this.screenWidth
this.current--
} else {
this.nowX -= this.screenWidth
this.current++
}
var transAdd = this.transX > 0 ? false : true
var index = transAdd ? this.index + 1 : this.index - 1
this.transX = 0
this.dragging = false
this.canMove = false
setTimeout(() => {
this.canMove = true
this.$emit('swiperChange', index)
if (!this.height) {
uni.pageScrollTo({
scrollTop: this.pageTop,
duration: 0,
})
}
if (this.swiperType == 'lite') {
this.waitShow = true
this.dragging = true
this.index = index
this.current = 1
} else if (this.swiperType == 'static') {
if (transAdd) {
this.waitShow = true
this.dragging = true
}
this.index = index
}
this.nowX = -1 * this.current * this.screenWidth
setTimeout(() => {
this.waitShow = false
this.dragging = false
}, 200)
}, this.duration)
} else {
this.transX = 0
}
},
},
}
</script>
<style lang="scss">
.pageSwiperBox {
width: 100%;
overflow-x: hidden;
}
.pageSwiper {
width: 100%;
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.pageSwiper-wrap {
width: 100%;
display: flex;
align-items: flex-start;
min-height: 100%;
}
.pageSwiperItem {
overflow-x: hidden;
width: 750rpx;
position: relative;
}
.pyh-pageSwiperMask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.pyh-pageSwiperMask-text {
width: 750rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* 旋转动画 */
.loadRotate {
margin-right: 10rpx;
display: inline-block;
width: 32upx;
height: 32upx;
border-radius: 50%;
border: 2upx solid #333;
border-bottom-color: transparent;
vertical-align: middle;
-webkit-animation: loadRotate 0.6s linear infinite;
animation: loadRotate 0.6s linear infinite;
}
@-webkit-keyframes loadRotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loadRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
src/components/page-swiper/readme.md deleted 100644 → 0
View file @ 0963856c
### pageSwiper 页面切换组件
页面切换组件，组件名：`pageSwiper`，代码块： pageSwiper。
**使用方式：**
在 `script` 中引用组件
```javascript
单页面引用
import pageSwiper from '@/components/pyh-pageSwiper/pyh-pageSwiper.vue'
export default {
components: { pageSwiper },
data() {
return {
data: [],
dataLength: 0,
index: 0,
}
},
computed: {
psHeight() {
var sys = uni.getSystemInfoSync()
return sys.safeArea.height - parseInt((80 * sys.windowWidth) / 750) + 'px'
},
},
methods: {
swiperChange(index) {
console.log(index)
this.index = index
},
},
}
```
在 `template` 中使用组件
```html
<pageSwiper
ref="pageSwiper"
:dataLength="dataLength"
:initIndex="index"
@swiperChange="swiperChange"
height="500px"
>
<view>{{'显示的内容'}}</view>
</pageSwiper>
```
在 `script` 说明
可自定义（需要修改组件内对应参数名）
** pageSwiper 属性说明：**
| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | ------ | ------ | ------------------------------- |
| dataLength | Number | 0 | 数据长度 |
| initIndex | Number | 0 | 初始下标 |
| swiperType | String | 'lite' | swiper 类型（'lite'、'static'） |
| duration | Number | 200 | 动画事件（单位 ms） |
| height | String | '' | 滚动容器固定高度 |
**swiperTo 事件说明：**
跳转至指定下标
**swiperChange 事件说明：**
返回下标
src/components/swiper-limited-load/index.vue 0 → 100644
View file @ b83a619b
<template>
<view>
<swiper
style="height: 80vh;"
:duration="swiperDuration"
:current="swiperCurrent"
@change="swiperChange"
circular
>
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="u-flex subject">
<view class="type">{{ type[item.type - 1] }}</view>
<view class="title">{{ item.title }}</view>
<view class="content">
<answer-sheet
:answerList="item.answerList"
:multiple="item.type === 3"
@change="answerChange"
></answer-sheet>
</view>
<view class="btn" v-if="item.type === 3">
<u-button type="primary" size="medium" shape="circle">确定</u-button>
</view>
<view class="explain">
<answer-explanation :answer="item.answer" :explain="item.explain"></answer-explanation>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import answerSheet from '@/components/answer-sheet/index.vue'
import answerExplanation from '@/components/answer-explanation/index.vue'
const START = 0
const END = 2
const SWIPER_LENGTH = 3
const NO_PREV_PAGE = -1
const NO_NEXT_PAGE = -2
export default {
name: 'swiper-limited-load',
components: {
answerSheet,
answerExplanation
},
props: {
swiperHeight: {
type: Number,
default: 0
},
list: {
type: Array,
default: []
},
current: {
type: Number,
default: 0
},
// 值为0禁止切换动画
swiperDuration: {
type: String,
default: "250"
},
// 分页需要传此数据
total: {
type: Number,
default: 0
}
},
data() {
return {
type: ['单选题', '判断题', '多选题'],
// 滑动到的位置
swiperIndex: 0,
// 此值控制swiper的位置
swiperCurrent: 0,
// 当前swiper渲染的items
swiperList: []
}
},
watch: {
current: {
handler: function(index, oldValue) {
let current = index % SWIPER_LENGTH
if (this.swiperList.length == 0 || this.swiperList[current] == null) {
return
}
// 如果change后还是之前的那一个item，直接return
if (current == this.swiperIndex && this.swiperList[this.swiperIndex].index == index) {
return
}
this.init(index)
// 如果change之后还是当前的current，比如之前是1、点击后是4 之前是2、点击后是5之类
// 那么不会走swiperChange的change方法，需要我们手动去给它加一个current，然后传出去
if (current == this.swiperIndex) {
this.$emit("change", {source: "",current: index})
}
},
immediate: true
},
},
methods: {
init (defaulaIndex) {
let list = this.list
if (list == null || list.length == 0) {
return
}
// 默认显示的index
let current = defaulaIndex % SWIPER_LENGTH
this.swiperList = this.getInitSwiperList(list, defaulaIndex)
this.swiperIndex = current
this.swiperCurrent = current
},
answerChange(e) {
this.swiperCurrent = this.swiperCurrent + 1
},
clear () {
this.list = []
this.swiperList = []
},
swiperChange: function (e) {
let current = e.detail.current
let lastIndex = this.swiperIndex
let currentItem = this.swiperList[current]
let info = {}
info.source = e.detail.source
// 正向滑动，到下一个的时候
// 是正向衔接
let isLoopPositive = current == START && lastIndex == END
if (current - lastIndex == 1 || isLoopPositive) {
// 如果是滑到了左边界或者下一个还未有值，弹回去
if (currentItem == null) {
info.current = NO_NEXT_PAGE
this.$emit("change", info)
this.swiperCurrent = lastIndex
return
}
//let swiperChangeItem = "swiperList[" + this.getNextSwiperChangeIndex(current) + "]"
//this[swiperChangeItem] = this.getNextSwiperNeedItem(currentItem, this.list)
this.$set(this.swiperList, this.getNextSwiperChangeIndex(current), this.getNextSwiperNeedItem(currentItem, this.list))
}
// 反向滑动，到上一个的时候
// 是反向衔接
let isLoopNegative = current == END && lastIndex == START
if (lastIndex - current == 1 || isLoopNegative) {
// 如果滑到了右边界或者上一个还未有值，弹回去
if (currentItem == null) {
info.current = NO_PREV_PAGE
this.$emit("change", info)
this.swiperCurrent = lastIndex
return
}
// let swiperChangeItem = "swiperList[" + this.getLastSwiperChangeIndex(current) + "]"
// this[swiperChangeItem] = this.getLastSwiperNeedItem(currentItem, this.list)
this.$set(this.swiperList, this.getLastSwiperChangeIndex(current), this.getLastSwiperNeedItem(currentItem, this.list))
}
if (currentItem == null) return
info.current = currentItem.index
this.$emit("change", info)
// 记录滑过来的位置，此值对于下一次滑动的计算很重要
this.swiperIndex = current
},
/**
* 获取初始化的swiperList
*/
getInitSwiperList : function (list, defaultIndex) {
let current = defaultIndex % SWIPER_LENGTH
let realIndex = list.findIndex(item => item.index == defaultIndex)
let currentItem = list[realIndex]
let swiperList = []
swiperList[current] = currentItem
swiperList[this.getLastSwiperChangeIndex(current)] = this.getLastSwiperNeedItem(currentItem, list)
swiperList[this.getNextSwiperChangeIndex(current)] = this.getNextSwiperNeedItem(currentItem, list)
console.log("初始化swiperList", swiperList)
return swiperList;
},
/**
* 获取swiperList中current上一个的index
*/
getLastSwiperChangeIndex : function (current) {
return current > START ? current - 1 : END
},
/**
* 获取swiperLit中current下一个的index
*/
getNextSwiperChangeIndex : function (current) {
return current < END ? current + 1 : START
},
/**
* 获取上一个要替换的list中的item
*/
getLastSwiperNeedItem : function (currentItem, list) {
if (currentItem == null) return null;
let listNeedIndex = currentItem.index - 1
let realIndex = list.findIndex(item => item.index == listNeedIndex)
if (realIndex == -1) return null
let item = listNeedIndex == -1 ? null : list[realIndex]
return item
},
/**
* 获取下一个要替换的list中的item
*/
getNextSwiperNeedItem : function (currentItem, list) {
if (currentItem == null) return null;
let listNeedIndex = currentItem.index + 1
let realIndex = list.findIndex(function(item){
return item.index == listNeedIndex
})
if (realIndex == -1) return null
let total = this.total != 0 ? this.total : list.length
let item = listNeedIndex == total ? null : list[realIndex]
return item
}
},
}
</script>
<style lang="scss" scoped>
.subject {
flex-flow: column;
padding: 20rpx;
.type {
width: 100%;
text-align: left;
padding: 20rpx 0;
}
.title {
color: #191C27;
font-size: 32rpx;
line-height: 50rpx;
font-weight: bold;
}
.content, .explain, .btn {
/deep/ .u-card {
background: transparent;
}
width: 100%;
padding-top: 50rpx;
}
.btn {
text-align: center;
/deep/ button {
width: 260rpx;
height: 80rpx;
}
}
.disabled {
/deep/ button {
background: #D4D7DF;
color: #fff;
}
}
}
</style>
src/pages/learn/answer.vue
View file @ b83a619b
...@@ -9,31 +9,14 @@ ...@@ -9,31 +9,14 @@
title-bold title-bold
></u-navbar> ></u-navbar>
<view class="swiper"> <view class="swiper">
<page-swiper <swiper-limited-load
ref="pageSwiper" ref="swiper"
:dataLength="dataLength" :swiperHeight="500"
:initIndex="index" :swiperDuration="swiperDuration"
@swiperChange="swiperChange" :list="list"
:height="psHeight" :current="current"
> @change="swiperChange">
<view class="u-flex subject"> </swiper-limited-load>
<view class="type">{{ type[lists[index].type - 1] }}</view>
<view class="title">{{ lists[index].title }}</view>
<view class="content">
<answer-sheet
:answerList="lists[index].answerList"
:multiple="lists[index].type === 3"
@change="answerChange"
></answer-sheet>
</view>
<view class="btn" v-if="lists[index].type === 3">
<u-button type="primary" size="medium" shape="circle">确定</u-button>
</view>
<view class="explain">
<answer-explanation :answer="lists[index].answer" :explain="lists[index].explain"></answer-explanation>
</view>
</view>
</page-swiper>
</view> </view>
<view class="u-flex u-row-around bottom"> <view class="u-flex u-row-around bottom">
<view class="u-flex"> <view class="u-flex">
...@@ -63,14 +46,13 @@ ...@@ -63,14 +46,13 @@
</template> </template>
<script> <script>
import pageSwiper from '@/components/page-swiper/index.vue' import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue'
import answerSheet from '@/components/answer-sheet/index.vue' const NO_PREV_PAGE = -1
import answerExplanation from '@/components/answer-explanation/index.vue' const NO_NEXT_PAGE = -2
const app = getApp()
export default { export default {
components: { components: {
pageSwiper, swiperLimitedLoad,
answerSheet,
answerExplanation
}, },
data() { data() {
return { return {
...@@ -79,12 +61,16 @@ export default { ...@@ -79,12 +61,16 @@ export default {
index: 0, index: 0,
lists: [], lists: [],
answerList: [], answerList: [],
list: [],
current: 0,
currentIndex: 0,
swiperDuration: "0"
} }
}, },
computed: { computed: {
}, },
created() { created() {
this.lists = [ const lists = [
{ {
type: 1, type: 1,
title: '采用QS1电桥测量tanδ的接线方式一般有差接线及和接线。', title: '采用QS1电桥测量tanδ的接线方式一般有差接线及和接线。',
...@@ -97,7 +83,8 @@ export default { ...@@ -97,7 +83,8 @@ export default {
}, },
], ],
answer: 'A', answer: 'A',
explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。' explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 0
}, },
{ {
type: 2, type: 2,
...@@ -111,7 +98,8 @@ export default { ...@@ -111,7 +98,8 @@ export default {
}, },
], ],
answer: 'B', answer: 'B',
explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。' explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 1
}, },
{ {
type: 3, type: 3,
...@@ -131,19 +119,47 @@ export default { ...@@ -131,19 +119,47 @@ export default {
}, },
], ],
answer: 'B，C', answer: 'B，C',
explain: '双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。' explain: '双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。',
index: 2
} }
] ]
this.dataLength = this.lists.length
this.requestQuestionInfo(lists)
}, },
methods: { methods: {
swiperChange(index) { requestQuestionInfo(lists) {
this.index = index // 初始化setData后，需要调用swiper组件的init方法
}, this.list = lists
answerChange() { setTimeout(() => {
// this.index++ // 比如上次答到了第20题
// this.$refs.pageSwiper.swiperTo(this.index) this.$refs.swiper.init(0);
// 初始化后再把动画弄出来，否则初始的current不是0，界面会自动跳动到当前位置，体验不太好
this.swiperDuration = '250'
// 全局记一下list, 答题卡页暂时就直接用了
app.globalData.questionList = lists
}, 1000)
}, },
swiperChange(e) {
let current = e.current
this.currentIndex = current
if (current == NO_PREV_PAGE) {
uni.showToast({
title: "已经是第一题了",
icon: "none"
})
return
}
if (current == NO_NEXT_PAGE) {
uni.showModal({
title: "提示",
content: "您已经答完所有题，是否退出？",
})
return
}
}
}, },
} }
</script> </script>
......
src/pages/learn/detail.vue
View file @ b83a619b
<template> <template>
<view> <view>
<u-button type="primary" @click="pay">微信支付测试</u-button> <u-button type="primary" @click="payOrder">微信支付测试</u-button>
</view> </view>
</template> </template>
...@@ -21,25 +21,29 @@ export default { ...@@ -21,25 +21,29 @@ export default {
}, },
created() {}, created() {},
methods: { methods: {
pay() { payOrder() {
const data = { const data = {
instrtutionId: 1, instrtutionId: 1,
orders: JSON.stringify(this.lists), orders: JSON.stringify(this.lists),
openId: this.openId, openId: this.openId,
} }
this.$u.api.payOrder(data).then((result) => { this.$u.api.payOrder(data).then((res) => {
this.pay(res)
})
},
pay(data) {
const timeStamp = String(Date.now()) const timeStamp = String(Date.now())
const paySign = md5 const paySign = md5
.hexMD5( .hexMD5(
`appId=wxd1d6eede324b0465&nonceStr=${result.nonce_str}&package=prepay_id=${result.prepay_id}&signType=MD5&timeStamp=${timeStamp}&key=weixiuhui20151a2b3c4d5e6f7g8h9ij` `appId=wxd1d6eede324b0465&nonceStr=${data.nonce_str}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}&key=weixiuhui20151a2b3c4d5e6f7g8h9ij`
) )
.toUpperCase() .toUpperCase()
uni.requestPayment({ uni.requestPayment({
provider: 'wxpay', provider: 'wxpay',
timeStamp: timeStamp, timeStamp: timeStamp,
nonceStr: result.nonce_str, nonceStr: data.nonce_str,
package: `prepay_id=${result.prepay_id}`, package: `prepay_id=${data.prepay_id}`,
signType: 'MD5', signType: 'MD5',
paySign: paySign, paySign: paySign,
success: (res) => { success: (res) => {
...@@ -51,8 +55,7 @@ export default { ...@@ -51,8 +55,7 @@ export default {
this.$u.toast('支付失败') this.$u.toast('支付失败')
}, },
}) })
}) }
},
}, },
} }
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment