cashier_app/pageProduct/index/components/edit-guige.vue

<template>
	<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="9">
		<view class="u-p-32 box u-font-28">
			<view class="u-flex u-relative u-row-center">
				<view class="u-font-32">{{data.specSnap}}</view>
				<view class="u-absolute close">
					<up-icon @click="close" :size="16" color="#000" name="close-circle-fill"></up-icon>
				</view>
			</view>
			<view class="u-m-t-48">
				<view class="u-flex u-row-between border-bottom u-p-b-30">
					<view>当前状态</view>
					<view class="u-flex u-relative">
						<up-radio-group v-model="isGrounding" placement="row" @change="isGroundingChange">
							<up-radio :customStyle="{marginRight: '10px'}" v-for="(item, index) in status.list"
								:key="index" :label="item.label" :name="item.name">
							</up-radio>
						</up-radio-group>
						<view class="u-absolute position-all" @click="hasShangXiajia(true)" v-if="!canShangXiaJia"></view>
					</view>

				</view>
				<view class=" u-flex u-row-between u-m-t-30 u-relative">
					<view>售罄</view>
					<up-switch :activeValue="1" :inactiveValue="0" :size="20" @change="isPauseSaleChange" v-model="isPauseSale"></up-switch>
					<view class="u-absolute position-all" @click="hasShouQing(true)" v-if="!canShouQing"></view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { reactive, ref, watch } from 'vue';
	import {
		$updateGrounding,
		$updateProductStatus,$updateProductData,
		$tbProskuConV2
	} from '@/http/yskApi/goods.js'
	import { hasPermission } from '@/commons/utils/hasPermission.js'
	import infoBox from '@/commons/utils/infoBox.js'
	
	import { productOnOff,productMarkIsSoldOut } from '@/http/api/product.js'
	
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		category: {
			type: Array,
			default: () => []
		},
		goods: {
			type: Object,
			default: () => {
				skuList: []
			}
		}
	})
	const status = reactive({
		list: [{
			name: 1,
			label: '上架中'
		}, {
			name: 0,
			label: '已下架'
		}],
	})
	// 是否售罄
	const isPauseSale = ref(0)
	// 是否上架
	const isGrounding = ref(1)
	const data = ref(props.goods)
	const emits = defineEmits(['update:show', 'save', 'isGroundingChange', 'isPauseSaleChange'])
	const form = reactive({
		note: ''
	})
	let popShow = ref(props.show)
	watch(() => props.show, (newval) => {
		popShow.value = newval
		if (newval) {
			data.value = props.goods
			console.log(props.goods)
			isPauseSale.value = props.goods.isPauseSale 
			isGrounding.value = props.goods.isGrounding
		}
	})
	watch(() => popShow.value, (newval) => {
		emits('update:show', newval)
	})

	function close() {
		popShow.value = false
	}

	function open() {
		hasShangXiajia()
		hasShouQing()
	}

	function save() {
		emits('save')
	}

	function upDateGoods(par) {
		return $updateProductData([{
			id: data.value.id,
			isSku: 1,
			shopId: uni.getStorageSync('shopId'),
			...par
		}])
	}
	
	let canShangXiaJia=ref(false)
	async function hasShangXiajia(tips=false){
		canShangXiaJia.value=await hasPermission({text:'允许上下架商品',tips})
	}
	let canShouQing=ref(false)
	async function hasShouQing(tips=false){
		canShouQing.value=await hasPermission({text:'允许售罄商品',tips})
	}
	
	async function isGroundingChange(e) {
		if(!canShangXiaJia.value){
			return
		}
		console.log(e);
		await productOnOff({
			id: data.value.id,
			type:'sku',
			isSale: e
		})
		emits('isGroundingChange', e)
		infoBox.showToast('更新成功')
	}

	async function isPauseSaleChange(e) {
		if(!canShouQing.value){
			return
		}
		console.log(e);
		await productMarkIsSoldOut({
			id: data.value.id,
			type:'sku',
			isSoldOut: e
		})
		emits('isPauseSaleChange', e)
		infoBox.showToast('更新成功')
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 556rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
	}

	.close {
		position: absolute;
		right: 0;
	}

	.number {
		color: #EE4646;
	}
</style>