shaojing
2 years ago
16 changed files with 1757 additions and 180 deletions
@ -0,0 +1,582 @@ |
|||
// subPackages/xx/index.js
|
|||
import commonApi from "../../utils/https/common" |
|||
import util from "../../utils/util" |
|||
let app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
height: 90, |
|||
padHeight:0, |
|||
right:0, |
|||
type_id:'', //用来区别文创特产、非遗
|
|||
tag_id:'', |
|||
list:[], |
|||
keywords:'', |
|||
skuFlag:null, //规格弹窗
|
|||
info: null, //规格信息
|
|||
skuIndex: 0, //默认选中第一个规格
|
|||
producNum: 1, |
|||
cartCount:0, |
|||
showPopup:false, //购物车的弹窗
|
|||
gwcList:[], //gwc里的产品数据
|
|||
allSelectedBtn:false, //全选按钮
|
|||
totalPrice:0, //获取购物车总价--打开购物车后勾选的产品价格
|
|||
nowAddListId:[], |
|||
type:'', //购物车分类1文创，2非遗
|
|||
show:false |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
console.log(options); |
|||
let id = '',type='' |
|||
if (options.type_id == '1') { |
|||
id = '20,19' |
|||
type='1' |
|||
} else { |
|||
id = '5' |
|||
type='2' |
|||
} |
|||
this.setData({ |
|||
tag_id:id, |
|||
type, |
|||
nowAddListId:options.ids.split(',') |
|||
}) |
|||
// this.getList()
|
|||
this.getCount() |
|||
}, |
|||
|
|||
// 去产品详情页
|
|||
goodsDetail(e){ |
|||
wx.navigateTo({ |
|||
url: '/pages/info/postProductInfo/index?id='+e.currentTarget.dataset.goods.id, |
|||
}) |
|||
}, |
|||
// 添加产品到购物车
|
|||
addCart: function (e) { |
|||
let item = e.currentTarget.dataset.item |
|||
app.globalData.postProduct = [] |
|||
app.globalData.list = [] |
|||
commonApi.user_post("/product/checkStock", { |
|||
sku_id: this.data.showPopup ? item.sku.id : this.data.info.sku[this.data.skuIndex].id, |
|||
}).then(res => { |
|||
if (res && res.code != 1) { |
|||
return; |
|||
} else { |
|||
commonApi.user_post("cart_within/add_sku", { |
|||
sku_id: this.data.showPopup ? item.sku.id :this.data.info.sku[this.data.skuIndex].id, |
|||
num: this.data.producNum, |
|||
type:this.data.type |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
let sku_id = this.data.showPopup ? item.sku.id :this.data.info.sku[this.data.skuIndex].id |
|||
let _nowAddListId = this.data.nowAddListId |
|||
// debugger
|
|||
_nowAddListId.push(sku_id) |
|||
this.setData({ |
|||
nowAddListId: _nowAddListId |
|||
}) |
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:this.data.type |
|||
}).then(res => { |
|||
// debugger
|
|||
let cartCount = 0,totalPrice = 0,gwcList=this.data.gwcList |
|||
res.data.forEach(val=> { |
|||
cartCount+=val.num |
|||
console.log(this.data.skuFlag); |
|||
if (!this.data.skuFlag && !this.data.showPopup) { |
|||
console.log(this.data.nowAddListId) |
|||
if (this.data.nowAddListId.some(s => +s === +val.sku_id) ) { |
|||
val.selected = 1 |
|||
} |
|||
}else { |
|||
gwcList.forEach(el=> { |
|||
if (el.id == val.id) { |
|||
val.selected = el.selected |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
res.data.forEach(element=> { |
|||
if (element.selected == 1) { |
|||
totalPrice += Number(element.num*element.sku.price) |
|||
} |
|||
}) |
|||
console.log(res.data); |
|||
let status = res.data.every(el => el.selected === 1) |
|||
this.setData({ |
|||
cartCount: cartCount, |
|||
totalPrice, |
|||
producNum:1, |
|||
gwcList:res.data, |
|||
allSelectedBtn:status?true:false, |
|||
}) |
|||
}) |
|||
// 加动效
|
|||
this.setData({ |
|||
skuFlag: null, |
|||
aniSkuIndex: this.data.skuIndex, |
|||
cartImgInfo: null |
|||
}) |
|||
setTimeout(() => { |
|||
this.setData({ |
|||
aniSkuIndex: -1 |
|||
}) |
|||
// wx.showModal({
|
|||
// title: "提示",
|
|||
// content: "去购物车结算？",
|
|||
// success: function (res) {
|
|||
// if (res.confirm) {
|
|||
// wx.navigateTo({
|
|||
// url: '/pages/user/cartlist/list',
|
|||
// })
|
|||
// }
|
|||
// }
|
|||
// })
|
|||
}, 650) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
// 去结算
|
|||
order: function () { |
|||
commonApi.user_post('wx/get_user_keep', { |
|||
jumpurl: '/pages/user/cartlist/list', |
|||
title: '购物车', |
|||
type: 'mini' |
|||
}).then(res => { |
|||
if (res.data.subscribe == 0) { |
|||
this.setData({ |
|||
wxqrcode: res.data.qrcode, |
|||
showQrCode: true |
|||
}) |
|||
} else { |
|||
app.globalData.couponInfo = null; |
|||
util.pagePoint({ |
|||
event: 'cart_order' |
|||
}, 1) |
|||
let list = this.data.gwcList, |
|||
price = 0, |
|||
product = [], |
|||
product1 = [] |
|||
list.map(item => { |
|||
if (item.selected == 1) { |
|||
// item.product.type="post";
|
|||
if (item.product.type == 'post') { |
|||
product.push({ |
|||
product: item.product, |
|||
sku: item.sku, |
|||
productNum: item.num |
|||
}) |
|||
} else { |
|||
product1.push(item) |
|||
app.globalData.list = product1 |
|||
} |
|||
if (item.product.type.includes('post')) { |
|||
this.data.productType = 'post' |
|||
} |
|||
} |
|||
}) |
|||
if (product.length == 0 && product1.length == 0) { |
|||
// wx.showToast({
|
|||
// title: '请先选择产品',
|
|||
// icon: 'none'
|
|||
// })
|
|||
return; |
|||
} |
|||
if (product.length > 0 && product1.length > 0) { |
|||
this.setData({ |
|||
flag: 'mix', |
|||
isCar: 'multiple' |
|||
}) |
|||
} |
|||
if (product1.length > 1) { |
|||
this.setData({ |
|||
isCar: 'multiple' |
|||
}) |
|||
} else { |
|||
this.setData({ |
|||
isCar: 'single' |
|||
}) |
|||
} |
|||
console.log(product1); |
|||
app.globalData.postProduct = product; |
|||
if (app.globalData.list) { |
|||
app.globalData.product = app.globalData.list[app.globalData.index] |
|||
} |
|||
wx.navigateTo({ |
|||
url: '/pages/order/postOrder/index?from=cart&flag=' + this.data.flag, |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 单选一个
|
|||
selectedIt(e) { |
|||
let item = e.currentTarget.dataset.item,gwcList= this.data.gwcList,totalPrice=0,nowAddListId=[] |
|||
gwcList.forEach(el=> { |
|||
if (el.id == item.id) { |
|||
el.selected == 1 ? el.selected =0 : el.selected = 1 |
|||
} |
|||
}) |
|||
gwcList.forEach(el=> { |
|||
if (el.selected == 1) { |
|||
totalPrice += Number(el.num*el.sku.price) |
|||
} |
|||
}) |
|||
gwcList.forEach(item=> { |
|||
if (item.selected == 1) { |
|||
nowAddListId.push(item.sku_id) |
|||
} |
|||
}) |
|||
let status = gwcList.every(el => el.selected === 1) |
|||
this.setData({ |
|||
gwcList, |
|||
allSelectedBtn:status?true:false, |
|||
totalPrice, |
|||
nowAddListId |
|||
}) |
|||
}, |
|||
// 清空
|
|||
delAll() { |
|||
let ids = [] |
|||
this.data.gwcList.forEach(item => { |
|||
ids.push(item.sku_id) |
|||
}) |
|||
commonApi.user_post("cart_within/del_sku", { |
|||
sku_id: ids+'', |
|||
type:this.data.type |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
wx.showToast({ |
|||
title: '清空成功', |
|||
icon: "success" |
|||
}) |
|||
this.setData({ |
|||
totalPrice:0 |
|||
}) |
|||
this.getCount() |
|||
} |
|||
}) |
|||
}, |
|||
// 减少一个
|
|||
del(e) { |
|||
let item = e.currentTarget.dataset.item |
|||
let gwcList = this.data.gwcList |
|||
commonApi.user_post("cart_within/update_sku", { |
|||
num:item.num-1, |
|||
sku_id: item.sku_id, |
|||
type:this.data.type |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
// this.getCount()
|
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:this.data.type |
|||
}).then(res => { |
|||
let arr = res.data,totalPrice = 0,cartCount=0 |
|||
if (res.data.length>0) { |
|||
res.data.forEach(item=> { |
|||
// totalPrice += item.num*item.sku.price
|
|||
cartCount += item.num |
|||
gwcList.forEach(el=> { |
|||
if (el.id == item.id) { |
|||
item.selected = el.selected |
|||
} |
|||
}) |
|||
}) |
|||
res.data.forEach(item=> { |
|||
if (item.selected ==1) { |
|||
totalPrice += item.num*item.sku.price |
|||
} |
|||
}) |
|||
} |
|||
let status = res.data.every(el => el.selected === 1) |
|||
this.setData({ |
|||
cartCount: cartCount, //1
|
|||
gwcList:res.data, |
|||
allSelectedBtn:status?true:false, |
|||
totalPrice |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 全选
|
|||
allSelected() { |
|||
let gwcList = this.data.gwcList |
|||
let totalPrice = 0 |
|||
let nowAddListId = [] |
|||
if (this.data.allSelectedBtn) { |
|||
gwcList.forEach(item=> { |
|||
item.selected =0 |
|||
}) |
|||
nowAddListId = [] |
|||
} else { |
|||
gwcList.forEach(item=> { |
|||
item.selected =1 |
|||
}) |
|||
gwcList.forEach(item=> { |
|||
totalPrice += Number(item.num*item.sku.price) |
|||
}) |
|||
gwcList.forEach(item=> { |
|||
nowAddListId.push(item.sku_id) |
|||
}) |
|||
} |
|||
this.setData({ |
|||
gwcList, |
|||
allSelectedBtn:!this.data.allSelectedBtn, |
|||
totalPrice, |
|||
nowAddListId |
|||
}) |
|||
}, |
|||
// 左侧购物车打开弹窗
|
|||
openPopup() { |
|||
// this.getCount()
|
|||
let gwcList = this.data.gwcList |
|||
let status = gwcList.every(el => el.selected === 1) |
|||
this.setData({ |
|||
showPopup:!this.data.showPopup, |
|||
allSelectedBtn:status?true:false, |
|||
}) |
|||
}, |
|||
// 获取历史购物车详情
|
|||
getCount() { |
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:this.data.type |
|||
}).then(res => { |
|||
let arr = res.data,totalPrice = 0,cartCount=0 |
|||
if (arr.length>0) { |
|||
arr.forEach(item=> { |
|||
// totalPrice += item.num*item.sku.price
|
|||
cartCount += item.num |
|||
}) |
|||
} |
|||
arr.forEach(item=> { |
|||
if (this.data.nowAddListId.some(s => +s === +item.sku_id) ) { |
|||
item.selected = 1 |
|||
} |
|||
}) |
|||
arr.forEach(item=> { |
|||
if (item.selected == 1) { |
|||
totalPrice += item.num*item.sku.price |
|||
} |
|||
}) |
|||
// console.log(arr);
|
|||
// debugger
|
|||
this.setData({ |
|||
cartCount: cartCount, //1
|
|||
gwcList:arr, |
|||
allSelectedBtn:false, |
|||
totalPrice |
|||
}) |
|||
}) |
|||
}, |
|||
search() { |
|||
this.setData({ |
|||
list:[] |
|||
}) |
|||
this.getList() |
|||
}, |
|||
searchInput(e) { |
|||
this.setData({ |
|||
keywords:e.detail.value |
|||
}) |
|||
}, |
|||
getList() { |
|||
this.setData({ |
|||
show:false |
|||
}) |
|||
let list= this.data.list; |
|||
if (this.data.keywords == '' || this.data.keywords.indexOf(' ')!==-1) { |
|||
return |
|||
} |
|||
if(list.length>=this.data.total) return; |
|||
commonApi._post("product/get_product_by_tag",{ |
|||
tag_id:this.data.tag_id, //标签的ID
|
|||
offset:this.data.list.length, //起始查询
|
|||
limit: 10, //查询数量
|
|||
title:this.data.keywords.length>0 ? this.data.keywords : '', //搜索产品名称
|
|||
}).then(res=>{ |
|||
res.data.list.map(item=>{ |
|||
item.display_tags = item.display_tags?item.display_tags.split(","):[]; |
|||
item.display_tags = item.display_tags.splice(0,2); |
|||
}) |
|||
this.setData({ |
|||
list:list.concat(res.data.list), |
|||
show:true |
|||
}) |
|||
console.log(this.data.list); |
|||
}) |
|||
}, |
|||
getHeight() { |
|||
let systemInfo = wx.getSystemInfoSync(),rect = wx.getMenuButtonBoundingClientRect(); |
|||
let height = (rect.top - systemInfo.statusBarHeight) * 2 + rect.height; |
|||
this.setData({ |
|||
height:height, |
|||
padHeight:systemInfo.statusBarHeight, |
|||
right:(systemInfo.screenWidth - rect.right) + rect.width |
|||
}) |
|||
console.log(systemInfo,rect) |
|||
}, |
|||
back: function () { |
|||
if(this.properties.clickid){ |
|||
wx.uma.trackEvent(this.properties.clickid); |
|||
} |
|||
const pages = getCurrentPages(); |
|||
// wx.showTabBar({})
|
|||
console.log(this.properties.isIndex) |
|||
if (pages.length<=1){ |
|||
wx.switchTab({ |
|||
url: app.globalData.menuRoute |
|||
}) |
|||
} |
|||
else { |
|||
wx.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
} |
|||
}, |
|||
// 添加产品弹窗 1.首先获取到该产品下的规格
|
|||
addBuyCart(e) { |
|||
let item = e.currentTarget.dataset.item |
|||
console.log(item); |
|||
commonApi._post("product/get_product_detail", { |
|||
id: item.id |
|||
}).then(res => { |
|||
if (item.skuid) { |
|||
let sku = res.data.sku.find(skuItem => item.id == skuItem.skuid); |
|||
res.data.sku = [sku]; |
|||
} |
|||
res.data.flag = res.data.sku.find(item => item.flag == 'on') ? res.data.flag : 0 |
|||
this.setData({ |
|||
info: res.data, |
|||
// skuFlag: "cart"
|
|||
}) |
|||
this.showCart() |
|||
this.BroswerRecord() |
|||
}) |
|||
}, |
|||
// 添加产品弹窗 2.渲染规格，未登录去登录
|
|||
showCart: function () { |
|||
commonApi.user_post('wx/get_user_keep', { |
|||
jumpurl: '/pages/info/postProductInfo/index?id=' + this.data.id, |
|||
title: this.data.info.title, |
|||
type: 'mini' |
|||
}).then(res => { |
|||
if (res.data.subscribe == 0) { |
|||
this.setData({ |
|||
wxqrcode: res.data.qrcode, |
|||
showQrCode: true |
|||
}) |
|||
} else { |
|||
if (this.data.info.sku.length == 0) { |
|||
wx.showToast({ |
|||
title: '该产品未设置规格，不能加购', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
this.setData({ |
|||
skuFlag: "cart" |
|||
}) |
|||
let that = this |
|||
wx.createSelectorQuery().select('#skuImg').boundingClientRect(function (res) { |
|||
console.log(res) |
|||
that.setData({ |
|||
cartImgInfo: 'top:' + res.top + 'px;left:' + res.left + 'px;' |
|||
}) |
|||
}).exec() |
|||
} |
|||
this.getCount() |
|||
}) |
|||
}, |
|||
// 规格弹窗切换其他规格
|
|||
selectSku: function (e) { |
|||
let index = e.currentTarget.dataset.index; |
|||
this.setData({ |
|||
skuIndex: index |
|||
}) |
|||
}, |
|||
// 关闭弹窗
|
|||
hideSku: function () { |
|||
this.setData({ |
|||
skuFlag: null, |
|||
cartImgInfo: null |
|||
}) |
|||
}, |
|||
// 减少数量
|
|||
minus: function () { |
|||
if (this.data.producNum == 1) return; |
|||
this.setData({ |
|||
producNum: this.data.producNum - 1 |
|||
}) |
|||
}, |
|||
// 加数量
|
|||
add: function () { |
|||
this.setData({ |
|||
producNum: this.data.producNum + 1 |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
this.getHeight() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
this.setData({ |
|||
show:false |
|||
}) |
|||
this.getHeight() |
|||
this.getCount() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
let ids = this.data.nowAddListId |
|||
ids = ids.map(item => Number(item)); |
|||
app.globalData.nowAddListId = ids |
|||
// debugger
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
this.getList() |
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
<view class="title-box{{transparent==1?' bg-box':''}}" style="height:{{isScene==1?'0':(height+padHeight)}}px;"> |
|||
<view class="title-header" style="padding-top:{{padHeight}}px;height:{{height}}px"> |
|||
<icon bindtap="back" class="iconfont icon-fanhui1"></icon> |
|||
<view bindtap="indexFocus" class="search-box" style="margin-right:{{right + 5}}px;"> |
|||
<icon class="iconfont icon-sousuo"></icon> |
|||
<input placeholder-class="{{transparent==1?'phcolor':''}}" bindinput="searchInput" class="weui-input" placeholder="请输入商品名称" /> |
|||
<!-- <input bindfocus="inputFocus" placeholder-class="{{transparent==1?'phcolor':''}}" bindinput="getVal" class="weui-input" placeholder="搜索" /> --> |
|||
<view wx:if="{{isScene!=1}}" style="display: flex;padding-right: 12rpx;"> |
|||
<view style="color: #ccc;">|</view> |
|||
<view style="margin-left:22rpx;font-weight: 400;font-size: 29rpx;color: #0B898E;" bindtap="getList">搜索</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view wx:if="{{show}}"> |
|||
<view class="hot-list" wx:if="{{list.length>0}}"> |
|||
<view class="hot-list-item" wx:for="{{2}}" wx:for-index="number" wx:key="this"> |
|||
<view class="hot-item" wx:if="{{index%2==number}}" wx:for="{{list}}" bindtap="goodsDetail" data-goods="{{item}}" wx:key="id"> |
|||
<image class="hot-item-img" src="{{item.headimg}}" mode="" /> |
|||
<view class="hot-item-main"> |
|||
<view class="hot-item-title textOver2"> |
|||
{{item.title}} |
|||
</view> |
|||
<view style="display: flex;justify-content: space-between;align-items: center; "> |
|||
<view> |
|||
<text class="hot-item-price">{{item.price/100}}</text> |
|||
<text class="hot-item-market_price" wx:if="{{item.market_price && item.market_price!=0 && item.market_price>item.price}}">{{item.market_price/100}}</text> |
|||
</view> |
|||
<image class="add" catchtap="addBuyCart" data-item="{{item}}" src="https://static.ticket.sz-trip.com/uploads/20240715/3ad59eac0088d47ff4bc2fec6ffd8f56.png" mode="" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view wx:else style="display: flex;flex-direction: column;align-items: center;"> |
|||
<image style="width:328rpx;height:450.67rpx;margin-top: 286.67rpx;" src="https://static.ticket.sz-trip.com/uploads/20240715/3750a41a89b49e9f546a6ba85d71d66e.png" mode="" /> |
|||
<view style="font-family: PingFang SC;font-weight: 500;font-size: 28rpx;color: #666666;margin-top: 67rpx;"> |
|||
暂无搜索结果 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom" wx:if="{{(skuFlag != 'cart') || showPopup}}"> |
|||
<!-- 左边购物车图标及价格 --> |
|||
<view class="gwc-left"> |
|||
<view class="gwc" bindtap="openPopup"> |
|||
<image wx:if="{{cartCount == 0}}" style="width: 100%;height: 100%;" src="https://static.ticket.sz-trip.com/uploads/20240715/520600afc4bd32ed1f44bc5985fc2ba5.png" mode="" /> |
|||
<image wx:else style="width: 100%;height: 100%;" src="https://static.ticket.sz-trip.com/uploads/20240711/f9c290c64c521feae643d28f1b8c9c60.png" mode="" /> |
|||
<view class="cartCount">{{cartCount}}</view> |
|||
</view> |
|||
<view style="font-weight: 500;font-size: 27rpx;color: #000000;"> |
|||
总计：<text class="money">{{totalPrice/100}}</text> |
|||
</view> |
|||
<view wx:if="{{totalPrice>0}}" bindtap="openPopup"> |
|||
<text style="margin-left: 16.67rpx;font-weight: 500;font-size: 27rpx;color: #0B898E;">明细</text> |
|||
<image wx:if="{{showPopup}}" style="width:17.33rpx;height:17.33rpx;margin-left:10rpx;" src="https://static.ticket.sz-trip.com/uploads/20240715/524acef87f09269f6a4fa39d0fa38c18.png" mode=""/> |
|||
<image wx:else style="width:17.33rpx;height:17.33rpx;margin-left: 10rpx;" src="https://static.ticket.sz-trip.com/uploads/20240715/080e94053d1444707d18860a73b17915.png" mode=""/> |
|||
</view> |
|||
</view> |
|||
<!-- 去结算按钮 --> |
|||
<view class="{{totalPrice == 0?'no-buy':'buy'}}" bindtap="order">去结算</view> |
|||
</view> |
|||
<!-- 规格弹窗 --> |
|||
<view class="mask" wx:if="{{skuFlag}}"> |
|||
<view class="mask-bg" bindtap="hideSku" style="z-index: 9999;"></view> |
|||
<view class="mask-content" style="z-index: 99999;"> |
|||
<view class="iconfont icon-close" bindtap="hideSku"></view> |
|||
<view class="sku-info-box"> |
|||
<image id="skuImg" src="{{info.sku[skuIndex].headimg}}" mode="aspectFill"></image> |
|||
<view class="sku-info"> |
|||
<view class="sku-price">{{info.sku[skuIndex].price/100}} |
|||
<view class="allowance" wx:if="{{allowance_data}}"> |
|||
补贴价：￥{{ (1 - allowance_data.discount_rate / 100) * info.sku[skuIndex].price / 100 }}</view> |
|||
</view> |
|||
<view class="sku-name">已选择：{{info.sku[skuIndex].sku_name}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="sku-names"> |
|||
<view bindtap="selectSku" data-index="{{index}}" class="sku-name-item textOver{{index==skuIndex?' active':''}}" wx:for="{{info.sku}}">{{item.sku_name}}</view> |
|||
</view> |
|||
<view class="number-box"> |
|||
<text>数量</text> |
|||
<view class="iconfont icon-sami-select" bindtap="minus"></view> |
|||
<view class="number">{{producNum}}</view> |
|||
<view class="iconfont icon-add-select" bindtap="add"></view> |
|||
</view> |
|||
<view style="height:138rpx"></view> |
|||
<view class="btn-box"> |
|||
<!-- <view class="mask-btn" bindtap="addCart" wx:if="{{info.sku[skuIndex].flag=='on'}}">{{skuFlag=='cart'?'加入购物车':'立即购买'}} |
|||
</view> --> |
|||
<view class="mask-btn" bindtap="addCart" wx:if="{{info.sku[skuIndex].flag=='on'}}">加入购物车</view> |
|||
<view class="mask-btn disable" wx:else>该商品已下架</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 购物车的弹窗 --> |
|||
<view class="mask" wx:if="{{showPopup}}"> |
|||
<view bindtap="openPopup" class="mask-bg"></view> |
|||
<view class="mask-content" style="padding: 40rpx 0 180rpx;min-height: 600rpx;"> |
|||
<view style="margin: 0 26.67rpx;"> |
|||
<!-- 顶部操作按钮 --> |
|||
<view class="flex" style="margin-bottom: 56.67rpx;"> |
|||
<view class="flex"> |
|||
<image bindtap="allSelected" wx:if="{{allSelectedBtn}}" style="width: 40rpx;height: 40rpx;" src="https://static.ticket.sz-trip.com/uploads/20240715/a961604bc708670cbdc76d1580eb3f3c.png" mode="" /> |
|||
<view bindtap="allSelected" wx:else style="width: 40rpx;height: 40rpx;border-radius: 50%;border: 1px solid #999999;"></view> |
|||
<text class="all">全选</text> |
|||
</view> |
|||
<view class="flex" bindtap="delAll"> |
|||
<image style="width:26.67rpx;height:26.67rpx;" src="https://static.ticket.sz-trip.com/uploads/20240715/3320fbf5ccf471145c3c600582cd9b65.png" mode="" /> |
|||
<text class="del-all">清空</text> |
|||
</view> |
|||
</view> |
|||
<view class="gwc-item" wx:for="{{gwcList}}" wx:key="*this" bindtap="selectedIt" data-item="{{item}}"> |
|||
<view style="margin-right: 26.67rpx;"> |
|||
<image wx:if="{{item.selected ==1}}" style="width: 43rpx;height: 43rpx;" src="https://static.ticket.sz-trip.com/uploads/20240715/a961604bc708670cbdc76d1580eb3f3c.png" mode="" /> |
|||
<view wx:else style="width: 40rpx;height: 40rpx;border-radius: 50%;border: 1px solid #999999;"></view> |
|||
</view> |
|||
<image style="width:179rpx;height: 179rpx;border-radius: 13rpx;flex-shrink: 0;margin-right: 26rpx;" src="{{item.sku.headimg}}" mode="" /> |
|||
<view class="main"> |
|||
<view> |
|||
<view class="title textOver">{{item.product.title}}</view> |
|||
<view class="sku-title textOver">{{item.sku.sku_name}}</view> |
|||
</view> |
|||
<view class="main-bottom"> |
|||
<view class="price">{{item.sku.price/100}}</view> |
|||
<view class="num-box"> |
|||
<image class="reduce" catchtap="del" data-item="{{item}}" src="https://static.ticket.sz-trip.com/uploads/20240715/054627e5d3864a9a4a8b397cae47754e.png" mode="" /> |
|||
<view style="margin: 0 25.33rpx;">{{item.num}}</view> |
|||
<image class="grow" catchtap="addCart" data-item="{{item}}" src="https://static.ticket.sz-trip.com/uploads/20240715/3ad59eac0088d47ff4bc2fec6ffd8f56.png" mode="" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,474 @@ |
|||
.title-box, |
|||
.title-header { |
|||
background: #ffff; |
|||
} |
|||
|
|||
.bg-box, |
|||
.bg-box .title-header { |
|||
background: transparent; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.title-header { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
display: flex; |
|||
top: 0; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 32rpx; |
|||
line-height: 90rpx; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.title-header .icon-fanhui1 { |
|||
padding: 0 20rpx; |
|||
font-size: 44rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.right { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
} |
|||
|
|||
.search-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 60rpx; |
|||
width: 560rpx; |
|||
border-radius: 30rpx; |
|||
height: 60rpx; |
|||
padding: 0 20rpx; |
|||
font-size: 26rpx; |
|||
background: #F0F0F0; |
|||
} |
|||
|
|||
.bg-box .search-box { |
|||
background: #F0F0F0; |
|||
} |
|||
|
|||
.search-box .weui-input { |
|||
margin-left: 10rpx; |
|||
flex: 1; |
|||
width: 100%; |
|||
} |
|||
|
|||
.bg-box.title-box .icon-fanhui1 { |
|||
color: white; |
|||
} |
|||
|
|||
.phcolor { |
|||
color: #ccc; |
|||
} |
|||
|
|||
.hot-list { |
|||
padding: 26.67rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
padding-bottom: 170rpx; |
|||
} |
|||
|
|||
.hot-item { |
|||
margin-bottom: 20rpx; |
|||
width: 337rpx; |
|||
height: 513rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(153, 153, 153, 0.33); |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.hot-item-img { |
|||
width: 337rpx; |
|||
height: 337rpx; |
|||
background: #0B898E; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.hot-item-title { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
/* margin-bottom: 25.33rpx; */ |
|||
} |
|||
|
|||
.hot-item-price { |
|||
font-family: Arial; |
|||
font-weight: bold; |
|||
font-size: 33rpx; |
|||
color: #D70000; |
|||
margin-right: 12.67rpx; |
|||
} |
|||
|
|||
.hot-item-price::before { |
|||
content: "￥"; |
|||
font-weight: 400; |
|||
font-size: 23rpx; |
|||
} |
|||
|
|||
.hot-item-market_price { |
|||
font-family: Arial; |
|||
font-weight: 400; |
|||
font-size: 21rpx; |
|||
color: #999999; |
|||
text-decoration-line: line-through; |
|||
} |
|||
|
|||
.hot-item-main { |
|||
padding: 20rpx 19rpx 26.67rpx 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
min-height: 140rpx; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.hot-list-item:nth-child(2) .hot-item:first-child { |
|||
width: 337rpx; |
|||
height: 373rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(153, 153, 153, 0.33); |
|||
border-radius: 13rpx; |
|||
padding-bottom: 20rpx; |
|||
} |
|||
|
|||
.hot-list-item:nth-child(2) .hot-item:first-child .hot-item-img { |
|||
width: 337rpx; |
|||
height: 238rpx; |
|||
background: #71B580; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.hot-list-item:nth-child(2) .hot-item:first-child .main { |
|||
width: 337rpx; |
|||
height: 238rpx; |
|||
background: #71B580; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.hot-list-item:nth-child(2) .hot-item:first-child .hot-item-main { |
|||
padding: 5rpx 19rpx 26.67rpx 15rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
min-height: 90rpx; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.hot-list-item:nth-child(2) .hot-item:first-child .hot-item-main .hot-item-title { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.hot-list-item { |
|||
width: 337rpx; |
|||
} |
|||
|
|||
.add { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: #0B898E; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.bottom { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 167rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 2rpx 13rpx 0rpx rgba(136, 136, 136, 0.25); |
|||
padding: 0 27.33rpx 0 26.67rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
z-index: 666; |
|||
} |
|||
|
|||
.gwc { |
|||
margin-right: 14rpx; |
|||
width: 84rpx; |
|||
height: 84rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.cartCount { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: #D90F01; |
|||
border-radius: 50%; |
|||
border: 1rpx solid #FFFFFF; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
position: absolute; |
|||
right: -10rpx; |
|||
top: -10rpx; |
|||
} |
|||
|
|||
.gwc-left { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.money { |
|||
font-weight: bold; |
|||
font-size: 47rpx; |
|||
color: #D70000; |
|||
} |
|||
|
|||
.money::before { |
|||
content: "￥"; |
|||
font-size: 23rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.buy { |
|||
width: 240rpx; |
|||
height: 83rpx; |
|||
background: #D70000; |
|||
border-radius: 42rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 83rpx; |
|||
} |
|||
|
|||
.no-buy { |
|||
width: 240rpx; |
|||
height: 83rpx; |
|||
background: #BDBDBD; |
|||
border-radius: 42rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 83rpx; |
|||
} |
|||
|
|||
.mask-content { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
.mask-content .icon-close { |
|||
position: absolute; |
|||
right: 40rpx; |
|||
top: 40rpx; |
|||
} |
|||
.sku-info-box { |
|||
margin: 50rpx 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.sku-info-box image { |
|||
width: 218rpx; |
|||
height: 180rpx; |
|||
border-radius: 13rpx; |
|||
display: block; |
|||
margin-right: 40rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.sku-info { |
|||
flex: 1; |
|||
} |
|||
.sku-price { |
|||
font-size: 40rpx; |
|||
font-weight: 500; |
|||
color: #D62828; |
|||
margin: 20rpx 0; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
.sku-price::before { |
|||
content: "￥"; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
vertical-align: baseline; |
|||
} |
|||
.sku-price view { |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
background-color: #D62828; |
|||
border-radius: 22rpx; |
|||
line-height: 44rpx; |
|||
margin-left: 7rpx; |
|||
padding: 0 20rpx; |
|||
} |
|||
.sku-name { |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
} |
|||
.sku-names { |
|||
display: flex; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
margin: 0 40rpx; |
|||
text-align: center; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.sku-name-item { |
|||
background: #EFEFEF; |
|||
border: 1rpx solid #EFEFEF; |
|||
width: 318rpx; |
|||
line-height: 77rpx; |
|||
border-radius: 14rpx; |
|||
margin-bottom: 25rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
.sku-name-item:nth-child(2n) { |
|||
margin-right: 0; |
|||
} |
|||
.sku-name-item.active { |
|||
color: #0B898E; |
|||
border-color: #0B898E; |
|||
background: rgba(11, 137, 142, 0.1); |
|||
} |
|||
.number-box { |
|||
display: flex; |
|||
align-items: center; |
|||
border-top: 1rpx solid #ccc; |
|||
justify-content: space-between; |
|||
margin: 0 40rpx; |
|||
padding: 40rpx 0; |
|||
} |
|||
.number-box text { |
|||
flex: 1; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
} |
|||
.number-box view { |
|||
border: 1rpx solid #666; |
|||
border-radius: 7rpx; |
|||
text-align: center; |
|||
width: 67rpx; |
|||
line-height: 67rpx; |
|||
font-size: 33rpx; |
|||
color: #000; |
|||
} |
|||
.number-box view.disable { |
|||
border-color: #ccc; |
|||
color: #999; |
|||
} |
|||
.number-box view.number { |
|||
width: 94rpx; |
|||
margin: 0 15rpx; |
|||
} |
|||
.btn-box { |
|||
height: 138rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
.mask-btn { |
|||
width: 670rpx; |
|||
line-height: 78rpx; |
|||
background: #D62828; |
|||
border-radius: 39rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
font-size: 33rpx; |
|||
font-weight: 500; |
|||
} |
|||
.mask-btn.disable { |
|||
background: #ccc; |
|||
} |
|||
|
|||
.flex { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.all { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 37rpx; |
|||
color: #000000; |
|||
margin-left: 26rpx; |
|||
} |
|||
|
|||
.del-all { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #999999; |
|||
margin-left: 7.33rpx; |
|||
} |
|||
|
|||
.gwc-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 48rpx; |
|||
} |
|||
|
|||
.main { |
|||
height: 179rpx; |
|||
padding: 8.67rpx 0 6.67rpx; |
|||
width: 425rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.main .title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #2C2C2C; |
|||
margin-bottom: 18rpx; |
|||
} |
|||
.main .sku-title { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.main-bottom { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.num-box { |
|||
display: flex; |
|||
} |
|||
|
|||
.reduce, .grow { |
|||
width: 49rpx; |
|||
height: 49rpx; |
|||
} |
|||
|
|||
.main-bottom .price { |
|||
font-family: PingFangSC; |
|||
font-size: 35rpx; |
|||
color: #F84A56; |
|||
} |
|||
.main-bottom .price::before { |
|||
content: "￥"; |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
} |
|||
Loading…
Reference in new issue