项目介绍
小程序主要有首页、产品、案例、资讯、个人中心等模块。 管理端主要有案例管理、商品管理、订单管理等模块。
相关技术： html+css+js+vue：微信小程序界面。 UniApp框架+PHP程序语言：小程序及后台管理系统API的实现。 图鸟UI前端框架：web后台管理界面样式及数据渲染框架。 SqlServer数据库：数据支持。
小程序效果图
后台管理效果图
代码块
index总页面
` <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower"> <Home ref="home" @change="switchTabbar">
<!-- 产品 -->
<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
<Comm ref="comm"></Comm>
</scroll-view>
</view>
<!-- 案例 -->
<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
<Discovery ref="discovery"></Discovery>
</scroll-view>
</view>
<!-- 资讯 -->
<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
<News ref="news"></News>
</scroll-view>
</view>
<!-- 我的 -->
<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
<Mine ref="mine"></Mine>
</scroll-view>
</view>
<!-- 底部导航 -->
<tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
activeIconColor="#3668FC" :animation="true" :safeAreaInsetBottom="true" @change="switchTabbar"></tn-tabbar>
</view>
首页 组件页面代码
<!-- 通知-->
<view class="tn-bg-white tn-margin-top" style="border-radius: 20rpx;">
<tn-notice-bar :list="list" mode="vertical" leftIconName="notice"></tn-notice-bar>
</view>
<!-- 金刚区 start-->
<view class="tn-flex tn-padding-top tn-margin-bottom tn-margin-top-xs">
<view class="tn-flex-1 tn-radius" v-for="(itemMenus,indexMenus) in menusList" @click="tn(itemMenus.path)"
style="width: 20%;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view
class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
<!-- <view class="tn-icon-identity-fill tn-three"></view> -->
<image :src="itemMenus.image" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
</view>
<view class="tn-color-gray--dark tn-text-center tn-text-df">
<text class="tn-text-ellipsis">{{itemMenus.name}}</text>
</view>
</view>
</view>
</view>
<!-- 标题-->
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top" @click="switchTab(1)">
<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
推荐产品
</view>
<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
<text class="tn-padding-xs">更多</text>
<text class="tn-icon-right"></text>
</view>
</view>
<view
class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
<block v-for="(item, index) in goodsList" :key="index">
<view
class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-shadow-blur tn-col-6"
@click="tn(item.url)">
<view class="product__item home-shadow" @click="tn('/commPages/product?id='+item.id)">
<view class="item__image">
<tn-lazy-load :threshold="6000" height="100%" :image="item.image" :index="item.id"
imgMode="widthFix" style="border-radius: 10rpx 10rpx; 0 0"></tn-lazy-load>
</view>
<view class="item__data tn-margin-left-sm tn-margin-right-sm">
<view class="item__title-container">
<text class="item__title tn-color-cat clamp-text-2">{{ item.name }}</text>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xs">
<view class="justify-content-item tn-color-red">
<text class="tn-text-sm">￥</text>
<text class="tn-text-xl">{{ item.price }}</text>
</view>
<view class="justify-content-item tn-color-gray tn-text-center"
style="padding-top: 5rpx;">
<text class="tn-icon-like tn-padding-right-xs tn-text-lg"></text>
<text class="tn-text-df">{{ item.likes }}</text>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 标题-->
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top" @click="switchTab(2)">
<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
热门案例
</view>
<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
<text class="tn-padding-xs">更多</text>
<text class="tn-icon-right"></text>
</view>
</view>
<!-- 热图推荐-->
<view class="tn-flex tn-margin-left tn-margin-right tn-margin-top tn-margin-bottom-xl">
<view class="tn-flex-2" @click="tn('/discoveryPages/case?id='+caseList[0].id)">
<view class="image-pic tn-margin-right tn-shadow-blur"
:style="'background-image:url('+caseList[0].image+')'">
<view class="image-tuniao1">
</view>
</view>
</view>
<view class="tn-flex-1" v-if="caseList.length>2">
<view class="image-pic tn-shadow-blur" @click="tn('/discoveryPages/case?id='+caseList[1].id)"
:style="'background-image:url('+caseList[0].image+')'">
<view class="image-tuniao2">
</view>
</view>
<view class="image-pic tn-margin-top tn-shadow-blur"
@click="tn('/discoveryPages/case?id='+caseList[2].id)"
:style="'background-image:url('+caseList[0].image+')'">
<view class="image-tuniao2">
</view>
</view>
</view>
</view>
<!-- 标题-->
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top" @click="switchTab(3)">
<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
企业资讯
</view>
<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
<text class="tn-padding-xs">更多</text>
<text class="tn-icon-right"></text>
</view>
</view>
<block v-for="(item, index) in news" :key="index">
<view class="article-shadow tn-margin tn-bg-white" @click="tn('/newsPages/article?id='+item.id)">
<view class="tn-flex">
<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
<view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
<text class="">{{ item.title }}</text>
</view>
<view class="tn-padding-top-xs" style="min-height: 90rpx;">
<text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
{{ item.subtitle }}
</text>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
<view>
</view>
<view class="justify-content-item tn-color-gray tn-text-center" style="padding-top: 5rpx;">
<text class="tn-icon-eye tn-padding-right-xs tn-text-lg"></text>
<text class="tn-padding-right tn-text-df">{{ item.view }}</text>
<text class="tn-icon-like-lack tn-padding-right-xs tn-text-lg"></text>
<text class="tn-text-df">{{ item.likes }}</text>
</view>
</view>
</view>
<view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.image + ')'">
<view class="image-article">
</view>
</view>
</view>
</view>
</block>
<!-- 标题-->
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top" @click="tn('')">
<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
企业地址
</view>
<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
</view>
</view>
<view class="tn-shadow-blur tn-margin">
<map class="map tn-shadow-blur" :latitude="company.lat" :longitude="company.lng" :markers="covers"
@click="openLocation" :enable-scroll="false" :enable-zoom="false">
</map>
<view class="shop-shadow tn-margin tn-color-black tn-bg-white map-footerabsalute" @click="openLocation">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs tn-padding-bottom-xs">
<view class="justify-content-item">
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view class="tn-padding tn-color-black">
<view class="tn-padding-right-sm tn-text-lg tn-text-bold">
{{company.name}}
</view>
<view
class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-text-xs tn-color-gray">
<text class="">{{company.address}}</text>
</view>
</view>
</view>
</view>
<view class="tn-flex justify-content-item tn-flex-row-center tn-padding-right-xs">
<view class="tn-bg-gray--light tn-padding-xs tn-margin-sm tn-color-black tn-round">
<text class="tn-icon-location-fill" style="font-size: 60rpx;"></text>
</view>
</view>
</view>
</view>
</view>
<!-- 标题-->
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top" @click="tn('')">
<view class="justify-content-item tn-margin tn-text-bold tn-text-xl blue-title">
合作客户
</view>
<view class="justify-content-item tn-margin-right tn-text-df tn-color-gray">
</view>
</view>
<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-margin-left tn-margin-right">
<block v-for="(item, index) in cooperationList" :key="index">
<view
class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tn-shadow-blur tn-col-3 tn-margin-top-sm"
@click="tn()">
<view class="partner__item home-shadow">
<view class="item__image">
<tn-lazy-load :threshold="6000" height="144" :image="item.image" :index="item.id"
imgMode="aspectFill" style="border-radius: 10rpx;"></tn-lazy-load>
</view>
</view>
</view>
</block>
</view>
<view class='tn-tabbar-height'></view>`
</view>
产品 组件页面代码
<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" :bold="true"
:fontSize="36">
<view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height - 10 + 'px'}">
<view class="tn-padding-right-sm tn-padding-left-sm tn-padding-top-xl tn-padding-bottom-xl">
<!-- 瀑布流 -->
<tn-waterfall ref="waterfall" v-model="list">
<template v-slot:left="{ leftList }">
<view v-for="(item, index) in leftList" :key="item.id" class="product__item home-shadow"
@click="tn('/commPages/product?id='+item.id)">
<view class="item__image">
<tn-lazy-load :threshold="6000" height="100%" :image="item.image" :index="item.id"
imgMode="widthFix"></tn-lazy-load>
</view>
<view class="item__data tn-margin-left-sm tn-margin-right-sm">
<view class="item__title-container">
<text class="item__title tn-color-cat clamp-text-2">{{ item.name }}</text>
</view>
<view v-if="item.tags && item.tags.length > 0" class="item__tags-container">
<view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="item__tag">
{{ tagItem }}
</view>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xs">
<view class="justify-content-item tn-color-red">
<text class="tn-text-sm">￥</text>
<text class="tn-text-xl">{{ item.price }}</text>
</view>
<view class="justify-content-item tn-color-gray tn-text-center"
style="padding-top: 5rpx;">
<text class="tn-icon-like tn-padding-right-xs tn-text-lg"></text>
<text class="tn-text-df">{{ item.likes }}</text>
</view>
</view>
</view>
</view>
</template>
<template v-slot:right="{ rightList }">
<view v-for="(item, index) in rightList" :key="item.id" class="product__item home-shadow"
@click="tn('/commPages/product?id='+item.id)">
<view class="item__image">
<tn-lazy-load :threshold="6000" height="100%" :image="item.image" :index="item.id"
imgMode="widthFix"></tn-lazy-load>
</view>
<view class="item__data tn-margin-left-sm tn-margin-right-sm">
<view class="item__title-container">
<text class="item__title tn-color-cat clamp-text-2">{{ item.name }}</text>
</view>
<view class="item__tags-container">
<view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="item__tag">
{{ tagItem }}
</view>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xs">
<view class="justify-content-item tn-color-red">
<text class="tn-text-sm">￥</text>
<text class="tn-text-xl">{{ item.price }}</text>
</view>
<view class="justify-content-item tn-color-gray tn-text-center"
style="padding-top: 5rpx;">
<text class="tn-icon-like tn-padding-right-xs tn-text-lg"></text>
<text class="tn-text-df">{{ item.likes }}</text>
</view>
</view>
</view>
</view>
</template>
</tn-waterfall>
</view>
<view class="tn-padding-top-lg tn-flex tn-flex-col-center tn-flex-row-center">
<tn-load-more :status="loadStatus" v-if="listStatus === 0"></tn-load-more>
<tn-empty mode="network" v-if="listStatus === 2"></tn-empty>
<tn-empty mode="data" v-if="listStatus === 1"></tn-empty>
</view>
</view>
<view class='tn-tabbar-height'></view>
</view>`
我的 组件页面代码
` <view class="logo-pic tn-shadow" @click="tn('/minePages/set')"> {{userInfo.nickname}}
</view>
</view>
</view>
</view>
<view class="justify-content-item" @click="tn('/minePages/set')">
<view class="tn-icon-install tn-color-gray" style="font-size: 50rpx;opacity: 0.5;">
</view>
</view>
</view>
<!-- 更多信息-->
<!-- 方式12 start-->
<view class="wallpaper-shadow tn-margin-top-lg tn-padding-bottom-sm tn-bg-white"
style="position: relative;z-index: 99;">
<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/order')">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view
class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light">
<view class="tn-icon-order tn-color-wallpaper"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">全部订单</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="navAddress">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view
class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light">
<view class="tn-icon-map tn-color-wallpaper"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">收货地址</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/like')">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view
class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light">
<view class="tn-icon-like-lack tn-color-wallpaper"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">我的点赞</text>
</view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/message')">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"
style="position: relative;">
<view
class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light">
<view class="tn-icon-message tn-color-wallpaper"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">我的消息</text>
</view>
<view v-if="messageNum>0"
style="height: 60rpx;width: 60rpx;border-radius: 50%;background-color: #ff0000;color: #ffffff;display: flex;justify-content: center;align-items: center;position: absolute;top: -40rpx;right: 0rpx;">
{{messageNum}}
</view>
</view>
</view>
</view>
</view>
<!-- 更多信息-->
<view class="wallpaper-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copySource">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
style="color: #7C8191;">
<view class="tn-icon-plane-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">项目地址</view>
<view class="tn-color-gray tn-icon-right"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"
@click="tn('/minePages/public')">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
style="color: #7C8191;">
<view class="tn-icon-bookmark-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">关注我们</view>
<view class="tn-color-gray tn-icon-right"></view>
</view>
</tn-list-cell>
</view>
<view class="wallpaper-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
style="color: #7C8191;">
<view class="tn-icon-service-fill"></view>
</view>
<view class="tn-flex tn-flex-row-between" style="width: 100%;">
<view class="tn-margin-left-sm">在线客服</view>
<view class="tn-color-gray tn-icon-right"></view>
</view>
</button>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="tn('/minePages/help')">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
style="color: #7C8191;">
<view class="tn-icon-help-fill"></view>
</view>
<view class="tn-flex tn-flex-row-between" style="width: 100%;">
<view class="tn-margin-left-sm">常见问题</view>
<view class="tn-color-gray tn-icon-right"></view>
</view>
</button>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style"
@click="tn('/minePages/feedBack')">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
style="color: #7C8191;">
<view class="tn-icon-tip-fill"></view>
</view>
<view class="tn-flex tn-flex-row-between" style="width: 100%;">
<view class="tn-margin-left-sm">问题反馈</view>
<view class="tn-color-gray tn-icon-right"></view>
</view>
</button>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"
@click="tn('/minePages/setApp')" data-number="18266666666">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
style="color: #7C8191;">
<view class="tn-icon-set-fill"></view>
</view>
<view class="tn-flex tn-flex-row-between" style="width: 100%;">
<view class="tn-margin-left-sm">设置</view>
<view class="tn-color-gray tn-icon-right"></view>
</view>
</view>
</tn-list-cell>
</view>
</view>
<view class="tn-text-center tn-margin-top-xl tn-padding-bottom-xl">
<view @click="navTuniaoUI">
<text class="tn-color-blue tn-padding-xs">{{appInfo.app_name}}</text>
<text class="">{{appInfo.app_version}}</text>
</view>
</view>
<view class='tn-tabbar-height'></view>
</view>
扫码体验H5
前端gitee地址：gitee.com/weifd/offic…
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
