TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

[...长按删除视频。基础信息李]

Browse Source
This commit is contained in:
张冬雪
2021-10-25 17:21:05 +08:00
parent ad67333bbf
commit 9b1cb130d8
3 changed files with 232 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
pages/instrument/basics.vue
View File

@@ -31,18 +31,10 @@
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view> <view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
</view> </view>
<view class="module-imgs"> <view class="module-imgs">
<view <view class="item" v-for="(item, index) in module.content.image" :key="index">
class="item" <image class="cover" :src="item.showpath" mode="aspectFill"
v-for="(item, index) in module.content.image"
:key="index"
>
<image
class="cover"
:src="item.showpath"
mode="aspectFill"
@click="openImg(module.content.image, index, 'imgs')" @click="openImg(module.content.image, index, 'imgs')"
@longpress="removeImg('imgs', moduleIndex, index)" @longpress="removeImg('imgs', moduleIndex, index)" />
/>
<view class="item-input"> <view class="item-input">
<input type="text" v-model="item.title" placeholder="输入标题" /> <input type="text" v-model="item.title" placeholder="输入标题" />
</view> </view>
@@ -64,13 +56,9 @@
<view class="module-videos"> <view class="module-videos">
<view class="item"> <view class="item">
<block v-if="module.content.video_image.showpath != ''"> <block v-if="module.content.video_image.showpath != ''">
<image <image class="cover" :src="module.content.video_image.showpath" mode="aspectFill"
class="cover"
:src="module.content.video_image.showpath"
mode="aspectFill"
@click="openImg([module.content.video_image.showpath], 0, 'videos')" @click="openImg([module.content.video_image.showpath], 0, 'videos')"
@longpress="removeImg('videoCover', moduleIndex, '')" @longpress="removeImg('videoCover', moduleIndex, '')" />
/>
</block> </block>
<block v-else> <block v-else>
<view class="item-upd" @click="updImg('videoCover', moduleIndex)"> <view class="item-upd" @click="updImg('videoCover', moduleIndex)">
@@ -80,28 +68,34 @@
</block> </block>
</view> </view>
<view class="item"> <view class="item">
<video <video class="cover" v-if="module.content.video_url.showpath != ''"
class="cover" :src="module.content.video_url.showpath" @longpress="removeImg('video', moduleIndex, '')" />
v-if="module.content.video_url.showpath != ''"
:src="module.content.video_url.showpath"
@longpress="removeImg('video', moduleIndex, '')"
/>
<view class="item-upd" @click="updImg('video', moduleIndex)" v-else> <view class="item-upd" @click="updImg('video', moduleIndex)" v-else>
<uni-icons type="plus" size="20" color="#999" /> <uni-icons type="plus" size="20" color="#999" />
<view>上传视频</view> <view>上传视频</view>
</view> </view>
</view> </view>
</view> </view>
<view class="module-hint">点击查看封面/视频，长按删除封面/视频</view> <view class="module-hint">点击查看封面/视频，长按删除封面
<span class='delVideo' v-if="module.content.video_url.showpath != ''"
@longpress="removeImg('video', moduleIndex, '')">长按删除视频</span>
</view>
</view> </view>
</block> </block>
<view @click="addModule" class="add-modules"><uni-icons class="icon" color="#8b64fd" size="20" type="plus"></uni-icons>添加模块</view> <view @click="addModule" class="add-modules">
<uni-icons class="icon" color="#8b64fd" size="20" type="plus"></uni-icons>添加模块
</view>
</view> </view>
</template> </template>
<script> <script>
import { basicsInfo, basicsConfig } from '@/apis/interfaces/store' import {
import { uploads } from '@/apis/interfaces/uploading' basicsInfo,
basicsConfig
} from '@/apis/interfaces/store'
import {
uploads
} from '@/apis/interfaces/uploading'
export default { export default {
data() { data() {
return { return {
@@ -165,7 +159,10 @@
switch (type) { switch (type) {
case 'logo': case 'logo':
uni.chooseImage({ uni.chooseImage({
crop: {width: 300, height: 300}, crop: {
width: 300,
height: 300
},
success: path => { success: path => {
uploads([{ uploads([{
name: 'logo', name: 'logo',
@@ -183,7 +180,10 @@
break break
case 'videoCover': case 'videoCover':
uni.chooseImage({ uni.chooseImage({
crop: {width: 500, height: 350}, crop: {
width: 500,
height: 350
},
success: path => { success: path => {
uploads([{ uploads([{
name: 'logo', name: 'logo',
@@ -335,16 +335,17 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.basics-content{ .basics-content {}
}
// 基础信息 // 基础信息
.info { .info {
background: white; background: white;
padding: 0 $padding; padding: 0 $padding;
.item { .item {
position: relative; position: relative;
padding: $padding 0 $padding 200rpx; padding: $padding 0 $padding 200rpx;
&::after { &::after {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -354,19 +355,23 @@
height: 1rpx; height: 1rpx;
background: #eee; background: #eee;
} }
&:last-child::after { &:last-child::after {
display: none; display: none;
} }
} }
.info-logo { .info-logo {
text-align: right; text-align: right;
padding-right: 40rpx; padding-right: 40rpx;
label { label {
position: absolute; position: absolute;
left: 0; left: 0;
height: 88rpx; height: 88rpx;
line-height: 88rpx; line-height: 88rpx;
} }
image { image {
width: 88rpx; width: 88rpx;
height: 88rpx; height: 88rpx;
@@ -374,6 +379,7 @@
vertical-align: top; vertical-align: top;
background: $border-color-lg; background: $border-color-lg;
} }
.icon { .icon {
position: absolute; position: absolute;
right: 0; right: 0;
@@ -381,6 +387,7 @@
margin-top: -10px; margin-top: -10px;
} }
} }
.info-text { .info-text {
label { label {
position: absolute; position: absolute;
@@ -388,17 +395,20 @@
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
} }
textarea { textarea {
line-height: 40rpx; line-height: 40rpx;
width: 100%; width: 100%;
height: 160rpx; height: 160rpx;
} }
input { input {
height: 40rpx; height: 40rpx;
width: 100%; width: 100%;
} }
} }
} }
// 添加模块 // 添加模块
.add-modules { .add-modules {
margin: $margin 0; margin: $margin 0;
@@ -409,26 +419,31 @@
background: white; background: white;
box-sizing: border-box; box-sizing: border-box;
font-size: $title-size-lg; font-size: $title-size-lg;
.icon { .icon {
vertical-align: middle; vertical-align: middle;
margin-right: $margin/3; margin-right: $margin/3;
} }
} }
// 展示模块 // 展示模块
.module-item { .module-item {
background: white; background: white;
padding: $padding/2 $padding; padding: $padding/2 $padding;
margin-top: $margin - 10; margin-top: $margin - 10;
.module-title { .module-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: $padding/2; padding-bottom: $padding/2;
border-bottom: solid 1rpx $border-color; border-bottom: solid 1rpx $border-color;
.title-input { .title-input {
width: calc(100% - 150rpx); width: calc(100% - 150rpx);
height: 70rpx; height: 70rpx;
font-size: $title-size; font-size: $title-size;
} }
.remove-btn { .remove-btn {
line-height: 70rpx; line-height: 70rpx;
color: $text-price; color: $text-price;
@@ -436,29 +451,34 @@
font-size: $title-size-m; font-size: $title-size-m;
} }
} }
.module-textarea { .module-textarea {
padding: $padding 0 $padding/2; padding: $padding 0 $padding/2;
width: 100%; width: 100%;
font-size: $title-size; font-size: $title-size;
line-height: 50rpx; line-height: 50rpx;
box-sizing: border-box; box-sizing: border-box;
textarea { textarea {
width: 100%; width: 100%;
height: 200rpx; height: 200rpx;
} }
} }
.module-imgs { .module-imgs {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: $padding/2; padding-top: $padding/2;
margin-left: -10rpx; margin-left: -10rpx;
margin-right: -10rpx; margin-right: -10rpx;
.item { .item {
position: relative; position: relative;
background: #F8F8F8; background: #F8F8F8;
width: calc(25% - 20rpx); width: calc(25% - 20rpx);
padding-top: calc(25% - 20rpx); padding-top: calc(25% - 20rpx);
margin: 10rpx; margin: 10rpx;
.cover { .cover {
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -466,12 +486,14 @@
top: 0; top: 0;
left: 0; left: 0;
} }
.item-input { .item-input {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: rgba($color: #000000, $alpha: .7); background: rgba($color: #000000, $alpha: .7);
input { input {
height: 50rpx; height: 50rpx;
line-height: 50rpx; line-height: 50rpx;
@@ -481,6 +503,7 @@
color: white; color: white;
} }
} }
.item-upd { .item-upd {
@extend .vertical; @extend .vertical;
text-align: center; text-align: center;
@@ -489,23 +512,34 @@
} }
} }
} }
.module-hint { .module-hint {
color: $text-gray; color: $text-gray;
font-size: $title-size-sm; font-size: $title-size-sm;
padding: $padding/2 0; padding: $padding/2 0;
line-height: 50rpx; line-height: 50rpx;
.delVideo{
display: inline-block;
background-color: $mian-color;
color: #fff;
margin-left: 30rpx;
padding:2rpx 20rpx ;
} }
}
.module-videos { .module-videos {
display: flex; display: flex;
padding: $padding 0 ($padding/2); padding: $padding 0 ($padding/2);
margin-left: -10rpx; margin-left: -10rpx;
margin-right: -10rpx; margin-right: -10rpx;
.item { .item {
position: relative; position: relative;
width: calc(50% - #{$margin/2}); width: calc(50% - #{$margin/2});
padding-top: calc(35% - #{$margin/2}); padding-top: calc(35% - #{$margin/2});
background: #f8f8f8; background: #f8f8f8;
margin: 0 10rpx; margin: 0 10rpx;
.item-upd { .item-upd {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -518,6 +552,7 @@
line-height: 40rpx; line-height: 40rpx;
@extend .vertical; @extend .vertical;
} }
.cover { .cover {
position: absolute; position: absolute;
top: 0; top: 0;

56
unpackage/dist/dev/app-plus/app-service.js vendored
View File

@@ -44921,10 +44921,30 @@ var render = function() {
) )
] ]
), ),
_c("view", { _c(
"view",
{
staticClass: _vm._$s("50-" + $30, "sc", "module-hint"), staticClass: _vm._$s("50-" + $30, "sc", "module-hint"),
attrs: { _i: "50-" + $30 } attrs: { _i: "50-" + $30 }
},
[
_vm._$s(
"51-" + $30,
"i",
module.content.video_url.showpath != ""
)
? _c("span", {
staticClass: _vm._$s("51-" + $30, "sc", "delVideo"),
attrs: { _i: "51-" + $30 },
on: {
longpress: function($event) {
return _vm.removeImg("video", moduleIndex, "")
}
}
}) })
: _vm._e()
]
)
] ]
) )
: _vm._e() : _vm._e()
@@ -44933,14 +44953,14 @@ var render = function() {
_c( _c(
"view", "view",
{ {
staticClass: _vm._$s(51, "sc", "add-modules"), staticClass: _vm._$s(52, "sc", "add-modules"),
attrs: { _i: 51 }, attrs: { _i: 52 },
on: { click: _vm.addModule } on: { click: _vm.addModule }
}, },
[ [
_c("uni-icons", { _c("uni-icons", {
staticClass: _vm._$s(52, "sc", "icon"), staticClass: _vm._$s(53, "sc", "icon"),
attrs: { color: "#8b64fd", size: "20", type: "plus", _i: 52 } attrs: { color: "#8b64fd", size: "20", type: "plus", _i: 53 }
}) })
], ],
1 1
@@ -45058,17 +45078,6 @@ Object.defineProperty(exports, "__esModule", { value: true });exports.default =
@@ -45082,7 +45091,12 @@ Object.defineProperty(exports, "__esModule", { value: true });exports.default =
var _store = __webpack_require__(/*! @/apis/interfaces/store */ 375); var _store = __webpack_require__(/*! @/apis/interfaces/store */ 375);
var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);function _toConsumableArray(arr) {return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();}function _nonIterableSpread() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _iterableToArray(iter) {if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);}function _arrayWithoutHoles(arr) {if (Array.isArray(arr)) return _arrayLikeToArray(arr);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}var _default = var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);function _toConsumableArray(arr) {return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();}function _nonIterableSpread() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _iterableToArray(iter) {if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);}function _arrayWithoutHoles(arr) {if (Array.isArray(arr)) return _arrayLikeToArray(arr);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}var _default =
{ {
data: function data() { data: function data() {
return { return {
@@ -45146,7 +45160,10 @@ var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);func
switch (type) { switch (type) {
case 'logo': case 'logo':
uni.chooseImage({ uni.chooseImage({
crop: { width: 300, height: 300 }, crop: {
width: 300,
height: 300 },
success: function success(path) { success: function success(path) {
(0, _uploading.uploads)([{ (0, _uploading.uploads)([{
name: 'logo', name: 'logo',
@@ -45164,7 +45181,10 @@ var _uploading = __webpack_require__(/*! @/apis/interfaces/uploading */ 97);func
break; break;
case 'videoCover': case 'videoCover':
uni.chooseImage({ uni.chooseImage({
crop: { width: 500, height: 350 }, crop: {
width: 500,
height: 350 },
success: function success(path) { success: function success(path) {
(0, _uploading.uploads)([{ (0, _uploading.uploads)([{
name: 'logo', name: 'logo',

30
unpackage/dist/dev/app-plus/app-view.js vendored
View File

File diff suppressed because one or more lines are too long