|
|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
花店后台新增商品
|
|
|
谁用:hdApp 管理端创建花束
|
|
|
- 解决问题:单规格写主记录;开启多规格时隐藏卡片外主图/封面,改在规格卡片内编辑(规格1回写主记录),其余规格提交 specList 由后端拆子行;多规格用可横滑 tab 切换卡片编辑
|
|
|
+ 解决问题:单规格写主记录;开启多规格时隐藏卡片外主图/封面,改在规格卡片内编辑(规格1回写主记录),其余规格提交 specList 由后端拆子行;多规格用可横滑 pill tab 切换;表单区视觉层次与开关/规格卡片统一美化
|
|
|
-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
@@ -16,13 +16,13 @@
|
|
|
|
|
|
<view class="spec-switch-card">
|
|
|
<view class="spec-switch-left">
|
|
|
- <view class="spec-switch-icon"></view>
|
|
|
- <view>
|
|
|
+ <view class="spec-switch-icon">▦</view>
|
|
|
+ <view class="spec-switch-copy">
|
|
|
<view class="spec-switch-title">多规格</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="spec-switch-right">
|
|
|
- <text>{{ form.specEnabled == 1 ? '已启用' : '未启用' }}</text>
|
|
|
+ <text class="spec-switch-status">{{ form.specEnabled == 1 ? '已启用' : '未启用' }}</text>
|
|
|
<switch class="spec-switch-ctrl" :checked="form.specEnabled == 1" @change="toggleSpecs" color="#09C567" />
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -147,10 +147,6 @@
|
|
|
</view>
|
|
|
</tui-list-cell>
|
|
|
|
|
|
- <tui-list-cell class="line-cell category-wrap" :hover="false">
|
|
|
- <view class="tui-title">使用场景</view><view class="tui-input"><block v-for="item in useCaseData" :key="item.id"><button class="admin-button-com" :class="[form.useCaseIdList.includes(item.id) ? '' : 'default']" @click="toggleUseCase(item)">{{ item.useCaseName }}</button></block></view>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
<tui-list-cell class="line-cell category-wrap" :hover="false">
|
|
|
<view class="tui-title required">分类</view>
|
|
|
<view class="tui-input">
|
|
|
@@ -161,6 +157,10 @@
|
|
|
</view>
|
|
|
</tui-list-cell>
|
|
|
|
|
|
+ <tui-list-cell class="line-cell category-wrap" :hover="false">
|
|
|
+ <view class="tui-title">使用场景</view><view class="tui-input"><block v-for="item in useCaseData" :key="item.id"><button class="admin-button-com" :class="[form.useCaseIdList.includes(item.id) ? '' : 'default']" @click="toggleUseCase(item)">{{ item.useCaseName }}</button></block></view>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
<tui-list-cell v-if="form.specEnabled != 1" class="line-cell" :hover="false">
|
|
|
<view class="tui-title">价格类型</view>
|
|
|
<view class="btn-group">
|
|
|
@@ -199,11 +199,11 @@
|
|
|
|
|
|
<tui-list-cell v-if="form.specEnabled != 1" class="line-cell" :hover="false">
|
|
|
<view class="tui-title">已售数量</view>
|
|
|
- <input v-model="form.sold" placeholder-class="phcolor" class="tui-input" name="sold" placeholder="客户端展示:已售数量+实售数量" maxlength="10" type="number" />
|
|
|
+ <input v-model="form.sold" placeholder-class="phcolor" class="tui-input" name="sold" placeholder="客户看到:已售数量+实售数量" maxlength="10" type="number" />
|
|
|
</tui-list-cell>
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">节日涨价管理</view>
|
|
|
+ <view class="tui-title">节日涨价</view>
|
|
|
<view class="btn-group">
|
|
|
<button class="admin-button-com middle" :class="[form.autoRise === '1' ? '' : 'default']" @click="autoRiseChange('1')">参与涨价</button>
|
|
|
<button class="admin-button-com middle" :class="[form.autoRise === '0' ? '' : 'default']" @click="autoRiseChange('0')">不要涨价</button>
|
|
|
@@ -294,6 +294,8 @@ export default {
|
|
|
onLoad() {
|
|
|
const token = uni.getStorageSync('token')
|
|
|
this.headers.token = token
|
|
|
+ // 新增默认填入随机已售,商城展示不显得冷清
|
|
|
+ this.form.sold = this.randomSold()
|
|
|
},
|
|
|
computed: {
|
|
|
// 根据上传的图片数量动态生成封面选项
|
|
|
@@ -428,6 +430,13 @@ export default {
|
|
|
useCaseList().then(res => { if (res.code == 1) this.useCaseData = res.data || [] })
|
|
|
},
|
|
|
toggleUseCase(item) { const i=this.form.useCaseIdList.indexOf(item.id); i<0?this.form.useCaseIdList.push(item.id):this.form.useCaseIdList.splice(i,1) },
|
|
|
+ /**
|
|
|
+ * 生成 150~360 的随机已售数量(含两端)
|
|
|
+ * @returns {number}
|
|
|
+ */
|
|
|
+ randomSold() {
|
|
|
+ return Math.floor(Math.random() * (360 - 150 + 1)) + 150
|
|
|
+ },
|
|
|
createSpecData(data = {}) {
|
|
|
const shopImg = Array.isArray(data.shortImgList) ? data.shortImgList : (Array.isArray(data.shopImg) ? data.shopImg : []);
|
|
|
const currentImgData = Array.isArray(data.currentImgData) ? data.currentImgData : (Array.isArray(data.smallImgList) ? data.smallImgList : []);
|
|
|
@@ -931,6 +940,13 @@ export default {
|
|
|
.module-det {
|
|
|
padding: 0 30upx;
|
|
|
}
|
|
|
+ &.goods-wrap {
|
|
|
+ margin: 0 24upx 20upx;
|
|
|
+ padding-bottom: 16upx;
|
|
|
+ border-radius: 16upx;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
.category-wrap {
|
|
|
align-items: flex-start;
|
|
|
@@ -939,18 +955,20 @@ export default {
|
|
|
@include disFlex(center, flex-start);
|
|
|
flex-wrap: wrap;
|
|
|
.admin-button-com {
|
|
|
- margin-right: 30rpx;
|
|
|
- margin-bottom: 20upx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-bottom: 16upx;
|
|
|
position: relative;
|
|
|
z-index: 9999;
|
|
|
+ border-radius: 12upx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.use-img{
|
|
|
font-size: 22rpx;
|
|
|
color: #999999;
|
|
|
- padding-left: 4rpx 8rpx;
|
|
|
+ padding: 4rpx 0 8rpx;
|
|
|
line-height: 1.5;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
.no-img-tip {
|
|
|
font-size: 26rpx;
|
|
|
@@ -961,83 +979,96 @@ export default {
|
|
|
.btn-group {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
.admin-button-com {
|
|
|
- margin-right: 35rpx;
|
|
|
-
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ border-radius: 12upx;
|
|
|
&:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.spec-switch-card {
|
|
|
- margin: 0 20upx 20upx;
|
|
|
- padding: 10upx 30upx;
|
|
|
- border: 1px solid #e5f5ec;
|
|
|
- border-radius: 12upx;
|
|
|
- background: linear-gradient(90deg, #f3fff8 0%, #ffffff 100%);
|
|
|
+ margin: 16upx 24upx 24upx;
|
|
|
+ padding: 10upx 28upx;
|
|
|
+ border: 1px solid #dff5e8;
|
|
|
+ border-radius: 20upx;
|
|
|
+ background: linear-gradient(135deg, #f2fff8 0%, #ffffff 55%);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
+ box-shadow: 0 6upx 20upx rgba(9, 197, 103, 0.06);
|
|
|
}
|
|
|
.spec-switch-left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
min-width: 0;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
.spec-switch-icon {
|
|
|
width: 40upx;
|
|
|
height: 40upx;
|
|
|
- margin-right: 22upx;
|
|
|
- border-radius: 50%;
|
|
|
+ margin-right: 18upx;
|
|
|
+ border-radius: 16upx;
|
|
|
background: #09C567;
|
|
|
color: #ffffff;
|
|
|
- font-size: 28upx;
|
|
|
+ font-size: 22upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.spec-switch-copy {
|
|
|
+ min-width: 0;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
.spec-switch-title {
|
|
|
- font-size: 32upx;
|
|
|
- color: #222222;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #1f1f1f;
|
|
|
font-weight: 700;
|
|
|
- line-height: 44upx;
|
|
|
+ line-height: 40upx;
|
|
|
}
|
|
|
.spec-switch-desc {
|
|
|
- margin-top: 6upx;
|
|
|
- font-size: 24upx;
|
|
|
- color: #999999;
|
|
|
+ margin-top: 4upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ color: #8c8c8c;
|
|
|
+ line-height: 32upx;
|
|
|
}
|
|
|
.spec-switch-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-shrink: 0;
|
|
|
- color: #999999;
|
|
|
- font-size: 24upx;
|
|
|
- text {
|
|
|
- margin-right: 12upx;
|
|
|
+ margin-left: 16upx;
|
|
|
+ .spec-switch-status {
|
|
|
+ margin-right: 8upx;
|
|
|
+ color: #8c8c8c;
|
|
|
+ font-size: 22upx;
|
|
|
}
|
|
|
- /* uni-app switch 无尺寸属性,用缩放缩小 */
|
|
|
.spec-switch-ctrl {
|
|
|
transform: scale(0.75);
|
|
|
transform-origin: center right;
|
|
|
}
|
|
|
}
|
|
|
.spec-wrap {
|
|
|
- padding: 0 20upx 20upx;
|
|
|
+ padding: 0 24upx 24upx;
|
|
|
}
|
|
|
.spec-card {
|
|
|
margin-bottom: 20upx;
|
|
|
background: #ffffff;
|
|
|
- border: 4px solid #e8e8e8;
|
|
|
- border-radius: 16upx;
|
|
|
+ border: 1px solid #eef0f2;
|
|
|
+ border-radius: 20upx;
|
|
|
overflow: hidden;
|
|
|
+ box-shadow: 0 4upx 18upx rgba(0, 0, 0, 0.04);
|
|
|
}
|
|
|
.spec-card-head {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- padding: 20upx 24upx 12upx;
|
|
|
+ padding: 24upx 24upx 16upx;
|
|
|
+ background: #fafbfc;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
}
|
|
|
.spec-card-head-left {
|
|
|
display: flex;
|
|
|
@@ -1047,33 +1078,32 @@ export default {
|
|
|
}
|
|
|
.spec-card-title {
|
|
|
font-size: 30upx;
|
|
|
- color: #222222;
|
|
|
+ color: #1f1f1f;
|
|
|
font-weight: 700;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
.spec-remove {
|
|
|
margin: 0 0 0 16upx;
|
|
|
- padding: 0 20upx;
|
|
|
+ padding: 0 22upx;
|
|
|
height: 52upx;
|
|
|
line-height: 52upx;
|
|
|
- border: 1px solid #eeeeee;
|
|
|
- border-radius: 8upx;
|
|
|
+ border: 1px solid #eadede;
|
|
|
+ border-radius: 26upx;
|
|
|
background: #ffffff;
|
|
|
color: #999999;
|
|
|
font-size: 24upx;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
.spec-add-btn {
|
|
|
- margin: 0 0 0 16upx;
|
|
|
- padding: 0 20upx;
|
|
|
+ margin: 0 0 0 20upx;
|
|
|
+ padding: 0 22upx;
|
|
|
height: 52upx;
|
|
|
line-height: 52upx;
|
|
|
- border-radius: 8upx;
|
|
|
+ border-radius: 26upx;
|
|
|
background: #09C567;
|
|
|
color: #ffffff;
|
|
|
font-size: 24upx;
|
|
|
flex-shrink: 0;
|
|
|
- margin-left: 40upx;
|
|
|
}
|
|
|
.spec-add-btn::after,
|
|
|
.spec-remove::after {
|
|
|
@@ -1081,25 +1111,25 @@ export default {
|
|
|
}
|
|
|
.spec-tab-scroll {
|
|
|
width: 100%;
|
|
|
- height: 80upx;
|
|
|
+ height: 88upx;
|
|
|
white-space: nowrap;
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
+ background: #f7f8fa;
|
|
|
}
|
|
|
.spec-tab-list {
|
|
|
display: inline-flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- height: 80upx;
|
|
|
- padding: 0 12upx;
|
|
|
+ height: 88upx;
|
|
|
+ padding: 0 16upx;
|
|
|
}
|
|
|
.spec-tab-item {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- height: 80upx;
|
|
|
- padding: 0 28upx;
|
|
|
- margin-right: 8upx;
|
|
|
- font-size: 28upx;
|
|
|
+ height: 56upx;
|
|
|
+ padding: 0 24upx;
|
|
|
+ margin-right: 12upx;
|
|
|
+ font-size: 26upx;
|
|
|
color: #666666;
|
|
|
flex-shrink: 0;
|
|
|
max-width: 240upx;
|
|
|
@@ -1107,11 +1137,15 @@ export default {
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
box-sizing: border-box;
|
|
|
+ border-radius: 28upx;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #ececec;
|
|
|
}
|
|
|
.spec-tab-item.active {
|
|
|
color: #09C567;
|
|
|
font-weight: 700;
|
|
|
- border-bottom: 4upx solid #09C567;
|
|
|
+ background: rgba(9, 197, 103, 0.12);
|
|
|
+ border-color: rgba(9, 197, 103, 0.35);
|
|
|
}
|
|
|
.spec-tab-text {
|
|
|
overflow: hidden;
|
|
|
@@ -1122,22 +1156,25 @@ export default {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
.spec-image-wrap {
|
|
|
- padding: 10upx 0 20upx;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
+ margin: 8upx 16upx 16upx;
|
|
|
+ padding: 8upx 0 16upx;
|
|
|
+ border-radius: 16upx;
|
|
|
+ background: #fafbfc;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
.module-tit {
|
|
|
- padding: 20upx 30upx;
|
|
|
+ padding: 16upx 24upx 8upx;
|
|
|
}
|
|
|
.module-det {
|
|
|
- padding: 0 30upx;
|
|
|
+ padding: 0 24upx;
|
|
|
}
|
|
|
}
|
|
|
.spec-cover-row {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
- padding: 20upx 30upx 0;
|
|
|
+ padding: 16upx 24upx 0;
|
|
|
}
|
|
|
.spec-cover-title {
|
|
|
- width: 200upx;
|
|
|
+ width: 120upx;
|
|
|
flex-shrink: 0;
|
|
|
font-size: 28upx;
|
|
|
color: #333333;
|
|
|
@@ -1148,8 +1185,9 @@ export default {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
.admin-button-com {
|
|
|
- margin-right: 30upx;
|
|
|
- margin-bottom: 16upx;
|
|
|
+ margin-right: 16upx;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+ border-radius: 12upx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1167,10 +1205,14 @@ export default {
|
|
|
.app-footer {
|
|
|
justify-content: space-evenly;
|
|
|
z-index: 9999;
|
|
|
+ padding-top: 16upx;
|
|
|
+ padding-bottom: calc(16upx + env(safe-area-inset-bottom));
|
|
|
+ box-shadow: 0 -6upx 20upx rgba(0, 0, 0, 0.04);
|
|
|
.admin-button-com {
|
|
|
- width: 46%;
|
|
|
- padding-top:30upx;
|
|
|
- padding-bottom:30upx;
|
|
|
+ width: 44%;
|
|
|
+ padding-top: 26upx;
|
|
|
+ padding-bottom: 26upx;
|
|
|
+ border-radius: 44upx;
|
|
|
|
|
|
&:disabled {
|
|
|
opacity: 0.6;
|