976 lines
31 KiB
Vue
976 lines
31 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
<!--主要内容-->
|
||
<view class="main-content">
|
||
<!--顶部搜索-->
|
||
<view class="search-content">
|
||
<view class="search-main">
|
||
<input class="search-input" v-model="search.store_name" type="text" placeholder="请输入商品名称...">
|
||
<view class="search-btn" @click="getGoodsList(1)">搜索</view>
|
||
</view>
|
||
</view>
|
||
<!--顶部提示-->
|
||
<view class="top-tips">
|
||
请添加你需要的商品进行进货！
|
||
<view class="record-btn" @click="withGoodsRecord">进货记录</view>
|
||
</view>
|
||
<!--商品列表-->
|
||
<view class="list">
|
||
<view class="item" v-for="(item,index) in Object.values(list)" :key="index">
|
||
<view class="goods">
|
||
<view class="image">
|
||
<image class="goods-image" :src="item.image"></image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="title">{{ item.store_name }}</view>
|
||
<view class="price">¥{{ item.price }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="buy">
|
||
<view class="left" @click="changeBatchType(item.product_id)">
|
||
<template v-if="item.is_batch == 1">
|
||
<view v-if="(batch_list[item.product_id] || 0) == 1" class="buy-unit">按{{ item.batch_unit }}购买</view>
|
||
<view v-else class="buy-unit">按{{ item.unit_name }}购买</view>
|
||
<text class="iconfont icon-jiantou_shangxiaqiehuan_o"></text>
|
||
</template>
|
||
</view>
|
||
<view class="right">
|
||
<text v-if="!buyList[item.product_id]" @click="buyFlowAddBuyNum('add', item)" class="iconfont icon-gengduozhankai1"></text>
|
||
<view v-else class="buy-num">
|
||
<view class="num-change">
|
||
<text class="iconfont icon-shangpinshuliang-jian" @click="buyFlowAddBuyNum('reduce', item)"></text>
|
||
<input
|
||
:value="buyList[item.product_id] ? buyList[item.product_id].total_num : 0"
|
||
class="num-input"
|
||
type='number'
|
||
@click="buyFlowAddBuyNum('click', item)"
|
||
:disabled="Object.values(item.attrValue).length > 1"
|
||
@input="buyFlowInputBuyNum($event, item.attrValue[0], item)"
|
||
/>
|
||
<text class="iconfont icon-shangpinshuliang-jia" @click="buyFlowAddBuyNum('add', item)" ></text>
|
||
</view>
|
||
<view v-if="(batch_list[item.product_id] || 0) == 1" class="unit">
|
||
{{ item.batch_unit }} 共{{ (buyList[item.product_id].total_num || 0) * (buyList[item.product_id].batch_num || 1) }}{{ item.unit_name }}
|
||
</view>
|
||
<view v-else class="unit">{{ item.unit_name }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--结算按钮-->
|
||
<view class="settlement">
|
||
<view class="left">
|
||
<text class="iconfont icon-gouwuche-mendian">
|
||
<text class="total-num" v-if="totalNum > 0">{{ totalNum > 99 ? '99+' : totalNum }}</text>
|
||
</text>
|
||
<view class="total">
|
||
合计：<text class="total-price">¥{{ totalPrice }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="settlement-btn" @click="settlementCart" v-if="Object.values(buyList).length > 0">立即结算</view>
|
||
<view class="settlement-btn not-btn" v-else>立即结算</view>
|
||
</view>
|
||
</view>
|
||
<!-- 授权登录 -->
|
||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
|
||
<!-- 多规格商品选择弹框 -->
|
||
<uni-popup ref="moreSpecsSelect" type="bottom" :is-mask-click="false">
|
||
<view class="more-spec-content">
|
||
<!--顶部商品信息-->
|
||
<view class="goods-info">
|
||
<view class="image">
|
||
<image class="goods-image" :src="currentGoods.selected.image"></image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="title">{{ currentGoods.store_name }}</view>
|
||
<view class="price">
|
||
<text class="price-icon">¥</text>
|
||
{{ currentGoods.selected.price || '' }}
|
||
</view>
|
||
<view v-if="(batch_list[currentGoods.product_id] || 0) == 1" class="stock">
|
||
库存：{{ Math.floor((currentGoods.selected.stock || 0) / currentGoods.batch_num) }}
|
||
</view>
|
||
<view v-else class="stock">库存：{{ currentGoods.selected.stock || '' }}</view>
|
||
</view>
|
||
<text class="iconfont icon-cha2 close-btn" @click="closeMoreSpecsSelect"></text>
|
||
</view>
|
||
<!--规格-->
|
||
<view class="goods-spec">
|
||
<view class="spec-block" v-for="(item,index) in currentGoods.attr" :key="index">
|
||
<view class="spec-title">{{ item.attr_name || '' }}</view>
|
||
<view class="spec-list">
|
||
<view
|
||
v-for="(specItem,specIndex) in item.attr_values"
|
||
:key="specIndex"
|
||
:class="['spec-list-tag',{'spec-list-tag-active': Object.values(currentGoods.selected_spec).includes(specItem)}]"
|
||
@click="buyFlowChangeSpec(item.attr_name, specItem)"
|
||
>
|
||
{{ specItem || '' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--数量变更-->
|
||
<view class="bottom-content">
|
||
<!--操作按钮-->
|
||
<view class="num-change">
|
||
<text class="iconfont icon-shangpinshuliang-jian" @click="buyFlowChangeNum('reduce', currentGoods.selected)"></text>
|
||
<input
|
||
:value="specInputValue"
|
||
class="num-input"
|
||
type='number'
|
||
@input="buyFlowInputBuyNum($event, currentGoods.selected, currentGoods)"
|
||
/>
|
||
<text class="iconfont icon-shangpinshuliang-jia" @click="buyFlowChangeNum('add', currentGoods.selected)"></text>
|
||
</view>
|
||
<!--单位-->
|
||
<view v-if="(batch_list[currentGoods.product_id] || 0) == 1" class="unit">
|
||
{{ currentGoods.batch_unit }} 共{{ (specInputValue) * (buyList[currentGoods.product_id].batch_num || 1) }}{{ currentGoods.unit_name }}
|
||
</view>
|
||
<view v-else class="unit">{{ currentGoods.unit_name }}</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters} from "vuex";
|
||
import authorize from '@/components/Authorize';
|
||
import {supplierGoodsList, withGoodsCartAdd} from "@/api/supplier";
|
||
import {withGoodsCartDel, withGoodsCartIds, withGoodsCartList, withGoodsChangeNum} from "../../../api/supplier";
|
||
|
||
export default {
|
||
name: 'business',
|
||
components: {
|
||
authorize,
|
||
},
|
||
computed: {
|
||
specInputValue(){
|
||
let selected = this.currentGoods.selected || {};
|
||
let productId = selected.product_id || 0;
|
||
let unique = selected.unique || '';
|
||
let good = this.buyList[productId] || {};
|
||
let specs = good.specs || {};
|
||
let spec = specs[unique] || {};
|
||
|
||
return spec.cart_num || 0;
|
||
},
|
||
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopIsLogin', 'shopMerId'])
|
||
},
|
||
data() {
|
||
return {
|
||
// 登录相关
|
||
isAuto: false, //没有授权的不会自动授权
|
||
isShowAuth: false,//是否隐藏授权
|
||
// 商品列表相关
|
||
list: [],
|
||
search:{
|
||
page: 1,
|
||
store_name: '',
|
||
},
|
||
// 购买选中商品相关
|
||
totalNum: 0,
|
||
totalPrice: 0.00,
|
||
buyList: {},
|
||
batch_list: {},
|
||
currentGoods: {}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 判断：是否登录
|
||
if (!this.isLogin) {
|
||
this.isAuto = true;
|
||
this.isShowAuth = true;// 未登录 授权登录
|
||
}
|
||
else this.init();// 已登录 获取信息
|
||
},
|
||
watch: {
|
||
// 多规格 选中规格改变
|
||
'currentGoods.selected_spec': {
|
||
handler() {
|
||
let good = Object.assign({}, this.currentGoods)
|
||
if(good.selected_spec){
|
||
let defaultName = Object.values(good.selected_spec).join(',');
|
||
// 赋值
|
||
this.$set(this.currentGoods, 'selected', good.attrValue[defaultName] || {});
|
||
}else{
|
||
this.$set(this.currentGoods, 'selected', {});
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
// 购买信息列表变更
|
||
'buyList': {
|
||
handler() {
|
||
this.BuyFlowComputeTotal();
|
||
},
|
||
deep: true
|
||
},
|
||
// 购买类型列表信息变更
|
||
'batch_list':{
|
||
handler() {
|
||
this.BuyFlowComputeTotal();
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
// 授权回调
|
||
onLoadFun() {
|
||
if(this.isLogin){
|
||
this.isShowAuth = false;
|
||
this.init();
|
||
}
|
||
},
|
||
// 授权关闭
|
||
authClose(e) {
|
||
this.isShowAuth = e
|
||
},
|
||
// 授权成功 初始化
|
||
init () {
|
||
// 判断：商户是否登录
|
||
if(!this.shopIsLogin){
|
||
uni.showModal({
|
||
title: '未登录',
|
||
content: '请先登录酒道馆账号!',
|
||
confirmText: '去登录',
|
||
cancelText: '返回首页',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url:'/pages/admin/business/index?is_sys=2'
|
||
})
|
||
}else{
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
return false;
|
||
}
|
||
// 商户已经登录 进行后续操作
|
||
this.getGoodsList();
|
||
// 获取购物车列表
|
||
this.cartGetList();
|
||
},
|
||
// 供应商商品列表
|
||
getGoodsList(page = 0) {
|
||
let _this = this;
|
||
let params = _this.search;
|
||
if(Number(page) > 0) params.page = page;
|
||
// 数据查询
|
||
supplierGoodsList(params).then(res => {
|
||
let oldList = Object.assign({}, _this.list);
|
||
// 判断：如果是第一页 则数据重置
|
||
if(params.page == 1) oldList = [];
|
||
// 数据合并
|
||
let list = res.data.list || {};
|
||
if (Object.values(list).length > 0) {
|
||
oldList = _this.$util.SplitArray(list, oldList);
|
||
_this.search.page++;
|
||
}
|
||
|
||
_this.$set(_this, 'list', oldList);
|
||
}).catch(err => {
|
||
this.$util.Tips({title: err});
|
||
});
|
||
},
|
||
// 输入购买数量
|
||
buyFlowInputBuyNum(event, spec, currentGoods){
|
||
// 指定数量
|
||
spec.input_num = Number(event.detail.value || event.target.value);
|
||
this.currentGoods = currentGoods;
|
||
|
||
this.buyFlowChangeNum('input', spec);
|
||
},
|
||
// 购买流程 - 添加购买数量
|
||
buyFlowAddBuyNum(type, item){
|
||
let isMoreSpecs = Object.values(item.attrValue).length || 0;
|
||
let good = Object.assign({}, item);
|
||
good.is_batch = this.batch_list[good.product_id] || 0;
|
||
if(Number(isMoreSpecs) > 1){
|
||
// 多规格 初始化选中项
|
||
let selected_spec = {};
|
||
Object.values(good.attr).forEach((val,index) => {
|
||
selected_spec[val.attr_name] = (val.attr_values ? val.attr_values[0] : '');
|
||
})
|
||
// 赋值
|
||
good.selected_spec = selected_spec;
|
||
this.currentGoods = Object.assign({}, good);
|
||
this.$refs.moreSpecsSelect.open('bottom');
|
||
}
|
||
else if(['add', 'reduce', 'input'].includes(type)){
|
||
// 单规格
|
||
good.selected_spec = {};
|
||
this.currentGoods = Object.assign({}, good);
|
||
let spec = item.attrValue[0];
|
||
this.buyFlowChangeNum(type, spec)
|
||
}
|
||
},
|
||
// 购买流程 - 数量改变(添加 || 减少)
|
||
buyFlowChangeNum(type, spec){
|
||
let isBatch = this.batch_list[spec.product_id] || 0;// 0=单个购买，1=批量购买
|
||
let currentProduct = Object.assign({}, this.buyList[spec.product_id] || {});
|
||
if(Object.values(currentProduct).length > 0){
|
||
// 商品已经存在
|
||
let currentSpec = currentProduct.specs[spec.unique] || {};
|
||
if(Object.values(currentSpec).length <= 0) {
|
||
if(type === 'reduce') return false;
|
||
spec.cart_num = 0;
|
||
currentSpec = spec;
|
||
}
|
||
// 记录变更前数量
|
||
let oldNum = currentSpec.cart_num || 0;
|
||
// 数量变更
|
||
if(type === 'add') currentSpec.cart_num += 1;
|
||
else if(type === 'reduce') currentSpec.cart_num -= 1;
|
||
else if(type === 'input') currentSpec.cart_num = spec.input_num || 0;
|
||
// 判断：是否超出库存
|
||
let stock = currentSpec.stock || 0;
|
||
if(isBatch == 1) stock = Math.floor(stock / (this.currentGoods.batch_num || ''));//批量购买时 库存需要除以每批数量
|
||
if(Number(stock) < Number(currentSpec.cart_num)) currentSpec.cart_num = stock;
|
||
// 计算变更数量
|
||
let currentNum = currentSpec.cart_num || 0;
|
||
let changeNum = Number(oldNum) - Number(currentNum);
|
||
// 判断：购买数量是否已经为0 是则删除
|
||
if(currentSpec.cart_num <= 0) {
|
||
this.cartDel(currentSpec);
|
||
delete currentProduct.specs[spec.unique];
|
||
} else {
|
||
currentProduct.specs[spec.unique] = currentSpec;
|
||
// 增加购物车信息 存在即修改
|
||
currentSpec.batch_num = this.currentGoods.batch_num || '';
|
||
currentSpec.is_batch = this.currentGoods.is_batch || 0;
|
||
this.cartSubmitEdit(currentSpec);
|
||
}
|
||
// 判断：当前商品不存在任何购买规格
|
||
if(Object.values(currentProduct.specs).length <= 0){
|
||
this.$set(this.buyList, spec.product_id, {});
|
||
delete this.buyList[spec.product_id];
|
||
}else{
|
||
currentProduct.total_num -= changeNum;
|
||
|
||
this.$set(this.buyList, spec.product_id, currentProduct);
|
||
}
|
||
}
|
||
else{
|
||
// 商品不存在
|
||
if(type === 'add') spec.cart_num = 1;
|
||
else if(type === 'reduce') return false;
|
||
else if(type === 'input') spec.cart_num = spec.input_num || 0;
|
||
// 判断：是否超出库存
|
||
let stock = spec.stock || 0;
|
||
if(isBatch == 1) stock = Math.floor(stock / (this.currentGoods.batch_num || ''));//批量购买时 库存需要除以每批数量
|
||
if(Number(stock) < Number(spec.cart_num)) spec.cart_num = stock;
|
||
// 初始化
|
||
this.$set(this.buyList, spec.product_id, {
|
||
// 购买单位类型
|
||
is_batch: this.currentGoods.is_batch,// 是否支持按照批次购买
|
||
batch_num: this.currentGoods.batch_num,// 一批等于多少件
|
||
batch_unit: this.currentGoods.batch_unit,// 一批次的单位
|
||
// 其他信息
|
||
product_id: spec.product_id,
|
||
total_num: spec.cart_num,
|
||
store_name: this.currentGoods.store_name,
|
||
specs: {
|
||
[spec.unique]: spec,
|
||
},
|
||
});
|
||
|
||
// 增加购物车信息
|
||
spec.batch_num = this.currentGoods.batch_num || '';
|
||
spec.is_batch = this.currentGoods.is_batch || 0;
|
||
this.cartSubmitEdit(spec);
|
||
}
|
||
|
||
this.$forceUpdate();
|
||
},
|
||
// 购买流程 - 多规格弹框关闭
|
||
closeMoreSpecsSelect(){
|
||
this.$refs.moreSpecsSelect.close();
|
||
},
|
||
// 购买流程 - 多规格切换
|
||
buyFlowChangeSpec(attrName, specItem){
|
||
this.currentGoods.selected_spec[attrName] = specItem;
|
||
},
|
||
// 购买流程 - 切换购买单位
|
||
changeBatchType(productId){
|
||
// 获取切换后购买单位
|
||
let currentBatchType = this.batch_list[productId] || 0;
|
||
let negation = currentBatchType == 0 ? 1 : 0;
|
||
// 切换商品购买数量
|
||
let currentProduct = Object.assign({}, this.buyList[productId] || {});
|
||
this.$set(this.batch_list, productId, negation);
|
||
if(Object.values(currentProduct).length > 0){
|
||
let specs = currentProduct.specs || {};
|
||
let totalNum = 0;
|
||
Object.values(specs).forEach(item => {
|
||
let stock = item.stock || 0;
|
||
let cartNum = 0;
|
||
if(negation == 1){
|
||
// 批量购买 当前购买数量除以每批的数量
|
||
cartNum = Math.floor(item.cart_num / currentProduct.batch_num);
|
||
stock = Math.floor(stock / currentProduct.batch_num);
|
||
}else{
|
||
// 单个购买 当前购买数量乘以每批的数量
|
||
cartNum = Math.floor(item.cart_num * currentProduct.batch_num);
|
||
}
|
||
// 判断：是否超出库存
|
||
cartNum = cartNum <= 0 ? 1 : cartNum;
|
||
if(stock < cartNum) cartNum = stock;
|
||
totalNum += cartNum;
|
||
currentProduct.specs[item.unique].cart_num = cartNum || 1;
|
||
// 修改购物车信息
|
||
let spec = currentProduct.specs[item.unique] || {};
|
||
spec.batch_num = currentProduct.batch_num || '';
|
||
spec.is_batch = negation || 0;
|
||
this.cartSubmitEdit(spec);
|
||
})
|
||
currentProduct.total_num = totalNum;
|
||
this.$set(this.buyList, productId, currentProduct);
|
||
}
|
||
// 赋值
|
||
this.$forceUpdate();
|
||
},
|
||
// 购买流程 - 计算总价值和总数量
|
||
BuyFlowComputeTotal(){
|
||
let totalNum = 0;
|
||
let totalPrice = 0.00;
|
||
Object.values(this.buyList).forEach(item => {
|
||
totalNum += item.total_num;
|
||
Object.values(item.specs).forEach(value => {
|
||
let price = value.price * value.cart_num;
|
||
let currentBatchType = this.batch_list[value.product_id] || 0;
|
||
// 判断：如果是批量购买 当前价格需要乘以每批的数量
|
||
if(currentBatchType == 1) price = price * item.batch_num;
|
||
|
||
totalPrice += price;
|
||
})
|
||
})
|
||
// 赋值
|
||
this.totalNum = totalNum.toFixed(0);
|
||
this.totalPrice = totalPrice.toFixed(2);
|
||
},
|
||
// 购物车 - 获取已存在列表
|
||
cartGetList(){
|
||
let _this = this;
|
||
// 数据查询
|
||
withGoodsCartList().then(res => {
|
||
if(res.status == 200){
|
||
let data = res.data || {};
|
||
let buyList = {};
|
||
let batchList = {};
|
||
Object.values(data).forEach( item => {
|
||
// 获取规格信息
|
||
let spec = item.productAttr || {};
|
||
spec.cart_num = item.cart_num || 0;
|
||
// 赋值
|
||
let good = buyList[item.product_id] || {};
|
||
if(Object.values(good).length > 0){
|
||
// 商品已经存在
|
||
buyList[item.product_id].specs[item.product_attr_unique] = spec;
|
||
buyList[item.product_id].total_num += item.cart_num;
|
||
}else{
|
||
// 商品不存在
|
||
buyList[item.product_id] = {
|
||
// 购买单位类型
|
||
is_batch: item.is_batch,// 是否支持按照批次购买
|
||
batch_num: item.batch_num,// 一批等于多少件
|
||
unit_name: item.product.unit_name,// 单件单位
|
||
batch_unit: item.product.batch_unit,// 一批次的单位
|
||
// 其他信息
|
||
product_id: item.product_id,
|
||
total_num: item.cart_num,
|
||
store_name: item.product.store_name,
|
||
specs: {
|
||
[item.product_attr_unique]: spec,
|
||
},
|
||
};
|
||
}
|
||
// 购买类型
|
||
batchList[item.product_id] = item.is_batch || 0;
|
||
});
|
||
|
||
this.buyList = Object.assign({}, buyList);
|
||
this.batch_list = Object.assign({}, batchList);
|
||
}
|
||
}).catch(err => {
|
||
_this.$util.Tips({title: err});
|
||
});
|
||
},
|
||
// 购物车 - 提交购物车
|
||
cartSubmitEdit(spec){
|
||
let _this = this;
|
||
let params = {
|
||
cart_num: spec.cart_num,
|
||
product_attr_unique: spec.unique,
|
||
product_id: spec.product_id,
|
||
// 购买单位类型
|
||
is_batch: spec.is_batch || 0,// 0=单个购买，1=批量购买
|
||
batch_num: spec.batch_num || '',// 一批等于多少件
|
||
};
|
||
// 数据查询
|
||
withGoodsCartAdd(params).then(res => {
|
||
// console.log(res)
|
||
}).catch(err => {
|
||
_this.cartGetList();
|
||
this.$util.Tips({title: err});
|
||
});
|
||
},
|
||
// 购物车 - 删除购物车商品信息
|
||
cartDel(spec){
|
||
let _this = this;
|
||
let params = {
|
||
product_attr_unique: spec.unique,
|
||
product_id: spec.product_id,
|
||
};
|
||
// 数据查询
|
||
withGoodsCartDel(params).then(res => {
|
||
// console.log(res)
|
||
}).catch(err => {
|
||
_this.cartGetList();
|
||
this.$util.Tips({title: err});
|
||
});
|
||
},
|
||
// 立即结算
|
||
settlementCart(){
|
||
let _this = this;
|
||
// 数据查询
|
||
withGoodsCartIds().then(res => {
|
||
if(res.status == 200){
|
||
let data = res.data || {};
|
||
if(Object.values(data).length <= 0){
|
||
_this.$util.Tips({title: '请选择商品！'});
|
||
return false;
|
||
}
|
||
// 去结算
|
||
uni.navigateTo({
|
||
url: '/pages/users/order_confirm/index?is_with_goods=1&cartId=' + data.join(',')
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
_this.$util.Tips({title: err});
|
||
});
|
||
},
|
||
// 查看进货记录
|
||
withGoodsRecord(){
|
||
uni.navigateTo({
|
||
url: '/pages/users/order_list/index?is_with_goods=1'
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
// 滚动到底部
|
||
onReachBottom() {
|
||
this.getGoodsList();
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page-content{
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #f6f6f6;
|
||
// 主要内容
|
||
.main-content{
|
||
padding-bottom: 150rpx;
|
||
// 搜索
|
||
.search-content{
|
||
background: #F9F0DA;
|
||
.search-main{
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: 15rpx;
|
||
.search-input{
|
||
border-top-left-radius: 10rpx;
|
||
border-bottom-left-radius: 10rpx;
|
||
width: calc(100% - 110rpx);
|
||
padding: 0 20rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
border: 4rpx solid #c5464a;
|
||
background: transparent;
|
||
outline: none;
|
||
}
|
||
.search-btn{
|
||
background: #c5464a;
|
||
border-top-right-radius: 10rpx;
|
||
border-bottom-right-radius: 10rpx;
|
||
width: 110rpx;
|
||
height: calc(60rpx + (4rpx * 2));
|
||
line-height: calc(60rpx + (4rpx * 2));
|
||
font-size: 26rpx;
|
||
color: #F9F0DA;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
// 提示
|
||
.top-tips{
|
||
background: #F9F0DA;
|
||
color: #813d40;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
position: relative;
|
||
.record-btn{
|
||
position: absolute;
|
||
top: calc((80rpx - 40rpx) / 2);
|
||
right: 0;
|
||
font-size: 26rpx;
|
||
padding: 0 15rpx;
|
||
border: 2rpx solid #813d40;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 6rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
// 商品列表
|
||
.list{
|
||
--item-padding-: 30rpx;
|
||
.item:not(:last-child){
|
||
margin-bottom: var(--item-padding-);
|
||
}
|
||
.item{
|
||
padding: var(--item-padding-);
|
||
background: #FFFFFF;
|
||
.goods{
|
||
width: 100%;
|
||
padding-bottom: var(--item-padding-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.image{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
.goods-image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.info{
|
||
width: calc(100% - 120rpx);
|
||
height: 120rpx;
|
||
padding-left: 20rpx;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-evenly;
|
||
align-items: flex-start;
|
||
.title{
|
||
width: 100%;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.price{
|
||
font-size: 26rpx;
|
||
color: #d84b40;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.buy{
|
||
padding-top: var(--item-padding-);
|
||
border-top: 2rpx solid #F6F6F6;
|
||
width: 100%;
|
||
height: 75rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.left{
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.buy-unit{
|
||
font-size: 26rpx;
|
||
}
|
||
.icon-jiantou_shangxiaqiehuan_o{
|
||
transform: rotate(90deg);
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
.right{
|
||
.icon-gengduozhankai1{
|
||
font-size: 42rpx;
|
||
}
|
||
.buy-num{
|
||
--border-color-: #f2f2f2;
|
||
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.num-change{
|
||
border: 2rpx solid var(--border-color-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
border-radius: 100rpx;
|
||
padding: 0 15rpx;
|
||
height: 45rpx;
|
||
.iconfont{
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
.icon-shangpinshuliang-jian{
|
||
padding-right: 15rpx;
|
||
}
|
||
.icon-shangpinshuliang-jia{
|
||
padding-left: 15rpx;
|
||
}
|
||
.num-input{
|
||
border-left: 2rpx solid var(--border-color-);
|
||
border-right: 2rpx solid var(--border-color-);
|
||
width: 100rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.unit{
|
||
font-size: 26rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 结算按钮
|
||
.settlement{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
padding: 20rpx 20rpx 50rpx 20rpx;
|
||
box-shadow: 0 0 10px 0 #f3f3f3;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.left{
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.icon-gouwuche-mendian{
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
border: 2rpx solid #000000;
|
||
border-radius: 50%;
|
||
padding: 15rpx;
|
||
position: relative;
|
||
.total-num{
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
font-size: 20rpx;
|
||
background: #ef2c1c;
|
||
color: #ffffff;
|
||
border-radius: 50%;
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
text-align: center;
|
||
line-height: 35rpx;
|
||
}
|
||
}
|
||
.total{
|
||
font-size: 30rpx;
|
||
.total-price{
|
||
font-weight: bold;
|
||
color: #ef2c1c;
|
||
}
|
||
}
|
||
}
|
||
.settlement-btn{
|
||
background: #ef2c1c;
|
||
color: #FFFFFF;
|
||
height: 55rpx;
|
||
line-height: 55rpx;
|
||
width: 200rpx;
|
||
text-align: center;
|
||
border-radius: 100rpx;
|
||
}
|
||
.not-btn{
|
||
background-color: #909399!important;
|
||
border-color: #909399!important;
|
||
color: #fff!important;
|
||
}
|
||
}
|
||
}
|
||
// 多规格选择弹框
|
||
.more-spec-content{
|
||
height: 80vh;
|
||
width: 100vw;
|
||
border-top-left-radius: 30rpx;
|
||
border-top-right-radius: 30rpx;
|
||
background: #f6f6f6;
|
||
padding: 20rpx;
|
||
|
||
.goods-info{
|
||
width: 100%;
|
||
padding-bottom: 20rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
position: relative;
|
||
.image{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
.goods-image{
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
}
|
||
.info{
|
||
width: calc(100% - (120rpx + 60rpx));
|
||
padding-left: 15rpx;
|
||
.title{
|
||
font-size: 32rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
.price{
|
||
.price-icon{
|
||
font-size: 20rpx;
|
||
}
|
||
color: #d14e42;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
height: 40rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
.stock{
|
||
color: #a8a8a8;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
.close-btn{
|
||
width: 60rpx;
|
||
text-align: right;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
|
||
.goods-spec{
|
||
max-height: calc(100% - 70rpx - 30rpx - 120rpx - 20rpx);
|
||
overflow: auto;
|
||
.spec-block{
|
||
.spec-title{
|
||
width: 100%;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
color: #a8a8a8;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
.spec-list{
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.spec-list-tag{
|
||
border: 2rpx solid #a6a6a6;
|
||
height: 45rpx;
|
||
line-height: 45rpx;
|
||
padding: 0 15rpx;
|
||
font-size: 26rpx;
|
||
margin-right: 15rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
.spec-list-tag-active{
|
||
background: #e93423;
|
||
color: #f3f3f3;
|
||
border-color: #e93423;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-content{
|
||
--border-color-: #000000;
|
||
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
margin-top: 30rpx;
|
||
.num-change{
|
||
border: 2rpx solid var(--border-color-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
border-radius: 100rpx;
|
||
padding: 0 15rpx;
|
||
height: 70rpx;
|
||
float: right;
|
||
|
||
.iconfont{
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
width: 70rpx;
|
||
}
|
||
.icon-shangpinshuliang-jian{
|
||
padding-right: 15rpx;
|
||
}
|
||
.icon-shangpinshuliang-jia{
|
||
padding-left: 15rpx;
|
||
}
|
||
.num-input{
|
||
border-left: 2rpx solid var(--border-color-);
|
||
border-right: 2rpx solid var(--border-color-);
|
||
width: 150rpx;
|
||
height: 70rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.unit{
|
||
font-size: 26rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|