glhcp/business/bundle/pages/spec_edit/spec_edit.vue

239 lines
7.8 KiB
Vue
Raw Normal View History

2023-08-10 06:59:52 +00:00
<template>
<view class="goods-detail">
<view class="m-t-20">
<goods-card :data="goodsInfo">
</goods-card>
</view>
<view class="muted xs p-l-20 p-b-20 p-t-20 flex row-between">
{{goodsInfo.spec_type==1?'规格型号(统一规格)':'规格型号(多规格)'}}
<view v-if="goodsInfo.spec_type==2" class="p-r-20" @click="spec_type=!spec_type">{{spec_type?'':''}}</view>
</view>
<view class="primary flex p-b-20" v-show="spec_type">
<view class="m-l-20" @click="openSpecEditFunc('price')"></view>
<view class="m-l-20" @click="openSpecEditFunc('market_price')"></view>
<view class="m-l-20" @click="openSpecEditFunc('chengben_price')"></view>
<view class="m-l-20" @click="openSpecEditFunc('stock')"></view>
</view>
<block v-for="(item, index) in goodsInfo.goods_item" :key="index">
<view class="m-b-20 p-t-20 bg-white">
<view class="m-b-10 primary nr title">{{item.spec_value_str}}</view>
<view class="item bb">
<view>价格: </view>
<view class="flex row-between">
<input type="text" placeholder="请输入价格" v-model="item.price" />
</view>
</view>
<view class="item bb">
<view>市场价:</view>
<view class="flex row-between">
<input type="text" placeholder="请输入市场价" v-model="item.market_price" />
</view>
</view>
<view class="item bb">
<view>成本价:</view>
<view class="flex row-between">
<input type="text" placeholder="请输入成本价" v-model="item.chengben_price" />
</view>
</view>
<view class="item bb">
<view>库存:</view>
<view class="flex row-between">
<input type="text" placeholder="请输入库存" v-model="item.stock" />
</view>
</view>
</view>
</block>
<view class="footer bg-white flex row-between fixed">
<button class="btn br60 md white" size="md" hover-class="none" @click="onSubmit">
确认
</button>
</view>
<modal title="批量设置" height="200rpx" v-model="flag" @confirm="specEditFunc(action)">
<template v-if="action == 'price'">
<view class="black nr flex" style="height: 200rpx;">
价格 <input type="text" class="input" v-model="price" />
</view>
</template>
<template v-if="action == 'market_price'">
<view class="black nr flex" style="height: 200rpx;">
市场价 <input type="text" class="input" v-model="market_price" />
</view>
</template>
<template v-if="action == 'chengben_price'">
<view class="black nr flex" style="height: 200rpx;">
成本价 <input type="text" class="input" v-model="chengben_price" />
</view>
</template>
<template v-if="action == 'stock'">
<view class="black nr flex" style="height: 200rpx;">
库存 <input type="text" class="input" v-model="stock" />
</view>
</template>
</modal>
<u-toast ref="uToast" />
</view>
</template>
<script>
import { apiGoodsDetail,apiGoodsEdit } from '@/api/goods'
import { strToParams } from '@/utils/tools'
export default {
name: 'GoodsDetail',
data() {
return {
goodsInfo: {}, // 商品信息
action: '',
spec_type: false, //多规格设置 设置或取消批量多规格
flag: false, //多规格设置 设置弹窗
price: '',//多规格设置 价格
market_price: '', //多规格设置 市场价
chengben_price: '',//多规格设置 成本价
stock: '' ,//多规格设置 库存
}
},
methods: {
// 初始化商品详情数据
initGoodsDetail() {
return new Promise((resolve, reject) => {
apiGoodsDetail({
id: this.goods_id,
visit: 1,
}).then(data => {
this.goodsInfo = data
}).catch(err => {
reject(err)
})
})
},
openSpecEditFunc(action) {
this.action = action;
this.flag = true
},
specEditFunc(action) {
this.goodsInfo.goods_item.forEach(item => {
item[action] = this[action]
})
this.goodsInfo.goods_item = [...this.goodsInfo.goods_item]
},
async onSubmit() {
let items = [];
items = this.goodsInfo.goods_item.map(({id,market_price,price,stock,chengben_price}) => ({id,market_price,price,stock,chengben_price}))
await apiGoodsEdit({items})
this.$refs.uToast.show({
title: '设置成功',
type: 'success'
})
setTimeout(() => {
this.$Router.back()
}, 1000)
}
},
async onLoad() {
const options = this.$Route.query
this.goods_id = options.id
try {
if (!this.goods_id) throw new Error('该商品不存在')
// 商品详情数据
await this.initGoodsDetail()
} catch (err) {
console.log(err)
}
}
}
</script>
<style lang="scss" scoped>
.goods-detail {
padding-bottom: 200rpx;
.primary {
color: $-color-primary;
}
.input {
width: 300rpx;
padding: 10rpx;
margin: 0 20rpx;
border-radius: 4rpx;
border: 1px solid rgba(219, 219, 219, 100);
}
.item {
padding: 30rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
background-color: $-color-white;
justify-content: flex-start;
>view:first-child {
width: 180rpx;
color: $-color-black;
font-size: $-font-size-nr;
font-weight: 500;
}
>view:last-child {
width: 400rpx;
text-align: left;
height: 76rpx;
padding: 0 12rpx;
border-radius: 6rpx;
border: 1px solid rgba(219, 219, 219, 100);
}
}
.title {
color: $-color-white;
display: inline-block;
margin: 0 20rpx;
padding: 6rpx 16rpx;
border-radius: 8rpx;
background-color: $-color-primary;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
height: 110rpx;
padding: 0 30rpx;
box-sizing: content-box;
padding-bottom: env(safe-area-inset-bottom);
.btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background-color: $-color-primary;
}
}
}
</style>