DeXun/cashier
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
砂糖
2026-02-07 18:01:13 +08:00
commit 8015759c65
2110 changed files with 269866 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
fuintUniapp/components/page/article/index.vue Normal file
View File

@@ -0,0 +1,122 @@
<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 twolist-hidden">
<text>{{ 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 twolist-hidden">
<text>{{ 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: 80rpx;
font-size: 30rpx;
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>

163
fuintUniapp/components/page/banner/index.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<view class="diy-banner" :style="{ height: `${imgHeights[imgCurrent]}rpx` }">
<!-- 图片轮播 -->
<swiper :autoplay="autoplay" class="swiper-box" :duration="duration" :circular="true" :interval="itemStyle.interval * 1000"
@change="_bindChange">
<swiper-item v-for="(dataItem, index) in dataList" :key="index">
<image lazy-load :lazy-load-margin="0" class="slide-image" :src="dataItem.image" @click="onLink(dataItem.url)"
@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 {
width: 730,
indicatorDots: false, // 是否显示面板指示点
autoplay: true, // 是否自动切换
duration: 800, // 滑动动画时长
imgHeights: [], // 图片的高度
imgCurrent: 0, // 当前banne所在滑块指针
}
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
onLink(linkObj) {
this.$navTo(linkObj)
},
/**
* 计算图片高度
*/
_imagesHeight(e) {
// 获取图片真实宽度
const imgwidth = e.detail.width,
imgheight = e.detail.height,
// 宽高比
ratio = imgwidth / imgheight;
// 计算的高度值
const viewHeight = this.width / ratio;
const imgHeights = this.imgHeights;
// 把每一张图片的高度记录到数组里
imgHeights.push(viewHeight);
this.imgHeights = imgHeights;
},
/**
* 记录当前指针
*/
_bindChange(e) {
this.imgCurrent = e.detail.current
}
}
}
</script>
<style lang="scss" scoped>
.diy-banner {
position: relative;
max-height: 400rpx;
margin-top: 100rpx;
/* #ifdef H5 */
margin-top: 120rpx;
/* #endif */
// swiper组件
.swiper-box {
height: 100%;
padding: 0rpx 20rpx 0rpx 20rpx;
max-width: 750rpx;
max-height: 450rpx;
.slide-image {
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
border-radius: 10rpx;
}
}
/* 指示点 */
.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>

31
fuintUniapp/components/page/blank/index.vue Normal file
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>

294
fuintUniapp/components/page/coupon/index.vue Normal file
View File

@@ -0,0 +1,294 @@
<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="onTargetCoupon(dataItem.id, dataItem.type, dataItem.userCouponId)">
<!-- 单列卡券 -->
<block>
<view class="dis-flex">
<!-- 卡券图片 -->
<view class="goods-item_left">
<image class="image" :src="dataItem.image"></image>
</view>
<view class="goods-item_right">
<!-- 卡券名称 -->
<view class="goods-name twolist-hidden">
<text>{{ dataItem.name }}</text>
</view>
<view class="goods-item_desc">
<!-- 卡券卖点 -->
<view class="desc-selling_point dis-flex">
<text class="onelist-hidden">{{ dataItem.sellingPoint }}</text>
</view>
<view class="coupon-attr">
<view class="attr-l">
<!-- 参与人数 -->
<view class="desc-goods_sales dis-flex">
<text v-if="dataItem.type === 'C'">已领取{{ dataItem.gotNum }}，剩余{{ dataItem.leftNum }}</text>
<text v-if="dataItem.type === 'P'">已预存{{ dataItem.gotNum }}，剩余{{ dataItem.leftNum }}</text>
<text v-if="dataItem.type === 'T'">已领取{{ dataItem.gotNum }}</text>
</view>
<!-- 卡券面额 -->
<view v-if="dataItem.amount > 0" class="desc_footer">
<text class="price_x">¥{{ dataItem.amount }}</text>
</view>
</view>
<view class="attr-r">
<!--领券按钮-->
<view class="receive" v-if="dataItem.type === 'C' && dataItem.isReceive === false">
<text>立即领取</text>
</view>
<view class="receive state" v-if="dataItem.type === 'C' && dataItem.isReceive === true">
<text>已领取</text>
</view>
<view class="receive" v-if="dataItem.type === 'P' && dataItem.isReceive === false">
<text>立即预存</text>
</view>
<view v-if="dataItem.type === 'T' && dataItem.isReceive === false" class="receive">
<text>领取次卡</text>
</view>
<view v-if="dataItem.type === 'T' && dataItem.isReceive === true" class="receive state">
<text>已领取</text>
</view>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import * as couponApi from '@/api/coupon'
import * as pageApi from '@/api/page'
export default {
name: "Coupon",
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
dataList: Array
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 卡券详情页
*/
onTargetCoupon(couponId, type, userCouponId) {
if (type === 'P') {
this.$navTo(`pages/prestore/buy`, { couponId })
} else {
if (type === 'C') {
this.$navTo(`pages/coupon/detail`, { couponId: couponId, userCouponId: userCouponId })
} else if(type === 'T') {
this.$navTo(`pages/timer/detail`, { couponId: couponId, userCouponId: userCouponId })
}
}
}
}
}
</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: 80rpx;
height: 63rpx;
border-radius: 5rpx;
padding-bottom: 100%;
overflow: hidden;
background: #fff;
&:after {
content: '';
display: block;
margin-top: 100%;
}
.image {
position: absolute;
width: 80rpx;
height: 63rpx;
border-radius: 5rpx;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
.detail {
padding: 8rpx;
background: #fff;
.goods-name {
height: 64rpx;
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: 240rpx;
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: 35%;
background: #fff;
align-items: center;
.image {
display: block;
margin-top: 20rpx;
width: 200rpx;
height: 157rpx;
border-radius: 6rpx;
}
}
.goods-item_right {
position: relative;
width: 65%;
.goods-name {
margin-top: 20rpx;
height: 40rpx;
line-height: 1.0;
white-space: normal;
color: #484848;
font-size: 30rpx;
}
}
.goods-item_desc {
margin-top: 0rpx;
.coupon-attr {
.attr-l {
float:left;
width: 70%;
}
.attr-r {
margin-top:20rpx;
float:left;
}
}
}
.desc-selling_point {
width: 400rpx;
font-size: 24rpx;
color: #e49a3d;
}
.receive {
height: 46rpx;
width: 128rpx;
line-height: 46rpx;
text-align: center;
border: 1px solid #f8df00;
border-radius: 5rpx;
color: #f86d48;
background: #f8df98;
font-size: 22rpx;
&.state {
border: none;
color: #cccccc;
background: #F5F5F5;
}
}
.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>

399
fuintUniapp/components/page/goods/index.vue Normal file
View File

@@ -0,0 +1,399 @@
<template>
<!-- 商品列表 -->
<view class="goods-container">
<view class="recommend" v-if="list.content.length > 0">
<text class="txt">为您推荐</text>
</view>
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
<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 list.content" :key="index" @click="onTargetGoods(dataItem.id)">
<!-- 单列商品 -->
<block v-if="itemStyle.column === 1">
<view class="dis-flex">
<!-- 商品图片 -->
<view class="goods-item_left">
<image class="image" lazy-load :lazy-load-margin="0" :src="dataItem.logo"></image>
</view>
<view class="goods-item_right">
<!-- 商品名称 -->
<view v-if="itemStyle.show.includes('goodsName')" class="goods-name twoline-hide">
<text>{{ dataItem.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.salePoint ? dataItem.salePoint : '' }}</text>
</view>
<!-- 商品销量 -->
<view v-if="itemStyle.show.includes('goodsSales')" class="desc-goods_sales dis-flex">
<text>已售{{ dataItem.initSale ? dataItem.initSale : 0 }}件</text>
</view>
<!-- 商品价格 -->
<view class="desc_footer">
<text v-if="itemStyle.show.includes('goodsPrice')" class="price_x">¥{{ dataItem.price ? dataItem.price : '0.00' }}</text>
<text class="price_y col-9" v-if="itemStyle.show.includes('linePrice') && dataItem.linePrice > 0">¥{{ dataItem.linePrice }}</text>
<view class="buy-now">去购买</view>
</view>
</view>
</view>
</view>
</block>
<!-- 多列商品 -->
<block v-else>
<view class="goods-info">
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" lazy-load :lazy-load-margin="0" mode="aspectFill" :src="dataItem.logo"></image>
</view>
<view class="detail">
<!-- 商品标题 -->
<view v-if="itemStyle.show.includes('goodsName')" class="goods-name twoline-hide">
{{ dataItem.name }}
</view>
<!-- 商品卖点 -->
<view v-if="itemStyle.show.includes('sellingPoint')" class="desc-selling_point dis-flex">
<text class="oneline-hide">{{ dataItem.salePoint ? dataItem.salePoint : '' }}</text>
</view>
<!-- 商品价格 -->
<view class="detail-price oneline-hide">
<text v-if="itemStyle.show.includes('goodsPrice')" class="goods-price f-30 col-m">￥{{ dataItem.price }}</text>
<text v-if="itemStyle.show.includes('linePrice') && dataItem.linePrice > 0" class="line-price col-9 f-24">￥{{ dataItem.linePrice }}</text>
<text v-if="itemStyle.show.includes('goodsSales')" class="sales">已售{{ dataItem.initSale ? dataItem.initSale : 0 }}件</text>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
</mescroll-body>
</view>
</template>
<script>
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
import * as GoodsApi from '@/api/goods'
const pageSize = 10;
export default {
name: "Goods",
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
isReflash: Boolean
},
components: {
MescrollBody
},
mixins: [MescrollMixin],
data() {
return {
list: getEmptyPaginateObj(),
// 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认10
page: { size: pageSize },
// 数量要大于1条才显示无更多数据
noMoreSize: 1,
}
}
},
watch: {
isReflash(value) {
if (value) {
this.getGoodsList(1);
}
}
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 跳转商品详情页
*/
onTargetGoods(goodsId) {
this.$navTo(`pages/goods/detail`, { goodsId })
},
/**
* 上拉加载的回调 (页面初始化时也会执行一次)
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
* @param {Object} page
*/
upCallback(page) {
const app = this
// 设置列表数据
app.getGoodsList(page.num)
.then(list => {
const curPageLen = list.content.length;
const totalSize = list.totalElements;
app.mescroll.endBySize(curPageLen, totalSize);
})
.catch(() => {
app.mescroll.endErr();
})
},
/**
* 获取商品列表
* @param {number} pageNo 页码
*/
getGoodsList(pageNo) {
const app = this
console.log('pageNo=====', pageNo);
const param = { page: pageNo, pageSize: pageSize }
return new Promise((resolve, reject) => {
GoodsApi.search(param)
.then(result => {
// 合并新数据
const newList = result.data;
app.list.content = getMoreListData(newList, app.list, pageNo)
resolve(newList)
})
.catch(reject)
})
}
}
}
</script>
<style lang="scss" scoped>
.goods-container {
.recommend {
font-size: 30rpx;
font-weight: bold;
margin-left: 20rpx;
margin-right: 20rpx;
padding: 20rpx 8rpx 20rpx 8rpx;
background: #f5f5f5;
.txt {
border-left: solid $fuint-theme 10rpx;
padding-left: 10rpx;
}
}
.diy-goods {
.goods-list {
padding: 0rpx 12rpx 12rpx 12rpx;
box-sizing: border-box;
.goods-item {
box-sizing: border-box;
padding: 0rpx 12rpx 12rpx 12rpx;
background: #f5f5f5;
.goods-info {
background: #ffffff;
border-radius: 16rpx;
padding: 2px;
overflow: hidden;
.goods-image {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
text-align: center;
&:after {
content: '';
display: block;
margin-top: 100%;
}
.image {
position: absolute;
box-sizing: border-box;
padding: 10rpx;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
border-radius: 40rpx;
}
}
}
.detail {
padding: 8rpx;
background: #ffffff;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
overflow: hidden;
height: 180rpx;
.goods-name {
height: 64rpx;
line-height: 1.3;
white-space: normal;
color: #484848;
font-size: 26rpx;
font-weight: bold;
}
.detail-price {
.goods-price {
margin-right: 8rpx;
font-size: 34rpx;
font-weight: bold;
}
.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%;
}
.desc-selling_point {
min-height: 40rpx;
line-height: 40rpx;
max-width: 400rpx;
font-size: 24rpx;
color: #e49a3d;
overflow: hidden;
}
.sales {
color: #999;
font-size: 24rpx;
margin-top: 10rpx;
float: right;
}
}
&.column__3 {
.goods-item {
width: 33.33333%;
}
}
&.column__1 {
.goods-item {
width: 100%;
height: 250rpx;
margin-bottom: 10rpx;
padding: 20rpx;
box-sizing: border-box;
background: #fff;
line-height: 1.6;
&:last-child {
margin-bottom: 0;
}
&:first-child {
margin-top: 8rpx;
}
}
.goods-item_left {
display: flex;
width: 40%;
background: #fff;
align-items: center;
.image {
display: block;
width: 220rpx;
height: 200rpx;
border-radius: 10rpx;
}
}
.goods-item_right {
position: relative;
width: 60%;
.goods-name {
margin-top: 20rpx;
max-height: 69rpx;
line-height: 1.3;
white-space: normal;
color: #484848;
font-size: 30rpx;
font-weight: bold;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
.goods-item_desc {
margin-top: 0rpx;
}
.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: 33rpx;
font-weight: bold;
}
.price_y {
text-decoration: line-through;
}
.buy-now {
color: #FFFFFF;
float: right;
margin-right: 20rpx;
border: solid 1rpx $fuint-theme;
background: $fuint-theme;
padding: 8rpx 20rpx 8rpx 20rpx;
border-radius: 5rpx;
display: block;
}
}
}
}
}
}
</style>

36
fuintUniapp/components/page/guide/index.vue Normal file
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>

47
fuintUniapp/components/page/image/index.vue Normal file
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>

108
fuintUniapp/components/page/index.vue Normal file
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>

108
fuintUniapp/components/page/location/index.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<!-- 定位店铺 -->
<view class="main-loc">
<view v-if="storeInfo.name" class="diy-location">
<view class="inner" @click="onTargetLocation">
<view class="location-input">
<text class="store">
<text class="name">{{ storeInfo.name }}</text>
<text class="switch">[切换店铺]</text>
<text class="address"><text class="location-icon iconfont icon-dingwei"></text>{{ storeInfo.address }}</text>
</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemStyle: Object,
storeInfo: Object
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 跳转到定位页面页面
*/
onTargetLocation() {
this.$navTo('pages/location/index')
}
}
}
</script>
<style lang="scss" scoped>
.main-loc {
height: 90rpx;
/* #ifdef H5 */
height: 100rpx;
/* #endif */
color: #ffffff;
.diy-location {
background: linear-gradient(to bottom, $fuint-theme, $fuint-theme);
padding: 3rpx 10rpx 10rpx 10rpx;
/* #ifdef H5 */
padding-top: 15rpx;
/* #endif */
position: fixed;
z-index: 99999;
width: 100%;
}
.inner {
height: 82rpx;
overflow: hidden;
&.radius {
border-radius: 10rpx;
}
&.round {
border-radius: 60rpx;
}
}
.location-input {
color: #484848;
padding-left: 10rpx;
}
.store {
.name {
font-size: 32rpx;
font-weight: bold;
color: #ffffff;
}
.switch {
margin-left: 15rpx;
font-size: 22rpx;
color: #ffffff;
}
.address {
clear: bold;
display: block;
margin-top: 2rpx;
font-size: 23rpx;
margin-left: 0rpx;
color: #ffffff;
.location-icon {
margin-right: 4rpx;
font-size: 24rpx;
color: #f03c3c;
font-weight: bold;
}
}
}
}
</style>

23
fuintUniapp/components/page/mixin.js Normal file
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
}
},
}

133
fuintUniapp/components/page/navBar/index.vue Normal file
View File

@@ -0,0 +1,133 @@
<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" :class="'nav-' + index" @click="onLink(dataItem.linkUrl)">
<view class="item-image">
<image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
</view>
<view class="item-text onelist-hidden">
<view class="text">{{ dataItem.text }}</view>
<view class="tip">{{ dataItem.tip }}</view>
</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: {
onLink(linkObj) {
this.$navTo(linkObj)
}
}
}
</script>
<style lang="scss" scoped>
.diy-navBar .data-list::after {
clear: both;
content: " ";
display: table;
}
.item-nav {
float: left;
margin: 10rpx 0px 4rpx 0px;
text-align: center;
background: #ffffff;
padding: 2rpx;
color: #0c5566;
font-weight: bold;
.nav-to {
margin: 0rpx 8px 0px 8px;
padding: 38rpx 10rpx 10rpx 10rpx;
border-radius: 20rpx;
height: 150rpx;
background: linear-gradient(to bottom, #ffffff, #f5f5f5);
border: solid 1rpx #ccc;
}
.nav-0 {
margin: 0rpx 4px 0px 8px;
}
.nav-1 {
margin: 0rpx 8px 0px 4px;
}
.nav-2 {
margin: 0rpx 4px 0px 8px;
}
.nav-3 {
margin: 0rpx 8px 0px 4px;
}
.nav-4 {
margin: 0rpx 4px 0px 8px;
}
.nav-5 {
margin: 0rpx 8px 0px 4px;
}
.item-text {
text-align: left;
padding-left: 20rpx;
.text {
font-size: 32rpx;
}
.tip {
font-size: 22rpx;
margin-top: 8rpx;
color: #999;
}
}
.item-image {
margin-bottom: 4px;
font-size: 0;
margin-left: 30rpx;
width: 88rpx;
height: 88rpx;
float: left;
}
.item-image .image {
width: 80rpx;
height: 80rpx;
}
}
/* 分列布局 */
.diy-navBar .avg-sm-3>.item-nav {
width: 33.33333333%;
}
.diy-navBar .avg-sm-4>.item-nav {
width: 25%;
}
.diy-navBar .avg-sm-2>.item-nav {
width: 50%;
}
</style>

40
fuintUniapp/components/page/notice/index.vue Normal file
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>

41
fuintUniapp/components/page/richText/index.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<!-- 富文本 -->
<view class="diy-richText" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px`, background: itemStyle.background }">
<jyf-parser :html="params.content"></jyf-parser>
</view>
</template>
<script>
import jyfParser from "@/components/jyf-parser/jyf-parser"
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemStyle: Object,
params: Object
},
components: {
jyfParser
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
}
</script>
<style lang="scss" scoped>
.diy-richText {
font-size: 28rpx;
}
</style>

75
fuintUniapp/components/page/search/index.vue Normal file
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-sousuo"></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: $fuint-theme;
padding: 20rpx 20rpx;
font-size: 26rpx;
}
.inner {
height: 60rpx;
background: $fuint-theme;
overflow: hidden;
&.radius {
border-radius: 10rpx;
}
&.round {
border-radius: 60rpx;
}
}
.search-input {
height: 60rpx;
line-height: 60rpx;
color: #999;
padding: 0 20rpx;
background: $fuint-theme;
.search-icon {
margin-right: 8rpx;
}
}
</style>

86
fuintUniapp/components/page/service/index.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<!-- 在线客服 -->
<view v-if="!(params.type === 'chat' && !isMpWeiXin)" class="diy-service" :style="{ right: `${itemStyle.right}%`, bottom: `${itemStyle.bottom}%` }">
<!-- 拨打电话 -->
<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>
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemStyle: Object,
params: Object
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data() {
return {
isMpWeiXin: false,
isShow: true
}
},
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;
.service-icon {
padding: 10rpx;
.image {
display: block;
width: 90rpx;
height: 90rpx;
}
}
}
</style>

38
fuintUniapp/components/page/video/index.vue Normal file
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>

171
fuintUniapp/components/page/window/index.vue Normal file
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(dataItem.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(dataItem.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(dataItem.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(dataItem.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>