unknown
4 years ago
28 changed files with 1934 additions and 26 deletions
-
69package-lock.json
-
25src/pages.json
-
6src/pages/index/index.vue
-
BINsrc/static/images/icon/index/tab_10.png
-
BINsrc/static/images/icon/retail/add.png
-
BINsrc/static/images/icon/retail/back.png
-
BINsrc/static/images/icon/retail/cart.png
-
BINsrc/static/images/icon/retail/dropDown.png
-
BINsrc/static/images/icon/retail/historySearchDelete.png
-
BINsrc/static/images/icon/retail/home.png
-
BINsrc/static/images/icon/retail/search.png
-
BINsrc/static/images/icon/retail/searchClear.png
-
BINsrc/static/images/icon/retail/sub.png
-
236src/subpackage/retail/components/hover_cart_list/hover_cart_list.vue
-
7src/subpackage/retail/js/retail_api.js
-
10src/subpackage/retail/js/retail_server.js
-
20src/subpackage/retail/js/tools.js
-
447src/subpackage/retail/pages/confirm_goods/confirm_goods.vue
-
901src/subpackage/retail/pages/index/index.vue
-
239src/subpackage/retail/pages/search/search.vue
-
BINsrc/subpackage/retail/static/images/add.png
-
BINsrc/subpackage/retail/static/images/back.png
-
BINsrc/subpackage/retail/static/images/cart.png
-
BINsrc/subpackage/retail/static/images/dropDown.png
-
BINsrc/subpackage/retail/static/images/historySearchDelete.png
-
BINsrc/subpackage/retail/static/images/home.png
-
BINsrc/subpackage/retail/static/images/search.png
-
BINsrc/subpackage/retail/static/images/searchClear.png
|
After Width: 52 | Height: 52 | Size: 470 B |
|
After Width: 36 | Height: 36 | Size: 314 B |
|
After Width: 32 | Height: 32 | Size: 241 B |
|
After Width: 84 | Height: 84 | Size: 2.0 KiB |
|
After Width: 18 | Height: 18 | Size: 185 B |
|
After Width: 36 | Height: 36 | Size: 365 B |
|
After Width: 36 | Height: 36 | Size: 364 B |
|
After Width: 40 | Height: 40 | Size: 372 B |
|
After Width: 32 | Height: 32 | Size: 356 B |
|
After Width: 40 | Height: 40 | Size: 380 B |
@ -0,0 +1,236 @@ |
|||
<template> |
|||
<view v-if="isShowCartList" class="hover-cart-list"> |
|||
<view></view> |
|||
<view class="hover-cart-list-dialog" :style="{ height:cartListDialogHeight }"> |
|||
<view class="hover-cart-list-dialog-title"> |
|||
<view>商品名称</view> |
|||
<view>售价</view> |
|||
<view>数量</view> |
|||
</view> |
|||
<scroll-view class="hover-cart-list-dialog-content" :style="{ height:cartListHeight }" :scroll-top="0" :scroll-y="cartListScroll"> |
|||
<view class="hover-cart-list-dialog-content-for" :style="{ borderBottom:cartListItemBorderBottom }" v-for="item in cartList" :key="item.id"> |
|||
<view class="hover-cart-list-dialog-content-col1"> |
|||
<view>{{ item.name }}</view> |
|||
<view>{{ item.spec }}</view> |
|||
</view> |
|||
<view class="hover-cart-list-dialog-content-col2"> |
|||
<input type="digit" :value="item.price" @confirm="cartInputConfirm($event, item.id)" @blur="cartInputConfirm($event, item.id)" /> |
|||
<view>元</view> |
|||
</view> |
|||
<view class="hover-cart-list-dialog-content-col3"> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="cartCountClick('sub', item.id)"></image> |
|||
<view>{{ item.count }}</view> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/add.png" @click="cartCountClick('add', item.id)"></image> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: [ |
|||
"isShowCartList", "cartList", "cartListScroll", |
|||
"cartListHeight", "cartListDialogHeight", "cartListItemBorderBottom" |
|||
], |
|||
|
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 购物车输入确认 |
|||
cartInputConfirm(event, id) { |
|||
// 修改购物车列表对应的价格 |
|||
let value = parseFloat(event.detail.value).toFixed(2); |
|||
for (let i = 0; i < this.cartList.length; ++i) { |
|||
if (this.cartList[i].id == id) { |
|||
this.$emit("update:cartInputConfirm", value, i); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 购物车列表数量选项触发 |
|||
cartCountClick(type, id) { |
|||
// 找点击的对应商品 |
|||
let item = null; |
|||
for (let i = 0; i < this.cartList.length; ++i) { |
|||
if (this.cartList[i].id == id) { |
|||
// item = this.cartList[i]; |
|||
this.$emit("update:cartCountClick", type, i); |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.hover-cart-list { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: absolute; |
|||
left: 0rpx; |
|||
top: 0rpx; |
|||
|
|||
>view { |
|||
&:first-child { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0rpx; |
|||
bottom: 0rpx; |
|||
bottom: calc( 108rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
bottom: calc( 108rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
|
|||
background-color: rgba(0,0,0,0.5); |
|||
} |
|||
} |
|||
|
|||
.hover-cart-list-dialog { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: fixed; |
|||
bottom: 0rpx; |
|||
bottom: calc( 108rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
bottom: calc( 108rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
width: 100%; |
|||
height: 878rpx; |
|||
background-color: rgb(255,255,255); |
|||
border-top-left-radius: 30rpx; |
|||
border-top-right-radius: 30rpx; |
|||
|
|||
.hover-cart-list-dialog-title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 120rpx; |
|||
text-align: center; |
|||
padding-left: 34rpx; |
|||
padding-right: 36rpx; |
|||
|
|||
>view { |
|||
font-size: 32rpx; |
|||
color: rgb(51,51,51); |
|||
|
|||
&:first-child { |
|||
width: 258rpx; |
|||
|
|||
} |
|||
&:nth-child(2) { |
|||
width: 166rpx; |
|||
} |
|||
&:nth-child(3) { |
|||
width: 126rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hover-cart-list-dialog-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-grow: 1; |
|||
height: 758rpx; |
|||
padding-left: 34rpx; |
|||
padding-right: 36rpx; |
|||
|
|||
.hover-cart-list-dialog-content-for { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
flex-grow: 1; |
|||
height: 114rpx; |
|||
border-bottom: 1rpx solid rgb(216,216,216); |
|||
margin-top: 30rpx; |
|||
|
|||
.hover-cart-list-dialog-content-col1 { |
|||
// display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
width: 258rpx; |
|||
|
|||
>view { |
|||
overflow: hidden; |
|||
word-break: nowrap; |
|||
text-overflow: ellipsis; /* 超出部分省略号 */ |
|||
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ |
|||
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ |
|||
-webkit-line-clamp: 1; /** 显示的行数 **/ |
|||
|
|||
&:first-child { |
|||
font-size: 28rpx; |
|||
color: rgb(51,51,51); |
|||
margin-bottom: 8rpx; |
|||
} |
|||
&:nth-child(2) { |
|||
font-size: 24rpx; |
|||
color: rgb(154,154,157); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hover-cart-list-dialog-content-col2 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: rgb(51,51,51); |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
width: 166rpx; |
|||
|
|||
>input { |
|||
width: 132rpx; |
|||
height: 48rpx; |
|||
border: 2rpx solid rgb(216,216,216); |
|||
border-radius: 4rpx; |
|||
} |
|||
>view { |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
|
|||
.hover-cart-list-dialog-content-col3 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 126rpx; |
|||
|
|||
>image { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
|
|||
&:first-child { |
|||
|
|||
} |
|||
&:nth-child(3) { |
|||
|
|||
} |
|||
} |
|||
>view { |
|||
margin-left: 12rpx; |
|||
margin-right: 12rpx; |
|||
color: rgb(51,51,51); |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,7 @@ |
|||
import { ORIGIN } from '../../../js/api'; |
|||
|
|||
export const RETAIL_API = { |
|||
stadiumList:`${ORIGIN}/stadium/list`, // 店铺列表
|
|||
} |
|||
|
|||
export default RETAIL_API; |
|||
@ -0,0 +1,10 @@ |
|||
import { Server } from '../../../js/server'; |
|||
|
|||
class RetailServer extends Server { |
|||
constructor(props){ |
|||
super(props) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default new RetailServer(); |
|||
@ -0,0 +1,20 @@ |
|||
|
|||
export const tools = { |
|||
// px转rpx
|
|||
px2rpx: function(px) { |
|||
return (px / (uni.upx2px(px) / px)); |
|||
}, |
|||
|
|||
// 获取新的数据对象
|
|||
getNewObj: function(old) { |
|||
let newObj = {}; |
|||
|
|||
for (let key in old) { |
|||
newObj[key] = old[key]; |
|||
} |
|||
|
|||
return newObj; |
|||
}, |
|||
} |
|||
|
|||
export default tools; |
|||
@ -0,0 +1,447 @@ |
|||
<template> |
|||
<view class="cg-container"> |
|||
<view class="final-cart-list"> |
|||
<view class="final-cart-list-dialog-title"> |
|||
<view>商品名称</view> |
|||
<view>售价</view> |
|||
<view>数量</view> |
|||
</view> |
|||
<scroll-view class="final-cart-list-dialog-content" :scroll-top="0" :scroll-y="cartListScroll" :style="{ height:cartListFinalHeight, paddingBottom:cartListFinalPaddingBottom }"> |
|||
<view class="final-cart-list-dialog-content-for" :style="{ borderBottom:item.borderBottom }" v-for="item in cartListFinal" :key="item.id"> |
|||
<view class="final-cart-list-dialog-content-col1"> |
|||
<view>{{ item.name }}</view> |
|||
<view>{{ item.spec }}</view> |
|||
</view> |
|||
<view class="final-cart-list-dialog-content-col2"> |
|||
<input v-if="isEdited" type="digit" :value="item.price" @confirm="cartInputConfirm($event, item.id)" @blur="cartInputConfirm($event, item.id)" /> |
|||
<view v-if="!isEdited">{{item.price}}</view> |
|||
<view>元</view> |
|||
</view> |
|||
<view class="final-cart-list-dialog-content-col3"> |
|||
<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="cartCountClick('sub', item.id)"></image> |
|||
<view>{{ item.count }}</view> |
|||
<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="cartCountClick('add', item.id)"></image> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<view class="cg-footer"> |
|||
<view> |
|||
<view class="cg-footer-price"> |
|||
<view>合计：</view> |
|||
<view><text>￥</text>{{ totalPrice }}</view> |
|||
</view> |
|||
|
|||
<view class="cg-footer-btn"> |
|||
<view class="cg-footer-btn-reedit" v-if="!isEdited" @click="cartReedit"><button>重新编辑</button></view> |
|||
<view class="cg-footer-btn-confirm" @click="cartConfirm"><button>{{cartConfirmText}}</button></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../../utils/util.js'; |
|||
import tools from '../../js/tools'; |
|||
import retailServer from '../../js/retail_server'; |
|||
import retailApi from '../../js/retail_api'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
isEdited: false, // 是否处于编辑模式 |
|||
cartListFinal: [], // 购物车最终列表数据 |
|||
totalPrice: 0, // 最终价格 |
|||
cartConfirmText: "收款出库", // 收款出库 || 确认 |
|||
cartListScroll: false, // 购物车列表是否能滚动 |
|||
cartListFinalHeight: "0rpx", // 最终显示的列表高度 |
|||
cartListFinalPaddingBottom: "0rpx", // 根据是否是异形屏来设置 |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
let data = JSON.parse(decodeURIComponent(option.data)); |
|||
|
|||
this.cartListFinal = []; |
|||
for (let i = 0; i < data.cartListFinal.length; ++i) { |
|||
this.cartListFinal.push(tools.getNewObj(data.cartListFinal[i])); |
|||
this.cartListFinal[i]["borderBottom"] = "1rpx solid rgb(216,216,216)"; |
|||
} |
|||
|
|||
// 最后一项默认不显示边框 |
|||
this.cartListFinal[this.cartListFinal.length - 1]["borderBottom"] = "0rpx solid rgb(216,216,216)"; |
|||
this.fixMainHeight(); // 适配主内容高度 |
|||
this.calcTotalPrice(); // 计算总价 |
|||
|
|||
util.showLoad(); |
|||
setTimeout(util.hideLoad, 1000); |
|||
}, |
|||
methods: { |
|||
// 重新编辑 |
|||
cartReedit() { |
|||
this.isEdited = true; |
|||
this.cartConfirmText = "确认"; |
|||
}, |
|||
|
|||
// 确认 || 收款出库 |
|||
cartConfirm() { |
|||
if (this.cartConfirmText == "确认") { |
|||
this.isEdited = false; |
|||
this.cartConfirmText = "收款出库"; |
|||
return; |
|||
} |
|||
|
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
}, |
|||
|
|||
// 购物车输入确认 |
|||
cartInputConfirm(event, id) { |
|||
// 修改购物车列表对应的价格 |
|||
let value = parseFloat(event.detail.value).toFixed(2); |
|||
for (let i = 0; i < this.cartListFinal.length; ++i) { |
|||
if (this.cartListFinal[i].id == id) { |
|||
this.cartListFinal[i].price = value; |
|||
} |
|||
} |
|||
|
|||
this.calcTotalPrice(); // 计算总价 |
|||
}, |
|||
|
|||
// 购物车列表数量选项触发 |
|||
cartCountClick(type, id) { |
|||
// 找点击的对应商品 |
|||
let item = null; |
|||
for (let i = 0; i < this.cartListFinal.length; ++i) { |
|||
if (this.cartListFinal[i].id == id) { |
|||
item = this.cartListFinal[i]; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
if (item) { |
|||
switch (type) { |
|||
case "add": { |
|||
item.count += 1; |
|||
} break; |
|||
case "sub": { |
|||
if (item.count <= 0) { |
|||
return; |
|||
} |
|||
|
|||
item.count -= 1; |
|||
} break; |
|||
} |
|||
|
|||
this.calcTotalPrice(); // 计算总价 |
|||
} |
|||
}, |
|||
|
|||
// 计算总价 |
|||
calcTotalPrice() { |
|||
let price = 0.0; |
|||
|
|||
for (let i = 0; i < this.cartListFinal.length; ++i) { |
|||
price += (this.cartListFinal[i].count * this.cartListFinal[i].price); |
|||
} |
|||
|
|||
this.totalPrice = price.toFixed(2); |
|||
}, |
|||
|
|||
// 适配主内容高度 |
|||
fixMainHeight() { |
|||
let _this = this; |
|||
uni.getSystemInfo({ |
|||
success: res => { |
|||
console.log(res); |
|||
let sumHeight = res.windowHeight; // 获取可用的总高度 |
|||
|
|||
// // 看看当前滚动框是否超出这个高度 |
|||
let query = uni.createSelectorQuery().select(".cg-footer"); |
|||
query.boundingClientRect(data => { |
|||
sumHeight = sumHeight - data.height - uni.upx2px(90); // 可用高度减去footer 再减去顶部标题项 |
|||
let contentHeight = sumHeight; |
|||
|
|||
query = uni.createSelectorQuery().select(".final-cart-list-dialog-content-for"); |
|||
query.boundingClientRect(data => { |
|||
let itemSize = (data.height + uni.upx2px(30)); // 30是margin |
|||
let limitCount = Math.floor(contentHeight / itemSize); |
|||
|
|||
let height = _this.cartListFinal.length >= limitCount ? contentHeight : _this.cartListFinal.length * itemSize; |
|||
_this.cartListFinalHeight = `${tools.px2rpx(height)}rpx`; |
|||
|
|||
// 可以滚动，并且设置safeArea,大于等于44的为iphoneX及以上 |
|||
if (height >= contentHeight) { |
|||
_this.cartListScroll = true; |
|||
_this.cartListFinalPaddingBottom = `${res.safeArea.top >= 44 ? tools.px2rpx(res.safeArea.top) : 0}rpx`; |
|||
} |
|||
}).exec(); |
|||
}).exec(); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
// background-color: rgb(237,237,245); |
|||
background-color: rgb(255,255,255); |
|||
} |
|||
|
|||
.cg-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
padding-bottom: 0rpx; |
|||
padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
// border: 1px solid red; |
|||
|
|||
.final-cart-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
// width: 100%; |
|||
// height: 100%; |
|||
flex-grow: 1; |
|||
background-color: rgb(237,237,245); |
|||
|
|||
.final-cart-list-dialog-title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 90rpx; |
|||
text-align: center; |
|||
padding-left: 34rpx; |
|||
padding-right: 36rpx; |
|||
background-color: rgb(255,255,255); |
|||
|
|||
>view { |
|||
font-size: 32rpx; |
|||
color: rgb(51,51,51); |
|||
|
|||
&:first-child { |
|||
width: 258rpx; |
|||
|
|||
} |
|||
&:nth-child(2) { |
|||
width: 166rpx; |
|||
} |
|||
&:nth-child(3) { |
|||
width: 126rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.final-cart-list-dialog-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
// flex-grow: 1; |
|||
// height: 428rpx; |
|||
padding-left: 34rpx; |
|||
padding-right: 36rpx; |
|||
background-color: rgb(255,255,255); |
|||
// padding-bottom: 0rpx; |
|||
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
|
|||
.final-cart-list-dialog-content-for { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
// flex-grow: 1; |
|||
height: 114rpx; |
|||
border-bottom: 1rpx solid rgb(216,216,216); |
|||
background-color: rgb(255,255,255); |
|||
margin-top: 30rpx; |
|||
|
|||
.final-cart-list-dialog-content-col1 { |
|||
// display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
width: 258rpx; |
|||
|
|||
>view { |
|||
overflow: hidden; |
|||
word-break: nowrap; |
|||
text-overflow: ellipsis; /* 超出部分省略号 */ |
|||
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ |
|||
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ |
|||
-webkit-line-clamp: 1; /** 显示的行数 **/ |
|||
|
|||
&:first-child { |
|||
font-size: 28rpx; |
|||
color: rgb(51,51,51); |
|||
margin-bottom: 8rpx; |
|||
} |
|||
&:nth-child(2) { |
|||
font-size: 24rpx; |
|||
color: rgb(154,154,157); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.final-cart-list-dialog-content-col2 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: rgb(51,51,51); |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
width: 166rpx; |
|||
|
|||
>input { |
|||
width: 132rpx; |
|||
height: 48rpx; |
|||
border: 2rpx solid rgb(216,216,216); |
|||
border-radius: 4rpx; |
|||
} |
|||
>view { |
|||
&:first-child { |
|||
|
|||
} |
|||
&:nth-child(2) { |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.final-cart-list-dialog-content-col3 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 126rpx; |
|||
|
|||
>image { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
|
|||
&:first-child { |
|||
|
|||
} |
|||
&:nth-child(3) { |
|||
|
|||
} |
|||
} |
|||
>view { |
|||
margin-left: 12rpx; |
|||
margin-right: 12rpx; |
|||
color: rgb(51,51,51); |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cg-footer { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
// flex-grow: 1; |
|||
// opacity: 0.3; |
|||
|
|||
position: fixed; |
|||
// bottom: 0rpx; |
|||
bottom: calc( 0rpx + constant(safe-area-inset-bottom)); |
|||
bottom: calc( 0rpx + env(safe-area-inset-bottom)); |
|||
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
width: 100%; |
|||
height: 188rpx; |
|||
// border: 1rpx solid blue; |
|||
background-color: rgb(255,255,255); |
|||
|
|||
>view { |
|||
display: flex; |
|||
flex-direction: column; |
|||
// justify-content: flex-end; |
|||
align-items: flex-start; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.cg-footer-price { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
height: 88rpx; |
|||
width: 100%; |
|||
padding-right: 40rpx; |
|||
|
|||
>view { |
|||
&:first-child { |
|||
font-size: 24rpx; |
|||
} |
|||
&:nth-child(2) { |
|||
color: rgb(255,135,61); |
|||
font-size: 32rpx; |
|||
|
|||
>text { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cg-footer-btn { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
height: 88rpx; |
|||
width: 100%; |
|||
padding-right: 24rpx; |
|||
font-size: 32rpx; |
|||
|
|||
> view { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.cg-footer-btn-reedit { |
|||
>button { |
|||
width: 242rpx; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
border-radius: 44rpx; |
|||
padding: 0 0; |
|||
color: rgb(0,152,116); |
|||
background-color: rgb(255,255,255); |
|||
border: 2rpx solid rgb(0,152,116); |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.cg-footer-btn-confirm { |
|||
>button { |
|||
width: 242rpx; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
border-radius: 44rpx; |
|||
padding: 0 0; |
|||
color: rgb(255,255,255); |
|||
background-color: rgb(0,152,116); |
|||
border: 2rpx solid rgb(0,152,116); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,901 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="header"> |
|||
<picker |
|||
@change="curStoreChange" |
|||
mode="selector" |
|||
range-key="name" |
|||
:range="curStoreList" |
|||
value="0" |
|||
> |
|||
<view class="header-store-selecter"> |
|||
<image class="header-store-selecter-left-img" mode="aspectFit" src="/static/images/icon/retail/home.png"></image> |
|||
<!-- <input id="cur-store-input-node" placeholder="请选择门店" :value="curStore.name" disabled /> --> |
|||
<view class="header-store-selecter-name">{{ curStore.name ? curStore.name : '' }}</view> |
|||
<image class="header-store-selecter-right-img" mode="aspectFit" src="/static/images/icon/retail/dropDown.png"></image> |
|||
</view> |
|||
</picker> |
|||
<view class="header-search-row"> |
|||
<view @click="searchTrigger"> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
|||
<input |
|||
type="text" |
|||
placeholder="请输入商品名称" |
|||
disabled |
|||
/> |
|||
</view> |
|||
<button @click="searchTrigger">搜索</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="main" :style="{ height:mainHeight }"> |
|||
<scroll-view class="main-left" :scroll-top="categoryScrollTop" scroll-y="true" @scroll="categoryOnScroll"> |
|||
<view class="main-left-list" v-if="item.isSearch" v-for="item in goodsInfo" :key="item.id"> |
|||
<button plain=true @click="mainCategoryClick(item.id)" :style="{ color:item.style.color, backgroundColor:item.style.backgroundColor }">{{ item.categoryName }}</button> |
|||
</view> |
|||
</scroll-view> |
|||
<scroll-view class="main-right" scroll-top="0" scroll-y="true" v-if="scrollItem.isShow" v-for="scrollItem in goodsInfo" :key="scrollItem.id"> |
|||
<view class="main-right-list" v-for="item in scrollItem.goodsData" :key="item.id"> |
|||
<view>{{ item.name }}</view> |
|||
<view>{{ item.spec }}</view> |
|||
|
|||
<view class="main-right-list-price-count"> |
|||
<view class="main-right-list-price-row"> |
|||
<view><text>￥</text>{{ item.price }}</view> |
|||
</view> |
|||
|
|||
<view class="main-right-list-count-row"> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="mainCountClick('sub', scrollItem.id, item.id)"></image> |
|||
<view>{{ item.count }}</view> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/add.png" @click="mainCountClick('add', scrollItem.id, item.id)"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<hoverCartList |
|||
:isShowCartList="isShowCartList" :cartList="cartList" :cartListScroll="cartListScroll" |
|||
:cartListHeight="cartListHeight" :cartListDialogHeight="cartListDialogHeight" :cartListItemBorderBottom="cartListItemBorderBottom" |
|||
@update:cartInputConfirm="cartInputConfirm" @update:cartCountClick="cartCountClick" |
|||
> |
|||
</hoverCartList> |
|||
|
|||
<view class="footer"> |
|||
<view> |
|||
<view class="footer-price"> |
|||
<view @click="cartClick"> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/cart.png"></image> |
|||
<view v-if="(totalCount>0 && !isShowCartList) ? true:false">{{ totalCount }}</view> |
|||
<view v-if="(cartTotalCount>0 && isShowCartList) ? true:false">{{ cartTotalCount }}</view> |
|||
</view> |
|||
<view>合计：</view> |
|||
<view v-if="!isShowCartList"><text>￥</text>{{ totalPrice }}</view> |
|||
<view v-if="isShowCartList"><text>￥</text>{{ cartTotalPrice }}</view> |
|||
</view> |
|||
<view class="footer-confirm"> |
|||
<button @click="cartConfirm">确认</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../../utils/util.js'; |
|||
import tools from '../../js/tools'; |
|||
import retailServer from '../../js/retail_server'; |
|||
import retailApi from '../../js/retail_api'; |
|||
import hoverCartList from '../../components/hover_cart_list/hover_cart_list'; |
|||
|
|||
export default { |
|||
components: { |
|||
'hoverCartList': hoverCartList |
|||
}, |
|||
data(){ |
|||
return { |
|||
categoryBtnStyle: { // 分类按钮样式 |
|||
default: { "color":"rgb(154,154,157)", "backgroundColor":"rgba(0,0,0,0)" }, |
|||
click: { "color":"rgb(0,152,116)", "backgroundColor":"rgb(205,235,228)" }, |
|||
}, |
|||
categoryScrollTop: 0, // 分类滚动值 |
|||
categoryOldScrollTop: 0, // 分类滚动旧值 |
|||
categoryIndex: 1, // 分类索引值，默认第一项是搜索，过滤掉，直接从第二项开始计算 |
|||
|
|||
// curStoreList: [{ id: '', name: '请选择门店'}], // 当前门店列表 |
|||
curStoreList: [], // 当前门店列表 |
|||
curStore: {}, // 当前门店 |
|||
goodsInfo: [], // 商品信息 |
|||
mainHeight: "0rpx", // 主内容高度 |
|||
totalPrice: 0, // 总价 |
|||
totalCount: 0, // 总量 |
|||
cartTotalPrice: 0, // 购物车总价 |
|||
cartTotalCount: 0, // 购物车总量 |
|||
|
|||
cartList: [], // 购物车列表 |
|||
cartListFinal: [], // 购物车最终列表数据 |
|||
isShowCartList: false, // 是否显示购物车列表 |
|||
cartListScroll: true, // 购物车列表是否滚动 |
|||
cartListHeight: "0rpx", // 购物车列表高度，根据数量来改变高度 |
|||
cartListDialogHeight: "0rpx", // 购物车列表对话框高度，根据数量来改变高度 |
|||
cartListItemBorderBottom: "1rpx solid rgb(216,216,216)", // 列表数量大于1才会显示border |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.deleteSearchLocal(); // 删除本地的历史搜索 |
|||
this.getStoreList(); // 获取店铺列表 |
|||
this.getGoodsInfo(); // 获取商品信息 |
|||
this.fixMainHeight(); // 适配主内容高度 |
|||
}, |
|||
onShow() { |
|||
this.getSearchLocal(); // 获取本地的历史搜索 |
|||
}, |
|||
methods: { |
|||
// 分类列表滚动监听 |
|||
categoryOnScroll(e) { |
|||
this.categoryOldScrollTop = e.detail.scrollTop; |
|||
}, |
|||
// 分类列表回到顶部 |
|||
categoryGoTop(e) { |
|||
let _this = this; |
|||
_this.categoryScrollTop = _this.categoryOldScrollTop; |
|||
_this.$nextTick(function() { |
|||
_this.categoryScrollTop = 0; |
|||
}); |
|||
}, |
|||
|
|||
// 设置搜索数据 默认列表第一项是存放搜索数据 |
|||
setSearchData(data) { |
|||
util.showLoad(); |
|||
setTimeout(util.hideLoad, 1000); |
|||
|
|||
this.goodsInfo[0].goodsData = []; |
|||
let random = Math.floor(Math.random() * 5 + 1); |
|||
console.log(random); |
|||
|
|||
let tempData = []; |
|||
for (let i = 0; i < this.goodsInfo[random].goodsData.length; ++i) { |
|||
tempData.push(tools.getNewObj(this.goodsInfo[random].goodsData[i])); |
|||
} |
|||
|
|||
let conectData = [] |
|||
for (let i = 1; i < this.goodsInfo.length; ++i) { |
|||
conectData = [ ...conectData, ...this.goodsInfo[i].goodsData ]; |
|||
} |
|||
|
|||
for (let i = 0; i < tempData.length; ++i) { |
|||
for (let j = 0; j < conectData.length; ++j) { |
|||
if (tempData[i].id == conectData[j].id) { |
|||
this.goodsInfo[0].goodsData.push(conectData[j]); |
|||
} |
|||
} |
|||
} |
|||
|
|||
this.categoryGoTop(); // 每次搜索后，分类列表都要滚动到顶部 |
|||
this.goodsInfo[0].isSearch = true; |
|||
this.mainCategoryClick(this.goodsInfo[0].id); |
|||
}, |
|||
|
|||
// 获取本地的历史搜索 |
|||
getSearchLocal() { |
|||
let _this = this; |
|||
|
|||
uni.getStorage({ |
|||
key: 'searchData', |
|||
success: function (res) { |
|||
console.log(res.data); |
|||
_this.setSearchData(res.data); // 设置搜索数据 |
|||
_this.deleteSearchLocal(); // 删除本地的历史搜索 |
|||
}, |
|||
fail: function(err) { |
|||
console.log(err); |
|||
_this.deleteSearchLocal(); // 删除本地的历史搜索 |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 删除本地的历史搜索 |
|||
deleteSearchLocal() { |
|||
this.searchData = null; |
|||
|
|||
uni.removeStorage({ |
|||
key: 'searchData', |
|||
success: function (res) { |
|||
console.log('success'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 触发搜索 |
|||
searchTrigger() { |
|||
uni.navigateTo({ |
|||
url: '/subpackage/retail/pages/search/search' |
|||
}); |
|||
}, |
|||
|
|||
// 购物车输入确认 |
|||
cartInputConfirm(value, i) { |
|||
this.cartList[i].price = value; |
|||
this.calcCartTotalPriceAndCount(); // 计算购物车总价跟总量 |
|||
}, |
|||
|
|||
// 计算购物车总价跟总量 |
|||
calcCartTotalPriceAndCount() { |
|||
let price = 0.0; |
|||
let count = 0; |
|||
|
|||
for (let i = 0; i < this.cartList.length; ++i) { |
|||
price += (this.cartList[i].count * this.cartList[i].price); |
|||
count += this.cartList[i].count; |
|||
} |
|||
|
|||
this.cartTotalPrice = price.toFixed(2); |
|||
this.cartTotalCount = count; |
|||
}, |
|||
|
|||
// 购物车列表数量选项触发 |
|||
cartCountClick(type, i) { |
|||
switch (type) { |
|||
case "add": { |
|||
this.cartList[i].count += 1; |
|||
} break; |
|||
case "sub": { |
|||
if (this.cartList[i].count <= 0) { |
|||
return; |
|||
} |
|||
|
|||
this.cartList[i].count -= 1; |
|||
} break; |
|||
} |
|||
|
|||
this.calcCartTotalPriceAndCount(); // 计算购物车总价跟总量 |
|||
}, |
|||
|
|||
// 获取购物车列表的最终数据 |
|||
getCartListFinalData() { |
|||
let arr = []; |
|||
|
|||
for (let i = 0; i < this.cartList.length; ++i) { |
|||
if (this.cartList[i].count) { |
|||
arr.push(tools.getNewObj(this.cartList[i])); |
|||
} |
|||
} |
|||
|
|||
return arr; |
|||
}, |
|||
|
|||
// 购物车确认 |
|||
cartConfirm() { |
|||
this.cartListFinal = this.getCartListFinalData(); |
|||
|
|||
// 有数据，那么需要跳到确定页面 |
|||
if (this.cartListFinal.length) { |
|||
this.isShowCartList = false; |
|||
|
|||
let data = { |
|||
cartListFinal: this.cartListFinal, |
|||
}; |
|||
uni.navigateTo({ |
|||
url: `/subpackage/retail/pages/confirm_goods/confirm_goods?data=${encodeURIComponent(JSON.stringify(data))}` |
|||
}); |
|||
} |
|||
else { |
|||
uni.showToast({ |
|||
title: "购物车无数据！", |
|||
icon: "none" |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 加入购物车列表 |
|||
addToCartList() { |
|||
this.cartList = []; |
|||
|
|||
// 计算购物车列表 |
|||
for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) { |
|||
for (let j = 0; j < this.goodsInfo[i].goodsData.length; ++j) { |
|||
if (this.goodsInfo[i].goodsData[j].count) { |
|||
this.cartList.push(tools.getNewObj(this.goodsInfo[i].goodsData[j])); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 购物车点击 |
|||
cartClick() { |
|||
if (this.isShowCartList) { |
|||
this.isShowCartList = false; |
|||
} |
|||
else { |
|||
this.addToCartList(); // 将主页数据加入到购物车列表 |
|||
|
|||
// 根据数量改变列表高度 |
|||
let num = this.cartList.length; |
|||
this.cartListScroll = false; |
|||
if (this.cartList.length > 5) { |
|||
num = 5; |
|||
this.cartListScroll = true; |
|||
} |
|||
|
|||
// 只有一条数据就不会显示border |
|||
if (this.cartList.length <= 1) { |
|||
this.cartListItemBorderBottom = "0rpx solid rgb(216,216,216)"; |
|||
} |
|||
else { |
|||
this.cartListItemBorderBottom = "1rpx solid rgb(216,216,216)"; |
|||
} |
|||
|
|||
this.cartListHeight = `${151.6 * num}rpx`; |
|||
this.cartListDialogHeight = `${(878 - 758) + 151.6 * num}rpx`; |
|||
this.isShowCartList = true; |
|||
|
|||
this.calcCartTotalPriceAndCount(); // 计算购物车总价跟总量 |
|||
} |
|||
}, |
|||
|
|||
// 适配主内容高度 |
|||
fixMainHeight() { |
|||
let _this = this; |
|||
uni.getSystemInfo({ |
|||
success: res => { |
|||
console.log(res); |
|||
let sumHeight = res.windowHeight; // 获取可用的总高度 |
|||
let query = uni.createSelectorQuery().select(".header"); |
|||
|
|||
query.boundingClientRect(data => { |
|||
sumHeight -= data.height; |
|||
query = uni.createSelectorQuery().select(".footer"); |
|||
|
|||
query.boundingClientRect(data => { |
|||
sumHeight -= data.height; |
|||
_this.mainHeight = `${tools.px2rpx(sumHeight)}rpx`; |
|||
}).exec(); |
|||
}).exec(); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 计算总价跟总量 |
|||
calcTotalPriceAndCount() { |
|||
let price = 0.0; |
|||
let count = 0; |
|||
|
|||
for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) { |
|||
for (let j = 0; j < this.goodsInfo[i].goodsData.length; ++j) { |
|||
price += (this.goodsInfo[i].goodsData[j].count * this.goodsInfo[i].goodsData[j].price); |
|||
count += this.goodsInfo[i].goodsData[j].count; |
|||
} |
|||
} |
|||
|
|||
this.totalPrice = price.toFixed(2); |
|||
this.totalCount = count; |
|||
this.cartTotalPrice = this.totalPrice; |
|||
this.cartTotalCount = this.totalCount; |
|||
}, |
|||
|
|||
// 主页数量选项触发 |
|||
mainCountClick(type, id, goodsId) { |
|||
// 找点击的对应分类 |
|||
let item = null; |
|||
for (let i = 0; i < this.goodsInfo.length; ++i) { |
|||
if (this.goodsInfo[i].id == id) { |
|||
item = this.goodsInfo[i]; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
// 分类有了，继续找该分类下的商品id |
|||
let goodsItem = null; |
|||
if (item) { |
|||
for (let i = 0; i < item.goodsData.length; ++i) { |
|||
if (item.goodsData[i].id == goodsId) { |
|||
goodsItem = item.goodsData[i]; |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (goodsItem) { |
|||
switch (type) { |
|||
case "add": { |
|||
goodsItem.count += 1; |
|||
} break; |
|||
case "sub": { |
|||
if (goodsItem.count <= 0) { |
|||
return; |
|||
} |
|||
|
|||
goodsItem.count -= 1; |
|||
} break; |
|||
} |
|||
|
|||
this.calcTotalPriceAndCount(); // 计算总价跟总量 |
|||
this.addToCartList(); // 将主页数据加入到购物车列表 |
|||
} |
|||
}, |
|||
|
|||
// 主页分类选项触发 |
|||
mainCategoryClick(id) { |
|||
// 将所有按钮恢复默认状态，点击的按钮则是另外的状态 |
|||
let item = null; |
|||
for (let i = 0; i < this.goodsInfo.length; ++i) { |
|||
this.goodsInfo[i].style = this.categoryBtnStyle.default; |
|||
this.goodsInfo[i].isShow = false; |
|||
|
|||
if (this.goodsInfo[i].id == id) { |
|||
item = this.goodsInfo[i]; |
|||
} |
|||
} |
|||
|
|||
if (item) { |
|||
item.style = this.categoryBtnStyle.click; |
|||
item.isShow = true; |
|||
} |
|||
}, |
|||
|
|||
// 获取商品信息 |
|||
getGoodsInfo() { |
|||
let _this = this; |
|||
|
|||
util.showLoad(); |
|||
setTimeout(util.hideLoad, 1000); |
|||
|
|||
_this.goodsInfo = []; |
|||
let categoryName = ""; |
|||
for (let i = 0; i < 20; ++i) { |
|||
categoryName = i <= 0 ? "搜索" : "分类"; |
|||
|
|||
_this.goodsInfo.push({ |
|||
id: i + 1, |
|||
isSearch: true, |
|||
isShow: false, |
|||
categoryName: `${categoryName}${i + 1}`, |
|||
style: _this.categoryBtnStyle.default, |
|||
goodsData: [ |
|||
{ |
|||
id: 1 + Math.random(), |
|||
name: `柠檬味维他奶原味豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "250ml 300ml 350ml", |
|||
price: 3.5, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 2 + Math.random(), |
|||
name: `原味豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "150ml 200ml 100ml", |
|||
price: 300.2, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 3 + Math.random(), |
|||
name: `豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "50ml 100ml 150ml", |
|||
price: 18, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 4 + Math.random(), |
|||
name: `原味豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "150ml 200ml 100ml", |
|||
price: 300.2, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 5 + Math.random(), |
|||
name: `豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "50ml 100ml 150ml", |
|||
price: 18, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 6 + Math.random(), |
|||
name: `原味豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "150ml 200ml 100ml", |
|||
price: 300.2, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 7 + Math.random(), |
|||
name: `豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "50ml 100ml 150ml", |
|||
price: 18, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 8 + Math.random(), |
|||
name: `原味豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "150ml 200ml 100ml", |
|||
price: 300.2, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 9 + Math.random(), |
|||
name: `豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "50ml 100ml 150ml", |
|||
price: 18, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 10 + Math.random(), |
|||
name: `原味豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "150ml 200ml 100ml", |
|||
price: 300.2, |
|||
count: 0, |
|||
}, |
|||
{ |
|||
id: 11 + Math.random(), |
|||
name: `豆奶${Math.floor(Math.random() * 20)}`, |
|||
spec: "50ml 100ml 150ml", |
|||
price: 18, |
|||
count: 0, |
|||
} |
|||
] |
|||
}); |
|||
} |
|||
|
|||
_this.goodsInfo[0].isSearch = false; |
|||
_this.goodsInfo[0].goodsData = []; |
|||
_this.goodsInfo[1].style = _this.categoryBtnStyle.click; |
|||
_this.goodsInfo[1].isShow = true; |
|||
}, |
|||
|
|||
// 店铺列表 |
|||
getStoreList() { |
|||
let _this = this; |
|||
return retailServer.get({ |
|||
url: retailApi.stadiumList, |
|||
data: {}, |
|||
failMsg: '加载店铺失败！' |
|||
}).then(res => { |
|||
let _list = res.list || []; |
|||
_this.curStoreList = [..._this.curStoreList, ..._list]; |
|||
_this.curStore = _this.curStoreList[0] || {}; |
|||
}); |
|||
}, |
|||
|
|||
// 当前店铺变化 |
|||
curStoreChange(e) { |
|||
let _this = this; |
|||
let curStoreList = _this.curStoreList; |
|||
_this.curStore = curStoreList[e.detail.value] || {}; |
|||
_this.$nextTick(function() { |
|||
_this.getGoodsInfo(); // 获取商品信息 |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@function toDouble($value) { |
|||
@return $value * 2; |
|||
} |
|||
|
|||
page { |
|||
// background-color: rgb(237,237,245); |
|||
background-color: rgb(255,255,255); |
|||
} |
|||
|
|||
.container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
padding-bottom: 0rpx; |
|||
padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
|
|||
.header { |
|||
height: 230rpx; |
|||
// border: 1rpx solid red; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: rgb(237,237,245); |
|||
|
|||
.header-store-selecter { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding-left: 38rpx; |
|||
|
|||
& { |
|||
position: relative; |
|||
height: 78rpx; |
|||
line-height: 78rpx; |
|||
} |
|||
|
|||
.header-store-selecter-name { |
|||
height: 78rpx; |
|||
line-height: 78rpx; |
|||
fotn-size: 16rpx; |
|||
margin-left: 12rpx; |
|||
margin-right: 14rpx; |
|||
color: rgb(51,51,51); |
|||
} |
|||
.header-store-selecter-left-img { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
.header-store-selecter-right-img { |
|||
width: 18rpx; |
|||
height: 18rpx; |
|||
} |
|||
} |
|||
|
|||
.header-search-row { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 152rpx; |
|||
background-color: rgb(255,255,255); |
|||
border-top-left-radius: 40rpx; |
|||
border-top-right-radius: 40rpx; |
|||
|
|||
>view { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex-grow: 1; |
|||
height: 92rpx; |
|||
border-radius: 10rpx; |
|||
background-color: rgb(242,242,247); |
|||
margin-left: 24rpx; |
|||
padding-left: 20rpx; |
|||
padding-right: 20rpx; |
|||
|
|||
>input { |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 32rpx; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 20rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
>button { |
|||
flex-shrink: 0; |
|||
margin-left: 20rpx; |
|||
margin-right: 20rpx; |
|||
width: 100rpx; |
|||
height: 62rpx; |
|||
line-height: 62rpx; |
|||
font-size: 32rpx; |
|||
color: rgb(255,255,255); |
|||
background-color: rgb(6,147,137); |
|||
border-radius: 10rpx; |
|||
white-space: nowrap; |
|||
padding: 0 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.main { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
// border: 1rpx solid green; |
|||
position: relative; |
|||
background-color: rgb(237,237,245); |
|||
padding-top: 24rpx; |
|||
// padding-bottom: 18rpx; |
|||
padding-bottom: calc( 18rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 18rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
|
|||
.main-left { |
|||
width: 180rpx; |
|||
margin-right: 12rpx; |
|||
background-color: rgb(255,255,255); |
|||
border-top-right-radius: 30rpx; |
|||
|
|||
.main-left-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
> button { |
|||
width: 100%; |
|||
height: 92rpx; |
|||
line-height: 92rpx; |
|||
border-radius: 0rpx; |
|||
border-top-right-radius: 30rpx; |
|||
border: 0rpx; |
|||
color: rgb(154,154,157); |
|||
background-color: rgba(0,0,0,0); |
|||
font-size: 25rpx; |
|||
} |
|||
} |
|||
} |
|||
.main-right { |
|||
width: 558rpx; |
|||
background-color: rgb(255,255,255); |
|||
border-top-left-radius: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-left: 36rpx; |
|||
// padding-right: 48rpx; |
|||
|
|||
.main-right-list { |
|||
border-bottom: 1rpx solid rgb(237,237,245); |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-top: 24rpx; |
|||
padding-bottom: 24rpx; |
|||
|
|||
>view { |
|||
&:first-child { |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2) { |
|||
margin-top: 8rpx; |
|||
margin-bottom: 14rpx; |
|||
font-size: 24rpx; |
|||
color: rgb(154,154,157); |
|||
} |
|||
} |
|||
|
|||
.main-right-list-price-count { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
// border: 1rpx solid green; |
|||
|
|||
.main-right-list-price-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
color: rgb(255,135,61); |
|||
|
|||
>view { |
|||
&:first-child { |
|||
font-size: 32rpx; |
|||
line-height: 32rpx; |
|||
|
|||
>text { |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.main-right-list-count-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding-right: 48rpx; |
|||
|
|||
>image { |
|||
&:first-child { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
&:nth-child(3) { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
>view { |
|||
margin-left: 12rpx; |
|||
margin-right: 12rpx; |
|||
color: rgb(51,51,51); |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
position: fixed; |
|||
// bottom: 0rpx; |
|||
bottom: calc( 0rpx + constant(safe-area-inset-bottom)); |
|||
bottom: calc( 0rpx + env(safe-area-inset-bottom)); |
|||
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
width: 100%; |
|||
height: 108rpx; |
|||
// border: 1rpx solid blue; |
|||
background-color: rgb(255,255,255); |
|||
|
|||
>view { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-grow: 1; |
|||
// border: 1px solid red; |
|||
// margin-top: 24rpx; |
|||
|
|||
.footer-price { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-left: 36rpx; |
|||
|
|||
>view { |
|||
&:first-child { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
// border: 1rpx solid green; |
|||
|
|||
>image { |
|||
width: 84rpx; |
|||
height: 84rpx; |
|||
} |
|||
|
|||
>view { |
|||
position: absolute; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
color: rgb(255,255,255); |
|||
background-color: rgb(230,0,18); |
|||
font-size: 20rpx; |
|||
border-radius: 100%; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
&:nth-child(2) { |
|||
margin-left: 10rpx; |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
} |
|||
&:nth-child(3) { |
|||
font-size: 32rpx; |
|||
line-height: 32rpx; |
|||
color: rgb(255,135,61); |
|||
|
|||
>text { |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
} |
|||
} |
|||
&:nth-child(4) { |
|||
font-size: 32rpx; |
|||
line-height: 32rpx; |
|||
color: rgb(255,135,61); |
|||
|
|||
>text { |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footer-confirm { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-right: 24rpx; |
|||
|
|||
>button { |
|||
flex-shrink: 0; |
|||
width: 240rpx; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
color: rgb(255,255,255); |
|||
font-size: 32rpx; |
|||
border: 0rpx; |
|||
border-radius: 44rpx; |
|||
background-color: rgb(0,152,116); |
|||
white-space: nowrap; |
|||
padding: 0 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<view class="search-container"> |
|||
<view class="search-row"> |
|||
<view> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
|||
<input |
|||
type="text" |
|||
placeholder="请输入商品名称" |
|||
v-model="searchText" |
|||
focus="true" |
|||
/> |
|||
<image @click="searchClear" mode="aspectFit" src="/static/images/icon/retail/searchClear.png"></image> |
|||
</view> |
|||
<button @click="searchTrigger(searchText)">搜索</button> |
|||
</view> |
|||
|
|||
<view class="history-search"> |
|||
<view> |
|||
<view>历史搜索</view> |
|||
<image @click="searchHistoryDelete" mode="aspectFit" src="/static/images/icon/retail/historySearchDelete.png"></image> |
|||
</view> |
|||
<view> |
|||
<view v-for="item in historyList" :key="item.id" @click="searchTrigger(item.text)">{{ item.text }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
searchText: "", // 搜索文本 |
|||
historyList: [], // 历史列表 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getSearchHistory(); // 获取搜索历史 |
|||
}, |
|||
methods: { |
|||
// 删除历史搜索 |
|||
searchHistoryDelete() { |
|||
if (this.historyList.length <= 0) { |
|||
uni.showToast({ |
|||
title: "暂无历史数据！", |
|||
icon: "none" |
|||
}) |
|||
|
|||
return; |
|||
} |
|||
|
|||
let _this = this; |
|||
uni.showModal({ |
|||
content: '确人删除全部历史记录？', |
|||
success: function (res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
|
|||
_this.historyList = []; |
|||
} |
|||
else if (res.cancel) { |
|||
console.log('用户点击取消'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 清除搜索文本 |
|||
searchClear() { |
|||
this.searchText = ""; |
|||
}, |
|||
|
|||
// 触发搜索 |
|||
searchTrigger(text) { |
|||
if (!text) { |
|||
uni.showToast({ |
|||
title: "请输入商品名称！", |
|||
icon: "none" |
|||
}); |
|||
|
|||
return; |
|||
} |
|||
|
|||
// 存本地数据，返回上一页后用来搜索数据 |
|||
let _this = this; |
|||
uni.setStorage({ |
|||
key: 'searchData', |
|||
data: { |
|||
list: [], // 返回的是一个搜索列表 |
|||
}, |
|||
success: function() { |
|||
console.log('success'); |
|||
|
|||
// 有数据的话就返回到上一页面，加载对应数据 |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
}, |
|||
fail: function(err) { |
|||
console.log(err); |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 获取搜索历史 |
|||
getSearchHistory() { |
|||
for (let i = 0; i < 20; ++i) { |
|||
this.historyList.push({ |
|||
id: i + 1, |
|||
text: "历史" + i |
|||
}); |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.search-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
padding-bottom: 0rpx; |
|||
padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
|
|||
.search-row { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 152rpx; |
|||
background-color: rgb(255,255,255); |
|||
|
|||
>view { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex-grow: 1; |
|||
height: 92rpx; |
|||
border-radius: 10rpx; |
|||
background-color: rgb(242,242,247); |
|||
margin-left: 24rpx; |
|||
padding-left: 20rpx; |
|||
padding-right: 20rpx; |
|||
|
|||
>input { |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 32rpx; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
|
|||
&:first-child { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
&:nth-child(3) { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
>button { |
|||
flex-shrink: 0; |
|||
margin-left: 20rpx; |
|||
margin-right: 20rpx; |
|||
width: 100rpx; |
|||
height: 62rpx; |
|||
line-height: 62rpx; |
|||
font-size: 32rpx; |
|||
color: rgb(255,255,255); |
|||
background-color: rgb(6,147,137); |
|||
border-radius: 10rpx; |
|||
white-space: nowrap; |
|||
padding: 0 0; |
|||
} |
|||
} |
|||
|
|||
.history-search { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background-color: white; |
|||
padding-top: 26rpx; |
|||
padding-left: 26rpx; |
|||
|
|||
>view { |
|||
width: 100%; |
|||
|
|||
&:first-child { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 26rpx; |
|||
|
|||
>view { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
>image { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 26rpx; |
|||
} |
|||
} |
|||
&:nth-child(2) { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
|
|||
>view { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 66rpx; |
|||
font-size: 28rpx; |
|||
color: rgb(193,193,199); |
|||
background-color: rgb(242,242,247); |
|||
border-radius: 32rpx; |
|||
padding-left: 30rpx; |
|||
padding-right: 30rpx; |
|||
margin-right: 26rpx; |
|||
margin-bottom: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 36 | Height: 36 | Size: 314 B |
|
After Width: 32 | Height: 32 | Size: 241 B |
|
After Width: 84 | Height: 84 | Size: 2.0 KiB |
|
After Width: 18 | Height: 18 | Size: 185 B |
|
After Width: 36 | Height: 36 | Size: 365 B |
|
After Width: 36 | Height: 36 | Size: 364 B |
|
After Width: 40 | Height: 40 | Size: 372 B |
|
After Width: 32 | Height: 32 | Size: 356 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue