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