项目中做了一个商品发布展示的页面，记录下来
解决问题：
- 想在setData中更改数组具体下标中的某个值
let one = "lowMoney[" + 0 + "].money";
this.setData({
[one]: (product.currentPrice * 0.1).toFixed(2), //1折
}）
<block wx:if="{{release}}">
<view class=\'null_release\'>
<image class=\'null_img\' src=\'/resources/images/purchase-record.png\'></image>
<text class=\'null_text_release\'>快去发布商品吧~~~</text>
</view>
</block>
<block wx:else>
<view class=\'release\' wx:for="{{releases}}" wx:key="index" wx:for-index="index">
<view data-id=\'{{item.productID}}\' bindtap=\'productDetail\'>
<image src=\'http://qhds.drefore.cn{{item.image}}\'></image>
<text class=\'out\' wx:if="{{item.state === 0}}">已下架</text>
<text class=\'release_text\'>{{item.title}}</text>
<text class=\'release_money\'>￥{{item.currentPrice}}</text>
<text class=\'pv \' decode="{{true}}">提问{{item.comment}} 浏览{{item.pv}}</text>
</view>
<view class=\'button\'>
<button data-index=\'{{index}}\' data-productid=\'{{item.productID}}\' bindtap=\'onClickShowMoney\'>降价</button>
<button data-productid=\'{{item.productID}}\' bindtap=\'edit\'>编辑</button>
<button data-productid=\'{{item.productID}}\' data-state=\'{{item.state}}\' bindtap=\'onClickShowMore\'>更多</button>
</view>
</view>
<!--降价-->
<view class=" {{ showLowMoney ? \'mask\' : \'\' }}" data-id=\'0\' bindtap="onClickHidden" />
<view class="modalDlg" wx:if="{{showLowMoney}}">
<view class="lowMoney">
<image class=\'low_img\' src=\'http://qhds.drefore.cn{{image}}\' />
<image class=\'close\' src=\'/resources/images/close.png\' data-id=\'0\' bindtap="onClickHidden" />
<view class=\'now_money\'>
<view>
<span>现价</span>
<span class="now_mon">￥{{now_mon}}</span>
</view>
<view class=\'low_money\'>
<span>降价至</span>
<view class="low_mon">
<view class="low_mon_span">￥{{low_mon}}</view>
</view>
</view>
</view>
<view class=\'dis\'>
<view data-index=\'{{index}}\' bindtap="clickLowMoney" wx:for="{{lowMoney}}" class=\'discount {{index== lowind? "background-color" : " "}}\'>
<image class=\'check\' src=\'{{index== lowind ?"/resources/images/check.png" : " "}}\'></image>
<view class=\'lowMoney_mon discount_view\'>￥{{item.money}}</view>
<view class=\'lowMoney_tip discount_view\'>{{item.tip}}</view>
</view>
</view>
<button class=\'sure_but\' data-id=\'0\' bindtap="updatePrice">确定</button>
</view>
</view>
<!--更多-->
<view class=" {{ showMore ? \'mask\' : \'\' }}" data-id=\'1\' bindtap="onClickHidden" />
<view class="modalDlg" wx:if="{{showMore}}">
<view class="more">
<view wx:if="{{productState}}" class=\'more_view more_bot\' bindtap=\'putaway\'>上架</view>
<view wx:else class=\'more_view more_bot\' bindtap=\'soldOut\'>下架</view>
<view class=\'more_view more_bot\' bindtap=\'productDel\'>删除</view>
<view data-id=\'1\' bindtap=\'onClickHidden\' class=\'more_view\'>取消</view>
</view>
</view>
<button class=\'new\' bindtap=\'newRelease\'>新建</button>
<view class=\'bottom \'>--没有更多了--</view>
</block>
// 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;
}
请发表评论