xioayue
/
why_in_h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

嵌入商品列表

master
453530270@qq.com 2 years ago
parent
3526914a0d
commit
63dd384539
6 changed files with 61 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      config.js
  2. 2
      core/config/defaultConfig.js
  3. 32
      manifest.json
  4. 3
      pages/index/components/banner.vue
  5. 49
      pages/index/components/goods.vue
  6. 38
      pages/index/index.vue

2
config.js
View File

@ -1,7 +1,7 @@
module.exports = {
// 系统名称
name: "萤火商城2.0",
name: "文化数据专网",
// 必填: 后端api地址, 斜杠/结尾, 参照下面格式
// 例如: https://www.你的域名.com/index.php?s=/api/

2
core/config/defaultConfig.js
View File

@ -3,7 +3,7 @@
export default {
// 系统名称
name: "萤火商城2.0",
name: "文化数据专网",
/**
* 后端api地址 (必填; 斜杠/结尾; 请确保能访问)

32
manifest.json
View File

@ -1,7 +1,7 @@
{
"name" : "萤火商城2.0",
"appid" : "",
"description" : "萤火商城V2.0，是2021年全新推出的一款轻量级、高性能、前后端分离的电商系统",
"name" : "ymall",
"appid" : "__UNI__CBC4DD0",
"description" : "文化数据专网系统",
"versionName" : "2.0.3",
"versionCode" : 203,
"transformPx" : false,
@ -72,19 +72,19 @@
"mp-weixin" : {
"appid" : "",
"setting" : {
// 是否检查安全域名和 TLS 版本
"urlCheck" : true,
// es6转es5
"es6" : false,
// 上传代码时自动压缩
"minified" : true,
// 调试器 wxml面板展示 shadow-root
"showShadowRootInWxmlPanel" : true,
// 上传代码时是否自动压缩样式文件
"minifyWXSS" : true,
// 上传代码时是否自动压缩wxml文件
// 因uniappp构建出来的wxml本身就是压缩好的, 如果再用微信开发工具压缩一次的话, 有可能会破坏到文件, 所以此处设为false
"minifyWXML" : false
// 是否检查安全域名和 TLS 版本
"urlCheck" : true,
// es6转es5
"es6" : false,
// 上传代码时自动压缩
"minified" : true,
// 调试器 wxml面板展示 shadow-root
"showShadowRootInWxmlPanel" : true,
// 上传代码时是否自动压缩样式文件
"minifyWXSS" : true,
// 上传代码时是否自动压缩wxml文件
// 因uniappp构建出来的wxml本身就是压缩好的, 如果再用微信开发工具压缩一次的话, 有可能会破坏到文件, 所以此处设为false
"minifyWXML" : false
},
"usingComponents" : true,
"lazyCodeLoading" : "requiredComponents",

3
pages/index/components/banner.vue
View File

@ -33,7 +33,7 @@
watch:{
dataList:function(e){
console.log("datalist",e)
// console.log("datalist",e)
}
},
@ -72,7 +72,6 @@
* 计算图片高度
*/
_imagesHeight({ detail }) {
console.log(detail)
const app = this;
// 获取图片真实宽度
const { width, height } = detail;

49
pages/index/components/goods.vue
View File

@ -1,56 +1,24 @@
<template>
<!-- 商品组 -->
<view class="diy-goods" :style="{ background: itemStyle.background }">
<view class="goods-list" :class="[`display__${itemStyle.display}`, `column__${itemStyle.column}`]">
<scroll-view :scroll-x="itemStyle.display === 'slide'">
<view class="diy-goods">
<view class="goods-list display__list column__2">
<scroll-view>
<view class="goods-item" v-for="(dataItem, index) in dataList" :key="index" @click="onTargetGoods(dataItem.goods_id)">
<!-- 单列商品 -->
<block v-if="itemStyle.column === 1">
<view class="dis-flex">
<!-- 商品图片 -->
<view class="goods-item_left">
<image class="image" :src="dataItem.goods_image"></image>
</view>
<view class="goods-item_right">
<!-- 商品名称 -->
<view v-if="itemStyle.show.includes('goodsName')" class="goods-name">
<text class="twoline-hide">{{ dataItem.goods_name }}</text>
</view>
<view class="goods-item_desc">
<!-- 商品卖点 -->
<view v-if="itemStyle.show.includes('sellingPoint')" class="desc-selling_point dis-flex">
<text class="oneline-hide">{{ dataItem.selling_point }}</text>
</view>
<!-- 商品销量 -->
<view v-if="itemStyle.show.includes('goodsSales')" class="desc-goods_sales dis-flex">
<text>已售{{ dataItem.goods_sales }}件</text>
</view>
<!-- 商品价格 -->
<view class="desc_footer">
<text v-if="itemStyle.show.includes('goodsPrice')" class="price_x">¥{{ dataItem.goods_price_min }}</text>
<text class="price_y col-9"
v-if="itemStyle.show.includes('linePrice') && dataItem.line_price_min > 0">¥{{ dataItem.line_price_min }}</text>
</view>
</view>
</view>
</view>
</block>
<!-- 多列商品 -->
<block v-else>
<block>
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
</view>
<view class="detail">
<!-- 商品标题 -->
<view v-if="itemStyle.show.includes('goodsName')" class="goods-name">
<view class="goods-name">
<text class="twoline-hide">{{ dataItem.goods_name }}</text>
</view>
<!-- 商品价格 -->
<view class="detail-price oneline-hide">
<text v-if="itemStyle.show.includes('goodsPrice')" class="goods-price f-30 col-m">￥{{ dataItem.goods_price_min }}</text>
<text v-if="itemStyle.show.includes('linePrice') && dataItem.line_price_min > 0"
<text class="goods-price f-30 col-m">￥{{ dataItem.goods_price_min }}</text>
<text v-if="dataItem.line_price_min > 0"
class="line-price col-9 f-24">￥{{ dataItem.line_price_min }}</text>
</view>
</view>
@ -101,8 +69,9 @@
box-sizing: border-box;
.goods-item {
// background-color: #fff;
box-sizing: border-box;
padding: 6rpx;
padding: 16rpx;
.goods-image {
position: relative;

38
pages/index/index.vue
View File

@ -29,7 +29,7 @@
</view>
<!-- 商品列表 -->
<view class="glistzone">
<Goods :itemStyle="item.style" :params="item.params" :dataList="item.data" />
<Goods :dataList="gdlist" />
</view>
</view>
@ -56,7 +56,10 @@
// 页面参数
options: {},
// 图片列表
imglist:[]
imglist:[],
// 商品列表
gdlist:[]
}
},
@ -77,6 +80,8 @@
},
mounted() {
this.getBannerList();
this.getHomeList();
},
methods: {
@ -90,10 +95,27 @@
}
this.imglist.push(obj)
}
// this.imglist.push(simg)
},
//商品列表
getHomeList(){
//
for(let i=0;i<5;i++){
const obj = {
"goods_id": 10002,
"goods_name": "00A02",
"selling_point": "",
"goods_image": "http://192.168.66.16:8089/uploads/10001/20231021/be65b065b633bf469cb7bcfc15385936.jpg",
"goods_price_min": "100.00",
"goods_price_max": "100.00",
"line_price_min": "120.00",
"line_price_max": "120.00",
"goods_sales": 0
}
this.gdlist.push(obj)
}
}
},
/**
@ -146,10 +168,12 @@
position: relative;
z-index: 70;
}
// swiper
.lbzone{
padding-bottom: 20rpx;
z-index: 80;;
}
// navbar
.linkzone{
padding: 10rpx 10rpx 20rpx;
display: flex;
@ -185,7 +209,11 @@
}
}
}
// goods
.glistzone{
margin-top: 46rpx;
padding: 4rpx;
}
}
</style>

Write Preview
Loading…
Cancel
Save