czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改调整页面样式

Browse Source
This commit is contained in:
YeMingfei666
2024-10-18 16:27:51 +08:00
parent 91c716103e
commit f44cf801e8
22 changed files with 543 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
pageProduct/add-specifications/add-specifications.vue
View File

@@ -1,11 +1,11 @@
<template>
<view class="page">
<view class="page min-page">
<view class="box">
<view class="block border-top-0">
<view class="block border-top-0 u-p-t-32 u-p-b-32">
<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"
<uni-easyinput padding-none :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="specifications.name" placeholder="模版名称,如:衣服" />
</uni-forms-item>
</uni-forms>
@@ -17,71 +17,81 @@
<view class="block">
<view class="border-top-0">
<uni-forms-item label="规格组名" required name="name">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
<uni-easyinput padding-none :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" v-if="item.options.length>1">
<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 class="u-p-b-8">
<uni-forms-item label="规格值">
<view class="option ">
<view class="">
<view class="u-flex option-item u-m-t-8" 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">
<view class="bg-fff u-p-t-12 u-p-b-12" style="border-radius: 8rpx;">
<uni-easyinput
v-model="specifications.list[index].options[optionIndex].name"
@input="inpuChange(index,optionIndex)"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
placeholder="请输入规格值,如:S、M" />
</view>
</view>
</uni-forms-item>
</uni-forms-item>
</view>
<view class=" u-flex" v-if="item.options.length>1">
<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>
<view class="u-flex" @click="addOptions(index)">
<view class="icon icon-add u-m-r-22 ">
<view class="u-flex u-m-t-24 " @click="addOptions(index)">
<view class="icon icon-add u-m-r-22 ">
</view>
<view class="color-main">添加规格</view>
</view>
<view class="color-main">添加规格</view>
</view>
</view>
</uni-forms-item>
<template v-if="specifications.list.length>1">
<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>
</uni-forms-item>
</view>
<template v-if="specifications.list.length>1">
<view class="u-p-b-32">
<view class="u-flex " @click="delSpecificationsGroup(index)">
<view class="icon icon-reduce u-m-r-22 ">
</view>
<view class="color-red">删除规格组</view>
</view>
</view>
</template>
</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 ">
@@ -90,7 +100,7 @@
</view>
<view class="save-btn-box">
<button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button>
<button class="save-btn " hover-class="btn-hover-class" @click="save">保存</button>
</view>
</view>
<view class="bottom" ref="bottom"></view>
@@ -366,14 +376,25 @@
.page {
background: #F9F9F9;
padding: 30rpx;
padding: 32rpx 30rpx 0 30rpx;
padding-bottom: 200rpx;
}
::v-deep .uni-forms-item--border {
padding-top: 12px;
padding-bottom: 12px;
}
.my-switch {
transform: scale(0.7);
}
::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{
padding-bottom: 8px;
}
::v-deep .uni-easyinput__content-input{
height: inherit;
}
::v-deep.uni-forms-item {
min-height: inherit;
}
::v-deep .uni-forms-item__error {
display: none !important;
}
@@ -440,13 +461,11 @@
}
.box {
margin-top: 70rpx;
font-size: 28rpx;
.block {
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
padding: 12rpx 24rpx;
padding: 0 24rpx;
margin-bottom: 32rpx;
}
}
@@ -479,6 +498,7 @@
color: #fff;
border-radius: 12rpx;
font-size: 28rpx;
border-radius: 100rpx;
}
.btn-hover-class {
@@ -497,11 +517,10 @@
}
.option {
padding: 26rpx 30rpx 24rpx 24rpx;
padding: 8rpx 24rpx 32rpx 24rpx;
background: #F9F9F9;
}
.option-item {
margin-bottom: 34rpx;
}
</style>

137
pageProduct/add-specifications/choose-specifications.vue
View File

@@ -4,25 +4,44 @@
<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">
<view class="block u-p-b-16">
<view class="">
<view class="u-m-t-20">选择规格</view>
<view class="u-m-t-16">
<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>
</view>
</view>
<!-- <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="u-p-b-20">
<view class="u-m-t-12" v-for="(item,index) in FormData.selectSpec" :key="index">
</view> -->
<view class=" u-m-t-32">
<view class="u-m-t-16" 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 class="u-m-t-16">
<up-checkbox-group :labelSize="12" :size="14" :activeColor="color.ColorMain"
shape="circle" v-model="item.selectSpecResult" placement="row"
@change="createResult">
<up-checkbox :customStyle="{marginRight: '60rpx',marginBottom:'16rpx'}"
v-for="(item, index) in item.value" :key="index" :label="item.text"
:name="item.value">
</up-checkbox>
</up-checkbox-group>
<!-- <uni-data-checkbox @change="createResult" multiple :selectedColor="color.ColorMain"
v-model="item.selectSpecResult" :localdata="item.value">
</uni-data-checkbox> -->
</view>
@@ -34,16 +53,17 @@
</uni-forms>
<view>
<view class="block u-m-b-32" v-for="(item,index) in FormData.result" :key="index">
<view class="block u-m-b-0 u-m-t-32" v-for="(item,index) in FormData.result" :key="index">
<uni-forms :model="item.skus" :rules="rules" :ref="setFormRef(index)" err-show-type="undertext"
validateTrigger="blur" :border="true" :label-width="130">
<view class="">
<view class="u-m-t-20" v-for="(val,key) in item.names" :key="key">
<text class="font-bold u-m-r-12">
<view class="u-m-t-20 u-p-b-24 border-bottom" v-for="(val,key) in item.names"
:key="key">
<view class="font-bold u-m-r-12">
{{key}}
</text>
<text class="color-999">{{val}}</text>
</view>
<view class="u-m-t-16 color-666 u-font-24">{{val}}</view>
</view>
</view>
<view class="u-m-t-24">
@@ -51,13 +71,14 @@
<view class="font-bold">
图片
</view>
<view class="u-m-t-24">
<view class="u-m-t-16">
<my-upload-file @change="changeResultCover($event,index)" :limit="1"
:ref="setRefFile(index)" :images="item.coverImg"></my-upload-file>
:imageStyles="imageStyles" :ref="setRefFile(index)"
:images="item.coverImg"></my-upload-file>
</view>
</view>
</view>
<view class="skus u-m-t-32">
<view class="skus u-m-t-24">
<view class="">
<uni-forms-item label="售价" required name="salePrice">
<uni-easyinput @blur="priceFormat(item.skus,'salePrice')"
@@ -109,9 +130,12 @@
placeholder="请输入分销金额" />
</uni-forms-item>
<uni-forms-item label="商品条码" required>
<uni-easyinput disabled :paddingNone="inputPaddingNone"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.skus.barCode" placeholder="请输入商品条码" />
<view class="bg-gray u-flex u-col-center u-col-center u-p-l-24" style="height: 72rpx;background: #F6F6F6;border-radius: 8rpx ;">
<uni-easyinput disabled :paddingNone="inputPaddingNone"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.skus.barCode" placeholder="请输入商品条码" />
</view>
</uni-forms-item>
</view>
@@ -120,8 +144,17 @@
</view>
</view>
<view class="save-btn-box">
<button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button>
</view>
<view :style="{height:bottomHeight+'px'}"></view>
<view class="safe-bottom fixed">
<view class="btn">
<up-button @click="save" shape="circle" type="primary" >
<view class=" font-bold">
保存
</view>
</up-button>
<!-- <button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button> -->
<view class="u-m-t-20">
<button class="save-btn edit-btn" hover-class="btn-hover-class" @click="fastEditShow">
<view class="u-flex u-row-center">
@@ -130,15 +163,17 @@
</view>
</button>
</view>
</view>
</view>
<view class="bottom" ref="bottom"></view>
<pop-fast-edit @update="updateSkuKey" v-model:show="fastEdit.show"></pop-fast-edit>
</view>
</template>
<script setup>
import {
getSafeBottomHeight
} from '@/commons/utils/safe-bottom.js'
import {
formatPrice
} from "@/commons/utils/format.js";
@@ -169,7 +204,22 @@
import {
hasPermission
} from '@/commons/utils/hasPermission.js';
let bottomHeight = ref(100)
onReady(() => {
getSafeBottomHeight('safe-bottom').then(res => {
console.log(res);
bottomHeight.value = res
})
})
const refFiles = ref([]);
const imageStyles = reactive({
width: 82,
height: 82,
border: {
radius: '4px'
}
})
//绑定文件上传元素
function setRefFile(index) {
refFiles.value[index] = null;
@@ -334,6 +384,7 @@
let arr = []
for (let k of FormData.selectSpec) {
if (k.selectSpecResult.length) {
console.log(k);
arr.push({
value: k.selectSpecResult,
name: k.name
@@ -341,7 +392,7 @@
}
}
const spes = combineSpecs(arr)
FormData.result = spes.filter(v => {
const result = spes.filter(v => {
return !Array.isArray(v)
}).map(v => {
const specSnap = returnSpecSnap(v)
@@ -354,7 +405,7 @@
}
return data || newdata
})
console.log(FormData.result);
FormData.result = result
}
@@ -363,7 +414,7 @@
console.log(e);
const item = FormData.specList.find(v => v.id === FormData.specId)
FormData.selectSpec = (item.specList || [])
}
//获取规格数据
function getTbProductSpec() {
@@ -526,8 +577,8 @@
})
}).catch(err => {
console.log(err);
if(err.length>=1){
infoBox.showToast(err[0].errorMessage)
if (err.length >= 1) {
infoBox.showToast(err[0].errorMessage)
}
resolve({
sucees: false
@@ -550,7 +601,7 @@
//判断验证是否通过
console.log('pass');
const item = FormData.specList.find(v => v.id === FormData.specId)
FormData.specsInfoName = item?item.name:''
FormData.specsInfoName = item ? item.name : ''
console.log(FormData);
emitspecificationsSave()
@@ -570,14 +621,32 @@
margin: auto;
}
::v-deep .uni-forms-item--border {
padding-top: 24rpx;
padding-bottom: 24rpx;
}
::v-deep.uni-forms-item {
min-height: inherit;
}
.page {
background: #F9F9F9;
padding: 30rpx;
padding-bottom: 200rpx;
padding: 30rpx 30rpx 0 30rpx;
}
.safe-bottom {
padding: 34rpx 28rpx;
position: fixed;
background-color: #fff;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
.btn {
padding: 0 88rpx 56rpx 88rpx;
}
}
.my-switch {
@@ -628,6 +697,10 @@
}
}
::v-deep .uni-easyinput__content-input {
height: inherit;
}
.icon-reduce {
background-color: $my-red-color;

4
pageProduct/add-specifications/components/fast-edit.vue
View File

@@ -9,9 +9,9 @@
</view>
<view class="u-m-t-36">
<scroll-view scroll-y="true" style="max-height: 70vh;">
<view class="u-m-b-24" v-for="(item,index) in list" :key="index">
<view class="u-m-b-32" v-for="(item,index) in list" :key="index">
<view>{{item.text}}：</view>
<view class="u-m-t-24">
<view class="u-m-t-16">
<up-input v-model="item.value">
<template #suffix>
<up-button @click="itemClick(item)" type="primary" text="修改" size="mini"></up-button>