資訊專欄INFORMATION COLUMN
摘要：剛進入公司的時候就有遇到過多規格的問題，當時就覺得很麻煩，就只是看了下，沒有嘗試，最近在寫微信小程序的時候，又遇到了多規格問題，就自己嘗試了下，在這里記錄下效果圖文件及部分思路文件規格顏色顏色顏色庫存規格數量確定文件
剛進入公司的時候就有遇到過多規格的問題，當時就覺得很麻煩，就只是看了下，沒有嘗試，最近在寫微信小程序的時候，又遇到了多規格問題，就自己嘗試了下，在這里記錄下1.效果圖 2.文件及部分思路
index.wxml文件
規格: 顏色 顏色 顏色 {{standardObject.price}} 庫存:{{standardObject.store_count}} 規格: {{mergeStandard}} {{item[0].spec_name}} {{item.item}} 數量 確定
index.wxss文件
.multipleStandard{
display: flex;
margin-top: 20rpx;
padding: 15rpx 20rpx;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 10px #ccc;
}
.item{
margin-right: 15rpx;
}
.arrows{
width: 16rpx;
height: 27rpx;
}
/* 規格彈窗 */
.selectStandard {
width: 100%;
height: 1000rpx;
background-color: #fff;
position: fixed;
z-index: 333;
bottom: -600px;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
/* 頭部選中的規格 */
.tophead {
display: flex;
margin: 30rpx 3%;
width: 94%;
align-items: center;
text-align: center;
}
.topimg {
width: 200rpx;
height: 200rpx;
}
.topimg image {
width: 100%;
height: 100%;
border-radius: 20rpx;
background-color: red;
}
.topright {
margin-left: 30rpx;
font-size: 28rpx;
text-align: left;
width: 66%;
}
/* 關閉按鈕 */
.selectClose {
display: flex;
justify-content: space-between;
align-items: center;
}
.selectClose image {
width: 30rpx;
height: 30rpx;
}
.standard {
margin: 0 3%;
width: 94%;
font-size: 28rpx;
}
.standardTitle {
font-size: 30rpx;
margin-top: 20rpx;
}
.standardItem {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.selectItem {
border: solid 1px #666;
margin: 20rpx;
padding: 5rpx 23rpx;
border-radius: 16rpx;
}
/* 規格選中時樣式 */
.standardSelected{
color: #fff;
background: #f26740;
background-color:#fe6732;
border:solid 1px #fe6732;
margin:20rpx;
padding:5rpx 23rpx;
border-radius:16rpx;
}
.standardNormal{
color: #000;
}
.standardDisable{
color: #eee;
}
/* 選擇的數量 */
.selectCount {
margin: 30rpx 3%;
width: 94%;
font-size: 28rpx;
}
.countright {
float: right;
display: flex;
text-align: center;
align-items: center;
}
.countname {
margin-bottom: 20rpx;
font-size: 30rpx;
}
.submitBtn {
position: absolute;
bottom: 0;
width: 70%;
margin: 0 15% 20rpx 15%;
text-align: center;
z-index: 66;
height: 80rpx;
background-color: #fe6732;
border-radius: 40rpx;
color: white;
font-size: 32rpx;
line-height: 80rpx;
}
index.js文件
const {
$Message
} = require("../../component/iview/base/index");
Page({
data: {
animationData: {},
isSelect: ["standardNormal", "standardSelected", "standardDisable"], /* 用于區別當前的規格是否選中 */
goods: {
goods_name: "男鞋",
store_count: 158,
cost_price: "10.00",
original_img: "/images/commodity.jpg",
},
commodityStandard: [
[
{
spec_name: "顏色",
item_id: 535385,
item: "白色",
src: "",
isClick: 0
},
{
spec_name: "顏色",
item_id: 535386,
item: "黑色",
src: "",
isClick: 0
}
],
[
{
spec_name: "尺寸",
item_id: 535692,
item: "170",
src: "",
isClick: 0
},
{
spec_name: "尺寸",
item_id: 535693,
item: "180",
src: "",
isClick: 0
}
],
[
{
spec_name: "重量",
item_id: 552569,
item: "11",
src: "",
isClick: 0
},
{
spec_name: "重量",
item_id: 552570,
item: "15",
src: "",
isClick: 0
}
]
],
standardInfo: [
{
id: 1018269,
key: "535385_535692_552569",
price: "10.00",
productprice: "0.00",
store_count: 20
},
{
id: 1018270,
key: "535385_535692_552570",
price: "20.00",
productprice: "0.00",
store_count: 20
},
{
id: 1018271,
key: "535385_535693_552569",
price: "30.00",
productprice: "0.00",
store_count: 20
},
{
id: 1018272,
key: "535385_535693_552570",
price: "40.00",
productprice: "0.00",
store_count: 20
},
{
id: 1018273,
key: "535386_535692_552569",
price: "50.00",
productprice: "0.00",
store_count: 20
},
{
id: 1018274,
key: "535386_535692_552570",
price: "60.00",
productprice: "0.00",
store_count: 20
},
{
id: 1018275,
key: "535386_535693_552569",
price: "70.00",
productprice: "0.00",
store_count: 20
},
{
id: 1018276,
key: "535386_535693_552570",
price: "80.00",
productprice: "0.00",
store_count: 18
}
],
selectedId: [],
selectedStandard: [],
standardObject: {},
commodityNum: 1,
},
onLoad: function (options) {
let goods = this.data.goods;
let standardObject = this.data.standardObject;
standardObject.price = goods.cost_price;
standardObject.store_count = goods.store_count;
let store_count = goods.store_count;
this.setData({
standardObject,
store_count
})
},
/* 規格選擇 */
standardSelect() {
var that = this
var animal1 = wx.createAnimation({
timingFunction: "ease-in"
}).translate(0, -600).step({
duration: 300
})
that.setData({
animationData: animal1.export(),
})
},
/* 關閉規格選擇 */
handleClose() {
var that = this
var animal1 = wx.createAnimation({
timingFunction: "ease-in"
}).translate(0, 600).step({
duration: 300
})
that.setData({
animationData: animal1.export()
})
},
/* 每個規格的點擊事件 */
handleStandardClick(e) {
let id = e.currentTarget.dataset.id;
// 總規格名稱索引
let standardIndex = e.currentTarget.dataset.standardIndex;
// 單個規格名稱索引
let index = e.currentTarget.dataset.index;
let commodityStandard = this.data.commodityStandard;
let standardLength = commodityStandard[standardIndex].length;
// 用于存儲規格的id
let selectedId = this.data.selectedId;
// 用總規格名稱索引來存儲每個選中的規格id
selectedId[standardIndex] = id;
let selectedStandard = this.data.selectedStandard;
// 在點擊的時候，只需要對點擊的這個規格所在的數組進行循環
for (let i = 0; i < standardLength; i++) {
// 找到對應的單個規格索引，并設置isClick及單個規格名稱
if (index == i) {
commodityStandard[standardIndex][index].isClick = 1;
selectedStandard[standardIndex] = commodityStandard[standardIndex][index].item;
} else {
commodityStandard[standardIndex][i].isClick = 0;
}
}
// 將id用_連接起來
let mergeId = selectedId.join("_");
console.log(mergeId);
let mergeStandard = selectedStandard.join(" ");
console.log(mergeStandard);
let standardInfo = this.data.standardInfo;
let standardInfoLength = standardInfo.length;
// 用于存儲選中的規格
let standardObject = {};
for (let i = 0; i < standardInfoLength; i++) {
if (standardInfo[i].key == mergeId) {
standardObject = standardInfo[i];
break;
} else {
standardObject = this.data.standardObject;
}
}
this.setData({
currentId: id,
commodityStandard,
selectedId,
standardObject,
mergeStandard,
selectedStandard,
})
},
/* 選擇數量 */
handleCommodityNumber(e) {
let commodityNum = e.detail.value;
if (commodityNum >= this.data.store_count) {
commodityNum = this.data.store_count;
}
this.setData({
commodityNum
})
},
/* 保存選擇的規格 */
submitSelected() {
let selectedStandard = this.data.selectedStandard;
let length = selectedStandard.length;
console.log(length)
if (length == 0) {
$Message({
content: "請選擇規格",
type: "error"
});
return false;
}
for (let i = 0; i < length; i++) {
if (length < this.data.commodityStandard.length) {
$Message({
content: "請選擇規格",
type: "error"
});
break;
}
if (selectedStandard[i] == undefined) {
$Message({
content: "請選擇規格",
type: "error"
});
break;
}
}
$Message({
content: "選擇成功",
type: "success"
});
},
})
我這里提示信息使用了插件iview，可以在官網直接下載后使用
iview weapp3.部分思路及改進方法
開始想到的是將需合并的id的位置寫死，比如，第一個位置就傳第一個規格里選中的規格id，第二個位置就傳第二個規格里選中的規格id,不過此時有問題，就是后臺的id拼接是根據當前規格長度來拼接的，從最短的開始往長的拼接，然后，長度相等的時候，我這邊的話，后臺是從第一個開始拼接的，而且你選規格時，也可能是隨機點的，此時若是采用第一種位置寫死的方法就會有問題，因為會找不到對應的合并后的規格id
因為我這里一開始用的數據就剛好滿足我的設想，但是后面換了個數據后就出現問題了
index.wxml文件也做部分修改,可以直接查找下，類名為standardItem
{{item.item}}
*增加另一種模擬數據
goods: {
goods_name: "男鞋",
store_count: 95,
market_price: "10.00",
shop_price: "101.00",
cost_price: "10.00",
original_img: "/images/commodity.jpg",
store_id: 170,
},
commodityStandard: [
[
{
spec_name: "顏色",
item_id: 532825,
item: "白色",
src: "",
isClick: 0
},
{
spec_name: "顏色",
item_id: 532826,
item: "黑色",
src: "",
isClick: 0
},
{
spec_name: "顏色",
item_id: 532827,
item: "紅色",
src: "",
isClick: 0
}
],
[
{
spec_name: "大小",
item_id: 532828,
item: "160",
src: "",
isClick: 0
},
{
spec_name: "大小",
item_id: 532829,
item: "150",
src: "",
isClick: 0
}
],
[
{
spec_name: "重量",
item_id: 552581,
item: "10",
src: "",
isClick: 0
}
]
],
/* 這里合并規格的信息 */
spec_goods_price: [
{
id: 1018286,
key: "552581_532828_532825",
price: "10.00",
productprice: "0.00",
store_count: 9
},
{
id: 1018287,
key: "552581_532828_532826",
price: "20.00",
productprice: "0.00",
store_count: 10
},
{
id: 1018288,
key: "552581_532828_532827",
price: "30.00",
productprice: "0.00",
store_count: 10
},
{
id: 1018289,
key: "552581_532829_532825",
price: "40.00",
productprice: "0.00",
store_count: 10
},
{
id: 1018290,
key: "552581_532829_532826",
price: "50.00",
productprice: "0.00",
store_count: 7
},
{
id: 1018291,
key: "552581_532829_532827",
price: "60.00",
productprice: "0.00",
store_count: 10
}
],
index.js文件
onLoad: function (options) {
let goods = this.data.goods;
/* 用于存儲對應的價格及庫存 */
let standardObject = this.data.standardObject;
standardObject.price = goods.cost_price;
standardObject.store_count = goods.store_count;
let spec_goods_price =this.data.spec_goods_price;
if (spec_goods_price) {
this.checkPrice(spec_goods_price);
}
this.setData({
standardObject,
})
},
handleStandardClick: function (e) {
// 總規格名稱索引
let standardIndex = e.currentTarget.dataset.standardIndex;
let id = e.currentTarget.dataset.id;
/* 存儲選中的規格名稱 */
let name = e.currentTarget.dataset.name;
let selectedStandard = this.data.selectedStandard;
selectedStandard[standardIndex] = name;
let mergeStandard = selectedStandard.join(" ");
let Specifications = this.data.Specifications;
Specifications[standardIndex] = id;
console.log(mergeStandard)
this.setData({
Specifications,
mergeStandard,
selectedStandard,
})
this.checkPrice(this.data.spec_goods_price);
},
/*在還未選擇完規格時，暫時選用第一個合并后的規格價格及庫存*/
checkPrice: function (spec_goods_price) {
let standardObject = this.data.standardObject;
if (!this.checkSpecifications(spec_goods_price)) {
standardObject.price = spec_goods_price[0].price;
standardObject.store_count = spec_goods_price[0].store_count;
this.setData({
standardObject,
})
}
},
/* 保存及校驗是否選好了規格 */
submitSelected: function (e) {
let spec_goods_price = this.data.spec_goods_price;
let i = 0;
let optionid = "";
if (spec_goods_price) {
optionid = this.checkSpecifications();
if (optionid) {
$Message({
content: "選擇成功",
type: "success"
});
} else {
$Message({
content: "請選擇規格",
type: "error"
});
}
}
},
checkSpecifications(spec_goods) {
let spec_goods_price = spec_goods || this.data.spec_goods_price;
let Specifications = this.data.Specifications;
let SpecificationsLength = spec_goods_price[0].key.split("_").length;
let standardObject = this.data.standardObject;
if (Specifications.length != SpecificationsLength) {
return false;
} else {
for (let i = 0; i < spec_goods_price.length; i++) {
/* 若selectSpecifications全為true，則選中了對應的合并后的規格 */
let selectSpecifications = true;
for (let j = 0; j < Specifications.length; j++) {
if (spec_goods_price[i].key.indexOf(Specifications[j]) == -1) {
selectSpecifications = false;
break;
}
}
if (selectSpecifications) {
standardObject.price = spec_goods_price[i].price;
standardObject.store_count = spec_goods_price[i].store_count;
this.setData({
standardObject,
})
return spec_goods_price[i].id;
}
}
}
return false;
},
利用indexOf來判斷合并后的key值，就不用通過寫死位置存儲規格，然后這里用了動畫，可以自己查看官方完檔微信創建動畫
這里的規格啥的，格式可能會是多樣的，我這里的話，就是返回這樣的格式，其實我還想實現就是根據庫存來判斷是否可以點擊，比如選尺碼28，然后可能顏色為黑色的就庫存不足，此時，是不能讓他點擊的，日后會在做下這個功能，歡迎大家在評論區指正，共同進步^_^
正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）
往期好文推薦：
判斷ios和Android及PC端
純css實現瀑布流（multi-column多列及flex布局）
實現文字的省略號
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98988.html
摘要：在做微信小程序時，覺得小組里對購物車的實現不是很完美，就自己嘗試的寫了下，然后用到了父子組件傳值，父子組件傳值的話，和框架上是非常相似的，以及這個函數，有個注意點，自己不怎么用，一時間有差點忘了，這里記錄下效果圖子組件實現要實現圖中刪除的效 在做微信小程序時，覺得小組里對購物車的實現不是很完美，就自己嘗試的寫了下，然后用到了父子組件傳值，父子組件傳值的話，和vue框架上是非常相似的，以...
摘要：微信小程序運維中心提供了錯誤日志記錄，但功能還是比較有限。有時候一個微信小程序可能會用到多個第三方服務，從多個域名獲取數據。要使用監控，你需要去網站注冊賬號并創建一個微信小程序監控項目，然后按照提示接入插件。 在微信小程序里，與后臺服務器交互的主要接口函數是wx.request()，用于發起 HTTPS 網絡請求。其重要性不言而喻。然而，卻經常遇到請求失敗的問題，筆者特意谷歌wx.re...
摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。 為什么 學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點； 也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。 但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。 項目展示 本...
摘要：很想一窺源碼，查看究竟，看看大廠的前端大神們是如何規避了小程序的各種奇葩的坑。頭發減減可是問題是吶好看的小程序，又獲得不到源代碼。所以啊，才能容易的反編譯出來，如果是那就很難了一鍵獲取微信小程序源代碼 ? 1 Tips： 2 一鍵獲取微信小程序源碼, 使用了C#加nodejs制作 直接解壓在D盤根目錄下后就可以使用 將小程序文件放到 wxapkg目錄下3 這個目錄下有一些demo...
摘要：最佳實踐良好的編碼規范單元測試持續集成文檔，從一開始就形成良好的編碼習慣。真實的電商業務所有的業務需求來自真實的客戶，并且線上良好運營中。 重要通知： Laravel + 小程序的開源電商版本源碼已經在 github 上拉，歡迎提交 issue 和 star :) 開源電商 Server 端: Laravel API源碼 開源電商 client 端：小程序源碼 iBrand 簡介...
閱讀 2028·2023-04-26 01:33
閱讀 1660·2023-04-26 00:52
閱讀 1035·2021-11-18 13:14
閱讀 5394·2021-09-26 10:18
閱讀 2901·2021-09-22 15:52
閱讀 1488·2019-08-29 17:15
閱讀 3017·2019-08-29 16:11
閱讀 1039·2019-08-29 16:11
