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

gitee开源商城diygw-mall

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














文章标签：
数据可视化
开发工具
小程序
diygwcom
目录
相关文章
石臻臻的杂货铺
|
2天前
|
编解码 Java 程序员
写代码还有专业的编程显示器？
写代码已经十个年头了, 一直都是习惯直接用一台Mac电脑写代码 偶尔接一个显示器, 但是可能因为公司配的显示器不怎么样, 还要接转接头 搞得桌面杂乱无章，分辨率也低，感觉屏幕还是Mac自带的看着舒服
石臻臻的杂货铺
3679 2
绿水长流*z
|
4天前
|
存储 缓存 关系型数据库
MySQL事务日志-Redo Log工作原理分析
事务的隔离性和原子性分别通过锁和事务日志实现，而持久性则依赖于事务日志中的`Redo Log`。在MySQL中，`Redo Log`确保已提交事务的数据能持久保存，即使系统崩溃也能通过重做日志恢复数据。其工作原理是记录数据在内存中的更改，待事务提交时写入磁盘。此外，`Redo Log`采用简单的物理日志格式和高效的顺序IO，确保快速提交。通过不同的落盘策略，可在性能和安全性之间做出权衡。
绿水长流*z
1540 5
弹性计算-百晓生
|
1月前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日，「2024 Altair 技术大会杭州站」成功召开，阿里云弹性计算产品运营与生态负责人何川，与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
弹性计算-百晓生
82310 25
阿里云携手Altair共拓云上工业仿真新机遇
乘风直上
|
7天前
|
人工智能 Rust Java
10月更文挑战赛火热启动，坚持热爱坚持创作！
开发者社区10月更文挑战，寻找热爱技术内容创作的你，欢迎来创作！
乘风直上
581 22
绿水长流*z
|
4天前
|
存储 SQL 关系型数据库
彻底搞懂InnoDB的MVCC多版本并发控制
本文详细介绍了InnoDB存储引擎中的两种并发控制方法：MVCC（多版本并发控制）和LBCC（基于锁的并发控制）。MVCC通过记录版本信息和使用快照读取机制，实现了高并发下的读写操作，而LBCC则通过加锁机制控制并发访问。文章深入探讨了MVCC的工作原理，包括插入、删除、修改流程及查询过程中的快照读取机制。通过多个案例演示了不同隔离级别下MVCC的具体表现，并解释了事务ID的分配和管理方式。最后，对比了四种隔离级别的性能特点，帮助读者理解如何根据具体需求选择合适的隔离级别以优化数据库性能。
绿水长流*z
201 3
大模型服务小助手
|
10天前
|
JSON 自然语言处理 数据管理
阿里云百炼产品月刊【2024年9月】
阿里云百炼产品月刊【2024年9月】，涵盖本月产品和功能发布、活动，应用实践等内容，帮助您快速了解阿里云百炼产品的最新动态。
大模型服务小助手
358 6
阿里云百炼产品月刊【2024年9月】
爱吃龙利鱼
|
11天前
|
Linux 虚拟化 开发者
一键将CentOs的yum源更换为国内阿里yum源
一键将CentOs的yum源更换为国内阿里yum源
爱吃龙利鱼
580 5
Ganos全空间数据库
|
23天前
|
存储 关系型数据库 分布式数据库
GraphRAG：基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统，结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性，并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件，实现图数据和向量数据的统一存储与检索，提升了RAG系统的性能和效果。
Ganos全空间数据库
1598 119
椰椰椰耶
|
7天前
|
XML 安全 Java
【Maven】依赖管理，Maven仓库，Maven核心功能
【Maven】依赖管理，Maven仓库，Maven核心功能
椰椰椰耶
233 3
瓴羊Dataphin
|
9天前
|
存储 人工智能 搜索推荐
数据治理，是时候打破刻板印象了
瓴羊智能数据建设与治理产品Datapin全面升级，可演进扩展的数据架构体系为企业数据治理预留发展空间，推出敏捷版用以解决企业数据量不大但需构建数据的场景问题，基于大模型打造的DataAgent更是为企业用好数据资产提供了便利。
瓴羊Dataphin
327 2