453530270@qq.com
2 years ago
9 changed files with 912 additions and 86 deletions
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<view class="diy-banner" style="height: 13rem;"> |
|||
<!-- 图片轮播 --> |
|||
<swiper class="swiper-box" :autoplay="autoplay" duration="800" circular="true" interval="3000" @change="_bindChange"> |
|||
<swiper-item v-for="(dataItem, index) in dataList" :key="index"> |
|||
<image mode="widthFix" class="slide-image" :src="dataItem.imgUrl" @click="onLink(dataItem.link)" @load="_imagesHeight" /> |
|||
</swiper-item> |
|||
</swiper> |
|||
<!-- 指示点 --> |
|||
<view class="indicator-dots rectangle"> |
|||
<view class="dots-item" :class="{ active: imgCurrent == index }" style="{ backgroundColor:#e2534d }" |
|||
v-for="(dataItem, index) in dataList" :key="index"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixin from '@/components/page/mixin.js'; |
|||
|
|||
export default { |
|||
name: 'Banner', |
|||
|
|||
/** |
|||
* 组件的属性列表 |
|||
* 用于组件自定义设置 |
|||
*/ |
|||
props: { |
|||
// itemIndex: String, |
|||
// itemStyle: Object, |
|||
// params: Object, |
|||
dataList: Array |
|||
}, |
|||
|
|||
watch:{ |
|||
dataList:function(e){ |
|||
console.log("datalist",e) |
|||
} |
|||
}, |
|||
|
|||
mixins: [mixin], |
|||
|
|||
/** |
|||
* 私有数据,组件的初始数据 |
|||
* 可用于模版渲染 |
|||
*/ |
|||
data() { |
|||
return { |
|||
windowWidth: 750, |
|||
indicatorDots: false, // 是否显示面板指示点 |
|||
autoplay: true, // 是否自动切换 |
|||
duration: 800, // 滑动动画时长 |
|||
imgHeights: [], // 图片的高度 |
|||
imgCurrent: 0 // 当前banne所在滑块指针 |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
const app = this; |
|||
uni.getSystemInfo({ |
|||
success({ windowWidth }) { |
|||
app.windowWidth = windowWidth > 750 ? 750 : windowWidth; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 组件的方法列表 |
|||
* 更新属性和数据的方法与更新页面数据的方法类似 |
|||
*/ |
|||
methods: { |
|||
/** |
|||
* 计算图片高度 |
|||
*/ |
|||
_imagesHeight({ detail }) { |
|||
console.log(detail) |
|||
const app = this; |
|||
// 获取图片真实宽度 |
|||
const { width, height } = detail; |
|||
// 宽高比 |
|||
const ratio = width / height; |
|||
// 计算的高度值 |
|||
const viewHeight = app.windowWidth / ratio; |
|||
// 把每一张图片的高度记录到数组里 |
|||
app.imgHeights.push(viewHeight); |
|||
}, |
|||
|
|||
/** |
|||
* 记录当前指针 |
|||
*/ |
|||
_bindChange(e) { |
|||
this.imgCurrent = e.detail.current; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.diy-banner { |
|||
position: relative; |
|||
|
|||
// swiper组件 |
|||
.swiper-box { |
|||
height: 100%; |
|||
|
|||
.slide-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin: 0 auto; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
/* 指示点 */ |
|||
.indicator-dots { |
|||
width: 100%; |
|||
height: 28rpx; |
|||
padding: 0 20rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 20rpx; |
|||
opacity: 0.8; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.dots-item { |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
margin-right: 8rpx; |
|||
background-color: #fff; |
|||
|
|||
&:last-child { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
&.active { |
|||
background-color: #313131 !important; |
|||
} |
|||
} |
|||
|
|||
// 圆形 |
|||
&.round .dots-item { |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
// 正方形 |
|||
&.square .dots-item { |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
} |
|||
|
|||
// 长方形 |
|||
&.rectangle .dots-item { |
|||
width: 22rpx; |
|||
height: 14rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,256 @@ |
|||
<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="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> |
|||
<!-- 商品图片 --> |
|||
<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"> |
|||
<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" |
|||
class="line-price col-9 f-24">￥{{ dataItem.line_price_min }}</text> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Goods", |
|||
/** |
|||
* 组件的属性列表 |
|||
* 用于组件自定义设置 |
|||
*/ |
|||
props: { |
|||
itemIndex: String, |
|||
itemStyle: Object, |
|||
params: Object, |
|||
dataList: Array |
|||
}, |
|||
|
|||
/** |
|||
* 组件的方法列表 |
|||
* 更新属性和数据的方法与更新页面数据的方法类似 |
|||
*/ |
|||
methods: { |
|||
|
|||
/** |
|||
* 跳转商品详情页 |
|||
*/ |
|||
onTargetGoods(goodsId) { |
|||
this.$navTo(`pages/goods/detail`, { goodsId }) |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.diy-goods { |
|||
.goods-list { |
|||
padding: 4rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.goods-item { |
|||
box-sizing: border-box; |
|||
padding: 6rpx; |
|||
|
|||
.goods-image { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 0; |
|||
padding-bottom: 100%; |
|||
overflow: hidden; |
|||
background: #fff; |
|||
|
|||
&:after { |
|||
content: ''; |
|||
display: block; |
|||
margin-top: 100%; |
|||
} |
|||
|
|||
.image { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
-o-object-fit: cover; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
.detail { |
|||
padding: 8rpx; |
|||
background: #fff; |
|||
|
|||
.goods-name { |
|||
min-height: 68rpx; |
|||
line-height: 1.3; |
|||
white-space: normal; |
|||
color: #484848; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.detail-price { |
|||
.goods-price { |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.line-price { |
|||
text-decoration: line-through; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.display__slide { |
|||
white-space: nowrap; |
|||
font-size: 0; |
|||
|
|||
.goods-item { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
&.display__list { |
|||
.goods-item { |
|||
float: left; |
|||
} |
|||
} |
|||
|
|||
&.column__2 { |
|||
.goods-item { |
|||
width: 50%; |
|||
} |
|||
} |
|||
|
|||
&.column__3 { |
|||
.goods-item { |
|||
width: 33.33333%; |
|||
} |
|||
} |
|||
|
|||
&.column__1 { |
|||
.goods-item { |
|||
width: 100%; |
|||
height: 280rpx; |
|||
margin-bottom: 12rpx; |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
line-height: 1.6; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.goods-item_left { |
|||
display: flex; |
|||
width: 40%; |
|||
background: #fff; |
|||
align-items: center; |
|||
|
|||
.image { |
|||
display: block; |
|||
width: 240rpx; |
|||
height: 240rpx; |
|||
} |
|||
} |
|||
|
|||
.goods-item_right { |
|||
position: relative; |
|||
width: 60%; |
|||
|
|||
.goods-name { |
|||
margin-top: 20rpx; |
|||
min-height: 68rpx; |
|||
line-height: 1.3; |
|||
white-space: normal; |
|||
color: #484848; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
|
|||
.goods-item_desc { |
|||
margin-top: 8rpx; |
|||
} |
|||
|
|||
.desc-selling_point { |
|||
width: 400rpx; |
|||
font-size: 24rpx; |
|||
color: #e49a3d; |
|||
} |
|||
|
|||
.desc-goods_sales { |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.desc_footer { |
|||
font-size: 24rpx; |
|||
|
|||
.price_x { |
|||
margin-right: 16rpx; |
|||
color: #f03c3c; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.price_y { |
|||
text-decoration: line-through; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,237 @@ |
|||
<template> |
|||
<view class="sovue"> |
|||
<!-- <view class="container"> --> |
|||
|
|||
<view class="search-wrapper"> |
|||
<view class="search-input"> |
|||
<view class="search-input-wrapper"> |
|||
<view class="left"> |
|||
<text class="search-icon iconfont icon-search"></text> |
|||
</view> |
|||
<view class="right"> |
|||
<input v-model="searchValue" class="input" focus="true" placeholder="请输入搜索关键词" type="text"></input> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="search-button"> |
|||
<view class="button" @click="onSearch">搜索</view> |
|||
</view> |
|||
</view> |
|||
<view class="history" v-if="historySearch.length"> |
|||
<view class="his-head"> |
|||
<text class="title">最近搜索</text> |
|||
<text class="icon iconfont icon-delete" @click="clearSearch"></text> |
|||
</view> |
|||
<view class="his-list"> |
|||
<view class="his-item" v-for="(val, index) in historySearch" :key="index"> |
|||
<view class="history-button" @click="handleQuick(val)">{{ val }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- </view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const HISTORY_SEARCH = 'historySearch' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
historySearch: [], |
|||
searchValue: '' |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
// 获取历史搜索 |
|||
this.historySearch = this.getHistorySearch() |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
/** |
|||
* 获取历史搜索 |
|||
*/ |
|||
getHistorySearch() { |
|||
return uni.getStorageSync(HISTORY_SEARCH) || [] |
|||
}, |
|||
|
|||
/** |
|||
* 搜索提交 |
|||
*/ |
|||
onSearch() { |
|||
const { searchValue } = this |
|||
if (searchValue) { |
|||
// 记录历史搜索 |
|||
this.setHistory(searchValue) |
|||
// 跳转到商品列表页 |
|||
this.$navTo('pages/goods/list', { search: searchValue }) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 记录历史搜索 |
|||
*/ |
|||
setHistory(searchValue) { |
|||
const data = this.getHistorySearch() |
|||
const index = data.indexOf(searchValue) |
|||
index > -1 && data.splice(index, 1) |
|||
data.unshift(searchValue) |
|||
this.historySearch = data |
|||
this.onUpdateStorage() |
|||
}, |
|||
|
|||
/** |
|||
* 清空最近搜索记录 |
|||
*/ |
|||
clearSearch() { |
|||
this.historySearch = [] |
|||
this.onUpdateStorage() |
|||
}, |
|||
|
|||
/** |
|||
* 更新历史搜索缓存 |
|||
* @param {Object} data |
|||
*/ |
|||
onUpdateStorage(data) { |
|||
uni.setStorageSync(HISTORY_SEARCH, this.historySearch) |
|||
}, |
|||
|
|||
/** |
|||
* 跳转到最近搜索 |
|||
*/ |
|||
handleQuick(search) { |
|||
this.$navTo('pages/goods/list', { search }) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
padding: 20rpx; |
|||
min-height: 100vh; |
|||
background: #f7f7f7; |
|||
} |
|||
|
|||
.sovue{ |
|||
padding: 20rpx; |
|||
position: absolute; |
|||
top: 20rpx; |
|||
left: 4rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
.search-wrapper { |
|||
display: flex; |
|||
height: 84rpx; |
|||
} |
|||
|
|||
// 搜索输入框 |
|||
.search-input { |
|||
width: 80%; |
|||
background: #fff; |
|||
border-radius: 10rpx 0 0 10rpx; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
|
|||
.search-input-wrapper { |
|||
display: flex; |
|||
|
|||
.left { |
|||
display: flex; |
|||
width: 60rpx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.search-icon { |
|||
display: block; |
|||
color: #b4b4b4; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
|
|||
input { |
|||
font-size: 28rpx; |
|||
height: 84rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.input-placeholder { |
|||
color: #aba9a9; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// 搜索按钮 |
|||
.search-button { |
|||
width: 20%; |
|||
box-sizing: border-box; |
|||
|
|||
.button { |
|||
height: 84rpx; |
|||
font-size: 28rpx; |
|||
border-radius: 0 10rpx 10rpx 0; |
|||
background: #fa2209; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
|
|||
// 最近搜索 |
|||
.history { |
|||
|
|||
.his-head { |
|||
font-size: 28rpx; |
|||
padding: 50rpx 0 0 0; |
|||
color: #777; |
|||
|
|||
.icon { |
|||
float: right; |
|||
} |
|||
|
|||
} |
|||
|
|||
.his-list { |
|||
padding: 20rpx 0; |
|||
overflow: hidden; |
|||
|
|||
.his-item { |
|||
width: 33.3%; |
|||
float: left; |
|||
padding: 10rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.history-button { |
|||
text-align: center; |
|||
padding: 14rpx; |
|||
line-height: 30rpx; |
|||
border-radius: 100rpx; |
|||
background: #fff; |
|||
font-size: 26rpx; |
|||
border: 1rpx solid #efefef; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 店铺页面组件 --> |
|||
<Page :items="items" /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { setCartTabBadge } from '@/core/app' |
|||
import * as Api from '@/api/page' |
|||
import Page from '@/components/page' |
|||
|
|||
const App = getApp() |
|||
|
|||
export default { |
|||
components: { |
|||
Page |
|||
}, |
|||
data() { |
|||
return { |
|||
// 页面参数 |
|||
options: {}, |
|||
// 页面属性 |
|||
page: {}, |
|||
// 页面元素 |
|||
items: [] |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
// 当前页面参数 |
|||
this.options = options |
|||
// 加载页面数据 |
|||
this.getPageData(); |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
// 更新购物车角标 |
|||
setCartTabBadge() |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
/** |
|||
* 加载页面数据 |
|||
* @param {Object} callback |
|||
*/ |
|||
getPageData(callback) { |
|||
const app = this |
|||
const pageId = app.options.pageId || 0 |
|||
Api.detail(pageId) |
|||
.then(result => { |
|||
// 设置页面数据 |
|||
const { data: { pageData } } = result |
|||
app.page = pageData.page |
|||
app.items = pageData.items |
|||
// 设置顶部导航栏栏 |
|||
app.setPageBar(); |
|||
}) |
|||
.finally(() => callback && callback()) |
|||
}, |
|||
|
|||
/** |
|||
* 设置顶部导航栏 |
|||
*/ |
|||
setPageBar() { |
|||
const { |
|||
page |
|||
} = this |
|||
// 设置页面标题 |
|||
uni.setNavigationBarTitle({ |
|||
title: page.params.title |
|||
}); |
|||
// 设置navbar标题、颜色 |
|||
uni.setNavigationBarColor({ |
|||
frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000', |
|||
backgroundColor: page.style.titleBackgroundColor |
|||
}) |
|||
}, |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 下拉刷新 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
// 获取首页数据 |
|||
this.getPageData(() => { |
|||
uni.stopPullDownRefresh() |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 分享当前页面 |
|||
*/ |
|||
onShareAppMessage() { |
|||
const app = this |
|||
const { page } = app |
|||
return { |
|||
title: page.params.share_title, |
|||
path: "/pages/index/index?" + app.$getShareUrlParams() |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 分享到朋友圈 |
|||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta) |
|||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html |
|||
*/ |
|||
onShareTimeline() { |
|||
const app = this |
|||
const { page } = app |
|||
return { |
|||
title: page.params.share_title, |
|||
path: "/pages/index/index?" + app.$getShareUrlParams() |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 4.0 KiB |
Loading…
Reference in new issue