tijiao
This commit is contained in:
@@ -1,96 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="ad-view">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<ad :unit-id="unitId" type="feed" @load="adload" @error="aderror"/>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<ad adpid="1111111111" @load="adload" @error="aderror"/>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="ad-tips" v-if="!isLoad">
|
||||
<text>{{adMessage}}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<view class="ad-tips">
|
||||
<text>小程序端的广告ID由小程序平台提供</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text class="tips-text">本示例页面仅演示ad组件。另点此可体验</text><text class="tips-hl" @click="gotoapi">激励视频API</text><text class="tips-text">。</text>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="ad-view">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<ad :unit-id="unitId" type="feed" @load="adload" @error="aderror" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<ad adpid="1111111111" @load="adload" @error="aderror" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="ad-tips" v-if="!isLoad">
|
||||
<text>{{ adMessage }}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<view class="ad-tips">
|
||||
<text>小程序端的广告ID由小程序平台提供</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text class="tips-text">本示例页面仅演示ad组件。另点此可体验</text
|
||||
><text class="tips-hl" @click="gotoapi">激励视频API</text
|
||||
><text class="tips-text">。</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'AD组件',
|
||||
unitId: '',
|
||||
isLoad: false,
|
||||
adMessage: "广告加载中..."
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.unitId = '';
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.unitId = ''
|
||||
// #endif
|
||||
// #ifdef MP-QQ
|
||||
this.unitId = ''
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
adload() {
|
||||
this.isLoad = true;
|
||||
},
|
||||
aderror(e) {
|
||||
this.adMessage = e.detail.errMsg;
|
||||
},
|
||||
gotoapi() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/API/rewarded-video-ad/rewarded-video-ad"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "AD组件",
|
||||
unitId: "",
|
||||
isLoad: false,
|
||||
adMessage: "广告加载中...",
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.unitId = "";
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.unitId = "";
|
||||
// #endif
|
||||
// #ifdef MP-QQ
|
||||
this.unitId = "";
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
adload() {
|
||||
this.isLoad = true;
|
||||
},
|
||||
aderror(e) {
|
||||
this.adMessage = e.detail.errMsg;
|
||||
},
|
||||
gotoapi() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/API/rewarded-video-ad/rewarded-video-ad",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
background-color: #DBDBDB;
|
||||
padding: 10px;
|
||||
}
|
||||
.content {
|
||||
background-color: #dbdbdb;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ad-view {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ad-view {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ad-tips {
|
||||
color: #999;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.ad-tips {
|
||||
color: #999;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
}
|
||||
.tips {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
color: #444;
|
||||
}
|
||||
.tips-text {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.tips-hl {
|
||||
color: #007AFF;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.tips-hl {
|
||||
color: #007aff;
|
||||
margin-left: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,29 +1,38 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="audio"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-center">
|
||||
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author"
|
||||
:action="audioAction" controls></audio>
|
||||
<view class="">audio组件不再维护，建议使用能力更强的uni.createInnerAudioContext()</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head title="audio"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-center">
|
||||
<audio
|
||||
style="text-align: left"
|
||||
:src="current.src"
|
||||
:poster="current.poster"
|
||||
:name="current.name"
|
||||
:author="current.author"
|
||||
:action="audioAction"
|
||||
controls
|
||||
></audio>
|
||||
<view class=""
|
||||
>audio组件不再维护，建议使用能力更强的uni.createInnerAudioContext()</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: {
|
||||
poster: 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg',
|
||||
name: '致爱丽丝',
|
||||
author: '暂无',
|
||||
src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
|
||||
},
|
||||
audioAction: {
|
||||
method: 'pause'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: {
|
||||
poster: "https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg",
|
||||
name: "致爱丽丝",
|
||||
author: "暂无",
|
||||
src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
|
||||
},
|
||||
audioAction: {
|
||||
method: "pause",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,81 +1,89 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<button type="primary">页面主操作 Normal</button>
|
||||
<button type="primary" :loading="loading">页面主操作 Loading</button>
|
||||
<button type="primary" disabled="true">页面主操作 Disabled</button>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<button type="primary">页面主操作 Normal</button>
|
||||
<button type="primary" :loading="loading">页面主操作 Loading</button>
|
||||
<button type="primary" disabled="true">页面主操作 Disabled</button>
|
||||
|
||||
<button type="default">页面次要操作 Normal</button>
|
||||
<button type="default" disabled="true">页面次要操作 Disabled</button>
|
||||
<button type="default">页面次要操作 Normal</button>
|
||||
<button type="default" disabled="true">页面次要操作 Disabled</button>
|
||||
|
||||
<button type="warn">警告类操作 Normal</button>
|
||||
<button type="warn" disabled="true">警告类操作 Disabled</button>
|
||||
<button type="warn">警告类操作 Normal</button>
|
||||
<button type="warn" disabled="true">警告类操作 Disabled</button>
|
||||
|
||||
<view class="button-sp-area">
|
||||
<button type="primary" plain="true">按钮</button>
|
||||
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
|
||||
<view class="button-sp-area">
|
||||
<button type="primary" plain="true">按钮</button>
|
||||
<button type="primary" disabled="true" plain="true">
|
||||
不可点击的按钮
|
||||
</button>
|
||||
|
||||
<button type="default" plain="true">按钮</button>
|
||||
<button type="default" disabled="true" plain="true">按钮</button>
|
||||
<button type="default" plain="true">按钮</button>
|
||||
<button type="default" disabled="true" plain="true">按钮</button>
|
||||
|
||||
<button class="mini-btn" type="primary" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="default" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="warn" size="mini">按钮</button>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-JD -->
|
||||
<button open-type="launchApp" app-parameter="uni-app" @error="openTypeError">打开APP</button>
|
||||
<button open-type="feedback">意见反馈</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<button class="mini-btn" type="primary" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="default" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="warn" size="mini">按钮</button>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-JD -->
|
||||
<button
|
||||
open-type="launchApp"
|
||||
app-parameter="uni-app"
|
||||
@error="openTypeError"
|
||||
>
|
||||
打开APP
|
||||
</button>
|
||||
<button open-type="feedback">意见反馈</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'button',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this._timer = null;
|
||||
},
|
||||
onShow() {
|
||||
this.clearTimer();
|
||||
this._timer = setTimeout(() => {
|
||||
this.loading = true;
|
||||
}, 300)
|
||||
},
|
||||
onUnload() {
|
||||
this.clearTimer();
|
||||
this.loading = false;
|
||||
},
|
||||
methods: {
|
||||
openTypeError(error) {
|
||||
console.error('open-type error:', error);
|
||||
},
|
||||
clearTimer() {
|
||||
if (this._timer != null) {
|
||||
clearTimeout(this._timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "button",
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this._timer = null;
|
||||
},
|
||||
onShow() {
|
||||
this.clearTimer();
|
||||
this._timer = setTimeout(() => {
|
||||
this.loading = true;
|
||||
}, 300);
|
||||
},
|
||||
onUnload() {
|
||||
this.clearTimer();
|
||||
this.loading = false;
|
||||
},
|
||||
methods: {
|
||||
openTypeError(error) {
|
||||
console.error("open-type error:", error);
|
||||
},
|
||||
clearTimer() {
|
||||
if (this._timer != null) {
|
||||
clearTimeout(this._timer);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
button {
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
button {
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.button-sp-area {
|
||||
margin: 0 auto;
|
||||
width: 60%;
|
||||
}
|
||||
.button-sp-area {
|
||||
margin: 0 auto;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.mini-btn {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.mini-btn {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,263 +1,274 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="page-body">
|
||||
<view class="page-body-wrapper">
|
||||
<!-- #ifdef APP-PLUS || H5 -->
|
||||
<canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="animate.start"
|
||||
:data-width="canvasWidth" :data-height="canvasWidth"></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS || H5 -->
|
||||
<canvas canvas-id="canvas" id="canvas" class="canvas"></canvas>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="page-body">
|
||||
<view class="page-body-wrapper">
|
||||
<!-- #ifdef APP-PLUS || H5 -->
|
||||
<canvas
|
||||
canvas-id="canvas"
|
||||
class="canvas"
|
||||
:start="startStatus"
|
||||
:change:start="animate.start"
|
||||
:data-width="canvasWidth"
|
||||
:data-height="canvasWidth"
|
||||
></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS || H5 -->
|
||||
<canvas canvas-id="canvas" id="canvas" class="canvas"></canvas>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script module="animate" lang="renderjs">
|
||||
function Ball({
|
||||
x,
|
||||
y,
|
||||
vx,
|
||||
vy,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
ctx
|
||||
}) {
|
||||
this.canvasWidth = canvasWidth
|
||||
this.canvasHeight = canvasHeight
|
||||
this.ctx = ctx
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.vx = vx
|
||||
this.vy = vy
|
||||
this.radius = 5
|
||||
function Ball({
|
||||
x,
|
||||
y,
|
||||
vx,
|
||||
vy,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
ctx
|
||||
}) {
|
||||
this.canvasWidth = canvasWidth
|
||||
this.canvasHeight = canvasHeight
|
||||
this.ctx = ctx
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.vx = vx
|
||||
this.vy = vy
|
||||
this.radius = 5
|
||||
}
|
||||
|
||||
Ball.prototype.draw = function() {
|
||||
this.ctx.beginPath()
|
||||
this.ctx.fillStyle = '#007AFF'
|
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
|
||||
this.ctx.closePath()
|
||||
this.ctx.fill()
|
||||
}
|
||||
|
||||
Ball.prototype.move = function() {
|
||||
this.x += this.vx
|
||||
this.y += this.vy
|
||||
// 回到中心
|
||||
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
|
||||
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
|
||||
// this.x = this.canvasWidth / 2
|
||||
// this.y = this.canvasHeight / 2
|
||||
// }
|
||||
|
||||
// 边框反弹
|
||||
if (this.x < this.radius) {
|
||||
this.vx = Math.abs(this.vx)
|
||||
return
|
||||
}
|
||||
|
||||
Ball.prototype.draw = function() {
|
||||
this.ctx.beginPath()
|
||||
this.ctx.fillStyle = '#007AFF'
|
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
|
||||
this.ctx.closePath()
|
||||
this.ctx.fill()
|
||||
if (this.x > this.canvasWidth - this.radius) {
|
||||
this.vx = -Math.abs(this.vx)
|
||||
}
|
||||
|
||||
Ball.prototype.move = function() {
|
||||
this.x += this.vx
|
||||
this.y += this.vy
|
||||
// 回到中心
|
||||
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
|
||||
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
|
||||
// this.x = this.canvasWidth / 2
|
||||
// this.y = this.canvasHeight / 2
|
||||
// }
|
||||
|
||||
// 边框反弹
|
||||
if (this.x < this.radius) {
|
||||
this.vx = Math.abs(this.vx)
|
||||
return
|
||||
}
|
||||
if (this.x > this.canvasWidth - this.radius) {
|
||||
this.vx = -Math.abs(this.vx)
|
||||
}
|
||||
if (this.y < this.radius) {
|
||||
this.vy = Math.abs(this.vy)
|
||||
return
|
||||
}
|
||||
if (this.y > this.canvasWidth - this.radius) {
|
||||
this.vy = -Math.abs(this.vy)
|
||||
}
|
||||
if (this.y < this.radius) {
|
||||
this.vy = Math.abs(this.vy)
|
||||
return
|
||||
}
|
||||
|
||||
function getDistance(x, y) {
|
||||
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
|
||||
if (this.y > this.canvasWidth - this.radius) {
|
||||
this.vy = -Math.abs(this.vy)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
start(newVal, oldVal, owner, ins) {
|
||||
let canvasWidth = ins.getDataset().width,
|
||||
canvasHeight = ins.getDataset().height,
|
||||
canvasEle = document.querySelectorAll('.canvas>canvas')[0],
|
||||
ctx = canvasEle.getContext('2d'),
|
||||
speed = 3,
|
||||
ballList = [],
|
||||
layer = 3,
|
||||
ballInlayer = 20
|
||||
for (let i = 0; i < layer; i++) {
|
||||
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
|
||||
for (let j = 0; j < ballInlayer; j++) {
|
||||
let deg = j * 2 * Math.PI / ballInlayer,
|
||||
sin = Math.sin(deg),
|
||||
cos = Math.cos(deg),
|
||||
x = radius * cos + canvasWidth / 2,
|
||||
y = radius * sin + canvasHeight / 2,
|
||||
vx = speed * cos,
|
||||
vy = speed * sin
|
||||
ballList.push(new Ball({
|
||||
x,
|
||||
y,
|
||||
vx,
|
||||
vy,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
ctx,
|
||||
radius: 5
|
||||
}))
|
||||
}
|
||||
function getDistance(x, y) {
|
||||
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
|
||||
}
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
start(newVal, oldVal, owner, ins) {
|
||||
let canvasWidth = ins.getDataset().width,
|
||||
canvasHeight = ins.getDataset().height,
|
||||
canvasEle = document.querySelectorAll('.canvas>canvas')[0],
|
||||
ctx = canvasEle.getContext('2d'),
|
||||
speed = 3,
|
||||
ballList = [],
|
||||
layer = 3,
|
||||
ballInlayer = 20
|
||||
for (let i = 0; i < layer; i++) {
|
||||
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
|
||||
for (let j = 0; j < ballInlayer; j++) {
|
||||
let deg = j * 2 * Math.PI / ballInlayer,
|
||||
sin = Math.sin(deg),
|
||||
cos = Math.cos(deg),
|
||||
x = radius * cos + canvasWidth / 2,
|
||||
y = radius * sin + canvasHeight / 2,
|
||||
vx = speed * cos,
|
||||
vy = speed * sin
|
||||
ballList.push(new Ball({
|
||||
x,
|
||||
y,
|
||||
vx,
|
||||
vy,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
ctx,
|
||||
radius: 5
|
||||
}))
|
||||
}
|
||||
|
||||
function animate(ballList) {
|
||||
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)
|
||||
ballList.forEach(function(item) {
|
||||
item.move()
|
||||
item.draw()
|
||||
})
|
||||
requestAnimationFrame(function() {
|
||||
animate(ballList)
|
||||
})
|
||||
}
|
||||
animate(ballList)
|
||||
}
|
||||
|
||||
function animate(ballList) {
|
||||
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)
|
||||
ballList.forEach(function(item) {
|
||||
item.move()
|
||||
item.draw()
|
||||
})
|
||||
requestAnimationFrame(function() {
|
||||
animate(ballList)
|
||||
})
|
||||
}
|
||||
animate(ballList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// #ifndef APP-PLUS || H5
|
||||
// #ifndef APP-PLUS || H5
|
||||
|
||||
let ctx = null,
|
||||
interval = null;
|
||||
let ctx = null,
|
||||
interval = null;
|
||||
|
||||
function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) {
|
||||
this.canvasWidth = canvasWidth
|
||||
this.canvasHeight = canvasHeight
|
||||
this.ctx = ctx
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.vx = vx
|
||||
this.vy = vy
|
||||
this.radius = 5
|
||||
}
|
||||
function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) {
|
||||
this.canvasWidth = canvasWidth;
|
||||
this.canvasHeight = canvasHeight;
|
||||
this.ctx = ctx;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.vx = vx;
|
||||
this.vy = vy;
|
||||
this.radius = 5;
|
||||
}
|
||||
|
||||
Ball.prototype.draw = function() {
|
||||
this.ctx.setFillStyle('#007AFF')
|
||||
this.ctx.beginPath()
|
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
|
||||
this.ctx.closePath()
|
||||
this.ctx.fill()
|
||||
}
|
||||
Ball.prototype.draw = function () {
|
||||
this.ctx.setFillStyle("#007AFF");
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
||||
this.ctx.closePath();
|
||||
this.ctx.fill();
|
||||
};
|
||||
|
||||
Ball.prototype.move = function() {
|
||||
this.x += this.vx
|
||||
this.y += this.vy
|
||||
// 回到中心
|
||||
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
|
||||
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
|
||||
// this.x = this.canvasWidth / 2
|
||||
// this.y = this.canvasHeight / 2
|
||||
// }
|
||||
Ball.prototype.move = function () {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
// 回到中心
|
||||
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
|
||||
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
|
||||
// this.x = this.canvasWidth / 2
|
||||
// this.y = this.canvasHeight / 2
|
||||
// }
|
||||
|
||||
// 边框反弹
|
||||
if (this.x < this.radius) {
|
||||
this.vx = Math.abs(this.vx)
|
||||
return
|
||||
// 边框反弹
|
||||
if (this.x < this.radius) {
|
||||
this.vx = Math.abs(this.vx);
|
||||
return;
|
||||
}
|
||||
if (this.x > this.canvasWidth - this.radius) {
|
||||
this.vx = -Math.abs(this.vx);
|
||||
}
|
||||
if (this.y < this.radius) {
|
||||
this.vy = Math.abs(this.vy);
|
||||
return;
|
||||
}
|
||||
if (this.y > this.canvasWidth - this.radius) {
|
||||
this.vy = -Math.abs(this.vy);
|
||||
}
|
||||
};
|
||||
|
||||
function getDistance(x, y) {
|
||||
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5);
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "canvas",
|
||||
canvasWidth: 0,
|
||||
startStatus: false,
|
||||
ballList: [],
|
||||
};
|
||||
},
|
||||
onReady: function () {
|
||||
this.$nextTick(() => {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select(".canvas")
|
||||
.boundingClientRect((data) => {
|
||||
this.canvasWidth = data.width;
|
||||
// #ifdef APP-PLUS || H5
|
||||
this.startStatus = true;
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || H5
|
||||
ctx = uni.createCanvasContext("canvas");
|
||||
this.drawBall();
|
||||
// #endif
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
// #ifndef APP-PLUS || H5
|
||||
onUnload: function () {
|
||||
clearInterval(interval);
|
||||
},
|
||||
methods: {
|
||||
drawBall: function () {
|
||||
let canvasWidth = this.canvasWidth,
|
||||
canvasHeight = this.canvasWidth,
|
||||
speed = 3,
|
||||
ballList = [],
|
||||
layer = 3,
|
||||
ballInlayer = 20;
|
||||
for (let i = 0; i < layer; i++) {
|
||||
let radius =
|
||||
(getDistance(canvasWidth / 2, canvasHeight / 2) / layer) * i;
|
||||
for (let j = 0; j < ballInlayer; j++) {
|
||||
let deg = (j * 2 * Math.PI) / ballInlayer,
|
||||
sin = Math.sin(deg),
|
||||
cos = Math.cos(deg),
|
||||
x = radius * cos + canvasWidth / 2,
|
||||
y = radius * sin + canvasHeight / 2,
|
||||
vx = speed * cos,
|
||||
vy = speed * sin;
|
||||
ballList.push(new Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx));
|
||||
}
|
||||
if (this.x > this.canvasWidth - this.radius) {
|
||||
this.vx = -Math.abs(this.vx)
|
||||
}
|
||||
if (this.y < this.radius) {
|
||||
this.vy = Math.abs(this.vy)
|
||||
return
|
||||
}
|
||||
if (this.y > this.canvasWidth - this.radius) {
|
||||
this.vy = -Math.abs(this.vy)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getDistance(x, y) {
|
||||
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
|
||||
}
|
||||
function animate(ballList) {
|
||||
// ctx.clearRect(0, 0, canvasWidth, canvasHeight)
|
||||
ballList.forEach(function (item) {
|
||||
item.move();
|
||||
item.draw();
|
||||
});
|
||||
ctx.draw();
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'canvas',
|
||||
canvasWidth: 0,
|
||||
startStatus: false,
|
||||
ballList: []
|
||||
}
|
||||
},
|
||||
onReady: function() {
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery().select(".canvas").boundingClientRect(data => {
|
||||
this.canvasWidth = data.width
|
||||
// #ifdef APP-PLUS || H5
|
||||
this.startStatus = true
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || H5
|
||||
ctx = uni.createCanvasContext('canvas')
|
||||
this.drawBall()
|
||||
// #endif
|
||||
}).exec()
|
||||
})
|
||||
},
|
||||
// #ifndef APP-PLUS || H5
|
||||
onUnload: function() {
|
||||
clearInterval(interval);
|
||||
},
|
||||
methods: {
|
||||
drawBall: function() {
|
||||
let canvasWidth = this.canvasWidth,
|
||||
canvasHeight = this.canvasWidth,
|
||||
speed = 3,
|
||||
ballList = [],
|
||||
layer = 3,
|
||||
ballInlayer = 20
|
||||
for (let i = 0; i < layer; i++) {
|
||||
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
|
||||
for (let j = 0; j < ballInlayer; j++) {
|
||||
let deg = j * 2 * Math.PI / ballInlayer,
|
||||
sin = Math.sin(deg),
|
||||
cos = Math.cos(deg),
|
||||
x = radius * cos + canvasWidth / 2,
|
||||
y = radius * sin + canvasHeight / 2,
|
||||
vx = speed * cos,
|
||||
vy = speed * sin
|
||||
ballList.push(new Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx))
|
||||
}
|
||||
}
|
||||
|
||||
function animate(ballList) {
|
||||
// ctx.clearRect(0, 0, canvasWidth, canvasHeight)
|
||||
ballList.forEach(function(item) {
|
||||
item.move()
|
||||
item.draw()
|
||||
})
|
||||
ctx.draw()
|
||||
}
|
||||
|
||||
interval = setInterval(function() {
|
||||
animate(ballList)
|
||||
}, 17)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
interval = setInterval(function () {
|
||||
animate(ballList);
|
||||
}, 17);
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-body-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
.page-body-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 610rpx;
|
||||
height: 610rpx;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
.canvas {
|
||||
width: 610rpx;
|
||||
height: 610rpx;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,101 +1,111 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">默认样式</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb1" checked="true" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">默认样式</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label> <checkbox value="cb1" checked="true" />选中 </label>
|
||||
<label> <checkbox value="cb" />未选中 </label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox
|
||||
value="cb1"
|
||||
checked="true"
|
||||
color="#FFCC33"
|
||||
style="transform: scale(0.7)"
|
||||
/>选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox
|
||||
value="cb"
|
||||
color="#FFCC33"
|
||||
style="transform: scale(0.7)"
|
||||
/>未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
推荐展示样式
|
||||
<text>\n使用 uni-list 布局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
||||
<view>
|
||||
<checkbox :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
推荐展示样式
|
||||
<text>\n使用 uni-list 布局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<label
|
||||
class="uni-list-cell uni-list-cell-pd"
|
||||
v-for="item in items"
|
||||
:key="item.value"
|
||||
>
|
||||
<view>
|
||||
<checkbox :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
<view>{{ item.name }}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'checkbox 复选框',
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国'
|
||||
},
|
||||
{
|
||||
value: 'CHN',
|
||||
name: '中国',
|
||||
checked: 'true'
|
||||
},
|
||||
{
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
},
|
||||
{
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
},
|
||||
{
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
},
|
||||
{
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function (e) {
|
||||
var items = this.items,
|
||||
values = e.detail.value;
|
||||
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
||||
const item = items[i]
|
||||
if(values.indexOf(item.value) >= 0){
|
||||
this.$set(item,'checked',true)
|
||||
}else{
|
||||
this.$set(item,'checked',false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "checkbox 复选框",
|
||||
items: [
|
||||
{
|
||||
value: "USA",
|
||||
name: "美国",
|
||||
},
|
||||
{
|
||||
value: "CHN",
|
||||
name: "中国",
|
||||
checked: "true",
|
||||
},
|
||||
{
|
||||
value: "BRA",
|
||||
name: "巴西",
|
||||
},
|
||||
{
|
||||
value: "JPN",
|
||||
name: "日本",
|
||||
},
|
||||
{
|
||||
value: "ENG",
|
||||
name: "英国",
|
||||
},
|
||||
{
|
||||
value: "FRA",
|
||||
name: "法国",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function (e) {
|
||||
var items = this.items,
|
||||
values = e.detail.value;
|
||||
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
||||
const item = items[i];
|
||||
if (values.indexOf(item.value) >= 0) {
|
||||
this.$set(item, "checked", true);
|
||||
} else {
|
||||
this.$set(item, "checked", false);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,8 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class=" ">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<!-- <public-module></public-module>
|
||||
@@ -795,7 +796,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
@import "@/style/mixin.scss";
|
||||
/deep/.list_item {
|
||||
// border-bottom: none;
|
||||
padding-left: 0 !important;
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
>
|
||||
<u-popup :show="show" v-if="show" mode="center" class="popup_box">
|
||||
<div class="product_image" scroll-y="true" style="position: relative">
|
||||
|
||||
<swiper
|
||||
:style="{ height: fullHeight }"
|
||||
class="swiper-tall"
|
||||
@@ -25,7 +24,7 @@
|
||||
:data-year="index"
|
||||
>
|
||||
<view
|
||||
@click="gotoDetail(img)"
|
||||
@click="gotoDetail(img)"
|
||||
class="swiper-item"
|
||||
:style="{
|
||||
background: img ? 'url(' + img.icon + ') center no-repeat' : '',
|
||||
@@ -36,13 +35,26 @@
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view style="display: flex;align-items: center;justify-content: center;">
|
||||
<view @click="close()" style="font-weight: bold;background-color: rgba(255, 255, 255, 0.8); color: #333;padding:20rpx 10rpx;width: 200rpx;font-size: 30rpx;border-radius: 40rpx;text-align: center;letter-spacing: 0.5rpx;">
|
||||
关闭
|
||||
</view>
|
||||
<view
|
||||
style="display: flex; align-items: center; justify-content: center"
|
||||
>
|
||||
<view
|
||||
@click="close()"
|
||||
style="
|
||||
font-weight: bold;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
color: #333;
|
||||
padding: 20rpx 10rpx;
|
||||
width: 200rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
letter-spacing: 0.5rpx;
|
||||
"
|
||||
>
|
||||
关闭
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</div>
|
||||
</u-popup></view
|
||||
>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -56,21 +56,14 @@
|
||||
<view style="width: calc(100% - 220rpx)">
|
||||
<view>
|
||||
<view
|
||||
style="color: #fd4347; font-size: 44rpx; font-weight: bold;"
|
||||
style="color: #fd4347; font-size: 44rpx; font-weight: bold"
|
||||
>{{
|
||||
item.couponEntity.couponType == 0 ? "现金" : "折扣"
|
||||
}}优惠券
|
||||
|
||||
|
||||
<!-- <text v-if="source == 'mine'" style="box-sizing: border-box;padding:4rpx 20rpx;margin-left: 10rpx;font-size: 24rpx;background-color: #fff;border-radius: 24rpx;float: right;">去使用</text> -->
|
||||
|
||||
|
||||
|
||||
|
||||
</view
|
||||
>
|
||||
|
||||
|
||||
<!-- <text v-if="source == 'mine'" style="box-sizing: border-box;padding:4rpx 20rpx;margin-left: 10rpx;font-size: 24rpx;background-color: #fff;border-radius: 24rpx;float: right;">去使用</text> -->
|
||||
</view>
|
||||
|
||||
<text
|
||||
v-if="source != 'goodsDetail'"
|
||||
style="
|
||||
@@ -139,7 +132,7 @@
|
||||
</view>
|
||||
|
||||
<u-collapse
|
||||
v-if="source != 'goodsDetail'&&item.couponEntity.remark"
|
||||
v-if="source != 'goodsDetail' && item.couponEntity.remark"
|
||||
style="
|
||||
margin-top: 0rpx;
|
||||
z-index: 10 !important;
|
||||
|
||||
@@ -1,184 +1,187 @@
|
||||
<template><page-meta
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view style="width: 100%;height: 100%;" class="common_curriculum_list">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
|
||||
<u-grid :col="col ? col : 1" style="overflow: hidden;justify-content:space-between">
|
||||
<view style="width: 100%; height: 100%" class="common_curriculum_list">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
|
||||
<u-grid
|
||||
:col="col ? col : 1"
|
||||
style="overflow: hidden; justify-content: space-between"
|
||||
>
|
||||
<u-grid-item
|
||||
:class="`scroll-view-item list_item content_item `"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="item.id"
|
||||
@click="gotoDetail(item)"
|
||||
>
|
||||
<image
|
||||
lazy-load
|
||||
:src="defaultUrl ? defaultUrl : item[imgUrl]"
|
||||
:mode="imgMode ? imgMode : 'aspectFil'"
|
||||
class="book_image"
|
||||
></image>
|
||||
<view :class="['titleItem', 'common_curriculum_item']">
|
||||
<slot name="leftSlot" :row="item"></slot>
|
||||
|
||||
<u-grid-item :class="`scroll-view-item list_item content_item `"
|
||||
v-for="(item, index) in dataList" :key="item.id" @click="gotoDetail(item)">
|
||||
<template v-if="isCondition">
|
||||
<slot name="labelSlot" :row="item"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item[label] }}
|
||||
</template>
|
||||
|
||||
<image lazy-load :src="defaultUrl ? defaultUrl : item[imgUrl]" :mode="imgMode?imgMode:'aspectFil'" class="book_image" ></image>
|
||||
<view :class="['titleItem', 'common_curriculum_item']">
|
||||
<slot name="leftSlot" :row="item"></slot>
|
||||
<slot name="rightSlot" :row="item"></slot>
|
||||
</view>
|
||||
<!-- <image src="@/static/icon/icon_right.png" class="rightArrow" style=""></image> -->
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</scroll-view>
|
||||
|
||||
<template v-if="isCondition">
|
||||
<slot name="labelSlot" :row="item"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item[label] }}
|
||||
</template>
|
||||
|
||||
<slot name="rightSlot" :row="item"></slot>
|
||||
|
||||
</view>
|
||||
<!-- <image src="@/static/icon/icon_right.png" class="rightArrow" style=""></image> -->
|
||||
</u-grid-item>
|
||||
|
||||
|
||||
</u-grid>
|
||||
</scroll-view>
|
||||
|
||||
<u-empty v-else-if="noDataIcon&&isLoadingHide"
|
||||
:mode="noDataIcon"
|
||||
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
|
||||
>
|
||||
</u-empty>
|
||||
<u-empty
|
||||
v-else-if="noDataIcon && isLoadingHide"
|
||||
:mode="noDataIcon"
|
||||
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
|
||||
>
|
||||
</u-empty>
|
||||
<u-divider v-else text="暂无数据哦~"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: ['dataList', 'label', 'isCondition', 'imgUrl','imgMode', 'className', 'col', 'defaultUrl', 'isScroll','isLoadingHide','noDataIcon'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
props: [
|
||||
"dataList",
|
||||
"label",
|
||||
"isCondition",
|
||||
"imgUrl",
|
||||
"imgMode",
|
||||
"className",
|
||||
"col",
|
||||
"defaultUrl",
|
||||
"isScroll",
|
||||
"isLoadingHide",
|
||||
"noDataIcon",
|
||||
],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad() {},
|
||||
onHide() {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
gotoDetail(v) {
|
||||
this.$emit("hancleClick", v);
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
|
||||
},
|
||||
onHide() {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
gotoDetail(v) {
|
||||
this.$emit('hancleClick', v)
|
||||
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
components: {
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list_item {
|
||||
width: 100%;
|
||||
// padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
// border-bottom: 1rpx solid #e0e0e0;
|
||||
position: relative;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
// padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
// border-bottom: 1rpx solid #e0e0e0;
|
||||
position: relative;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.scroll-view-item:nth-child(2n-1) {
|
||||
// background-color: #f5f5f5 !important;
|
||||
// background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-view-item {
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
}
|
||||
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
}
|
||||
|
||||
.titleItem {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.common_curriculum_list {
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// overflow: hidden;
|
||||
// height: auto;
|
||||
// padding: 24rpx 19rpx 5rpx;
|
||||
// box-sizing: border-box;
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// overflow: hidden;
|
||||
// height: auto;
|
||||
// padding: 24rpx 19rpx 5rpx;
|
||||
// box-sizing: border-box;
|
||||
|
||||
.content_item {
|
||||
// float: left;
|
||||
display: inline-block;
|
||||
width: 49% !important;
|
||||
.content_item {
|
||||
// float: left;
|
||||
display: inline-block;
|
||||
width: 49% !important;
|
||||
|
||||
margin-bottom: 30rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.book_image {
|
||||
width: 100% !important;
|
||||
height: 146rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
}
|
||||
.book_name {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 600;
|
||||
font-size: 23rpx;
|
||||
color: #000000;
|
||||
line-height: 23rpx;
|
||||
text-align: left;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.book_image {
|
||||
|
||||
width: 100% !important;
|
||||
height: 146rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
}
|
||||
|
||||
.book_name {
|
||||
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 600;
|
||||
font-size: 23rpx;
|
||||
color: #000000;
|
||||
line-height: 23rpx;
|
||||
text-align: left;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.content_item:nth-child(2n) {
|
||||
// float: right !important;
|
||||
}
|
||||
.content_item:nth-child(2n) {
|
||||
// float: right !important;
|
||||
}
|
||||
}
|
||||
|
||||
.common_curriculum_item {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,222 +1,224 @@
|
||||
<template><page-meta
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class="richDetail">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<view class="richDetail">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
|
||||
<view scroll-x="true" class="detail_title video_box" style="background-color: #fff">
|
||||
<view
|
||||
scroll-x="true"
|
||||
class="detail_title video_box"
|
||||
style="background-color: #fff"
|
||||
>
|
||||
<view
|
||||
v-for="(v, i) in dataList"
|
||||
:class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
|
||||
@click="handleClick(v, i)"
|
||||
>
|
||||
【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-for="(v, i) in dataList" :class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
|
||||
@click="handleClick(v,i)">
|
||||
<slot name="richHeadImg"></slot>
|
||||
|
||||
【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<slot name="richHeadImg"></slot>
|
||||
|
||||
<!-- <view>{{ detailInfo.content }}</view> -->
|
||||
</view>
|
||||
<!-- <view>{{ detailInfo.content }}</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
export default {
|
||||
props: ["detailInfo", "dataList", "currentVideo"],
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(options) {},
|
||||
onHide() {},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
getNumber(num) {
|
||||
if (num >= 10) {
|
||||
return num;
|
||||
} else {
|
||||
return `0${num}`;
|
||||
}
|
||||
},
|
||||
handleClick(data) {
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: ["detailInfo", "dataList", "currentVideo"],
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(options) {},
|
||||
onHide() {},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
getNumber(num) {
|
||||
if (num >= 10) {
|
||||
return num;
|
||||
} else {
|
||||
return `0${num}`;
|
||||
}
|
||||
},
|
||||
handleClick(data) {
|
||||
this.$emit("open", data);
|
||||
},
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url);
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
// getSearch() {
|
||||
// $http.request({
|
||||
// url: "book/prescript/searchPrescript",
|
||||
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
// data: {
|
||||
// loadAnimate: 'none', // 请求加载动画
|
||||
// 'keywords': this.searchValue,
|
||||
// type: this.currentCateIndex + 1
|
||||
// },
|
||||
// header: { //默认 无 说明：请求头
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// }).then(res => {
|
||||
// console.log(res, '搜索结果')
|
||||
// if (res.code == 0 && res.list.length >= 0) {
|
||||
// this.showSearchList = true
|
||||
// this.searchList = res.list
|
||||
// } else {
|
||||
// this.searchList = []
|
||||
// }
|
||||
// }).catch(e => {
|
||||
// // this.dataList = []
|
||||
// this.searchList = []
|
||||
// console.log(e)
|
||||
// })
|
||||
// },
|
||||
// search(res) {
|
||||
// console.log(res, 'res')
|
||||
// // uni.showToast({
|
||||
// // title: '搜索：' + res,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// if (res == '') {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
|
||||
this.$emit("open", data);
|
||||
},
|
||||
// },
|
||||
// input(res) {
|
||||
// console.log('----input:', res)
|
||||
// if (res == '') {
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
// },
|
||||
// clear(res) {
|
||||
// console.log('----clear:', res)
|
||||
// // uni.showToast({
|
||||
// // title: 'clear事件，清除值为：',
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// this.searchValue = ''
|
||||
// this.showSearchList = false
|
||||
// },
|
||||
// blur(res) {
|
||||
// // console.log('----blur:', res)
|
||||
// // if (res == '') {
|
||||
// // this.showSearchList = false
|
||||
// // this.searchList = []
|
||||
// // } else {
|
||||
// // this.getSearch()
|
||||
// // }
|
||||
// },
|
||||
// focus(e) {
|
||||
// console.log('----focus:')
|
||||
// // uni.showToast({
|
||||
// // title: 'focus事件，输出值为：' + e.value,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// // 等于1 就是有权限
|
||||
// // this.showSearchList = true
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url);
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function(res) {
|
||||
// console.log(res,'+++++')
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
// getSearch() {
|
||||
// $http.request({
|
||||
// url: "book/prescript/searchPrescript",
|
||||
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
// data: {
|
||||
// loadAnimate: 'none', // 请求加载动画
|
||||
// 'keywords': this.searchValue,
|
||||
// type: this.currentCateIndex + 1
|
||||
// },
|
||||
// header: { //默认 无 说明：请求头
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// }).then(res => {
|
||||
// console.log(res, '搜索结果')
|
||||
// if (res.code == 0 && res.list.length >= 0) {
|
||||
// this.showSearchList = true
|
||||
// this.searchList = res.list
|
||||
// } else {
|
||||
// this.searchList = []
|
||||
// }
|
||||
// }).catch(e => {
|
||||
// // this.dataList = []
|
||||
// this.searchList = []
|
||||
// console.log(e)
|
||||
// })
|
||||
// },
|
||||
// search(res) {
|
||||
// console.log(res, 'res')
|
||||
// // uni.showToast({
|
||||
// // title: '搜索：' + res,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// if (res == '') {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
|
||||
// },
|
||||
// input(res) {
|
||||
// console.log('----input:', res)
|
||||
// if (res == '') {
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
// },
|
||||
// clear(res) {
|
||||
// console.log('----clear:', res)
|
||||
// // uni.showToast({
|
||||
// // title: 'clear事件，清除值为：',
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// this.searchValue = ''
|
||||
// this.showSearchList = false
|
||||
// },
|
||||
// blur(res) {
|
||||
// // console.log('----blur:', res)
|
||||
// // if (res == '') {
|
||||
// // this.showSearchList = false
|
||||
// // this.searchList = []
|
||||
// // } else {
|
||||
// // this.getSearch()
|
||||
// // }
|
||||
// },
|
||||
// focus(e) {
|
||||
// console.log('----focus:')
|
||||
// // uni.showToast({
|
||||
// // title: 'focus事件，输出值为：' + e.value,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// // 等于1 就是有权限
|
||||
// // this.showSearchList = true
|
||||
|
||||
// },
|
||||
// cancel(res) {
|
||||
// uni.showToast({
|
||||
// title: '点击取消，输入值为：' + res.value,
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
// },
|
||||
// cancel(res) {
|
||||
// uni.showToast({
|
||||
// title: '点击取消，输入值为：' + res.value,
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.commonPageBox {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
.commonPageBox {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
.headImage {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.contentBox {
|
||||
.headImage {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.detail_title {
|
||||
padding: 0 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
line-height: 65rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.detail_title {
|
||||
padding: 0 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
line-height: 65rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rich_box {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.rich_box {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
p {
|
||||
display: block;
|
||||
text-indent: 2em;
|
||||
letter-spacing: 2px !important;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: block;
|
||||
text-indent: 2em;
|
||||
letter-spacing: 2px !important;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.richDetail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.richDetail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video_box {
|
||||
width: 100%;
|
||||
.video_box {
|
||||
width: 100%;
|
||||
|
||||
// height: 100rpx;
|
||||
.video_item {
|
||||
width: 23%;
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
float: left;
|
||||
border: 2rpx solid #018f89;
|
||||
background: #fff;
|
||||
color: #018f89;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
|
||||
}
|
||||
// height: 100rpx;
|
||||
.video_item {
|
||||
width: 23%;
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
float: left;
|
||||
border: 2rpx solid #018f89;
|
||||
background: #fff;
|
||||
color: #018f89;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.video_item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.video_item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hot {
|
||||
background-color: #018f89 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
.hot {
|
||||
background-color: #018f89 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view style="width: 100%; height: 100%">
|
||||
<scroll-view @scrolltolower="lower" scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
|
||||
<scroll-view
|
||||
@scrolltolower="lower"
|
||||
scroll-y="true"
|
||||
class="scroll-Y"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<view
|
||||
@click="gotoDetail(item)"
|
||||
class="scroll-view-item list_item"
|
||||
@@ -34,7 +40,7 @@
|
||||
></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<u-divider v-else text="暂无数据哦~"></u-divider>
|
||||
</view>
|
||||
</template>
|
||||
@@ -42,7 +48,7 @@
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: ["dataList", "label", "isCondition", "isNoIcon","pagination"],
|
||||
props: ["dataList", "label", "isCondition", "isNoIcon", "pagination"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
@@ -55,8 +61,8 @@ export default {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
lower(){
|
||||
this.$emit('lower')
|
||||
lower() {
|
||||
this.$emit("lower");
|
||||
},
|
||||
gotoDetail(data) {
|
||||
console.log("index at line 53:", data);
|
||||
@@ -76,7 +82,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.list_item {
|
||||
width: auto !important;
|
||||
float: left !important;
|
||||
float: left !important;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
@@ -128,7 +134,7 @@ export default {
|
||||
/deep/.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.list_item:last-child{
|
||||
.list_item:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,255 +1,250 @@
|
||||
<template><page-meta
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class="goods_nav">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
|
||||
<view class="left">
|
||||
<view v-for="(v,i) in iconList" class="icon_item" v-if="iconList.length>0">
|
||||
<u-icon :name="v.icon" :color="v.infoColor" size="22" v-if="v.iconType" style="margin:0 auto"
|
||||
@click="clickIcon(v)"></u-icon>
|
||||
|
||||
<uni-icons :type="v.icon" size="22" :color="v.infoColor" style="margin:0 auto" v-else> </uni-icons>
|
||||
<view :style="`color:${v.infoColor};`">{{ v.text }}</view>
|
||||
</view>
|
||||
<slot name="leftSlot"></slot>
|
||||
|
||||
</view>
|
||||
<view class="right">
|
||||
|
||||
<view class="button" v-for="(v,i) in customButton"
|
||||
:style="`background:${v.backgroundColor} !important;color:${v.color};width:${v.width}`"
|
||||
@click="submit(v)">
|
||||
{{ v.text }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<slot name="bottomSlot"></slot>
|
||||
<!-- <view>{{ detailInfo.content }}</view> -->
|
||||
</view>
|
||||
|
||||
|
||||
<view class="goods_nav">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
|
||||
<view class="left">
|
||||
<view
|
||||
v-for="(v, i) in iconList"
|
||||
class="icon_item"
|
||||
v-if="iconList.length > 0"
|
||||
>
|
||||
<u-icon
|
||||
:name="v.icon"
|
||||
:color="v.infoColor"
|
||||
size="22"
|
||||
v-if="v.iconType"
|
||||
style="margin: 0 auto"
|
||||
@click="clickIcon(v)"
|
||||
></u-icon>
|
||||
|
||||
<uni-icons
|
||||
:type="v.icon"
|
||||
size="22"
|
||||
:color="v.infoColor"
|
||||
style="margin: 0 auto"
|
||||
v-else
|
||||
>
|
||||
</uni-icons>
|
||||
<view :style="`color:${v.infoColor};`">{{ v.text }}</view>
|
||||
</view>
|
||||
<slot name="leftSlot"></slot>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view
|
||||
class="button"
|
||||
v-for="(v, i) in customButton"
|
||||
:style="`background:${v.backgroundColor} !important;color:${v.color};width:${v.width}`"
|
||||
@click="submit(v)"
|
||||
>
|
||||
{{ v.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<slot name="bottomSlot"></slot>
|
||||
<!-- <view>{{ detailInfo.content }}</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
props: ['iconList', 'customButton'],
|
||||
components: {
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: ["iconList", "customButton"],
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(options) {},
|
||||
onHide() {},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
submit(v) {
|
||||
this.$emit("submit", v);
|
||||
},
|
||||
clickIcon(v) {
|
||||
this.$emit("clickIcon", v);
|
||||
},
|
||||
showPreview(e) {
|
||||
console.log("e at line 56:", e);
|
||||
let conimg = e.target.dataset.nodes;
|
||||
let imgs = conimg.match(/<img[^>]+>/g); //选择节点中的img
|
||||
console.log("imgs at line 59:", imgs);
|
||||
let imgList = [];
|
||||
//遍历img标签的src里面的内容放在定义的数组imgList中
|
||||
for (var j = 0; j < imgs.length; j++) {
|
||||
imgs[j].replace(
|
||||
/<img[^>]*src=['"]([^'"]+)[^>]*>/gi,
|
||||
function (match, capture) {
|
||||
imgList.push(capture);
|
||||
},
|
||||
);
|
||||
}
|
||||
console.log("imgList.push at line 64:", imgList);
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//最后一步就是所有图片放在预览的方法previewImage中就可以了
|
||||
// uni.previewImage({
|
||||
// current: imgList,
|
||||
// urls: imgList,
|
||||
// })
|
||||
uni.previewImage({
|
||||
urls: imgList,
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url);
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
// getSearch() {
|
||||
// $http.request({
|
||||
// url: "book/prescript/searchPrescript",
|
||||
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
// data: {
|
||||
// loadAnimate: 'none', // 请求加载动画
|
||||
// 'keywords': this.searchValue,
|
||||
// type: this.currentCateIndex + 1
|
||||
// },
|
||||
// header: { //默认 无 说明：请求头
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// }).then(res => {
|
||||
// console.log(res, '搜索结果')
|
||||
// if (res.code == 0 && res.list.length >= 0) {
|
||||
// this.showSearchList = true
|
||||
// this.searchList = res.list
|
||||
// } else {
|
||||
// this.searchList = []
|
||||
// }
|
||||
// }).catch(e => {
|
||||
// // this.dataList = []
|
||||
// this.searchList = []
|
||||
// console.log(e)
|
||||
// })
|
||||
// },
|
||||
// search(res) {
|
||||
// console.log(res, 'res')
|
||||
// // uni.showToast({
|
||||
// // title: '搜索：' + res,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// if (res == '') {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
|
||||
// },
|
||||
// input(res) {
|
||||
// console.log('----input:', res)
|
||||
// if (res == '') {
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
// },
|
||||
// clear(res) {
|
||||
// console.log('----clear:', res)
|
||||
// // uni.showToast({
|
||||
// // title: 'clear事件，清除值为：',
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// this.searchValue = ''
|
||||
// this.showSearchList = false
|
||||
// },
|
||||
// blur(res) {
|
||||
// // console.log('----blur:', res)
|
||||
// // if (res == '') {
|
||||
// // this.showSearchList = false
|
||||
// // this.searchList = []
|
||||
// // } else {
|
||||
// // this.getSearch()
|
||||
// // }
|
||||
// },
|
||||
// focus(e) {
|
||||
// console.log('----focus:')
|
||||
// // uni.showToast({
|
||||
// // title: 'focus事件，输出值为：' + e.value,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// // 等于1 就是有权限
|
||||
// // this.showSearchList = true
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
|
||||
submit(v) {
|
||||
this.$emit('submit', v)
|
||||
},
|
||||
clickIcon(v) {
|
||||
this.$emit('clickIcon', v)
|
||||
},
|
||||
showPreview(e) {
|
||||
console.log('e at line 56:', e)
|
||||
let conimg = e.target.dataset.nodes;
|
||||
let imgs = conimg.match(/<img[^>]+>/g); //选择节点中的img
|
||||
console.log('imgs at line 59:', imgs)
|
||||
let imgList = [];
|
||||
//遍历img标签的src里面的内容放在定义的数组imgList中
|
||||
for (var j = 0; j < imgs.length; j++) {
|
||||
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
|
||||
imgList.push(capture)
|
||||
|
||||
})
|
||||
}
|
||||
console.log('imgList.push at line 64:', imgList)
|
||||
|
||||
|
||||
//最后一步就是所有图片放在预览的方法previewImage中就可以了
|
||||
// uni.previewImage({
|
||||
// current: imgList,
|
||||
// urls: imgList,
|
||||
// })
|
||||
uni.previewImage({
|
||||
urls: imgList,
|
||||
longPressActions: {
|
||||
itemList: ['很抱歉，暂不支持保存图片到本地'],
|
||||
success: function(res) {
|
||||
// console.log(res,'+++++')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url)
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ['很抱歉，暂不支持保存图片到本地'],
|
||||
success: function(res) {
|
||||
// console.log(res,'+++++')
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// getSearch() {
|
||||
// $http.request({
|
||||
// url: "book/prescript/searchPrescript",
|
||||
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
// data: {
|
||||
// loadAnimate: 'none', // 请求加载动画
|
||||
// 'keywords': this.searchValue,
|
||||
// type: this.currentCateIndex + 1
|
||||
// },
|
||||
// header: { //默认 无 说明：请求头
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// }).then(res => {
|
||||
// console.log(res, '搜索结果')
|
||||
// if (res.code == 0 && res.list.length >= 0) {
|
||||
// this.showSearchList = true
|
||||
// this.searchList = res.list
|
||||
// } else {
|
||||
// this.searchList = []
|
||||
// }
|
||||
// }).catch(e => {
|
||||
// // this.dataList = []
|
||||
// this.searchList = []
|
||||
// console.log(e)
|
||||
// })
|
||||
// },
|
||||
// search(res) {
|
||||
// console.log(res, 'res')
|
||||
// // uni.showToast({
|
||||
// // title: '搜索：' + res,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// if (res == '') {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
|
||||
// },
|
||||
// input(res) {
|
||||
// console.log('----input:', res)
|
||||
// if (res == '') {
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
// },
|
||||
// clear(res) {
|
||||
// console.log('----clear:', res)
|
||||
// // uni.showToast({
|
||||
// // title: 'clear事件，清除值为：',
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// this.searchValue = ''
|
||||
// this.showSearchList = false
|
||||
// },
|
||||
// blur(res) {
|
||||
// // console.log('----blur:', res)
|
||||
// // if (res == '') {
|
||||
// // this.showSearchList = false
|
||||
// // this.searchList = []
|
||||
// // } else {
|
||||
// // this.getSearch()
|
||||
// // }
|
||||
// },
|
||||
// focus(e) {
|
||||
// console.log('----focus:')
|
||||
// // uni.showToast({
|
||||
// // title: 'focus事件，输出值为：' + e.value,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// // 等于1 就是有权限
|
||||
// // this.showSearchList = true
|
||||
|
||||
// },
|
||||
// cancel(res) {
|
||||
// uni.showToast({
|
||||
// title: '点击取消，输入值为：' + res.value,
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
|
||||
}
|
||||
// },
|
||||
// cancel(res) {
|
||||
// uni.showToast({
|
||||
// title: '点击取消，输入值为：' + res.value,
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods_nav {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 20rpx 20rpx 20rpx 30rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.goods_nav {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 20rpx 20rpx 20rpx 30rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left {
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.richDetail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.button {
|
||||
float: right;
|
||||
width: 240rpx;
|
||||
border-radius: 100rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
margin-left: 20rpx;
|
||||
background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
|
||||
|
||||
.richDetail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.button {
|
||||
float: right;
|
||||
width: 240rpx;
|
||||
border-radius: 100rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
margin-left: 20rpx;
|
||||
background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
|
||||
|
||||
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.icon_item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
.icon_item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,156 +1,167 @@
|
||||
<template><page-meta
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view style="width: 100%; height: 100%;">
|
||||
<view style="width: 100%; height: 100%">
|
||||
<view v-if="axiosStatus != ''">
|
||||
<scroll-view
|
||||
@scrolltolower="lower"
|
||||
scroll-y="true"
|
||||
class="scroll-Y"
|
||||
v-if="dataList && dataList.length > 0"
|
||||
style="height: 100%"
|
||||
>
|
||||
<view
|
||||
@click="gotoDetail(item, index)"
|
||||
class="scroll-view-item list_item"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="indexKey ? item[indexKey] : item.id"
|
||||
:index="indexKey ? item[indexKey] : index"
|
||||
>
|
||||
<view :class="['titleItem', '']">
|
||||
<slot name="leftSlot" :row="item" :item="item" :index="index">
|
||||
</slot>
|
||||
|
||||
<view v-if="axiosStatus!=''">
|
||||
<scroll-view @scrolltolower="lower" scroll-y="true" class="scroll-Y" v-if="dataList&&dataList.length > 0"
|
||||
style="height: 100%">
|
||||
<view @click="gotoDetail(item, index)" class="scroll-view-item list_item"
|
||||
v-for="(item, index) in dataList" :key="indexKey ? item[indexKey] : item.id"
|
||||
:index="indexKey ? item[indexKey] : index">
|
||||
<view :class="['titleItem', '']">
|
||||
<slot name="leftSlot" :row="item" :item="item" :index="index"> </slot>
|
||||
<template v-if="isCondition">
|
||||
<slot name="labelSlot" :row="item" :rowIndex="index"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item[label] }}
|
||||
</template>
|
||||
|
||||
<template v-if="isCondition">
|
||||
|
||||
<slot name="labelSlot" :row="item" :rowIndex="index"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item[label] }}
|
||||
</template>
|
||||
|
||||
<slot name="rightSlot" :row="item" :rowIndex="index"></slot>
|
||||
</view>
|
||||
<image v-if="!isNoIcon" src="@/static/icon/icon_right.png" class="rightArrow" style=""></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<u-empty v-else-if="noDataIcon && isLoadingHide" :mode="noDataIcon"
|
||||
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`">
|
||||
</u-empty>
|
||||
<u-divider style="width: 100%;" v-else text="暂无数据哦~"></u-divider>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<slot name="rightSlot" :row="item" :rowIndex="index"></slot>
|
||||
</view>
|
||||
<image
|
||||
v-if="!isNoIcon"
|
||||
src="@/static/icon/icon_right.png"
|
||||
class="rightArrow"
|
||||
style=""
|
||||
></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<u-empty
|
||||
v-else-if="noDataIcon && isLoadingHide"
|
||||
:mode="noDataIcon"
|
||||
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
|
||||
>
|
||||
</u-empty>
|
||||
<u-divider style="width: 100%" v-else text="暂无数据哦~"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
export default {
|
||||
props: [
|
||||
"indexKey",
|
||||
"dataList",
|
||||
"label",
|
||||
"isCondition",
|
||||
"isNoIcon",
|
||||
"pagination",
|
||||
"noDataIcon",
|
||||
"isLoadingHide",
|
||||
"axiosStatus",
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
status: '',
|
||||
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
this.status = '';
|
||||
|
||||
|
||||
},
|
||||
onHide() {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
lower() {
|
||||
this.$emit("lower");
|
||||
},
|
||||
gotoDetail(data, index) {
|
||||
this.$emit("hancleClick", data, index);
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: [
|
||||
"indexKey",
|
||||
"dataList",
|
||||
"label",
|
||||
"isCondition",
|
||||
"isNoIcon",
|
||||
"pagination",
|
||||
"noDataIcon",
|
||||
"isLoadingHide",
|
||||
"axiosStatus",
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
status: "",
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
this.status = "";
|
||||
},
|
||||
onHide() {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
lower() {
|
||||
this.$emit("lower");
|
||||
},
|
||||
gotoDetail(data, index) {
|
||||
this.$emit("hancleClick", data, index);
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list_item {
|
||||
width: 100%;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1rpx solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// position: relative;
|
||||
}
|
||||
.list_item {
|
||||
width: 100%;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1rpx solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// position: relative;
|
||||
}
|
||||
|
||||
.list_item :last-child(1) {
|
||||
border-bottom: none;
|
||||
}
|
||||
.list_item :last-child(1) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
// position: absolute;
|
||||
// right: 30rpx;
|
||||
// top: 20rpx;
|
||||
}
|
||||
.rightArrow {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
// position: absolute;
|
||||
// right: 30rpx;
|
||||
// top: 20rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: 100%;
|
||||
}
|
||||
.scroll-Y {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-view-item {
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
}
|
||||
.scroll-view-item {
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
}
|
||||
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
}
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
}
|
||||
|
||||
.titleItem {
|
||||
width: calc(100% - 30rpx);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.titleItem {
|
||||
width: calc(100% - 30rpx);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/deep/.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/deep/.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.list_item:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
</style>
|
||||
.list_item:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class="richDetail">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
|
||||
@@ -22,228 +23,240 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: ['detailInfo',],
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
}, filters: {
|
||||
/**
|
||||
* 处理富文本里的图片宽度自适应
|
||||
* 1.去掉img标签里的style、width、height属性
|
||||
* 2.img标签添加style属性：max-width:100%;height:auto
|
||||
* 3.修改所有style里的width属性为max-width:100%
|
||||
* 4.去掉<br/>标签
|
||||
* @param html
|
||||
* @returns {void|string|*}
|
||||
*/
|
||||
formatRichText(html) { //控制小程序中图片大小
|
||||
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
|
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
|
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
||||
'max-width:100%;');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||
newContent = newContent.replace(/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||||
return newContent;
|
||||
},
|
||||
// 时间格式化
|
||||
formatDate(date) {
|
||||
console.log(date)
|
||||
let newDate = new Date(date);
|
||||
let year = newDate.getFullYear();
|
||||
let month = newDate.getMonth().toString().padStart(2, 0);
|
||||
let day = newDate.getDay().toString().padStart(2, 0);
|
||||
return year + '-' + month + '-' + day;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatRichText(html) { //控制图片大小
|
||||
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
|
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
|
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
||||
'max-width:100%;');
|
||||
return match;
|
||||
});
|
||||
// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
|
||||
// match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
|
||||
// return match;
|
||||
// });
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||
newContent = newContent.replace(/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||||
return newContent;
|
||||
},
|
||||
|
||||
showPreview(e) {
|
||||
console.log('e at line 56:', e)
|
||||
let conimg = e.target.dataset.nodes;
|
||||
let imgs = conimg.match(/<img[^>]+>/g);//选择节点中的img
|
||||
console.log('imgs at line 59:', imgs)
|
||||
let imgList = [];
|
||||
//遍历img标签的src里面的内容放在定义的数组imgList中
|
||||
for (var j = 0; j < imgs.length; j++) {
|
||||
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
|
||||
imgList.push(capture)
|
||||
|
||||
})
|
||||
}
|
||||
console.log('imgList.push at line 64:', imgList)
|
||||
|
||||
|
||||
//最后一步就是所有图片放在预览的方法previewImage中就可以了
|
||||
// uni.previewImage({
|
||||
// current: imgList,
|
||||
// urls: imgList,
|
||||
// })
|
||||
uni.previewImage({
|
||||
urls: imgList,
|
||||
longPressActions: {
|
||||
itemList: ['很抱歉，暂不支持保存图片到本地'],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
props: ["detailInfo"],
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(options) {},
|
||||
onHide() {},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
filters: {
|
||||
/**
|
||||
* 处理富文本里的图片宽度自适应
|
||||
* 1.去掉img标签里的style、width、height属性
|
||||
* 2.img标签添加style属性：max-width:100%;height:auto
|
||||
* 3.修改所有style里的width属性为max-width:100%
|
||||
* 4.去掉<br/>标签
|
||||
* @param html
|
||||
* @returns {void|string|*}
|
||||
*/
|
||||
formatRichText(html) {
|
||||
//控制小程序中图片大小
|
||||
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
|
||||
match = match
|
||||
.replace(/style="[^"]+"/gi, "")
|
||||
.replace(/style='[^']+'/gi, "");
|
||||
match = match
|
||||
.replace(/width="[^"]+"/gi, "")
|
||||
.replace(/width='[^']+'/gi, "");
|
||||
match = match
|
||||
.replace(/height="[^"]+"/gi, "")
|
||||
.replace(/height='[^']+'/gi, "");
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(
|
||||
/style="[^"]+"/gi,
|
||||
function (match, capture) {
|
||||
match = match
|
||||
.replace(/width:[^;]+;/gi, "max-width:100%;")
|
||||
.replace(/width:[^;]+;/gi, "max-width:100%;");
|
||||
return match;
|
||||
},
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url)
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ['很抱歉，暂不支持保存图片到本地'],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, "");
|
||||
newContent = newContent.replace(
|
||||
/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"',
|
||||
);
|
||||
return newContent;
|
||||
},
|
||||
// 时间格式化
|
||||
formatDate(date) {
|
||||
console.log(date);
|
||||
let newDate = new Date(date);
|
||||
let year = newDate.getFullYear();
|
||||
let month = newDate.getMonth().toString().padStart(2, 0);
|
||||
let day = newDate.getDay().toString().padStart(2, 0);
|
||||
return year + "-" + month + "-" + day;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatRichText(html) {
|
||||
//控制图片大小
|
||||
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
|
||||
match = match
|
||||
.replace(/style="[^"]+"/gi, "")
|
||||
.replace(/style='[^']+'/gi, "");
|
||||
match = match
|
||||
.replace(/width="[^"]+"/gi, "")
|
||||
.replace(/width='[^']+'/gi, "");
|
||||
match = match
|
||||
.replace(/height="[^"]+"/gi, "")
|
||||
.replace(/height='[^']+'/gi, "");
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(
|
||||
/style="[^"]+"/gi,
|
||||
function (match, capture) {
|
||||
match = match
|
||||
.replace(/width:[^;]+;/gi, "max-width:100%;")
|
||||
.replace(/width:[^;]+;/gi, "max-width:100%;");
|
||||
return match;
|
||||
},
|
||||
// getSearch() {
|
||||
// $http.request({
|
||||
// url: "book/prescript/searchPrescript",
|
||||
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
// data: {
|
||||
// loadAnimate: 'none', // 请求加载动画
|
||||
// 'keywords': this.searchValue,
|
||||
// type: this.currentCateIndex + 1
|
||||
// },
|
||||
// header: { //默认 无 说明：请求头
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// }).then(res => {
|
||||
// console.log(res, '搜索结果')
|
||||
// if (res.code == 0 && res.list.length >= 0) {
|
||||
// this.showSearchList = true
|
||||
// this.searchList = res.list
|
||||
// } else {
|
||||
// this.searchList = []
|
||||
// }
|
||||
// }).catch(e => {
|
||||
// // this.dataList = []
|
||||
// this.searchList = []
|
||||
// console.log(e)
|
||||
// })
|
||||
// },
|
||||
// search(res) {
|
||||
// console.log(res, 'res')
|
||||
// // uni.showToast({
|
||||
// // title: '搜索：' + res,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// if (res == '') {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
|
||||
// },
|
||||
// input(res) {
|
||||
// console.log('----input:', res)
|
||||
// if (res == '') {
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
// },
|
||||
// clear(res) {
|
||||
// console.log('----clear:', res)
|
||||
// // uni.showToast({
|
||||
// // title: 'clear事件，清除值为：',
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// this.searchValue = ''
|
||||
// this.showSearchList = false
|
||||
// },
|
||||
// blur(res) {
|
||||
// // console.log('----blur:', res)
|
||||
// // if (res == '') {
|
||||
// // this.showSearchList = false
|
||||
// // this.searchList = []
|
||||
// // } else {
|
||||
// // this.getSearch()
|
||||
// // }
|
||||
// },
|
||||
// focus(e) {
|
||||
// console.log('----focus:')
|
||||
// // uni.showToast({
|
||||
// // title: 'focus事件，输出值为：' + e.value,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// // 等于1 就是有权限
|
||||
// // this.showSearchList = true
|
||||
|
||||
// },
|
||||
// cancel(res) {
|
||||
// uni.showToast({
|
||||
// title: '点击取消，输入值为：' + res.value,
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
);
|
||||
// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
|
||||
// match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
|
||||
// return match;
|
||||
// });
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, "");
|
||||
newContent = newContent.replace(
|
||||
/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"',
|
||||
);
|
||||
return newContent;
|
||||
},
|
||||
|
||||
}
|
||||
showPreview(e) {
|
||||
console.log("e at line 56:", e);
|
||||
let conimg = e.target.dataset.nodes;
|
||||
let imgs = conimg.match(/<img[^>]+>/g); //选择节点中的img
|
||||
console.log("imgs at line 59:", imgs);
|
||||
let imgList = [];
|
||||
//遍历img标签的src里面的内容放在定义的数组imgList中
|
||||
for (var j = 0; j < imgs.length; j++) {
|
||||
imgs[j].replace(
|
||||
/<img[^>]*src=['"]([^'"]+)[^>]*>/gi,
|
||||
function (match, capture) {
|
||||
imgList.push(capture);
|
||||
},
|
||||
);
|
||||
}
|
||||
console.log("imgList.push at line 64:", imgList);
|
||||
|
||||
//最后一步就是所有图片放在预览的方法previewImage中就可以了
|
||||
// uni.previewImage({
|
||||
// current: imgList,
|
||||
// urls: imgList,
|
||||
// })
|
||||
uni.previewImage({
|
||||
urls: imgList,
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url);
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
// getSearch() {
|
||||
// $http.request({
|
||||
// url: "book/prescript/searchPrescript",
|
||||
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
// data: {
|
||||
// loadAnimate: 'none', // 请求加载动画
|
||||
// 'keywords': this.searchValue,
|
||||
// type: this.currentCateIndex + 1
|
||||
// },
|
||||
// header: { //默认 无 说明：请求头
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// }).then(res => {
|
||||
// console.log(res, '搜索结果')
|
||||
// if (res.code == 0 && res.list.length >= 0) {
|
||||
// this.showSearchList = true
|
||||
// this.searchList = res.list
|
||||
// } else {
|
||||
// this.searchList = []
|
||||
// }
|
||||
// }).catch(e => {
|
||||
// // this.dataList = []
|
||||
// this.searchList = []
|
||||
// console.log(e)
|
||||
// })
|
||||
// },
|
||||
// search(res) {
|
||||
// console.log(res, 'res')
|
||||
// // uni.showToast({
|
||||
// // title: '搜索：' + res,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// if (res == '') {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
|
||||
// },
|
||||
// input(res) {
|
||||
// console.log('----input:', res)
|
||||
// if (res == '') {
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
// },
|
||||
// clear(res) {
|
||||
// console.log('----clear:', res)
|
||||
// // uni.showToast({
|
||||
// // title: 'clear事件，清除值为：',
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// this.searchValue = ''
|
||||
// this.showSearchList = false
|
||||
// },
|
||||
// blur(res) {
|
||||
// // console.log('----blur:', res)
|
||||
// // if (res == '') {
|
||||
// // this.showSearchList = false
|
||||
// // this.searchList = []
|
||||
// // } else {
|
||||
// // this.getSearch()
|
||||
// // }
|
||||
// },
|
||||
// focus(e) {
|
||||
// console.log('----focus:')
|
||||
// // uni.showToast({
|
||||
// // title: 'focus事件，输出值为：' + e.value,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// // 等于1 就是有权限
|
||||
// // this.showSearchList = true
|
||||
|
||||
// },
|
||||
// cancel(res) {
|
||||
// uni.showToast({
|
||||
// title: '点击取消，输入值为：' + res.value,
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -276,7 +289,7 @@ export default {
|
||||
p {
|
||||
display: block;
|
||||
// text-indent: 2em;
|
||||
letter-spacing: 2px ;
|
||||
letter-spacing: 2px;
|
||||
line-height: 46rpx;
|
||||
|
||||
img {
|
||||
@@ -290,13 +303,13 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ql-size-small{
|
||||
font-size:20rpx !important;
|
||||
}
|
||||
.ql-size-large{
|
||||
font-size:36rpx !important;
|
||||
}
|
||||
.ql-size-huge{
|
||||
font-size:64rpx !important;
|
||||
}
|
||||
.ql-size-small {
|
||||
font-size: 20rpx !important;
|
||||
}
|
||||
.ql-size-large {
|
||||
font-size: 36rpx !important;
|
||||
}
|
||||
.ql-size-huge {
|
||||
font-size: 64rpx !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,10 +29,10 @@
|
||||
selectGoodsData.vipPrice != null
|
||||
"
|
||||
>
|
||||
<text style="color: #e97512; font-weight: bold"
|
||||
<text style="color: #e97512; font-weight: bold;font-size: 28rpx !important;"
|
||||
>￥{{ selectGoodsData.vipPrice.toFixed(2) }}</text
|
||||
>
|
||||
<text style="color: #fa2d12; font-size: 12px; margin-left: 4px"
|
||||
<text style="color: #fa2d12; font-size:22rpx !important; margin-left: 4px"
|
||||
>VIP到手价</text
|
||||
>
|
||||
<!-- <text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{(selectGoodsData.price).toFixed(2)}}</text> -->
|
||||
@@ -43,16 +43,16 @@
|
||||
selectGoodsData.activityPrice && selectGoodsData.activityPrice > 0
|
||||
"
|
||||
>
|
||||
<text style="color: #e97512; font-weight: bold"
|
||||
<text style="color: #e97512; font-weight: bold;font-size: 28rpx !important;"
|
||||
>￥{{ selectGoodsData.activityPrice.toFixed(2) }}</text
|
||||
>
|
||||
<text style="color: #613804; font-size: 12px; margin-left: 4px"
|
||||
<text style="color: #613804; font-size: 22rpx !important; margin-left: 4px;"
|
||||
>活动价</text
|
||||
>
|
||||
<!-- <text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{(selectGoodsData.price).toFixed(2)}}</text> -->
|
||||
</text>
|
||||
|
||||
<text v-else style="color: #e97512; font-weight: bold">
|
||||
<text v-else style="color: #e97512;font-size: 28rpx !important; font-weight: bold">
|
||||
￥{{ Number(selectGoodsData.price).toFixed(2) }}</text
|
||||
>
|
||||
<u-icon
|
||||
@@ -98,7 +98,7 @@
|
||||
|
||||
<view :class="`goods_info `">
|
||||
<view class="name">{{ slotProps.row.productName }}</view>
|
||||
<view class="flex_box" style="align-items: center">
|
||||
<view class="" style="align-items: center">
|
||||
<!-- <text style="color: #999; text-decoration: line-through; margin-right: 20rpx;"
|
||||
v-if="slotProps.row.activityPrice > 0 && slotProps.row.activityPrice < slotProps.row.price" >￥{{slotProps.row.price}}</text>
|
||||
<view class="price" style="color: #258feb"
|
||||
@@ -118,7 +118,7 @@
|
||||
|
||||
margin-left: 10rpx;
|
||||
|
||||
font-size: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #f94f04;
|
||||
|
||||
font-weight: bold;
|
||||
@@ -188,28 +188,28 @@ export default {
|
||||
Number(slotProps.row.vipPrice) > 0
|
||||
) {
|
||||
return `
|
||||
<text style="color: #e97512; font-size: 12px; font-weight: bold;">
|
||||
<text style="color: #e97512; font-size: 28rpx; font-weight: bold;">
|
||||
￥${Number(slotProps.row.vipPrice).toFixed(2)}
|
||||
</text>
|
||||
<text
|
||||
style="color: #8a8a8a; font-size: 10px; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||||
style="color: #8a8a8a; font-size: 22rpx; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||||
>
|
||||
￥${Number(slotProps.row.price).toFixed(2)}
|
||||
</text>
|
||||
`;
|
||||
} else if (Number(slotProps.row.activityPrice) > 0) {
|
||||
return `
|
||||
<text style="color: #e97512; font-size: 12px; font-weight: bold;">
|
||||
<text style="color: #e97512; font-size: 28rpx; font-weight: bold;">
|
||||
￥${Number(slotProps.row.activityPrice).toFixed(2)}
|
||||
</text>
|
||||
<text
|
||||
style="color: #8a8a8a; font-size: 10px; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||||
style="color: #8a8a8a; font-size: 22rpx; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||||
>
|
||||
￥${Number(slotProps.row.price).toFixed(2)}
|
||||
</text>
|
||||
`;
|
||||
} else {
|
||||
return `<span style="color: #e97512;">
|
||||
return `<span style="color: #e97512;font-size: 28rpx;font-weight: bold;">
|
||||
￥${Number(slotProps.row.price).toFixed(2)}</span>
|
||||
`;
|
||||
}
|
||||
@@ -293,9 +293,9 @@ export default {
|
||||
// padding: 10rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
// height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
float: left;
|
||||
|
||||
.name {
|
||||
|
||||
@@ -72,12 +72,10 @@ export default {
|
||||
list: {
|
||||
immediate: true,
|
||||
handler(newRoute) {
|
||||
console.log(this.list,'8777777777777');
|
||||
this.dataList=[...this.list]
|
||||
|
||||
console.log(this.list, "8777777777777");
|
||||
this.dataList = [...this.list];
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
goCourseDescription(v) {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class="page container commonPageBox commonDetailPage">
|
||||
<player
|
||||
ref="player"
|
||||
@@ -236,7 +237,7 @@ export default {
|
||||
this.pickMode = tag;
|
||||
} else {
|
||||
this.requestAndroidPermission(
|
||||
"android.permission.WRITE_EXTERNAL_STORAGE"
|
||||
"android.permission.WRITE_EXTERNAL_STORAGE",
|
||||
);
|
||||
}
|
||||
} else {
|
||||
@@ -251,7 +252,7 @@ export default {
|
||||
// 补充清晰度配置
|
||||
list = list.map((item) => {
|
||||
item.definition = Number(
|
||||
this.definitions[this.selectedDefinition].quality
|
||||
this.definitions[this.selectedDefinition].quality,
|
||||
);
|
||||
return item;
|
||||
});
|
||||
@@ -305,7 +306,7 @@ export default {
|
||||
},
|
||||
requestAndroidDownloadPermission() {
|
||||
this.requestAndroidPermission(
|
||||
"android.permission.WRITE_EXTERNAL_STORAGE"
|
||||
"android.permission.WRITE_EXTERNAL_STORAGE",
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view
|
||||
class="container playerBox"
|
||||
id="playerBox"
|
||||
@@ -442,7 +443,7 @@ export default {
|
||||
name: "RateComponent", //倍速组件
|
||||
type: AliPlayerComponent.RateComponent,
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
// if (this.platform != "ios") {
|
||||
var fullScreenButtonComponent = Aliplayer.Component({
|
||||
@@ -568,7 +569,7 @@ export default {
|
||||
// this.$emit('changeScreenLoading',true)
|
||||
var status = this.player.fullscreenService.getIsFullScreen();
|
||||
console.log('this.$platform--------', this.platform);
|
||||
if (this.platform != 'ios') { // 改变按钮形态
|
||||
if (this.platform != 'ios') { // 改变按钮形态
|
||||
ownerInstance.callMethod('screenChange', {
|
||||
status: status,
|
||||
primary: status ? 'portrait' : 'landscape'
|
||||
|
||||
@@ -348,9 +348,7 @@ export default {
|
||||
},
|
||||
seek(num) {
|
||||
this.$nextTick(() => {
|
||||
|
||||
this.$refs.myVideo.seek(num);
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
@@ -393,12 +391,10 @@ export default {
|
||||
this.play_();
|
||||
this.succes = true;
|
||||
}
|
||||
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.myVideo.seek(data.detail.value); //获取秒数
|
||||
})
|
||||
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.myVideo.seek(data.detail.value); //获取秒数
|
||||
});
|
||||
},
|
||||
|
||||
//拖动中
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view
|
||||
class="container"
|
||||
id="Aliyun"
|
||||
@@ -59,7 +60,6 @@
|
||||
</template>
|
||||
|
||||
<view v-else style="height: 200px"> </view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -224,11 +224,10 @@ export default {
|
||||
.then(async (res) => {
|
||||
console.log("res at line 204:", res.video);
|
||||
var that = this;
|
||||
this.videoInfo=res.video
|
||||
this.videoInfo = res.video;
|
||||
that.videoData = {
|
||||
id: that.currentVideoId,
|
||||
vid: res.video.video,
|
||||
|
||||
};
|
||||
|
||||
if (res.video.type == 1) {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class="container" style="background-color: #000; position: relative">
|
||||
<!-- <u-icon
|
||||
@click="goBack"
|
||||
@@ -12,8 +13,10 @@
|
||||
statusBarHeight + 2
|
||||
}px; left: ${10}px;z-index: 999;`"
|
||||
></u-icon>-->
|
||||
<video src="https://video.taihumed.com/d0c8e6d23e5f71ef81714531858c0102/c27e8334925a485bb7d57b46463f24ab-75b0e05b7a76efaff190b6417b2168a7-sd-nbv1-encrypt-stream.m3u8"></video>
|
||||
|
||||
<video
|
||||
src="https://video.taihumed.com/d0c8e6d23e5f71ef81714531858c0102/c27e8334925a485bb7d57b46463f24ab-75b0e05b7a76efaff190b6417b2168a7-sd-nbv1-encrypt-stream.m3u8"
|
||||
></video>
|
||||
|
||||
<view style="width: 100%; height: 200px">
|
||||
<div
|
||||
class=""
|
||||
@@ -198,7 +201,7 @@ export default {
|
||||
console.log(
|
||||
"status at line 这是当前的状态158:",
|
||||
data.status,
|
||||
data.primary
|
||||
data.primary,
|
||||
);
|
||||
this.isFullScreen = !data.status;
|
||||
this.$emit("changeScreen", this.isFullScreen);
|
||||
@@ -371,13 +374,12 @@ export default {
|
||||
this.currentTime = data.time;
|
||||
console.log(
|
||||
"this.currentTime at line 这是结束的时候掉的存储视频:",
|
||||
this.currentTime
|
||||
this.currentTime,
|
||||
);
|
||||
clearInterval(this.$store.state.videoTimer);
|
||||
this.timer = null;
|
||||
|
||||
await this.setVideoTime();
|
||||
|
||||
},
|
||||
setVideoTime(time) {
|
||||
var data = {};
|
||||
@@ -429,7 +431,7 @@ export default {
|
||||
// if (this.currentTime) {
|
||||
await this.setVideoTime();
|
||||
// }
|
||||
}, 60000)
|
||||
}, 60000),
|
||||
);
|
||||
// }, 5000);
|
||||
},
|
||||
@@ -823,7 +825,7 @@ export default {
|
||||
"playConfig": {
|
||||
"EncryptType": 'AliyunVoDEncryption'
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class="container commonPageBox commonDetailPage" style="position: relative;">
|
||||
<!-- <cover-view class="image_box">
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view
|
||||
class="container commonPageBox commonDetailPage"
|
||||
style="position: relative"
|
||||
>
|
||||
<!-- <cover-view class="image_box">
|
||||
|
||||
|
||||
<image
|
||||
@@ -26,18 +30,15 @@
|
||||
style="width: 100%; height: 100%"
|
||||
autoplay
|
||||
id="videoId"
|
||||
|
||||
object-fit="contain"
|
||||
class="video-box"
|
||||
:src="videoUrl"
|
||||
:poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
|
||||
@play="playVideo"
|
||||
>
|
||||
<!-- <cover-image class="controls-play img" src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"></cover-image>
|
||||
<!-- <cover-image class="controls-play img" src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"></cover-image>
|
||||
|
||||
-->
|
||||
</video>
|
||||
|
||||
--></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -75,9 +76,9 @@ export default {
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/order/curriculum/back",
|
||||
});
|
||||
|
||||
|
||||
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
|
||||
|
||||
|
||||
// plus.screen.lockOrientation("portrait-primary");
|
||||
// #endif
|
||||
await this.setVideoTime();
|
||||
@@ -165,7 +166,7 @@ export default {
|
||||
getData(data) {
|
||||
console.log(
|
||||
"data at line 这是接口拿回来的时长11111111111111111111:",
|
||||
this.videoData.userCourseVideoPositionEntity.position
|
||||
this.videoData.userCourseVideoPositionEntity.position,
|
||||
);
|
||||
if (!this.isSetFirstTime) {
|
||||
var netWork = this.videoData.userCourseVideoPositionEntity
|
||||
@@ -196,7 +197,7 @@ export default {
|
||||
uni.setStorageSync("videoList", JSON.stringify(list));
|
||||
console.log(
|
||||
"list at line 这是设置完第一次初始值9777777777777777777770:",
|
||||
list
|
||||
list,
|
||||
);
|
||||
|
||||
console.log(this.firstTime, "1111111111111111111111");
|
||||
@@ -360,14 +361,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
|
||||
|
||||
.video-box{
|
||||
.video-box {
|
||||
position: relative;
|
||||
}
|
||||
.image_box{
|
||||
.image_box {
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -1,86 +1,89 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="cover-view用于覆盖map、video等原生组件"></page-head>
|
||||
<view class="cover-content" v-if="showMap">
|
||||
<!-- TODO暂时条件编译解决支付宝小程序不能正常显示 cover-x -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<map>
|
||||
<cover-view class="cover-view">简单的cover-view</cover-view>
|
||||
<cover-image class="cover-image" src="/static/uni.png"></cover-image>
|
||||
</map>
|
||||
<!-- #endif -->
|
||||
<view>
|
||||
<page-head title="cover-view用于覆盖map、video等原生组件"></page-head>
|
||||
<view class="cover-content" v-if="showMap">
|
||||
<!-- TODO暂时条件编译解决支付宝小程序不能正常显示 cover-x -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<map>
|
||||
<cover-view class="cover-view">简单的cover-view</cover-view>
|
||||
<cover-image class="cover-image" src="/static/uni.png"></cover-image>
|
||||
</map>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<!-- #ifndef MP-QQ -->
|
||||
<map></map>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<!-- #ifndef MP-QQ -->
|
||||
<map></map>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- TODO QQ暂不支持地图组件 -->
|
||||
<!-- #ifdef MP-QQ -->
|
||||
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"></video>
|
||||
<!-- #endif -->
|
||||
<!-- TODO QQ暂不支持地图组件 -->
|
||||
<!-- #ifdef MP-QQ -->
|
||||
<video
|
||||
class="video"
|
||||
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
|
||||
></video>
|
||||
<!-- #endif -->
|
||||
|
||||
<cover-view class="cover-view">简单的cover-view</cover-view>
|
||||
<!-- #ifndef MP-QQ -->
|
||||
<cover-image class="cover-image" src="/static/uni.png"></cover-image>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<cover-view class="cover-view">简单的cover-view</cover-view>
|
||||
<!-- #ifndef MP-QQ -->
|
||||
<cover-image class="cover-image" src="/static/uni.png"></cover-image>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showMap: false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS || MP-BAIDU
|
||||
setTimeout(()=>{
|
||||
this.showMap = true
|
||||
},350)
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || MP-BAIDU
|
||||
this.showMap = true
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showMap: false,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS || MP-BAIDU
|
||||
setTimeout(() => {
|
||||
this.showMap = true;
|
||||
}, 350);
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || MP-BAIDU
|
||||
this.showMap = true;
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
map {
|
||||
width: 750rpx;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
map {
|
||||
width: 750rpx;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
}
|
||||
.video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: relative;
|
||||
}
|
||||
.cover-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-view {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 375rpx;
|
||||
text-align: center;
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
.cover-view {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 375rpx;
|
||||
text-align: center;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.cover-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,207 +1,340 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body">
|
||||
<view class='wrapper'>
|
||||
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
|
||||
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
|
||||
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
|
||||
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
|
||||
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
|
||||
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
|
||||
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight" data-value="2"></view>
|
||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em"></view>
|
||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" data-value="20px"></view>
|
||||
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
||||
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view>
|
||||
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
|
||||
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
|
||||
<view class="iconfont icon-date" @tap="insertDate"></view>
|
||||
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
|
||||
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
|
||||
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
|
||||
|
||||
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||
|
||||
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
||||
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
||||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
|
||||
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
|
||||
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
|
||||
|
||||
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
||||
|
||||
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
|
||||
</view>
|
||||
|
||||
<view class="editor-wrapper">
|
||||
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
|
||||
show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
|
||||
</editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="container">
|
||||
<view class="page-body">
|
||||
<view class="wrapper">
|
||||
<view
|
||||
class="toolbar"
|
||||
@tap="format"
|
||||
style="height: 120px; overflow-y: auto"
|
||||
>
|
||||
<view
|
||||
:class="formats.bold ? 'ql-active' : ''"
|
||||
class="iconfont icon-zitijiacu"
|
||||
data-name="bold"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.italic ? 'ql-active' : ''"
|
||||
class="iconfont icon-zitixieti"
|
||||
data-name="italic"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.underline ? 'ql-active' : ''"
|
||||
class="iconfont icon-zitixiahuaxian"
|
||||
data-name="underline"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.strike ? 'ql-active' : ''"
|
||||
class="iconfont icon-zitishanchuxian"
|
||||
data-name="strike"
|
||||
></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view
|
||||
:class="formats.align === 'left' ? 'ql-active' : ''"
|
||||
class="iconfont icon-zuoduiqi"
|
||||
data-name="align"
|
||||
data-value="left"
|
||||
></view>
|
||||
<!-- #endif -->
|
||||
<view
|
||||
:class="formats.align === 'center' ? 'ql-active' : ''"
|
||||
class="iconfont icon-juzhongduiqi"
|
||||
data-name="align"
|
||||
data-value="center"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.align === 'right' ? 'ql-active' : ''"
|
||||
class="iconfont icon-youduiqi"
|
||||
data-name="align"
|
||||
data-value="right"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.align === 'justify' ? 'ql-active' : ''"
|
||||
class="iconfont icon-zuoyouduiqi"
|
||||
data-name="align"
|
||||
data-value="justify"
|
||||
></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view
|
||||
:class="formats.lineHeight ? 'ql-active' : ''"
|
||||
class="iconfont icon-line-height"
|
||||
data-name="lineHeight"
|
||||
data-value="2"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.letterSpacing ? 'ql-active' : ''"
|
||||
class="iconfont icon-Character-Spacing"
|
||||
data-name="letterSpacing"
|
||||
data-value="2em"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.marginTop ? 'ql-active' : ''"
|
||||
class="iconfont icon-722bianjiqi_duanqianju"
|
||||
data-name="marginTop"
|
||||
data-value="20px"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.marginBottom ? 'ql-active' : ''"
|
||||
class="iconfont icon-723bianjiqi_duanhouju"
|
||||
data-name="marginBottom"
|
||||
data-value="20px"
|
||||
></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
||||
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view
|
||||
:class="formats.fontFamily ? 'ql-active' : ''"
|
||||
class="iconfont icon-font"
|
||||
data-name="fontFamily"
|
||||
data-value="Pacifico"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.fontSize === '24px' ? 'ql-active' : ''"
|
||||
class="iconfont icon-fontsize"
|
||||
data-name="fontSize"
|
||||
data-value="24px"
|
||||
></view>
|
||||
<!-- #endif -->
|
||||
<view
|
||||
:class="formats.color === '#0000ff' ? 'ql-active' : ''"
|
||||
class="iconfont icon-text_color"
|
||||
data-name="color"
|
||||
data-value="#0000ff"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
|
||||
class="iconfont icon-fontbgcolor"
|
||||
data-name="backgroundColor"
|
||||
data-value="#00ff00"
|
||||
></view>
|
||||
<view class="iconfont icon-date" @tap="insertDate"></view>
|
||||
<view
|
||||
class="iconfont icon--checklist"
|
||||
data-name="list"
|
||||
data-value="check"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.list === 'ordered' ? 'ql-active' : ''"
|
||||
class="iconfont icon-youxupailie"
|
||||
data-name="list"
|
||||
data-value="ordered"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.list === 'bullet' ? 'ql-active' : ''"
|
||||
class="iconfont icon-wuxupailie"
|
||||
data-name="list"
|
||||
data-value="bullet"
|
||||
></view>
|
||||
|
||||
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||
|
||||
<view
|
||||
class="iconfont icon-outdent"
|
||||
data-name="indent"
|
||||
data-value="-1"
|
||||
></view>
|
||||
<view
|
||||
class="iconfont icon-indent"
|
||||
data-name="indent"
|
||||
data-value="+1"
|
||||
></view>
|
||||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||
<view
|
||||
:class="formats.header === 1 ? 'ql-active' : ''"
|
||||
class="iconfont icon-format-header-1"
|
||||
data-name="header"
|
||||
:data-value="1"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.script === 'sub' ? 'ql-active' : ''"
|
||||
class="iconfont icon-zitixiabiao"
|
||||
data-name="script"
|
||||
data-value="sub"
|
||||
></view>
|
||||
<view
|
||||
:class="formats.script === 'super' ? 'ql-active' : ''"
|
||||
class="iconfont icon-zitishangbiao"
|
||||
data-name="script"
|
||||
data-value="super"
|
||||
></view>
|
||||
|
||||
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
||||
|
||||
<view
|
||||
:class="formats.direction === 'rtl' ? 'ql-active' : ''"
|
||||
class="iconfont icon-direction-rtl"
|
||||
data-name="direction"
|
||||
data-value="rtl"
|
||||
></view>
|
||||
</view>
|
||||
|
||||
<view class="editor-wrapper">
|
||||
<editor
|
||||
id="editor"
|
||||
class="ql-container"
|
||||
placeholder="开始输入..."
|
||||
show-img-size
|
||||
show-img-toolbar
|
||||
show-img-resize
|
||||
@statuschange="onStatusChange"
|
||||
:read-only="readOnly"
|
||||
@ready="onEditorReady"
|
||||
>
|
||||
</editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
readOnly: false,
|
||||
formats: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifndef MP-BAIDU
|
||||
uni.loadFontFace({
|
||||
family: 'Pacifico',
|
||||
source: 'url("https://sungd.github.io/Pacifico.ttf")'
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
readOnlyChange() {
|
||||
this.readOnly = !this.readOnly
|
||||
},
|
||||
onEditorReady() {
|
||||
// #ifdef MP-BAIDU
|
||||
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
readOnly: false,
|
||||
formats: {},
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// #ifndef MP-BAIDU
|
||||
uni.loadFontFace({
|
||||
family: "Pacifico",
|
||||
source: 'url("https://sungd.github.io/Pacifico.ttf")',
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
readOnlyChange() {
|
||||
this.readOnly = !this.readOnly;
|
||||
},
|
||||
onEditorReady() {
|
||||
// #ifdef MP-BAIDU
|
||||
this.editorCtx =
|
||||
requireDynamicLib("editorLib").createEditorContext("editor");
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || H5
|
||||
uni.createSelectorQuery().select('#editor').context((res) => {
|
||||
this.editorCtx = res.context
|
||||
}).exec()
|
||||
// #endif
|
||||
},
|
||||
undo() {
|
||||
this.editorCtx.undo()
|
||||
},
|
||||
redo() {
|
||||
this.editorCtx.redo()
|
||||
},
|
||||
format(e) {
|
||||
let {
|
||||
name,
|
||||
value
|
||||
} = e.target.dataset
|
||||
if (!name) return
|
||||
// console.log('format', name, value)
|
||||
this.editorCtx.format(name, value)
|
||||
},
|
||||
onStatusChange(e) {
|
||||
const formats = e.detail
|
||||
this.formats = formats
|
||||
},
|
||||
insertDivider() {
|
||||
this.editorCtx.insertDivider({
|
||||
success: function() {
|
||||
console.log('insert divider success')
|
||||
}
|
||||
})
|
||||
},
|
||||
clear() {
|
||||
uni.showModal({
|
||||
title: '清空编辑器',
|
||||
content: '确定清空编辑器全部内容？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.editorCtx.clear({
|
||||
success: function(res) {
|
||||
console.log("clear success")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
removeFormat() {
|
||||
this.editorCtx.removeFormat()
|
||||
},
|
||||
insertDate() {
|
||||
const date = new Date()
|
||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||||
this.editorCtx.insertText({
|
||||
text: formatDate
|
||||
})
|
||||
},
|
||||
insertImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
this.editorCtx.insertImage({
|
||||
src: res.tempFilePaths[0],
|
||||
alt: '图像',
|
||||
success: function() {
|
||||
console.log('insert image success')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || H5
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select("#editor")
|
||||
.context((res) => {
|
||||
this.editorCtx = res.context;
|
||||
})
|
||||
.exec();
|
||||
// #endif
|
||||
},
|
||||
undo() {
|
||||
this.editorCtx.undo();
|
||||
},
|
||||
redo() {
|
||||
this.editorCtx.redo();
|
||||
},
|
||||
format(e) {
|
||||
let { name, value } = e.target.dataset;
|
||||
if (!name) return;
|
||||
// console.log('format', name, value)
|
||||
this.editorCtx.format(name, value);
|
||||
},
|
||||
onStatusChange(e) {
|
||||
const formats = e.detail;
|
||||
this.formats = formats;
|
||||
},
|
||||
insertDivider() {
|
||||
this.editorCtx.insertDivider({
|
||||
success: function () {
|
||||
console.log("insert divider success");
|
||||
},
|
||||
});
|
||||
},
|
||||
clear() {
|
||||
uni.showModal({
|
||||
title: "清空编辑器",
|
||||
content: "确定清空编辑器全部内容？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.editorCtx.clear({
|
||||
success: function (res) {
|
||||
console.log("clear success");
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
removeFormat() {
|
||||
this.editorCtx.removeFormat();
|
||||
},
|
||||
insertDate() {
|
||||
const date = new Date();
|
||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
this.editorCtx.insertText({
|
||||
text: formatDate,
|
||||
});
|
||||
},
|
||||
insertImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
this.editorCtx.insertImage({
|
||||
src: res.tempFilePaths[0],
|
||||
alt: "图像",
|
||||
success: function () {
|
||||
console.log("insert image success");
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "./editor-icon.css";
|
||||
@import "./editor-icon.css";
|
||||
|
||||
.page-body {
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height));
|
||||
}
|
||||
.page-body {
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height));
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
|
||||
background: #fff;
|
||||
}
|
||||
.editor-wrapper {
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
padding: 8px 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
padding: 8px 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 0;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
}
|
||||
.toolbar {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 0;
|
||||
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
box-sizing: border-box;
|
||||
padding: 12px 15px;
|
||||
width: 100%;
|
||||
min-height: 30vh;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ql-container {
|
||||
box-sizing: border-box;
|
||||
padding: 12px 15px;
|
||||
width: 100%;
|
||||
min-height: 30vh;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ql-active {
|
||||
color: #06c;
|
||||
}
|
||||
.ql-active {
|
||||
color: #06c;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,86 +1,94 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="form"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">姓名</view>
|
||||
<input class="uni-input" name="nickname" placeholder="请输入姓名" />
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">性别</view>
|
||||
<radio-group name="gender">
|
||||
<label>
|
||||
<radio value="男" /><text>男</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="女" /><text>女</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">爱好</view>
|
||||
<checkbox-group name="loves">
|
||||
<label>
|
||||
<checkbox value="读书" /><text>读书</text>
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="写字" /><text>写字</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">年龄</view>
|
||||
<slider value="20" name="age" show-value></slider>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">保留选项</view>
|
||||
<view>
|
||||
<switch name="switch" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button form-type="submit">Submit</button>
|
||||
<button type="default" form-type="reset">Reset</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head title="form"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">姓名</view>
|
||||
<input class="uni-input" name="nickname" placeholder="请输入姓名" />
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">性别</view>
|
||||
<radio-group name="gender">
|
||||
<label> <radio value="男" /><text>男</text> </label>
|
||||
<label> <radio value="女" /><text>女</text> </label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">爱好</view>
|
||||
<checkbox-group name="loves">
|
||||
<label> <checkbox value="读书" /><text>读书</text> </label>
|
||||
<label> <checkbox value="写字" /><text>写字</text> </label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">年龄</view>
|
||||
<slider value="20" name="age" show-value></slider>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">保留选项</view>
|
||||
<view>
|
||||
<switch name="switch" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button form-type="submit">Submit</button>
|
||||
<button type="default" form-type="reset">Reset</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import graceChecker from "../../../common/graceChecker.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formSubmit: function(e) {
|
||||
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||||
//定义表单规则
|
||||
var rule = [
|
||||
{name:"nickname", checkType : "string", checkRule:"1,3", errorMsg:"姓名应为1-3个字符"},
|
||||
{name:"gender", checkType : "in", checkRule:"男,女", errorMsg:"请选择性别"},
|
||||
{name:"loves", checkType : "notnull", checkRule:"", errorMsg:"请选择爱好"}
|
||||
];
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
var checkRes = graceChecker.check(formData, rule);
|
||||
if(checkRes){
|
||||
uni.showToast({title:"验证通过!", icon:"none"});
|
||||
}else{
|
||||
uni.showToast({ title: graceChecker.error, icon: "none" });
|
||||
}
|
||||
},
|
||||
formReset: function(e) {
|
||||
console.log('清空数据')
|
||||
}
|
||||
}
|
||||
}
|
||||
import graceChecker from "../../../common/graceChecker.js";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
formSubmit: function (e) {
|
||||
console.log(
|
||||
"form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value),
|
||||
);
|
||||
//定义表单规则
|
||||
var rule = [
|
||||
{
|
||||
name: "nickname",
|
||||
checkType: "string",
|
||||
checkRule: "1,3",
|
||||
errorMsg: "姓名应为1-3个字符",
|
||||
},
|
||||
{
|
||||
name: "gender",
|
||||
checkType: "in",
|
||||
checkRule: "男,女",
|
||||
errorMsg: "请选择性别",
|
||||
},
|
||||
{
|
||||
name: "loves",
|
||||
checkType: "notnull",
|
||||
checkRule: "",
|
||||
errorMsg: "请选择爱好",
|
||||
},
|
||||
];
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
var checkRes = graceChecker.check(formData, rule);
|
||||
if (checkRes) {
|
||||
uni.showToast({ title: "验证通过!", icon: "none" });
|
||||
} else {
|
||||
uni.showToast({ title: graceChecker.error, icon: "none" });
|
||||
}
|
||||
},
|
||||
formReset: function (e) {
|
||||
console.log("清空数据");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-form-item .title {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.uni-form-item .title {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,34 +1,36 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">
|
||||
示例1 <text>\n本地图片</text>
|
||||
</view>
|
||||
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
|
||||
<image class="image" mode="widthFix" src="../../../static/uni.png" />
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例2 <text>\n网络图片</text>
|
||||
</view>
|
||||
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
|
||||
<image class="image" mode="widthFix" src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title"> 示例1 <text>\n本地图片</text> </view>
|
||||
<view class="uni-center" style="background: #ffffff; font-size: 0">
|
||||
<image class="image" mode="widthFix" src="../../../static/uni.png" />
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例2 <text>\n网络图片</text>
|
||||
</view>
|
||||
<view class="uni-center" style="background: #ffffff; font-size: 0">
|
||||
<image
|
||||
class="image"
|
||||
mode="widthFix"
|
||||
src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'image'
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "image",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.image {
|
||||
margin:40rpx 0;
|
||||
width: 200rpx;
|
||||
}
|
||||
.image {
|
||||
margin: 40rpx 0;
|
||||
width: 200rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,245 +1,356 @@
|
||||
<template>
|
||||
<view class="nvue-page-root">
|
||||
<view class="page-title">
|
||||
<view class="page-title__wrapper">
|
||||
<text class="page-title__text">{{title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">可自动聚焦的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" focus placeholder="自动获得焦点" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为搜索</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为发送</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" confirm-type="send" placeholder="键盘右下角按钮显示为发送" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">控制最大输入长度的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">实时获取输入值：{{inputValue}}</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">控制输入的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">数字输入的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">密码输入的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">带小数点的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" /> </view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" /> </view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">控制占位符颜色的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
|
||||
<text class="uni-icon" v-if="showClearIcon" @click="clearIcon"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
|
||||
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nvue-page-root">
|
||||
<view class="page-title">
|
||||
<view class="page-title__wrapper">
|
||||
<text class="page-title__text">{{ title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">可自动聚焦的 input</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" focus placeholder="自动获得焦点" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view
|
||||
v-if="platform === 'ios' && !isNvue"
|
||||
class="uni-form-item uni-column"
|
||||
>
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title"
|
||||
>隐藏 iOS 软键盘上的导航条</text
|
||||
></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
placeholder="触摸其他地方收起键盘"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title"
|
||||
>键盘右下角按钮显示为搜索</text
|
||||
></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
confirm-type="search"
|
||||
placeholder="键盘右下角按钮显示为搜索"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title"
|
||||
>键盘右下角按钮显示为发送</text
|
||||
></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
confirm-type="send"
|
||||
placeholder="键盘右下角按钮显示为发送"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title"
|
||||
>控制最大输入长度的 input</text
|
||||
></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
maxlength="10"
|
||||
placeholder="最大输入长度为10"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title"
|
||||
>实时获取输入值：{{ inputValue }}</text
|
||||
></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
@input="onKeyInput"
|
||||
placeholder="输入同步到view中"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">控制输入的 input</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
@input="replaceInput"
|
||||
v-model="changeValue"
|
||||
placeholder="连续的两个1会变成2"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">控制键盘的 input</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
ref="input1"
|
||||
@input="hideKeyboard"
|
||||
placeholder="输入123自动收起键盘"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">数字输入的 input</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
type="number"
|
||||
placeholder="这是一个数字输入框"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">密码输入的 input</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
password
|
||||
type="text"
|
||||
placeholder="这是一个密码输入框"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">带小数点的 input</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
type="digit"
|
||||
placeholder="带小数点的数字键盘"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">身份证输入的 input</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title"
|
||||
>控制占位符颜色的 input</text
|
||||
></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
placeholder-style="color:#F76260"
|
||||
placeholder="占位符字体是红色的"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">带清除按钮的输入框</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
placeholder="带清除按钮的输入框"
|
||||
:value="inputClearValue"
|
||||
@input="clearInput"
|
||||
/>
|
||||
<text class="uni-icon" v-if="showClearIcon" @click="clearIcon"
|
||||
></text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"
|
||||
><text class="uni-form-item__title">可查看密码的输入框</text></view
|
||||
>
|
||||
<view class="uni-input-wrapper">
|
||||
<input
|
||||
class="uni-input"
|
||||
placeholder="请输入密码"
|
||||
:password="showPassword"
|
||||
/>
|
||||
<text
|
||||
class="uni-icon"
|
||||
:class="[!showPassword ? 'uni-eye-active' : '']"
|
||||
@click="changePassword"
|
||||
></text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'input',
|
||||
focus: false,
|
||||
inputValue: '',
|
||||
showClearIcon: false,
|
||||
inputClearValue: '',
|
||||
changeValue: '',
|
||||
showPassword: true,
|
||||
src: '../../../static/eye-1.png',
|
||||
platform: '',
|
||||
isNvue: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onKeyInput: function(event) {
|
||||
this.inputValue = event.detail.value
|
||||
},
|
||||
replaceInput: function(event) {
|
||||
var value = event.detail.value;
|
||||
if (value === '11') {
|
||||
this.changeValue = '2';
|
||||
}
|
||||
},
|
||||
hideKeyboard: function(event) {
|
||||
if (event.detail.value === '123') {
|
||||
uni.hideKeyboard();
|
||||
}
|
||||
},
|
||||
clearInput: function(event) {
|
||||
this.inputClearValue = event.detail.value;
|
||||
if (event.detail.value.length > 0) {
|
||||
this.showClearIcon = true;
|
||||
} else {
|
||||
this.showClearIcon = false;
|
||||
}
|
||||
},
|
||||
clearIcon: function() {
|
||||
this.inputClearValue = '';
|
||||
this.showClearIcon = false;
|
||||
},
|
||||
changePassword: function() {
|
||||
this.showPassword = !this.showPassword;
|
||||
},
|
||||
onFocus() {
|
||||
this.$mp.page.$getAppWebview().setStyle({
|
||||
softinputNavBar: 'none'
|
||||
})
|
||||
},
|
||||
onBlur() {
|
||||
this.$mp.page.$getAppWebview().setStyle({
|
||||
softinputNavBar: 'auto'
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.platform = uni.getSystemInfoSync().platform
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
this.isNvue = true
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "input",
|
||||
focus: false,
|
||||
inputValue: "",
|
||||
showClearIcon: false,
|
||||
inputClearValue: "",
|
||||
changeValue: "",
|
||||
showPassword: true,
|
||||
src: "../../../static/eye-1.png",
|
||||
platform: "",
|
||||
isNvue: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onKeyInput: function (event) {
|
||||
this.inputValue = event.detail.value;
|
||||
},
|
||||
replaceInput: function (event) {
|
||||
var value = event.detail.value;
|
||||
if (value === "11") {
|
||||
this.changeValue = "2";
|
||||
}
|
||||
},
|
||||
hideKeyboard: function (event) {
|
||||
if (event.detail.value === "123") {
|
||||
uni.hideKeyboard();
|
||||
}
|
||||
},
|
||||
clearInput: function (event) {
|
||||
this.inputClearValue = event.detail.value;
|
||||
if (event.detail.value.length > 0) {
|
||||
this.showClearIcon = true;
|
||||
} else {
|
||||
this.showClearIcon = false;
|
||||
}
|
||||
},
|
||||
clearIcon: function () {
|
||||
this.inputClearValue = "";
|
||||
this.showClearIcon = false;
|
||||
},
|
||||
changePassword: function () {
|
||||
this.showPassword = !this.showPassword;
|
||||
},
|
||||
onFocus() {
|
||||
this.$mp.page.$getAppWebview().setStyle({
|
||||
softinputNavBar: "none",
|
||||
});
|
||||
},
|
||||
onBlur() {
|
||||
this.$mp.page.$getAppWebview().setStyle({
|
||||
softinputNavBar: "auto",
|
||||
});
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.platform = uni.getSystemInfoSync().platform;
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
this.isNvue = true;
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nvue-page-root {
|
||||
background-color: #F8F8F8;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.nvue-page-root {
|
||||
background-color: #f8f8f8;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 35rpx;
|
||||
}
|
||||
.page-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 35rpx;
|
||||
}
|
||||
|
||||
.page-title__wrapper {
|
||||
padding: 0px 20px;
|
||||
border-bottom-color: #D8D8D8;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.page-title__wrapper {
|
||||
padding: 0px 20px;
|
||||
border-bottom-color: #d8d8d8;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.page-title__text {
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
color: #BEBEBE;
|
||||
}
|
||||
.page-title__text {
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
color: #bebebe;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 5px 13px;
|
||||
}
|
||||
.title {
|
||||
padding: 5px 13px;
|
||||
}
|
||||
|
||||
.uni-form-item__title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.uni-form-item__title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.uni-input-wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: 8px 13px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.uni-input-wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: 8px 13px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 15px;
|
||||
padding: 0px;
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.uni-input {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 15px;
|
||||
padding: 0px;
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.uni-icon {
|
||||
font-family: uniicons;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #999999;
|
||||
}
|
||||
.uni-icon {
|
||||
font-family: uniicons;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.uni-eye-active {
|
||||
color: #007AFF;
|
||||
}
|
||||
.uni-eye-active {
|
||||
color: #007aff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,103 +1,117 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">表单组件在label内</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
|
||||
<view>
|
||||
<checkbox :value="item.name" :checked="item.checked"></checkbox>
|
||||
</view>
|
||||
<view>{{item.value}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">表单组件在label内</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label
|
||||
class="uni-list-cell uni-list-cell-pd"
|
||||
v-for="item in checkboxItems"
|
||||
:key="item.name"
|
||||
>
|
||||
<view>
|
||||
<checkbox :value="item.name" :checked="item.checked"></checkbox>
|
||||
</view>
|
||||
<view>{{ item.value }}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label用for标识表单组件</view>
|
||||
<radio-group class="uni-list" @change="radioChange">
|
||||
<view class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
|
||||
<view>
|
||||
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
|
||||
</view>
|
||||
<label class="label-2-text" :for="item.name">
|
||||
<text>{{item.value}}</text>
|
||||
</label>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label用for标识表单组件</view>
|
||||
<radio-group class="uni-list" @change="radioChange">
|
||||
<view
|
||||
class="uni-list-cell uni-list-cell-pd"
|
||||
v-for="(item, index) in radioItems"
|
||||
:key="index"
|
||||
>
|
||||
<view>
|
||||
<radio
|
||||
:id="item.name"
|
||||
:value="item.name"
|
||||
:checked="item.checked"
|
||||
></radio>
|
||||
</view>
|
||||
<label class="label-2-text" :for="item.name">
|
||||
<text>{{ item.value }}</text>
|
||||
</label>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label内有多个时选中第一个</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="label-3">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项一</checkbox>
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项二</checkbox>
|
||||
</view>
|
||||
<view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label内有多个时选中第一个</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="label-3">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项一</checkbox>
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项二</checkbox>
|
||||
</view>
|
||||
<view class="uni-link uni-center" style="margin-top: 20rpx"
|
||||
>点击该label下的文字默认选中第一个checkbox</view
|
||||
>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'label',
|
||||
checkboxItems: [{
|
||||
name: 'USA',
|
||||
value: '美国'
|
||||
},
|
||||
{
|
||||
name: 'CHN',
|
||||
value: '中国',
|
||||
checked: 'true'
|
||||
}
|
||||
],
|
||||
radioItems: [{
|
||||
name: 'USA',
|
||||
value: '美国'
|
||||
},
|
||||
{
|
||||
name: 'CHN',
|
||||
value: '中国',
|
||||
checked: 'true'
|
||||
}
|
||||
],
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function(e) {
|
||||
var checked = e.detail.value
|
||||
console.log(checked)
|
||||
|
||||
},
|
||||
radioChange: function(e) {
|
||||
var checked = e.detail.value
|
||||
console.log(checked)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "label",
|
||||
checkboxItems: [
|
||||
{
|
||||
name: "USA",
|
||||
value: "美国",
|
||||
},
|
||||
{
|
||||
name: "CHN",
|
||||
value: "中国",
|
||||
checked: "true",
|
||||
},
|
||||
],
|
||||
radioItems: [
|
||||
{
|
||||
name: "USA",
|
||||
value: "美国",
|
||||
},
|
||||
{
|
||||
name: "CHN",
|
||||
value: "中国",
|
||||
checked: "true",
|
||||
},
|
||||
],
|
||||
hidden: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function (e) {
|
||||
var checked = e.detail.value;
|
||||
console.log(checked);
|
||||
},
|
||||
radioChange: function (e) {
|
||||
var checked = e.detail.value;
|
||||
console.log(checked);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start
|
||||
}
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-list .label-3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.label-2-text {
|
||||
flex: 1;
|
||||
}
|
||||
.uni-list .label-3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.label-2-text {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,52 +1,53 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-common-mt">
|
||||
<view>
|
||||
<map :latitude="latitude" :longitude="longitude" :markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-common-mt">
|
||||
<view>
|
||||
<map :latitude="latitude" :longitude="longitude" :markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'map',
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [{
|
||||
id: 1,
|
||||
latitude: 39.9085,
|
||||
longitude: 116.39747,
|
||||
// #ifdef APP-PLUS
|
||||
iconPath: '../../../static/app-plus/location@3x.png',
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
iconPath: '../../../static/location.png',
|
||||
// #endif
|
||||
}, {
|
||||
id: 2,
|
||||
latitude: 39.90,
|
||||
longitude: 116.39,
|
||||
// #ifdef APP-PLUS
|
||||
iconPath: '../../../static/app-plus/location@3x.png',
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
iconPath: '../../../static/location.png',
|
||||
// #endif
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "map",
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [
|
||||
{
|
||||
id: 1,
|
||||
latitude: 39.9085,
|
||||
longitude: 116.39747,
|
||||
// #ifdef APP-PLUS
|
||||
iconPath: "../../../static/app-plus/location@3x.png",
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
iconPath: "../../../static/location.png",
|
||||
// #endif
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
latitude: 39.9,
|
||||
longitude: 116.39,
|
||||
// #ifdef APP-PLUS
|
||||
iconPath: "../../../static/app-plus/location@3x.png",
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
iconPath: "../../../static/location.png",
|
||||
// #endif
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
map {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
}
|
||||
map {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,129 +1,143 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<page-head title="movable-view,可拖动视图"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 1
|
||||
<text>\nmovable-view 区域小于 movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
|
||||
</movable-area>
|
||||
<view @tap="tap" class="uni-link uni-center uni-common-mt">
|
||||
点击这里移动至 (30px, 30px)
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 2
|
||||
<text>\nmovable-view区域大于movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view class="max" direction="all">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 3
|
||||
<text>\n只可以横向移动</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="horizontal">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 4
|
||||
<text>\n只可以纵向移动</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="vertical">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 5
|
||||
<text>\n可超出边界</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="all" out-of-bounds>text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 6
|
||||
<text>\n带有惯性</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="all" inertia>text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 7
|
||||
<text>\n可放缩</text>
|
||||
</view>
|
||||
<movable-area scale-area>
|
||||
<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
|
||||
</movable-area>
|
||||
<view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;">
|
||||
点击这里放大3倍
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-body">
|
||||
<page-head title="movable-view,可拖动视图"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 1
|
||||
<text>\nmovable-view 区域小于 movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view :x="x" :y="y" direction="all" @change="onChange"
|
||||
>text</movable-view
|
||||
>
|
||||
</movable-area>
|
||||
<view @tap="tap" class="uni-link uni-center uni-common-mt">
|
||||
点击这里移动至 (30px, 30px)
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 2
|
||||
<text>\nmovable-view区域大于movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view class="max" direction="all">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 3
|
||||
<text>\n只可以横向移动</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="horizontal">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 4
|
||||
<text>\n只可以纵向移动</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="vertical">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 5
|
||||
<text>\n可超出边界</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="all" out-of-bounds>text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 6
|
||||
<text>\n带有惯性</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="all" inertia>text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 7
|
||||
<text>\n可放缩</text>
|
||||
</view>
|
||||
<movable-area scale-area>
|
||||
<movable-view
|
||||
direction="all"
|
||||
@scale="onScale"
|
||||
scale
|
||||
scale-min="0.5"
|
||||
scale-max="4"
|
||||
:scale-value="scale"
|
||||
>text</movable-view
|
||||
>
|
||||
</movable-area>
|
||||
<view
|
||||
@tap="tap2"
|
||||
class="uni-link uni-center uni-common-mt"
|
||||
style="padding-bottom: 80rpx"
|
||||
>
|
||||
点击这里放大3倍
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 2,
|
||||
old: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tap: function(e) {
|
||||
// 解决view层不同步的问题
|
||||
this.x = this.old.x
|
||||
this.y = this.old.y
|
||||
this.$nextTick(function() {
|
||||
this.x = 30
|
||||
this.y = 30
|
||||
})
|
||||
},
|
||||
tap2() {
|
||||
// 解决view层不同步的问题
|
||||
this.scale = this.old.scale
|
||||
this.scale = this.old.scale
|
||||
this.$nextTick(function() {
|
||||
this.scale = 3
|
||||
})
|
||||
},
|
||||
onChange: function(e) {
|
||||
this.old.x = e.detail.x
|
||||
this.old.y = e.detail.y
|
||||
},
|
||||
onScale: function(e) {
|
||||
this.old.scale = e.detail.scale
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 2,
|
||||
old: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 2,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tap: function (e) {
|
||||
// 解决view层不同步的问题
|
||||
this.x = this.old.x;
|
||||
this.y = this.old.y;
|
||||
this.$nextTick(function () {
|
||||
this.x = 30;
|
||||
this.y = 30;
|
||||
});
|
||||
},
|
||||
tap2() {
|
||||
// 解决view层不同步的问题
|
||||
this.scale = this.old.scale;
|
||||
this.scale = this.old.scale;
|
||||
this.$nextTick(function () {
|
||||
this.scale = 3;
|
||||
});
|
||||
},
|
||||
onChange: function (e) {
|
||||
this.old.x = e.detail.x;
|
||||
this.old.y = e.detail.y;
|
||||
},
|
||||
onScale: function (e) {
|
||||
this.old.scale = e.detail.scale;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
movable-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 150rpx;
|
||||
width: 150rpx;
|
||||
background-color: #007AFF;
|
||||
color: #fff;
|
||||
}
|
||||
movable-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 150rpx;
|
||||
width: 150rpx;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
movable-area {
|
||||
height: 300rpx;
|
||||
width: 100%;
|
||||
background-color: #D8D8D8;
|
||||
overflow: hidden;
|
||||
}
|
||||
movable-area {
|
||||
height: 300rpx;
|
||||
width: 100%;
|
||||
background-color: #d8d8d8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.max {
|
||||
width:500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
</style>
|
||||
.max {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '新建的页面'
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "新建的页面",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,33 +1,45 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-btn-v">
|
||||
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
|
||||
<button type="default">跳转到新页面</button>
|
||||
</navigator>
|
||||
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
|
||||
<button type="default">在当前页打开</button>
|
||||
</navigator>
|
||||
<navigator v-if="!hasLeftWin" url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
|
||||
<button type="default">跳转tab页面</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-btn-v">
|
||||
<navigator
|
||||
url="navigate/navigate?title=navigate"
|
||||
hover-class="navigator-hover"
|
||||
>
|
||||
<button type="default">跳转到新页面</button>
|
||||
</navigator>
|
||||
<navigator
|
||||
url="redirect/redirect?title=redirect"
|
||||
open-type="redirect"
|
||||
hover-class="other-navigator-hover"
|
||||
>
|
||||
<button type="default">在当前页打开</button>
|
||||
</navigator>
|
||||
<navigator
|
||||
v-if="!hasLeftWin"
|
||||
url="/pages/tabBar/extUI/extUI"
|
||||
open-type="switchTab"
|
||||
hover-class="other-navigator-hover"
|
||||
>
|
||||
<button type="default">跳转tab页面</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'navigator'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
hasLeftWin: state => !state.noMatchLeftWindow
|
||||
})
|
||||
},
|
||||
}
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "navigator",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
hasLeftWin: (state) => !state.noMatchLeftWindow,
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '当前页'
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "当前页",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,91 +1,102 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">
|
||||
日期：{{year}}年{{month}}月{{day}}日
|
||||
</view>
|
||||
</view>
|
||||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value" @change="bindChange">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">
|
||||
日期：{{ year }}年{{ month }}月{{ day }}日
|
||||
</view>
|
||||
</view>
|
||||
<picker-view
|
||||
v-if="visible"
|
||||
:indicator-style="indicatorStyle"
|
||||
:mask-style="maskStyle"
|
||||
:value="value"
|
||||
@change="bindChange"
|
||||
>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in years" :key="index"
|
||||
>{{ item }}年</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in months" :key="index"
|
||||
>{{ item }}月</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in days" :key="index"
|
||||
>{{ item }}日</view
|
||||
>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
const date = new Date()
|
||||
const years = []
|
||||
const year = date.getFullYear()
|
||||
const months = []
|
||||
const month = date.getMonth() + 1
|
||||
const days = []
|
||||
const day = date.getDate()
|
||||
export default {
|
||||
data () {
|
||||
const date = new Date()
|
||||
const years = []
|
||||
const year = date.getFullYear()
|
||||
const months = []
|
||||
const month = date.getMonth() + 1
|
||||
const days = []
|
||||
const day = date.getDate()
|
||||
|
||||
for (let i = 1990; i <= date.getFullYear(); i++) {
|
||||
years.push(i)
|
||||
}
|
||||
for (let i = 1990; i <= date.getFullYear(); i++) {
|
||||
years.push(i)
|
||||
}
|
||||
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
months.push(i)
|
||||
}
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
months.push(i)
|
||||
}
|
||||
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
days.push(i)
|
||||
}
|
||||
return {
|
||||
title: 'picker-view',
|
||||
years,
|
||||
year,
|
||||
months,
|
||||
month,
|
||||
days,
|
||||
day,
|
||||
value: [9999, month - 1, day - 1],
|
||||
/**
|
||||
* 解决动态设置indicator-style不生效的问题
|
||||
*/
|
||||
visible: true,
|
||||
// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
|
||||
indicatorStyle: `height: 50px;`,
|
||||
// #ifdef MP-KUAISHOU
|
||||
maskStyle: "padding:10px 0"
|
||||
// #endif
|
||||
// #ifndef MP-KUAISHOU
|
||||
maskStyle: ""
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindChange (e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
}
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
days.push(i)
|
||||
}
|
||||
return {
|
||||
title: 'picker-view',
|
||||
years,
|
||||
year,
|
||||
months,
|
||||
month,
|
||||
days,
|
||||
day,
|
||||
value: [9999, month - 1, day - 1],
|
||||
/**
|
||||
* 解决动态设置indicator-style不生效的问题
|
||||
*/
|
||||
visible: true,
|
||||
// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
|
||||
indicatorStyle: `height: 50px;`,
|
||||
// #ifdef MP-KUAISHOU
|
||||
maskStyle: "padding:10px 0"
|
||||
// #endif
|
||||
// #ifndef MP-KUAISHOU
|
||||
maskStyle: ""
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindChange (e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
picker-view {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
picker-view {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
margin-top:20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,178 +1,203 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-title uni-common-pl">普通选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
|
||||
<view class="uni-input">{{array[index].name}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-title uni-common-pl">普通选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left"> 当前选择 </view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker
|
||||
@change="bindPickerChange"
|
||||
:value="index"
|
||||
:range="array"
|
||||
range-key="name"
|
||||
>
|
||||
<view class="uni-input">{{ array[index].name }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-title uni-common-pl">多列选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
|
||||
<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-title uni-common-pl">多列选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left"> 当前选择 </view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker
|
||||
mode="multiSelector"
|
||||
@columnchange="bindMultiPickerColumnChange"
|
||||
:value="multiIndex"
|
||||
:range="multiArray"
|
||||
>
|
||||
<view class="uni-input"
|
||||
>{{ multiArray[0][multiIndex[0]] }}，{{
|
||||
multiArray[1][multiIndex[1]]
|
||||
}}，{{ multiArray[2][multiIndex[2]] }}</view
|
||||
>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="uni-title uni-common-pl">时间选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
|
||||
<view class="uni-input">{{time}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-picker-tips">
|
||||
注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">时间选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left"> 当前选择 </view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker
|
||||
mode="time"
|
||||
:value="time"
|
||||
start="09:01"
|
||||
end="21:01"
|
||||
@change="bindTimeChange"
|
||||
>
|
||||
<view class="uni-input">{{ time }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-picker-tips">
|
||||
注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">日期选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||||
<view class="uni-input">{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-picker-tips">
|
||||
注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">日期选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left"> 当前选择 </view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="date"
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@change="bindDateChange"
|
||||
>
|
||||
<view class="uni-input">{{ date }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-picker-tips">
|
||||
注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
function getDate(type) {
|
||||
const date = new Date();
|
||||
|
||||
function getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
if (type === "start") {
|
||||
year = year - 10;
|
||||
} else if (type === "end") {
|
||||
year = year + 10;
|
||||
}
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day > 9 ? day : "0" + day;
|
||||
|
||||
if (type === 'start') {
|
||||
year = year - 10;
|
||||
} else if (type === 'end') {
|
||||
year = year + 10;
|
||||
}
|
||||
month = month > 9 ? month : '0' + month;;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'picker',
|
||||
array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
|
||||
index: 0,
|
||||
multiArray: [
|
||||
['亚洲', '欧洲'],
|
||||
['中国', '日本'],
|
||||
['北京', '上海', '广州']
|
||||
],
|
||||
multiIndex: [0, 0, 0],
|
||||
date: getDate({
|
||||
format: true
|
||||
}),
|
||||
startDate:getDate('start'),
|
||||
endDate:getDate('end'),
|
||||
time: '12:01'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange: function(e) {
|
||||
console.log('picker发送选择改变，携带值为：' + e.detail.value)
|
||||
this.index = e.detail.value
|
||||
},
|
||||
bindMultiPickerColumnChange: function(e) {
|
||||
console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
|
||||
this.multiIndex[e.detail.column] = e.detail.value
|
||||
switch (e.detail.column) {
|
||||
case 0: //拖动第1列
|
||||
switch (this.multiIndex[0]) {
|
||||
case 0:
|
||||
this.multiArray[1] = ['中国', '日本']
|
||||
this.multiArray[2] = ['北京', '上海', '广州']
|
||||
break
|
||||
case 1:
|
||||
this.multiArray[1] = ['英国', '法国']
|
||||
this.multiArray[2] = ['伦敦', '曼彻斯特']
|
||||
break
|
||||
}
|
||||
this.multiIndex.splice(1, 1, 0)
|
||||
this.multiIndex.splice(2, 1, 0)
|
||||
break
|
||||
case 1: //拖动第2列
|
||||
switch (this.multiIndex[0]) { //判断第一列是什么
|
||||
case 0:
|
||||
switch (this.multiIndex[1]) {
|
||||
case 0:
|
||||
this.multiArray[2] = ['北京', '上海', '广州']
|
||||
break
|
||||
case 1:
|
||||
this.multiArray[2] = ['东京','北海道']
|
||||
break
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
switch (this.multiIndex[1]) {
|
||||
case 0:
|
||||
this.multiArray[2] = ['伦敦', '曼彻斯特']
|
||||
break
|
||||
case 1:
|
||||
this.multiArray[2] = ['巴黎', '马赛']
|
||||
break
|
||||
}
|
||||
break
|
||||
}
|
||||
this.multiIndex.splice(2, 1, 0)
|
||||
break
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
bindDateChange: function(e) {
|
||||
this.date = e.detail.value
|
||||
},
|
||||
bindTimeChange: function(e) {
|
||||
this.time = e.detail.value
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "picker",
|
||||
array: [
|
||||
{ name: "中国" },
|
||||
{ name: "美国" },
|
||||
{ name: "巴西" },
|
||||
{ name: "日本" },
|
||||
],
|
||||
index: 0,
|
||||
multiArray: [
|
||||
["亚洲", "欧洲"],
|
||||
["中国", "日本"],
|
||||
["北京", "上海", "广州"],
|
||||
],
|
||||
multiIndex: [0, 0, 0],
|
||||
date: getDate({
|
||||
format: true,
|
||||
}),
|
||||
startDate: getDate("start"),
|
||||
endDate: getDate("end"),
|
||||
time: "12:01",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange: function (e) {
|
||||
console.log("picker发送选择改变，携带值为：" + e.detail.value);
|
||||
this.index = e.detail.value;
|
||||
},
|
||||
bindMultiPickerColumnChange: function (e) {
|
||||
console.log(
|
||||
"修改的列为：" + e.detail.column + "，值为：" + e.detail.value,
|
||||
);
|
||||
this.multiIndex[e.detail.column] = e.detail.value;
|
||||
switch (e.detail.column) {
|
||||
case 0: //拖动第1列
|
||||
switch (this.multiIndex[0]) {
|
||||
case 0:
|
||||
this.multiArray[1] = ["中国", "日本"];
|
||||
this.multiArray[2] = ["北京", "上海", "广州"];
|
||||
break;
|
||||
case 1:
|
||||
this.multiArray[1] = ["英国", "法国"];
|
||||
this.multiArray[2] = ["伦敦", "曼彻斯特"];
|
||||
break;
|
||||
}
|
||||
this.multiIndex.splice(1, 1, 0);
|
||||
this.multiIndex.splice(2, 1, 0);
|
||||
break;
|
||||
case 1: //拖动第2列
|
||||
switch (
|
||||
this.multiIndex[0] //判断第一列是什么
|
||||
) {
|
||||
case 0:
|
||||
switch (this.multiIndex[1]) {
|
||||
case 0:
|
||||
this.multiArray[2] = ["北京", "上海", "广州"];
|
||||
break;
|
||||
case 1:
|
||||
this.multiArray[2] = ["东京", "北海道"];
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
switch (this.multiIndex[1]) {
|
||||
case 0:
|
||||
this.multiArray[2] = ["伦敦", "曼彻斯特"];
|
||||
break;
|
||||
case 1:
|
||||
this.multiArray[2] = ["巴黎", "马赛"];
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.multiIndex.splice(2, 1, 0);
|
||||
break;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
bindDateChange: function (e) {
|
||||
this.date = e.detail.value;
|
||||
},
|
||||
bindTimeChange: function (e) {
|
||||
this.time = e.detail.value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-picker-tips {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
/* text-align: right; */
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
/* text-align: right; */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,62 +1,66 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[0]" show-info stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[1]" stroke-width="3" />
|
||||
<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[2]" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-control">
|
||||
<button type="primary" @click="setProgress">设置进度</button>
|
||||
<button type="warn" @click="clearProgress">清除进度</button>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[0]" show-info stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[1]" stroke-width="3" />
|
||||
<uni-icons
|
||||
type="close"
|
||||
class="progress-cancel"
|
||||
color="#dd524d"
|
||||
></uni-icons>
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[2]" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-control">
|
||||
<button type="primary" @click="setProgress">设置进度</button>
|
||||
<button type="warn" @click="clearProgress">清除进度</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'progress',
|
||||
pgList: [0, 0, 0, 0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setProgress() {
|
||||
this.pgList = [20, 40, 60, 80]
|
||||
},
|
||||
clearProgress() {
|
||||
this.pgList = [0, 0, 0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "progress",
|
||||
pgList: [0, 0, 0, 0],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setProgress() {
|
||||
this.pgList = [20, 40, 60, 80];
|
||||
},
|
||||
clearProgress() {
|
||||
this.pgList = [0, 0, 0, 0];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.progress-box {
|
||||
display: flex;
|
||||
height: 50rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
.progress-box {
|
||||
display: flex;
|
||||
height: 50rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.uni-icon {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.uni-icon {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-cancel {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.progress-control button{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.progress-cancel {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.progress-control button {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,90 +1,102 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<label class="radio" style="margin-right: 30rpx;">
|
||||
<radio value="r1" checked="true" />选中
|
||||
</label>
|
||||
<label class="radio">
|
||||
<radio value="r2" />未选中
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">不同颜色和尺寸的radio</view>
|
||||
<view>
|
||||
<label class="radio" style="margin-right: 30rpx;">
|
||||
<radio value="r1" checked="true" color="#FFCC33" style="transform:scale(0.7)"/>选中
|
||||
</label>
|
||||
<label class="radio">
|
||||
<radio value="r2" color="#FFCC33" style="transform:scale(0.7)"/>未选中
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="index === current" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<label class="radio" style="margin-right: 30rpx">
|
||||
<radio value="r1" checked="true" />选中
|
||||
</label>
|
||||
<label class="radio"> <radio value="r2" />未选中 </label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">不同颜色和尺寸的radio</view>
|
||||
<view>
|
||||
<label class="radio" style="margin-right: 30rpx">
|
||||
<radio
|
||||
value="r1"
|
||||
checked="true"
|
||||
color="#FFCC33"
|
||||
style="transform: scale(0.7)"
|
||||
/>选中
|
||||
</label>
|
||||
<label class="radio">
|
||||
<radio
|
||||
value="r2"
|
||||
color="#FFCC33"
|
||||
style="transform: scale(0.7)"
|
||||
/>未选中
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange">
|
||||
<label
|
||||
class="uni-list-cell uni-list-cell-pd"
|
||||
v-for="(item, index) in items"
|
||||
:key="item.value"
|
||||
>
|
||||
<view>
|
||||
<radio :value="item.value" :checked="index === current" />
|
||||
</view>
|
||||
<view>{{ item.name }}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'radio 单选框',
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国'
|
||||
},
|
||||
{
|
||||
value: 'CHN',
|
||||
name: '中国',
|
||||
checked: 'true'
|
||||
},
|
||||
{
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
},
|
||||
{
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
},
|
||||
{
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
},
|
||||
{
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
},
|
||||
],
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
radioChange(evt) {
|
||||
for (let i = 0; i < this.items.length; i++) {
|
||||
if (this.items[i].value === evt.detail.value) {
|
||||
this.current = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "radio 单选框",
|
||||
items: [
|
||||
{
|
||||
value: "USA",
|
||||
name: "美国",
|
||||
},
|
||||
{
|
||||
value: "CHN",
|
||||
name: "中国",
|
||||
checked: "true",
|
||||
},
|
||||
{
|
||||
value: "BRA",
|
||||
name: "巴西",
|
||||
},
|
||||
{
|
||||
value: "JPN",
|
||||
name: "日本",
|
||||
},
|
||||
{
|
||||
value: "ENG",
|
||||
name: "英国",
|
||||
},
|
||||
{
|
||||
value: "FRA",
|
||||
name: "法国",
|
||||
},
|
||||
],
|
||||
current: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
radioChange(evt) {
|
||||
for (let i = 0; i < this.items.length; i++) {
|
||||
if (this.items[i].value === evt.detail.value) {
|
||||
this.current = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start
|
||||
}
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,44 +1,49 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
数组类型
|
||||
<text>\nnodes属性为Array</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-title uni-common-mt">
|
||||
字符串类型
|
||||
<text>\nnodes属性为String</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="strings"></rich-text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
数组类型
|
||||
<text>\nnodes属性为Array</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background: #fff; padding: 20rpx">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-title uni-common-mt">
|
||||
字符串类型
|
||||
<text>\nnodes属性为String</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background: #fff; padding: 20rpx">
|
||||
<rich-text :nodes="strings"></rich-text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'rich-text',
|
||||
nodes: [{
|
||||
name: 'div',
|
||||
attrs: {
|
||||
class: 'div-class',
|
||||
style: 'line-height: 60px; color: red; text-align:center;'
|
||||
},
|
||||
children: [{
|
||||
type: 'text',
|
||||
text: 'Hello uni-app!'
|
||||
}]
|
||||
}],
|
||||
strings: '<div style="text-align:center;"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "rich-text",
|
||||
nodes: [
|
||||
{
|
||||
name: "div",
|
||||
attrs: {
|
||||
class: "div-class",
|
||||
style: "line-height: 60px; color: red; text-align:center;",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "text",
|
||||
text: "Hello uni-app!",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
strings:
|
||||
'<div style="text-align:center;"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,97 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="scroll-view,区域滚动视图"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
Vertical Scroll
|
||||
<text>\n纵向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
|
||||
@scroll="scroll">
|
||||
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
|
||||
点击这里返回顶部
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
Horizontal Scroll
|
||||
<text>\n横向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
||||
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="uni-common-pb"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head title="scroll-view,区域滚动视图"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
Vertical Scroll
|
||||
<text>\n纵向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view
|
||||
:scroll-top="scrollTop"
|
||||
scroll-y="true"
|
||||
class="scroll-Y"
|
||||
@scrolltoupper="upper"
|
||||
@scrolltolower="lower"
|
||||
@scroll="scroll"
|
||||
>
|
||||
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
|
||||
点击这里返回顶部
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
Horizontal Scroll
|
||||
<text>\n横向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view
|
||||
class="scroll-view_H"
|
||||
scroll-x="true"
|
||||
@scroll="scroll"
|
||||
scroll-left="120"
|
||||
>
|
||||
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="uni-common-pb"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upper: function(e) {
|
||||
console.log(e)
|
||||
},
|
||||
lower: function(e) {
|
||||
console.log(e)
|
||||
},
|
||||
scroll: function(e) {
|
||||
console.log(e)
|
||||
this.old.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
goTop: function(e) {
|
||||
// 解决view层不同步的问题
|
||||
this.scrollTop = this.old.scrollTop
|
||||
this.$nextTick(function() {
|
||||
this.scrollTop = 0
|
||||
});
|
||||
uni.showToast({
|
||||
icon:"none",
|
||||
title:"纵向滚动 scrollTop 值已被修改为 0"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
upper: function (e) {
|
||||
console.log(e);
|
||||
},
|
||||
lower: function (e) {
|
||||
console.log(e);
|
||||
},
|
||||
scroll: function (e) {
|
||||
console.log(e);
|
||||
this.old.scrollTop = e.detail.scrollTop;
|
||||
},
|
||||
goTop: function (e) {
|
||||
// 解决view层不同步的问题
|
||||
this.scrollTop = this.old.scrollTop;
|
||||
this.$nextTick(function () {
|
||||
this.scrollTop = 0;
|
||||
});
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "纵向滚动 scrollTop 值已被修改为 0",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scroll-Y {
|
||||
height: 300rpx;
|
||||
}
|
||||
.scroll-Y {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-view-item {
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.scroll-view-item {
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
</style>
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,40 +1,53 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">显示当前value</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置步进step跳动</view>
|
||||
<view>
|
||||
<slider value="60" @change="sliderChange" step="5" />
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">显示当前value</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置最小/最大值</view>
|
||||
<view>
|
||||
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">不同颜色和大小的滑块</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title">设置步进step跳动</view>
|
||||
<view>
|
||||
<slider value="60" @change="sliderChange" step="5" />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置最小/最大值</view>
|
||||
<view>
|
||||
<slider
|
||||
value="100"
|
||||
@change="sliderChange"
|
||||
min="50"
|
||||
max="200"
|
||||
show-value
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="uni-title">不同颜色和大小的滑块</view>
|
||||
<view>
|
||||
<slider
|
||||
value="50"
|
||||
@change="sliderChange"
|
||||
activeColor="#FFCC33"
|
||||
backgroundColor="#000000"
|
||||
block-color="#8A6DE9"
|
||||
block-size="20"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'slider 滑块'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sliderChange(e) {
|
||||
console.log('value 发生变化：' + e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "slider 滑块",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
sliderChange(e) {
|
||||
console.log("value 发生变化：" + e.detail.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,105 +1,117 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="swiper,可滑动视图"></page-head>
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-green">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">C</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view>
|
||||
<page-head title="swiper,可滑动视图"></page-head>
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
:indicator-dots="indicatorDots"
|
||||
:autoplay="autoplay"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-green">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">C</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="swiper-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">指示点</view>
|
||||
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">自动播放</view>
|
||||
<switch :checked="autoplay" @change="changeAutoplay" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">指示点</view>
|
||||
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">自动播放</view>
|
||||
<switch :checked="autoplay" @change="changeAutoplay" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-common-mt">
|
||||
<text>幻灯片切换时长(ms)</text>
|
||||
<text class="info">{{duration}}</text>
|
||||
</view>
|
||||
<slider @change="durationChange" :value="duration" min="500" max="2000" />
|
||||
<view class="uni-common-mt">
|
||||
<text>自动播放间隔时长(ms)</text>
|
||||
<text class="info">{{interval}}</text>
|
||||
</view>
|
||||
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-common-mt">
|
||||
<text>幻灯片切换时长(ms)</text>
|
||||
<text class="info">{{ duration }}</text>
|
||||
</view>
|
||||
<slider @change="durationChange" :value="duration" min="500" max="2000" />
|
||||
<view class="uni-common-mt">
|
||||
<text>自动播放间隔时长(ms)</text>
|
||||
<text class="info">{{ interval }}</text>
|
||||
</view>
|
||||
<slider
|
||||
@change="intervalChange"
|
||||
:value="interval"
|
||||
min="2000"
|
||||
max="10000"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
background: ['color1', 'color2', 'color3'],
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeIndicatorDots(e) {
|
||||
this.indicatorDots = !this.indicatorDots
|
||||
},
|
||||
changeAutoplay(e) {
|
||||
this.autoplay = !this.autoplay
|
||||
},
|
||||
intervalChange(e) {
|
||||
this.interval = e.detail.value
|
||||
},
|
||||
durationChange(e) {
|
||||
this.duration = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
background: ["color1", "color2", "color3"],
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeIndicatorDots(e) {
|
||||
this.indicatorDots = !this.indicatorDots;
|
||||
},
|
||||
changeAutoplay(e) {
|
||||
this.autoplay = !this.autoplay;
|
||||
},
|
||||
intervalChange(e) {
|
||||
this.interval = e.detail.value;
|
||||
},
|
||||
durationChange(e) {
|
||||
this.duration = e.detail.value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-margin-wrap {
|
||||
width:690rpx;
|
||||
width: 100%;;
|
||||
}
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.uni-common-mt{
|
||||
margin-top:60rpx;
|
||||
position:relative;
|
||||
}
|
||||
.uni-common-mt {
|
||||
margin-top: 60rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
right:20rpx;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
}
|
||||
|
||||
.uni-padding-wrap {
|
||||
width:550rpx;
|
||||
padding:0 100rpx;
|
||||
}
|
||||
.uni-padding-wrap {
|
||||
width: 550rpx;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,47 +1,46 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<switch checked @change="switch1Change" />
|
||||
<switch @change="switch2Change" />
|
||||
</view>
|
||||
<view class="uni-title">不同颜色和尺寸的switch</view>
|
||||
<view>
|
||||
<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
<switch color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<switch checked @change="switch1Change" />
|
||||
<switch @change="switch2Change" />
|
||||
</view>
|
||||
<view class="uni-title">不同颜色和尺寸的switch</view>
|
||||
<view>
|
||||
<switch checked color="#FFCC33" style="transform: scale(0.7)" />
|
||||
<switch color="#FFCC33" style="transform: scale(0.7)" />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">推荐展示样式</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">开启中</view>
|
||||
<switch checked />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">关闭</view>
|
||||
<switch />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title">推荐展示样式</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">开启中</view>
|
||||
<switch checked />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">关闭</view>
|
||||
<switch />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'switch 开关'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switch1Change: function (e) {
|
||||
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
|
||||
},
|
||||
switch2Change: function (e) {
|
||||
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "switch 开关",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
switch1Change: function (e) {
|
||||
console.log("switch1 发生 change 事件，携带值为", e.detail.value);
|
||||
},
|
||||
switch2Change: function (e) {
|
||||
console.log("switch2 发生 change 事件，携带值为", e.detail.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,74 +1,78 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="text-box" scroll-y="true">
|
||||
<text>{{text}}</text>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button type="primary" :disabled="!canAdd" @click="add">add line</button>
|
||||
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="text-box" scroll-y="true">
|
||||
<text>{{ text }}</text>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button type="primary" :disabled="!canAdd" @click="add">
|
||||
add line
|
||||
</button>
|
||||
<button type="warn" :disabled="!canRemove" @click="remove">
|
||||
remove line
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'text',
|
||||
texts: [
|
||||
'HBuilder，400万开发者选择的IDE',
|
||||
'MUI，轻巧、漂亮的前端开源框架',
|
||||
'wap2app，M站快速转换原生体验的App',
|
||||
'5+Runtime，为HTML5插上原生的翅膀',
|
||||
'HBuilderX，轻巧、极速，极客编辑器',
|
||||
'uni-app，终极跨平台方案',
|
||||
'HBuilder，400万开发者选择的IDE',
|
||||
'MUI，轻巧、漂亮的前端开源框架',
|
||||
'wap2app，M站快速转换原生体验的App',
|
||||
'5+Runtime，为HTML5插上原生的翅膀',
|
||||
'HBuilderX，轻巧、极速，极客编辑器',
|
||||
'uni-app，终极跨平台方案',
|
||||
'......'
|
||||
],
|
||||
text: '',
|
||||
canAdd: true,
|
||||
canRemove: false,
|
||||
extraLine: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function(e) {
|
||||
this.extraLine.push(this.texts[this.extraLine.length % 12]);
|
||||
this.text = this.extraLine.join('\n');
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
},
|
||||
remove: function(e) {
|
||||
if (this.extraLine.length > 0) {
|
||||
this.extraLine.pop();
|
||||
this.text = this.extraLine.join('\n');
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "text",
|
||||
texts: [
|
||||
"HBuilder，400万开发者选择的IDE",
|
||||
"MUI，轻巧、漂亮的前端开源框架",
|
||||
"wap2app，M站快速转换原生体验的App",
|
||||
"5+Runtime，为HTML5插上原生的翅膀",
|
||||
"HBuilderX，轻巧、极速，极客编辑器",
|
||||
"uni-app，终极跨平台方案",
|
||||
"HBuilder，400万开发者选择的IDE",
|
||||
"MUI，轻巧、漂亮的前端开源框架",
|
||||
"wap2app，M站快速转换原生体验的App",
|
||||
"5+Runtime，为HTML5插上原生的翅膀",
|
||||
"HBuilderX，轻巧、极速，极客编辑器",
|
||||
"uni-app，终极跨平台方案",
|
||||
"......",
|
||||
],
|
||||
text: "",
|
||||
canAdd: true,
|
||||
canRemove: false,
|
||||
extraLine: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
add: function (e) {
|
||||
this.extraLine.push(this.texts[this.extraLine.length % 12]);
|
||||
this.text = this.extraLine.join("\n");
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
},
|
||||
remove: function (e) {
|
||||
if (this.extraLine.length > 0) {
|
||||
this.extraLine.pop();
|
||||
this.text = this.extraLine.join("\n");
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.text-box {
|
||||
margin-bottom: 40rpx;
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
min-height: 300rpx;
|
||||
background-color: #FFFFFF;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #353535;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.text-box {
|
||||
margin-bottom: 40rpx;
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
min-height: 300rpx;
|
||||
background-color: #ffffff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #353535;
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,34 +1,36 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
|
||||
|
||||
|
||||
<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea @blur="bindTextAreaBlur" auto-height />
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl"
|
||||
>输入区域高度自适应，不会出现滚动条</view
|
||||
>
|
||||
<view class="uni-textarea">
|
||||
<textarea @blur="bindTextAreaBlur" auto-height />
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea
|
||||
placeholder-style="color:#F76260"
|
||||
placeholder="占位符字体是红色的"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'textarea',
|
||||
focus: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindTextAreaBlur: function (e) {
|
||||
console.log(e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "textarea",
|
||||
focus: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
bindTextAreaBlur: function (e) {
|
||||
console.log(e.detail.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -1,94 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt" v-if="showVideo">
|
||||
<view>
|
||||
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls poster="https://web-assets.dcloud.net.cn/unidoc/zh/poster.png"></video>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD -->
|
||||
<view class="uni-list uni-common-mt">
|
||||
<view class="uni-list-cell">
|
||||
<view>
|
||||
<view class="uni-label">弹幕内容</view>
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt" v-if="showVideo">
|
||||
<view>
|
||||
<video
|
||||
id="myVideo"
|
||||
src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||
@error="videoErrorCallback"
|
||||
:danmu-list="danmuList"
|
||||
enable-danmu
|
||||
danmu-btn
|
||||
controls
|
||||
poster="https://web-assets.dcloud.net.cn/unidoc/zh/poster.png"
|
||||
></video>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD -->
|
||||
<view class="uni-list uni-common-mt">
|
||||
<view class="uni-list-cell">
|
||||
<view>
|
||||
<view class="uni-label">弹幕内容</view>
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<input
|
||||
v-model="danmuValue"
|
||||
class="uni-input"
|
||||
type="text"
|
||||
placeholder="在此处输入弹幕内容"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'video',
|
||||
src: '',
|
||||
danmuList: [{
|
||||
text: '第 1s 出现的弹幕',
|
||||
color: '#ff0000',
|
||||
time: 1
|
||||
},
|
||||
{
|
||||
text: '第 3s 出现的弹幕',
|
||||
color: '#ff00ff',
|
||||
time: 3
|
||||
}
|
||||
],
|
||||
danmuValue: '',
|
||||
showVideo: false
|
||||
}
|
||||
},
|
||||
onReady: function(res) {
|
||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||
this.videoContext = uni.createVideoContext('myVideo')
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-BAIDU
|
||||
setTimeout(()=>{
|
||||
this.showVideo = true
|
||||
},350)
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || MP-BAIDU
|
||||
this.showVideo = true
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
sendDanmu: function() {
|
||||
this.videoContext.sendDanmu({
|
||||
text: this.danmuValue,
|
||||
color: this.getRandomColor()
|
||||
});
|
||||
this.danmuValue = '';
|
||||
},
|
||||
videoErrorCallback: function(e) {
|
||||
uni.showModal({
|
||||
content: e.target.errMsg,
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
getRandomColor: function() {
|
||||
const rgb = []
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
let color = Math.floor(Math.random() * 256).toString(16)
|
||||
color = color.length == 1 ? '0' + color : color
|
||||
rgb.push(color)
|
||||
}
|
||||
return '#' + rgb.join('')
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "video",
|
||||
src: "",
|
||||
danmuList: [
|
||||
{
|
||||
text: "第 1s 出现的弹幕",
|
||||
color: "#ff0000",
|
||||
time: 1,
|
||||
},
|
||||
{
|
||||
text: "第 3s 出现的弹幕",
|
||||
color: "#ff00ff",
|
||||
time: 3,
|
||||
},
|
||||
],
|
||||
danmuValue: "",
|
||||
showVideo: false,
|
||||
};
|
||||
},
|
||||
onReady: function (res) {
|
||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||
this.videoContext = uni.createVideoContext("myVideo");
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-BAIDU
|
||||
setTimeout(() => {
|
||||
this.showVideo = true;
|
||||
}, 350);
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || MP-BAIDU
|
||||
this.showVideo = true;
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
sendDanmu: function () {
|
||||
this.videoContext.sendDanmu({
|
||||
text: this.danmuValue,
|
||||
color: this.getRandomColor(),
|
||||
});
|
||||
this.danmuValue = "";
|
||||
},
|
||||
videoErrorCallback: function (e) {
|
||||
uni.showModal({
|
||||
content: e.target.errMsg,
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
getRandomColor: function () {
|
||||
const rgb = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
let color = Math.floor(Math.random() * 256).toString(16);
|
||||
color = color.length == 1 ? "0" + color : color;
|
||||
rgb.push(color);
|
||||
}
|
||||
return "#" + rgb.join("");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
video {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
video {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,146 +1,231 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="view"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-hello-text">
|
||||
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction:
|
||||
row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
|
||||
</view>
|
||||
<view>
|
||||
<page-head title="view"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-hello-text">
|
||||
Flex是Flexible
|
||||
Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display:
|
||||
flex后，继续给view等容器组件设置flex-direction:
|
||||
row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
更多布局示例
|
||||
<text>\nflex布局演示</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">纵向布局-自动宽度</view>
|
||||
<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text">横向布局-自动宽度</view>
|
||||
<view class="text">横向布局-自动宽度</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
|
||||
<view class="text">横向布局-居中</view>
|
||||
<view class="text">横向布局-居中</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
|
||||
<view class="text">横向布局-居右</view>
|
||||
<view class="text">横向布局-居右</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
|
||||
<view class="text">横向布局-两端对齐</view>
|
||||
<view class="text">横向布局-两端对齐</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满余量</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满</view>
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;">
|
||||
<text>垂直居顶</text>
|
||||
</view>
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
|
||||
<text>垂直居中</text>
|
||||
</view>
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;">
|
||||
<text>垂直居底</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
更多布局示例
|
||||
<text>\nflex布局演示</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">纵向布局-自动宽度</view>
|
||||
<view class="text" style="width: 300rpx">纵向布局-固定宽度</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text">横向布局-自动宽度</view>
|
||||
<view class="text">横向布局-自动宽度</view>
|
||||
</view>
|
||||
<view
|
||||
class="uni-flex uni-row"
|
||||
style="-webkit-justify-content: center; justify-content: center"
|
||||
>
|
||||
<view class="text">横向布局-居中</view>
|
||||
<view class="text">横向布局-居中</view>
|
||||
</view>
|
||||
<view
|
||||
class="uni-flex uni-row"
|
||||
style="-webkit-justify-content: flex-end; justify-content: flex-end"
|
||||
>
|
||||
<view class="text">横向布局-居右</view>
|
||||
<view class="text">横向布局-居右</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="-webkit-flex: 1; flex: 1"
|
||||
>横向布局-平均分布</view
|
||||
>
|
||||
<view class="text" style="-webkit-flex: 1; flex: 1"
|
||||
>横向布局-平均分布</view
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="uni-flex uni-row"
|
||||
style="
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<view class="text">横向布局-两端对齐</view>
|
||||
<view class="text">横向布局-两端对齐</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="width: 200rpx">固定宽度</view>
|
||||
<view class="text" style="-webkit-flex: 1; flex: 1"
|
||||
>自动占满余量</view
|
||||
>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="width: 200rpx">固定宽度</view>
|
||||
<view class="text" style="-webkit-flex: 1; flex: 1">自动占满</view>
|
||||
<view class="text" style="width: 200rpx">固定宽度</view>
|
||||
</view>
|
||||
<view
|
||||
class="uni-flex uni-row"
|
||||
style="-webkit-flex-wrap: wrap; flex-wrap: wrap"
|
||||
>
|
||||
<view class="text" style="width: 280rpx">一行显示不全,wrap折行</view>
|
||||
<view class="text" style="width: 280rpx">一行显示不全,wrap折行</view>
|
||||
<view class="text" style="width: 280rpx">一行显示不全,wrap折行</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view
|
||||
class="text uni-flex"
|
||||
style="
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
height: 200rpx;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
"
|
||||
>
|
||||
<text>垂直居顶</text>
|
||||
</view>
|
||||
<view
|
||||
class="text uni-flex"
|
||||
style="
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
height: 200rpx;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<text>垂直居中</text>
|
||||
</view>
|
||||
<view
|
||||
class="text uni-flex"
|
||||
style="
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
height: 200rpx;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
"
|
||||
>
|
||||
<text>垂直居底</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
组合示例
|
||||
<text>\nflex布局演示</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text uni-flex" style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
|
||||
<image src="../../../static/plus.png" style="width: 150rpx;height: 150rpx;"></image>
|
||||
</view>
|
||||
<view class="uni-flex uni-column" style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
|
||||
<view class="text" style="height: 120rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;">
|
||||
文字居左，留出左间距
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">剩余数量</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
组合示例
|
||||
<text>\nflex布局演示</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view
|
||||
class="text uni-flex"
|
||||
style="
|
||||
width: 200rpx;
|
||||
height: 220rpx;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<image
|
||||
src="../../../static/plus.png"
|
||||
style="width: 150rpx; height: 150rpx"
|
||||
></image>
|
||||
</view>
|
||||
<view
|
||||
class="uni-flex uni-column"
|
||||
style="
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<view
|
||||
class="text"
|
||||
style="
|
||||
height: 120rpx;
|
||||
text-align: left;
|
||||
padding-left: 20rpx;
|
||||
padding-top: 10rpx;
|
||||
"
|
||||
>
|
||||
文字居左，留出左间距
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="-webkit-flex: 1; flex: 1">剩余数量</view>
|
||||
<view class="text" style="-webkit-flex: 1; flex: 1">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flex-item {
|
||||
width: 33.3%;
|
||||
height: 200rpx;
|
||||
text-align: center;
|
||||
line-height: 200rpx;
|
||||
}
|
||||
.flex-item {
|
||||
width: 33.3%;
|
||||
height: 200rpx;
|
||||
text-align: center;
|
||||
line-height: 200rpx;
|
||||
}
|
||||
|
||||
.flex-item-V {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
text-align: center;
|
||||
line-height: 150rpx;
|
||||
}
|
||||
.flex-item-V {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
text-align: center;
|
||||
line-height: 150rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 15rpx 10rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #ebebeb;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.text {
|
||||
margin: 15rpx 10rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #ebebeb;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
/* text-indent: 40rpx; */
|
||||
}
|
||||
.flex-pc {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.desc {
|
||||
/* text-indent: 40rpx; */
|
||||
}
|
||||
.flex-pc {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,20 @@
|
||||
<template>
|
||||
<view>
|
||||
<web-view src="/hybrid/html/local.html" @message="getMessage"></web-view>
|
||||
</view>
|
||||
<view>
|
||||
<web-view src="/hybrid/html/local.html" @message="getMessage"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getMessage(e) {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(e.detail),
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
methods: {
|
||||
getMessage(e) {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(e.detail),
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -1,32 +1,30 @@
|
||||
<template>
|
||||
<view>
|
||||
<web-view :src="url" @message="getMessage"></web-view>
|
||||
</view>
|
||||
<view>
|
||||
<web-view :src="url" @message="getMessage"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: 'https://uniapp.dcloud.io/static/web-view.html'
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.url) {
|
||||
this.url = options.url;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMessage(event) {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(event.detail),
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: "https://uniapp.dcloud.io/static/web-view.html",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.url) {
|
||||
this.url = options.url;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMessage(event) {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(event.detail),
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user