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>
|