SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新商品相关页面

pull/11/head
徐飞洋 2 months ago
parent
c9fac1d7a0
commit
a540b4b484
4 changed files with 475 additions and 104 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 71
      pages/goods-update/goods-update.wxml
  2. 378
      pages/goods-update/goods-update.wxss
  3. 120
      pages/goods/index.wxml
  4. 10
      pages/goods/index.wxss

71
pages/goods-update/goods-update.wxml
View File

@ -52,24 +52,24 @@
<!-- 商品基本信息 -->
<view class="goods-info">
<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx;">
<view style="display: flex; align-items: center; flex: 1;">
<view style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">{{goodsDetail.supplyStatus || '暂无状态'}}</view>
<view class="goods-header">
<view class="goods-name-container">
<view class="supply-status-badge">{{goodsDetail.supplyStatus || '暂无状态'}}</view>
<text class="goods-name">{{goodsDetail.name}}</text>
<span style="vertical-align: middle; font-size: 20rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 8rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span>
<span class="verified-badge">V</span>
</view>
<view style="display: flex; align-items: flex-start;">
<view class="source-type-badge" style="display: flex; align-items: center; justify-content: center; margin-right: 10rpx;">
<view class="source-type-container">
<view class="source-type-badge">
<text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
</view>
</view>
</view>
<view class="goods-price" style="position: relative; display: flex; align-items: center; justify-content: space-between;">
<view style="display: flex; align-items: center;">
<view class="goods-price">
<view class="price-item">
<text class="price-symbol">销售价格:</text>
<text class="price-value">{{goodsDetail.price || '暂无'}}</text>
</view>
<view style="display: flex; align-items: center;">
<view class="price-item">
<text class="price-symbol">采购价格:</text>
<text class="price-value">{{goodsDetail.costprice || '暂无'}}</text>
</view>
@ -140,12 +140,12 @@
</view>
<!-- 货源描述 -->
<view class="goods-description product-description" wx:if="{{goodsDetail.description || goodsDetail.remark || true}}">
<view class="gd-label-container">
<text class="gd-label">货源描述</text>
</view>
<view class="gd-content">
<text class="gd-value">{{goodsDetail.description || goodsDetail.remark || '暂无描述'}}</text>
<view class="goods-description" wx:if="{{goodsDetail.description || goodsDetail.remark || true}}">
<view class="wq-title">货源描述</view>
<view class="wq-list">
<view class="wq-item">
<text class="wq-text">{{goodsDetail.description || goodsDetail.remark || '暂无描述'}}</text>
</view>
</view>
</view>
@ -198,28 +198,28 @@
</view>
<!-- 编辑货源弹窗（全屏） -->
<view class="modal" wx:if="{{showEditModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 999;">
<view class="modal" wx:if="{{showEditModal}}">
<!-- 顶部导航栏 -->
<view style="display: flex; justify-content: space-between; align-items: center; padding: 30rpx; border-bottom: 1rpx solid #eee; background-color: #fafafa; position: sticky; top: 0; z-index: 10;">
<view bindtap="hideEditModal" style="font-size: 32rpx; color: #666;">取消</view>
<view style="font-size: 32rpx; font-weight: bold; color: #333;">编辑货源</view>
<view bindtap="saveEdit" style="font-size: 32rpx; color: #07c160;">提交</view>
<view class="modal-header">
<view class="modal-btn cancel-btn" bindtap="hideEditModal">取消</view>
<view class="modal-title">编辑货源</view>
<view class="modal-btn confirm-btn" bindtap="saveEdit">提交</view>
</view>
<scroll-view scroll-y="true" style="height: calc(100vh - 90rpx); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 40rpx 60rpx; box-sizing: border-box;">
<scroll-view scroll-y="true" style="height: calc(100vh - 160rpx); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 160rpx 60rpx 40rpx; box-sizing: border-box;">
<view>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">销售价格</view>
<input class="input" type="text" placeholder="请输入销售价格" bindinput="onEditInput" data-field="price" value="{{editSupply.price}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;"></input>
<view class="edit-form-label">销售价格</view>
<input class="edit-form-input" type="text" placeholder="请输入销售价格" bindinput="onEditInput" data-field="price" value="{{editSupply.price}}"></input>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">联系人</view>
<view bindtap="openSalesPersonModal" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: flex; align-items: center; justify-content: space-between; background: white;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;">
<text style="{{editSupply.product_contact ? 'color: #333;' : 'color: #999;'}}">{{editSupply.product_contact || '请选择联系人'}}</text>
<text style="color: #999; font-size: 24rpx;">▼</text>
<view class="edit-form-label">联系人</view>
<view class="edit-form-select" bindtap="openSalesPersonModal">
<text class="select-text">{{editSupply.product_contact || '请选择联系人'}}</text>
<text class="select-arrow">▼</text>
</view>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">联系电话</view>
<input class="input" type="number" placeholder="请输入联系电话" bindinput="onEditInput" data-field="contact_phone" value="{{editSupply.contact_phone}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;"></input>
<view class="edit-form-label">联系电话</view>
<input class="edit-form-input" type="number" placeholder="请输入联系电话" bindinput="onEditInput" data-field="contact_phone" value="{{editSupply.contact_phone}}"></input>
<!-- 添加底部空白区域 -->
<view style="height: 20vh; background: transparent;"></view>
@ -228,10 +228,10 @@
</view>
<!-- 图片预览弹窗 -->
<view class="image-preview-mask" wx:if="{{showImagePreview}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 9999;" catchtouchmove="true" bindtap="closeImagePreview">
<view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
<view class="image-preview-mask" wx:if="{{showImagePreview}}" catchtouchmove="true" bindtap="closeImagePreview">
<view class="image-preview-content">
<swiper
style="width: 100%; height: 100%;"
class="image-preview-swiper"
current="{{previewImageIndex}}"
bindchange="onPreviewImageChange"
indicator-dots="true"
@ -242,7 +242,8 @@
<image
src="{{item}}"
mode="aspectFit"
style="width: 100%; height: 100%; transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transform-origin: center; transition: transform 0.1s;"
class="preview-image"
style="transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px);"
bindtap="handleImageTap"
bindtouchstart="handleTouchStart"
bindtouchmove="handleTouchMove"
@ -252,8 +253,8 @@
</swiper-item>
</block>
</swiper>
<view style="position: absolute; top: 40rpx; right: 40rpx; color: white; font-size: 40rpx;">
<text bindtap="closeImagePreview" style="background: rgba(0,0,0,0.5); padding: 10rpx 20rpx; border-radius: 50%;">×</text>
<view class="image-preview-close">
<text bindtap="closeImagePreview">×</text>
</view>
</view>
</view>

378
pages/goods-update/goods-update.wxss
View File

@ -152,6 +152,61 @@ video.slider-media .wx-video-volume-icon {
margin-top: 0; /* 移除负外边距，让图片和信息自然衔接 */
}
/* 商品头部信息 */
.goods-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10rpx;
}
.goods-name-container {
display: flex;
align-items: center;
flex: 1;
}
.supply-status-badge {
display: inline-block;
margin-right: 10rpx;
font-size: 18rpx;
color: #fff;
background: rgba(218, 165, 32, 0.8);
padding: 4rpx 10rpx;
border-radius: 15rpx;
vertical-align: middle;
backdrop-filter: blur(10rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5);
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
font-weight: bold;
margin-top: -20rpx;
}
.verified-badge {
vertical-align: middle;
font-size: 20rpx;
color: white;
background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%);
padding: 4rpx 8rpx;
clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%);
margin-left: 8rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
font-weight: bold;
margin-top: -20rpx;
}
.source-type-container {
display: flex;
align-items: flex-start;
}
.price-item {
display: flex;
align-items: center;
}
.goods-info::after {
content: '';
position: absolute;
@ -346,6 +401,31 @@ video.slider-media .wx-video-volume-icon {
border: 1px solid #f0f0f0;
}
.gd-label-container {
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid #e8f4ff;
}
.gd-label {
font-size: 16px;
font-weight: 600;
color: #262626;
}
.gd-content {
padding: 8px 0;
}
.gd-value {
font-size: 15px;
line-height: 1.5;
color: #595959;
font-weight: 400;
white-space: pre-wrap;
font-family: inherit;
}
.description-content {
margin-top: 8px;
padding: 8px 0;
@ -357,6 +437,7 @@ video.slider-media .wx-video-volume-icon {
color: #595959;
font-weight: 400;
white-space: pre-wrap;
font-family: inherit;
}
/* 联系信息 */
@ -696,21 +777,22 @@ video.slider-media .wx-video-volume-icon {
/* 同步 goods 页面的 product-description 样式 */
.product-description {
font-size: 22rpx;
font-size: 28rpx;
color: #666;
line-height: 1.4;
line-height: 1.6;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 6rpx 0;
margin: 12rpx 0;
background: #fafafa;
padding: 6rpx;
padding: 12rpx;
border-radius: 8rpx;
border: 1rpx solid #f0f0f0;
width: 100%;
box-sizing: border-box;
font-family: inherit;
}
/* 联系信息 */
@ -802,6 +884,117 @@ video.slider-media .wx-video-volume-icon {
gap: 12rpx;
}
/* 编辑表单样式 */
.edit-form-label {
font-size: 28rpx;
font-weight: 500;
color: #333;
margin-bottom: 12rpx;
margin-left: 10rpx;
font-family: inherit;
}
.edit-form-input {
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding: 0 24rpx;
font-size: 30rpx;
border: 2rpx solid #eee;
border-radius: 12rpx;
box-sizing: border-box;
margin: 0 auto 30rpx;
display: block;
font-family: inherit;
color: #333;
}
.edit-form-input::placeholder {
font-size: 24rpx;
color: #999;
text-align: left;
font-family: inherit;
}
.edit-form-select {
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding: 0 24rpx;
font-size: 30rpx;
border: 2rpx solid #eee;
border-radius: 12rpx;
box-sizing: border-box;
margin: 0 auto 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
background: white;
font-family: inherit;
}
.select-text {
color: #333;
font-family: inherit;
}
.select-text:empty::before {
content: '请选择联系人';
color: #999;
}
.select-arrow {
color: #999;
font-size: 24rpx;
font-family: inherit;
}
/* 模态框样式 */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
z-index: 999;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #eee;
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.modal-btn {
font-size: 32rpx;
font-family: inherit;
}
.cancel-btn {
color: #666;
}
.modal-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
font-family: inherit;
}
.confirm-btn {
color: #07c160;
}
.creator-item {
display: flex;
align-items: center;
@ -875,6 +1068,183 @@ video.slider-media .wx-video-volume-icon {
}
}
/* 模态弹窗通用样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
catchtouchmove: true;
}
.modal-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
border-radius: 20rpx 20rpx 0 0;
max-height: 80vh;
}
.modal-header-bar {
padding: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #eee;
}
.modal-header-btn {
font-size: 32rpx;
color: #333;
padding: 10rpx 20rpx;
font-family: inherit;
}
.modal-header-confirm-btn {
color: #07c160;
}
.modal-scroll-view {
max-height: 60vh;
padding: 0;
-webkit-overflow-scrolling: touch;
}
.modal-scroll-view::-webkit-scrollbar {
display: none;
}
/* 搜索框样式 */
.modal-search-container {
padding: 20rpx;
}
.modal-search-box {
position: relative;
background: #f5f5f5;
border-radius: 40rpx;
padding: 0 30rpx;
}
.modal-search-input {
width: 100%;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
background: transparent;
font-family: inherit;
}
.modal-search-clear {
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
color: #999;
}
/* 选择列表样式 */
.modal-select-item {
padding: 32rpx 40rpx;
border-bottom: 1rpx solid #f0f0f0;
font-size: 32rpx;
color: #131413;
text-align: center;
font-family: inherit;
}
.modal-select-item.selected {
color: #07c160;
}
.modal-select-item-text {
font-size: 32rpx;
font-weight: 500;
font-family: inherit;
}
.modal-select-item-subtext {
font-size: 24rpx;
color: #999;
margin-top: 8rpx;
font-family: inherit;
}
/* 规格选择弹窗样式 */
.spec-select-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
z-index: 9999;
catchtouchmove: true;
}
.spec-item {
padding: 30rpx 40rpx;
border-bottom: 1rpx solid #f0f0f0;
font-size: 28rpx;
color: #333;
text-align: left;
font-family: inherit;
}
.spec-item.selected {
color: #07c160;
}
/* 图片预览弹窗样式 */
.image-preview-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
catchtouchmove: true;
}
.image-preview-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.image-preview-swiper {
width: 100%;
height: 100%;
}
.image-preview-close {
position: absolute;
top: 40rpx;
right: 40rpx;
color: white;
font-size: 40rpx;
background: rgba(0,0,0,0.5);
padding: 10rpx 20rpx;
border-radius: 50%;
font-family: inherit;
}
/* 登录弹窗样式 */
.auth-modal-overlay {
position: fixed;

120
pages/goods/index.wxml
View File

@ -1,64 +1,4 @@
<view class="container">
<!-- 页面标题 -->
<view class="page-title">
<text>内部货源管理</text>
</view>
<!-- 搜索框 -->
<view class="search-container">
<view class="search-box">
<input
class="search-input"
placeholder="搜索货源名称或创建人"
bindinput="onSearchInput"
bindconfirm="searchGoods"
value="{{searchKeyword}}"
/>
<view wx:if="{{searchKeyword}}" class="clear-icon" bindtap="clearSearch">✘</view>
</view>
</view>
<!-- 筛选按钮 -->
<view class="filter-container">
<view class="filter-buttons">
<view
class="filter-btn {{activeFilter === 'all' ? 'active' : ''}}"
bindtap="onFilterChange"
data-filter="all"
>
全部
</view>
<view
class="filter-btn {{activeFilter === 'small' ? 'active' : ''}}"
bindtap="onFilterChange"
data-filter="small"
>
小品种
</view>
<view
class="filter-btn {{activeFilter === 'large' ? 'active' : ''}}"
bindtap="onFilterChange"
data-filter="large"
>
大贸易
</view>
</view>
</view>
<!-- 骨架屏加载 -->
<view wx:if="{{isLoading && goodsList.length === 0}}" class="skeleton-container">
<view class="skeleton-grid">
<view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
<view class="skeleton-image"></view>
<view class="skeleton-title"></view>
<view class="skeleton-title short"></view>
<view class="skeleton-footer">
<view class="skeleton-price"></view>
</view>
</view>
</view>
</view>
<!-- 商品列表区域 -->
<view class="goods-section">
<scroll-view
@ -72,6 +12,66 @@
bindrefresherrefresh="onRefresherRefresh"
>
<view class="goods-list-container">
<!-- 页面标题 -->
<view class="page-title">
<text>内部货源管理</text>
</view>
<!-- 搜索框 -->
<view class="search-container">
<view class="search-box">
<input
class="search-input"
placeholder="搜索货源名称或创建人"
bindinput="onSearchInput"
bindconfirm="searchGoods"
value="{{searchKeyword}}"
/>
<view wx:if="{{searchKeyword}}" class="clear-icon" bindtap="clearSearch">✘</view>
</view>
</view>
<!-- 筛选按钮 -->
<view class="filter-container">
<view class="filter-buttons">
<view
class="filter-btn {{activeFilter === 'all' ? 'active' : ''}}"
bindtap="onFilterChange"
data-filter="all"
>
全部
</view>
<view
class="filter-btn {{activeFilter === 'small' ? 'active' : ''}}"
bindtap="onFilterChange"
data-filter="small"
>
小品种
</view>
<view
class="filter-btn {{activeFilter === 'large' ? 'active' : ''}}"
bindtap="onFilterChange"
data-filter="large"
>
大贸易
</view>
</view>
</view>
<!-- 骨架屏加载 -->
<view wx:if="{{isLoading && goodsList.length === 0}}" class="skeleton-container">
<view class="skeleton-grid">
<view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
<view class="skeleton-image"></view>
<view class="skeleton-title"></view>
<view class="skeleton-title short"></view>
<view class="skeleton-footer">
<view class="skeleton-price"></view>
</view>
</view>
</view>
</view>
<!-- 网格布局 -->
<view class="grid-container">
<view

10
pages/goods/index.wxss
View File

@ -1,9 +1,9 @@
.container {
width: 100%;
padding: 20rpx;
box-sizing: border-box;
background-color: #f5f5f5;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
.page-title {
@ -156,8 +156,8 @@
/* 货源列表样式 - 网格布局 */
.goods-section {
width: 100%;
margin-top: 20rpx;
height: calc(100vh - 300rpx); /* 设置容器高度，确保scroll-view能正常滚动 */
height: 100vh;
box-sizing: border-box;
}
/* 滚动视图样式 */
@ -168,7 +168,7 @@
.goods-list-container {
width: 100%;
padding: 0 10rpx;
padding: 20rpx;
box-sizing: border-box;
}

Write Preview
Loading…
Cancel
Save