478 lines
18 KiB
Vue
478 lines
18 KiB
Vue
<template>
|
|
<view>
|
|
|
|
<!-- DIY组件 -->
|
|
<view style="position: relative;" v-for="(item, item_key) in items" :key="item_key">
|
|
<!-- banner轮播 -->
|
|
<view class="diy-banner" v-if="item.type === 'banner'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<u-swiper :list="item.data" keyName="image" @click="banner"
|
|
:autoplay="item.params.autoplay=='true'?true:false"
|
|
:circular="item.params.circular=='true'?true:false"
|
|
:indicator="item.params.indicator=='true'?true:false" :duration="item.params.duration"
|
|
:interval="item.params.interval" :showTitle="item.style.showTitle=='true'?true:false"
|
|
:indicatorMode="item.style.indicatorMode" :indicatorStyle="item.style.indicatorStyle"
|
|
:height="item.style.height" :previousMargin="item.style.effect3d"
|
|
:nextMargin="item.style.effect3d" :bgColor="item.style.bgColor" :radius="item.style.radius">
|
|
</u-swiper>
|
|
<view v-if="item.style.welcome == 'true'" class="banner-title">
|
|
<view class="title">你好，{{user?user.nickname:'欢迎光临' + applet.app_name}}</view>
|
|
<view class="signature">{{applet.signature}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 点单组 -->
|
|
<view class="diy-order" v-if="item.type === 'order'"
|
|
:style="{marginTop:'-' + item.style.marginTop + 'rpx'}">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view class="food-box"
|
|
:style="{backgroundColor:item.style.bgColor,borderRadius:item.style.radius + 'rpx'}">
|
|
<view @click="food(item.data[0].food_mode)" v-if="item.params.number == 1">
|
|
<view class="icon">
|
|
<img :src="item.data[0].image">
|
|
</view>
|
|
<view class="right">
|
|
<view class="hm-font-b hm-col-0 hm-font-28">{{item.data[0].title}}</view>
|
|
<view class="hm-col-light hm-m-t-15 hm-font-24">{{item.data[0].text}}</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.params.number == 2" :class="index == 0 ? 'item num2':'item num2 b-l'" v-for="(order,index) in item.data" :key="index" @click="food(order.food_mode)">
|
|
<view>
|
|
<img :src="order.image"
|
|
:style="{width:item.style.width + 'rpx',height:item.style.height + 'rpx'}">
|
|
</view>
|
|
<view class="hm-font-b hm-col-0 hm-font-28">{{order.title}}</view>
|
|
<view class="hm-col-light hm-font-24">{{order.text}}</view>
|
|
</view>
|
|
<view v-if="item.params.number == 3" :class="index == 0 ? 'item num3':'item num3 b-l'" v-for="(order,index) in item.data" :key="index" @click="food(order.food_mode)">
|
|
<view>
|
|
<img :src="order.image"
|
|
:style="{width:item.style.width + 'rpx',height:item.style.height + 'rpx'}">
|
|
</view>
|
|
<view class="hm-font-b hm-col-0 hm-font-28">{{order.title}}</view>
|
|
<view class="hm-col-light hm-font-24">{{order.text}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 单图组 -->
|
|
<view class="diy-imageSingle" v-if="item.type === 'imageSingle'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view v-for="(dataItem, index) in item.data" :key="index"
|
|
:style="'background-color: ' + item.style.bgColor + ';padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
|
|
<image :src="dataItem.image" mode="widthFix" @click="goTo(dataItem.url)"
|
|
:show-menu-by-longpress="true" :lazy-load="true"
|
|
:style="'width:100%;border-radius:' + item.style.radius + 'rpx;'" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 图片橱窗 -->
|
|
<view class="diy-window" v-if="item.type === 'window'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view :style="'background: ' + item.style.bgColor + ';'">
|
|
<view v-if="item.style.layout > -1" :class="'data-list avg-sm-' + item.style.layout">
|
|
<view v-for="(dataItem, index) in item.data" :key="index" class="data-item"
|
|
:style="'padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
|
|
<u-image :src="dataItem.image" @click="goTo(dataItem.url)" :shape="item.style.shape"
|
|
:radius="item.style.radius" width="100%" showMenuByLongpress
|
|
:height="item.style.height"></u-image>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="window">
|
|
<view
|
|
:style="'padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
|
|
<u-image :src="item.data[0].image" @click="goTo(item.data[0].url)"
|
|
:shape="item.style.shape" :radius="item.style.radius" width="100%"
|
|
showMenuByLongpress :height="item.style.height"></u-image>
|
|
</view>
|
|
</view>
|
|
<view class="window">
|
|
<view>
|
|
<view v-if="item.data.length >= 2"
|
|
:style="'padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
|
|
<u-image :src="item.data[1].image" @click="goTo(item.data[1].url)"
|
|
:shape="item.style.shape" :radius="item.style.radius" width="100%"
|
|
showMenuByLongpress :height="item.style.height/2 - item.style.paddingTb">
|
|
</u-image>
|
|
</view>
|
|
<view
|
|
:style="'padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
|
|
<view v-if="item.data.length >= 3" class="window">
|
|
<view :style="'padding-right: ' + item.style.paddingLr/2 + 'rpx;'">
|
|
<u-image :src="item.data[2].image" @click="goTo(item.data[2].url)"
|
|
:shape="item.style.shape" :radius="item.style.radius" width="100%"
|
|
showMenuByLongpress
|
|
:height="item.style.height/2 - item.style.paddingTb"></u-image>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.data.length >= 4" class="window">
|
|
<view :style="'padding-left: ' + item.style.paddingLr/2 + 'rpx;'">
|
|
<u-image :src="item.data[3].image" @click="goTo(item.data[3].url)"
|
|
:shape="item.style.shape" :radius="item.style.radius" width="100%"
|
|
showMenuByLongpress
|
|
:height="item.style.height/2 - item.style.paddingTb"></u-image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 视频组 -->
|
|
<view class="diy-video" v-if="item.type === 'video'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view :style="'background: ' + item.style.bgColor + ';'">
|
|
<video :style="'height: ' + item.style.height + 'rpx;width:100%;'" :src="item.params.src"
|
|
:poster="item.params.poster" :autoplay="item.params.autoplay == 'true'?true:false"
|
|
:loop="item.params.autoplay == 'true'?true:false"
|
|
:muted="item.params.autoplay == 'true'?true:false" controls>
|
|
</video>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 公告组 -->
|
|
<view class="diy-notice" v-if="item.type === 'notice'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<u-notice-bar :text="item.data.text" :direction="item.params.direction"
|
|
:step="item.params.step == 'true'" :color="item.style.color" :bgColor="item.style.bgColor"
|
|
@click="notice"></u-notice-bar>
|
|
</view>
|
|
</view>
|
|
<!-- 导航组 -->
|
|
<view class="diy-navBar" v-if="item.type === 'navBar'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view class="hm-p-tb-20" :style="'background-color:'+item.style.bgColor">
|
|
<u-grid :col="item.style.rowsNum" :border="false">
|
|
<u-grid-item v-for="(item1,index1) in item.data" :key="index1" @click="goTo(item1.url)">
|
|
<view class="item">
|
|
<image :style="'width:'+item.style.width+'rpx;height:'+item.style.height+'rpx;'"
|
|
:src="item1.image" />
|
|
<view class="hm-font-28" :style="'color:'+item1.color+';'">{{item1.text}}</view>
|
|
</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品组 -->
|
|
<view class="diy-goods" v-if="item.type === 'goods' && item.data.length > 0">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<block v-if="item.style.display == 'list'">
|
|
<!-- 单列商品 -->
|
|
<block v-if="item.style.column == 1">
|
|
<view class="goods-list" :style="'background: ' + item.style.bgColor + ';'">
|
|
<view :class="index ? 'u-b-t column__1':'column__1'"
|
|
v-for="(dataItem, index) in item.data" :key="index"
|
|
@click="goTo('goods/detail?goods_id='+dataItem.goods_id)">
|
|
<image :src="dataItem.image" />
|
|
<view class="hm-fl">
|
|
<!-- 商品名称 -->
|
|
<view v-if="item.style.show.goodsName"
|
|
class="hm-line-1 hm-col-0 hm-font-b hm-font-28 hm-p-tb-10">
|
|
{{ dataItem.goods_name }}
|
|
</view>
|
|
<!-- 商品卖点 -->
|
|
<view v-if="item.style.show.sellingPoint" class="hm-font-26 hm-col-error hm-line-1">
|
|
{{ dataItem.selling_point }}
|
|
</view>
|
|
<view class="hm-p-t-10">
|
|
<!-- 商品销量 -->
|
|
<view v-if="item.style.show.goodsSales" class="hm-font-24 hm-p-b-10 hm-col-tips">
|
|
已售{{ dataItem.goods_sales }}件
|
|
</view>
|
|
<!-- 商品价格 -->
|
|
<view>
|
|
<text v-if="item.style.show.goodsPrice" class="hm-col-error hm-font-b">
|
|
¥{{ dataItem.goods_price }}
|
|
</text>
|
|
<text class="hm-font-zhx hm-col-tips"
|
|
v-if="item.style.show.linePrice && dataItem.line_price > 0">
|
|
¥{{ dataItem.line_price }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 2列商品 -->
|
|
<block v-if="item.style.column == 2">
|
|
<view class="goods-list" :style="'background: ' + item.style.bgColor + ';'">
|
|
<view :class="index > 1 ? 'u-b-t column__2':'column__2'"
|
|
v-for="(dataItem, index) in item.data" :key="index"
|
|
@click="goTo('goods/detail?goods_id='+dataItem.goods_id)">
|
|
<view class="hm-text-center">
|
|
<image :src="dataItem.image" />
|
|
</view>
|
|
<view class="hm-p-l-10">
|
|
<!-- 商品名称 -->
|
|
<view v-if="item.style.show.goodsName"
|
|
class="hm-line-1 hm-col-0 hm-font-b hm-font-26 hm-p-tb-5">
|
|
{{ dataItem.goods_name }}
|
|
</view>
|
|
<!-- 商品价格 -->
|
|
<view class="hm-font-24">
|
|
<text v-if="item.style.show.goodsPrice" class="hm-col-error hm-font-b">
|
|
¥{{ dataItem.goods_price }}
|
|
</text>
|
|
<text class="hm-font-zhx hm-col-tips hm-m-l-20"
|
|
v-if="item.style.show.linePrice && dataItem.line_price > 0">
|
|
¥{{ dataItem.line_price }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 3列商品 -->
|
|
<block v-if="item.style.column == 3">
|
|
<view class="goods-list" :style="'background: ' + item.style.bgColor + ';'">
|
|
<view :class="index > 2 ? 'hm-border-t column__3':'column__3'"
|
|
v-for="(dataItem, index) in item.data" :key="index"
|
|
@click="goTo('goods/detail?goods_id='+dataItem.goods_id)">
|
|
<view class="hm-text-center">
|
|
<image :src="dataItem.image" />
|
|
</view>
|
|
<view class="hm-p-l-10">
|
|
<!-- 商品名称 -->
|
|
<view v-if="item.style.show.goodsName"
|
|
class="hm-line-1 hm-col-0 hm-font-b hm-font-26 hm-p-tb-5">
|
|
{{ dataItem.goods_name }}
|
|
</view>
|
|
<!-- 商品价格 -->
|
|
<view class="hm-font-24">
|
|
<text v-if="item.style.show.goodsPrice" class="hm-col-error hm-font-b">
|
|
¥{{ dataItem.goods_price }}
|
|
</text>
|
|
<text class="hm-font-zhx hm-col-tips hm-m-l-20"
|
|
v-if="item.style.show.linePrice && dataItem.line_price > 0">
|
|
¥{{ dataItem.line_price }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
<block v-else>
|
|
<!-- 横向滑动 -->
|
|
<view class="index_sale hm-br-8" :style="'background: ' + item.style.bgColor + ';'">
|
|
<scroll-view scroll-x="true">
|
|
<navigator v-for="(dataItem, index) in item.data" :key="index" hover-class="none"
|
|
style="display: inline-block;"
|
|
:url="'/pages/goods/detail?goods_id=' + dataItem.goods_id">
|
|
<view class="sale_img">
|
|
<image mode="aspectFill" :src="dataItem.image"></image>
|
|
</view>
|
|
<view class="content hm-line-1">{{dataItem.goods_name}}</view>
|
|
<view class="content hm-col-error">￥{{dataItem.goods_price}}</view>
|
|
</navigator>
|
|
</scroll-view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- 在线客服 -->
|
|
<block v-if="item.type === 'service'">
|
|
<view class="diy-service"
|
|
:style="'right: ' + item.style.right + 'rpx; bottom: ' + item.style.bottom + 'rpx;opacity:' + (item.style.opacity/100) + ';'">
|
|
<!-- 拨打电话 -->
|
|
<block v-if="item.params.type == 'phone'">
|
|
<button class="hm-btn-normal" @click="phone(item.params.phone_num)">
|
|
<view class="service-icon">
|
|
<image :src="item.params.image"></image>
|
|
</view>
|
|
</button>
|
|
</block>
|
|
<!-- 在线聊天 -->
|
|
<block v-else-if="item.params.type == 'chat'">
|
|
<button open-type="contact" class="hm-btn-normal">
|
|
<view class="service-icon">
|
|
<image :src="item.params.image"></image>
|
|
</view>
|
|
</button>
|
|
</block>
|
|
</view>
|
|
</block>
|
|
<!-- 关注公众号 -->
|
|
<view class="diy-official-account" v-if="item.type === 'officialAccount'">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<official-account></official-account>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<!-- 富文本 -->
|
|
<view class="diy-richText" v-if="item.type === 'richText'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view class="hm-bg-f hm-p-20">
|
|
<view
|
|
:style="'background: ' + item.style.bgColor + ';padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
|
|
<u-parse :content="item.params.content"></u-parse>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 辅助空白 -->
|
|
<view class="diy-blank" v-if="item.type === 'blank'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view :style="'height: ' + item.style.height + 'rpx; background: ' + item.style.bgColor + ';'">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 辅助线 -->
|
|
<view class="diy-guide" v-if="item.type === 'guide'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view
|
|
:style="'padding: ' + item.style.paddingTb + 'rpx 0rpx; background: ' + item.style.bgColor + ';'">
|
|
<view
|
|
:style="'border-top: ' + item.style.height + 'rpx ' + item.style.style + ' ' + item.style.color + ';'">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 栏目标题 -->
|
|
<view class="diy-column-title" v-if="item.type === 'columnTitle'">
|
|
<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
|
|
<view
|
|
:style="'font-size:' + item.style.fontSize + 'rpx;background: ' + item.style.bgColor + ';padding: '+ item.style.paddingTb + 'rpx 0rpx'">
|
|
<view :class="item.params.showLine == 'true'?'title line':'title'"
|
|
:style="'font-weight:'+item.style.bold+';color:' + item.style.color + ';border-left-color:' + item.style.lineColor + ';'">
|
|
{{item.params.title}}
|
|
</view>
|
|
<view class="sub" v-if="item.params.right=='true'"
|
|
@click="item.params.url==''?'':goTo(item.params.url)">
|
|
<text :style="'color:' + item.style.subColor + ';'">
|
|
{{item.params.subTitle}}
|
|
</text>
|
|
<view class="arrow" v-if="item.params.arrow=='true'">
|
|
<u-icon name="arrow-right" :color="item.style.subColor" :size="item.style.fontSize/2">
|
|
</u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 技术支持 -->
|
|
<view class="hm">
|
|
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const App = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
user: {},
|
|
applet: {
|
|
app_name: '',
|
|
signature: ''
|
|
},
|
|
items: {}, // 页面元素
|
|
};
|
|
},
|
|
components: {},
|
|
props: {},
|
|
async onLoad(options) {
|
|
let _this = this,
|
|
scene = decodeURIComponent(options.scene),
|
|
q = decodeURIComponent(options.q);
|
|
//等待onLaunch执行完毕
|
|
//#ifndef H5
|
|
await _this.$onLaunched;
|
|
//#endif
|
|
_this.user = App.getUser();
|
|
_this.applet = App.getApplet();
|
|
//#ifdef H5 || MP-ALIPAY
|
|
App.setTitle();
|
|
//#endif
|
|
_this.getIndexData(); // 获取首页数据
|
|
//普通二维码进入
|
|
if (q != 'undefined' && q != '') {
|
|
App.getQrcode(q);
|
|
}
|
|
//小程序码进入
|
|
if (scene != undefined && scene != '') {
|
|
App.getQrcode(scene,false);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {},
|
|
onShareAppMessage: function() {
|
|
let _this = this;
|
|
return {
|
|
title: _this.applet.navbar.params.share_title,
|
|
imageUrl: _this.applet.navbar.params.share_image,
|
|
path: "/pages/index/index?recommender=" + App.getUserId()
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取首页数据
|
|
*/
|
|
getIndexData: function() {
|
|
let _this = this;
|
|
App._get('index/page', {}, function(result) {
|
|
_this.setData(result.data);
|
|
});
|
|
},
|
|
/**
|
|
* 客服组件 - 拨打电话
|
|
*/
|
|
phone: function(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
});
|
|
},
|
|
/**
|
|
* 点击幻灯片
|
|
*/
|
|
banner: function(index) {
|
|
let _this = this;
|
|
for (var vo of _this.items) {
|
|
if (vo.type == 'banner') {
|
|
App.goTo(vo.data[index].url);
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 点击公告
|
|
*/
|
|
notice: function(index) {
|
|
let _this = this;
|
|
for (var vo of _this.items) {
|
|
if (vo.type == 'notice') {
|
|
App.goTo(vo.data.url[index]);
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 点单
|
|
*/
|
|
food: function(food_mode) {
|
|
let _this = this;
|
|
uni.setStorageSync("food_mode", food_mode);
|
|
App.goTo('shop/index');
|
|
},
|
|
/**
|
|
* 页面跳转
|
|
*/
|
|
goTo: function(url) {
|
|
App.goTo(url);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
@import "./diy.css";
|
|
</style>
|