shop-applet/pages/product/updateStock/updateStock.vue

338 lines
7.5 KiB
Vue
Raw Normal View History

2023-11-17 19:19:24 +08:00
<template>
2024-04-23 08:45:17 +08:00
<view class="content">
<view class="head">
<view class="" style="width: 210rpx;height: 210rpx;position: relative;">
<u--image :src="short.attrValue[0].image||short.image||defualtImg" width='210rpx' height='210rpx'
duration="450"></u--image>
<view class="preview" @click="preViewImg(short.attrValue[0].image||short.image||defualtImg)">
点击预览
</view>
</view>
<view class="right">
<view class="">
<view class="" style="font-size: 32rpx;color: #444444;">
打扫房间好看
</view>
<view class="" style="font-size: 24rpx;color: #989898;margin-top: 10rpx;">
库存 100
</view>
</view>
<view class="" style="color: #FC452F;font-size: 24rpx;">
<text style="font-size: 22rpx;"></text><text>10.00</text><text style="color: #828282;">/</text>
</view>
</view>
</view>
2024-04-23 18:01:32 +08:00
<view class="attr" v-for="(item,index) in short.attrValue" :key="index">
2024-04-23 08:45:17 +08:00
<view class="attr-tit">
2024-04-23 18:01:32 +08:00
{{item.sku}}
2024-04-23 08:45:17 +08:00
</view>
<u-line color="#CECECE" style="margin: 30rpx 0 28rpx 0"></u-line>
<view class="" style="display: flex;justify-content: space-between;font-size: 32rpx;">
<view class="">
商品库存
</view>
<view class="" style="display: flex;align-items: center;color: #FC452F;">
<u--input border="surround" color='#FC452F' inputAlign='right' style='padding: 0;'
2024-04-23 18:01:32 +08:00
v-model="item.stock"></u--input>
2024-04-23 08:45:17 +08:00
</view>
</view>
</view>
2024-04-23 18:01:32 +08:00
<!-- <view class="table">
2024-04-23 08:45:17 +08:00
<u-sticky custom-nav-height="0" bgColor="#fff">
<view class="line th">
<view class="td img">图片</view>
<view class="td sku">规格</view>
<view class="td stock">库存</view>
</view>
</u-sticky>
<view class="line tr" v-for="(item,index) in short.attrValue" :key="index">
<view class="td img">
<image :src="item.image||short.image||defualtImg"></image>
</view>
<view class="td sku">
<block v-if="item.sku">
<view v-for="name in item.sku.split(',')">{{name}}</view>
</block>
<view v-else>{{short.store_name}}</view>
</view>
<view class="td stock">
<input type="number" v-model="item.stock" />
</view>
</view>
2024-04-23 18:01:32 +08:00
</view> -->
2024-04-23 08:45:17 +08:00
<view style="height: 150rpx;"></view>
<!-- <view class="btn-view">
<button class="btn" @click="show=true">确认修改</button>
</view> -->
<view class="submit-btn">
<u-button type="primary" shape="circle" text="确认修改" @click="show=true"></u-button>
</view>
<u-modal :show="show" :closeOnClickOverlay="true" title="提示" content="确定更新库存吗" showCancelButton
@confirm="onUpdate" @cancel="show=false"></u-modal>
</view>
2023-11-17 19:19:24 +08:00
</template>
<script>
2024-04-23 08:45:17 +08:00
import {
getProductDetail,
} from '@/api/store.js';
import {
productDetail,
productUpdateFree
} from "@/api/product.js"
import {
Toast
} from '../../../libs/uniApi';
export default {
data() {
return {
test: '20',
show: false,
defualtImg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/uploads/20230130/00ebcfdf75684f5494c0193075055d1.png',
mer_id: '',
2024-04-23 18:01:32 +08:00
type: "",
2024-04-23 08:45:17 +08:00
short: {
product_id: ''
}
}
},
onLoad(options) {
this.short.product_id = options.product_id;
let userInfo = this.$store.state.app.userInfo;
if (typeof userInfo == 'string') userInfo = JSON.parse(userInfo);
this.mer_id = userInfo.service.mer_id;
this.initInfo();
},
onShow() {},
methods: {
preViewImg(url) {
let that = this
uni.previewImage({
urls: [url],
// longPressActions: {
// itemList: ['发送给朋友', '保存图片', '收藏'],
// success: function(data) {
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
// },
// fail: function(err) {
// console.log(err.errMsg);
// }
// }
});
},
initInfo() {
productDetail(this.mer_id, this.short.product_id).then((res) => {
this.short = res.data;
console.log({
...res.data
});
})
},
onUpdate() {
let obj = {
"attr": this.short.attr,
"attrValue": this.short.attrValue,
"mer_cate_id": this.short.merCateId || [],
"spec_type": this.short.spec_type,
"is_stock": 1
};
// return console.log({...obj},this.short.product_id);
productUpdateFree(this.short.product_id, obj).then(res => {
this.show = false;
this.$nextTick(() => {
Toast('更新成功');
})
2024-04-23 18:01:32 +08:00
uni.redirectTo({
url: `/pages/product/list/index?mer_id=${this.mer_id}&type=6`
2024-04-23 08:45:17 +08:00
})
2024-04-23 18:01:32 +08:00
// uni.navigateBack({
// success: () => {
// let stock = 0;
// this.short.attrValue.forEach(item => {
// stock = stock + parseInt(item.stock);
// })
// uni.$emit('updateStock', {
// product_id: this.short.product_id,
// stock: stock
// })
// }
// })
2024-04-23 08:45:17 +08:00
}).catch(err => {
this.show = false;
this.$util.Tips({
title: err
})
})
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
2023-11-17 19:19:24 +08:00
</script>
<style lang="scss">
2024-04-23 08:45:17 +08:00
.content {
padding: 20rpx 16rpx;
background-color: #F1F1F1;
min-height: 100vh;
.head {
background-color: #fff;
display: flex;
padding: 20rpx;
border-radius: 16rpx;
.right {
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.attr {
width: 690rpx;
margin: 22rpx auto;
box-sizing: border-box;
background-color: white;
padding: 30rpx;
border-radius: 16rpx;
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
.attr-tit {
margin-left: 16rpx;
font-size: 32rpx;
position: relative;
}
.attr-tit::after {
content: '';
position: absolute;
width: 8rpx;
height: 32rpx;
background-color: #40AE36;
border-radius: 4rpx;
left: -16rpx;
top: 10rpx;
}
}
}
.preview {
width: 210rpx;
height: 50rpx;
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
color: white;
text-align: center;
font-size: 24rpx;
line-height: 50rpx;
}
.submit-btn {
position: fixed;
bottom: 50rpx;
width: 670rpx;
}
// old
.table {
background-color: #fff;
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
border-left: 1rpx solid rgba(0, 0, 0, 0.1);
border-right: 1rpx solid rgba(0, 0, 0, 0.1);
font-size: 28rpx;
.line {
display: flex;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
.img {
// width:140rpx;
width: 200rpx;
}
.sku {
flex: 1;
border-left: 1rpx solid rgba(0, 0, 0, 0.1);
border-right: 1rpx solid rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.stock {
width: 200rpx;
input {
width: 100%;
height: 100%;
text-align: center;
color: #F84221;
}
}
}
.th {
height: 70rpx;
line-height: 70rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
}
.tr {
min-height: 140rpx;
.td {
display: flex;
justify-content: center;
align-items: center;
}
.img {
image {
width: 120rpx;
height: 120rpx;
}
}
.sku {
padding: 16rpx 16rpx;
}
}
}
.btn-view {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 130rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
.btn {
background: linear-gradient(180deg, #FF6D20 0%, #F84221 100%);
// background-color: #FF6D20;
height: 100rpx;
line-height: 100rpx;
width: 694rpx;
text-align: center;
border-radius: 100rpx;
color: #fff;
}
}
2023-11-17 19:19:24 +08:00
</style>