微信小程序商品展示页面(仿咸鱼)

项目中做了一个商品发布展示的页面，记录下来

解决问题：

想在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}}&nbsp;&nbsp;&nbsp;浏览{{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.productidwx.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 + 5this.getMyRelease();},/*** 获取我的发布*/getMyRelease() {let params = {userID: app.globalData.userID,limit: this.data.limit,offset: 0,}app.getMyRelease(params).then(res => {let release = res.data.releasethis.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;
}

微信小程序商品展示页面(仿咸鱼)相关推荐

闲鱼有微信小程序吗_微信小程序商品展示页面(仿咸鱼)
项目中做了一个商品发布展示的页面,记录下来解决问题: 想在setData中更改数组具体下标中的某个值 let one = "lowMoney[" + 0 + "].mo ...
微信商品详细信息页面html,微信小程序商品展示页面(仿咸鱼)
//pages/myRelease/myRelease.js var app =getApp(); Page({/** * 页面的初始数据*/data: { releases: [], low_mon ...
微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布效果图效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
分享微信小程序资讯类仿LOL盒子开发
分享微信小程序资讯类仿LOL盒子开发一.主要功能联盟盒子微信小程序功能分为管理员和非管理员功能.系统拥有多个非管理员用户,管理员用户仅有一个角色,对于管理员而言,管理员一般拥有操作用户信息比如更改 ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
前端微信小程序电影类仿淘票票微信小程序
需求描述及交互分析设计思路和相关知识点电影界面顶部页签切换效果设计正在热映界面布局设计即将上映界面布局设计电影详情页设计我的界面列表导航设计登录设计相关知识点(1)swiper滑块视图容器组件,可以 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...

微信小程序商品展示页面(仿咸鱼)

解决问题：

微信小程序商品展示页面(仿咸鱼)相关推荐

最新文章

热门文章