添加:立即进货 - 商品选择、多规格商品选择、数量变更及总数量和中金额计算

This commit is contained in:
wuhui_zzw 2024-02-29 20:06:13 +08:00
parent 975ae30432
commit 7c4c64edaa
4 changed files with 435 additions and 35 deletions

View File

@ -169,7 +169,7 @@ export default {
return list;
},
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopToken', 'shopIsLogin', 'shopMerId'])
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopIsLogin', 'shopMerId'])
},
onLoad: function(options) {
this.is_sys = options.is_sys;
@ -177,22 +177,13 @@ export default {
uni.setNavigationBarTitle({
title: this.is_sys == 1 ? '平台管理' : (this.is_sys == 2 ? '酒道馆管理' : '商家管理')
})
console.log("商户登录相关")
console.log({
shopIsLogin: this.shopIsLogin,
shopToken: this.shopToken
})
//
if(this.is_sys == 1 || this.shopIsLogin){
this.getStoreList({is_sys: this.is_sys});
this.getStoreList({is_sys: this.is_sys, appoint_mer_id: this.shopMerId || ''});
}
},
methods: {
getStoreList: function(data) {
data.appoint_mer_id = this.shopMerId || '';
this.$nextTick(() => {
this.$refs.shopList.getStoreList(data)
});
@ -323,7 +314,7 @@ export default {
'time': data.exp,
'shop_mer_id': data.mer_id,
});
this.getStoreList({is_sys: this.is_sys});
this.getStoreList({is_sys: this.is_sys, appoint_mer_id: data.mer_id || ''});
}
}).catch(err => {
this.$util.Tips({ title: err });

View File

@ -6,7 +6,7 @@
<view class="search-content">
<view class="search-main">
<input class="search-input" type="text" placeholder="请输入商品名称...">
<view class="search-btn">搜索</view>
<view class="search-btn" @click="getGoodsList(1)">搜索</view>
</view>
</view>
<!--顶部提示-->
@ -24,22 +24,32 @@
</view>
</view>
<view class="buy">
<view class="left">
<view class="left" @click="changeBatchType(item.product_id)">
<template v-if="item.is_batch == 1">
<view v-if="index / 2 == 0" class="buy-unit">{{ item.batch_unit }}购买</view>
<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="index / 2 == 0" class="iconfont icon-gengduozhankai1"></text>
<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"></text>
<input class="num-input" type='number' />
<text class="iconfont icon-shangpinshuliang-jia"></text>
<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])"
/>
<text class="iconfont icon-shangpinshuliang-jia" @click="buyFlowAddBuyNum('add', item)" ></text>
</view>
<view class="unit"> 共12瓶</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>
@ -49,10 +59,10 @@
<view class="settlement">
<view class="left">
<text class="iconfont icon-gouwuche-mendian">
<text class="total-num">99+</text>
<text class="total-num" v-if="totalNum > 0">{{ totalNum > 99 ? '99+' : totalNum }}</text>
</text>
<view class="total">
合计<text class="total-price">¥54288.00</text>
合计<text class="total-price">¥{{ totalPrice }}</text>
</view>
</view>
<view class="settlement-btn">立即结算</view>
@ -60,6 +70,69 @@
</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="buyList[currentGoods.selected.product_id] ? (buyList[currentGoods.selected.product_id].specs ? (buyList[currentGoods.selected.product_id].specs[currentGoods.selected.unique].cart_num || 0) : 0) : 0"
class="num-input"
type='number'
@input="buyFlowInputBuyNum($event, currentGoods.selected)"
/>
<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 }} {{ (buyList[currentGoods.selected.product_id] ? (buyList[currentGoods.selected.product_id].specs ? (buyList[currentGoods.selected.product_id].specs[currentGoods.selected.unique].cart_num || 0) : 0) : 0) * (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>
@ -75,10 +148,13 @@ export default {
authorize,
},
computed: {
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor','shopToken', 'shopIsLogin', 'shopMerId'])
},
data() {
return {
//
isAuto: false, //
isShowAuth: false,//
//
list: [],
search:{
@ -86,20 +162,55 @@ export default {
store_name: '',
},
//
buy_list: {},
totalNum: 0,
totalPrice: 0.00,
buyList: {},
batch_list: {},
currentGoods: {},
}
},
onLoad(options) {
//
if (!this.isLogin) this.isAuto = this.isShowAuth = true;//
if (!this.isLogin) {
this.isAuto = true;
this.isShowAuth = true;//
}
else this.init();//
},
//
onReachBottom() {
this.getGoodsList();
watch: {
//
'currentGoods.selected_spec': {
handler() {
let good = Object.assign({}, this.currentGoods)
let defaultName = Object.values(good.selected_spec).join(',');
//
this.currentGoods.selected = good.attrValue[defaultName] || {};
},
deep: true
},
//
'buyList': {
handler() {
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;
this.totalPrice = totalPrice;
},
deep: true
},
},
methods: {
//
@ -115,6 +226,28 @@ export default {
},
//
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();
},
//
@ -134,10 +267,141 @@ export default {
this.$util.Tips({title: err});
});
},
//
buyFlowInputBuyNum(event, spec){
//
spec.input_num = Number(event.detail.value || event.target.value);
this.buyFlowChangeNum('input', spec);
},
// -
buyFlowAddBuyNum(type, item){
let isMoreSpecs = Object.values(item.attrValue).length || 0;
let good = Object.assign({}, item);
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 currentProduct = 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 currentNum = currentSpec.cart_num || 0;
let changeNum = Number(oldNum) - Number(currentNum);
// 0
if(currentSpec.cart_num <= 0) delete currentProduct.specs[spec.unique];
else currentProduct.specs[spec.unique] = 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;
//
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,
},
});
}
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;
this.batch_list[productId] = currentBatchType == 0 ? 1 : 0;
this.$forceUpdate();
},
// -
cartGetList(){},
// -
cartGetCount(){},
// -
cartSubmitEdit(){},
}
// cart_num: 10
// is_new: 0
// product_attr_unique: "598aa5ec4390"
// product_id: "247"
// product_type: 0
// spread_id: ""
//
//
//
//
//
// cart_num: 8
// is_new: 0
// product_attr_unique: "53cd849c89f0"
// product_id: "248"
// product_type: 0
// spread_id: ""
},
//
onReachBottom() {
this.getGoodsList();
},
}
</script>
@ -146,7 +410,7 @@ export default {
width: 100vw;
min-height: 100vh;
background-color: #f6f6f6;
//
.main-content{
padding-bottom: 150rpx;
//
@ -378,5 +642,150 @@ export default {
}
}
}
//
.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>

View File

@ -14,7 +14,7 @@ export default {
keyColor: state => state.app.keyColor,
// 商户登录相关
shopToken: state => state.app.shopToken,
shopIsLogin: state => !!state.app.shopToken,
shopIsLogin: state => !!state.app.shopToken && state.app.shopToken !== 'null',
shopMerId: state => state.app.shopMerId,
};
// export default {

View File

@ -34,9 +34,9 @@ const mutations = {
uni.removeStorageSync('auth_token');
},
SHOP_LOGIN(state, opt) {
state.shopToken = opt.token;
Cache.set('SHOP_LOGIN_STATUS_TOKEN', opt.token, opt.time);
Cache.set('SHOP_MER_ID', opt.shop_mer_id);
state.shopToken = opt.token;
},
SETUID(state,val){
state.uid = val;