萤火小程序商城给前端和商品组件增加“购买”按钮的方法

萤火小程序商城的商品组件没有“去购买”按钮，前端页面看起来左端重右端轻，整体不太协调。但是萤火小程序商城是一款开源的小程序源码，可以自己修改代码添加去购买按钮，具体方法如下：

小程序前端添加“去购买”按钮

1、修改小程序前端页面样式文件

小程序前端页面样式文件，路径为components/diy/goods/goods.wxss，打开页面样式文件，在末尾添加“去购买”按钮样式代码。

/* 去购买按钮 */

.goods-item .btn-settlement {
position: absolute;
right: 0;
bottom: 0;
padding: 0 28rpx;
border-radius: 40rpx;
background: linear-gradient(to right, rgb(235, 53, 107) 0%, rgb(240, 60, 60) 100%);
box-shadow: 0 4rpx 20rpx -4rpx rgb(235, 53, 107);
font-size: 28rpx;
line-height: 54rpx;
text-align: center;
color: #fff;
}

2、修改小程序前端页面文件

小程序前端页面文件，路径为components/diy/goods/goods.wxml，打开页面文件，在第35行添加下面的代码。

<view class="btn-settlement">去购买</view>

小程序后台的商品组件添加“去购买”按钮

1、修改商品组件文件

后端商品组件编辑文件路径为/source/application/store/view/wxapp/page/edit.php，在第410行加入下面的代码：

<div class="btn-settlement">去购买</div>

2、修改商品组件样式文件

商品组件样式文件路径为/assets/store/css/diy.css，为了保证代码的规范，在第447行加入下面的代码：

.work-diy .diy-phone .phone-main .diy-goods .goods-item .btn-settlement {
position: absolute;
right: 0;
bottom: 0;
padding: 0 14px;
border-radius: 20px;
background: linear-gradient(to right, #eb356b 0%, #f03c3c 100%);
box-shadow: 0 2px 10px -2px #eb356b;
font-size: 12px;
line-height: 27px;
text-align: center;
color: #fff;