애플 릿 카 트 풀 버 전 구현
1.wxml 페이지 코드 모듈
<view wx:if="{{hasList}}">
<view class="order_list">
<view class="order" wx:for="{{list}}" wx:key="{{index}}">
<view class="xuanze" wx:if="{{item.selected}}" catchtap="selectList" data-index="{{index}}">
<image src="/images/serch/xuanze.png" />
</view>
<view class="xuanze" catchtap="selectList" data-index="{{index}}" wx:else>
<image src="/images/serch/gouxuan.png" />
</view>
<!-- -->
<view class="order_img">
<image src="{{item.image}}" />
</view>
<view class="order_text">
<view class="text_top">
<!-- -->
<view class="title">{{item.title}}</view>
<view class="detel" catchtap="deletes" data-index="{{index}}">
<image src="/images/serch/detel.png" />
</view>
</view>
<!-- -->
<view class="size"> ：{{item.pro_name}}</view>
<view class="text_bottom">
<!-- -->
<view class="money">￥{{item.price}}</view>
<!-- -->
<view class="number">
<!-- -->
<view class="reduce" catchtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">
<!-- -->
<image src="/images/serch/jian-1.png" />
</view>
<!-- -->
<view class="numb">{{item.num}}</view>
<!-- -->
<view class="add" catchtap="btn_add" data-index="{{index}}">
<!-- -->
<image src="/images/serch/add-1.png" />
</view>
</view>
</view>
</view>
</view>
</view>
<!-- -->
<view class="buy">
<view class="buy_top">
<view class="top_left">
<view class="left_img" catchtap="selectAll" wx:if="{{selectAllStatus}}">
<image src="/images/serch/gouxuan.png" />
</view>
<view class="left_img" catchtap="selectAll" wx:else>
<image src="/images/serch/gouxuan.png" />
</view>
<view class="left_name"> </view>
</view>
<view class="top_left">
<view class="left_img">
<image src="/images/serch/fenxiang.png" />
</view>
<view class="left_name"> </view>
</view>
</view>
<view class="buy_bottom">
<view class="buy_left">
<view class="heji"> ：￥{{totalPrice}}</view>
</view>
<view class="buy_right">
<!-- -->
<view class="liji " catchtap="btn_submit_order"> </view>
<view class="liji two active"> </view>
</view>
</view>
</view>
</view>
<!-- -->
<view wx:else>
<view class="list_none"> ~</view>
</view>
page {
background-color: rgba(238, 238, 238, 0.5);
}
.order {
height: 238rpx;
background-color: #fefeff;
margin: 27rpx;
border-radius: 4rpx;
display: flex;
align-items: center;
}
.xuanze {
width: 40rpx;
height: 40rpx;
/* background-color: darkgoldenrod; */
border-radius: 50%;
margin: 0 11rpx;
}
.xuanze image {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.order_img {
width: 180rpx;
height: 180rpx;
}
.order_img image {
width: 100%;
height: 100%;
display: block;
}
.order_text {
margin-left: 20rpx;
width: 58%;
height: 180rpx;
}
.text_top {
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
width: 70%;
font-size: 28rpx;
color: #4b5248;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.detel {
width: 30rpx;
height: 30rpx;
}
.detel image {
width: 100%;
height: 100%;
display: block;
}
.size {
font-size: 24rpx;
color: #a8ada6;
}
.text_bottom {
display: flex;
margin-top: 50rpx;
align-items: center;
justify-content: space-between;
}
.money {
font-size: 30rpx;
color: #a5937f;
}
.number {
display: flex;
justify-content: space-around;
align-items: center;
width: 170rpx;
}
.reduce {
width: 46rpx;
height: 46rpx;
}
.reduce image {
width: 100%;
height: 100%;
display: block;
}
.numb {
font-size: 30rpx;
color: #a5937f;
}
.add {
width: 46rpx;
height: 46rpx;
}
.add image {
width: 100%;
height: 100%;
display: block;
}
/* */
.buy {
height: 180rpx;
width: 696rpx;
position: fixed;
left: 27rpx;
bottom: 41rpx;
background-color: #555555f3;
border-radius: 4rpx;
}
.buy_top {
border-bottom: 1px solid rgb(98, 98, 99);
height: 75rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.top_left {
display: flex;
align-items: center;
}
.left_img {
width: 37rpx;
height: 37rpx;
margin: 11rpx;
}
.left_img image {
width: 100%;
height: 100%;
display: block;
}
.left_name {
font-size: 24rpx;
color: #fefeff;
margin-right: 29rpx;
}
.buy_bottom {
display: flex;
height: 104rpx;
justify-content: space-between;
align-items: center;
padding: 0rpx 30rpx 0rpx 12rpx;
}
.buy_left {
font-size: 26rpx;
color: #fff;
}
.buy_right {
display: flex;
align-items: center;
}
.liji {
width: 180rpx;
height: 70rpx;
border: 2rpx solid rgba(248, 248, 248, 1);
box-sizing: border-box;
border-radius: 4rpx;
line-height: 70rpx;
text-align: center;
font-size: 26rpx;
color: #FEFEFF;
}
.two{
margin-left: 12rpx;
}
.active{
background-color: #A5937F;
border: none;
}
Page({
/**
*
*/
data: {
hasList: true, //
//
list: [{
id: 1,
title: ' ',
image: '/images/serch/2.png',
pro_name: "30ml",
num: 1,
price: 180,
selected: true
},
{
id: 2,
title: ' ',
image: '/images/serch/1.png',
pro_name: "25g",
num: 1,
price: 62,
selected: true
},
{
id: 2,
title: ' ',
image: '/images/serch/2.png',
pro_name: "75ml",
num: 1,
price: 175,
selected: true
}
],
//
totalPrice: 0, // ， 0
//
selectAllStatus: true, // ，
},
/**
* --
*/
onLoad: function(options) {
},
/**
* --
*/
onShow: function() {
wx.showToast({
title: ' ',
icon: "loading",
duration: 1000
})
//
this.count_price();
},
/** */
selectList(e) {
var that = this;
// radio
var index = e.currentTarget.dataset.index;
//
var list = that.data.list;
//
that.data.selectAllStatus = true;
// ， -- / [selected]
list[index].selected = !list[index].selected;
// selected[true],
for (var i = list.length - 1; i >= 0; i--) {
if (!list[i].selected) {
that.data.selectAllStatus = false;
break;
}
}
//
that.setData({
list: list,
selectAllStatus: that.data.selectAllStatus
})
//
that.count_price();
},
//
deletes(e) {
var that = this;
//
const index = e.currentTarget.dataset.index;
//
let list = this.data.list;
wx.showModal({
title: ' ',
content: ' ',
success: function(res) {
if (res.confirm) {
// 1
list.splice(index, 1);
//
that.setData({
list: list
});
//
if (!list.length) {
that.setData({
hasList: false
});
} else {
//
that.count_price();
}
} else {
console.log(res);
}
},
fail: function(res) {
console.log(res);
}
})
},
/** */
selectAll(e) {
// ICON
let selectAllStatus = this.data.selectAllStatus;
// true ----- false
selectAllStatus = !selectAllStatus;
//
let list = this.data.list;
//
for (let i = 0; i < list.length; i++) {
list[i].selected = selectAllStatus;
}
//
this.setData({
selectAllStatus: selectAllStatus,
list: list
});
//
this.count_price();
},
/** */
btn_add(e) {
//
const index = e.currentTarget.dataset.index;
//
let list = this.data.list;
//
let num = list[index].num;
//
num = num + 1;
list[index].num = num;
// ---
this.setData({
list: list
});
//
this.count_price();
},
/**
*
*/
btn_minus(e) {
// //
const index = e.currentTarget.dataset.index;
// const obj = e.currentTarget.dataset.obj;
// console.log(obj);
//
let list = this.data.list;
//
let num = list[index].num;
// num 1 return;
if (num <= 1) {
return false;
}
// else num 1 --
num = num - 1;
list[index].num = num;
//
this.setData({
list: list
});
//
this.count_price();
},
//
btn_submit_order() {
var that = this;
console.log(that.data.totalPrice);
//
// wx.requestPayment(
// {
// 'timeStamp': '',
// 'nonceStr': '',
// 'package': '',
// 'signType': 'MD5',
// 'paySign': '',
// 'success': function (res) { },
// 'fail': function (res) { },
// 'complete': function (res) { }
// })
wx.showModal({
title: ' ',
content: ' -' + that.data.totalPrice + " ",
})
},
/**
*
*/
count_price() {
//
let list = this.data.list;
// price
let total = 0;
//
for (let i = 0; i < list.length; i++) {
//
if (list[i].selected) {
// count_money
total += list[i].num * list[i].price;
}
}
// data
this.setData({
list: list,
totalPrice: total.toFixed(2)
});
},
})이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
