AI 助理
文档备案控制台
开发者社区 大数据 文章 正文

gitee开源商城diygw-mall

2024-10-18 126
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： gitee开源商城diygw-mall

DIYGW可视化开源商城系统。所的界面布局显示都通过低代码可视化开发工具生成源码实现。支持集成微信小程序支付。 DIYGW可视化开源商城系统是一款基于thinkphp8 framework、 element plus admin、uniapp开发而成的前后端分离系统。

⚡ 可视化截图

首页可视化生成源码

 

<template>
  <view class="container container329916">
    <view class="flex flex-wrap diygw-col-24 justify-center items-center flex15-clz" @tap="navigateTo" data-type="page" data-url="/pages/goods">
      <text class="flex icon diygw-col-0 diy-icon-search"></text>
      <text class="diygw-col-0"> 搜索 </text>
    </view>
    <view class="flex diygw-col-24 swiper-clz">
      <swiper :current="swiperIndex" class="swiper" @change="changeSwiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" autoplay interval="3000" circular="true" style="height: 276rpx">
        <swiper-item v-for="(item, index) in swipers.rows" :key="index" class="diygw-swiper-item">
          <view class="diygw-swiper-item-wrap">
            <image :src="item.img" class="diygw-swiper-image"></image>
            <view class="diygw-swiper-item-title swiper-title">
              {{ item.title }}
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="flex diygw-col-24 noticebar-clz">
      <diy-noticebar class="flex1 diy-notice-bar" :remote="true" :list="notices.rows" color="#fb4833" bgColor="#ffe8e8" leftIcon="diy-icon-notification">
        <block v-slot:content>
          <text class="diy-notice-item" v-for="(item, index) in notices.rows" :key="index">
            {{ item.title }}
          </text>
        </block>
      </diy-noticebar>
    </view>
    <view v-if="goods.total > 0" class="flex diygw-col-24 items-stretch flex-wrap flex-clz">
      <view v-for="(item, index) in goods.rows" :key="index" class="flex flex-wrap diygw-col-12 flex-direction-column items-stretch flex6-clz" @tap="navigateTo" data-type="page" data-url="/pages/goods/detail" :data-id="item.id">
        <view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
          <image :src="item.img" class="image-size diygw-image diygw-col-24" mode="aspectFit"></image>
        </view>
        <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-between flex20-clz">
          <text class="diygw-col-0 text11-clz">
            {{ item.title }}
          </text>
          <text class="diygw-text-line2 diygw-col-0">
            {{ item.remark }}
          </text>
          <view class="flex flex-wrap diygw-col-0 items-center">
            <text class="diygw-col-0 text7-clz"> ￥{{ item.price }} </text>
            <text class="diygw-text-line2 diygw-col-0 text8-clz"> ￥{{ item.linePrice }} </text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="globalData.isshow && goods.code == 200 && goods.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex1-clz">
      <image src="/static/zwjl.png" class="image1-size diygw-image diygw-col-0" mode="widthFix"></image>
      <text class="diygw-col-0 text-clz"> 未找到任何数据 </text>
    </view>
    <view class="flex flex-wrap diygw-col-24 items-end diygw-bottom flex2-clz">
      <view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex8-clz">
        <view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
          <image src="/static/sy3on.png" class="image2-size diygw-image diygw-col-0" mode="widthFix"></image>
        </view>
        <text class="diygw-text-line1 diygw-col-0"> 首页 </text>
      </view>
      <view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex11-clz" @tap="navigateTo" data-type="page" data-url="/pages/goods" data-redirect="1">
        <view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
          <image src="/static/fl.png" class="image8-size diygw-image diygw-col-0" mode="widthFix"></image>
        </view>
        <text class="diygw-text-line1 diygw-col-0"> 分类 </text>
      </view>
      <view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex9-clz" @tap="navigateTo" data-type="page" data-url="/pages/cart" data-redirect="1">
        <view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
          <text v-if="userInfo.carts && userInfo.carts.length > 0" class="diygw-text-line1 diygw-col-0 animate__animated animate__heartBeat animate__infinite text2-clz"> </text>
          <image src="/static/gwc.png" class="image5-size diygw-image diygw-col-0" mode="widthFix"></image>
        </view>
        <text class="diygw-text-line1 diygw-col-0"> 购物车 </text>
      </view>
      <view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex4-clz" @tap="navigateTo" data-type="page" data-url="/pages/articles" data-redirect="1">
        <view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
          <image src="/static/cp1.png" class="image3-size diygw-image diygw-col-0" mode="widthFix"></image>
        </view>
        <text class="diygw-text-line1 diygw-col-0"> 文章 </text>
      </view>
      <view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex12-clz" @tap="navigateTo" data-type="page" data-url="/pages/user" data-redirect="1">
        <view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
          <image src="/static/wd.png" class="image4-size diygw-image diygw-col-0" mode="widthFix"></image>
        </view>
        <text class="diygw-text-line1 diygw-col-0"> 我的 </text>
      </view>
    </view>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: { isshow: false },
        swipersNum: 1,
        swipers: {
          rows: [
            {
              id: 0,
              title: '',
              remark: '',
              img: '',
              path: null,
              userId: 0,
              createTime: '',
              updateTime: '',
              deleteTime: null
            }
          ],
          total: 0,
          code: 0,
          msg: ''
        },
        noticesNum: 1,
        notices: {
          rows: [
            {
              id: 0,
              title: '',
              remark: '',
              userId: 0,
              createTime: '',
              updateTime: '',
              deleteTime: null
            }
          ],
          total: 0,
          code: 0,
          msg: ''
        },
        goodsNum: 1,
        goods: {
          rows: [
            {
              id: 0,
              title: '',
              remark: '',
              img: '',
              imgs: '',
              status: '',
              content: '',
              price: '',
              amount: 0,
              sellamonut: null,
              skus: '',
              sortnum: null,
              cateId: 0,
              userId: 0,
              createTime: '',
              updateTime: '',
              deleteTime: null,
              linePrice: '',
              skuType: ''
            }
          ],
          total: 0,
          code: 0,
          msg: ''
        },
        swiperIndex: 0
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    methods: {
      async init() {
        await this.swipersApi();
        await this.noticesApi();
        await this.goodsApi();
      },
      // 轮播数据 API请求方法
      async swipersApi(param) {
        let thiz = this;
        param = param || {};
 
        //请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
        let http_url = '/cms/api.swiper/list';
        let http_data = {
          pageNum: this.swipersNum,
          pageSize: 10,
          pageSize: param.pageSize || '5'
        };
        let http_header = {};
 
        let swipers = await this.$http.post(http_url, http_data, http_header, 'json');
 
        this.swipers = swipers;
        this.globalData.isshow = true;
      },
      // 公告数据 API请求方法
      async noticesApi(param) {
        let thiz = this;
        param = param || {};
 
        //请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
        let http_url = '/cms/api.notice/list';
        let http_data = {
          pageNum: this.noticesNum,
          pageSize: 10,
          pageSize: param.pageSize || '5'
        };
        let http_header = {};
 
        let notices = await this.$http.post(http_url, http_data, http_header, 'json');
 
        this.notices = notices;
      },
      // 商品数据 API请求方法
      async goodsApi(param) {
        let thiz = this;
        param = param || {};
 
        //如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象
        if (param.refresh || typeof param != 'object') {
          this.goodsNum = 1;
        }
 
        //请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
        let http_url = '/shop/api.goods/list';
        let http_data = {
          pageNum: this.goodsNum,
          pageSize: 10
        };
        let http_header = {};
 
        let goods = await this.$http.post(http_url, http_data, http_header, 'json');
 
        let datarows = goods.rows;
        if (http_data.pageNum == 1) {
          this.goods = goods;
        } else if (datarows) {
          let rows = this.goods.rows.concat(datarows);
          goods.rows = rows;
          this.goods = goods;
        }
        if (datarows && datarows.length > 0) {
          this.goodsNum = this.goodsNum + 1;
        }
        this.globalData.isshow = true;
      },
      changeSwiper(evt) {
        let swiperIndex = evt.detail.current;
        this.setData({ swiperIndex });
      }
    },
    onPullDownRefresh() {
      // 商品数据 API请求方法
      this.goodsNum = 1;
      this.goodsApi();
 
      uni.stopPullDownRefresh();
    },
    onReachBottom() {
      // 商品数据 API请求方法
      this.goodsApi();
    }
  };
</script>
 
<style lang="scss" scoped>
  .flex15-clz {
    padding-top: 16rpx;
    border-bottom-left-radius: 120rpx;
    padding-left: 10rpx;
    padding-bottom: 16rpx;
    border-top-right-radius: 120rpx;
    margin-right: 20rpx;
    background-color: #ffffff;
    margin-left: 20rpx;
    box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);
    overflow: hidden;
    width: calc(100% - 20rpx - 20rpx) !important;
    border-top-left-radius: 120rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 120rpx;
    margin-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .icon {
    font-size: 36rpx;
  }
  .swiper-clz {
    margin-left: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    width: calc(100% - 20rpx - 20rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    margin-right: 20rpx;
  }
  .swiper-title {
    background-color: rgba(0, 0, 0, 0.281);
    color: #e6e6e6;
  }
  .noticebar-clz {
    margin-left: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    width: calc(100% - 20rpx - 20rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    margin-right: 20rpx;
  }
  .flex-clz {
    padding-top: 10rpx;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .flex6-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #ffffff;
    margin-left: 10rpx;
    box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);
    overflow: hidden;
    width: calc(50% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    padding-right: 20rpx;
  }
  .image-size {
    height: 200rpx !important;
    width: 100%;
  }
  .flex20-clz {
    padding-top: 10rpx;
    flex: 1;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .text11-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .text7-clz {
    color: #f20000;
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .text8-clz {
    text-decoration: line-through;
  }
  .flex1-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .image1-size {
    height: 400rpx !important;
    width: 400rpx !important;
  }
  .text-clz {
    color: #969696;
    font-size: 28rpx !important;
  }
  .flex2-clz {
    border-top: 2rpx solid #e4e4e4;
    padding-top: 16rpx;
    border-bottom-left-radius: 0rpx;
    bottom: 0rpx;
    padding-left: 16rpx;
    padding-bottom: 16rpx;
    border-top-right-radius: 24rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 4rpx 12rpx rgba(31, 31, 31, 0.16);
    overflow: visible;
    left: 0rpx;
    border-top-left-radius: 24rpx;
    border-bottom-right-radius: 0rpx;
    padding-right: 16rpx;
  }
  .flex8-clz {
    color: #fa240b;
    flex: 1;
  }
  .image2-size {
    height: 48rpx !important;
    width: 48rpx !important;
  }
  .flex11-clz {
    flex: 1;
  }
  .image8-size {
    height: 48rpx !important;
    width: 48rpx !important;
  }
  .flex9-clz {
    flex: 1;
  }
  .text2-clz {
    border: 2rpx solid #eee;
    border-bottom-left-radius: 40rpx;
    -webkit-animation-duration: 5000ms;
    color: #ffffff;
    animation-delay: 1000ms;
    -webkit-animation-delay: 1000ms;
    border-top-right-radius: 40rpx;
    right: -8rpx;
    background-color: rgba(255, 17, 17, 0.91);
    animation-duration: 5000ms;
    flex-shrink: 0;
    overflow: hidden;
    top: -8rpx;
    width: 16rpx !important;
    border-top-left-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
    position: absolute;
    height: 16rpx !important;
  }
  .image5-size {
    height: 48rpx !important;
    width: 48rpx !important;
  }
  .flex4-clz {
    flex: 1;
  }
  .image3-size {
    height: 48rpx !important;
    width: 48rpx !important;
  }
  .flex12-clz {
    flex: 1;
  }
  .image4-size {
    height: 48rpx !important;
    width: 48rpx !important;
  }
  .container329916 {
    padding-bottom: 160rpx;
    background-color: #f5f5f5;
  }
</style>














文章标签：
数据可视化
开发工具
小程序
luckyzf332
目录
相关文章
长沙红胖子Qt
|
Java C++
Qt+QtWebApp开发笔记（二）：http服务器日志系统介绍、添加日志系统至Demo测试
上一篇使用QtWebApp的基于Qt的轻量级http服务器实现了一个静态网页返回的Demo，网页服务器很重要的就是日志，因为在服务器类上并没有直接返回，所以，本篇先把日志加上。
长沙红胖子Qt
519 0
厉昱辰
晶闸管的基础知识
1.一般地，具有PNPN四层三结结构的器件是晶闸管。严格来说，根据国际电工委员会（IEC）的标准定义，具有3个或者3个以上PN结，其伏安特性至少在一个象限内具有导通和阻断两个稳定状态，并可以在两个状态之间进行切换的电力半导体器件为晶闸管。又称为（可控硅）。晶闸管可以分为很多类型，比如内部存在反并联二极管的逆导型晶闸管（RC-Thyristor），电流可双向控制导通的双向晶闸管（TRI-AC），门极关断晶闸管（GTO）和门极换流晶闸管（GCT）等。在实际应用，一般将普通的具有双向阻断能力、只能控制正向导通的半控型晶闸管，直接称为晶闸管，或者SCR（硅控整流器），而其他类型晶闸管根据它们的功能和特
厉昱辰
894 0
晶闸管的基础知识
3it3iap2n2xxu
|
编解码
STM32:PWM驱动LED达到呼吸灯效果(内含：1.接线原理图/实物图+2.代码部分+3.注意事项/补充知识点部分)
STM32:PWM驱动LED达到呼吸灯效果(内含：1.接线原理图/实物图+2.代码部分+3.注意事项/补充知识点部分)
3it3iap2n2xxu
3135 0
STM32:PWM驱动LED达到呼吸灯效果(内含：1.接线原理图/实物图+2.代码部分+3.注意事项/补充知识点部分)
温柔的养猫人
|
边缘计算 编解码 监控
低时延需求的实现 | 带你读《5G 空口设计与实践进阶 》之五
NR 实现低时延需要一系列技术的有机结合，而不能仅仅针对某一局部的时延进行单独的优化。
温柔的养猫人
5586 0
低时延需求的实现 | 带你读《5G 空口设计与实践进阶 》之五
morixinguan
|
Android开发 异构计算
屏蔽开机的android_kernel_log信息----&gt;lk.bin
最近在开机加一些自己的测试程序，编译的是eng版本，希望安卓开机后能够看到自己的调试信息，可是一开机就会有很多其它的信息干扰我的调试，那么如何屏蔽掉kernel的kmsg打印的这些信息呢？ 很简单，我们找到以下这个文件： 在我的源码目录下:MT8127_M0_MP8_0407_BK\bootable\lk\app\mt_boot\mt_boot.
morixinguan
1303 0
LucianaiB
|
13天前
|
人工智能 JSON 机器人
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
本文带你零成本玩转OpenClaw：学生认证白嫖6个月阿里云服务器，手把手配置飞书机器人、接入免费/高性价比AI模型（NVIDIA/通义），并打造微信公众号“全自动分身”——实时抓热榜、AI选题拆解、一键发布草稿，5分钟完成热点→文章全流程！
LucianaiB
11467 124
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
$雪地伤孤$
|
2天前
|
人工智能 JSON 监控
Claude Code 源码泄露：一份价值亿元的 AI 工程公开课
我以为顶级 AI 产品的护城河是模型。读完这 51.2 万行泄露的源码，我发现自己错了。
$雪地伤孤$
3528 8
LucianaiB
|
1天前
|
人工智能 数据可视化 安全
王炸组合！阿里云 OpenClaw X 飞书 CLI，开启 Agent 基建狂潮！(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw，结合飞书CLI等工具，让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念：未来软件应为AI而生，CLI即AI的“手脚”，实现高效、安全、可控的智能自动化。
LucianaiB
1345 2
王炸组合！阿里云 OpenClaw X 飞书 CLI，开启 Agent 基建狂潮！(附带免费使用6个月服务器)
JavaPub
|
13天前
|
人工智能 IDE API
2026年国内 Codex 安装教程和使用教程：GPT-5.4 完整指南
Codex已进化为AI编程智能体，不仅能补全代码，更能理解项目、自动重构、执行任务。本文详解国内安装、GPT-5.4接入、cc-switch中转配置及实战开发流程，助你从零掌握“描述需求→AI实现”的新一代工程范式。（239字）
JavaPub
7500 139