Skip to content

7
7-Eleven
Commit 8845b23f by 赵雅纹
Options

商品详情页

parent c35e2b5b
Showing with 1152 additions and 3 deletions
src/app.json
......@@ -22,7 +22,8 @@
"pages/wantToBuyDetail/wantToBuyDetail",
"component/buyImageSwiper/buyImageSwiper",
"pages/myShare/myShare",
"pages/user-center/user-center"
"pages/user-center/user-center",
"pages/productDetail/productDetail"
],
"subPackages": [
{
......@@ -37,7 +38,7 @@
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
"navigationBarTextStyle": "black"
},
"tabBar": {
"custom": true,
......
src/component/skuPopup/skuPopup.js 0 → 100644
// component/skuPopup/skuPopup.js
// import { ReportModel } from '../../utils/reportModel'
const wxService = require('../../utils/wxService')
Component({
/**
* 组件的属性列表
*/
properties: {
disableNum: { // 不能改变的数量
type: Number,
observer: '_disableNumChange',
value: 0
},
productName: {
type: String,
value: ''
},
exchangePrice: {
type: Number,
value: 0
},
isAllowArrive: {
type: Number,
value: 0
},
isNoticeStatus: {
type: Boolean
// value: false
},
integralRole: {
type: Number,
value: 0
},
priceNoChange: {
type: Boolean,
value: false
},
showPrice: { // 指定显示的价格
type: Number,
observer: '_showPriceChange',
value: 0
},
quantityAverage: {
type: String,
value: '0'
},
btnText: {
type: String,
value: '确定'
},
imageDomain: {
type: String,
value: ''
},
specNames: { // 所有规格名
type: Object,
value: []
},
specValues: { // 所有规格值
type: Object,
value: []
},
proNum: { // 初始化的数量
type: Number,
value: 1
},
goodType: { // 虚拟
type: Number,
value: 1
},
initSku: { // 初始化的sku
type: Object,
value: null
},
skuInfos: { // 所有sku信息
type: Object,
value: [],
observer: '_skuInfosChange'
},
indexImg: { // 商品主图
type: String,
value: ''
},
show: { // 显示标识
type: Boolean,
value: false
}
},
attached () {
let price = this.data.showPrice
if (!price) {
if (this.data.curSku.promotion_price) {
price = this._setExchangePrice(this.data.curSku.promotion_price)
}
}
console.log(this.data)
this.setData({
price
})
},
/**
* 组件的初始数据
*/
data: {
skuInfoDatas: [], // 重新组装的规格json数据
curSpec: [], // 当前选中的规格值
curSku: {}, // 当前选中的sku信息
price: 0, // 页面上展示的价格
skuText: '',
skuStock: 0,
btnText: '确定', // 确定 缺货 缺货订阅
isOutStock: false, // 背景色
clickDataStock: 0
},
detached: function () {
this._disableNumChange = null
this._showPriceChange = null
this._skuInfosChange = null
},
/**
* 组件的方法列表
*/
methods: {
_skuInfosChange () {
var curSpec = []
if (this.data.initSku) {
console.log(this.data.initSku)
curSpec = this.data.initSku.spec.split('###')
}
this.setData({
skuInfoDatas: [], // 重新组装的规格json数据
curSpec: curSpec, // 当前选中的规格值
curSku: {}, // 当前选中的sku信息
skuText: '',
skuStock: 0
})
this._setCurSku()
},
_showPriceChange (newV, oldV) {
if (newV !== oldV) {
this.setData({
showPrice: newV,
price: newV
})
}
},
confirm: function () {
for (var i = 0; i < this.data.curSpec.length; i++) {
if (!this.data.curSpec[i]) {
wx.showToast({
title: '请选择规格',
icon: 'none'
})
return false
}
}
this.triggerEvent('skuselect', {
selectSku: this.data.curSku,
counts: this.data.proNum,
isAllowArrive: this.data.isAllowArrive,
clickDataStock: this.data.clickDataStock
})
},
inputNum: function (e) { // 输入数量
var newNum = e.detail.value
if (newNum === '' || newNum === '0') {
newNum = 1
} else {
newNum = parseInt(newNum)
if (this.data.quantityAverage == '0') {
if (newNum > this.data.curSku.inventory_num) {
newNum = this.data.curSku.inventory_num
wx.showToast({
title: '不能超过库存',
icon: 'none'
})
}
} else {
if (newNum > this.data.quantityAverage) {
newNum = this.data.quantityAverage
wx.showToast({
title: '每人限购' + this.data.quantityAverage + '件',
icon: 'none'
})
}
}
}
this.setData({
proNum: newNum
})
},
minusNum: function () { // 减少数量
var proNum = this.data.proNum
if (proNum > 1) {
proNum--
} else {
wx.showToast({
title: '数量不能为0',
icon: 'none'
})
}
this.setData({
proNum: proNum
})
},
addNum: function () { // 增加数量
let proNum = this.data.proNum
const curSku = this.data.curSku
if (this.data.quantityAverage == '0') {
if (proNum < this.data.curSku.inventory_num) {
proNum++
} else {
wx.showToast({
title: '不能超过库存',
icon: 'none'
})
}
} else {
if (proNum < this.data.quantityAverage) {
proNum++
} else {
wx.showToast({
title: '每人限购' + this.data.quantityAverage + '件',
icon: 'none'
})
}
}
console.log(this.data)
let reportModel = new ReportModel('add_to_cart')
reportModel.setProps({
sku: {
sku_id: curSku.sku_code,
sku_name: this.data.productName,
original_price: parseFloat(curSku.price / 100).toFixed(2)
},
sku_price: parseFloat(curSku.price / 100).toFixed(2),
action_type: proNum ? 'append_to_cart' : 'first_add_to_cart'
})
wxService.report(reportModel)
this.setData({
proNum: proNum
})
},
hidePopup: function () { // 隐藏弹出框
this.setData({
show: false
})
},
selectSku: function (event) { // 点击规格值，设置选中状态
var clickData = event.target.dataset
var curSpec = this.data.curSpec
if (!clickData.disable) {
curSpec[clickData.index] = clickData.name
this.setData({
curSpec: curSpec
}, this._setCurSku())
} else {
return false
}
// 有库存
let btnText = '确定'
let isOutStock = false
// 没库存
if (!clickData.stock) {
isOutStock = true
btnText = this.data.isNoticeStatus ? '您已订阅成功' : '商品暂时缺货,订阅到货通知'
}
this.setData({
btnText, isOutStock, clickDataStock: clickData.stock
})
},
_disableNumChange (newV, oldV) {
if (newV !== oldV) {
this.setData({
disableNum: newV
})
}
},
_setExchangePrice (price) {
let exprice = price
if (this.data.exchangePrice > 0) {
let exchangePrice = this.data.exchangePrice// 积分数
let bwtPrice = ((exchangePrice * this.data.integralRole - price) / 100)// 差额
exprice = bwtPrice < 0 ? ((exchangePrice) + '积分+￥' + Math.abs(bwtPrice)) : (exchangePrice + '积分')
}
return exprice
},
_setCurSku: function () { // 显示选中的sku信息
if (!this.data.skuInfos) {
return false
}
var proNum = this.data.proNum
var curSpec = this.data.curSpec
var skuInfoDatas = []
if (curSpec.length === 0) {
curSpec.length = this.data.specNames.length
}
// 根据当前选中的规格，设置其他每一个规格项的库存数
for (var i = 0; i < this.properties.specNames.length; i++) {
var specJson = {
specName: this.properties.specNames[i],
specValue: []
}
for (var j = 0; j < this.properties.specValues[i].length; j++) {
var tempStock = 0
for (var k = 0; k < this.properties.skuInfos.length; k++) {
var skuNameArray = this.properties.skuInfos[k].spec.split('###')
if (skuNameArray[i] === this.properties.specValues[i][j]) {
var flag = true
for (var z = 0; z < skuNameArray.length; z++) {
if (curSpec[z] && i !== z && curSpec[z] !== skuNameArray[z]) {
flag = false
}
}
if (flag) {
tempStock += this.properties.skuInfos[k].inventory_num
}
}
}
specJson.specValue.push({
skuName: this.properties.specValues[i][j],
skuStock: tempStock
})
}
skuInfoDatas.push(specJson)
}
// 根据当前选中的规格，设置头部的规格信息
var skuText = []
if (curSpec.join('') === '') {
skuText = ['请选择规格']
} else {
for (let i = 0; i < curSpec.length; i++) {
if (!curSpec[i]) {
skuText.push('请选择' + this.data.specNames[i])
} else {
skuText.push(curSpec[i])
}
}
}
var skuStock = 0
var curSkus = this.data.skuInfos.filter(function (item) {
var flag = true
for (let i = 0; i < curSpec.length; i++) {
if (curSpec[i] && curSpec[i] !== item.spec.split('###')[i]) {
flag = false
}
}
if (flag) {
skuStock += item.inventory_num
}
return flag
})
var curSku = curSkus[0]
if (proNum > curSku.inventory_num) { // 选择数量超过库存时将数量修改为库存数
proNum = curSku.inventory_num
}
if (proNum == 0) {
proNum = 1
}
let price = curSku.promotion_price
price = this._setExchangePrice(price)
let updateData = {
curSpec: curSpec,
curSku: curSku,
skuStock: skuStock,
skuText: skuText,
skuInfoDatas: skuInfoDatas,
proNum: proNum
}
if (!this.data.priceNoChange) {
updateData.price = price// 拼团规格没有价格信息
}
this.setData(updateData)
}
}
})
src/component/skuPopup/skuPopup.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
src/component/skuPopup/skuPopup.wxml 0 → 100644
<!--component/skuPopup/skuPopup.wxml-->
<view class="popup-container{{show ? ' active' : ''}}" bindtap="hidePopup"></view>
<view class="popup-content{{show ? ' active' : ''}}">
<image class="popup-close" mode="widthFix" src="/images/close.png" bindtap="hidePopup"></image>
<view class="top-info clearfix">
<image mode="widthFix" src="{{curSku.sku_pic_url && curSku.sku_pic_url != 'undefined' ? (imageDomain + curSku.sku_pic_url) : indexImg}}"></image>
<view class="top-text">
<view class="price-text" wx:if="{{exchangePrice <= 0}}">￥{{price / 100}}</view>
<view class="price-text" wx:else>{{price}}</view>
<view class="stock-text">库存：{{skuStock}}</view>
<view class="sku-text">规格：<block wx:for="{{skuText}}" wx:key="{{index}}">{{item}} </block></view>
</view>
</view>
<!-- isAllowArrive 0 开启/放开 1 关闭/禁用 -->
<scroll-view class="mid-info" scroll-y="true">
<view class="sku-info" >
<view class="spec-name">默认</view>
<view class="spec-values">
<view class="spec-value active">默认选项</view>
<view class="spec-value">默认选项</view>
<view class="spec-value">默认选项</view>
<!-- <view wx:if="{{isAllowArrive}}" class="spec-value{{specValue.skuStock == 0 ? ' disabled' : ''}}{{curSpec[i] == specValue.skuName ? ' active' : ''}}" wx:for="{{specInfo.specValue}}" wx:for-index="j" wx:key="{{j}}" wx:for-item="specValue" data-stock="{{specValue.skuStock}}" data-name="{{specValue.skuName}}" data-index="{{i}}" data-type="{{goodType}}" data-disable="{{specValue.skuStock == 0 ? true : false}}" bindtap="selectSku">{{specValue.skuName}}</view> -->
<!-- <view wx:if="{{!isAllowArrive}}" class="spec-value{{specValue.skuStock == 0 ? ' disabled' : ''}}{{curSpec[i] == specValue.skuName ? ' active' : ''}}" wx:for="{{specInfo.specValue}}" wx:for-index="j" wx:key="{{j}}" wx:for-item="specValue" data-stock="{{specValue.skuStock}}" data-name="{{specValue.skuName}}" data-index="{{i}}" data-type="{{goodType}}" data-disable="{{specValue.skuStock == 0 && goodType == 2 ? true : false}}" bindtap="selectSku">{{specValue.skuName}}</view> -->
</view>
</view>
<!-- <view class="sku-number">
<view class="spec-name">数量</view>
<view class="num-panel clearfix">
<button bindtap="minusNum">-</button>
<input value="{{proNum}}" type="number" bindblur="inputNum"></input>
<button bindtap="addNum">+</button>
</view>
</view> -->
<view class="sku-number">
<view class="spec-name">数量</view>
<view class="num-panel">
<button bindtap="minusNum">-</button>
<input value="{{proNum}}" type="number" bindblur="inputNum"></input>
<button bindtap="addNum">+</button>
</view>
</view>
</scroll-view>
<!-- 按钮状态 -->
<button class="confirm-button {{isOutStock? 'out-stock': ''}}" bindtap="confirm">{{btnText}}</button>
</view>
src/component/skuPopup/skuPopup.wxss 0 → 100644
.popup-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%);
opacity: 0;
transition: opacity 200ms;
z-index: 98;
}
.popup-container.active {
opacity: 1;
transform: translateY(0); }
.popup-content.active {
transform: translateY(0); }
.out-stock {
background: #FFB400!important;
}
.popup-content {
position: fixed;
z-index: 99;
width: 100%;
bottom: 0;
left: 0;
background: #ffffff;
transition: transform 300ms;
transform: translateY(100%); }
.popup-content .popup-close {
position: absolute;
right: 20rpx;
top: 30rpx;
width: 60rpx;
height: 60rpx; }
.top-info {
background: #ffffff;
border-bottom: 1px solid rgba(151,151,151,0.2);
overflow: hidden; }
.top-info image {
width: 210rpx;
height: 210rpx;
float: left;
margin: 36rpx 0 30rpx 30rpx;
}
.top-info .top-text {
overflow: hidden;
display: inline-block;
margin-top: 68rpx;
margin-left: 35rpx; }
.price-text {
color: #a60002;
font-size: 36rpx;
margin-bottom: 6rpx;
}
.stock-text {
line-height: 40rpx;
font-size: 30rpx;
color: #333333;
margin-top: 17rpx;
}
.sku-text{
font-size: 26rpx;
color: #808080;
margin-top: 6rpx;
}
.mid-info {
max-height: 600rpx;
padding: 20rpx 0; }
.mid-info .sku-info {
padding: 0 30rpx 20rpx;
background: #ffffff;
border-bottom: 1px solid rgba(151,151,151,0.2);
}
.mid-info .sku-number{
width: 690rpx;
padding: 30rpx 30rpx 20rpx;
border-bottom: none;
display: inline-block;
}
.mid-info .sku-info .spec-name {
padding: 10rpx 0 20rpx 0;
margin-bottom: 8rpx;
}
.sku-number .spec-name{
display: inline-block;
vertical-align: middle;
}
.mid-info .sku-info .spec-value {
color: #808080;
font-size: 26rpx;
line-height: 66rpx;
padding: 0 39rpx;
display: inline-block;
border-radius: 10rpx;
background-color: rgba(238, 238, 238, 1);
margin: 25rpx 23rpx 25rpx 0;
}
.mid-info .sku-info .spec-value.disabled {
color: #999999;
background: #eaeaea;
border-color: #eaeaea; }
.mid-info .sku-info .spec-value.active {
border: 1px solid rgba(203, 60, 60, 1);
background: #ffffff;
color: rgba(203, 60, 60, 1);
}
.confirm-button {
font-size: 30rpx;
background: #CB3C3C;
border-radius: 0;
color: #ffffff;
line-height: 96rpx; }
.button-hover {
opacity: 0.5; }
.confirm-button::after {
border-radius: 0; }
.num-panel {
float: right;
vertical-align: top;
}
.num-panel button {
padding: 0;
line-height: 44rpx;
width: 44rpx;
font-size: 32rpx;
border-radius: 50%;
color: #808080;
display: inline-block;
}
.num-panel button::after{
border:none;
}
.num-panel input {
line-height: 44rpx;
text-align: center;
font-size: 32rpx;
width: 60rpx;
color: #a60002;
margin: 0 10rpx;
height: 44rpx;
box-sizing: border-box;
display: inline-block;
}
.clearfix::after {
content: '';
display: block;
clear: both; }
src/pages/productDetail/productDetail.js 0 → 100644
// pages/productDetail/productDetail.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
showHtml: false,
reachBottom: false, // 标识是否触底
showSkuPopup: false,
btnText: '立即购买',
imageData: [{
desc: "string",
imageUrl: "/group3/M00/00/0B/Cv6CBF0RvcuAXoDUAA5M5vbNswU382.png",
link: { linkId: "10", brandId: "2711", name: "会员服务", url: "5", type: 2, status: 0 },
number: 1,
redirectId: "10",
type: 0
}, {
desc: "string",
imageUrl: "/group3/M00/00/0B/Cv6CBF0RvcuAXoDUAA5M5vbNswU382.png",
link: { linkId: "10", brandId: "2711", name: "会员服务", url: "5", type: 2, status: 0 },
number: 1,
redirectId: "10",
type: 0
},
{
desc: "string",
imageUrl: "/group3/M00/00/0B/Cv6CBF0RvcuAXoDUAA5M5vbNswU382.png",
link: { linkId: "10", brandId: "2711", name: "会员服务", url: "5", type: 2, status: 0 },
number: 1,
redirectId: "10",
type: 0
},
{
desc: "string",
imageUrl: "/group3/M00/00/0B/Cv6CBF0RvcuAXoDUAA5M5vbNswU382.png",
link: { linkId: "10", brandId: "2711", name: "会员服务", url: "5", type: 2, status: 0 },
number: 1,
redirectId: "10",
type: 0
}],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
addCart: function (event) {
this.setData({
showSkuPopup: true,
showSkuPopupType: 'cart'
})
// 商品加入购物车
// xm_bi.Event.stat("skuAddToCart", { "amount":"666","skuId":'abcd1234'});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 页面touchstart事件
pageTouchStart: function (e) {
if (this.data.showHtml) {
return
}
this.setData({
reachBottom: false,
startTouchY: null
})
},
// 页面touchend事件
pageMoveEnd: function (e) {
if (this.data.showHtml) {
return
}
if (this.data.startTouchY - e.changedTouches[0].pageY >= 50) {
this.setData({
showHtml: true,
scrollTips: ''
})
}
},
// 页面touchmove事件
pageMove: function (e) {
if (this.data.showHtml) {
return
}
wx.createSelectorQuery().selectViewport().scrollOffset((pageRes) => {
wx.createSelectorQuery().select('.product-container').fields({
size: true
}, (res) => {
if (res.height >= app.globalData.systemInfo.windowHeight + pageRes.scrollTop) {
this.setData({
reachBottom: true
})
} else {
if (this.data.reachBottom) {
this.setData({
reachBottom: false
})
}
}
if (this.data.startTouchY == null) {
this.setData({
startTouchY: e.changedTouches[0].pageY
})
}
}).exec()
}).exec()
},
})
\ No newline at end of file
src/pages/productDetail/productDetail.json 0 → 100644
{
"navigationBarTitleText": "商品详情页",
"usingComponents": {
"buy-image-swiper": "/component/buyImageSwiper/buyImageSwiper",
"sku-popup": "/component/skuPopup/skuPopup"
}
}
\ No newline at end of file
src/pages/productDetail/productDetail.wxml 0 → 100644
<!--pages/productDetail/productDetail.wxml-->
<view class="page-product-detail product-container"
bindtouchstart="pageTouchStart"
bindtouchmove="pageMove"
bindtouchend="pageMoveEnd"
bindtap="handleCloseSharePopup">
<view>
<buy-image-swiper image-data="{{imageData}}"/>
</view>
<view class="product-detail-wrap">
<view class="product-price">
<view class="price-wrap">
<view class="price-icon">会员专享价</view>
<text class="price">￥618</text>
<text class="cost-price">￥888</text>
</view>
<view class="share-wrap">
<image class="share-img" src="/assets/imgs/share.png"></image>
<text class="share-text">分享</text>
</view>
</view>
<view class="product-name">
名称
</view>
<view class="product-desc">
描述
</view>
<view class="member-price">
<view class="member-price-info">
<image class="member-price-icon"></image>
<text class="before-reduce-price">￥558,</text>
<text class="reduce-price">本次立减￥60</text>
</view>
<view class="open">
<text class="open-text">立即开通</text>
<image class="big-arrow" src="/assets/imgs/big-arrow-right.png"></image>
</view>
</view>
<view class="choose-wrap">
请选择规格
<!-- <image class="arrow-right"></image> -->
</view>
<view class="choose-wrap">
支持快递配送</view>
<view class="surplus">
剩余：
<text class="surplus-number">300</text>
件
</view>
</view>
<view class="gray-line"></view>
<view class="scroll-tips">
继续拖动，查看图文详情
</view>
<view class="product-footer">
<view class="footer-icons clearfix">
<form
class='get-formId'
bindsubmit="nav"
report-submit
name='home'
>
<navigator
class='get-formId--btn footer-icon'
data-url="/pages/page/page"
formType="submit"
open-type="switchTab"
>
<image src="https://hwimagecdn.ihotwind.cn/hotwind-mini/images/hotnewicon/bottom-index.png" mode="widthFix" />
<view>首页</view>
</navigator>
</form>
<form
class='get-formId'
bindsubmit="nav"
report-submit
name='home'
>
<navigator class="get-formId--btn footer-icon" >
<image src="https://hwimagecdn.ihotwind.cn/hotwind-mini/images/hotnewicon/bottom-kefu.png" mode="widthFix"></image>
<view class="tab-text">客服</view>
</navigator>
</form>
<form
class='get-formId'
bindsubmit="nav"
report-submit
name='nav'
>
<navigator class='get-formId--btn footer-icon' open-type="switchTab" url="/pages/cart/cart">
<image class="contact-share-img" src="https://hwimagecdn.ihotwind.cn/hotwind-mini/images/hotnewicon/bottom-shop-cart.png" />
<view class="add-car-text">购物车</view>
</navigator>
</form>
</view>
<block >
<view class="footer-buttons clearfix" >
<block >
<form
class='get-formId get-formId--form'
bindsubmit="addCart"
report-submit
name='nav'
>
<button class="cart-button get-formId--btn" formType="submit">加入购物车</button>
</form>
<form
class='get-formId get-formId--form'
bindsubmit="goBuy"
report-submit
name='nav'
>
<button class="buy-button get-formId--btn" formType="submit">立即购买</button>
</form>
</block>
</view>
</block>
</view>
</view>
<sku-popup
product-name="{{product.name}}"
spec-names="{{product.sku_names}}"
spec-values="{{product.skus}}"
good-type="{{product.goodType}}"
is-allow-arrive="{{product.isAllowArrive}}"
is-notice-status="{{isNoticeStatus}}"
index-img="{{product.index_url[0]}}"
image-domain="{{product.image_domain}}"
sku-infos="{{product.skuStocks}}"
quantity-average="{{product.quantity_average}}"
show="{{showSkuPopup}}"
exchange-price="{{product.exchange_credits}}"
integral-role="{{product.integral_role}}"
bind:skuselect="confirmClick"
btn-text="{{btnText}}"
/>
\ No newline at end of file
src/pages/productDetail/productDetail.wxss 0 → 100644
/* pages/productDetail/productDetail.wxss */
.product-detail-wrap{
padding: 0 16rpx 0 24rpx;
}
.price-icon{
display: inline-block;
width: 88rpx;
height: 30rpx;
border-radius: 3rpx;
background-color: rgba(203, 60, 60, 0.08);
font-size: 13rpx;
color: #cb3c3c;
line-height: 30rpx;
text-align: center;
vertical-align: middle;
}
.price{
font-size: 36rpx;
color: #333333;
vertical-align: middle;
}
.cost-price{
text-decoration:line-through;
font-size: 24rpx;
color: #aaaaaa;
margin-left: 10rpx;
vertical-align: middle;
}
.share-wrap{
float: right;
}
.share-img{
width: 30rpx;
height: 30rpx;
vertical-align: middle;
}
.share-text{
font-size: 26rpx;
color: #999999;
vertical-align: middle;
margin-left: 8rpx;
}
.price-wrap{
display: inline-block;
}
.product-name{
color: #333333;
font-size: 40rpx;
margin-top: 16rpx;
}
.product-desc{
color: #808080;
font-size: 28rpx;
margin-top: 11rpx;
}
.member-price{
background-color: rgba(192, 154, 116, 0.07);
padding:24rpx 24rpx;
height: 55rpx;
margin-top: 24rpx;
}
.open{
width: 184rpx;
height: 55rpx;
line-height: 55rpx;
text-align: center;
border-radius: 34rpx;
border: 1px solid rgba(192, 154, 116, 1);
display: inline-block;
position: absolute;
right: 24rpx;
}
.open-text{
font-size: 24rpx;
color: rgba(192, 154, 116, 1);
}
.big-arrow{
width: 23rpx;
height: 16rpx;
margin-left: 10rpx;
}
.member-price{
position: relative;
}
.member-price-info{
display: inline-block;
}
.member-price-icon{
width: 88rpx;
height: 30rpx;
}
.before-reduce-price{
font-size: 40rpx;
color: #cb3c3c;
font-weight: bold;
}
.reduce-price{
font-size: 24rpx;
color: #cb3c3c;
}
.choose-wrap{
height: 80rpx;
line-height: 80rpx;
color: #808080;
font-size: 28rpx;
border: 1px solid rgba(128, 128, 128, 0.3);
padding: 0 24rpx;
margin-top: 20rpx;
}
.surplus{
font-size: 24rpx;
color: #808080;
float: right;
margin: 20rpx 0 16rpx;
}
.surplus-number{
font-weight: bold;
color: #cb3c3c;
}
.gray-line{
background-color: #f9f9f9;
height: 22rpx;
clear: both;
}
.scroll-tips{
width: 750rpx;
text-align: center;
padding: 15rpx 0 30rpx;
margin-bottom: 100rpx;
color: #666666;
font-size: 24rpx;
}
.product-footer {
position: fixed;
height: 100rpx;
left: 0;
bottom: 0;
width: 750rpx;
z-index: 2;
display: flex;
flex-direction: row; }
.product-footer .footer-icons {
width: 300rpx;
flex-grow: 0;
}
.product-footer .footer-icons .footer-icon {
width: 33.333%;
box-sizing: border-box;
float: left;
height: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
.product-footer .footer-icons .footer-icon image {
width: 39rpx;
height: 39rpx;
flex-shrink: 0; }
.product-footer .footer-icons .footer-icon view {
font-size: 20rpx;
line-height: 22rpx;
color: #333333;
margin-top: 8rpx; }
.product-footer .footer-buttons {
flex: 1;
display: flex;
height: 100rpx; }
.product-footer .footer-buttons button {
flex: 1;
font-size: 25rpx;
line-height: 100rpx;
border-radius: 0;
color: #ffffff; }
.product-footer .footer-buttons button[disabled] {
background: #cccccc; }
.product-footer .footer-buttons button.cart-button {
background: rgba(203,60,60,0.71);
width: 240rpx;
}
.product-footer .footer-buttons button.buy-button {
background: #cb3c3c;
width: 214rpx;
}
.product-footer .footer-buttons button::after {
border: 0; }
.product-footer .footer-buttons button.button-hover {
opacity: 0.5; }
.get-formId--btn{
background-color: #ffffff;
border: none;
border-radius: 0;
}
src/project.config.json
......@@ -39,7 +39,7 @@
"list": []
},
"miniprogram": {
"current": 16,
"current": 17,
"list": [
{
"id": -1,
......@@ -143,6 +143,13 @@
"id": -1,
"name": "我的",
"pathName": "pages/user-center/user-center",
"query": "",
"scene": null
},
{
"id": -1,
"name": "商品详情页",
"pathName": "pages/productDetail/productDetail",
"scene": null
}
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment