You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
903 lines
26 KiB
903 lines
26 KiB
<template>
|
|
<view class="container">
|
|
<view class="header">
|
|
<picker
|
|
@change="curStoreChange"
|
|
mode="selector"
|
|
range-key="name"
|
|
:range="curStoreList"
|
|
value="0"
|
|
:disabled="storeListDisabled"
|
|
>
|
|
<view class="header-store-selecter">
|
|
<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 hover-class="hover-active" @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.isCateShow" v-for="item in goodsInfo" :key="item.cate.id">
|
|
<button plain=true @click="mainCategoryClick(item.cate.id, item.isShow)" :style="{ fontWeight: item.style.fontWeight, color:item.style.color, backgroundColor:item.style.backgroundColor }">{{ item.cate.name }}</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.cate.id" @scrolltolower="refreshList()">
|
|
<view class="main-right-list" v-for="item in scrollItem.goods_list" :key="item.id">
|
|
<view class="item-left">
|
|
<image mode="aspectFit" :src="item.goods_img"></image>
|
|
<view v-if="item.erp_goods.stock_num?false:true" class="item-left-empty">
|
|
<view>盘罄</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-right">
|
|
<view class="item-right-top">
|
|
<view class="item-right-name">{{ item.goods_name }}</view>
|
|
<view class="item-right-spec">{{ `${item.erp_goods.erp_goods_specs}/${item.erp_goods.erp_goods_type}/${item.erp_goods.erp_goods_sku}` }}</view>
|
|
<!-- <view class="item-right-special">特价</view> -->
|
|
</view>
|
|
|
|
<view class="item-right-price-count">
|
|
<view class="item-right-price-row" :style="{color:item.erp_goods.stock_num?'#FF873D':'#9A9A9D'}">
|
|
<view><text>￥</text>{{ item.assistant_price }}</view>
|
|
</view>
|
|
|
|
<view class="item-right-count-row">
|
|
<image v-if="item.count?true:false" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="mainCountClick('sub', scrollItem.cate.id, scrollItem.cate.name, item.id, item.erp_goods.stock_num)"></image>
|
|
<view v-if="item.count?true:false">{{ item.count }}</view>
|
|
<image v-if="item.erp_goods.stock_num?true:false" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="mainCountClick('add', scrollItem.cate.id, scrollItem.cate.name, item.id, item.erp_goods.stock_num)"></image>
|
|
<image v-else mode="aspectFit" src="/static/images/icon/retail/addEmpty.png" @click="mainCountClick('add', scrollItem.cate.id, scrollItem.cate.name, item.id, item.erp_goods.stock_num)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<hoverCartList
|
|
:isShowCartList="isShowCartList"
|
|
:cartList="cartList"
|
|
@update:clearCart="clearCart"
|
|
@update:cartCountClick="cartCountClick"
|
|
@update:maskClick="cartClick"
|
|
>
|
|
</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">{{ totalCount }}</view>
|
|
</view>
|
|
<view>合计：</view>
|
|
<view><text>￥</text>{{ totalPrice }}</view>
|
|
</view>
|
|
<view class="footer-confirm">
|
|
<button hover-class="hover-active" @click="cartConfirm" :style="{opacity:cartConfirmOpacity}">去结算</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';
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
components: {
|
|
'hoverCartList': hoverCartList ,
|
|
},
|
|
data(){
|
|
return {
|
|
categoryBtnStyle: { // 分类按钮样式
|
|
default: { fontWeight:"normal", color:"#9A9A9D", backgroundColor:"rgba(0,0,0,0)" },
|
|
click: { fontWeight:"600", color:"#009874", backgroundColor:"rgba(0,152,116,0.2)" },
|
|
},
|
|
categoryScrollTop: 0, // 分类滚动值
|
|
categoryOldScrollTop: 0, // 分类滚动旧值
|
|
// 分类索引值，默认第一项是搜索，第二项可能是热销，会在获取接口数据时判断，然后过滤掉
|
|
categoryIndex: 1,
|
|
params: {
|
|
brand_id: '',
|
|
stadium_id: '',
|
|
type_key: '',
|
|
key: '',
|
|
page: 1,
|
|
page_size: 10,
|
|
is_sale: 1,
|
|
is_show_on_assistant: 1
|
|
},
|
|
total: 0,
|
|
searchData: null,
|
|
searchText: '',
|
|
|
|
// curStoreList: [{ id: '', name: '请选择门店'}], // 当前门店列表
|
|
curStoreList: [], // 当前门店列表
|
|
storeListDisabled: false, // 当前门店列表禁用状态
|
|
curStore: {}, // 当前门店
|
|
goodsInfo: [], // 商品信息
|
|
mainHeight: "0rpx", // 主内容高度
|
|
totalPrice: 0, // 总价
|
|
totalCount: 0, // 总量
|
|
|
|
cartList: [], // 购物车列表
|
|
cartListFinal: [], // 购物车最终列表数据
|
|
isShowCartList: false, // 是否显示购物车列表
|
|
cartConfirmOpacity: 0.3 // 结算按钮
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.params.brand_id = this.brandInfo.brand.id;
|
|
this.deleteSearchLocal(); // 删除本地的搜索记录
|
|
this.getStoreList(); // 获取店铺列表
|
|
this.fixMainHeight(); // 适配主内容高度
|
|
},
|
|
onShow() {
|
|
this.getSearchLocal(); // 获取本地的搜索记录
|
|
this.getRetailStatus(); // 获取收款出库状态
|
|
},
|
|
computed:{
|
|
...mapState([ 'brandInfo',])
|
|
},
|
|
watch: {
|
|
cartList() {
|
|
this.setCartConfirmStyle();
|
|
},
|
|
},
|
|
methods: {
|
|
// 获取收款出库状态
|
|
getRetailStatus() {
|
|
let _this = this;
|
|
|
|
uni.getStorage({
|
|
key: 'retailStatus',
|
|
success: (res) => {
|
|
_this.searchText = '';
|
|
_this.params.page = 1;
|
|
_this.params.type_key = '';
|
|
_this.params.key = '';
|
|
_this.getCategoryInfo(); // 重新获取 刷新商品数据，把出库的数据清了
|
|
_this.deleteRetailLocal(); // 删除收款出库状态
|
|
},
|
|
fail: (err) => { _this.deleteRetailLocal();},
|
|
});
|
|
},
|
|
// 删除收款出库状态
|
|
deleteRetailLocal() {
|
|
this.searchData = null;
|
|
uni.removeStorage({ key: 'retailStatus', success: (res) => {} });
|
|
},
|
|
// 分类列表滚动监听
|
|
categoryOnScroll(e) {
|
|
this.categoryOldScrollTop = e.detail.scrollTop;
|
|
},
|
|
// 分类列表回到顶部
|
|
categoryGoTop(e) {
|
|
let _this = this;
|
|
_this.categoryScrollTop = _this.categoryOldScrollTop;
|
|
_this.$nextTick(() => { _this.categoryScrollTop = 0; });
|
|
},
|
|
// 设置搜索数据 默认列表第一项是存放搜索数据
|
|
setSearchData(data) {
|
|
util.showLoad();
|
|
setTimeout(util.hideLoad, 500);
|
|
this.searchData = data;
|
|
this.goodsInfo[0].goods_list = data.list;
|
|
this.searchText = data.searchText;
|
|
this.setCount(0);
|
|
this.categoryGoTop(); // 每次搜索后，分类列表都要滚动到顶部
|
|
this.goodsInfo[0].isCateShow = true;
|
|
this.mainCategoryClick(this.goodsInfo[0].cate.id, this.goodsInfo[0].isShow);
|
|
},
|
|
// 获取本地的历史搜索
|
|
getSearchLocal() {
|
|
let _this = this;
|
|
|
|
uni.getStorage({
|
|
key: 'searchData',
|
|
success: (res) => {
|
|
_this.setSearchData(res.data); // 设置搜索数据
|
|
_this.deleteSearchLocal(); // 删除本地的历史搜索
|
|
},
|
|
fail: (err) => { _this.deleteSearchLocal(); },
|
|
});
|
|
},
|
|
// 删除本地的历史搜索
|
|
deleteSearchLocal() {
|
|
this.searchData = null;
|
|
uni.removeStorage({ key: 'searchData', success: (res) => {} });
|
|
},
|
|
// 触发搜索
|
|
searchTrigger() {
|
|
let data = { curStore: this.curStore, brandInfo: this.brandInfo };
|
|
uni.navigateTo({
|
|
url: `/subpackage/retail/pages/search/search?data=${encodeURIComponent(JSON.stringify(data))}`
|
|
});
|
|
},
|
|
// 清空购物车
|
|
clearCart() {
|
|
this.cartList = [];
|
|
for (let i = 0; i < this.goodsInfo.length; ++i) {
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j)
|
|
this.goodsInfo[i].goods_list[j].count = 0;
|
|
}
|
|
this.isShowCartList = false;
|
|
this.calcTotalPriceAndCount(); // 计算总价跟总量
|
|
},
|
|
// 购物车列表数量选项触发
|
|
cartCountClick(type, i) {
|
|
switch (type) {
|
|
case "add": {
|
|
if (this.cartList[i].count + 1 > this.cartList[i].erp_goods.stock_num) {
|
|
util.showNone("库存就这么多了！");
|
|
return;
|
|
}
|
|
|
|
this.cartList[i].count += 1;
|
|
} break;
|
|
case "sub": {
|
|
if (this.cartList[i].count > 0) this.cartList[i].count -= 1;
|
|
} break;
|
|
}
|
|
// 找主页当前列表有无该数据
|
|
for (let k = 0; k < this.goodsInfo.length; ++k) {
|
|
if (this.goodsInfo[k].isShow) {
|
|
for (let j = 0; j < this.goodsInfo[k].goods_list.length; ++j) {
|
|
if (this.goodsInfo[k].goods_list[j].id === this.cartList[i].id) {
|
|
this.goodsInfo[k].goods_list[j].count = this.cartList[i].count;
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.cartList[i].count <= 0) this.cartList.splice(i, 1); // 没数量了就删掉
|
|
if (!this.cartList.length) this.isShowCartList = false; // 列表没了，隐藏
|
|
this.calcTotalPriceAndCount(); // 计算总价跟总量
|
|
},
|
|
// 购物车确认
|
|
cartConfirm() {
|
|
if (this.cartList.length <= 0) return;
|
|
this.cartListFinal = JSON.parse(JSON.stringify(this.cartList));
|
|
this.isShowCartList = false;
|
|
let data = { cartListFinal: this.cartListFinal, curStore: this.curStore, totalPrice: this.totalPrice };
|
|
uni.navigateTo({
|
|
url: `/subpackage/retail/pages/confirm_goods/confirm_goods?data=${encodeURIComponent(JSON.stringify(data))}`
|
|
});
|
|
},
|
|
// 加入购物车列表
|
|
addToCartList(goodsItem) {
|
|
let mark = -1;
|
|
for (let i = 0; i < this.cartList.length; ++i) {
|
|
if (this.cartList[i].id === goodsItem.id) {
|
|
mark = i;
|
|
this.cartList[i].count = goodsItem.count;
|
|
break;
|
|
}
|
|
}
|
|
if (mark === -1) {
|
|
this.cartList.push(JSON.parse(JSON.stringify(goodsItem)));
|
|
} else if (goodsItem.count <= 0) {
|
|
this.cartList.splice(mark, 1);
|
|
}
|
|
},
|
|
setCartConfirmStyle() {
|
|
this.cartConfirmOpacity = this.cartList.length > 0 ? 1 : 0.3;
|
|
},
|
|
// 购物车点击
|
|
cartClick() {
|
|
if (!this.cartList.length) return;
|
|
this.isShowCartList = !this.isShowCartList;
|
|
},
|
|
// 适配主内容高度
|
|
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();
|
|
}
|
|
});
|
|
},
|
|
// 找搜索跟热销 不同于其他分类的数据
|
|
findDifferentData() {
|
|
let searchAndHotData = [];
|
|
for (let i = 0; i < this.categoryIndex; ++i) {
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j)
|
|
searchAndHotData.push(this.goodsInfo[i].goods_list[j]);
|
|
}
|
|
|
|
let otherData = [];
|
|
for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) {
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j)
|
|
otherData.push(this.goodsInfo[i].goods_list[j]);
|
|
}
|
|
|
|
let mark = false;
|
|
let tempData = [];
|
|
for (let i = 0; i < searchAndHotData.length; ++i) {
|
|
mark = false; // 表示不在其他分类里面
|
|
for (let j = 0; j < otherData .length; ++j) {
|
|
if (searchAndHotData[i].id == otherData [j].id) mark = true;
|
|
}
|
|
|
|
// 如果不在 并且有数量，那么加进列表
|
|
if (!mark && searchAndHotData[i].count) tempData.push(searchAndHotData[i]);
|
|
}
|
|
return tempData;
|
|
},
|
|
// 计算总价跟总量
|
|
calcTotalPriceAndCount() {
|
|
let price = 0.0;
|
|
let count = 0;
|
|
|
|
for (let i = 0; i < this.cartList.length; ++i) {
|
|
price = parseFloat(price) + parseFloat(this.cartList[i].count * this.cartList[i].assistant_price);
|
|
count += this.cartList[i].count;
|
|
}
|
|
this.totalPrice = price.toFixed(2);
|
|
this.totalCount = count;
|
|
},
|
|
// 主页数量选项触发
|
|
mainCountClick(type, id, cateName, goodsId, stockNum) {
|
|
if (stockNum <= 0) return;
|
|
|
|
// 找点击的对应分类
|
|
let item = null;
|
|
for (let i = 0; i < this.goodsInfo.length; ++i) {
|
|
if (this.goodsInfo[i].cate.id == id) {
|
|
item = this.goodsInfo[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 分类有了，继续找该分类下的商品id
|
|
let goodsItem = null;
|
|
if (item) {
|
|
for (let i = 0; i < item.goods_list.length; ++i) {
|
|
if (item.goods_list[i].id == goodsId) {
|
|
goodsItem = item.goods_list[i];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (goodsItem) {
|
|
switch (type) {
|
|
case "add": {
|
|
if (goodsItem.count + 1 > goodsItem.erp_goods.stock_num) {
|
|
util.showNone("库存就这么多了！");
|
|
return;
|
|
}
|
|
goodsItem.count += 1;
|
|
} break;
|
|
case "sub": {
|
|
if (goodsItem.count <= 0) return;
|
|
goodsItem.count -= 1;
|
|
} break;
|
|
}
|
|
}
|
|
|
|
this.addToCartList(goodsItem); // 将主页数据加入到购物车列表
|
|
this.calcTotalPriceAndCount(); // 计算总价跟总量
|
|
},
|
|
// 主页分类选项触发
|
|
mainCategoryClick(id, isShow) {
|
|
if (isShow) return;
|
|
// 将所有按钮恢复默认状态，点击的按钮则是另外的状态
|
|
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].cate.id == id) item = this.goodsInfo[i];
|
|
}
|
|
if (item) {
|
|
item.style = this.categoryBtnStyle.click;
|
|
item.isShow = true;
|
|
this.params.type_key = item.cate.classifyer_id;
|
|
this.params.key = item.cate.name === '搜索' ? this.searchText : '';
|
|
this.params.page = 1;
|
|
|
|
util.showLoad();
|
|
if (!this.searchData) {
|
|
item.goods_list = [];
|
|
this.getGoodsInfo(); // 获取商品信息
|
|
} else {
|
|
util.hideLoad();
|
|
}
|
|
}
|
|
},
|
|
// 获取商品分类
|
|
async getCategoryInfo() {
|
|
let _this = this;
|
|
_this.goodsInfo = [];
|
|
_this.params.page = 1;
|
|
|
|
// 获取分类
|
|
let res = await retailServer.get({
|
|
url: retailApi.getCategoryList,
|
|
data: {
|
|
parent_classifyer_id: `${_this.brandInfo.brand.id}-${_this.curStore.id}-零售商品分类`
|
|
},
|
|
isDefaultGet: false,
|
|
failMsg: '加载商品分类数据失败！'
|
|
}).catch(() => {});
|
|
// 默认第一个搜索，第二个全部
|
|
_this.categoryIndex = 2; // 分类索引值从2开始，前面两项过滤掉（搜索、全部）
|
|
_this.goodsInfo = [{
|
|
isCateShow: false, isShow: false, style: _this.categoryBtnStyle.default, goods_list: [],
|
|
cate: { id: -2, classifyer_id: '', name: "搜索" }
|
|
}, {
|
|
isCateShow: true, isShow: true, style: _this.categoryBtnStyle.click, goods_list: [],
|
|
cate: { id: -1, classifyer_id: '', name: "全部" }
|
|
}
|
|
];
|
|
if (res && res.data && res.data.data) {
|
|
for (let i = 0; i < res.data.data.length; ++i) {
|
|
_this.goodsInfo.push({
|
|
isCateShow: true, isShow: false, style: _this.categoryBtnStyle.default, goods_list: [],
|
|
cate: {
|
|
id: res.data.data[i].id,
|
|
classifyer_id: res.data.data[i].classifyer_id,
|
|
name: res.data.data[i].name
|
|
}
|
|
});
|
|
}
|
|
_this.cartList = []; // 购物车的数据清空，每次切换门店都执行
|
|
_this.totalCount = 0;
|
|
_this.totalPrice = 0;
|
|
_this.categoryGoTop(); // 分类列表需要滚动至顶部
|
|
}
|
|
|
|
this.getGoodsInfo();
|
|
},
|
|
// 获取商品信息
|
|
async getGoodsInfo() {
|
|
let _this = this;
|
|
let goodsRes = await retailServer.get({
|
|
url: retailApi.getGoodsList,
|
|
data: _this.params,
|
|
isDefaultGet: false,
|
|
failMsg: '加载商品数据失败！'
|
|
}).catch(() => {});
|
|
if (goodsRes && goodsRes.data && goodsRes.data.data && goodsRes.data.data.list) {
|
|
for (let j = 0; j < goodsRes.data.data.list.length; ++j) {
|
|
goodsRes.data.data.list[j].count = 0; // 用来计数
|
|
goodsRes.data.data.list[j].erp_goods = goodsRes.data.data.list[j].erp_goods || {};
|
|
}
|
|
for (let i = 0; i < _this.goodsInfo.length; ++i) {
|
|
if (_this.goodsInfo[i].isShow) {
|
|
// _this.goodsInfo[i].goods_list = goodsRes.data.data.list;
|
|
_this.goodsInfo[i].goods_list = _this.goodsInfo[i].goods_list.concat(goodsRes.data.data.list);
|
|
this.setCount(i); // 购物车列表的数量覆盖上当前列表的数量
|
|
break;
|
|
}
|
|
}
|
|
_this.total = goodsRes.data.data.total;
|
|
}
|
|
util.hideLoad();
|
|
},
|
|
setCount(index) {
|
|
for (let i = 0; i < this.cartList.length; ++i) {
|
|
for (let j = 0; j < this.goodsInfo[index].goods_list.length; ++j) {
|
|
if (this.cartList[i].id === this.goodsInfo[index].goods_list[j].id) {
|
|
this.goodsInfo[index].goods_list[j].count = this.cartList[i].count;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
refreshList() {
|
|
// 还没到最后一页
|
|
if (this.params.page * this.params.page_size <= this.total) {
|
|
util.showLoad();
|
|
this.params.page += 1;
|
|
this.getGoodsInfo();
|
|
}
|
|
},
|
|
// 店铺列表
|
|
getStoreList() {
|
|
util.showLoad();
|
|
|
|
let _this = this;
|
|
return retailServer.get({
|
|
url: retailApi.assistantGetAssistantStadiums,
|
|
data: {
|
|
// brand_id: _this.indexData.brand.id
|
|
},
|
|
isDefaultGet: false,
|
|
failMsg: '加载店铺失败！'
|
|
}).then(res => {
|
|
if (res.data.code == 0) {
|
|
let _list = res.data.data.list || [];
|
|
_this.curStoreList = [..._this.curStoreList, ..._list];
|
|
_this.curStore = _this.curStoreList[0] || {};
|
|
_this.storeListDisabled = _this.curStoreList.length > 1 ? false : true;
|
|
_this.params.stadium_id = _this.curStore.id;
|
|
_this.getCategoryInfo(); // 获取商品分类
|
|
}
|
|
else {
|
|
util.hideLoad();
|
|
util.showNone(res.data.message || '操作失败！');
|
|
}
|
|
});
|
|
},
|
|
// 当前店铺变化
|
|
curStoreChange(e) {
|
|
let _this = this;
|
|
let curStoreList = _this.curStoreList;
|
|
_this.curStore = curStoreList[e.detail.value] || {};
|
|
_this.params.stadium_id = _this.curStore.id;
|
|
_this.$nextTick(function() {
|
|
util.showLoad();
|
|
_this.getCategoryInfo(); // 获取商品分类
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
$orange: #FF873D;
|
|
page {
|
|
background-color: white;
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #F2F2F7;
|
|
z-index: 0;
|
|
|
|
.header-store-selecter {
|
|
@include centerFlex(flex-start);
|
|
padding-left: 38rpx;
|
|
fotn-size: 32rpx;
|
|
|
|
& {
|
|
position: relative;
|
|
height: 78rpx;
|
|
line-height: 78rpx;
|
|
}
|
|
.header-store-selecter-name {
|
|
height: 100%;
|
|
line-height: 78rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
.header-store-selecter-right-img {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
}
|
|
}
|
|
.header-search-row {
|
|
@include centerFlex(center);
|
|
height: 92rpx;
|
|
margin-top: 17rpx;
|
|
|
|
>view {
|
|
@include centerFlex(space-between);
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
background-color: white;
|
|
margin-left: 24rpx;
|
|
padding: 0 20rpx;
|
|
|
|
>input {
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
}
|
|
>image{
|
|
flex-shrink: 0;
|
|
margin-right: 20rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
>button {
|
|
flex-shrink: 0;
|
|
margin: 0 20rpx;
|
|
padding: 0 0;
|
|
width: 142rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
color: white;
|
|
background-color: $themeColor;
|
|
border-radius: 10rpx;
|
|
white-space: nowrap;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
.main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
background-color: #F2F2F7;
|
|
padding-top: 24rpx;
|
|
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: white;
|
|
border-top-right-radius: 30rpx;
|
|
|
|
.main-left-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
> button {
|
|
padding: 0 10rpx;
|
|
width: 100%;
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
border-radius: 0rpx;
|
|
border-top-right-radius: 30rpx;
|
|
border: 0rpx;
|
|
font-size: 28rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
.main-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 558rpx;
|
|
background-color: white;
|
|
border-radius: 10rpx;
|
|
padding-left: 20rpx;
|
|
|
|
.main-right-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 25rpx 0;
|
|
overflow: hidden;
|
|
border-top: 1rpx solid #EDEDF5;
|
|
margin-right: 20rpx;
|
|
transform: translate(0rpx, -1rpx);
|
|
|
|
.item-left {
|
|
position: relative;
|
|
width: 172rpx;
|
|
height: 172rpx;
|
|
margin-right: 20rpx;
|
|
border-radius: 10rpx;
|
|
@include centerFlex(center);
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
|
|
>image {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.item-left-empty {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0,0,0,0.5);
|
|
border-radius: 10rpx;
|
|
|
|
>view {
|
|
font-size: 28rpx;
|
|
background: white;
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
@include centerFlex(center);
|
|
}
|
|
}
|
|
}
|
|
.item-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex-grow: 1;
|
|
// padding-right: 20rpx;
|
|
|
|
.item-right-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item-right-name {
|
|
font-size: 28rpx;
|
|
word-break: break-all;
|
|
}
|
|
.item-right-spec {
|
|
margin: 8rpx 0 14rpx 0;
|
|
font-size: 24rpx;
|
|
color: #9A9A9D;
|
|
word-break: break-all;
|
|
}
|
|
.item-right-special {
|
|
width: 58rpx;
|
|
height: 28rpx;
|
|
margin-bottom: 10rpx;
|
|
font-size: 20rpx;
|
|
color: #E60012;
|
|
background: rgba(230,0,18,0.13);
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.item-right-price-count {
|
|
@include centerFlex(space-between);
|
|
|
|
.item-right-price-row {
|
|
color: $orange;
|
|
word-break: break-all;
|
|
|
|
>view {
|
|
font-size: 36rpx;
|
|
line-height: 32rpx;
|
|
font-weight: 500;
|
|
|
|
>text {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.item-right-count-row {
|
|
@include centerFlex(flex-start);
|
|
|
|
>image {
|
|
&:first-child {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
>view {
|
|
margin: 0 12rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
@include centerFlex(center);
|
|
position: fixed;
|
|
bottom: calc( 0rpx + constant(safe-area-inset-bottom));
|
|
bottom: calc( 0rpx + env(safe-area-inset-bottom));
|
|
width: 100%;
|
|
height: 108rpx;
|
|
background-color: white;
|
|
|
|
>view {
|
|
@include centerFlex(space-between);
|
|
flex-grow: 1;
|
|
|
|
.footer-price {
|
|
@include centerFlex(flex-start);
|
|
margin-left: 36rpx;
|
|
|
|
>view {
|
|
&:first-child {
|
|
position: relative;
|
|
@include centerFlex(flex-start);
|
|
|
|
>image {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
}
|
|
>view {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
color: white;
|
|
background-color: #E60012;
|
|
font-size: 20rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 100%;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
flex-shrink: 0;
|
|
margin-left: 10rpx;
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
}
|
|
&:nth-child(3) {
|
|
font-size: 40rpx;
|
|
line-height: 40rpx;
|
|
color: $orange;
|
|
|
|
>text {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
&:nth-child(4) {
|
|
font-size: 40rpx;
|
|
line-height: 40rpx;
|
|
color: $orange;
|
|
|
|
>text {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-confirm {
|
|
@include centerFlex(flex-start);
|
|
margin-right: 24rpx;
|
|
|
|
>button {
|
|
flex-shrink: 0;
|
|
width: 240rpx;
|
|
height: 88rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
line-height: 88rpx;
|
|
border: 0rpx;
|
|
border-radius: 10rpx;
|
|
color: white;
|
|
background-color: $themeColor;
|
|
white-space: nowrap;
|
|
padding: 0 0;
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|