微信小程序商品展示页面(仿咸鱼)
2024-10-03 07:24:50
项目中做了一个商品发布展示的页面,记录下来
解决问题:
- 想在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>
WXML
// 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 }) }) }, })
JS
/* 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:; } .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:; 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:; } .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:; } /* 遮罩层 */ .mask { /* display: block; */ width: 100%; height: 100%; position: fixed; top:; left:; background: rgba(0, 0, 0, 0.5); z-index:; opacity: 0.5; } /* 弹出层 */ .modalDlg { width: 400rpx; position: fixed; top: 25vh; left:; right:; z-index:; 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; }
CSS
最新文章
- Java开发环境搭建——Idea开发环境
- nginx、php-fpm二三问
- vim 查找时忽略大小写
- 1秒30000QPS,前后端设计思路
- python常见的模块
- Windows原生MPIO存储多路径软件详解与应用
- POJ3616 Milking Time 简单DP
- for循环语句之棋盘放粮食、百鸡百钱、纸张的折叠问题
- [Linux]history 显示命令的运行时间
- 一些小bug
- JavaScript异步编程
- Vue不能检测数组或对象变动问题的解决
- 使用loadrunner编写webservice接口请求
- mvc5之文件上传
- apache做反向代理服务器
- svn的常用命令
- RN animated组动画
- 创建vue项目
- Python 安装环境
- jenkins需要安装的插件
热门文章
- mysql insert一条记录后 返回创建记录主键id的方法
- Linux下查看Tomcat运行日志
- 10 Minutes to pandas中文版
- Vmware下的Linux系统,安装WPS报错:[Errno 256] No more mirrors to try
- python3连接mysql 稍微进阶 + 日期处理
- Git——跟踪或取消跟踪文件
- [fw]Best Practices for Exception Handling
- oracle中的类似BIN$MrkCYT9eTTK+0sStMwn7+Q==$0的表的作用
- 给nginx生成自签名证书
- 网上的仿QQ验证码,详细使用方法