first
This commit is contained in:
177
pageProduct/add-Product/components/choose-coupon-category.vue
Normal file
177
pageProduct/add-Product/components/choose-coupon-category.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view class="mask u-fixed position-all u-flex u-col-bottom" v-if="show" @tap="close">
|
||||
<view class="bg-fff w-full" @tap.stop="nullFunction">
|
||||
<view class="u-p-30">
|
||||
<view class="font-bold u-text-center u-font-32">选择团购券分类</view>
|
||||
<view class="u-m-t-32 u-flex">
|
||||
<view class="u-flex-1 u-p-r-16">
|
||||
<view class="u-m-b-12">分类名称</view>
|
||||
<uni-easyinput v-model="goods.query.name" placeholder="请输入团购券分类名称" />
|
||||
</view>
|
||||
<!-- <view class="u-flex-1 u-p-l-16">
|
||||
<view class="u-m-b-12">商品分类</view>
|
||||
<uni-data-picker :clear-icon="false" :map="{text:'name',value:'id'}" placeholder="请选择分类"
|
||||
popup-title="请选择分类" :localdata="category" v-model="goods.query.categoryId">
|
||||
</uni-data-picker>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-flex u-row-right">
|
||||
<view class="u-flex-1 u-p-r-16">
|
||||
<my-button type="cancel" plain @tap="resetQuery">重置</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1 u-p-l-16">
|
||||
<my-button @tap="getGoods">查询</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view :scroll-x="false" scroll-y="true" :style="computedStyle()">
|
||||
<view class="u-p-l-30 u-p-r-30">
|
||||
<view class="u-flex u-row-between no-wrap">
|
||||
<view>
|
||||
<my-radio @change="radioAllChange" v-model="goods.allChecked" shape="square" :size="20"></my-radio>
|
||||
</view>
|
||||
<view>名称</view>
|
||||
<view>状态</view>
|
||||
</view>
|
||||
<view class="u-m-t-12 u-flex u-row-between" v-for="(item,index) in goods.list" :key="index">
|
||||
<my-radio @change="radioChange" v-model="item.checked" shape="square" :size="20"></my-radio>
|
||||
<view>
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view>
|
||||
<my-switch v-model="item.status" disabled></my-switch>
|
||||
<!-- {{item.status}} -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="u-p-30">
|
||||
<my-pagination :totalElements="goods.totalElements" :size="goods.query.size" @change="pageChange"></my-pagination>
|
||||
<view class="u-m-t-20 u-flex">
|
||||
<view class="u-flex-1 u-p-r-16">
|
||||
<my-button type="cancel" plain @tap="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1 u-p-l-16">
|
||||
<my-button @tap="confrim">确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import myRadio from '@/components/my-components/my-radio';
|
||||
import mySwitch from '@/components/my-components/my-switch';
|
||||
import myPagination from '@/components/my-components/my-pagination'
|
||||
import $coupon from '@/http/yskApi/couponCategory.js';
|
||||
$coupon.get()
|
||||
import {
|
||||
reactive,
|
||||
onMounted,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: '40vh'
|
||||
}
|
||||
})
|
||||
|
||||
function nullFunction() {
|
||||
|
||||
}
|
||||
|
||||
const show = ref(props.modelValue)
|
||||
|
||||
function open(arr) {
|
||||
show.value = true
|
||||
if(arr){
|
||||
for(let i in goods.list){
|
||||
console.log(arr.includes(goods.list[i].id));
|
||||
goods.list[i].checked=arr.includes(goods.list[i].id)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
}
|
||||
|
||||
|
||||
|
||||
function resetQuery() {
|
||||
Object.assign(goods.query, $quey)
|
||||
}
|
||||
|
||||
function computedStyle() {
|
||||
return `height:${typeof props.height==='string'?props.height:props.height+'rpx'};`
|
||||
}
|
||||
|
||||
const emits = defineEmits(['update:modelValue','confirm'])
|
||||
|
||||
const $quey = {
|
||||
name: '',
|
||||
page: 0,
|
||||
size: 10,
|
||||
}
|
||||
const query = reactive({
|
||||
...$quey
|
||||
})
|
||||
const goods=reactive({
|
||||
list:[],
|
||||
allChecked:false,
|
||||
totalElements:0,
|
||||
query:{
|
||||
...$quey
|
||||
}
|
||||
})
|
||||
function getGoods() {
|
||||
$coupon.get(goods.query).then(res=>{
|
||||
goods.list=res.content.map(v=>{
|
||||
return {...v,checked:false}
|
||||
})
|
||||
goods.allChecked=false
|
||||
goods.totalElements=res.totalElements
|
||||
})
|
||||
}
|
||||
getGoods()
|
||||
|
||||
function pageChange(page){
|
||||
goods.query.page=page-1
|
||||
getGoods()
|
||||
}
|
||||
function radioChange(newval){
|
||||
goods.allChecked=goods.list.filter(v=>v.checked).length!=0
|
||||
}
|
||||
function radioAllChange(newval){
|
||||
goods.list.forEach(i=>{i.checked=newval})
|
||||
}
|
||||
function confrim(){
|
||||
const arr= goods.list.filter(v=>v.checked)
|
||||
console.log(arr);
|
||||
emits('confirm',arr)
|
||||
}
|
||||
defineExpose({open,close})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mask {
|
||||
background: rgba(51, 51, 51, 0.5);
|
||||
z-index: 900;
|
||||
}
|
||||
.coverImg{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
197
pageProduct/add-Product/components/choose-goods.vue
Normal file
197
pageProduct/add-Product/components/choose-goods.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view class="mask u-fixed position-all u-flex u-col-bottom" v-if="show" @tap="close">
|
||||
<view class="bg-fff w-full" @tap.stop="nullFunction">
|
||||
<view class="u-p-30">
|
||||
<view class="font-bold u-text-center">选择商品</view>
|
||||
<view class="u-m-t-32 u-flex">
|
||||
<view class="u-flex-1 u-p-r-16">
|
||||
<view class="u-m-b-12">商品名称</view>
|
||||
<uni-easyinput v-model="goods.query.name" placeholder="请输入商品名称" />
|
||||
</view>
|
||||
<view class="u-flex-1 u-p-l-16">
|
||||
<view class="u-m-b-12">商品分类</view>
|
||||
<uni-data-picker :clear-icon="false" :map="{text:'name',value:'id'}" placeholder="请选择分类"
|
||||
popup-title="请选择分类" :localdata="category" v-model="goods.query.categoryId">
|
||||
</uni-data-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-flex u-row-right">
|
||||
<view class="u-flex-1 u-p-r-16">
|
||||
<my-button type="cancel" plain @tap="resetQuery">重置</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1 u-p-l-16">
|
||||
<my-button @tap="getGoods">查询</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view :scroll-x="false" scroll-y="true" :style="computedStyle()">
|
||||
<view class="u-p-l-30 u-p-r-30">
|
||||
<view class="u-flex u-row-between no-wrap">
|
||||
<view>
|
||||
<my-radio @change="radioAllChange" v-model="goods.allChecked" shape="square" :size="20"></my-radio>
|
||||
</view>
|
||||
<view>商品信息</view>
|
||||
<view>规格</view>
|
||||
<!-- <view>是否售尽</view> -->
|
||||
<!-- <view>是否分销</view> -->
|
||||
<view>售价</view>
|
||||
<view>销量/库存</view>
|
||||
<view>分类名称</view>
|
||||
</view>
|
||||
<view class="u-m-t-12 u-flex u-row-between" v-for="(item,index) in goods.list" :key="index">
|
||||
<my-radio @change="radioChange" v-model="item.checked" shape="square" :size="20"></my-radio>
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<image lazy-load class="coverImg" :src="item.coverImg" mode=""></image>
|
||||
<view class="u-m-t-10">{{item.name}}</view>
|
||||
</view>
|
||||
<view>
|
||||
{{item.typeEnum}}
|
||||
</view>
|
||||
<view>
|
||||
￥{{ item.lowPrice }}
|
||||
</view>
|
||||
<view>
|
||||
{{ item.realSalesNumber }}/{{ item.stockNumber }}
|
||||
</view>
|
||||
<view>
|
||||
{{item.categoryName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="u-p-30">
|
||||
<my-pagination :totalElements="goods.totalElements" :size="goods.query.size" @change="pageChange"></my-pagination>
|
||||
<view class="u-m-t-20 u-flex">
|
||||
<view class="u-flex-1 u-p-r-16">
|
||||
<my-button type="cancel" plain @tap="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1 u-p-l-16">
|
||||
<my-button @tap="confrim">确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import myRadio from '@/components/my-components/my-radio';
|
||||
import myPagination from '@/components/my-components/my-pagination'
|
||||
import {
|
||||
$tbProduct
|
||||
} from '@/http/yskApi/goods.js';
|
||||
import {
|
||||
reactive,
|
||||
onMounted,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: '40vh'
|
||||
},
|
||||
category: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function nullFunction() {
|
||||
|
||||
}
|
||||
|
||||
const show = ref(props.modelValue)
|
||||
|
||||
function open(arr) {
|
||||
show.value = true
|
||||
if(arr){
|
||||
for(let i in goods.list){
|
||||
console.log(arr.includes(goods.list[i].id));
|
||||
goods.list[i].checked=arr.includes(goods.list[i].id)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
}
|
||||
|
||||
|
||||
|
||||
function resetQuery() {
|
||||
Object.assign(goods.query, $quey)
|
||||
}
|
||||
|
||||
function computedStyle() {
|
||||
return `height:${typeof props.height==='string'?props.height:props.height+'rpx'};`
|
||||
}
|
||||
|
||||
const emits = defineEmits(['update:modelValue','confirm'])
|
||||
|
||||
const $quey = {
|
||||
categoryId: '',
|
||||
name: '',
|
||||
page: 0,
|
||||
size: 10,
|
||||
}
|
||||
const query = reactive({
|
||||
...$quey
|
||||
})
|
||||
const goods=reactive({
|
||||
list:[],
|
||||
allChecked:false,
|
||||
totalElements:0,
|
||||
query:{
|
||||
...$quey
|
||||
}
|
||||
})
|
||||
function getGoods() {
|
||||
$tbProduct(goods.query).then(res=>{
|
||||
goods.list=res.content.map(v=>{
|
||||
return {...v,checked:false}
|
||||
})
|
||||
goods.allChecked=false
|
||||
goods.totalElements=res.totalElements
|
||||
})
|
||||
}
|
||||
getGoods()
|
||||
|
||||
function pageChange(page){
|
||||
goods.query.page=page-1
|
||||
getGoods()
|
||||
}
|
||||
function radioChange(newval){
|
||||
goods.allChecked=goods.list.filter(v=>v.checked).length!=0
|
||||
}
|
||||
function radioAllChange(newval){
|
||||
goods.list.forEach(i=>{i.checked=newval})
|
||||
}
|
||||
function confrim(){
|
||||
const arr= goods.list.filter(v=>v.checked)
|
||||
emits('confirm',arr)
|
||||
}
|
||||
defineExpose({open,close})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mask {
|
||||
background: rgba(51, 51, 51, 0.5);
|
||||
z-index: 900;
|
||||
}
|
||||
.coverImg{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user