239 lines
7.8 KiB
Vue
239 lines
7.8 KiB
Vue
<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>
|