dev/code-bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序产品页面优化，及添加忽略文件

Browse Source
This commit is contained in:
Dev
2026-09-21 16:27:14 +08:00
parent 8591e5e99f
commit bd24456aa3
24 changed files with 513 additions and 768 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/.gitignore
+1
View File
@@ -16,3 +16,4 @@ composer.lock
.vscode
node_modules
.user.ini
/application/extra/cert/*
backend/application/extra/cert/apiclient_cert.p12
BIN
View File
Binary file not shown.
backend/application/extra/cert/apiclient_cert.pem
-25
View File
@@ -1,25 +0,0 @@
-----BEGIN CERTIFICATE-----
MIIEKzCCAxOgAwIBAgIUY2eAEIlkSexFHMXvmq11hSxYd58wDQYJKoZIhvcNAQEL
BQAwXjELMAkGA1UEBhMCQ04xEzARBgNVBAoTClRlbnBheS5jb20xHTAbBgNVBAsT
FFRlbnBheS5jb20gQ0EgQ2VudGVyMRswGQYDVQQDExJUZW5wYXkuY29tIFJvb3Qg
Q0EwHhcNMjUxMTAyMDM0ODI1WhcNMzAxMTAxMDM0ODI1WjCBhDETMBEGA1UEAwwK
MTU2MDUwODQzMTEbMBkGA1UECgwS5b6u5L+h5ZWG5oi357O757ufMTAwLgYDVQQL
DCfmt7HlnLPluILlpKfniZvliY3msr/np5HmioDmnInpmZDlhazlj7gxCzAJBgNV
BAYTAkNOMREwDwYDVQQHDAhTaGVuWmhlbjCCASIwDQYJKoZIhvcNAQEBBQADggEP
ADCCAQoCggEBAMYFqWiV2VgMyIxo9CcYWS8hvf/DdSvZj9uFl1xbCEI/zP0FZqMw
Fm+DcE7LUadDj5nhnLtNIddn7uc5mS9g3sqnKL2lo4yO/haptm4bbdKMWBFGDmpw
pF1VsY7do4B1QXCjDPACDmReDEQd/kOMd0VPwktZcxeFm0VFkzl0gL16fJghCjx7
aKJbtPMuCdsrdxE0iUVtRIPgQkSt2mhP9Y3dw9Q8QCuiVYtm+8UROSd7/YFEoflO
UUtps+YC7HNWsbBMvzB4nglQmM30vGco2BRRgiHRoJeQL4tGnPGXoaVN74oVWFfL
140gMgog/247dvD3QgD00T4Pa/0uoVZ1NhECAwEAAaOBuTCBtjAJBgNVHRMEAjAA
MAsGA1UdDwQEAwID+DCBmwYDVR0fBIGTMIGQMIGNoIGKoIGHhoGEaHR0cDovL2V2
Y2EuaXRydXMuY29tLmNuL3B1YmxpYy9pdHJ1c2NybD9DQT0xQkQ0MjIwRTUwREJD
MDRCMDZBRDM5NzU0OTg0NkMwMUMzRThFQkQyJnNnPUhBQ0M0NzFCNjU0MjJFMTJC
MjdBOUQzM0E4N0FEMUNERjU5MjZFMTQwMzcxMA0GCSqGSIb3DQEBCwUAA4IBAQBz
KvRvE57MPpOaIDz6R9dSaRmi2PXSt0J5HgE6D8wkk1rGD5bByhswvWiCdJ+cftLl
jirb2mZQSdeal84QcLOtxrB1IDMKJGo9T4o3kLKl5XGowvwC8uKc7br6fPOynMHb
IL3hO6v9xIJGsF3cj+M/Lxin0dto7CJx4a1LsWOCDLn4fYjUftppZOkJy9BX2oTN
A8+dtY3WSS3yM1r4GowSc0tg6u2w8W9UA0JgXs2xt2u0DAavwYs4pJtajABUp8Wd
+CpB/9PwwHTNvNWQcaBI5/tTvY1ROETakfk3kZAuv2jenSUnMZu5SVWbIMlNDADV
z2dnJsZZSne8TFAhpHHj
-----END CERTIFICATE-----
backend/application/extra/cert/apiclient_key.pem
-28
View File
@@ -1,28 +0,0 @@
-----BEGIN PRIVATE KEY-----
MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDGBaloldlYDMiM
aPQnGFkvIb3/w3Ur2Y/bhZdcWwhCP8z9BWajMBZvg3BOy1GnQ4+Z4Zy7TSHXZ+7n
OZkvYN7Kpyi9paOMjv4WqbZuG23SjFgRRg5qcKRdVbGO3aOAdUFwowzwAg5kXgxE
Hf5DjHdFT8JLWXMXhZtFRZM5dIC9enyYIQo8e2iiW7TzLgnbK3cRNIlFbUSD4EJE
rdpoT/WN3cPUPEArolWLZvvFETkne/2BRKH5TlFLabPmAuxzVrGwTL8weJ4JUJjN
9LxnKNgUUYIh0aCXkC+LRpzxl6GlTe+KFVhXy9eNIDIKIP9uO3bw90IA9NE+D2v9
LqFWdTYRAgMBAAECggEASqZjwNuMvdbD27rNH9fb9xqfR8XlbAxuYPExqE1hBaiL
nG7mzGoaaxt/wRSAya98eSRGM43WTiAOPfjGuMep9Xeisiu5Rgm5281KyqNoeVES
+iAQ2ytvqwfdEeCX/Js3ekDdZbVAu7GAqkUsT0aqx+RTeJhV/O4PJMQfxi8XQVY6
iQlGAbZ7vDivAOMO9T9/wI+Q68VdkDVWGEl0UUoz7KE9NVNxPgHp4XApyH9eq32G
EN1YKnj+lhDczQqPhW7HGeBjouhaQIMJDd1JXOL0UvoEQSXhVANpws3IiB1xJXy6
+3YfLi0Mywb0Sdgca/V9Fo0pgQa69UUs08Jgsl0KSQKBgQD+tru4iqtFxme+BjNh
4tKlaepB7H3Dk12vScM2CezDTqntN/lPf5lpoNzpjle1R4ohS7tClrrme2BgOAld
DVgdE+WiSFtCMI+eEw+BkVamlGSr6qA+yRW0TE9Y9X6dWbdCVigOhsttVgm5qDFP
xhTWx7ztg4HM6O9SesALiO28/wKBgQDHBaS+XAhS6QEscFNLBWXtPHIdc3AvIG9G
+C+KybXPIzFVGiFsixfIF3J5k6iXrYBRz+nkmVYq7mG0W1CIH9zA/o45PkizZTn9
WkcoSSUt5P28DNpbtwLzDCfz05VIpzWaEqdmvl5dvRxSSLtrD4WM004EWXhyWs1j
6y2HWco87wKBgC4BWUSKn0a6ADDdM9ihPESuLaZ8jXaOnmQzoXOYNVBNW/nBm2EV
feMLL/trP0I5yqQa5pavXNCWRiD63g4Vg+20k0xNX1ZEKRx2+tz/IDR0Jv66IPlW
HnpzMf2yUY0gEC6GGzQMep+j45vJ2iY7c7YbW29WylH1XIx8KUWsFKyHAoGBAKwy
tdf+yTTzZZCNn4PJp+cb5aCVwPsFlUJSetAatrQCPyzi7wh7UJhPsTyABd82v1AK
FNU11thOaTsjxwoAh4B0v5nHyh9t9j6/XdH9d62988xBUq0ILAUe/3J4HzI9eqNU
gILlM8DnXxnS1FZNl7/BFD+vKgfHiO5rDXmOtu0BAoGAZKdXsnm2upM9WGrUeVqX
YXh1aDwvbawnqie4Mv2C2oMvnnbDy2oEF20lWLvnQXUXFM6PtllXpYuQ5IJpr65J
A/CZ7QJLy2IX1Lc5GBsFex0sxXJeGJF/YyKUvecEVEJNL44bMitvCMKGABT0vNbY
eQPugtpaVAkcvTxqpqUN7NE=
-----END PRIVATE KEY-----
backend/application/extra/cert/证书使用说明.txt
-18
View File
@@ -1,18 +0,0 @@
欢迎使用微信支付！
附件中的三份文件（证书pkcs12格式、证书pem格式、证书密钥pem格式）,为接口中强制要求时需携带的证书文件。
证书属于敏感信息，请妥善保管不要泄露和被他人复制。
不同开发语言下的证书格式不同，以下为说明指引：
证书pkcs12格式（apiclient_cert.p12）
包含了私钥信息的证书文件，为p12(pfx)格式，由微信支付签发给您用来标识和界定您的身份
部分安全性要求较高的API需要使用该证书来确认您的调用身份
windows上可以直接双击导入系统，导入过程中会提示输入证书密码，证书密码默认为您的商户号（如：1900006031）
证书pem格式（apiclient_cert.pem）
从apiclient_cert.p12中导出证书部分的文件，为pem格式，请妥善保管不要泄漏和被他人复制
部分开发语言和环境，不能直接使用p12文件，而需要使用pem，所以为了方便您使用，已为您直接提供
您也可以使用openssl命令来自己导出：openssl pkcs12 -clcerts -nokeys -in apiclient_cert.p12 -out apiclient_cert.pem
证书密钥pem格式（apiclient_key.pem）
从apiclient_cert.p12中导出密钥部分的文件，为pem格式
部分开发语言和环境，不能直接使用p12文件，而需要使用pem，所以为了方便您使用，已为您直接提供
您也可以使用openssl命令来自己导出：openssl pkcs12 -nocerts -in apiclient_cert.p12 -out apiclient_key.pem
备注说明：
由于绝大部分操作系统已内置了微信支付服务器证书的根CA证书, 2018年3月6日后, 不再提供CA证书文件（rootca.pem）下载
frontend/miniapp/components/goods-card/index.js
-15
View File
@@ -67,21 +67,6 @@ Component({
this.triggerEvent('click', { goods: this.data.goods });
},
clickThumbHandle() {
this.triggerEvent('thumb', { goods: this.data.goods });
},
addCartHandle(e) {
const { id } = e.currentTarget;
const { id: cardID } = e.currentTarget.dataset;
this.triggerEvent('add-cart', {
...e.detail,
id,
cardID,
goods: this.data.goods,
});
},
genIndependentID(id) {
let independentID;
if (id) {
frontend/miniapp/components/goods-card/index.wxml
+14 -13
View File
@@ -1,24 +1,25 @@
<view id="{{independentID}}" class="goods-card" bind:tap="clickHandle" data-goods="{{ goods }}">
<view
id="{{independentID}}"
class="goods-card"
hover-class="goods-card--hover"
hover-stay-time="80"
bind:tap="clickHandle"
data-goods="{{ goods }}"
>
<view class="goods-card__main">
<view class="goods-card__thumb" bind:tap="clickThumbHandle">
<view class="goods-card__thumb">
<t-image wx:if="{{ !!goods.thumb }}" t-class="goods-card__img" src="{{ goods.thumb }}" mode="aspectFill" lazy-load />
<view wx:else class="goods-card__img goods-card__img--empty" />
</view>
<view class="goods-card__body">
<view class="goods-card__upper">
<view wx:if="{{ goods.title }}" class="goods-card__title">
{{ goods.title }}
</view>
<view wx:if="{{ goods.tags && !!goods.tags.length }}" class="goods-card__tags">
<view wx:for="{{ goods.tags }}" wx:key="index" wx:for-item="tag" class="goods-card__tag" data-index="{{index}}">
{{tag}}
</view>
</view>
<view wx:if="{{ goods.title }}" class="goods-card__title">{{ goods.title }}</view>
<view wx:if="{{ goods.tags && !!goods.tags.length }}" class="goods-card__tags">
<view wx:for="{{ goods.tags }}" wx:key="index" wx:for-item="tag" class="goods-card__tag">{{ tag }}</view>
</view>
<view class="goods-card__down">
<price wx:if="{{ goods.price }}" wr-class="spec-for-price" symbol-class="spec-for-symbol" symbol="{{currency}}" price="{{goods.price}}" />
<price wx:if="{{ goods.originPrice && isValidityLinePrice }}" wr-class="goods-card__origin-price" symbol="{{currency}}" price="{{goods.originPrice}}" type="delthrough" />
<t-icon class="goods-card__add-cart" prefix="wr" name="cart" id="{{independentID}}-cart" data-id="{{independentID}}" catchtap="addCartHandle" size="48rpx" color="#FA550F" />
</view>
</view>
</view>
</view>
</view>
frontend/miniapp/components/goods-card/index.wxss
+56 -60
View File
@@ -1,34 +1,40 @@
.goods-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
height: 100%;
font-size: 24rpx;
border-radius: var(--radius-lg);
border-bottom: none;
background: var(--bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.goods-card--hover {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(29, 33, 41, 0.06);
}
.goods-card__main {
position: relative;
display: flex;
line-height: 1;
padding: 0;
background: var(--bg-card);
width: 342rpx;
border-radius: var(--radius-lg);
align-items: center;
justify-content: center;
margin-bottom: 20rpx;
flex: 1 1 auto;
flex-direction: column;
box-shadow: var(--shadow-card);
width: 100%;
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
}
.goods-card__thumb {
flex-shrink: 0;
position: relative;
width: 340rpx;
flex-shrink: 0;
width: 100%;
height: 340rpx;
background: var(--bg-grey);
overflow: hidden;
}
.goods-card__thumb:empty {
@@ -40,98 +46,88 @@
display: block;
width: 100%;
height: 100%;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
overflow: hidden;
}
.goods-card__img--empty {
display: flex;
align-items: center;
justify-content: center;
}
.goods-card__body {
display: flex;
flex: 1 1 auto;
background: var(--bg-card);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
flex-direction: column;
padding: 20rpx 24rpx 24rpx;
flex-direction: column;
}
.goods-card__upper {
display: flex;
flex-direction: column;
overflow: hidden;
flex: 1 1 auto;
background: var(--bg-card);
}
.goods-card__title {
flex-shrink: 0;
font-size: 28rpx;
color: var(--text-primary);
font-weight: 500;
display: -webkit-box;
height: 72rpx;
height: 80rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
color: var(--text-primary);
word-break: break-word;
line-height: 36rpx;
}
.goods-card__tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 8rpx 0 0 0;
flex-wrap: nowrap;
margin: 10rpx 0 0 0;
overflow: hidden;
height: 36rpx;
}
.goods-card__tag {
color: var(--brand);
background: var(--brand-light);
font-size: 20rpx;
border: none;
padding: 2rpx 12rpx;
border-radius: var(--radius-round);
line-height: 30rpx;
margin: 0 8rpx 8rpx 0;
display: block;
max-width: 200rpx;
margin: 0 8rpx 0 0;
padding: 2rpx 12rpx;
overflow: hidden;
font-size: 20rpx;
line-height: 30rpx;
color: var(--brand);
white-space: nowrap;
word-break: keep-all;
text-overflow: ellipsis;
background: var(--brand-light);
border-radius: var(--radius-round);
}
.goods-card__down {
display: flex;
position: relative;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
line-height: 32rpx;
margin: 8rpx 0 0 0;
justify-content: flex-start;
margin: auto 0 0 0;
padding-top: 10rpx;
line-height: 44rpx;
}
.goods-card__origin-price {
white-space: nowrap;
font-weight: 400;
order: 2;
margin: 0 0 0 12rpx;
font-size: 22rpx;
font-weight: 400;
color: var(--text-placeholder);
font-size: 24rpx;
margin: 0 0 0 8rpx;
text-decoration: line-through;
}
.goods-card__add-cart {
order: 3;
margin: auto 0 0 auto;
position: absolute;
bottom: 0;
right: 0;
white-space: nowrap;
}
.spec-for-price {
font-size: 36rpx;
white-space: nowrap;
font-weight: 700;
order: 1;
color: var(--brand);
margin: 0;
font-size: 38rpx;
font-weight: 700;
color: var(--brand);
white-space: nowrap;
font-family: 'DIN Alternate', -apple-system, sans-serif;
}
frontend/miniapp/components/goods-list/index.js
-10
View File
@@ -35,16 +35,6 @@ Component({
this.triggerEvent('click', { ...e.detail, index });
},
onAddCart(e) {
const { index } = e.currentTarget.dataset;
this.triggerEvent('addcart', { ...e.detail, index });
},
onClickGoodsThumb(e) {
const { index } = e.currentTarget.dataset;
this.triggerEvent('thumb', { ...e.detail, index });
},
init() {
this.genIndependentID(this.id || '');
},
frontend/miniapp/components/goods-list/index.wxml
+2 -2
View File
@@ -1,5 +1,5 @@
<view class="goods-list-wrap wr-class" id="{{independentID}}">
<block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index">
<goods-card id="{{independentID}}-gd-{{index}}" data="{{item}}" currency="{{item.currency || '¥'}}" thresholds="{{thresholds}}" class="goods-card-inside" data-index="{{index}}" bind:thumb="onClickGoodsThumb" bind:click="onClickGoods" bind:add-cart="onAddCart" />
<goods-card id="{{independentID}}-gd-{{index}}" data="{{item}}" currency="{{item.currency || '¥'}}" thresholds="{{thresholds}}" class="goods-card-inside" data-index="{{index}}" bind:click="onClickGoods" />
</block>
</view>
</view>
frontend/miniapp/components/goods-list/index.wxss
+8 -1
View File
@@ -1,7 +1,14 @@
.goods-list-wrap {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: space-between;
padding: 0;
background: #fff;
background: transparent;
}
.goods-list-wrap goods-card {
display: block;
width: calc(50% - 10rpx);
margin-bottom: 20rpx;
}
frontend/miniapp/pages/goods/details/components/buy-bar/index.js
+1 -34
View File
@@ -1,5 +1,5 @@
Component({
externalClasses: ['wr-sold-out', 'wr-class'],
externalClasses: ['wr-class'],
options: { multipleSlots: true },
@@ -9,10 +9,6 @@ Component({
type: Boolean,
value: false,
},
jumpArray: {
type: Array,
value: [],
},
isStock: {
type: Boolean,
value: true,
@@ -21,46 +17,17 @@ Component({
type: Boolean,
value: false,
}, // 是否开启按钮插槽
shopCartNum: {
type: Number, // 购物车气泡数量
},
buttonType: {
type: Number,
value: 0,
},
minDiscountPrice: {
type: String,
value: '',
},
minSalePrice: {
type: String,
value: '',
},
},
data: {
fillPrice: false,
},
methods: {
toAddCart() {
const { isStock, soldout } = this.properties;
if (soldout || !isStock) return;
// this.triggerEvent('toAddCart');
},
toBuyNow(e) {
const { isStock, soldout } = this.properties;
if (soldout || !isStock) return;
this.triggerEvent('toBuyNow', e);
},
toNav(e) {
const { url } = e.currentTarget.dataset;
return this.triggerEvent('toNav', {
e,
url,
});
},
},
});
frontend/miniapp/pages/goods/details/components/buy-bar/index.json
+2 -4
View File
@@ -1,6 +1,4 @@
{
"component": true,
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon"
}
}
"usingComponents": {}
}
frontend/miniapp/pages/goods/details/components/buy-bar/index.wxml
+14 -37
View File
@@ -1,38 +1,15 @@
<view class="flex soldout flex-center wr-sold-out" wx:if="{{soldout || !isStock}}">
{{soldout ? '商品已下架' : '商品已售馨'}}
<view class="footer-cont wr-class">
<block wx:if="{{buttonType === 1}}">
<view
class="bar-buy {{soldout || !isStock ? 'bar-buy-disabled' : ''}}"
hover-class="{{soldout || !isStock ? '' : 'bar-buy--hover'}}"
hover-stay-time="60"
bindtap="toBuyNow"
>
{{soldout ? '商品已下架' : (!isStock ? '商品已售罄' : '立即购买')}}
</view>
</block>
<block wx:if="{{isSlotButton}}">
<slot name="buyButton" />
</block>
</view>
<view class="footer-cont flex flex-between wr-class">
<view class="flex flex-between bottom-operate-left" wx:if="{{jumpArray.length > 0}}">
<view
wx:for="{{jumpArray}}"
wx:key="index"
class="icon-warp operate-wrap"
bindtap="toNav"
data-ele="foot_navigation"
data-index="{{index}}"
data-url="{{item.url}}"
>
<view>
<text wx:if="{{shopCartNum > 0 && item.showCartNum}}" class="tag-cart-num">
{{shopCartNum > 99 ? '99+' : shopCartNum}}
</text>
<t-icon prefix="wr" name="{{item.iconName}}" size="40rpx" />
<view class="operate-text">{{item.title}}</view>
</view>
</view>
</view>
<block wx:if="{{buttonType === 1}}">
<view class="flex buy-buttons">
<view class="bar-separately {{soldout || !isStock ? 'bar-addCart-disabled' : ''}}" bindtap="toAddCart">
加入购物车
</view>
<view class="bar-buy {{soldout || !isStock ? 'bar-buyNow-disabled' : ''}}" bindtap="toBuyNow">
立即购买
</view>
</view>
</block>
<block wx:if="{{isSlotButton}}">
<slot name="buyButton" />
</block>
</view>
frontend/miniapp/pages/goods/details/components/buy-bar/index.wxss
+19 -100
View File
@@ -1,112 +1,31 @@
.footer-cont {
display: flex;
align-items: center;
padding: 16rpx 24rpx;
background-color: var(--bg-card);
padding: 16rpx;
box-shadow: 0 -4rpx 20rpx rgba(29, 33, 41, 0.04);
}
.icon-warp {
width: 110rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.operate-wrap {
position: relative;
}
.bottom-operate-left {
width: 100%;
}
.bottom-operate-left .icon-warp {
width: 50%;
}
.tag-cart-num {
display: inline-block;
position: absolute;
left: 50rpx;
right: auto;
top: 6rpx;
color: var(--text-inverse);
line-height: 24rpx;
text-align: center;
z-index: 99;
white-space: nowrap;
min-width: 28rpx;
border-radius: 14rpx;
background-color: var(--error) !important;
font-size: 20rpx;
font-weight: 400;
padding: 2rpx 6rpx;
}
.operate-text {
color: var(--text-secondary);
font-size: 20rpx;
}
.soldout {
height: 80rpx;
background: var(--text-disabled);
width: 100%;
color: var(--text-inverse);
border-radius: var(--radius-round);
}
.addCart-disabled,
.bar-addCart-disabled {
background: var(--bg-grey) !important;
color: var(--text-disabled) !important;
font-size: 28rpx;
}
.buyNow-disabled,
.bar-buyNow-disabled {
background: var(--bg-grey) !important;
color: var(--text-disabled) !important;
font-size: 28rpx;
}
.bar-separately,
.bar-buy {
width: 254rpx;
height: 80rpx;
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 500;
}
.bar-separately {
background: var(--brand-light-2);
color: var(--brand);
border-radius: 40rpx 0 0 40rpx;
}
.bar-buy {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
height: 88rpx;
font-size: 30rpx;
font-weight: 600;
color: var(--text-inverse);
background: var(--brand-gradient);
border-radius: 0rpx 40rpx 40rpx 0rpx;
border-radius: var(--radius-round);
box-shadow: var(--shadow-brand);
transition: opacity 0.16s ease;
}
.flex {
display: flex;
display: -webkit-flex;
.bar-buy--hover {
opacity: 0.88;
}
.flex-center {
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
}
.flex-between {
justify-content: space-between;
-webkit-justify-content: space-between;
.bar-buy-disabled {
color: var(--text-disabled) !important;
background: var(--bg-grey) !important;
box-shadow: none;
}
frontend/miniapp/pages/goods/details/components/goods-specs-popup/index.js
-6
View File
@@ -304,12 +304,6 @@ Component({
this.triggerEvent('specsConfirm');
},
addCart() {
const { isStock } = this.properties;
if (!isStock) return;
this.triggerEvent('addCart');
},
buyNow() {
const { isAllSelectedSku } = this.data;
const { isStock } = this.properties;
frontend/miniapp/pages/goods/details/components/goods-specs-popup/index.wxml
+3 -13
View File
@@ -63,19 +63,9 @@
<view wx:if="{{outOperateStatus}}" class="single-confirm-btn {{!isStock ? 'disabled' : ''}}" bindtap="specsConfirm">
确定
</view>
<view
class="popup-sku-actions flex flex-between {{!isStock ? 'popup-sku-disabled' : ''}}"
wx:if="{{!outOperateStatus}}"
>
<view class="sku-operate">
<view class="selected-sku-btn sku-operate-addCart {{!isStock ? 'disabled' : ''}}" bindtap="addCart">
加入购物车
</view>
</view>
<view class="sku-operate">
<view class="selected-sku-btn sku-operate-buyNow {{!isStock ? 'disabled' : ''}}" bindtap="buyNow">
立即购买
</view>
<view class="popup-sku-actions {{!isStock ? 'popup-sku-disabled' : ''}}" wx:if="{{!outOperateStatus}}">
<view class="selected-sku-btn sku-operate-buyNow {{!isStock ? 'disabled' : ''}}" bindtap="buyNow">
立即购买
</view>
</view>
<slot name="bottomSlot" />
frontend/miniapp/pages/goods/details/components/goods-specs-popup/index.wxss
+42 -52
View File
@@ -22,8 +22,8 @@
.popup-sku-header .popup-sku-header__img {
width: 176rpx;
height: 176rpx;
border-radius: 8rpx;
background: #d8d8d8;
border-radius: var(--radius-md);
background: var(--bg-grey);
margin-right: 24rpx;
}
@@ -33,14 +33,16 @@
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__goods-name {
font-size: 28rpx;
line-height: 40rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
overflow: hidden;
width: 430rpx;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 30rpx;
font-weight: 500;
line-height: 42rpx;
color: var(--text-primary);
white-space: normal;
text-overflow: ellipsis;
}
@@ -243,58 +245,46 @@
}
.popup-sku-actions {
font-size: 32rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
padding: 0 20rpx;
padding: 0 32rpx;
}
.popup-sku-actions .sku-operate {
height: 80rpx;
width: 50%;
color: #fff;
border-radius: 48rpx;
}
.popup-sku-actions .sku-operate .sku-operate-addCart {
background-color: var(--brand-light);
color: var(--brand);
border-radius: 48rpx 0 0 48rpx;
}
.popup-sku-actions .sku-operate .sku-operate-addCart.disabled {
background: rgb(221, 221, 221);
color: #fff;
}
.popup-sku-actions .sku-operate .sku-operate-buyNow {
background-color: var(--brand);
border-radius: 0 48rpx 48rpx 0;
}
.popup-sku-actions .sku-operate .sku-operate-buyNow.disabled {
color: #fff;
background: rgb(198, 198, 198);
}
.popup-sku-actions .sku-operate .selected-sku-btn {
.popup-sku-actions .selected-sku-btn {
width: 100%;
}
.popup-container .single-confirm-btn {
border-radius: 48rpx;
color: #ffffff;
margin: 0 32rpx;
font-size: 32rpx;
height: 80rpx;
.popup-sku-actions .sku-operate-buyNow {
height: 88rpx;
font-size: 30rpx;
font-weight: 600;
color: var(--text-inverse);
text-align: center;
line-height: 88rpx;
background-color: var(--brand);
background: var(--brand-gradient);
border-radius: var(--radius-round);
box-shadow: var(--shadow-brand);
}
.popup-sku-actions .sku-operate-buyNow.disabled {
color: var(--text-disabled);
background: var(--bg-grey);
box-shadow: none;
}
.popup-container .single-confirm-btn {
margin: 0 32rpx;
height: 88rpx;
font-size: 30rpx;
font-weight: 600;
color: var(--text-inverse);
text-align: center;
line-height: 88rpx;
background: var(--brand-gradient);
border-radius: var(--radius-round);
box-shadow: var(--shadow-brand);
}
.popup-container .single-confirm-btn.disabled {
font-size: 32rpx;
color: #fff;
background-color: #dddddd;
color: var(--text-disabled);
background: var(--bg-grey);
box-shadow: none;
}
frontend/miniapp/pages/goods/details/index.js
+10 -57
View File
@@ -1,4 +1,3 @@
import Toast from 'tdesign-miniprogram/toast/index';
import { fetchGood } from '../../../services/good/fetchGood';
import { fetchActivityList } from '../../../services/activity/fetchActivityList';
import {
@@ -49,21 +48,7 @@ Page({
],
storeLogo: `${imgPrefix}common/store-logo.png`,
storeName: '云mall标准版旗舰店',
jumpArray: [
{
title: '首页',
url: '/pages/home/home',
iconName: 'home',
},
{
title: '购物车',
url: '/pages/cart/index',
iconName: 'cart',
showCartNum: true,
},
],
isStock: true,
cartNum: 0,
soldout: false,
buttonType: 1,
buyNum: 1,
@@ -74,7 +59,7 @@ Page({
isSpuSelectPopupShow: false,
isAllSelectedSku: false,
buyType: 0,
outOperateStatus: false, // 是否外层加入购物车
outOperateStatus: false, // 是否由底部购买栏唤起弹窗
operateType: 0,
selectSkuSellsPrice: 0,
maxLinePrice: 0,
@@ -104,21 +89,16 @@ Page({
});
},
// 点击"已选"行：仅选择规格
onSelectSkuTap() {
this.showSkuSelectPopup(0);
},
// 点击底部"立即购买"
buyItNow() {
this.showSkuSelectPopup(1);
},
toAddCart() {
this.showSkuSelectPopup(2);
},
toNav(e) {
const { url } = e.detail;
wx.switchTab({
url: url,
});
},
showCurImg(e) {
const { index } = e.detail;
const { images } = this.data.details;
@@ -226,29 +206,8 @@ Page({
}
},
addCart() {
const { isAllSelectedSku } = this.data;
Toast({
context: this,
selector: '#t-toast',
message: isAllSelectedSku ? '点击加入购物车' : '请选择规格',
icon: '',
duration: 1000,
});
},
gotoBuy(type) {
const { isAllSelectedSku, buyNum } = this.data;
if (!isAllSelectedSku) {
// Toast({
// context: this,
// selector: '#t-toast',
// message: '请选择规格',
// icon: '',
// duration: 1000,
// });
// return;
}
gotoBuy() {
const { buyNum } = this.data;
this.handlePopupHide();
const query = {
quantity: buyNum,
@@ -278,13 +237,7 @@ Page({
},
specsConfirm() {
const { buyType } = this.data;
if (buyType === 1) {
this.gotoBuy();
} else {
this.addCart();
}
// this.handlePopupHide();
this.gotoBuy();
},
changeNum(e) {
frontend/miniapp/pages/goods/details/index.wxml
+41 -16
View File
@@ -1,6 +1,8 @@
<view class="goods-detail-page">
<view class="goods-head">
<t-swiper wx:if="{{details.images.length > 0}}" height="750rpx" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" list="{{details.images}}"></t-swiper>
<view class="goods-gallery">
<t-swiper wx:if="{{details.images.length > 0}}" height="750rpx" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" list="{{details.images}}"></t-swiper>
</view>
<view class="goods-info">
<view class="goods-number">
<view class="goods-price">
@@ -8,8 +10,9 @@
<view class="goods-price-up">起</view>
<price wr-class="class-goods-del" price="{{maxLinePrice}}" type="delthrough" />
</view>
<view class="sold-num">已售{{soldNum}}</view>
<view class="sold-num" wx:if="{{soldNum > 0}}">已售 {{soldNum}}</view>
</view>
<view wx:if="{{activityList.length > 0}}" class="goods-activity" bindtap="showPromotionPopup">
<view class="tags-container">
<view wx:for="{{activityList}}" data-promotionId="{{item.promotionId}}" wx:key="index" wx:if="{{index<4}}">
@@ -21,28 +24,37 @@
<t-icon name="chevron-right" size="42rpx" />
</view>
</view>
<view class="goods-title">
<view class="goods-name">{{details.title}}</view>
<view class="goods-tag">
<t-button open-type="share" t-class="shareBtn" variant="text">
<view class="btn-icon">
<t-icon name="share" size="40rpx" color="#000" />
<t-icon name="share" size="40rpx" color="#4E5969" />
<view class="share-text">分享</view>
</view>
</t-button>
</view>
</view>
<view class="goods-intro">{{intro}}</view>
<view class="goods-service">
<t-icon name="check-circle" size="28rpx" color="#00B578" />
<text class="goods-service__text">3分钟客服响应 · 平台监管售后</text>
</view>
<view class="goods-intro" wx:if="{{details.intro}}">{{details.intro}}</view>
</view>
<view class="spu-select" bindtap="showSkuSelectPopup">
<view class="spu-select" bindtap="onSelectSkuTap">
<view class="label">已选</view>
<view class="content">
<view class="{{!selectedAttrStr ? 'tintColor' : ''}}">
{{selectedAttrStr ? buyNum : ''}}{{selectedAttrStr || '请选择'}}
<view class="content-text {{!selectedAttrStr ? 'tintColor' : ''}}">
{{selectedAttrStr ? buyNum : ''}}{{selectedAttrStr || '请选择规格'}}
</view>
<t-icon name="chevron-right" size="40rpx" color="#BBBBBB" />
</view>
</view>
<view wx:if="{{ commentsStatistics.commentCount > 0 }}" class="comments-wrap">
<view class="comments-head" bindtap="navToCommentsListPage">
<view class="comments-title-wrap">
@@ -66,20 +78,16 @@
</view>
</view>
</view>
<view class="desc-content">
<view class="desc-content__title" wx:if="{{details.desc.length > 0}}">
<t-image t-class="img" src="{{recLeftImg}}" />
<span class="desc-content__title--text">详情介绍</span>
<t-image t-class="img" src="{{recRightImg}}" />
</view>
<!-- <view wx:if="{{details.desc.length > 0}}" wx:for="{{details.desc}}" wx:key="index">
<t-image t-class="desc-content__img" src="{{item}}" mode="widthFix" />
</view> -->
<!-- 视频列表 -->
<view class="video-container">
<block wx:for="{{details.videos}}" wx:key="index">
<view wx:if="{{item}}" class="video-item">
<!-- 视频组件 -->
<video src="{{item}}" enable-play-gesture binderror="onVideoError" class="video-player" />
</view>
</block>
@@ -88,17 +96,34 @@
<rich-text nodes="{{details.desc}}"></rich-text>
</view>
</view>
<view class="goods-bottom-operation">
<buy-bar jumpArray="{{jumpArray}}" soldout="{{soldout}}" isStock="{{isStock}}" shopCartNum="{{cartNum}}" buttonType="{{buttonType}}" bind:toAddCart="toAddCart" bind:toNav="toNav" bind:toBuyNow="buyItNow" class="goods-details-card" />
<buy-bar soldout="{{soldout}}" isStock="{{isStock}}" buttonType="{{buttonType}}" bind:toBuyNow="buyItNow" />
</view>
<goods-specs-popup id="goodsSpecsPopup" show="{{isSpuSelectPopupShow}}" title="{{details.title || ''}}" src="{{specImg ? specImg : primaryImage}}" specList="{{details.specList || []}}" skuList="{{skuArray}}" limitBuyInfo="{{details.limitInfo[0].text || ''}}" bind:closeSpecsPopup="handlePopupHide" bind:change="chooseSpecItem" bind:changeNum="changeNum" bind:addCart="addCart" bind:buyNow="gotoBuy" bind:specsConfirm="specsConfirm" isStock="{{isStock}}" outOperateStatus="{{outOperateStatus}}">
<goods-specs-popup
id="goodsSpecsPopup"
show="{{isSpuSelectPopupShow}}"
title="{{details.title || ''}}"
src="{{specImg ? specImg : primaryImage}}"
specList="{{details.specList || []}}"
skuList="{{skuArray}}"
limitBuyInfo="{{details.limitInfo[0].text || ''}}"
bind:closeSpecsPopup="handlePopupHide"
bind:change="chooseSpecItem"
bind:changeNum="changeNum"
bind:buyNow="gotoBuy"
bind:specsConfirm="specsConfirm"
isStock="{{isStock}}"
outOperateStatus="{{outOperateStatus}}"
>
<view slot="goods-price">
<view class="popup-sku__price">
<price wx:if="{{!isAllSelectedSku || (!promotionSubCode && isAllSelectedSku)}}" price="{{selectSkuSellsPrice ? selectSkuSellsPrice : minSalePrice }}" wr-class="popup-sku__price-num" symbol-class="popup-sku__price-symbol" />
<price wx:if="{{!isAllSelectedSku || (!promotionSubCode && isAllSelectedSku)}}" price="{{selectSkuSellsPrice ? selectSkuSellsPrice : minSalePrice}}" wr-class="popup-sku__price-num" symbol-class="popup-sku__price-symbol" />
<price wx:if="{{selectSkuSellsPrice === 0 && minSalePrice !== maxSalePrice && !isAllSelectedSku}}" price="{{maxSalePrice}}" wr-class="popup-sku__price-del" type="delthrough" />
</view>
</view>
</goods-specs-popup>
<promotion-popup list="{{list}}" bind:closePromotionPopup="closePromotionPopup" show="{{isShowPromotionPop}}" bind:promotionChange="promotionChange" />
</view>
<t-toast id="t-toast" />
<t-toast id="t-toast" />
frontend/miniapp/pages/goods/details/index.wxss
+246 -190
View File
@@ -2,278 +2,248 @@
page {
width: 100vw;
background-color: var(--bg-page);
}
.goods-detail-page .goods-info {
margin: 0 auto;
padding: 26rpx 0 28rpx 30rpx;
background-color: #fff;
.goods-detail-page {
min-height: 100vh;
padding-bottom: 160rpx;
background-color: var(--bg-page);
}
.goods-detail-page .swipe-img {
width: 100%;
height: 750rpx;
.goods-head {
--td-swiper-radius: 0;
}
.goods-detail-page .goods-info .goods-price {
.goods-gallery {
position: relative;
background-color: var(--bg-card);
}
/* 商品信息卡片：轻微上浮覆盖轮播，形成层次 */
.goods-info {
position: relative;
z-index: 2;
margin-top: -24rpx;
padding: 28rpx 30rpx 32rpx;
background-color: var(--bg-card);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.goods-info .goods-number {
display: flex;
align-items: center;
justify-content: space-between;
}
.goods-info .goods-price {
display: flex;
align-items: baseline;
}
.goods-detail-page .goods-info .goods-price-up {
color: var(--brand);
font-size: 28rpx;
position: relative;
bottom: 4rpx;
left: 8rpx;
}
.goods-detail-page .goods-info .goods-price .class-goods-price {
.goods-info .goods-price .class-goods-price {
font-size: 64rpx;
font-weight: 700;
color: var(--brand);
font-weight: bold;
font-family: DIN Alternate;
font-family: 'DIN Alternate', -apple-system, sans-serif;
}
.goods-detail-page .goods-info .goods-price .class-goods-symbol {
.goods-info .goods-price .class-goods-symbol {
font-size: 36rpx;
color: var(--brand);
}
.goods-detail-page .goods-info .goods-price .class-goods-del {
.goods-info .goods-price .class-goods-del {
position: relative;
font-weight: normal;
left: 16rpx;
bottom: 2rpx;
font-size: 28rpx;
font-weight: normal;
color: var(--text-tertiary);
font-size: 32rpx;
}
.goods-detail-page .goods-info .goods-number {
display: flex;
align-items: center;
justify-content: space-between;
.goods-info .goods-price-up {
position: relative;
left: 8rpx;
bottom: 4rpx;
font-size: 26rpx;
color: var(--brand);
}
.goods-detail-page .goods-info .goods-number .sold-num {
font-size: 24rpx;
color: var(--text-tertiary);
.goods-info .goods-number .sold-num {
display: flex;
flex-shrink: 0;
align-items: flex-end;
margin-right: 32rpx;
padding: 4rpx 16rpx;
font-size: 22rpx;
color: var(--text-tertiary);
background: var(--bg-grey);
border-radius: var(--radius-round);
}
.goods-detail-page .goods-info .goods-activity {
.goods-info .goods-activity {
display: flex;
margin-top: 16rpx;
justify-content: space-between;
}
.goods-detail-page .goods-info .goods-activity .tags-container {
display: flex;
}
.goods-detail-page .goods-info .goods-activity .tags-container .goods-activity-tag {
background: var(--brand-light);
color: var(--brand);
font-size: 24rpx;
margin-right: 16rpx;
padding: 4rpx 8rpx;
border-radius: 4rpx;
}
.goods-detail-page .goods-info .goods-activity .activity-show {
display: flex;
justify-content: center;
align-items: center;
color: var(--brand);
font-size: 24rpx;
padding-right: 32rpx;
justify-content: space-between;
margin-top: 20rpx;
padding: 12rpx 20rpx;
background: var(--brand-light);
border-radius: var(--radius-sm);
}
.goods-detail-page .goods-info .goods-activity .activity-show-text {
.goods-info .goods-activity .tags-container {
display: flex;
flex: 1;
overflow: hidden;
}
.goods-info .goods-activity .tags-container .goods-activity-tag {
margin-right: 16rpx;
padding: 4rpx 12rpx;
font-size: 22rpx;
color: var(--brand);
background: var(--bg-card);
border-radius: var(--radius-sm);
}
.goods-info .goods-activity .activity-show {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: var(--brand);
}
.goods-info .goods-activity .activity-show-text {
line-height: 42rpx;
}
.goods-detail-page .goods-info .goods-title {
.goods-info .goods-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
align-items: center;
margin-top: 20rpx;
margin-top: 24rpx;
}
.goods-detail-page .goods-info .goods-title .goods-name {
width: 600rpx;
font-weight: 500;
.goods-info .goods-title .goods-name {
flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 32rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 34rpx;
font-weight: 600;
line-height: 48rpx;
color: var(--text-primary);
word-break: break-all;
}
.goods-detail-page .goods-info .goods-title .goods-tag {
.goods-info .goods-title .goods-tag {
flex-shrink: 0;
width: 104rpx;
margin-left: 26rpx;
margin-left: 16rpx;
}
.goods-detail-page .goods-info .goods-title .goods-tag .shareBtn {
border-radius: 200rpx 0px 0px 200rpx;
.goods-info .goods-title .goods-tag .shareBtn {
width: 100rpx;
height: 96rpx;
border: none;
padding-right: 36rpx !important;
border: none;
border-radius: 200rpx 0 0 200rpx;
}
.goods-detail-page .goods-info .goods-title .goods-tag .shareBtn::after {
.goods-info .goods-title .goods-tag .shareBtn::after {
border: none;
}
.goods-detail-page .goods-info .goods-title .goods-tag .btn-icon {
font-size: 20rpx;
.goods-info .goods-title .goods-tag .btn-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 96rpx;
font-size: 20rpx;
color: var(--text-tertiary);
}
.goods-detail-page .goods-info .goods-title .goods-tag .btn-icon .share-text {
.goods-info .goods-title .goods-tag .btn-icon .share-text {
padding-top: 8rpx;
font-size: 20rpx;
line-height: 24rpx;
}
.goods-detail-page .goods-info .goods-intro {
font-size: 26rpx;
color: var(--text-tertiary);
line-height: 36rpx;
word-break: break-all;
padding-right: 30rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
overflow: hidden;
}
.spu-select {
height: 80rpx;
background-color: #fff;
margin-top: 20rpx;
.goods-service {
display: flex;
align-items: center;
padding: 30rpx;
margin-top: 18rpx;
}
.goods-service__text {
margin-left: 8rpx;
font-size: 24rpx;
color: var(--text-tertiary);
}
.goods-info .goods-intro {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-top: 12rpx;
font-size: 26rpx;
line-height: 38rpx;
color: var(--text-tertiary);
word-break: break-all;
white-space: normal;
}
/* 已选规格 */
.spu-select {
display: flex;
align-items: center;
margin: 20rpx 24rpx 0;
padding: 28rpx 30rpx;
font-size: 28rpx;
background-color: var(--bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.spu-select .label {
margin-right: 30rpx;
text-align: center;
flex-shrink: 0;
color: var(--text-tertiary);
margin-right: 24rpx;
font-weight: normal;
color: var(--text-tertiary);
}
.spu-select .content {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
justify-content: space-between;
min-width: 0;
}
.spu-select .content .content-text {
flex: 1;
overflow: hidden;
color: var(--text-primary);
white-space: nowrap;
text-overflow: ellipsis;
}
.spu-select .content .tintColor {
color: var(--text-placeholder);
}
.goods-detail-page .desc-content {
margin-top: 20rpx;
background-color: #fff;
padding-bottom: 120rpx;
}
.goods-detail-page .desc-content__title {
font-size: 28rpx;
line-height: 36rpx;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 30rpx 20rpx;
}
.goods-detail-page .desc-content__title .img {
width: 206rpx;
height: 10rpx;
}
.goods-detail-page .desc-content__title--text {
font-size: 26rpx;
margin: 0 32rpx;
font-weight: 600;
}
.goods-detail-page .desc-content__img {
width: 100%;
height: auto;
}
.goods-bottom-operation {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
padding-bottom: env(safe-area-inset-bottom);
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price {
display: flex;
align-items: baseline;
color: var(--brand);
margin-top: 48rpx;
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-num {
font-size: 64rpx;
color: var(--brand);
font-weight: bold;
font-family: DIN Alternate;
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-del {
position: relative;
font-weight: normal;
left: 12rpx;
bottom: 2rpx;
color: var(--text-tertiary);
font-size: 32rpx;
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-symbol {
font-size: 36rpx;
color: var(--brand);
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-max-num {
font-size: 48rpx;
}
.goods-detail-page .goods-head {
--td-swiper-radius: 0;
}
.t-toast__content {
z-index: 12000 !important;
}
/* 评价 */
.comments-wrap {
margin-top: 20rpx;
margin: 20rpx 24rpx 0;
padding: 32rpx;
background-color: #fff;
background-color: var(--bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.comments-wrap .comments-head {
@@ -289,25 +259,25 @@ page {
.comments-title-label,
.comments-title-count {
color: var(--text-primary);
font-size: 32rpx;
font-weight: 500;
font-weight: 600;
line-height: 48rpx;
color: var(--text-primary);
}
.comments-rate-wrap {
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
.comments-rate-wrap .comments-good-rate {
color: var(--text-tertiary);
font-size: 26rpx;
font-weight: 400;
font-style: normal;
line-height: 36rpx;
color: var(--text-tertiary);
}
.comment-item-wrap .comment-item-head {
@@ -329,17 +299,53 @@ page {
.comment-head-right .comment-username {
font-size: 26rpx;
color: var(--text-primary);
line-height: 36rpx;
font-weight: 400;
line-height: 36rpx;
color: var(--text-primary);
}
.comment-item-wrap .comment-item-content {
margin-top: 20rpx;
color: var(--text-primary);
line-height: 40rpx;
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
color: var(--text-primary);
}
/* 详情 */
.desc-content {
margin: 20rpx 24rpx 0;
padding-bottom: 40rpx;
overflow: hidden;
background-color: var(--bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.desc-content__title {
display: flex;
align-items: center;
justify-content: center;
padding: 32rpx 20rpx 16rpx;
font-size: 28rpx;
line-height: 36rpx;
text-align: center;
}
.desc-content__title .img {
width: 206rpx;
height: 10rpx;
}
.desc-content__title--text {
margin: 0 32rpx;
font-size: 26rpx;
font-weight: 600;
}
.desc-content__img {
width: 100%;
height: auto;
}
.rich-text-content {
@@ -347,9 +353,9 @@ page {
}
.rich-text-content [src] {
display: block;
max-width: 100% !important;
height: auto !important;
display: block;
}
.video-container {
@@ -363,4 +369,54 @@ page {
.video-player {
width: 100%;
height: 400rpx;
}
border-radius: var(--radius-md);
}
/* 底部购买栏 */
.goods-bottom-operation {
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
padding-bottom: env(safe-area-inset-bottom);
background-color: var(--bg-card);
box-shadow: 0 -4rpx 20rpx rgba(29, 33, 41, 0.06);
}
/* 规格弹窗价格 */
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price {
display: flex;
align-items: baseline;
margin-top: 12rpx;
color: var(--brand);
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-num {
font-size: 56rpx;
font-weight: 700;
color: var(--brand);
font-family: 'DIN Alternate', -apple-system, sans-serif;
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-del {
position: relative;
left: 12rpx;
bottom: 2rpx;
font-size: 28rpx;
font-weight: normal;
color: var(--text-tertiary);
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-symbol {
font-size: 32rpx;
color: var(--brand);
}
.popup-sku-header .popup-sku-header__goods-info .popup-sku__price .popup-sku__price-max-num {
font-size: 48rpx;
}
.t-toast__content {
z-index: 12000 !important;
}
frontend/miniapp/pages/goods/list/index.js
-12
View File
@@ -151,10 +151,6 @@ Page({
this.loadGoodsList(true);
},
onShow() {
this.loadGoodsList(true);
},
onReachBottom() {
const { goodsList, total } = this.data;
if (goodsList.length === total) {
@@ -166,14 +162,6 @@ Page({
this.loadGoodsList(false);
},
handleAddCart() {
Toast({
context: this,
selector: '#t-toast',
message: '点击加购',
});
},
tagClickHandle() {
Toast({
context: this,
frontend/miniapp/pages/goods/list/index.wxml
+30 -11
View File
@@ -1,16 +1,35 @@
<view class="goods-list-container">
<view class="search" style="margin-bottom: 5rpx;">
<t-search t-class-input-container="t-class__input-container" t-class-input="t-search__input" t-class-left="t-search__left-icon" value="{{keywords}}" left-icon="{{null}}" placeholder="请输入关键词搜索" bind:blur="onChangeInput" bind:change="onChangeInput" bind:submit="onChangeSearch">
<t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
</t-search>
</view>
<view class="home-page-tabs">
<t-tabs t-class="t-tabs" t-class-active="tabs-external__active" t-class-item="tabs-external__item" defaultValue="{{0}}" space-evenly="{{false}}" bind:change="tabChangeHandle">
<t-tab-panel wx:for="{{tabList}}" wx:for-index="index" wx:key="index" label="{{item.text}}" value="{{item.key}}" />
</t-tabs>
<view class="list-header">
<view class="search">
<t-search
t-class-input-container="t-class__input-container"
t-class-input="t-search__input"
t-class-left="t-search__left-icon"
value="{{keywords}}"
left-icon="{{null}}"
placeholder="请输入关键词搜索"
bind:blur="onChangeInput"
bind:change="onChangeInput"
bind:submit="onChangeSearch"
>
<t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
</t-search>
</view>
<view class="home-page-tabs">
<t-tabs
t-class="t-tabs"
t-class-active="tabs-external__active"
t-class-item="tabs-external__item"
defaultValue="{{0}}"
space-evenly="{{false}}"
bind:change="tabChangeHandle"
>
<t-tab-panel wx:for="{{tabList}}" wx:for-index="index" wx:key="index" label="{{item.text}}" value="{{item.key}}" />
</t-tabs>
</view>
</view>
<view class="category-goods-list" wx:if="{{goodsList.length}}">
<goods-list wr-class="wr-goods-list" goodsList="{{goodsList}}" bind:click="gotoGoodsDetail" bind:addcart="gotoGoodsDetail" />
<goods-list wr-class="wr-goods-list" goodsList="{{goodsList}}" bind:click="gotoGoodsDetail" />
</view>
<view class="empty-wrap" wx:if="{{goodsList.length === 0 && hasLoaded}}">
<t-empty t-class="empty-tips" size="240rpx" description="暂无相关产品" />
@@ -18,4 +37,4 @@
<load-more wx:if="{{goodsList.length > 0}}" status="{{loadMoreStatus}}" no-more-text="没有更多了" />
<view class="safe-bottom" />
</view>
<t-toast id="t-toast" />
<t-toast id="t-toast" />
frontend/miniapp/pages/goods/list/index.wxss
+24 -64
View File
@@ -4,9 +4,20 @@ page {
.goods-list-container {
display: block;
min-height: 100vh;
background-color: var(--bg-page);
}
.goods-list-container .t-search {
/* 顶部搜索 + 分类：吸顶固定，滚动时不遮挡内容 */
.goods-list-container .list-header {
position: sticky;
top: 0;
z-index: 20;
background-color: var(--bg-card);
box-shadow: 0 4rpx 16rpx rgba(29, 33, 41, 0.03);
}
.goods-list-container .search {
padding: 16rpx 24rpx 8rpx;
background-color: var(--bg-card);
}
@@ -28,26 +39,26 @@ page {
}
.goods-list-container .home-page-tabs {
padding: 0 8rpx;
background: var(--bg-card);
border-radius: 0;
padding: 0 8rpx;
}
.goods-list-container .tabs-external__active {
color: var(--text-primary) !important;
color: var(--brand) !important;
font-size: 32rpx;
font-weight: 600;
}
.goods-list-container .tabs-external__track {
background-color: var(--brand) !important;
height: 6rpx !important;
border-radius: var(--radius-round) !important;
width: 48rpx !important;
height: 6rpx !important;
background-color: var(--brand) !important;
border-radius: var(--radius-round) !important;
}
.goods-list-container .t-tabs.t-tabs--top .t-tabs__scroll {
border-bottom: 1rpx solid var(--border-level-1);
border-bottom: none;
}
.goods-list-container .t-tabs.t-tabs--top .t-tabs__item {
@@ -55,14 +66,8 @@ page {
}
.goods-list-container .category-goods-list {
padding: 24rpx 24rpx 0;
background-color: var(--bg-page);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 24rpx;
}
.goods-list-container .wr-goods-list {
background: var(--bg-page) !important;
}
.goods-list-container .t-image__mask {
@@ -70,62 +75,17 @@ page {
}
.goods-list-container .empty-wrap {
margin-top: 184rpx;
margin-bottom: 120rpx;
height: 300rpx;
display: flex;
align-items: center;
justify-content: center;
height: 640rpx;
}
.goods-list-container .empty-wrap .empty-tips .empty-content .content-text {
margin-top: 40rpx;
}
.goods-list-container .price-container {
padding: 32rpx;
height: 100vh;
max-width: 632rpx;
background-color: var(--bg-card);
border-radius: 30rpx 0 0 30rpx;
box-sizing: border-box;
}
.goods-list-container .price-between {
font-size: 26rpx;
font-weight: 500;
color: var(--text-primary);
}
.goods-list-container .price-ipts-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 24rpx;
--td-input-bg-color: var(--bg-grey);
--td-input-vertical-padding: 4rpx;
--td-input-border-color: transparent;
}
.goods-list-container .price-ipts-wrap .price-divided {
width: 16rpx;
margin: 0 24rpx;
color: var(--text-primary);
}
.goods-list-container .price-ipts-wrap .t-input__wrap {
margin: 0 !important;
}
.goods-list-container .price-ipts-wrap .t-input__content,
.goods-list-container .price-ipts-wrap .t-input__placeholder {
font-size: 24rpx !important;
}
.goods-list-container .price-ipts-wrap .price-ipt {
border-radius: var(--radius-sm);
}
.safe-bottom {
min-height: 150rpx;
width: 100%;
min-height: 150rpx;
}