vipnub/oil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目

Browse Source
This commit is contained in:
vipnub
2026-09-01 22:15:50 +08:00
commit b5a26a8848
11217 changed files with 1710987 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile-uniapp/components/page/article/index.vue
+123
View File
@@ -0,0 +1,123 @@
<template>
<!-- 文章组 -->
<view class="diy-article">
<view class="article-item" :class="[`show-type__${item.show_type}`]" v-for="(item, index) in dataList" :key="index"
@click="onTargetDetail(item.article_id)">
<!-- 小图模式 -->
<block v-if="item.show_type == 10">
<view class="article-item__left flex-box">
<view class="article-item__title">
<text class="twoline-hide">{{ item.title }}</text>
</view>
<view class="article-item__footer m-top10">
<text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
</view>
</view>
<view class="article-item__image">
<image class="image" mode="widthFix" :src="item.image_url"></image>
</view>
</block>
<!-- 大图模式 -->
<block v-if="item.show_type == 20">
<view class="article-item__title">
<text class="twoline-hide">{{ item.title }}</text>
</view>
<view class="article-item__image m-top20">
<image class="image" mode="widthFix" :src="item.image_url"></image>
</view>
<view class="article-item__footer m-top10">
<text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
name: "Article",
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
params: Object,
dataList: Array
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 跳转文章详情页
*/
onTargetDetail(id) {
uni.navigateTo({
url: '/pages/article/detail?articleId=' + id
})
}
}
}
</script>
<style lang="scss" scoped>
.diy-article {
background: #f7f7f7;
.article-item {
margin-bottom: 20rpx;
padding: 30rpx;
background: #fff;
&:last-child {
margin-bottom: 0;
}
.article-item__title {
max-height: 74rpx;
font-size: 28rpx;
line-height: 38rpx;
color: #333;
}
.article-item__image .image {
display: block;
}
}
}
/* 小图模式 */
.show-type__10 {
display: flex;
.article-item__left {
padding-right: 20rpx;
}
.article-item__title {
// min-height: 72rpx;
}
.article-item__image .image {
width: 240rpx;
}
}
/* 大图模式 */
.show-type__20 .article-item__image .image {
width: 100%;
}
</style>
mobile-uniapp/components/page/banner/index.vue
+154
View File
@@ -0,0 +1,154 @@
<template>
<view class="diy-banner" :style="{ height: `${imgHeights[imgCurrent]}px` }">
<!-- 图片轮播 -->
<swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :circular="true" :interval="itemStyle.interval * 1000" @change="_bindChange">
<swiper-item v-for="(dataItem, index) in dataList" :key="index">
<image mode="widthFix" class="slide-image" :src="dataItem.imgUrl" @click="onLink(dataItem.link)" @load="_imagesHeight" />
</swiper-item>
</swiper>
<!-- 指示点 -->
<view class="indicator-dots" :class="itemStyle.btnShape">
<view class="dots-item" :class="{ active: imgCurrent == index }" :style="{ backgroundColor: itemStyle.btnColor }"
v-for="(dataItem, index) in dataList" :key="index"></view>
</view>
</view>
</template>
<script>
import mixin from '../mixin';
export default {
name: 'Banner',
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
dataList: Array
},
mixins: [mixin],
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data() {
return {
windowWidth: 750,
indicatorDots: false, // 是否显示面板指示点
autoplay: true, // 是否自动切换
duration: 800, // 滑动动画时长
imgHeights: [], // 图片的高度
imgCurrent: 0 // 当前banne所在滑块指针
};
},
created() {
const app = this;
uni.getSystemInfo({
success({ windowWidth }) {
app.windowWidth = windowWidth > 750 ? 750 : windowWidth;
}
});
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 计算图片高度
*/
_imagesHeight({ detail }) {
const app = this;
// 获取图片真实宽度
const { width, height } = detail;
// 宽高比
const ratio = width / height;
// 计算的高度值
const viewHeight = app.windowWidth / ratio;
// 把每一张图片的高度记录到数组里
app.imgHeights.push(viewHeight);
},
/**
* 记录当前指针
*/
_bindChange(e) {
this.imgCurrent = e.detail.current;
}
}
};
</script>
<style lang="scss" scoped>
.diy-banner {
position: relative;
// swiper组件
.swiper-box {
height: 100%;
.slide-image {
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
}
}
/* 指示点 */
.indicator-dots {
width: 100%;
height: 28rpx;
padding: 0 20rpx;
position: absolute;
left: 0;
right: 0;
bottom: 20rpx;
opacity: 0.8;
display: flex;
justify-content: center;
.dots-item {
width: 16rpx;
height: 16rpx;
margin-right: 8rpx;
background-color: #fff;
&:last-child {
margin-right: 0;
}
&.active {
background-color: #313131 !important;
}
}
// 圆形
&.round .dots-item {
width: 16rpx;
height: 16rpx;
border-radius: 20rpx;
}
// 正方形
&.square .dots-item {
width: 16rpx;
height: 16rpx;
}
// 长方形
&.rectangle .dots-item {
width: 22rpx;
height: 14rpx;
}
}
}
</style>
mobile-uniapp/components/page/blank/index.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<!-- 辅助空白 -->
<view class="diy-blank" :style="{ height: `${itemStyle.height}px`, background: itemStyle.background }">
</view>
</template>
<script>
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemStyle: Object
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
mobile-uniapp/components/page/goods/index.vue
+256
View File
@@ -0,0 +1,256 @@
<template>
<!-- 商品组 -->
<view class="diy-goods" :style="{ background: itemStyle.background }">
<view class="goods-list" :class="[`display__${itemStyle.display}`, `column__${itemStyle.column}`]">
<scroll-view :scroll-x="itemStyle.display === 'slide'">
<view class="goods-item" v-for="(dataItem, index) in dataList" :key="index" @click="onTargetGoods(dataItem.goods_id)">
<!-- 单列商品 -->
<block v-if="itemStyle.column === 1">
<view class="dis-flex">
<!-- 商品图片 -->
<view class="goods-item_left">
<image class="image" :src="dataItem.goods_image"></image>
</view>
<view class="goods-item_right">
<!-- 商品名称 -->
<view v-if="itemStyle.show.includes('goodsName')" class="goods-name">
<text class="twoline-hide">{{ dataItem.goods_name }}</text>
</view>
<view class="goods-item_desc">
<!-- 商品卖点 -->
<view v-if="itemStyle.show.includes('sellingPoint')" class="desc-selling_point dis-flex">
<text class="oneline-hide">{{ dataItem.selling_point }}</text>
</view>
<!-- 商品销量 -->
<view v-if="itemStyle.show.includes('goodsSales')" class="desc-goods_sales dis-flex">
<text>已售{{ dataItem.goods_sales }}件</text>
</view>
<!-- 商品价格 -->
<view class="desc_footer">
<text v-if="itemStyle.show.includes('goodsPrice')" class="price_x">¥{{ dataItem.goods_price_min }}</text>
<text class="price_y col-9"
v-if="itemStyle.show.includes('linePrice') && dataItem.line_price_min > 0">¥{{ dataItem.line_price_min }}</text>
</view>
</view>
</view>
</view>
</block>
<!-- 多列商品 -->
<block v-else>
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
</view>
<view class="detail">
<!-- 商品标题 -->
<view v-if="itemStyle.show.includes('goodsName')" class="goods-name">
<text class="twoline-hide">{{ dataItem.goods_name }}</text>
</view>
<!-- 商品价格 -->
<view class="detail-price oneline-hide">
<text v-if="itemStyle.show.includes('goodsPrice')" class="goods-price f-30 col-m">￥{{ dataItem.goods_price_min }}</text>
<text v-if="itemStyle.show.includes('linePrice') && dataItem.line_price_min > 0"
class="line-price col-9 f-24">￥{{ dataItem.line_price_min }}</text>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
name: "Goods",
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
dataList: Array
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 跳转商品详情页
*/
onTargetGoods(goodsId) {
this.$navTo(`pages/goods/detail`, { goodsId })
}
}
}
</script>
<style lang="scss" scoped>
.diy-goods {
.goods-list {
padding: 4rpx;
box-sizing: border-box;
.goods-item {
box-sizing: border-box;
padding: 6rpx;
.goods-image {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
background: #fff;
&:after {
content: '';
display: block;
margin-top: 100%;
}
.image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
.detail {
padding: 8rpx;
background: #fff;
.goods-name {
min-height: 68rpx;
line-height: 1.3;
white-space: normal;
color: #484848;
font-size: 26rpx;
}
.detail-price {
.goods-price {
margin-right: 8rpx;
}
.line-price {
text-decoration: line-through;
}
}
}
}
&.display__slide {
white-space: nowrap;
font-size: 0;
.goods-item {
display: inline-block;
}
}
&.display__list {
.goods-item {
float: left;
}
}
&.column__2 {
.goods-item {
width: 50%;
}
}
&.column__3 {
.goods-item {
width: 33.33333%;
}
}
&.column__1 {
.goods-item {
width: 100%;
height: 280rpx;
margin-bottom: 12rpx;
padding: 20rpx;
box-sizing: border-box;
background: #fff;
line-height: 1.6;
&:last-child {
margin-bottom: 0;
}
}
.goods-item_left {
display: flex;
width: 40%;
background: #fff;
align-items: center;
.image {
display: block;
width: 240rpx;
height: 240rpx;
}
}
.goods-item_right {
position: relative;
width: 60%;
.goods-name {
margin-top: 20rpx;
min-height: 68rpx;
line-height: 1.3;
white-space: normal;
color: #484848;
font-size: 26rpx;
}
}
.goods-item_desc {
margin-top: 8rpx;
}
.desc-selling_point {
width: 400rpx;
font-size: 24rpx;
color: #e49a3d;
}
.desc-goods_sales {
color: #999;
font-size: 24rpx;
}
.desc_footer {
font-size: 24rpx;
.price_x {
margin-right: 16rpx;
color: #f03c3c;
font-size: 30rpx;
}
.price_y {
text-decoration: line-through;
}
}
}
}
}
</style>
mobile-uniapp/components/page/guide/index.vue
+36
View File
@@ -0,0 +1,36 @@
<template>
<!-- 辅助线 -->
<view class="diy-guide" :style="{ padding: `${itemStyle.paddingTop}px 0`, background: itemStyle.background }">
<view class="line" :style="{ borderTop: `${itemStyle.lineHeight}px ${itemStyle.lineStyle} ${itemStyle.lineColor}` }">
</view>
</view>
</template>
<script>
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemStyle: Object
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
.diy-guide .line {
width: 100%;
}
</style>
mobile-uniapp/components/page/image/index.vue
+47
View File
@@ -0,0 +1,47 @@
<template>
<!-- 单图组 -->
<view class="diy-imageSingle" :style="{ paddingBottom: `${itemStyle.paddingTop}px`, background: itemStyle.background }">
<view class="item-image" v-for="(dataItem, index) in dataList" :key="index" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px 0` }">
<view class="nav-to" @click="onLink(dataItem.link)">
<image class="image" :src="dataItem.imgUrl" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
import mixin from '../mixin'
export default {
name: "Images",
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
dataList: Array
},
mixins: [mixin],
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
.diy-imageSingle .item-image .image {
display: block;
width: 100%;
}
</style>
mobile-uniapp/components/page/index.vue
+108
View File
@@ -0,0 +1,108 @@
<template>
<view class="page-items">
<block v-for="(item, index) in items" :key="index">
<!-- 搜索框 -->
<block v-if="item.type === 'search'">
<Search :itemStyle="item.style" :params="item.params" />
</block>
<!-- 图片组 -->
<block v-if="item.type === 'image'">
<Images :itemStyle="item.style" :params="item.params" :dataList="item.data" />
</block>
<!-- 轮播图 -->
<block v-if="item.type === 'banner'">
<Banner :itemStyle="item.style" :params="item.params" :dataList="item.data" />
</block>
<!-- 图片橱窗 -->
<block v-if="item.type === 'window'">
<Window :itemStyle="item.style" :params="item.params" :dataList="item.data" />
</block>
<!-- 视频 -->
<block v-if="item.type === 'video'">
<Videos :itemStyle="item.style" :params="item.params" />
</block>
<!-- 文章组 -->
<block v-if="item.type === 'article'">
<Article :params="item.params" :dataList="item.data" />
</block>
<!-- 店铺公告 -->
<block v-if="item.type === 'notice'">
<Notice :itemStyle="item.style" :params="item.params" />
</block>
<!-- 导航 -->
<block v-if="item.type === 'navBar'">
<NavBar :itemStyle="item.style" :params="item.params" :dataList="item.data" />
</block>
<!-- 商品 -->
<block v-if="item.type === 'goods'">
<Goods :itemStyle="item.style" :params="item.params" :dataList="item.data" />
</block>
<!-- 在线客服 -->
<block v-if="item.type === 'service'">
<Service :itemStyle="item.style" :params="item.params" />
</block>
<!-- 辅助空白 -->
<block v-if="item.type === 'blank'">
<Blank :itemStyle="item.style" />
</block>
<!-- 辅助线 -->
<block v-if="item.type === 'guide'">
<Guide :itemStyle="item.style" />
</block>
<!-- 富文本 -->
<block v-if="item.type === 'richText'">
<RichText :itemStyle="item.style" :params="item.params" />
</block>
</block>
</view>
</template>
<script>
import Search from './search'
import Images from './image'
import Banner from './banner'
import Window from './window'
import Videos from './video'
import Article from './article'
import Notice from './notice'
import NavBar from './navBar'
import Goods from './goods'
import Service from './service'
import Blank from './blank'
import Guide from './guide'
import RichText from './richText'
export default {
name: "Page",
components: {
Search,
Images,
Banner,
Window,
Videos,
Article,
Notice,
NavBar,
Goods,
Service,
Blank,
Guide,
RichText
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
items: {
type: Array,
default () {
return []
}
}
},
}
</script>
<style lang="scss">
// 组件样式
</style>
mobile-uniapp/components/page/mixin.js
+23
View File
@@ -0,0 +1,23 @@
import util from '@/utils/util'
export default {
data() {
return {}
},
methods: {
/**
* link对象点击事件
* 支持tabBar页面
*/
onLink(linkObj) {
if (!linkObj) return false
// 跳转到指定页面
if (linkObj.type === 'PAGE') {
this.$navTo(linkObj.param.path, linkObj.param.query)
}
return true
}
},
}
mobile-uniapp/components/page/navBar/index.vue
+87
View File
@@ -0,0 +1,87 @@
<template>
<!-- 导航组 -->
<view class="diy-navBar" :style="{ background: itemStyle.background, color: itemStyle.textColor }">
<view class="data-list" :class="[`avg-sm-${itemStyle.rowsNum}`]">
<view class="item-nav" v-for="(dataItem, index) in dataList" :key="index">
<view class="nav-to" @click="onLink(dataItem.link)">
<view class="item-image">
<image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
</view>
<view class="item-text oneline-hide">{{ dataItem.text }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import mixin from '../mixin'
export default {
name: "NavBar",
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
dataList: Array
},
mixins: [mixin],
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
.diy-navBar .data-list::after {
clear: both;
content: " ";
display: table;
}
.item-nav {
float: left;
margin: 10px 0;
text-align: center;
.item-text {
font-size: 26rpx;
}
.item-image {
margin-bottom: 4px;
font-size: 0;
}
.item-image .image {
width: 88rpx;
height: 88rpx;
}
}
/* 分列布局 */
.diy-navBar .avg-sm-3>.item-nav {
width: 33.33333333%;
}
.diy-navBar .avg-sm-4>.item-nav {
width: 25%;
}
.diy-navBar .avg-sm-5>.item-nav {
width: 20%;
}
</style>
mobile-uniapp/components/page/notice/index.vue
+40
View File
@@ -0,0 +1,40 @@
<template>
<!-- 店铺公告 -->
<view class="diy-notice" :style="{ paddingTop: `${itemStyle.paddingTop}px`, paddingBottom: `${itemStyle.paddingTop}px` }"
@click="onLink(params.link)">
<u-notice-bar padding="10rpx 24rpx" :volume-icon="params.showIcon" :autoplay="params.scrollable"
:bg-color="itemStyle.background" :color="itemStyle.textColor" :list="[params.text]"></u-notice-bar>
</view>
</template>
<script>
import mixin from '../mixin'
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemStyle: Object,
params: Object
},
mixins: [mixin],
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
mobile-uniapp/components/page/richText/index.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<!-- 富文本 -->
<view class="diy-richText"
:style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px`, background: itemStyle.background }">
<mp-html :content="params.content" />
</view>
</template>
<script>
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemStyle: Object,
params: Object
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
.diy-richText {
font-size: 28rpx;
}
</style>
mobile-uniapp/components/page/search/index.vue
+75
View File
@@ -0,0 +1,75 @@
<template>
<!-- 搜索框 -->
<view class="diy-search">
<view class="inner" :class="itemStyle.searchStyle" @click="onTargetSearch">
<view class="search-input" :style="{ textAlign: itemStyle.textAlign }">
<text class="search-icon iconfont icon-search"></text>
<text> {{ params.placeholder }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 跳转到搜索页面
*/
onTargetSearch() {
this.$navTo('pages/search/index')
}
}
}
</script>
<style lang="scss" scoped>
.diy-search {
background: #f1f1f2;
padding: 20rpx 20rpx;
font-size: 26rpx;
}
.inner {
height: 60rpx;
background: #fff;
overflow: hidden;
&.radius {
border-radius: 10rpx;
}
&.round {
border-radius: 60rpx;
}
}
.search-input {
height: 60rpx;
line-height: 60rpx;
color: #999;
padding: 0 20rpx;
.search-icon {
margin-right: 8rpx;
}
}
</style>
mobile-uniapp/components/page/service/index.vue
+102
View File
@@ -0,0 +1,102 @@
<template>
<!-- 在线客服 -->
<view v-if="!(params.type === 'chat' && !isMpWeiXin)" class="diy-service" :style="{ '--right': `${right}px`, '--bottom': `${bottom}px` }">
<!-- 拨打电话 -->
<block v-if="params.type === 'phone'">
<view class="service-icon" @click="onMakePhoneCall">
<image class="image" :src="params.image"></image>
</view>
</block>
<!-- 在线聊天 -->
<block v-else-if="params.type == 'chat'">
<button open-type="contact" class="btn-normal">
<view class="service-icon">
<image class="image" :src="params.image"></image>
</view>
</button>
</block>
</view>
</template>
<script>
import { rpx2px } from '@/utils/util'
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemStyle: Object,
params: Object
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data() {
return {
isMpWeiXin: false,
isShow: true
}
},
computed: {
right() {
return rpx2px(2 * this.itemStyle.right)
},
bottom() {
return rpx2px(2 * this.itemStyle.bottom)
}
},
created() {
// #ifdef MP-WEIXIN
this.isMpWeiXin = true
// #endif
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 点击拨打电话
*/
onMakePhoneCall(e) {
uni.makePhoneCall({
phoneNumber: this.params.tel
})
}
}
}
</script>
<style lang="scss" scoped>
.diy-service {
position: fixed;
z-index: 999;
right: calc(var(--window-right) + var(--right));
// 设置ios刘海屏底部横线安全区域
bottom: calc(constant(safe-area-inset-bottom) + var(--window-bottom) + var(--bottom));
bottom: calc(env(safe-area-inset-bottom) + var(--window-bottom) + var(--bottom));
.service-icon {
padding: 10rpx;
.image {
display: block;
width: 90rpx;
height: 90rpx;
border-radius: 50%;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}
}
}
</style>
mobile-uniapp/components/page/video/index.vue
+38
View File
@@ -0,0 +1,38 @@
<template>
<!-- 视频组 -->
<view class="diy-video" :style="{ padding: `${itemStyle.paddingTop}px 0` }">
<video class="video" :style="{ height: `${itemStyle.height}px` }" :src="params.videoUrl" :poster="params.poster"
:autoplay="params.autoplay == 1" controls></video>
</view>
</template>
<script>
export default {
name: 'Videos',
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
.diy-video .video {
width: 100%;
display: block;
}
</style>
mobile-uniapp/components/page/window/index.vue
+171
View File
@@ -0,0 +1,171 @@
<template>
<!-- 图片橱窗 -->
<view class="diy-window" :style="{ background: itemStyle.background, padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
<!-- matrix -->
<view v-if="itemStyle.layout > -1" class="data-list" :class="[`avg-sm-${itemStyle.layout}`]">
<view v-for="(dataItem, index) in dataList" :key="index" class="data-item" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
<view class="item-image" @click="onLink(dataItem.link)">
<image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
</view>
</view>
</view>
<!-- display -->
<view v-else class="display">
<view class="display-left" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
<image class="image" @click="onLink(dataList[0].link)" :src="dataList[0].imgUrl"></image>
</view>
<view class="display-right">
<view v-if="dataList.length >= 2 " class="display-right1" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
<image class="image" @click="onLink(dataList[1].link)" :src="dataList[1].imgUrl"></image>
</view>
<view class="display-right2">
<view v-if="dataList.length >= 3 " class="left" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
<image class="image" @click="onLink(dataList[2].link)" :src="dataList[2].imgUrl"></image>
</view>
<view v-if="dataList.length >= 4 " class="right" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
<image class="image" @click="onLink(dataList[3].link)" :src="dataList[3].imgUrl"></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import mixin from '../mixin'
export default {
name: "Window",
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
dataList: Array
},
mixins: [mixin],
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
.diy-window .data-list::after {
clear: both;
content: " ";
display: table;
}
.diy-window .data-list .data-item {
float: left;
box-sizing: border-box;
}
.diy-window .data-list .image {
display: block;
width: 100%;
}
/* 分列布局 */
.diy-window .avg-sm-2>.data-item {
width: 50%;
}
.diy-window .avg-sm-3>.data-item {
width: 33.33333333%;
}
.diy-window .avg-sm-4>.data-item {
width: 25%;
}
.diy-window .avg-sm-5>.data-item {
width: 20%;
}
/* 橱窗样式 */
.diy-window {
box-sizing: border-box;
}
.diy-window .display {
height: 0;
width: 100%;
margin: 0;
padding-bottom: 50%;
position: relative;
box-sizing: border-box;
}
.diy-window .display .image {
width: 100%;
height: 100%;
}
.diy-window .display .display-left {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
.diy-window .display .display-right {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
box-sizing: border-box;
}
.diy-window .display .display-right1 {
width: 100%;
height: 50%;
position: absolute;
top: 0;
box-sizing: border-box;
left: 0;
}
.diy-window .display .display-right2 {
width: 100%;
height: 50%;
position: absolute;
top: 50%;
left: 0;
box-sizing: border-box;
}
.diy-window .display .display-right2 .left {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
.diy-window .display .display-right2 .right {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
box-sizing: border-box;
}
</style>