请求处理代理
商品管理 商品分类 用户管理 桌台 代客下单 进销存 交班 预定座位 充值管理 存酒管理
This commit is contained in:
@@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<view class="u-p-30 safe-page">
|
||||
<myTabs :list="tabsList" @change="tabsChange"></myTabs>
|
||||
<view class="box">
|
||||
<view class="basic">
|
||||
<uni-forms :border="true" label-position="top" err-show-type="undertext" validateTrigger="blur"
|
||||
label-width="350"
|
||||
ref="Forms"
|
||||
:model="FormData" :rules="rules">
|
||||
<view class="block">
|
||||
<uni-forms-item label="图片">
|
||||
<uni-file-picker v-model="FormData.images" file-mediatype="image" mode="grid" :limit="10"
|
||||
@progress="FileUploadprogress" @success="FileUploadsuccess" @fail="FileUploadail"
|
||||
@select="FileUploadselect" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item required name="goodsName" label="商品名称" >
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.goodsName" placeholder="请输入商品名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="产品编码" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.goodsCode" placeholder="请输入商品编码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品描述" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" type="textarea"
|
||||
v-model="FormData.goodsDesc" placeholder="请填写商品简述" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品详情" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" type="textarea"
|
||||
v-model="FormData.goodsDetail" placeholder="请填写商品详情" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="所属分类" required>
|
||||
<view style="display: none;"><uni-easyinput :inputBorder="inputBorder"
|
||||
v-model="FormData.category" placeholder="请选择所属分类" /></view>
|
||||
<picker @change="categoryChange" :value="category.defaultCateIndex" :range="category.list">
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="color-333">{{category.list[FormData.category]||'分类'}}</view>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="规格模式" required>
|
||||
<uni-data-checkbox v-model="FormData.specificationsPattern"
|
||||
:localdata="specificationMode" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label=" " required>
|
||||
<view class="u-flex u-row-between zuofa" @tap="go.to('PAGES_PRODUCT_GUIGE_ADD')">
|
||||
<view class="color-333">{{FormData.specificationsGroup||'添加规格组'}}</view>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item label="底价（元）" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.floorPrice" placeholder="请输入底价（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="售卖方式" required>
|
||||
<view style="display: none;"><uni-easyinput :inputBorder="inputBorder"
|
||||
v-model="FormData.salesMethod" placeholder="请选择售卖方式" /></view>
|
||||
<picker @change="salesMethodChange" :value="salesMethod.defaultIndex"
|
||||
:range="salesMethod.list">
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="color-333">{{salesMethod.list[FormData.salesMethod]||'售卖方式'}}</view>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="" required>
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="label-title">库存</view>
|
||||
<switch :color="ColorMain" :checked="FormData.stock" class="my-switch" />
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="border-top-0">
|
||||
<uni-forms-item label="" required>
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="label-title">打折设置</view>
|
||||
<my-switch v-model="FormData.openDiscount" @change="openDiscountChange"></my-switch>
|
||||
<!-- <switch :color="ColorMain" :checked="openDiscount" class="my-switch" /> -->
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-top-0 none-label" v-if="FormData.openDiscount">
|
||||
<uni-forms-item label="" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.discountPrice" type="digit" placeholder="请填写折后价" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<uni-forms-item label="" required>
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="label-title">不参与会员折扣</view>
|
||||
<switch :color="ColorMain" :checked="FormData.isVipDiscount" class="my-switch" />
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="会员价（元）" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.vipPrice" type="digit" placeholder="请输入会员价（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="包装费（元）" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.packagingFee" type="digit" placeholder="请输入包装费（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="重量（千克）" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.weight" type="digit" placeholder="请输入重量（千克）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="赠送积分" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.integral" type="digit" placeholder="请输入赠送积分" />
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="block">
|
||||
<view class="border-top-0">
|
||||
<uni-forms-item label="" required>
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="label-title">每日销量上限</view>
|
||||
<switch :color="ColorMain" :checked="FormData.stock" class="my-switch" />
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<uni-forms-item label="" required>
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="label-title">每单限购</view>
|
||||
<switch :color="ColorMain" :checked="FormData.isVipDiscount" class="my-switch" />
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="最低起售（件）" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.vipPrice" type="digit" placeholder="请输入最低起售（件）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="包装费（元）" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.packagingFee" type="digit" placeholder="请输入包装费（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="虚拟销量" required>
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="FormData.virtualSales" type="digit" placeholder="虚拟销量" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="" required>
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="label-title">设为推荐</view>
|
||||
<switch :color="ColorMain" :checked="FormData.isRecommend" class="my-switch" />
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
</uni-forms>
|
||||
<view class="save-btn-box">
|
||||
<button class="save-btn" @click="save" hover-class="btn-hover-class">保存</button>
|
||||
</view>
|
||||
<view class="u-text-center color-red">
|
||||
<text>删除该商品</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="stock">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ColorMain
|
||||
} from '@/commons/color.js'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
|
||||
import {
|
||||
onBeforeUnmount,
|
||||
onUnmounted,
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import myTabs from '@/pageProduct/components/my-tabs.vue'
|
||||
import mySwitch from '@/pageProduct/components/my-switch.vue'
|
||||
const rules = {
|
||||
GoodsName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入商品名称',
|
||||
},
|
||||
{
|
||||
minLength: 1,
|
||||
maxLength: 20,
|
||||
errorMessage: '商品名称长度在 {minLength} 到 {maxLength} 个字符',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const tabsList = ['基础设置', '库存设置']
|
||||
const Forms=ref(null)
|
||||
// 表单样式
|
||||
const placeholderStyle = 'font-size:28rpx;'
|
||||
//规格模板类型
|
||||
const specificationMode = [{
|
||||
text: '普通',
|
||||
value: '普通'
|
||||
},
|
||||
{
|
||||
text: '图片式',
|
||||
value: '图片式'
|
||||
},
|
||||
{
|
||||
text: '规格模版',
|
||||
value: '规格模版'
|
||||
}
|
||||
]
|
||||
let myTest = ref(false)
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
//表单数据
|
||||
const FormData = reactive({
|
||||
goodsName: '',
|
||||
GoodsNum: '',
|
||||
images: [],
|
||||
category: '',
|
||||
salesMethod: 0,
|
||||
stock: false,
|
||||
isVipDiscount: false,
|
||||
packagingFee: 0,
|
||||
weight: 0,
|
||||
integral: 0,
|
||||
specificationsPattern: '',
|
||||
specificationsGroup: '',
|
||||
|
||||
openDiscount: false,
|
||||
discountPrice: '',
|
||||
isVipDiscount: false,
|
||||
vipPrice: '',
|
||||
packagingFee: '',
|
||||
virtualSales: '',
|
||||
isRecommend: false
|
||||
})
|
||||
|
||||
|
||||
//售卖方式
|
||||
const salesMethod = reactive({
|
||||
list: ['现货', '预售', '仅展示商品'],
|
||||
defaultIndex: 0,
|
||||
})
|
||||
|
||||
function salesMethodChange(e) {
|
||||
FormData.salesMethod = e.detail.value
|
||||
salesMethod.defaultIndex = e.detail.value
|
||||
}
|
||||
|
||||
let option = {
|
||||
type: 'add'
|
||||
}
|
||||
// 判断是否为一个空对象
|
||||
function isEmpty(obj) {
|
||||
return obj && JSON.stringify(obj) !== '{}'
|
||||
}
|
||||
onLoad((params) => {
|
||||
if (isEmpty(params)) {
|
||||
option = params.type ? params : option
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.type === 'add' ? '添加商品' : '编辑商品'
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
function openDiscountChange() {
|
||||
|
||||
}
|
||||
|
||||
//图片上次
|
||||
function FileUploadprogress() {
|
||||
|
||||
}
|
||||
|
||||
function FileUploadsuccess() {
|
||||
|
||||
}
|
||||
|
||||
function FileUploadail() {
|
||||
|
||||
}
|
||||
|
||||
function FileUploadselect() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
//分类
|
||||
const category = reactive({
|
||||
list: ['分类', '分类1', '分类2'],
|
||||
defaultCateIndex: 0,
|
||||
})
|
||||
|
||||
function categoryChange(e) {
|
||||
FormData.category = e.detail.value
|
||||
category.defaultCateIndex = e.detail.value
|
||||
}
|
||||
|
||||
|
||||
|
||||
function tabsChange(i) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
function save(){
|
||||
Forms.value.validate().then(res=>{
|
||||
console.log(res);
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 监听规格保存,拿到数据
|
||||
* @param {Boolean} open //控制开启或关闭监听
|
||||
*/
|
||||
function watchSpecificationsSave(open = true) {
|
||||
if (open) {
|
||||
uni.$on('emitspecificationsSave', function(data) {
|
||||
console.log(data);
|
||||
})
|
||||
} else {
|
||||
uni.$off('emitspecificationsSave', function(data) {
|
||||
console.log('emitspecificationsSave remove');
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
watchSpecificationsSave()
|
||||
onBeforeUnmount(() => {
|
||||
watchSpecificationsSave(false)
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.safe-page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.lh40 {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
padding: 64rpx 110rpx 64rpx 110rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
align-items: inherit;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item .uni-forms-item__label {
|
||||
text-indent: 0;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
::v-deep .none-label .uni-forms-item.is-direction-top {
|
||||
padding: 0!important;
|
||||
min-height: initial!important;
|
||||
}
|
||||
::v-deep .none-label .uni-forms-item .uni-forms-item__label{
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
border-radius: 100rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
2028
jeepay-ui-uapp-merchant/pageProduct/add-Product/add-Product.vue
Normal file
2028
jeepay-ui-uapp-merchant/pageProduct/add-Product/add-Product.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
@@ -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>
|
||||
201
jeepay-ui-uapp-merchant/pageProduct/add-Product/timer.vue
Normal file
201
jeepay-ui-uapp-merchant/pageProduct/add-Product/timer.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<view class="u-p-30 min-page">
|
||||
<view class="u-flex">
|
||||
<view style="width: 210rpx;">
|
||||
<my-button shape="circle" @click="addTimer">添加定时器</my-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list u-m-t-20" v-if="list.length">
|
||||
<view class="block" v-for="(item,index) in list" :key="index">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>定时器{{index+1}}</view>
|
||||
<uni-icons @click="delTimer(index)" type="trash"></uni-icons>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-20 u-row-between">
|
||||
<view>周期</view>
|
||||
<view @click="selectAllClick(index)">全选</view>
|
||||
</view>
|
||||
<view class="u-m-t-20">
|
||||
<uni-data-checkbox multiple v-model="item.cycleChecked" :localdata="cycle"></uni-data-checkbox>
|
||||
</view>
|
||||
<view class="u-m-t-20">
|
||||
<view class="u-flex">
|
||||
<view>上架时间:</view>
|
||||
<view class="u-flex-1 u-m-l-10">
|
||||
<picker mode="multiSelector" @change="listingTimeChange($event,index)"
|
||||
:value="item.listingTime.index" :range="times">
|
||||
<view class="bg-gray u-p-l-20 u-p-t-6 u-p-b-6 u-p-r-20 ">
|
||||
{{item.listingTime.value}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-20">
|
||||
<view>下架时间:</view>
|
||||
<view class="u-flex-1 u-m-l-10">
|
||||
<picker mode="multiSelector" @change="offShelfChange($event,index)"
|
||||
:value="item.offShelf.index" :range="times">
|
||||
<view class="bg-gray u-p-l-20 u-p-t-6 u-p-b-6 u-p-r-20 ">
|
||||
{{item.offShelf.value}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-center u-m-t-60">
|
||||
<my-button width="580" shape="circle" @click="save">保存</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
//返回一天的时间 时分格式
|
||||
function returnDayTime() {
|
||||
return new Array(2).fill(1).map((v, index) => {
|
||||
if (index === 0) {
|
||||
return new Array(24).fill(1).map((hour, index) => {
|
||||
return `0${index}`.slice(-2)
|
||||
})
|
||||
}
|
||||
if (index === 1) {
|
||||
return new Array(60).fill(1).map((hour, index) => {
|
||||
return `0${index}`.slice(-2)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const times = ref(returnDayTime())
|
||||
let defaultTimeIndex = ref(0)
|
||||
|
||||
function getTime(indexArr) {
|
||||
const hour = times.value[0][indexArr[0]]
|
||||
const month = times.value[1][indexArr[1]]
|
||||
return `${hour}:${month}`
|
||||
}
|
||||
//获取$event.detail.value
|
||||
function getEnentDetailValue(e) {
|
||||
return e.detail.value
|
||||
}
|
||||
|
||||
function setListTimeValue(index, key, time) {
|
||||
list.value[index][key].value = time
|
||||
}
|
||||
|
||||
function listingTimeChange(e, index) {
|
||||
const indexArr = getEnentDetailValue(e)
|
||||
const time = getTime(indexArr)
|
||||
setListTimeValue(index, 'listingTime', time)
|
||||
}
|
||||
|
||||
function offShelfChange(e, index) {
|
||||
const indexArr = getEnentDetailValue(e)
|
||||
const time = getTime(indexArr)
|
||||
setListTimeValue(index, 'offShelf', time)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const cycle = [{
|
||||
value: 0,
|
||||
text: '星期一'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: '星期二'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: '星期三'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
text: '星期四'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
text: '星期五'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
text: '星期六'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
text: '星期日'
|
||||
}
|
||||
]
|
||||
const ListDataconstructor = {
|
||||
cycleChecked: [0, 1, 2, 3, 4, 5, 6],
|
||||
}
|
||||
|
||||
function returnBasicTimeConstructor() {
|
||||
return {
|
||||
listingTime: {
|
||||
value: '09:00',
|
||||
index: [9, 0]
|
||||
},
|
||||
offShelf: {
|
||||
value: '18:00',
|
||||
index: [18, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
const list = ref([returnBasicDataConstructor()])
|
||||
function returnBasicDataConstructor() {
|
||||
return {
|
||||
...ListDataconstructor,
|
||||
...returnBasicTimeConstructor()
|
||||
}
|
||||
}
|
||||
|
||||
function addTimer() {
|
||||
list.value.push(returnBasicDataConstructor())
|
||||
}
|
||||
function delTimer(index) {
|
||||
list.value.splice(index,1)
|
||||
}
|
||||
function selectAllClick(index){
|
||||
list.value[index].cycleChecked=ListDataconstructor.cycleChecked
|
||||
}
|
||||
// 触发定时器保存事件将数据给到添加商品页面
|
||||
function emitTimerSave(){
|
||||
uni.$emit('timerSave',list.value)
|
||||
go.back()
|
||||
}
|
||||
function save(){
|
||||
console.log(list.value);
|
||||
emitTimerSave()
|
||||
}
|
||||
onLoad(()=>{
|
||||
const arr=uni.getStorageSync('timer')
|
||||
if(arr.length){
|
||||
list.value=arr
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.min-page {
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="box">
|
||||
<view v-for="(item,index) in specifications.list" :key="index">
|
||||
<uni-forms :model="item" :rules="rules" err-show-type="undertext" validateTrigger="blur"
|
||||
:ref="setFormRef(index)" :border="true" label-position="top" label-width="350">
|
||||
<view class="block">
|
||||
<view class="border-top-0">
|
||||
<uni-forms-item label="规格组名" required name="name" >
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.name" placeholder="规格组名" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<!-- <uni-forms-item label="最少可选" required name="MinOptional" >
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.MinOptional" type="number" placeholder="填写最小数量" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="最大可选" required name="MaxOptional" >
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.MaxOptional" type="number" placeholder="填写最大数量" />
|
||||
</uni-forms-item> -->
|
||||
<uni-forms-item label="选项值">
|
||||
<view class="option">
|
||||
<view class="u-flex">
|
||||
<view class="u-flex-1">名称</view>
|
||||
<view class="u-flex-1 u-p-l-60">加价</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="u-flex option-item"
|
||||
|
||||
v-for="(option,optionIndex) in item.options"
|
||||
:key="optionIndex"
|
||||
>
|
||||
<view class="u-flex-1">
|
||||
<uni-forms-item :key="optionIndex" :name="['options',optionIndex,'optionName']"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:rules="[{'required': true,errorMessage: '必填'}]"
|
||||
label-width="0" label="" required :showRequired="false"
|
||||
>
|
||||
<uni-easyinput v-model="specifications.list[index].options[optionIndex].optionName"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
placeholder="选项名" />
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
<view class="u-p-l-60 u-flex-1 u-flex">
|
||||
<uni-forms-item :key="optionIndex"
|
||||
:rules="[{'required': true,errorMessage: '必填'}]"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:name="['options',optionIndex,'optionPrice']" label-width="0" label="" required :showRequired="false"
|
||||
>
|
||||
<view class="u-flex">
|
||||
<uni-easyinput v-model="specifications.list[index].options[optionIndex].optionPrice"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
type="digit" placeholder="填写价格" />
|
||||
|
||||
<view class="icon icon-reduce u-m-l-38"
|
||||
@click="delOption(index,optionIndex)">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex" @click="addOptions(index)">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<view class="u-flex u-m-t-48 u-m-b-24" @click="delSpecificationsGroup(index)">
|
||||
<view class="icon icon-reduce u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-red">删除规格组</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view class="u-flex block u-p-l-20 u-p-r-20 u-p-t-28 u-p-b-28" @click="addSpecificationsGroup">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格组</view>
|
||||
</view>
|
||||
|
||||
<view class="save-btn-box">
|
||||
<button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom" ref="bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount
|
||||
} from 'vue';
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
const form = ref(null)
|
||||
const bottom = ref(null)
|
||||
//表单验证
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
MinOptional: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
MaxOptional: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
optionName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
optionPrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 构造规格的选项值的基础数据
|
||||
const specificationsOptionsBasicData = {
|
||||
optionName: '',
|
||||
optionPrice: '0.00'
|
||||
}
|
||||
|
||||
function returnOptionsBasicData() {
|
||||
return {
|
||||
...specificationsOptionsBasicData
|
||||
}
|
||||
}
|
||||
// 构造规格的基础数据
|
||||
const specificationsBasicData = {
|
||||
name: '',
|
||||
MinOptional: 1,
|
||||
MaxOptional: 1,
|
||||
options: []
|
||||
}
|
||||
|
||||
function returnSpecificationsOptionsBasicData() {
|
||||
return {
|
||||
...specificationsBasicData,
|
||||
options: [returnOptionsBasicData()]
|
||||
}
|
||||
}
|
||||
|
||||
function onFieldChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
// 规格列表
|
||||
const specifications = reactive({
|
||||
list: [returnSpecificationsOptionsBasicData()]
|
||||
})
|
||||
|
||||
|
||||
|
||||
//添加规格组
|
||||
function addSpecificationsGroup() {
|
||||
specifications.list.push(returnSpecificationsOptionsBasicData())
|
||||
scrollPageBottom()
|
||||
}
|
||||
//删除规格组
|
||||
function delSpecificationsGroup(index) {
|
||||
specifications.list.splice(index, 1)
|
||||
}
|
||||
// 向指定索引的规格组添加规格项
|
||||
function addOptions(index) {
|
||||
specifications.list[index].options.push(returnOptionsBasicData())
|
||||
}
|
||||
// 删除指定索引的规格组添加规格项
|
||||
function delOption(index, optionIndex) {
|
||||
specifications.list[index].options.splice(optionIndex, 1)
|
||||
}
|
||||
//页面滚动到最底部
|
||||
function scrollPageBottom() {
|
||||
nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
duration: 100, // 过渡时间
|
||||
scrollTop: 100000, // 滚动的实际距离
|
||||
})
|
||||
})
|
||||
}
|
||||
//设置表单验证规则
|
||||
function setFormRules() {
|
||||
form.value.setRules(rules)
|
||||
}
|
||||
const formRefs = ref([]);
|
||||
//绑定表单元素
|
||||
function setFormRef(index) {
|
||||
formRefs.value[index] = null;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
formRefs.value[index] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
// 绑定option input元素
|
||||
const refFormInput=ref([])
|
||||
function setFormInputRef(index, index1) {
|
||||
const newIndex = index * 10000 + index1
|
||||
return (el) => {
|
||||
if (el) {
|
||||
if (!refFormInput.value[newIndex]) {
|
||||
refFormInput.value[newIndex] = el;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 当表单内容输入变化根据配置的rules进行验证
|
||||
function inpuChange(index, index1) {
|
||||
const newIndex = index * 10000 + index1
|
||||
console.log(refFormInput.value[newIndex]);
|
||||
refFormInput.value[newIndex].onFieldChange()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let emitName=''
|
||||
function triggerEvent (emitName,data){
|
||||
if(emitName){
|
||||
uni.$emit(emitName,data)
|
||||
}
|
||||
}
|
||||
onLoad(opt=>{
|
||||
const arr=uni.getStorageSync('guige')
|
||||
if(arr.length){
|
||||
specifications.list=arr
|
||||
console.log(arr);
|
||||
}
|
||||
console.log(opt);
|
||||
if(opt&&JSON.stringify(opt)!=='{}'&&opt.emitName){
|
||||
emitName=opt.emitName
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title:emitName?'编辑规格模版':'添加规格模版'
|
||||
})
|
||||
|
||||
})
|
||||
function emitspecificationsSave(){
|
||||
// emitspecificationsSave 触发规格保存事件将数据给到添加商品页面
|
||||
// guigeEdit 触发规格保存事件将数据给到添加规格页面
|
||||
uni.removeStorageSync('guige')
|
||||
triggerEvent(emitName,specifications.list)
|
||||
}
|
||||
function returnPromise(index,prosise){
|
||||
return new Promise((resolve,reject)=>{
|
||||
prosise.then(res=>{
|
||||
console.log(res);
|
||||
resolve({sucees:true})
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
resolve({sucees:false})
|
||||
})
|
||||
})
|
||||
}
|
||||
async function save() {
|
||||
let isAllPassForm=0
|
||||
for (let i in specifications.list) {
|
||||
const res=await returnPromise(i,formRefs.value[i].validate())
|
||||
isAllPassForm+=res.sucees?1:0
|
||||
}
|
||||
//判断验证是否通过
|
||||
if(isAllPassForm===specifications.list.length){
|
||||
console.log('pass');
|
||||
emitspecificationsSave()
|
||||
go.back()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item__error {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .option .uni-forms-item {
|
||||
padding: 0;
|
||||
min-height: inherit;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
&:before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
background-color: $my-main-color;
|
||||
|
||||
&::before {
|
||||
width: $icon-line-height;
|
||||
height: $icon-line-width;
|
||||
top: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: 4rpx;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.icon-reduce {
|
||||
background-color: $my-red-color;
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: $icon-line-height;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.lh40 {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
align-items: inherit;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item .uni-forms-item__label {
|
||||
text-indent: 0;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,499 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="box">
|
||||
<view class="block border-top-0">
|
||||
<uni-forms ref="nameFormRef" :model="specifications" :rules="rules" :label-width="350"
|
||||
label-position="top" validateTrigger="blur">
|
||||
<uni-forms-item label="模版名称" required name="name">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="specifications.name" placeholder="模版名称,如:衣服" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view v-for="(item,index) in specifications.list" :key="index">
|
||||
<uni-forms :model="item" :rules="rules" err-show-type="undertext" validateTrigger="blur"
|
||||
:ref="setFormRef(index)" :border="true" label-position="top" label-width="350">
|
||||
|
||||
<view class="block">
|
||||
<view class="border-top-0">
|
||||
<uni-forms-item label="规格组名" required name="name">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.name" placeholder="规格组名,如:尺码" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<uni-forms-item label="规格值">
|
||||
<view class="option">
|
||||
<view class="">
|
||||
<view class="u-flex option-item" v-for="(option,optionIndex) in item.options"
|
||||
:key="optionIndex">
|
||||
<view class="u-flex-1">
|
||||
<uni-forms-item :key="optionIndex" :name="['options',optionIndex,'name']"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:rules="[{'required': true,errorMessage: '必填'}]" label-width="0"
|
||||
label="" required :showRequired="false">
|
||||
<uni-easyinput
|
||||
v-model="specifications.list[index].options[optionIndex].name"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
placeholder="请输入规格值,如:S、M" />
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
<view class=" u-flex">
|
||||
<uni-forms-item :key="optionIndex" label-width="0" label=""
|
||||
:showRequired="false">
|
||||
<view class="u-flex">
|
||||
<!-- <uni-easyinput v-model="specifications.list[index].options[optionIndex].optionPrice"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
type="digit" placeholder="填写价格" /> -->
|
||||
|
||||
<view class="icon icon-reduce u-m-l-38"
|
||||
@click="delOption(index,optionIndex)">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex" @click="addOptions(index)">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<view class="u-flex u-m-t-48 u-m-b-24" @click="delSpecificationsGroup(index)">
|
||||
<view class="icon icon-reduce u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-red">删除规格组</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view class="u-flex block u-p-l-20 u-p-r-20 u-p-t-28 u-p-b-28" @click="addSpecificationsGroup">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格组</view>
|
||||
</view>
|
||||
|
||||
<view class="save-btn-box">
|
||||
<button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom" ref="bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
$productSpec
|
||||
} from '@/http/yskApi/goods.js'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
} from '@dcloudio/uni-app';
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount
|
||||
} from 'vue';
|
||||
const nameFormRef = ref(null)
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
const form = ref(null)
|
||||
const bottom = ref(null)
|
||||
//表单验证
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
MinOptional: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
MaxOptional: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
optionPrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 构造规格的选项值的基础数据
|
||||
const specificationsOptionsBasicData = {
|
||||
name: '',
|
||||
optionPrice: '0.00'
|
||||
}
|
||||
|
||||
function returnOptionsBasicData() {
|
||||
return {
|
||||
...specificationsOptionsBasicData
|
||||
}
|
||||
}
|
||||
// 构造规格的基础数据
|
||||
const specificationsBasicData = {
|
||||
name: '',
|
||||
// MinOptional: 1,
|
||||
// MaxOptional: 1,
|
||||
options: []
|
||||
}
|
||||
|
||||
function returnSpecificationsOptionsBasicData() {
|
||||
return {
|
||||
...specificationsBasicData,
|
||||
options: [returnOptionsBasicData()]
|
||||
}
|
||||
}
|
||||
|
||||
function onFieldChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
// 规格列表
|
||||
const specifications = reactive({
|
||||
name: '',
|
||||
list: [returnSpecificationsOptionsBasicData()]
|
||||
})
|
||||
|
||||
|
||||
|
||||
//添加规格组
|
||||
function addSpecificationsGroup() {
|
||||
specifications.list.push(returnSpecificationsOptionsBasicData())
|
||||
scrollPageBottom()
|
||||
}
|
||||
//删除规格组
|
||||
function delSpecificationsGroup(index) {
|
||||
specifications.list.splice(index, 1)
|
||||
}
|
||||
// 向指定索引的规格组添加规格项
|
||||
function addOptions(index) {
|
||||
specifications.list[index].options.push(returnOptionsBasicData())
|
||||
}
|
||||
// 删除指定索引的规格组添加规格项
|
||||
function delOption(index, optionIndex) {
|
||||
specifications.list[index].options.splice(optionIndex, 1)
|
||||
}
|
||||
//页面滚动到最底部
|
||||
function scrollPageBottom() {
|
||||
nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
duration: 100, // 过渡时间
|
||||
scrollTop: 100000, // 滚动的实际距离
|
||||
})
|
||||
})
|
||||
}
|
||||
//设置表单验证规则
|
||||
function setFormRules() {
|
||||
form.value.setRules(rules)
|
||||
}
|
||||
const formRefs = ref([]);
|
||||
//绑定表单元素
|
||||
function setFormRef(index) {
|
||||
formRefs.value[index] = null;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
formRefs.value[index] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
// 绑定option input元素
|
||||
const refFormInput = ref([])
|
||||
|
||||
function setFormInputRef(index, index1) {
|
||||
const newIndex = index * 10000 + index1
|
||||
return (el) => {
|
||||
if (el) {
|
||||
if (!refFormInput.value[newIndex]) {
|
||||
refFormInput.value[newIndex] = el;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 当表单内容输入变化根据配置的rules进行验证
|
||||
function inpuChange(index, index1) {
|
||||
const newIndex = index * 10000 + index1
|
||||
console.log(refFormInput.value[newIndex]);
|
||||
refFormInput.value[newIndex].onFieldChange()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const option = {
|
||||
type: 'add',
|
||||
id: undefined
|
||||
}
|
||||
onLoad(opt => {
|
||||
console.log(opt);
|
||||
if (opt && JSON.stringify(opt) !== '{}' && opt.type) {
|
||||
option.type = opt.type
|
||||
const data = uni.getStorageSync('spec')
|
||||
uni.removeStorageSync('spec')
|
||||
if(data){
|
||||
specifications.name = data.name
|
||||
specifications.id = data.id
|
||||
specifications.list = data.specList.map(v => {
|
||||
return {
|
||||
...v,
|
||||
options: v.value.map(v => {
|
||||
return {
|
||||
name: v
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.type === 'edit' ? '编辑规格模版' : '添加规格模版'
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
function returnPromise(prosise, index) {
|
||||
return new Promise((resolve, reject) => {
|
||||
prosise.then(res => {
|
||||
console.log(res);
|
||||
resolve({
|
||||
sucees: true
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
resolve({
|
||||
sucees: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let timer = null
|
||||
|
||||
function settimeoutBack(time) {
|
||||
clearTimeout(timer)
|
||||
timer = setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, time)
|
||||
}
|
||||
async function save() {
|
||||
let isAllPassForm = 0
|
||||
const nameFormRes = await returnPromise(nameFormRef.value.validate())
|
||||
console.log(nameFormRes);
|
||||
if (!nameFormRes.sucees) {
|
||||
isAllPassForm -= 1
|
||||
}
|
||||
for (let i in specifications.list) {
|
||||
const res = await returnPromise(formRefs.value[i].validate(), i)
|
||||
isAllPassForm += res.sucees ? 1 : 0
|
||||
}
|
||||
//判断验证是否通过
|
||||
if (isAllPassForm === specifications.list.length) {
|
||||
console.log('pass');
|
||||
const data = {
|
||||
name: specifications.name,
|
||||
id:specifications.id,
|
||||
specList: specifications.list.map(v => {
|
||||
return {
|
||||
...v,
|
||||
value: v.options.map(v => v.name),
|
||||
options: undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
if (option.type === 'add') {
|
||||
return $productSpec.add(data).then(res => {
|
||||
infoBox.showSuccessToast('添加成功')
|
||||
settimeoutBack(1500)
|
||||
})
|
||||
}
|
||||
|
||||
$productSpec.update(data).then(res => {
|
||||
infoBox.showSuccessToast('修改成功')
|
||||
settimeoutBack(1500)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item__error {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .option .uni-forms-item {
|
||||
padding: 0;
|
||||
min-height: inherit;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
&:before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
background-color: $my-main-color;
|
||||
|
||||
&::before {
|
||||
width: $icon-line-height;
|
||||
height: $icon-line-width;
|
||||
top: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: 4rpx;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.icon-reduce {
|
||||
background-color: $my-red-color;
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: $icon-line-height;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.lh40 {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
align-items: inherit;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item .uni-forms-item__label {
|
||||
text-indent: 0;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,567 @@
|
||||
<template>
|
||||
<view class="page u-font-24 color-333">
|
||||
<view class="box ">
|
||||
<view>
|
||||
<uni-forms :model="FormData" :rules="rules" err-show-type="undertext" validateTrigger="blur" ref="form"
|
||||
:border="true" :label-width="130">
|
||||
<view class="block">
|
||||
<view class="border-top-0">
|
||||
<uni-forms-item label="选择规格" required name="categoryId">
|
||||
<uni-data-picker :clear-icon="false" @change="specIdChange"
|
||||
:map="{text:'name',value:'id'}" placeholder="请选择规格" popup-title="请选择规格"
|
||||
:localdata="FormData.specList" v-model="FormData.specId">
|
||||
</uni-data-picker>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="u-m-t-32" v-for="(item,index) in FormData.selectSpec" :key="index">
|
||||
|
||||
<view class="font-bold">
|
||||
{{item.name}}
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24">
|
||||
|
||||
<uni-data-checkbox @change="createResult" multiple :selectedColor="color.ColorMain"
|
||||
v-model="item.selectSpecResult" :localdata="item.value"></uni-data-checkbox>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="block u-m-b-32" v-for="(item,index) in FormData.result" :key="index">
|
||||
|
||||
<view class="">
|
||||
<view class="u-m-t-16" v-for="(val,key) in item.names" :key="key">
|
||||
<text class="font-bold u-m-r-12">
|
||||
{{key}}
|
||||
</text>
|
||||
<text class="color-999">{{val}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<view label="">
|
||||
<view class="font-bold">
|
||||
图片
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<my-upload-file @change="changeResultCover($event,index)" :limit="1" :ref="setRefFile(index)" :images="item.coverImg"></my-upload-file>
|
||||
</view>
|
||||
<!-- <uni-file-picker v-model="FormData.images" file-mediatype="image" mode="grid"
|
||||
:limit="10" @progress="FileUploadprogress" @success="FileUploadsuccess"
|
||||
@fail="FileUploadail" @select="FileUploadselect" /> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="skus u-m-t-32">
|
||||
<view class="">
|
||||
<uni-forms-item label="售价" required>
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'salePrice')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.salePrice" type="digit"
|
||||
placeholder="请输入售价（元）" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<uni-forms-item label="会员价（元）" required>
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'memberPrice')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.memberPrice" type="digit"
|
||||
placeholder="请输入会员价（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="成本价（元）" required>
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'costPrice')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.costPrice" type="digit"
|
||||
placeholder="请输入成本价（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="原价（元）" required>
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'originPrice')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.originPrice" type="digit"
|
||||
placeholder="请输入原价（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="起售数量" required>
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'suit')" :paddingNone="inputPaddingNone"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.skus.suit" type="digit" placeholder="请输入起售数量" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="库存数量" required>
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'stockNumber')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.stockNumber" type="digit"
|
||||
placeholder="请输入库存数量" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="分销金额" required>
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'firstShared')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.firstShared" type="digit"
|
||||
placeholder="请输入起售数量" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品条码" required>
|
||||
<uni-easyinput disabled :paddingNone="inputPaddingNone"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.skus.barCode" placeholder="请输入起售数量" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
|
||||
<view class="save-btn-box">
|
||||
<button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom" ref="bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import myUploadFile from '@/components/my-components/my-upload-file'
|
||||
import {
|
||||
formatPrice
|
||||
} from "@/commons/utils/format.js";
|
||||
|
||||
const refFiles = ref([]);
|
||||
//绑定文件上传元素
|
||||
function setRefFile(index) {
|
||||
refFiles.value[index] = null;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
refFiles.value[index] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//上个页面传来的参数
|
||||
let option={}
|
||||
|
||||
|
||||
//number类型数据限制
|
||||
function priceFormat(item, key) {
|
||||
nextTick(() => {
|
||||
const min = 0;
|
||||
const max = 100000000;
|
||||
console.log(item[key]);
|
||||
const newval = formatPrice(item[key], min, max, true)
|
||||
if (typeof newval !== 'number') {
|
||||
item[key] = newval.value
|
||||
uni.showToast({
|
||||
title: `请输入${min}到${max}范围内的数字`,
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
item[key] = newval
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
import dayjs from "dayjs";
|
||||
import go from '@/commons/utils/go.js';
|
||||
import color from '@/commons/color.js';
|
||||
import {
|
||||
$defaultSku
|
||||
} from '../goodsData.js'
|
||||
import {
|
||||
$productSpec
|
||||
} from '@/http/yskApi/goods.js';
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
watch
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const inputPaddingNone = ref(true)
|
||||
const form = ref(null)
|
||||
const originSpecMap={}
|
||||
const FormData = reactive({
|
||||
specId: '',
|
||||
specItem: '',
|
||||
result: [],
|
||||
selectSpec: [],
|
||||
})
|
||||
//表单相关事件
|
||||
function changeResultCover(val,index) {
|
||||
FormData.result[index].coverImg=val
|
||||
console.log(FormData.result[index]);
|
||||
}
|
||||
|
||||
watch(() => FormData.specId, (newval) => {
|
||||
FormData.result = []
|
||||
})
|
||||
const bottom = ref(null)
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
|
||||
//生成笛卡尔集
|
||||
|
||||
function combineSpecs(specs) {
|
||||
if (specs.length === 0) {
|
||||
return [
|
||||
[]
|
||||
];
|
||||
} else {
|
||||
const [head, ...tail] = specs;
|
||||
const rest = combineSpecs(tail);
|
||||
const pairs = head.value.map(value => rest.map(r => {
|
||||
return {
|
||||
[head.name]: value,
|
||||
...r
|
||||
}
|
||||
}));
|
||||
return [].concat(...pairs);
|
||||
}
|
||||
};
|
||||
const defaultSku = reactive({
|
||||
...$defaultSku,
|
||||
shopId:uni.getStorageSync('shopId'),
|
||||
coverImg:'',
|
||||
productId:option.productId,
|
||||
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
|
||||
})
|
||||
|
||||
function returnDefaultSku(){
|
||||
const randomNumber=Math.floor(Math.random()*1000)
|
||||
return {
|
||||
...defaultSku,
|
||||
productId:option.productId,
|
||||
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()-randomNumber}`
|
||||
}
|
||||
}
|
||||
|
||||
function createResult() {
|
||||
let arr = []
|
||||
for (let k of FormData.selectSpec) {
|
||||
if (k.selectSpecResult.length) {
|
||||
arr.push({
|
||||
value: k.selectSpecResult,
|
||||
name: k.name
|
||||
})
|
||||
}
|
||||
}
|
||||
const spes = combineSpecs(arr)
|
||||
FormData.result = spes.filter(v => {
|
||||
return !Array.isArray(v)
|
||||
}).map(v => {
|
||||
const specSnap=returnSpecSnap(v)
|
||||
const data= originSpecMap[specSnap]
|
||||
const skus=returnDefaultSku()
|
||||
const newdata={
|
||||
names: v,
|
||||
specSnap,
|
||||
skus
|
||||
}
|
||||
return data||newdata
|
||||
})
|
||||
console.log(FormData.result);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function specIdChange(e) {
|
||||
console.log(e);
|
||||
const item = FormData.specList.find(v => v.id === FormData.specId)
|
||||
FormData.selectSpec = (item.specList || [])
|
||||
|
||||
}
|
||||
//获取规格数据
|
||||
function getTbProductSpec() {
|
||||
$productSpec.get({
|
||||
page: 0,
|
||||
size: 200,
|
||||
sort: "id"
|
||||
}).then(res => {
|
||||
FormData.specList = res.content.map(item => {
|
||||
return {
|
||||
...item,
|
||||
specList: item.specList.map(spe => {
|
||||
return {
|
||||
...spe,
|
||||
selectSpecResult: [],
|
||||
value: spe.value.map(v => {
|
||||
return {
|
||||
text: v,
|
||||
value: v
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//表单验证
|
||||
const rules = {
|
||||
optionPrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//页面滚动到最底部
|
||||
function scrollPageBottom() {
|
||||
nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
duration: 100, // 过渡时间
|
||||
scrollTop: 100000, // 滚动的实际距离
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let emitName = ''
|
||||
|
||||
function triggerEvent(emitName, data) {
|
||||
if (emitName) {
|
||||
uni.$emit(emitName, data)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//生成name
|
||||
function returnSpecSnap(names){
|
||||
const specSnap=Object.keys(names).reduce((prve,cur)=>{
|
||||
return prve+names[cur]+','
|
||||
},'')
|
||||
return specSnap.substring(0,specSnap.length-1)
|
||||
}
|
||||
|
||||
|
||||
onLoad(opt => {
|
||||
getTbProductSpec()
|
||||
const obj = uni.getStorageSync('guige')
|
||||
if (obj&&JSON.stringify(obj) !== '{}') {
|
||||
option.productId=opt.productId
|
||||
Object.assign(FormData, obj)
|
||||
for(let i of obj.result){
|
||||
const key=returnSpecSnap(i.names)
|
||||
originSpecMap[key]=i
|
||||
}
|
||||
console.log(FormData);
|
||||
nextTick(() => {
|
||||
FormData.result = obj.result
|
||||
})
|
||||
}
|
||||
console.log(opt);
|
||||
if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) {
|
||||
emitName = opt.emitName
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function emitspecificationsSave() {
|
||||
// emitspecificationsSave 触发规格保存事件将数据给到添加商品页面
|
||||
// guigeEdit 触发规格保存事件将数据给到添加规格页面
|
||||
uni.removeStorageSync('guige')
|
||||
triggerEvent(emitName, FormData)
|
||||
go.back()
|
||||
}
|
||||
|
||||
function returnPromise(prosise) {
|
||||
return new Promise((resolve, reject) => {
|
||||
prosise.then(res => {
|
||||
console.log(res);
|
||||
resolve({
|
||||
sucees: true
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
resolve({
|
||||
sucees: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
async function save() {
|
||||
let isAllPassForm = 0
|
||||
const res = await returnPromise(form.value.validate())
|
||||
//判断验证是否通过
|
||||
if (res.sucees) {
|
||||
console.log('pass');
|
||||
console.log(FormData);
|
||||
emitspecificationsSave()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
::v-deep.uni-forms-item__content {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item__error {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .option .uni-forms-item {
|
||||
padding: 0;
|
||||
min-height: inherit;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
&:before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
background-color: $my-main-color;
|
||||
|
||||
&::before {
|
||||
width: $icon-line-height;
|
||||
height: $icon-line-width;
|
||||
top: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: 4rpx;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.icon-reduce {
|
||||
background-color: $my-red-color;
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: $icon-line-height;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.lh40 {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
align-items: inherit;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item .uni-forms-item__label {
|
||||
text-indent: 0;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
44
jeepay-ui-uapp-merchant/pageProduct/components/my-tabs.vue
Normal file
44
jeepay-ui-uapp-merchant/pageProduct/components/my-tabs.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view class="u-flex tabs">
|
||||
<view class="u-flex-1 u-text-center item"
|
||||
:class="{active:index===current}"
|
||||
@tap="changeCurrent(index)" v-for="(item,index) in props.list" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
const props=defineProps({
|
||||
list:{type:Array}
|
||||
})
|
||||
const emit=defineEmits(['change'])
|
||||
let current=ref(0)
|
||||
function changeCurrent(index){
|
||||
current.value=index
|
||||
}
|
||||
watch(()=>current.value,()=>{
|
||||
emit('change',current.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabs{
|
||||
padding: 4rpx 10rpx;
|
||||
background: #E6F0FF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-size: 28rpx;
|
||||
color: #318AFE;
|
||||
.item{
|
||||
padding: 8rpx 0;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
.item.active{
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
jeepay-ui-uapp-merchant/pageProduct/goodsData.js
Normal file
73
jeepay-ui-uapp-merchant/pageProduct/goodsData.js
Normal file
@@ -0,0 +1,73 @@
|
||||
import dayjs from "dayjs";
|
||||
export const $types = [{
|
||||
title: "计量商品",
|
||||
desc: '单价购买',
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
title: "多规格",
|
||||
desc: '多种不同规格',
|
||||
value: 'sku'
|
||||
},
|
||||
{
|
||||
title: "套餐组合",
|
||||
desc: '选择多种组合',
|
||||
value: 'group'
|
||||
},
|
||||
{
|
||||
title: "称重商品",
|
||||
desc: '按重量售卖',
|
||||
value: 'weight'
|
||||
},
|
||||
{
|
||||
title: "时价商品",
|
||||
desc: '收银端可更改价格',
|
||||
value: 'currentPrice'
|
||||
}
|
||||
]
|
||||
|
||||
// 商品默认sku
|
||||
export const $defaultSku = {
|
||||
salePrice: 0,
|
||||
memberPrice: 0,
|
||||
costPrice: 0,
|
||||
originPrice: 0,
|
||||
stockNumber: 0,
|
||||
firstShared: 0,
|
||||
suit: 0,
|
||||
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`,
|
||||
}
|
||||
|
||||
// 库存记录筛选类型
|
||||
export const $invoicingType = [{
|
||||
text: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '供应商入库',
|
||||
value: 'purveyor'
|
||||
},
|
||||
{
|
||||
text: '供应商退货',
|
||||
value: 'reject'
|
||||
},
|
||||
{
|
||||
text: '其他入库',
|
||||
value: 'purchase'
|
||||
},
|
||||
{
|
||||
text: '其他出库',
|
||||
value: 'other-out'
|
||||
}
|
||||
]
|
||||
|
||||
// 页面常用数据
|
||||
export const $pageData = {
|
||||
query: {
|
||||
page: 0,
|
||||
size: 10
|
||||
},
|
||||
totalElements: 0,
|
||||
list: [],
|
||||
hasAjax: false,
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="category " :style="getCompouteStyle()">
|
||||
<scroll-view scroll-y="true" :style="{height:props.height+'rpx'}">
|
||||
<view class="list">
|
||||
<view class="item" @tap="cateClick(item)" v-for="(item,index) in 20" :key="index">
|
||||
分类
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref, warn, watch, watchEffect,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import {$tbShopCategory} from '@/http/yskApi/goods.js'
|
||||
const emite=defineEmits(['cateClick'])
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 264
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 420
|
||||
},
|
||||
right: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
},
|
||||
bottom: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
let show = ref(false)
|
||||
|
||||
function open() {
|
||||
show.value = true
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
show.value = !show.value
|
||||
}
|
||||
|
||||
function cateClick(item){
|
||||
emite('cateClick',item)
|
||||
}
|
||||
|
||||
function getCompouteStyle() {
|
||||
return {
|
||||
width: props.width + 'rpx',
|
||||
height: props.height + 'rpx',
|
||||
right: props.right + 'rpx',
|
||||
bottom: props.bottom + 'rpx',
|
||||
transform:`scaleY(${show.value?1:0})`
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
$tbShopCategory({
|
||||
page:0,size:200
|
||||
})
|
||||
})
|
||||
defineExpose({
|
||||
open,
|
||||
close,toggle
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.category {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
position: fixed;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
.list{
|
||||
box-sizing: border-box;
|
||||
.item{
|
||||
padding: 24rpx 24rpx 24rpx 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="category " :style="getCompouteStyle()">
|
||||
<scroll-view scroll-y="true" :style="{height:props.height+'rpx'}">
|
||||
<view class="list">
|
||||
<view v-if="showAllText" class="font-bold item border-bottom u-font-28" @tap="cateClick({id:'',name:'全部分类'})">全部分类</view>
|
||||
<view v-for="(item,index) in category.list" :key="index">
|
||||
<view class="item font-bold border-bottom" @tap="cateClick(item)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="item border-bottom" @tap="cateClick(child)"
|
||||
v-for="(child,childIndex) in item.childrenList"
|
||||
:key="childIndex" >
|
||||
<text> </text>
|
||||
{{child.name}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref, warn, watch, watchEffect,
|
||||
onMounted,reactive
|
||||
} from 'vue';
|
||||
import {$tbShopCategory} from '@/http/yskApi/goods.js'
|
||||
const emite=defineEmits(['cateClick','change'])
|
||||
const props = defineProps({
|
||||
showAllText:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 264
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 420
|
||||
},
|
||||
right: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
},
|
||||
bottom: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
let show = ref(false)
|
||||
|
||||
watch(()=>show.value,(newval)=>{
|
||||
emite('change',newval)
|
||||
})
|
||||
|
||||
function open() {
|
||||
show.value = true
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
show.value = !show.value
|
||||
}
|
||||
|
||||
function cateClick(item){
|
||||
emite('cateClick',item)
|
||||
close()
|
||||
}
|
||||
|
||||
function getCompouteStyle() {
|
||||
return {
|
||||
width: props.width + 'rpx',
|
||||
height: props.height + 'rpx',
|
||||
right: props.right + 'rpx',
|
||||
bottom: props.bottom + 'rpx',
|
||||
transform:`scaleY(${show.value?1:0})`
|
||||
}
|
||||
}
|
||||
const category=reactive({
|
||||
list:[],
|
||||
categoryId:'',
|
||||
categoryName:'',
|
||||
|
||||
})
|
||||
onMounted(()=>{
|
||||
$tbShopCategory({
|
||||
page:0,size:200
|
||||
}).then(res=>{
|
||||
category.list=res.content
|
||||
})
|
||||
})
|
||||
defineExpose({
|
||||
open,
|
||||
close,toggle
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.category {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
position: fixed;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
.list{
|
||||
box-sizing: border-box;
|
||||
.item{
|
||||
padding: 24rpx 24rpx 24rpx 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
jeepay-ui-uapp-merchant/pageProduct/index/components/control.vue
Normal file
161
jeepay-ui-uapp-merchant/pageProduct/index/components/control.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<view class="control" :style="getComputedStyle()">
|
||||
<view class="u-flex control1" v-if="showControl1">
|
||||
<view class="btn" @click="changeShowControl1">批量管理</view>
|
||||
<view class="btn" @tap="go.to('PAGES_PRODUCT_ADD')">商品添加</view>
|
||||
<view class="color-999 btn u-flex u-row-center" @click="emitToggleCategory">
|
||||
<text class="u-m-r-10">{{categoryName||'选择分类'}}</text>
|
||||
<view class="arrow-down" :class="{'up':categoryShow}">
|
||||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex control2 u-row-between" v-else>
|
||||
<view class="u-flex btn">
|
||||
<view class="u-m-r-58">
|
||||
<label class="radio" @click="changeIsSelectAll">
|
||||
<radio class="scale7" @tap.stop="changeIsSelectAll" :color="ColorMain" value="" :checked="isSelectAll" />
|
||||
<text>全选</text>
|
||||
</label>
|
||||
</view>
|
||||
<view class="u-p-l-30 u-p-r-30 my-bg-main" @click="changeShowControl1">取消</view>
|
||||
<view class="u-p-l-60 u-p-r-60 borde-r" @click="offShelf">下架</view>
|
||||
</view>
|
||||
<view class=" u-flex u-row-center btn" @click="emitToggleCategory">
|
||||
<text class="u-m-r-10">分类至</text>
|
||||
<uni-icons type="right" size="16" color="#fff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {$tbShopCategory} from '@/http/yskApi/goods.js'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {ColorMain} from '@/commons/color.js'
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
bottom: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
},
|
||||
categoryName:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
categoryShow:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
let showControl1 = ref(true)
|
||||
const emits = defineEmits(['toggleCategory','controlChange','allCheckedChange','offShelf','categoryChange'])
|
||||
|
||||
function emitToggleCategory() {
|
||||
emits('toggleCategory')
|
||||
}
|
||||
|
||||
function changeShowControl1() {
|
||||
showControl1.value = !showControl1.value
|
||||
emits('controlChange',!showControl1.value)
|
||||
}
|
||||
|
||||
let isSelectAll = ref(false)
|
||||
|
||||
function changeIsSelectAll() {
|
||||
isSelectAll.value = !isSelectAll.value
|
||||
emits('allCheckedChange',isSelectAll.value)
|
||||
}
|
||||
|
||||
function getComputedStyle() {
|
||||
return {
|
||||
bottom: props.bottom + 'rpx'
|
||||
}
|
||||
}
|
||||
//设置是否全选
|
||||
function setisSelectAll(checked){
|
||||
isSelectAll.value =checked
|
||||
}
|
||||
defineExpose({
|
||||
setisSelectAll
|
||||
})
|
||||
|
||||
//下架
|
||||
function offShelf(){
|
||||
emits('offShelf')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scale7 {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.borde-r {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
bottom: 20rpx;
|
||||
width: 2px;
|
||||
background-color: #fff;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
z-index: 100;
|
||||
background: #3E3A3A;
|
||||
border-radius: 100rpx;
|
||||
.btn{
|
||||
color: #fff;
|
||||
}
|
||||
.control1 {
|
||||
.arrow-down {
|
||||
transform: rotate(90deg);
|
||||
transition: all .2s ease-in-out;
|
||||
&.up{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control1 .btn:not(:last-child)::after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
bottom: 20rpx;
|
||||
width: 2px;
|
||||
background-color: #fff;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.control1 .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.control1 .btn,
|
||||
.control2 .btn{
|
||||
position: relative;
|
||||
line-height: 76rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.control2 {
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
265
jeepay-ui-uapp-merchant/pageProduct/index/components/goods.vue
Normal file
265
jeepay-ui-uapp-merchant/pageProduct/index/components/goods.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view class=" goods">
|
||||
<view class="u-flex u-row-between">
|
||||
<view class="u-flex">
|
||||
<view class="color-333">
|
||||
<text class="">排序</text>
|
||||
<text class="u-m-l-20">{{data.sort}}</text>
|
||||
</view>
|
||||
<view class="color-333 u-m-l-42 u-flex">
|
||||
<text class="stock">库存</text>
|
||||
<text class="font-bold u-m-l-10">{{data.stockNumber}}</text>
|
||||
<uni-icons type="right" size="16" color="#000"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<text class="u-font-28 color-666" @click="changeClick">修改</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-m-t-48 u-flex">
|
||||
<view v-if="props.showChecked">
|
||||
<label class="radio">
|
||||
<radio :color="ColorMain" style="transform: scale(0.7);" @click="radioClick"
|
||||
:checked="props.data.checked" /><text></text>
|
||||
</label>
|
||||
</view>
|
||||
<image :src="data.coverImg" lazy-load class="img"></image>
|
||||
<view class="h-100 u-p-l-16 u-flex u-flex-col u-row-between">
|
||||
<view class="color-333"> <text class="u-m-r-24">{{data.name}}</text><uni-tag size="small" type="primary"
|
||||
custom-style="background-color: #318AFE;" :text="data.typeEnum"></uni-tag></view>
|
||||
|
||||
<view class="price">¥{{data.lowPrice}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-16 skus u-text-center" v-if="showDetail&&data.skuList.length>=2">
|
||||
<view class="u-flex u-row-between font-bold">
|
||||
<view class="u-flex-1">商品信息</view>
|
||||
<view class="u-flex-1">售价</view>
|
||||
<view class="u-flex-1">库存</view>
|
||||
</view>
|
||||
<view v-for="(item,index) in data.skuList" :key="index">
|
||||
<view class="u-flex u-m-t-10">
|
||||
<view class="color-333 u-flex-1"> <text class="u-m-r-24">{{item.specSnap||''}}</text></view>
|
||||
<view class="price u-flex-1">¥{{data.lowPrice||0}}</view>
|
||||
<view class=" u-flex-1">{{item.stockNumber||0}} {{data.unitName||''}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="u-flex">
|
||||
<view class="sku">做法</view>
|
||||
<view class="u-flex u-flex-wrap u-flex-1 skds">
|
||||
<view class="skd">汤
|
||||
<view class="tag-primary tag">上架中</view>
|
||||
</view>
|
||||
<view class="skd">干
|
||||
<view class="tag-primary tag">上架中</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-24 u-flex u-row-between">
|
||||
<view class="u-flex">
|
||||
<view class="u-m-r-18 color-999">设置热门</view>
|
||||
<my-switch v-model="data.isHot" @change="isHotChange"></my-switch>
|
||||
<!-- <view class="u-m-r-18 color-999">售罄</view>
|
||||
<my-switch v-model="isSellNone" @change="isSellNoneChange"></my-switch> -->
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<!-- <view class="btn-default btn" @tap="xiajia">下架商品</view> -->
|
||||
<view class="btn-default btn" @tap="del">删除</view>
|
||||
<view class="btn-primary btn u-m-l-38" @click="toEdit">编辑</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
watchEffect
|
||||
} from 'vue';
|
||||
import {$goodsIsHot} from '@/http/yskApi/goods.js'
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
ColorMain
|
||||
} from '@/commons/color.js'
|
||||
const emits = defineEmits(['radioClick', 'changeClick', 'xiajia','del'])
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
showChecked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showDetail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function isHotChange(e){
|
||||
$goodsIsHot({
|
||||
id:props.data.id,
|
||||
isHot:props.data.isHot
|
||||
}).then(res=>{
|
||||
uni.showToast({
|
||||
title:'修改成功',
|
||||
icon:'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let isSellNone = ref(false)
|
||||
isSellNone.value = props.isSellNone
|
||||
|
||||
function isSellNoneChange() {
|
||||
console.log(isSellNone.value);
|
||||
console.log('isSellNoneChange');
|
||||
}
|
||||
|
||||
let checked = ref(false)
|
||||
|
||||
|
||||
function radioClick() {
|
||||
console.log(props.index);
|
||||
emits('radioClick', props.index)
|
||||
}
|
||||
|
||||
function changeClick() {
|
||||
emits('changeClick', props.index)
|
||||
}
|
||||
|
||||
function xiajia() {
|
||||
emits('xiajia', props.index)
|
||||
}
|
||||
function del(){
|
||||
emits('del', props.index)
|
||||
}
|
||||
|
||||
//携带参数type edit跳转到商品添加页面，编辑与添加同一页面，根据type值来判断
|
||||
function toEdit() {
|
||||
go.to('PAGES_PRODUCT_ADD', {
|
||||
type: 'edit',
|
||||
productId: props.data.id
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$imgSize: 126rpx;
|
||||
$price-color: #F02C45;
|
||||
|
||||
.btn {
|
||||
padding: 6rpx 28rpx;
|
||||
border-radius: 100rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: $my-main-color;
|
||||
;
|
||||
color: $my-main-color;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border-color: #F4F4F4;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: $price-color;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: $imgSize;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: $imgSize;
|
||||
height: $imgSize;
|
||||
}
|
||||
|
||||
.icon-arrow-right {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.stock {
|
||||
// padding-right: 46rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stock::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// right: 10rpx;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// display: block;
|
||||
// width: 16rpx;
|
||||
// border: 2rpx solid #333333;
|
||||
}
|
||||
|
||||
.goods {
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
background-color: #fff;
|
||||
padding: 24rpx 28rpx 16rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.skus {
|
||||
background: #F9F9F9;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 28rpx 42rpx;
|
||||
|
||||
.sku {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
padding: 6rpx 40rpx;
|
||||
}
|
||||
|
||||
.skds {
|
||||
gap: 10rpx 50rpx;
|
||||
}
|
||||
|
||||
.skd {
|
||||
padding: 14rpx 40rpx;
|
||||
background: #F0F2F5;
|
||||
border-radius: 4rpx;
|
||||
position: relative;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 12rpx;
|
||||
right: 0;
|
||||
padding: 2rpx 4rpx;
|
||||
border-radius: 0rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
|
||||
.tag-primary {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
505
jeepay-ui-uapp-merchant/pageProduct/index/index.vue
Normal file
505
jeepay-ui-uapp-merchant/pageProduct/index/index.vue
Normal file
@@ -0,0 +1,505 @@
|
||||
<template>
|
||||
<view class="safe-page">
|
||||
<view class="bg-fff u-p-l-30 u-p-t-16 u-p-r-30 u-p-b-30">
|
||||
<view class="myTabs ">
|
||||
<myTabs :list="tabsList" @change="tabsChange"></myTabs>
|
||||
</view>
|
||||
<view class="input-wrapper">
|
||||
<view class="input-main">
|
||||
<uni-easyinput
|
||||
clearable
|
||||
class='jeepay-search' :inputBorder="false" :placeholder="pageData.search.placeholder"
|
||||
v-model="pageData.query.name" @confirm="searchFunc">
|
||||
<template #prefixIcon>
|
||||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
<button type="text" @click="searchFunc()">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-20 u-p-l-30 u-p-r-30 u-font-28 u-p-b-20 border-bottom">
|
||||
<view class="u-flex-1 tranistion u-text-center color-333"
|
||||
:class="{'color-main':pageData.stateCurrent==index}" @tap="statesTableClick(index)"
|
||||
v-for="(item,index) in statesTabsList" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex states1 u-row-between u-font-28">
|
||||
<view class="u-flex">
|
||||
<view class="u-p-l-16 item u-p-r-16 u-p-t-6 u-p-b-6 tranistion u-text-center color-333"
|
||||
:class="{'active':pageData.stateCurrent1==index}" @tap="states1TableClick(index)"
|
||||
v-for="(item,index) in states1TabsList" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-col-center" @click="go.to('PAGES_PRODUCT_SPECIF_TEMPLATE')">
|
||||
<image src="/pageProduct/static/images/icon-guige.svg" class="icon-guige" />
|
||||
<text class="color-666 u-m-l-12 u-font-24">规格模版</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="goods-list u-p-30" >
|
||||
<template v-if="pageData.goodsList.length">
|
||||
<view class="u-m-b-32" v-for="(item,index) in pageData.goodsList" :key="index">
|
||||
<my-goods @changeClick="goodsChangeClick" @radioClick="goodsRadioClick" :index="index" :data="item"
|
||||
@del="goodsDel"
|
||||
:showChecked="showChecked" :showDetail="pageData.showGoodsDetail"></my-goods>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="pageData.hasAjax&&!pageData.goodsList.length">
|
||||
<my-img-empty tips="未找到相关商品"></my-img-empty>
|
||||
</template>
|
||||
<my-pagination :totalElements="pageData.totalElements" :size="pageData.query.size" @change="pageChange"></my-pagination>
|
||||
<view style="height: 100rpx;"></view>
|
||||
</view>
|
||||
|
||||
<my-control ref="control"
|
||||
:categoryShow="pageData.categoryShow"
|
||||
:categoryName="pageData.categoryName"
|
||||
@categoryChange="categoryIdChange"
|
||||
@offShelf="offShelf" @allCheckedChange="allCheckedChange"
|
||||
@controlChange="controlChange" @toggleCategory="toggleCategory"
|
||||
:bottom="pageData.componentBottom"></my-control>
|
||||
<my-category ref="category"
|
||||
@change="onCategoryShowChange" @cateClick="cateClick" :bottom="pageData.componentBottom+100"></my-category>
|
||||
<!-- 下架弹窗 -->
|
||||
<my-model :desc="pageData.modelDesc" ref="model" @confirm="modelConfirm"></my-model>
|
||||
<!-- 商品库存修改弹窗 -->
|
||||
<my-model ref="goodsStockModel" title="商品修改" @close="goodsStockModelClose">
|
||||
<template #desc>
|
||||
<view class="u-p-40 u-text-left">
|
||||
<view>
|
||||
<view class="">排序:</view>
|
||||
<view class="u-m-t-24">
|
||||
<uni-easyinput v-model="goodsStockData.sort" placeholder="请输入排序"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-32">
|
||||
<view class="">库存开关:</view>
|
||||
<view class="u-m-l-46 ">
|
||||
<my-switch v-model="goodsStockData.isStock"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="u-flex u-m-t-32">
|
||||
<view class="">共享库存:</view>
|
||||
<view class="u-m-l-46 ">
|
||||
<my-switch v-model="goodsStockData.isDistribute"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-32">
|
||||
<view class="">售罄:</view>
|
||||
<view class="u-m-l-46 ">
|
||||
<my-switch v-model="goodsStockData.isPauseSale"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-32">
|
||||
<view class="">上架:</view>
|
||||
<view class="u-m-l-46 ">
|
||||
<my-switch v-model="goodsStockData.isGrounding"></my-switch>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="u-m-t-24 u-m-t-32" v-if="goodsStockData.isStock">
|
||||
<view class="">数量:</view>
|
||||
<view class="u-m-t-24">
|
||||
<uni-easyinput v-model="goodsStockData.stockNumber" placeholder="请输入库存数量"></uni-easyinput>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="stock-btns u-p-b-40">
|
||||
<my-button shape="circle" @tap="goodsStockModelSave">保存</my-button>
|
||||
<my-button shape="circle" type="default" @tap="goodsStockModelCancel">取消</my-button>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myTabs from '@/pageProduct/components/my-tabs.vue'
|
||||
import myGoods from './components/goods.vue'
|
||||
import myControl from './components/control.vue'
|
||||
import myCategory from './components/category.vue'
|
||||
import infoBox from "@/commons/utils/infoBox.js"
|
||||
import myPagination from '@/components/my-components/my-pagination'
|
||||
import myModel from "@/components/my-components/my-model.vue"
|
||||
import myButton from "@/components/my-components/my-button.vue"
|
||||
import mySwitch from "@/components/my-components/my-switch.vue"
|
||||
import {
|
||||
$tbProduct,
|
||||
$upProSort,
|
||||
$updateProduct,$getProductDetail,$delProduct,$updateProductStatus
|
||||
} from "@/http/yskApi/goods.js"
|
||||
const pageData = reactive({
|
||||
modelDesc: '是否下架',
|
||||
stateCurrent: 0,
|
||||
stateCurrent1: 0,
|
||||
componentBottom: 45,
|
||||
search: {
|
||||
value: '',
|
||||
placeholder: '输入搜索的商品'
|
||||
},
|
||||
showGoodsDetail: false,
|
||||
selGoodsIndex: '',
|
||||
totalElements: 0,
|
||||
totalPage: 0,
|
||||
goodsList: [],
|
||||
query: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
categoryId:'',
|
||||
name:''
|
||||
},
|
||||
category:'',
|
||||
categoryShow:false,
|
||||
categoryName:'',
|
||||
hasAjax:false
|
||||
})
|
||||
function onCategoryShowChange(show){
|
||||
console.log(show);
|
||||
pageData.categoryShow=show
|
||||
}
|
||||
function categoryIdChange(categoryId){
|
||||
pageData.query.categoryId=categoryId
|
||||
getGoodsList()
|
||||
}
|
||||
function getGoodsList() {
|
||||
$tbProduct(pageData.query).then(res => {
|
||||
pageData.hasAjax=true
|
||||
console.log(res);
|
||||
pageData.goodsList = res.content.map(v => {
|
||||
return {
|
||||
...v,
|
||||
isSellNone: false,
|
||||
checked: false,
|
||||
showDetail: false
|
||||
}
|
||||
})
|
||||
pageData.totalElements = res.totalElements
|
||||
})
|
||||
}
|
||||
onShow(() => {
|
||||
getGoodsList()
|
||||
})
|
||||
|
||||
const tabsList = ['简洁', '详情']
|
||||
const statesTabsList = ['在售中', '已下架']
|
||||
const states1TabsList = ['全部', '已售罄']
|
||||
const control = ref(null)
|
||||
const model = ref(null)
|
||||
const goodsStockModel = ref(null)
|
||||
|
||||
function returnGoodsStockData() {
|
||||
return reactive({
|
||||
sort: 0,
|
||||
isStock: false,
|
||||
isDistribute:false,
|
||||
isPauseSale:false,
|
||||
isGrounding:false,
|
||||
stockNumber: 0,
|
||||
})
|
||||
}
|
||||
let goodsStockData = returnGoodsStockData()
|
||||
|
||||
function goodsStockModelClose() {
|
||||
console.log('goodsStockModelClose');
|
||||
goodsStockData = returnGoodsStockData()
|
||||
}
|
||||
|
||||
function goodsStockModelCancel() {
|
||||
console.log('goodsStockModelCancel');
|
||||
goodsStockModel.value.close()
|
||||
goodsStockData = returnGoodsStockData()
|
||||
}
|
||||
|
||||
async function goodsStockModelSave() {
|
||||
const item = pageData.goodsList[pageData.selGoodsIndex]
|
||||
const goods =await $getProductDetail(item.id,false)
|
||||
$updateProduct({
|
||||
...goods,
|
||||
sort:goodsStockData.sort,
|
||||
isStock:goodsStockData.isStock
|
||||
}).then(res=>{
|
||||
item.sort=goodsStockData.sort
|
||||
item.isStock=goodsStockData.isStock
|
||||
item.stockNumber=goodsStockData.stockNumber
|
||||
goodsStockModelCancel()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
//点击修改按钮弹出修改商品弹窗
|
||||
function goodsChangeClick(index) {
|
||||
pageData.selGoodsIndex = index
|
||||
const goods = pageData.goodsList[index]
|
||||
Object.assign(goodsStockData,goods)
|
||||
goodsStockModel.value.open()
|
||||
}
|
||||
//删除商品
|
||||
function goodsDel(index){
|
||||
const goods = pageData.goodsList[index]
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除该商品',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
$delProduct([goods.id]).then(res=>{
|
||||
uni.showToast({
|
||||
title:'删除成功',
|
||||
icon:'none'
|
||||
})
|
||||
pageData.goodsList.splice(index,1)
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function statesTableClick(index) {
|
||||
pageData.stateCurrent = index
|
||||
}
|
||||
|
||||
function states1TableClick(index) {
|
||||
pageData.stateCurrent1 = index
|
||||
}
|
||||
|
||||
let test = ref(false)
|
||||
|
||||
function tabsChange(i) {
|
||||
console.log(i);
|
||||
pageData.showGoodsDetail = i ? true : false
|
||||
}
|
||||
|
||||
|
||||
//改变商品的选中状态
|
||||
function changeGoodsChecked(checked, index) {
|
||||
if (index !== undefined) {
|
||||
pageData.goodsList[index].checked = checked
|
||||
} else {
|
||||
pageData.goodsList.map(v => {
|
||||
v.checked = checked
|
||||
})
|
||||
}
|
||||
control.value.setisSelectAll(isAllChecked() ? true : false)
|
||||
}
|
||||
|
||||
|
||||
// 获取已经选中的商品
|
||||
function getChechkedGoodsList() {
|
||||
return pageData.goodsList.filter(v => v.checked)
|
||||
}
|
||||
//是否全部选中
|
||||
function isAllChecked() {
|
||||
return getChechkedGoodsList().length === pageData.goodsList.length
|
||||
}
|
||||
// 是否有商品选中
|
||||
function isHasChekdGoods() {
|
||||
return getChechkedGoodsList().length ? true : false
|
||||
}
|
||||
|
||||
function searchFunc() {
|
||||
console.log('searchFunc');
|
||||
getGoodsList()
|
||||
}
|
||||
|
||||
let showChecked = ref(false)
|
||||
|
||||
//商品start
|
||||
|
||||
function goodsRadioClick(index) {
|
||||
var checked = !pageData.goodsList[index].checked
|
||||
changeGoodsChecked(checked, index)
|
||||
}
|
||||
|
||||
|
||||
//下架
|
||||
function offShelf() {
|
||||
const hasCheckedArr = getChechkedGoodsList()
|
||||
const hasChecked = isHasChekdGoods()
|
||||
if (!hasChecked) {
|
||||
return infoBox.showToast('您还没有选中商品！')
|
||||
}
|
||||
model.value.open()
|
||||
}
|
||||
//下架确认
|
||||
function modelConfirm() {
|
||||
console.log('confirm');
|
||||
model.value.close()
|
||||
}
|
||||
|
||||
//商品end
|
||||
|
||||
//控制条
|
||||
function controlChange(bol) {
|
||||
showChecked.value = bol
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 全选
|
||||
function allCheckedChange(checked) {
|
||||
changeGoodsChecked(checked)
|
||||
}
|
||||
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
console.log(page);
|
||||
pageData.query.page = page - 1
|
||||
getGoodsList()
|
||||
}
|
||||
|
||||
//分类
|
||||
const category = ref(null)
|
||||
|
||||
function toggleCategory() {
|
||||
category.value.toggle()
|
||||
}
|
||||
|
||||
function cateClick(cate) {
|
||||
console.log(cate);
|
||||
pageData.query.categoryId=cate.id
|
||||
pageData.categoryName=cate.name
|
||||
pageData.category=cate
|
||||
getGoodsList()
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.stock-btns {
|
||||
padding: 0 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.safe-page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.icon-guige {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.bg-fff {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.myTabs {
|
||||
margin: 0 auto;
|
||||
width: 434rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 26rpx;
|
||||
background-color: $J-bg-ff;
|
||||
|
||||
.input-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
|
||||
image {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
::v-deep uni-button {
|
||||
font-size: 28rpx;
|
||||
color: $my-main-color;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
::v-deep.uni-easyinput {
|
||||
.uni-easyinput__content {
|
||||
background-color: $J-bg-f5 !important;
|
||||
border-radius: $J-b-r12;
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
padding-left: 0 !important;
|
||||
|
||||
.uni-input-input {
|
||||
border-radius: $J-b-r12 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-input-placeholder {
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
color: rgba(230, 230, 230, 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: transparent !important;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.states1 {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-right: 70rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
background: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<view class="u-m-b-30 goods">
|
||||
<view class="u-flex color-999">
|
||||
<text class="">{{data.createTime}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-m-t-20 u-flex u-col-top ">
|
||||
<image :src="data.coverImg" lazy-load class="img"></image>
|
||||
<view class=" u-p-l-24 h-100 u-flex u-flex-1 u-col-top u-flex-col u-row-between">
|
||||
<view class="u-flex">
|
||||
<view class="color-333"> <text class="font-bold">{{data.name}}</text></view>
|
||||
<view class="price u-m-l-20">¥{{data.price}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between w-full">
|
||||
<view>
|
||||
<text class="color-999">盈亏数量:</text>
|
||||
<text>{{data.phaseNum}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="color-999">盈亏金额:</text>
|
||||
<text>{{data.phasePrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between w-full">
|
||||
<view>
|
||||
<text class="color-999">账存库存:</text>
|
||||
<text>{{data.stock}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="color-999">实际库存:</text>
|
||||
<text>{{data.inventoryStock}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-flex " v-if="data.note">
|
||||
<view class="color-333">备注:</view>
|
||||
<view class="bg-gray u-m-l-20 u-p-t-10 u-p-b-10 u-p-l-20 u-p-r-20 color-999">{{data.note}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
watchEffect
|
||||
} from 'vue';
|
||||
import {
|
||||
$goodsIsHot
|
||||
} from '@/http/yskApi/goods.js'
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
ColorMain
|
||||
} from '@/commons/color.js'
|
||||
const emits = defineEmits(['radioClick', 'xiajia', 'del'])
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function isHotChange(e) {
|
||||
$goodsIsHot({
|
||||
id: props.data.id,
|
||||
isHot: props.data.isHot
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let isSellNone = ref(false)
|
||||
isSellNone.value = props.isSellNone
|
||||
|
||||
function isSellNoneChange() {
|
||||
console.log(isSellNone.value);
|
||||
console.log('isSellNoneChange');
|
||||
}
|
||||
|
||||
let checked = ref(false)
|
||||
|
||||
|
||||
function radioClick() {
|
||||
console.log(props.index);
|
||||
emits('radioClick', props.index)
|
||||
}
|
||||
|
||||
|
||||
function xiajia() {
|
||||
emits('xiajia', props.index)
|
||||
}
|
||||
|
||||
function del() {
|
||||
emits('del', props.index)
|
||||
}
|
||||
|
||||
//携带参数type edit跳转到商品添加页面，编辑与添加同一页面，根据type值来判断
|
||||
function toEdit() {
|
||||
go.to('PAGES_PRODUCT_ADD', {
|
||||
type: 'edit',
|
||||
productId: props.data.id
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$imgSize: 126rpx;
|
||||
$price-color: #F02C45;
|
||||
|
||||
.btn {
|
||||
padding: 6rpx 28rpx;
|
||||
border-radius: 100rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: $my-main-color;
|
||||
;
|
||||
color: $my-main-color;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border-color: #F4F4F4;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: $price-color;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: $imgSize;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: $imgSize;
|
||||
height: $imgSize;
|
||||
}
|
||||
|
||||
.icon-arrow-right {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.stock {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.goods {
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
background-color: #fff;
|
||||
padding: 24rpx 28rpx 16rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="min-page bg-gray u-p-30">
|
||||
<view v-for="(item,index) in pageData.list" :key="index">
|
||||
<list-item :data="item"></list-item>
|
||||
</view>
|
||||
<view class="u-m-t-44" v-if="pageData.totalElements>0">
|
||||
<my-pagination :size="pageData.query.size" :totalElements="pageData.totalElements"
|
||||
@change="pageChange"></my-pagination>
|
||||
<view style="height: 200rpx;"></view>
|
||||
</view>
|
||||
<template v-if="pageData.hasAjax&&!pageData.list.length">
|
||||
<my-img-empty tips="暂无数据"></my-img-empty>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="u-fixed fixed-b">
|
||||
<my-button shape="circle" @tap="formShow">变动库存</my-button>
|
||||
</view>
|
||||
|
||||
<my-mask ref="refMask">
|
||||
<view class="u-p-30 ">
|
||||
<view class="bg-fff border-r-18 default-box-padding">
|
||||
<uni-forms :label-width="100" ref="refForm" :model="formData">
|
||||
<uni-forms-item label="账存数量" required>
|
||||
<uni-easyinput disabled v-model="formData.stock" placeholder="请输入账存数量" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="实际数量" required>
|
||||
<uni-number-box
|
||||
:max="999999999"
|
||||
v-model="formData.stocktakinNum" ></uni-number-box>
|
||||
<!-- <uni-easyinput v-model="formData.stocktakinNum" placeholder="请输入实际数量" /> -->
|
||||
</uni-forms-item>
|
||||
<view :class="{red:computedNumber<0}">
|
||||
<uni-forms-item label="盈亏数量" required>
|
||||
<uni-easyinput disabled v-model="computedNumber" placeholder="请输入盈亏数量" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<uni-forms-item label="单价" required>
|
||||
<uni-easyinput disabled v-model="formData.price" placeholder="请输入单价" />
|
||||
</uni-forms-item>
|
||||
<view :class="{red:computedMoney<0}">
|
||||
<uni-forms-item label="盈亏金额" required>
|
||||
<uni-easyinput disabled v-model="computedMoney" placeholder="请输入盈亏金额" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<uni-forms-item label="备注" required>
|
||||
<uni-easyinput type="textarea" v-model="formData.note" placeholder="请输入备注" />
|
||||
</uni-forms-item>
|
||||
<view class="u-flex u-m-t-30">
|
||||
<view class="u-flex-1 u-p-r-16">
|
||||
<my-button type="default" shape="circle" @tap="formHide">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1 u-p-l-16">
|
||||
<my-button shape="circle" @tap="addStocktakin">确定</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</my-mask>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
$addStocktakin,
|
||||
$getStocktakin
|
||||
} from '@/http/yskApi/goods.js'
|
||||
import infoBox from "@/commons/utils/infoBox.js"
|
||||
import listItem from './components/list-item';
|
||||
import {
|
||||
$pageData
|
||||
} from '../goodsData.js'
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
const refForm = ref(null)
|
||||
const refMask = ref(null)
|
||||
|
||||
function formShow() {
|
||||
refMask.value.open()
|
||||
}
|
||||
|
||||
function formHide() {
|
||||
formData.note=''
|
||||
refMask.value.close()
|
||||
}
|
||||
const formData = reactive({
|
||||
stock:0,
|
||||
note: '',
|
||||
price:'',
|
||||
productId:"",
|
||||
skuId:'',
|
||||
stocktakinNum:0
|
||||
})
|
||||
const computedMoney=computed(()=>{
|
||||
return (formData.stocktakinNum-formData.stock)*formData.price
|
||||
})
|
||||
|
||||
const computedNumber=computed(()=>{
|
||||
return formData.stocktakinNum-formData.stock
|
||||
})
|
||||
|
||||
const pageData = reactive({
|
||||
...$pageData,
|
||||
query: {
|
||||
...$pageData.query,
|
||||
name: '',
|
||||
skuId: '',
|
||||
sort: 'id,desc'
|
||||
}
|
||||
})
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
pageData.query.page=page-1
|
||||
init()
|
||||
}
|
||||
async function addStocktakin() {
|
||||
const res = await $addStocktakin(formData)
|
||||
infoBox.showToast('添加成功')
|
||||
formHide()
|
||||
init()
|
||||
}
|
||||
async function init() {
|
||||
const res = await $getStocktakin(pageData.query)
|
||||
pageData.hasAjax=true
|
||||
if(pageData.query.page===0&&res.content.length){
|
||||
const zero=res.content[0]
|
||||
formData.stock=zero.inventoryStock*1
|
||||
formData.stocktakinNum=formData.stock
|
||||
formData.price=zero.price
|
||||
}else{
|
||||
formData.stock=option.stock*1
|
||||
formData.stocktakinNum=formData.stock
|
||||
formData.price=option.price*1
|
||||
}
|
||||
pageData.list = res.content
|
||||
pageData.totalElements = res.totalElements
|
||||
}
|
||||
let option={}
|
||||
onLoad(opt => {
|
||||
console.log(opt);
|
||||
if (JSON.stringify(opt) !== '{}') {
|
||||
option=opt
|
||||
Object.assign(pageData.query, opt)
|
||||
formData.skuId=opt.skuId
|
||||
formData.productId=opt.productId
|
||||
init()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-box {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
min-height: 100rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item .uni-forms-item__label {
|
||||
text-indent: 0;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
::v-deep .none-label .uni-forms-item.is-direction-top {
|
||||
padding: 0 !important;
|
||||
min-height: initial !important;
|
||||
}
|
||||
|
||||
::v-deep .none-label .uni-forms-item .uni-forms-item__label {
|
||||
padding: 0 !important;
|
||||
}
|
||||
::v-deep.is-disabled .uni-easyinput__placeholder-class{
|
||||
color: #333;
|
||||
}
|
||||
.fixed-b {
|
||||
bottom: 80rpx;
|
||||
left: 110rpx;
|
||||
right: 110rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-input-input{
|
||||
color: #333;
|
||||
}
|
||||
::v-deep .red .uni-input-input{
|
||||
color: $my-red-color;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view class="item bg-fff border-r-12">
|
||||
<view class="u-flex u-text-left u-row-between border-bottom u-p-b-30">
|
||||
<view class="">
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="data.createdAt"></uni-dateformat>
|
||||
</view>
|
||||
<view class="tag">{{data.type}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-text-left u-row-left u-m-t-30">
|
||||
<view class="name">{{data.productName}}</view>
|
||||
<!-- <view class="category u-flex u-m-l-10">
|
||||
<view class="tag">分类</view>
|
||||
</view> -->
|
||||
<view class="id color-999 u-font-24 bg-gray u-m-l-10">
|
||||
ID:{{data.id}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between">
|
||||
<view class="u-text-right">
|
||||
<!-- <view>
|
||||
<text>总价值</text>
|
||||
<text class="u-m-l-10">3</text>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<text>单价</text>
|
||||
<text class="u-m-l-10">2</text>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<text>货品编码</text>
|
||||
<text class="u-m-l-10">2</text>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<text>供应商名称</text>
|
||||
<text class="u-m-l-10">2</text>
|
||||
</view> -->
|
||||
<view class="u-flex">
|
||||
<view class="text-ming-w">订单号</view>
|
||||
<text class="u-m-l-10 u-font-24 color-main">{{data.orderNo||''}}</text>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex u-relative">
|
||||
<view class="text-ming-w">库存</view>
|
||||
<view class="u-relative">
|
||||
<text class="u-m-l-10">{{data.leftNumber}}</text>
|
||||
<view class="u-absolute u-flex addNumber">
|
||||
<uni-icons type="arrow-right" :color="color.ColorMain" size="16"></uni-icons>
|
||||
<text class="color-main u-m-l-10">{{data.leftNumber+data.stockNumber}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="text-ming-w">剩余库存</view>
|
||||
<view class="u-m-l-10 color-main">{{data.leftNumber+data.stockNumber}}{{data.unitName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<view>
|
||||
<view class="no-wrap">
|
||||
<text class="color-main font-bold" v-if="data.stockNumber>0">{{data.stockNumber}}</text>
|
||||
<text class="color-red font-bold" v-else>{{data.stockNumber}}</text>
|
||||
<text>{{data.unitName}}</text>
|
||||
</view>
|
||||
<!-- <view class="u-m-t-10">剩余库存</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="u-flex u-row-right u-m-t-20">
|
||||
<view class="u-flex u-m-r-30">
|
||||
<my-button shape="circle" height="70" type="default" @tap="del">
|
||||
<view class="u-p-l-30 u-p-r-30">
|
||||
删除
|
||||
</view>
|
||||
</my-button>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import color from '@/commons/color.js'
|
||||
|
||||
function del() {
|
||||
console.log('del');
|
||||
}
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['more'])
|
||||
|
||||
function more() {
|
||||
emits('more', props.index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.text-ming-w{
|
||||
min-width: calc(28rpx * 5);
|
||||
}
|
||||
.item {
|
||||
padding: 32rpx 32rpx 28rpx 28rpx;
|
||||
|
||||
.tag {
|
||||
color: $my-main-color;
|
||||
background-color: rgb(234, 244, 255);
|
||||
border-radius: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.id {
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.info {}
|
||||
}
|
||||
|
||||
.addNumber {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
padding-left: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<view class="color-333 u-font-28">
|
||||
<view class="fixed-top bg-fff u-flex u-p-l-30 u-row-between">
|
||||
<view class="u-flex ">
|
||||
<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="timeToggle">
|
||||
<text class="u-m-r-12 no-wrap">筛选时间</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
|
||||
mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="u-flex u-m-l-60 u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="showTypesToggle">
|
||||
<text class="u-m-r-12" v-if="types.active===''"> 选择类型</text>
|
||||
<text class="u-m-r-12 no-wrap color-main" v-else>{{types.list[types.active].text}}</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
|
||||
mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view style="width: 164rpx;"></view> -->
|
||||
<!-- <view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch" :style="{width:search.show?'694rpx':'164rpx'}">
|
||||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||||
<view class="u-flex-1 u-p-l-10"><input v-model="search.keyword" @confirm="searchConfirm" type="text"
|
||||
placeholder-style="font-size:28rpx;" placeholder="搜索" /></view>
|
||||
<view @tap.stop="hideSearch" v-if="search.show">取消</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view :style="{height:types.show?typesHeight:0}" class="tranistion types overflow-hide">
|
||||
<view @tap="changeTypesActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in types.list" :key="index">
|
||||
<view>{{item.text}}</view>
|
||||
<uni-icons v-if="types.active===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{height: types.bottomHeight+'px'}"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=" min-page bg-gray list u-p-30">
|
||||
<view class="u-flex u-m-b-30" v-if="filters.time.start&&filters.time.end">
|
||||
<view class="time-area u-font-24 color-main u-flex">
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.start"></uni-dateformat>
|
||||
<text class="u-p-l-10 u-p-r-10">至</text>
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.end"></uni-dateformat>
|
||||
<view class="u-m-l-10 u-flex" @tap="clearTime">
|
||||
<uni-icons type="clear" size="18" :color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="recoreds color-fff ">
|
||||
<view class="u-font-32">详情记录</view>
|
||||
<view class="u-flex u-row-between u-m-t-48">
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>变动数量</view>
|
||||
<view class="u-font-32 u-m-t-10 font-bold">{{pageData.changeSum}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="pageData.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in pageData.list" :key="index">
|
||||
<list-item :data="item"></list-item>
|
||||
</view>
|
||||
<my-pagination :size="pageData.size" :totalElements="pageData.totalElements"
|
||||
@change="pageChange"></my-pagination>
|
||||
<!-- <uni-load-more :status="pageData.status" /> -->
|
||||
</template>
|
||||
<template v-if="pageData.hasAjax&&!pageData.list.length">
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-img-empty tips="暂无记录"></my-img-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
|
||||
<my-mask ref="mask" @close="hideType"></my-mask>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import color from '@/commons/color';
|
||||
import listItem from './components/list-item';
|
||||
import myMask from '@/components/my-components/my-mask'
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
$getProductDetail,
|
||||
$getProductStockDetail,$getProductStockDetailSum
|
||||
} from '@/http/yskApi/goods.js'
|
||||
import {$invoicingType} from '../goodsData.js'
|
||||
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
maskHide()
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
types.show = false
|
||||
maskShow()
|
||||
}
|
||||
|
||||
|
||||
// 库存分类
|
||||
const types = reactive({
|
||||
list:$invoicingType,
|
||||
active: '',
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
|
||||
function hideType() {
|
||||
types.show = false
|
||||
search.show = false
|
||||
}
|
||||
const typesHeight = computed(() => {
|
||||
return 30 * types.list.length + types.bottomHeight + 'px'
|
||||
})
|
||||
|
||||
function changeTypesActive(i) {
|
||||
types.active = i
|
||||
types.show = false
|
||||
toggleMask()
|
||||
}
|
||||
|
||||
function showTypesToggle() {
|
||||
types.show = !types.show
|
||||
maskShow()
|
||||
}
|
||||
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
pageData.query.page=page-1
|
||||
init()
|
||||
}
|
||||
|
||||
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
})
|
||||
|
||||
function resetQuery(){
|
||||
pageData.query.page=0
|
||||
}
|
||||
function clearTime() {
|
||||
filters.time.start = ''
|
||||
filters.time.end = ''
|
||||
resetQuery()
|
||||
init()
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
function datePickerConfirm(e) {
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
resetQuery()
|
||||
init()
|
||||
}
|
||||
|
||||
function timeToggle() {
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
|
||||
|
||||
const mask = ref(null)
|
||||
|
||||
function toggleMask(show) {
|
||||
mask.value.toggle()
|
||||
}
|
||||
|
||||
function maskShow() {
|
||||
mask.value.open()
|
||||
}
|
||||
|
||||
function maskHide() {
|
||||
mask.value.close()
|
||||
}
|
||||
|
||||
|
||||
const pageData = reactive({
|
||||
query: {
|
||||
page: 0,
|
||||
size: 10
|
||||
},
|
||||
productId:'',
|
||||
totalElements: 0,
|
||||
list: [],
|
||||
status: 'noMore',
|
||||
hasAjax:false,
|
||||
changeSum:0
|
||||
})
|
||||
async function init() {
|
||||
const createdAt=(filters.time.start&&filters.time.end)?[filters.time.start,filters.time.end ]:[]
|
||||
const res = await $getProductStockDetail({
|
||||
...pageData.query,
|
||||
productId: pageData.productId,
|
||||
type:types.active!==''?types.list[types.active].value:'',
|
||||
createdAt
|
||||
})
|
||||
pageData.hasAjax=true
|
||||
pageData.list = res.content
|
||||
pageData.totalElements = res.totalElements
|
||||
}
|
||||
async function getSum(){
|
||||
const res = await $getProductStockDetailSum({
|
||||
productId: pageData.productId,
|
||||
})
|
||||
pageData.changeSum = res.exchange
|
||||
}
|
||||
watch(()=>types.active,(newval)=>{
|
||||
resetQuery()
|
||||
init()
|
||||
})
|
||||
|
||||
onLoad(opt => {
|
||||
pageData.productId = opt ? opt.productId : ''
|
||||
init()
|
||||
getSum()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fixed-top {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.recoreds {
|
||||
background: linear-gradient(127deg, #33A0FF 0%, #6699FF 100%);
|
||||
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 32rpx 40rpx 40rpx 48rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
top: -112rpx;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 56rpx;
|
||||
width: 224rpx;
|
||||
box-shadow: 0 0 1px #666;
|
||||
height: 224rpx;
|
||||
background: linear-gradient(180deg, rgba(103, 204, 254, 0.6) 0%, rgba(144, 87, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
padding: 16rpx 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
|
||||
.search-btn {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 164rpx;
|
||||
transition: all .3s ease-in-out;
|
||||
background-color: rgb(247, 247, 247);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.types {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.time-area {
|
||||
background: #E6F0FF;
|
||||
border-radius: 100px;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.icon-arrow-down-fill {
|
||||
width: 16rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 52px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>#{{index+1}} {{data.name}}</view>
|
||||
<view class="color-666 u-font-24 id">ID:{{data.id}}</view>
|
||||
</view>
|
||||
<view class="u-m-t-16 color-666 u-font-24 u-p-b-20 border-bottom">
|
||||
添加时间：
|
||||
<uni-dateformat :date="data.createdAt"></uni-dateformat>
|
||||
</view>
|
||||
<view class="u-m-t-20">
|
||||
<view v-for="(spec,specIndex) in data.specList" :key="specIndex">
|
||||
<view class="font-bold"> {{spec.name}}</view>
|
||||
<view class="u-m-t-16 bg-gray u-flex u-flex-wrap options u-p-20">
|
||||
<view class="u-flex option" v-for="(option,optionIndex) in spec.value" :key="optionIndex" @tap="statusClick(optionIndex)">
|
||||
{{option}}
|
||||
<!-- <view class="sellout" v-if="option.sellOut">已售罄</view>
|
||||
<view class="tag-primary tag" v-if="option.status">上架中</view>
|
||||
<view class="tag-gray tag" v-else>上架中</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-20 u-flex u-row-right btns">
|
||||
<my-button @tap="del" :plain="btnProps.plain" :fontSize="btnProps.fontSize" :width="btnProps.width" :height="btnProps.height" type="cancel" :shape="btnProps.shape" >删除</my-button>
|
||||
<my-button @tap="edit" :plain="btnProps.plain" :fontSize="btnProps.fontSize" :width="btnProps.width" :height="btnProps.height" :shape="btnProps.shape">编辑</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import myButton from "@/components/my-components/my-button.vue"
|
||||
import go from '@/commons/utils/go.js'
|
||||
const props=defineProps({
|
||||
index:{
|
||||
type:Number,
|
||||
},
|
||||
data:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits=defineEmits(['del','edit','statusClick'])
|
||||
function del(){
|
||||
emits('del',props.index)
|
||||
}
|
||||
function edit(){
|
||||
uni.setStorageSync('spec',props.data)
|
||||
go.to('PAGES_PRODUCT_GUIGE_ADD', {
|
||||
type: 'edit'
|
||||
})
|
||||
// emits('edit',props.index)
|
||||
}
|
||||
function statusClick(optionIndex){
|
||||
emits('statusClick',[props.index,optionIndex])
|
||||
}
|
||||
const btnProps=reactive({
|
||||
shape:'circle',
|
||||
width:120,
|
||||
height:48,
|
||||
fontSize:24,
|
||||
plain:true
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.btns{
|
||||
gap: 0 20rpx;
|
||||
}
|
||||
.item{
|
||||
background: #FFFFFF;
|
||||
padding: 30rpx;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
margin-bottom: 30rpx;
|
||||
.id{
|
||||
background: #F4F4F4;
|
||||
padding: 6rpx 10rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
.options{
|
||||
gap: 10rpx 50rpx;
|
||||
.option{
|
||||
padding: 24rpx 40rpx;
|
||||
background: #F0F2F5;
|
||||
border-radius: 4rpx;
|
||||
position: relative;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
.tag{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 12rpx;
|
||||
right: 0;
|
||||
padding: 2rpx 4rpx;
|
||||
border-radius: 0rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
.sellout{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgb(147, 147, 153);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.tag-primary{
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
.tag-gray{
|
||||
background-color: rgb(147, 147, 153);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="u-p-30 min-page bg-gray">
|
||||
<view v-for="(item,index) in pageData.list" :key="index">
|
||||
<specifications-item @statusClick="specificationsStatusClick" @del="delSpecifications" @edit="editSpecifications" :data="item" :index="index"></specifications-item>
|
||||
</view>
|
||||
<view class="u-m-t-44">
|
||||
<my-pagination :size="pageData.query.size" :totalElements="pageData.totalElements" @change="pageChange"></my-pagination>
|
||||
<view style="height: 200rpx;"></view>
|
||||
</view>
|
||||
|
||||
<my-model :showBtn="modelData.showBtn" ref="model" @confirm="modelConfirm" :title="modelData.title" :desc="modelData.desc">
|
||||
<template #desc>
|
||||
<view class="u-p-30 u-m-t-40 u-p-b-60" v-if="specificationsData">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>当前状态</view>
|
||||
<view class="u-flex-1 u-p-l-60">
|
||||
<uni-data-checkbox v-model="specificationsData.status"
|
||||
@change="specificationsStatusChange"
|
||||
:localdata="statusData"></uni-data-checkbox>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-30 u-p-t-30" style="border-top: 1px solid rgb(245, 245, 245);">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>售罄</view>
|
||||
<my-switch @change="specificationsSellOutChange" v-model="specificationsData.sellOut"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</my-model>
|
||||
|
||||
<view class="fixed-b">
|
||||
<my-button @tap="toAdd" shape="circle">添加规格组</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import {onLoad,onShow} from '@dcloudio/uni-app'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myPagination from '@/components/my-components/my-pagination.vue'
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import specificationsItem from './components/specifications-item.vue'
|
||||
import {$productSpec} from '@/http/yskApi/goods.js'
|
||||
|
||||
|
||||
const statusData=[
|
||||
{
|
||||
text: '上架中',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
text: '已下架',
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
|
||||
const model = ref(null)
|
||||
const specificationsData=reactive({
|
||||
index:null,
|
||||
optionIndex:null,
|
||||
status:1,
|
||||
sellOut:false
|
||||
})
|
||||
function specificationsSellOutChange(isSellOut){
|
||||
const {index,optionIndex}=specificationsData
|
||||
if(index!==null&&optionIndex!==null){
|
||||
pageData.list[index].options[optionIndex].sellOut=isSellOut
|
||||
}
|
||||
}
|
||||
function specificationsStatusChange(e){
|
||||
const {index,optionIndex}=specificationsData
|
||||
if(index!==null&&optionIndex!==null){
|
||||
pageData.list[index].options[optionIndex].status=e.detail.value
|
||||
}
|
||||
}
|
||||
function modelOpen(){
|
||||
model.value.open()
|
||||
}
|
||||
function modelClose(){
|
||||
model.value.close()
|
||||
}
|
||||
function modelConfirm(){
|
||||
console.log('modelConfirm');
|
||||
modelClose()
|
||||
}
|
||||
const modelData = reactive({
|
||||
title: '',
|
||||
desc: '',
|
||||
showBtn:true
|
||||
})
|
||||
const pageData = reactive({
|
||||
query:{
|
||||
page: 0,
|
||||
size:10
|
||||
},
|
||||
totalElements:0,
|
||||
list: []
|
||||
})
|
||||
|
||||
function delSpecifications(index){
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '删除后使用此模板的商品将取消此规格,是否继续?',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
$productSpec.del([pageData.list[index].id]).then(res=>{
|
||||
uni.showToast({
|
||||
title:'删除成功',
|
||||
icon:'none'
|
||||
})
|
||||
init()
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function specificationsStatusClick(arr){
|
||||
console.log(arr);
|
||||
modelData.title=pageData.list[arr[0]].name
|
||||
modelData.desc=''
|
||||
modelData.showBtn=false
|
||||
|
||||
specificationsData.status=1
|
||||
specificationsData.sellOut=false
|
||||
specificationsData.index=arr[0]
|
||||
specificationsData.optionIndex=arr[1]
|
||||
modelOpen()
|
||||
}
|
||||
function pageChange(page) {
|
||||
pageData.query.page=page-1
|
||||
init()
|
||||
}
|
||||
|
||||
let emitName = 'guigeEdit'
|
||||
|
||||
uni.$on(emitName, function(data) {
|
||||
console.log(data);
|
||||
})
|
||||
|
||||
function editSpecifications(index){
|
||||
uni.setStorageSync('guige', pageData.list[index])
|
||||
emitName='guigeEdit'
|
||||
go.to('PAGES_PRODUCT_GUIGE_ADD', {
|
||||
emitName: emitName
|
||||
})
|
||||
}
|
||||
|
||||
function toAdd() {
|
||||
// uni.setStorageSync('guige', FormData.specificationsGroup)
|
||||
go.to('PAGES_PRODUCT_GUIGE_ADD')
|
||||
}
|
||||
|
||||
function init(){
|
||||
$productSpec.get(pageData.query).then(res=>{
|
||||
console.log(res);
|
||||
pageData.list=res.content
|
||||
pageData.totalElements=res.totalElements
|
||||
})
|
||||
}
|
||||
onShow(()=>{
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fixed-b {
|
||||
position: fixed;
|
||||
left: 110rpx;
|
||||
right: 110rpx;
|
||||
bottom: 80rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" class="design-iconfont">
|
||||
<path d="M51 47L59 55L51 63" stroke="#999" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 217 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20.925" height="20.925" viewBox="0 0 20.925 20.925"><defs><style>.a{fill:#666;}</style></defs><path class="a" d="M20.925,6.278,10.463,0,0,6.278l10.463,6.278ZM10.463,2.093l7.324,4.185-7.324,4.185L3.139,6.278ZM2.093,13.811V15.9l8.37,5.022,8.37-5.022V13.811l-8.37,5.022-8.37-5.022Z"/><path class="a" d="M102.4,471.04v2.093l8.37,5.022,8.37-5.022V471.04l-8.37,5.022Z" transform="translate(-100.308 -461.414)"/></svg>
|
||||
|
After Width: | Height: | Size: 458 B |
Reference in New Issue
Block a user