闲鱼有微信小程序吗_微信小程序商品展示页面(仿咸鱼)
項目中做了一個商品發布展示的頁面，記錄下來
解決問題：
想在setData中更改數組具體下標中的某個值
let one = "lowMoney[" + 0 + "].money";
this.setData({
[one]: (product.currentPrice * 0.1).toFixed(2), //1折
})
快去發布商品吧~~~
已下架
{{item.title}}
￥{{item.currentPrice}}
提問{{item.comment}}???瀏覽{{item.pv}}
降價
編輯
更多
現價
￥{{now_mon}}
降價至
￥{{low_mon}}
￥{{item.money}}
{{item.tip}}
確定
上架
下架
刪除
取消
新建
--沒有更多了--
// pages/myRelease/myRelease.js
var app = getApp();
Page({
/**
* 頁面的初始數據
*/
data: {
releases: [],
low_mon: 0, //降價至
now_mon: 0, //現價
image: "", //降價圖片
productID: 0,
limit: 5,
release: false,
showMore: false,
showLowMoney: false,
lowMoney: [{
money: 0,
tip: "打1折，極速賣"
},
{
money: 0,
tip: "打3折，出手快"
},
{
money: 0,
tip: "打5折，有競爭力"
}, {
money: 0,
tip: "打8折"
}
],
lowind: 0,
productState: false,
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function(options) {
this.getMyRelease();
},
/**
* 降價顯示
*/
onClickShowMoney(e) {
let index = e.currentTarget.dataset.index;
let productID = e.currentTarget.dataset.productid;
let product = this.data.releases[index];
let one = "lowMoney[" + 0 + "].money";
let three = "lowMoney[" + 1 + "].money";
let five = "lowMoney[" + 2 + "].money";
let eight = "lowMoney[" + 3 + "].money";
this.setData({
showLowMoney: !this.data.showLowMoney,
now_mon: product.currentPrice,
[one]: (product.currentPrice * 0.1).toFixed(2), //1折
[three]: (product.currentPrice * 0.3).toFixed(2), //3折
[five]: (product.currentPrice * 0.5).toFixed(2), //5折
[eight]: (product.currentPrice * 0.8).toFixed(2), //8折
low_mon: (product.currentPrice * 0.1).toFixed(2), //默認1折
productID: productID,
image: product.image
})
},
/**
* 更多顯示
*/
onClickShowMore(e) {
this.setData({
showMore: !this.data.showMore,
productID: e.currentTarget.dataset.productid
});
if (e.currentTarget.dataset.state === 0) {
this.setData({
productState: true
})
} else {
this.setData({
productState: false
})
}
},
/**
* 降價&更多隱藏
*/
onClickHidden(e) {
let that = this;
switch (e.currentTarget.dataset.id) {
case '0':
that.setData({
showLowMoney: !this.data.showLowMoney,
lowind: 0
});
break;
case '1':
that.setData({
showMore: !this.data.showMore
});
break;
}
},
/**
* 修改價錢
* updatePrice
*/
updatePrice(e) {
let params = {
userID: app.globalData.userID,
id: this.data.productID,
price: this.data.low_mon,
}
app.updatePrice(params).then(res => {
if (res.state === 1) {
this.getMyRelease();
this.setData({
showLowMoney: !this.data.showLowMoney,
lowind: 0
})
}
})
},
/**
* 下架
* soldOut
*/
soldOut() {
let params = {
userID: app.globalData.userID,
id: this.data.productID,
flag: this.data.productState
}
app.soldOut(params).then(res => {
if (res.state === 1) {
wx.showToast({
title: '已下架',
icon: "none",
duration: 1000,
mask: true,
})
this.getMyRelease();
this.setData({
showMore: !this.data.showMore,
lowind: 0
})
}
})
},
/**
* 上架
*putaway
*/
putaway() {
let params = {
userID: app.globalData.userID,
id: this.data.productID,
flag: this.data.productState
}
app.soldOut(params).then(res => {
if (res.state === 1) {
wx.showToast({
title: '已上架',
icon: "none",
duration: 1000,
mask: true,
})
this.getMyRelease();
this.setData({
showMore: !this.data.showMore,
lowind: 0
})
}
})
},
/**
* 刪除
* productDel
*/
productDel() {
let params = {
userID: app.globalData.userID,
id: this.data.productID
}
app.productDel(params).then(res => {
if (res.state === 1) {
this.getMyRelease();
this.setData({
showMore: !this.data.showMore,
lowind: 0
})
}
})
},
/**
* 選擇打折力度
*/
clickLowMoney(e) {
let price = this.data.lowMoney[e.currentTarget.dataset.index].money;
if (this.data.lowind == e.currentTarget.dataset.index) {
this.setData({
lowind: -1
})
} else {
this.setData({
lowind: e.currentTarget.dataset.index,
low_mon: price
})
}
},
/**
* 編輯
*/
edit(e) {
let productID = e.currentTarget.dataset.productid
wx.navigateTo({
url: '../productReleased/productReleased?productID=' + productID,
})
},
/**
* 新建我的發布
*/
newRelease() {
wx.navigateTo({
url: '../productReleased/productReleased?productID=' + 0,
})
},
productDetail(e) {
wx.navigateTo({
url: '../product/product?id=' + e.currentTarget.dataset.id,
})
},
//上拉事件
onReachBottom: function() {
this.data.limit = this.data.limit + 5
this.getMyRelease();
},
/**
* 獲取我的發布
*/
getMyRelease() {
let params = {
userID: app.globalData.userID,
limit: this.data.limit,
offset: 0,
}
app.getMyRelease(params).then(res => {
let release = res.data.release
this.setData({
releases: release
})
})
},
})
/* pages/order/order.wxss */
page {
background-color: #f1f1f1;
}
.null_img {
position: absolute;
color: #e5447b;
width: 200rpx;
height: 190rpx;
margin-left: 40%;
margin-top: 40%;
}
.null_text_release {
position: absolute;
font-size: 20px;
color: #e5447b;
margin-left: 35%;
margin-top: 70%;
}
.null_release {
background-color: white;
width: 100vw;
height: 100vh;
}
.bottom {
padding-top: 10px;
height: 40px;
text-align: center;
color: rgba(32, 27, 27, 0.173);
font-size: small;
}
.release {
width: 100%;
height: 300rpx;
background-color: white;
margin-top: 20rpx;
}
.release image {
width: 160rpx;
height: 160rpx;
margin: 20rpx;
}
.release_text {
position: absolute;
width: 550rpx;
left: 200rpx;
font-size: 35rpx;
padding-top: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.release_money {
color: red;
position: absolute;
padding-top: 80rpx;
font-size: 35rpx;
}
.pv {
font-size: 25rpx;
position: absolute;
padding-top: 150rpx;
color: #8f8f8f;
}
.button {
display: flex;
width: 480rpx;
margin-left: 240rpx;
margin-top: 10rpx;
}
.button button {
width: 130rpx;
height: 60rpx;
font-size: 25rpx;
background: white;
}
.out {
position: absolute;
padding-top: 220rpx;
left: 30rpx;
width: 100rpx;
font-size: 30rpx;
}
.more {
width: 450rpx;
height: 380rpx;
background: white;
border-radius: 20rpx;
}
.more_view {
font-size: 30rpx;
color: #0095f2;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 120rpx;
}
.more_bot {
border-bottom: 1px solid #cfcfcf;
}
.lowMoney {
width: 600rpx;
height: 600rpx;
background: white;
border-radius: 20rpx;
display: flex;
flex-direction: row;
}
.low_img {
width: 120rpx;
height: 120rpx;
margin: 50rpx;
}
.close {
width: 60rpx;
height: 60rpx;
position: absolute;
right: -70rpx;
top: 20rpx;
}
.now_money {
font-size: 30rpx;
position: absolute;
left: 100rpx;
top: 50rpx;
}
.now_mon {
color: red;
padding-left: 60rpx;
font-weight: 700;
}
.low_money {
padding-top: 23rpx;
display: flex;
flex-direction: row;
}
.low_mon {
width: 150rpx;
height: 60rpx;
background-color: #f2f2f2;
border-radius: 10%;
margin-left: 10rpx;
}
.low_mon_span {
font-weight: 700;
padding-left: 20rpx;
padding-top: 10rpx;
}
.dis {
width: 500rpx;
height: 220rpx;
display: flex;
flex-wrap: wrap;
position: absolute;
margin-top: 180rpx;
margin-left: 50rpx;
}
.discount {
font-size: 30rpx;
width: 230rpx;
height: 100rpx;
border-radius: 10rpx;
background-color: #f2f2f2;
margin-left: 20rpx;
margin-top: 20rpx;
}
.background-color {
background-color: #fcd9be;
}
.check {
width: 80rpx;
height: 70rpx;
position: absolute;
margin-top: 48rpx;
margin-left: 174rpx;
border-bottom-right-radius:10rpx;
}
.discount_view {
display: flex;
justify-content: center;
align-items: center;
padding-top: 8rpx;
}
.lowMoney_mon {
color: red;
font-weight: 700;
}
.lowMoney_tip {
font-size: 25rpx;
color: #707070;
}
.sure_but {
width: 500rpx;
height: 13%;
position: absolute;
bottom: 30rpx;
margin-left: 50rpx;
font-size: 30rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #e44178;
color: white;
font-weight: 700;
}
/* 遮罩層 */
.mask {
/* display: block; */
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9000;
opacity: 0.5;
}
/* 彈出層 */
.modalDlg {
width: 400rpx;
position: fixed;
top: 25vh;
left: 0;
right: 0;
z-index: 9999;
margin: 0 auto;
background-color: #fff;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
}
.new {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: #e44179;
color: white;
font-size: 25rpx;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 200rpx;
right: 20rpx;
}
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的闲鱼有微信小程序吗_微信小程序商品展示页面(仿咸鱼)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 系统即将关机请保存关机是由nt_设置Wi
- 下一篇： modbus 台达a2_驱控智造未来