shaojing
2 years ago
24 changed files with 4121 additions and 199 deletions
@ -0,0 +1,657 @@ |
|||
// pages/list/store/index.js
|
|||
// import commonApi from "../../../utils/https/common"
|
|||
// import util from "../../../utils/util"
|
|||
import commonApi from "../../utils/https/common" |
|||
import util from "../../utils/util" |
|||
let app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
list:[], //获取的产品列表
|
|||
total:1, //总数
|
|||
keywords:"", //搜索关键字
|
|||
navIndex:0, //一级分类选中下标
|
|||
navList:['列表样式','宫格样式'], |
|||
flag:true, //切换样式，true按分类，false按店铺展示
|
|||
typeList:[], //左侧的二级分类
|
|||
typeIndex:0, //二级分类选中下标
|
|||
id:'1', |
|||
cartCount:0, |
|||
skuFlag:null, //规格弹窗
|
|||
info: null, //规格信息
|
|||
skuIndex: 0, //默认选中第一个规格
|
|||
producNum: 1, |
|||
showPopup:false, //购物车的弹窗
|
|||
gwcList:[], //gwc里的产品数据
|
|||
allSelectedBtn:false, //全选按钮
|
|||
seachFlag:false, //搜索模式
|
|||
totalPrice:0, //获取购物车总价
|
|||
name:'非遗专卖' |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
wx.showShareMenu({ |
|||
withShareTicket: true, |
|||
menus: ['shareAppMessage', 'shareTimeline'] |
|||
}) |
|||
this.getCount() |
|||
this.getType() |
|||
}, |
|||
// 清空
|
|||
delAll() { |
|||
let ids = [] |
|||
this.data.gwcList.forEach(item => { |
|||
ids.push(item.sku_id) |
|||
}) |
|||
commonApi.user_post("cart_within/del_sku", { |
|||
sku_id: ids+'', |
|||
type:'2' |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
wx.showToast({ |
|||
title: '清空成功', |
|||
icon: "success" |
|||
}) |
|||
this.setData({ |
|||
allSelectedBtn:false |
|||
}) |
|||
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:'2' |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
// this.getCount()
|
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:'2' |
|||
}).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 |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 添加产品到购物车
|
|||
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:"2" |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:'2' |
|||
}).then(res => { |
|||
let cartCount = 0,totalPrice = 0,gwcList=this.data.gwcList |
|||
res.data.forEach(val=> { |
|||
cartCount+=val.num |
|||
console.log(this.data.skuFlag); |
|||
// debugger
|
|||
if (!this.data.skuFlag && !this.data.showPopup) { |
|||
// debugger
|
|||
if (val.sku.id == this.data.info.sku[this.data.skuIndex].id) { |
|||
val.selected = 1 |
|||
} |
|||
}else { |
|||
// debugger
|
|||
gwcList.forEach(el=> { |
|||
if (el.id == val.id) { |
|||
val.selected = el.selected |
|||
} |
|||
}) |
|||
} |
|||
// if (this.data.showPopup) {
|
|||
// totalPrice += Number(val.num*val.sku.price)
|
|||
// 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) |
|||
} |
|||
}) |
|||
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, |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 全选
|
|||
allSelected() { |
|||
let gwcList = this.data.gwcList |
|||
let totalPrice = 0 |
|||
if (this.data.allSelectedBtn) { |
|||
gwcList.forEach(item=> { |
|||
item.selected =0 |
|||
}) |
|||
} else { |
|||
gwcList.forEach(item=> { |
|||
item.selected =1 |
|||
}) |
|||
gwcList.forEach(item=> { |
|||
totalPrice += Number(item.num*item.sku.price) |
|||
}) |
|||
} |
|||
this.setData({ |
|||
gwcList, |
|||
allSelectedBtn:!this.data.allSelectedBtn, |
|||
totalPrice |
|||
}) |
|||
}, |
|||
// 单选一个
|
|||
selectedIt(e) { |
|||
let item = e.currentTarget.dataset.item,gwcList= this.data.gwcList,totalPrice=0 |
|||
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) |
|||
} |
|||
}) |
|||
let status = gwcList.every(el => el.selected === 1) |
|||
this.setData({ |
|||
gwcList, |
|||
allSelectedBtn:status?true:false, |
|||
totalPrice |
|||
}) |
|||
}, |
|||
// 左侧购物车打开弹窗
|
|||
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, |
|||
}) |
|||
}, |
|||
// 获取商户标签列表
|
|||
getSupplierTag() { |
|||
let list = this.data.list; |
|||
if(list.length>=this.data.total) return; |
|||
commonApi.user_post('supplier/get_supplier_by_title_tag_id', { |
|||
tag_id:5, //标签的ID
|
|||
offset:list.length, //起始查询
|
|||
limit:10, //查询数量
|
|||
title: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), |
|||
total:res.data.total |
|||
}) |
|||
}) |
|||
}, |
|||
// 获取左侧二级分类
|
|||
getType() { |
|||
commonApi._post("product/tag_list",{ |
|||
pid:5, //父标签的ID
|
|||
}).then(res=>{ |
|||
this.setData({ |
|||
typeList:res.data |
|||
}) |
|||
this.getList() |
|||
}) |
|||
}, |
|||
// 获取历史购物车详情
|
|||
getCount() { |
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:'2' |
|||
}).then(res => { |
|||
let arr = res.data,cartCount=0 |
|||
// let arr = res.data,totalPrice = 0,cartCount=0
|
|||
if (arr.length>0) { |
|||
arr.forEach(item=> { |
|||
// totalPrice += item.num*item.sku.price
|
|||
cartCount += item.num |
|||
}) |
|||
} |
|||
// console.log(totalPrice);
|
|||
this.setData({ |
|||
cartCount: cartCount, //1
|
|||
gwcList:res.data, |
|||
// totalPrice,
|
|||
allSelectedBtn:false |
|||
}) |
|||
}) |
|||
}, |
|||
// 重置
|
|||
onReload() { |
|||
this.setData({ |
|||
list:[], |
|||
total:1, |
|||
navIndex:0, |
|||
typeIndex:0, |
|||
flag:true, |
|||
seachFlag:false |
|||
}) |
|||
this.getList() |
|||
}, |
|||
// 搜索
|
|||
search:function(e){ |
|||
if (e.detail.keywords == '') { |
|||
this.setData({ |
|||
seachFlag:false, |
|||
keywords:'', |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.onReload() |
|||
}else { |
|||
this.setData({ |
|||
seachFlag:true, |
|||
keywords:e.detail.keywords, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.getList(); |
|||
} |
|||
}, |
|||
// 去产品详情页
|
|||
goodsDetail(e){ |
|||
wx.navigateTo({ |
|||
url: '/pages/info/postProductInfo/index?id='+e.currentTarget.dataset.goods.id, |
|||
}) |
|||
}, |
|||
// 去店铺
|
|||
goShop(e){ |
|||
let id = e.currentTarget.dataset.id; |
|||
util.pagePoint({ |
|||
event: 'legacy_shop', |
|||
param:{ |
|||
id:id |
|||
}, |
|||
type:'supplier' |
|||
},1) |
|||
wx.navigateTo({ |
|||
url: '/pages/list/store/index?id='+id, |
|||
}) |
|||
}, |
|||
gotoProduct:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
util.gotoDetail(item) |
|||
}, |
|||
// 切换样式
|
|||
changeStyle() { |
|||
this.setData({ |
|||
navIndex:this.data.navIndex == 0? 1: 0, |
|||
flag:!this.data.flag, |
|||
total:1, |
|||
list:[], |
|||
typeIndex:0 |
|||
}) |
|||
if (this.data.flag) { |
|||
this.getType() |
|||
}else { |
|||
this.getSupplierTag() |
|||
} |
|||
}, |
|||
// 切换一级分类
|
|||
changeNav:function(e){ |
|||
let index = e.currentTarget.dataset.index,navList=this.data.navList; |
|||
this.setData({ |
|||
navIndex:index, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
if (this.data.navIndex == 0) { |
|||
this.getType() |
|||
} else { |
|||
this.getSupplierTag() |
|||
} |
|||
}, |
|||
// 切换左侧二级分类
|
|||
changeType(e) { |
|||
let index = e.currentTarget.dataset.index,typeList=this.data.typeList; |
|||
this.setData({ |
|||
typeIndex:index, |
|||
type:typeList[index].id, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.getList() |
|||
}, |
|||
// 获取产品列表
|
|||
getList:function(){ |
|||
let list = this.data.list; |
|||
if(list.length>=this.data.total) return; |
|||
commonApi._post("product/get_product_by_tag",{ |
|||
tag_id:this.data.seachFlag? '5':this.data.typeList[this.data.typeIndex].id, //标签的ID
|
|||
offset:list.length, //起始查询
|
|||
limit: 10, //查询数量
|
|||
title: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), |
|||
total:res.data.total |
|||
}) |
|||
console.log(this.data.list); |
|||
}) |
|||
// commonApi._post("supplier/get_supplier_by_tag_id",{
|
|||
// tag_id:this.data.flag ? this.data.navList[this.data.navIndex].type :this.data.navList2[this.data.navIndex].type,
|
|||
// limit:10,
|
|||
// offset:list.length,
|
|||
// sort:"weight",
|
|||
// title: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),
|
|||
// total:res.data.total
|
|||
// })
|
|||
// })
|
|||
}, |
|||
// 添加产品弹窗 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: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
this.onReload() |
|||
// this.setData({
|
|||
// list:[],
|
|||
// total:1,
|
|||
// navIndex:0,
|
|||
// typeIndex:0,
|
|||
// flag:true
|
|||
// })
|
|||
// this.getList()
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
if (this.data.flag) { |
|||
this.getList() |
|||
} else { |
|||
this.getSupplierTag() |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
}, |
|||
onShareTimeline: function() { |
|||
return { |
|||
title: '君到苏州-文创特产', |
|||
query: '', |
|||
imageUrl: 'https://static.ticket.sz-trip.com/xcxImages/index/icon5New.png' |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader", |
|||
"common-image":"/pages/component/commonImage/index", |
|||
"search":"/pages/component/SearchHeader" |
|||
} |
|||
} |
|||
@ -0,0 +1,232 @@ |
|||
<!--pages/feiyi/list/index.wxml--> |
|||
<!-- 非遗专卖页面 --> |
|||
<view class="fiyi-main" > |
|||
<view style="{{seachFlag?'':'height: 500rpx;'}}"> |
|||
<search bind:onload="search" name="{{name}}"></search> |
|||
<image wx:if="{{!seachFlag}}" class="heaimg" src="https://static.ticket.sz-trip.com/uploads/20240715/590b8c17b06ccadd09f43ee9260d2a36.png" mode="widthFix"></image> |
|||
</view> |
|||
<view wx:if="{{!seachFlag}}" class="feiyi-centent"> |
|||
<!-- <view class="type-box"> |
|||
<view style="display: flex;"> |
|||
<view wx:for="{{flag?navList:navList2}}" wx:key="*this" bindtap="changeNav" data-index="{{index}}" class="{{index == navIndex ? 'seld-nav':'nav'}}">{{item.title}}</view> |
|||
</view> |
|||
<image bindtap="changeStyle" class="changeStyle" src="https://static.ticket.sz-trip.com/uploads/20240710/62bb38d5f88754e57447a26b14176aa2.png" mode="" /> |
|||
</view> --> |
|||
<!-- 产品部分 --> |
|||
<view wx:if="{{navIndex == 0}}" style="height: 100%; overflow: hidden;"> |
|||
<view style="display: flex;height: 100%; overflow: hidden;"> |
|||
<!-- 左侧二级分类 --> |
|||
<view class="left"> |
|||
<scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
<view wx:for="{{typeList}}" wx:key="*this" class="{{index == typeIndex ? 'seld-type':'type-two-box'}}" bindtap="changeType" data-index="{{index}}"> |
|||
<view class="line" wx:if="{{index == typeIndex}}"></view> |
|||
<view> |
|||
{{item.name}} |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<!-- 右侧产品列表 --> |
|||
<view style="display：flex"> |
|||
<view style="width: 550rpx;display: flex;justify-content: flex-end;margin: 21rpx 24rpx 20rpx 0;"> |
|||
<view class="nav-box"> |
|||
<view class="{{navIndex == index ? 'styleBtn-seld' : 'styleBtn'}}" wx:for="{{navList}}" data-index="{{index}}" bindtap="changeNav"> |
|||
<image wx:if="{{navIndex == index}}" class="style-icon" style="width:29rpx;height:29rpx;" src="https://static.ticket.sz-trip.com/uploads/20240715/1cb81757944dd8523f3786195969266c.png" mode="" /> |
|||
<image wx:else class="style-icon" style="width:29rpx;height:29rpx;" src="https://static.ticket.sz-trip.com/uploads/20240710/62bb38d5f88754e57447a26b14176aa2.png" mode="" /> |
|||
<text>{{item}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list" style="width: 100%;flex：1; overflow: hidden;"> |
|||
<scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
<view class="item" wx:for="{{list}}" wx:key="*this" bindtap="goodsDetail" data-goods="{{item}}"> |
|||
<image class="img" src="{{item.headimg}}" mode="" /> |
|||
<view class="content"> |
|||
<view class="title"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="item-bottom"> |
|||
<view class="price"> |
|||
<text class="current-price">{{item.price/100}}</text> |
|||
<text class="original-price">¥{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="add" catchtap="addBuyCart" data-item="{{item}}">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 店铺展示 --> |
|||
<view wx:else style="padding: 0 26.67rpx; display: flex; flex-direction: column; overflow: hidden;"> |
|||
<view style="width: 700rpx;display: flex;justify-content: flex-end;margin: 21rpx 24rpx 20rpx 0;"> |
|||
<view class="nav-box"> |
|||
<view class="{{navIndex == index ? 'styleBtn-seld' : 'styleBtn'}}" wx:for="{{navList}}" data-index="{{index}}" bindtap="changeNav"> |
|||
<image wx:if="{{navIndex == index}}" class="style-icon" style="width:29rpx;height:29rpx;" src="https://static.ticket.sz-trip.com/uploads/20240715/1cb81757944dd8523f3786195969266c.png" mode="" /> |
|||
<image wx:else class="style-icon" style="width:29rpx;height:29rpx;" src="https://static.ticket.sz-trip.com/uploads/20240710/62bb38d5f88754e57447a26b14176aa2.png" mode="" /> |
|||
<text>{{item}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="flex:1; overflow: hidden;"> |
|||
<scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="getSupplierTag" bindscroll="scroll"> |
|||
<view wx:for="{{list}}" class="list1" wx:key="*this"> |
|||
<view class="top-info" bindtap="goShop" data-id="{{item.id}}"> |
|||
<common-image mode="aspectFill" src="{{item.headimg}}" style="border-radius: 13rpx;"></common-image> |
|||
<view class="supplier-info"> |
|||
<view class="supplier-name textOver">{{item.shop_name}}</view> |
|||
<view class="mid-box"> |
|||
<view class="supplier-tags"> |
|||
<view class="supplier-tag textOver" wx:for="{{item.display_tags}}">{{item}}</view> |
|||
</view> |
|||
<view class="supplier-price"><text>￥</text><text>{{(item.start_price/100)}}</text><text>起</text></view> |
|||
</view> |
|||
<view class="bottom-box"> |
|||
<view class="supplier-address supplier-tags"><text class="iconfont icon-location"></text><text style="max-width: 300rpx;" class="textOver">{{item.address}}</text></view> |
|||
<view class="btn"> |
|||
进店看看 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="product-list"> |
|||
<view data-item="{{item}}" bindtap="goodsDetail" data-goods="{{item}}" class="product-item" wx:for="{{item.product}}" wx:key="*this"> |
|||
<image src="{{item.headimg}}" mode="aspectFill"></image> |
|||
<view class="product-title textOver2">{{item.title}}</view> |
|||
<view class="supplier-price"><text>￥</text><text style="font-size:32rpx">{{(item.price/100)}}</text><text class="market_price" wx:if="{{item.market_price && item.market_price!=0 && item.market_price>item.price}}">{{item.market_price/100}}</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 搜索到的产品列表 --> |
|||
<view wx:if="{{seachFlag}}" style="overflow-y: scroll;margin-top: -650rpx;padding-bottom: 50rpx;"> |
|||
<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:for="{{list}}" wx:if="{{index%2==number}}" 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">{{item.market_price/100}}</text> |
|||
</view> |
|||
<image class="add" bindtap="addBuyCart" data-item="{{item}}" src="https://static.ticket.sz-trip.com/uploads/20240715/3ad59eac0088d47ff4bc2fec6ffd8f56.png" mode="" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view wx:if="{{list.length==0}}" style="display: flex;flex-direction: column;align-items: center;position: absolute;left: 211rpx;top: 286.67rpx;"> |
|||
<image style="width:328rpx;height:450.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 style="width:100%;height:167rpx;" wx:if="{{navIndex == 0}}"> |
|||
</view> |
|||
<view class="bottom" wx:if="{{(navIndex == 0 &&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 style="margin-left: 16.67rpx;font-family: PingFang SC;font-weight: 500;font-size: 27rpx;color: #0B898E;" bindtap="openPopup"> |
|||
<text>明细</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="{{cartCount == 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}}" wx:key="*this">{{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: 43rpx;height: 43rpx;" 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: 40rpx;height: 40rpx;" 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">{{item.product.title}}</view> |
|||
<view class="sku-title">{{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,721 @@ |
|||
/* pages/feiyi/list/index.wxss */ |
|||
.heaimg { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
.fiyi-main{ |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow:hidden; |
|||
} |
|||
page { |
|||
/* background: #FFD99E; */ |
|||
/* padding-bottom: 170rpx; */ |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow:hidden; |
|||
} |
|||
.changeStyle { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
.type-box { |
|||
padding: 33.33rpx 26.67rpx 26.67rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.nav { |
|||
width: 145rpx; |
|||
height: 53rpx; |
|||
border-radius: 8rpx; |
|||
border: 1px solid #0B898E; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #0B898E; |
|||
text-align: center; |
|||
line-height: 53rpx; |
|||
margin-right: 12.67rpx; |
|||
} |
|||
.seld-nav { |
|||
width: 145rpx; |
|||
height: 57rpx; |
|||
background: #0B898E; |
|||
border-radius: 8rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 57rpx; |
|||
margin-right: 12.67rpx; |
|||
} |
|||
.feiyi-centent { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
} |
|||
.left { |
|||
width: 200rpx; |
|||
/* min-height: 100vh; */ |
|||
/* min-height: 950rpx; */ |
|||
background-color: #F3F3F3; |
|||
} |
|||
.type-two-box { |
|||
width: 200rpx; |
|||
height: 107rpx; |
|||
text-align: center; |
|||
line-height: 107rpx; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
} |
|||
.seld-type { |
|||
background: #fff; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
text-align: center; |
|||
line-height: 107rpx; |
|||
position: relative; |
|||
} |
|||
.line { |
|||
width: 7rpx; |
|||
height: 53rpx; |
|||
background: #0B898E; |
|||
position: absolute; |
|||
top: 26.67rpx; |
|||
left: 0; |
|||
} |
|||
.item { |
|||
padding: 0 26.67rpx; |
|||
display: flex; |
|||
margin-bottom: 26.67rpx; |
|||
} |
|||
.img { |
|||
width: 161rpx; |
|||
height: 161rpx; |
|||
background: #999999; |
|||
border-radius: 11rpx; |
|||
flex-shrink: 0; |
|||
margin-right: 14.67rpx; |
|||
} |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
} |
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
} |
|||
.item-bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.current-price { |
|||
font-weight: bold; |
|||
font-size: 33rpx; |
|||
color: #D70000; |
|||
margin-right: 13.33rpx; |
|||
} |
|||
.current-price::before { |
|||
content: "￥"; |
|||
font-size: 23rpx; |
|||
font-weight: 500; |
|||
} |
|||
.original-price { |
|||
font-weight: 400; |
|||
font-size: 21rpx; |
|||
color: #999999; |
|||
text-decoration-line: line-through; |
|||
} |
|||
.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; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/* .classimg { |
|||
margin-left: 13rpx; |
|||
width: 710rpx; |
|||
display: block; |
|||
} */ |
|||
/* .type-text { |
|||
position: absolute; |
|||
left: 130rpx; |
|||
padding: 30rpx 30rpx; |
|||
bottom: 0; |
|||
line-height: 60rpx; |
|||
font-size: 40rpx; |
|||
font-weight: bold; |
|||
z-index: 1; |
|||
color: #FFE1A2; |
|||
width: 120rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} */ |
|||
/* .item { |
|||
background: url(https://static.ticket.sz-trip.com/xcxImages/techan/bg.png); |
|||
background-size: 100% 100%; |
|||
width: 694rpx; |
|||
height: 571rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 15rpx; |
|||
color: #704436; |
|||
box-sizing: border-box; |
|||
|
|||
} */ |
|||
.list1 { |
|||
background-color: #FAF6F0; |
|||
border-radius: 13rpx; |
|||
margin-bottom: 30rpx; |
|||
padding: 20rpx 0 28rpx 20rpx; |
|||
} |
|||
.top-info { |
|||
display: flex; |
|||
/* padding: 30rpx; */ |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.top-info image { |
|||
width: 136rpx; |
|||
height: 136rpx; |
|||
display: block; |
|||
flex-shrink: 0; |
|||
margin-right: 12rpx; |
|||
} |
|||
.supplier-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 136rpx; |
|||
justify-content:space-between; |
|||
flex: 1; |
|||
margin-right: 20.67rpx; |
|||
/* width: 300rpx; */ |
|||
} |
|||
.supplier-name { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
} |
|||
.supplier-tags { |
|||
display: flex; |
|||
} |
|||
.supplier-tag { |
|||
padding: 0 20rpx; |
|||
font-size: 22rpx; |
|||
border: 1rpx solid #877350; |
|||
border-radius: 15rpx; |
|||
line-height: 28rpx; |
|||
margin-right: 20rpx; |
|||
color: #877350; |
|||
} |
|||
.supplier-address { |
|||
font-size: 20rpx; |
|||
margin-top: 10rpx; |
|||
color: #877350; |
|||
font-weight: 500; |
|||
font-size: 23rpx; |
|||
} |
|||
.supplier-address .iconfont { |
|||
margin-right: 8rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
.supplier-price { |
|||
color: #CC3320; |
|||
font-size: 20rpx; |
|||
} |
|||
.supplier-price text:nth-child(2){ |
|||
font-size: 40rpx; |
|||
font-weight: bold; |
|||
} |
|||
.product-list { |
|||
display: flex; |
|||
/* margin: 0 20rpx 0 30rpx; */ |
|||
overflow-x:scroll ; |
|||
box-sizing: border-box; |
|||
/* padding-right:30rpx ; */ |
|||
} |
|||
.product-list::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
.product-item { |
|||
width: 212rpx; |
|||
font-size: 28rpx; |
|||
margin-right: 19rpx; |
|||
} |
|||
.product-item:nth-child(3){ |
|||
} |
|||
.product-item image { |
|||
width: 212rpx; |
|||
height: 209rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
.market_price { |
|||
color: #999999; |
|||
font-weight: 400; |
|||
font-size: 20rpx; |
|||
margin-left: 10rpx; |
|||
text-decoration: line-through; |
|||
} |
|||
.mid-box{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding-right: 10rpx; |
|||
} |
|||
.bottom-box{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.btn{ |
|||
flex-shrink: 0; |
|||
background: #C6937F; |
|||
border-radius: 24rpx; |
|||
width: 147rpx; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
text-align: center; |
|||
font-size: 25rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.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; |
|||
} |
|||
|
|||
.hot-list { |
|||
padding: 26.67rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
.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; |
|||
} |
|||
|
|||
.nav-box { |
|||
width: 377rpx; |
|||
height: 53rpx; |
|||
background: #E5F3F3; |
|||
border-radius: 13rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
.styleBtn-seld { |
|||
width: 187rpx; |
|||
height: 48rpx; |
|||
background: #0B898E; |
|||
border-radius: 11rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #E5F3F3; |
|||
justify-content: center; |
|||
} |
|||
.style-icon { |
|||
width:29rpx; |
|||
height:29rpx; |
|||
flex-shrink: 0; |
|||
margin-right: 12.67rpx; |
|||
} |
|||
.styleBtn { |
|||
width: 187rpx; |
|||
height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #0B898E; |
|||
justify-content: center; |
|||
} |
|||
.hot-list-item { |
|||
width: 337rpx; |
|||
} |
|||
@ -0,0 +1,404 @@ |
|||
// pages/user/cartlist/list.js
|
|||
const device = wx.getSystemInfoSync(), |
|||
rect = wx.getMenuButtonBoundingClientRect(); // 获取设备信息
|
|||
const ratio = 750 / device.windowWidth; |
|||
console.log(rect) |
|||
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
|
|||
let height = device.windowHeight; |
|||
import commonApi from "../../utils/https/common" |
|||
import util from '../../utils/util' |
|||
let app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
menuWidth: width - rect.right + rect.width + 6, |
|||
list: [], |
|||
allChecked: false, |
|||
allPrice: 0, |
|||
productType: '', |
|||
manageFlag: false, |
|||
flag: false, //判断订单是否同时有商品和票
|
|||
isCar: 'single', //判断是否购物车
|
|||
showQrCode: false, |
|||
wxqrcode: null, |
|||
showModel:false |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
wx.removeStorageSync('linkMan') |
|||
this.getList(); |
|||
}, |
|||
manage: function () { |
|||
let list = this.data.list; |
|||
list.map(item => { |
|||
item.checked = 0; |
|||
}) |
|||
this.setData({ |
|||
manageFlag: !this.data.manageFlag, |
|||
allChecked: 0, |
|||
list: list, |
|||
allPrice: 0 |
|||
}) |
|||
}, |
|||
gotoDetail: function (e) { |
|||
console.log(e) |
|||
let item = e.currentTarget.dataset.item.product; |
|||
util.gotoDetail(item, 1); |
|||
}, |
|||
getList: function () { |
|||
commonApi.user_post("cart/get_list", { |
|||
// type: '1'
|
|||
}).then(res => { |
|||
this.setData({ |
|||
list: res.data |
|||
}) |
|||
}) |
|||
}, |
|||
minus: function (e) { |
|||
let index = e.currentTarget.dataset.index, |
|||
list = this.data.list; |
|||
let num = list[index].num; |
|||
if (num <= 1) return; |
|||
num = num - 1; |
|||
list[index].num = num; |
|||
this.setData({ |
|||
list: list |
|||
}) |
|||
this.changeNumber(list[index]) |
|||
this.updatePrice() |
|||
}, |
|||
add: function (e) { |
|||
let index = e.currentTarget.dataset.index, |
|||
list = this.data.list; |
|||
let num = list[index].num + 1; |
|||
list[index].num = num; |
|||
this.setData({ |
|||
list: list |
|||
}) |
|||
this.changeNumber(list[index]) |
|||
this.updatePrice() |
|||
}, |
|||
select: function (e) { |
|||
let index = e.currentTarget.dataset.index, |
|||
list = this.data.list; |
|||
if (list[index].product.flag != 1 || list[index].sku.flag != 'on') { |
|||
if (!this.data.manageFlag) { |
|||
wx.showToast({ |
|||
title: '产品已下架', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
} |
|||
list[index].checked = list[index].checked ? false : true; |
|||
this.setData({ |
|||
list: list |
|||
}) |
|||
let flag = true |
|||
list.forEach(item => { |
|||
if (!item.checked) { |
|||
flag = false |
|||
return |
|||
} |
|||
}); |
|||
this.setData({ |
|||
allChecked: flag |
|||
}) |
|||
this.updatePrice() |
|||
}, |
|||
selectAll: function () { |
|||
let list = this.data.list, |
|||
allChecked = this.data.allChecked ? false : true; |
|||
list.map(item => { |
|||
if (item.sku.flag == 'on' && item.product.flag == 1) { |
|||
item.checked = allChecked; |
|||
} |
|||
}) |
|||
this.setData({ |
|||
allChecked: allChecked, |
|||
list: list |
|||
}) |
|||
this.updatePrice() |
|||
}, |
|||
changeNumber(item) { |
|||
commonApi.user_post("cart/update_sku", { |
|||
sku_id: item.sku.id, |
|||
num: item.num |
|||
}).then(res => { }) |
|||
}, |
|||
updatePrice: function () { |
|||
let list = this.data.list, |
|||
price = 0; |
|||
list.map(item => { |
|||
if (item.checked) { |
|||
price = price + item.sku.price * item.num; |
|||
} |
|||
}) |
|||
this.setData({ |
|||
allPrice: price |
|||
}) |
|||
}, |
|||
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.list, |
|||
price = 0, |
|||
product = [], |
|||
product1 = [] |
|||
list.map(item => { |
|||
if (item.checked) { |
|||
// 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] |
|||
} |
|||
if (this.data.productType == 'post') { |
|||
console.log(this.data.flag); |
|||
wx.navigateTo({ |
|||
url: '/pages/order/postOrder/index?from=cart&flag=' + this.data.flag, |
|||
}) |
|||
} else { |
|||
wx.navigateTo({ |
|||
url: '/pages/order/scene/index?isCar=' + this.data.isCar, |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
checkOrder(){ |
|||
console.log(this.data.list); |
|||
let list = this.data.list,product = [] |
|||
list.map(item => { |
|||
if (item.checked) { |
|||
product.push(item) |
|||
} |
|||
}) |
|||
if (product.length>1) { |
|||
this.setData({ |
|||
showModel:true |
|||
}) |
|||
}else{ |
|||
this.order() |
|||
} |
|||
}, |
|||
closeModel(){ |
|||
this.setData({ |
|||
showModel:false |
|||
}) |
|||
}, |
|||
touchStart(e) { //移动前点击的位置
|
|||
console.log(e) |
|||
// 在开始触摸时将所有startTouchMove设置为flase,对当前的为true
|
|||
this.data.list.forEach(cart => { |
|||
if (cart.isTouchMove) //当istouchMove为true
|
|||
cart.isTouchMove = false; //其它的对象都为false
|
|||
}) |
|||
this.setData({ |
|||
startX: e.changedTouches[0].clientX, |
|||
startY: e.changedTouches[0].clientY, |
|||
list: this.data.list |
|||
}) |
|||
}, |
|||
touchmove(e) { //移动的位置,用于计算用户滑动的弧度向左还是向右,移动了多少,可以确定删除功能的显示和隐藏
|
|||
let index = e.currentTarget.dataset.index; |
|||
// 获取开始的x,y坐标
|
|||
let startX = this.data.startX, |
|||
startY = this.data.startY; |
|||
// 获取移动的x,x坐标
|
|||
let touchMoveX = e.changedTouches[0].clientX, |
|||
touchMoveY = e.changedTouches[0].clientY; |
|||
// 调用计算角度的方法,获取角度
|
|||
var angel = this.angel({ |
|||
X: startX, |
|||
Y: startY |
|||
}, { |
|||
X: touchMoveX, |
|||
Y: touchMoveY |
|||
}) |
|||
// 遍历cartArray
|
|||
this.data.list.forEach((cart, i) => { |
|||
cart.isTouchMove = false; |
|||
// 滑动角度大于30,直接return 视为非滑动意思
|
|||
if (Math.abs(angel) > 30) return; |
|||
// 匹配当前所点击的list和滑动的list
|
|||
if (i == index) { |
|||
// 匹配上后判断滑动方向
|
|||
if (touchMoveX > startX) { //左滑动隐藏删除
|
|||
cart.isTouchMove = false; |
|||
} else { |
|||
cart.isTouchMove = true; |
|||
} |
|||
} |
|||
}) |
|||
// 更新数据
|
|||
this.setData({ |
|||
list: this.data.list |
|||
}) |
|||
}, |
|||
angel(start, end) { //计算滑动的角度
|
|||
// console.log(start,end)
|
|||
// 移动坐标减去对应的开始坐标
|
|||
var _X = end.X - start.X, |
|||
_Y = end.Y - start.Y; |
|||
// 返回角度 Math.atan() 返回数字的正切值
|
|||
return 360 * Math.atan(_Y / _X) / (2 * Math.PI) |
|||
}, |
|||
del: function (e) { |
|||
let index = e.currentTarget.dataset.index, |
|||
list = this.data.list; |
|||
commonApi.user_post("cart/del_sku", { |
|||
sku_id: list[index].sku_id |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
wx.showToast({ |
|||
title: '删除成功', |
|||
icon: "success" |
|||
}) |
|||
list.splice(index, 1); |
|||
this.setData({ |
|||
list: list |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
delM() { |
|||
let that = this |
|||
let arr = this.data.list |
|||
let suid = [] |
|||
arr.forEach(item => { |
|||
if (item.checked) { |
|||
suid.push(item.sku_id) |
|||
} |
|||
}); |
|||
let skuids = suid.join(',') |
|||
wx.showModal({ |
|||
title: '提示', |
|||
content: '确定要删除选定的产品？', |
|||
success: function (res) { |
|||
if (res.confirm) { |
|||
commonApi.user_post("cart/del_sku", { |
|||
sku_id: skuids |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
wx.showToast({ |
|||
title: '删除成功', |
|||
icon: "success" |
|||
}) |
|||
that.getList(); |
|||
} |
|||
}) |
|||
|
|||
} else { |
|||
console.log('取消') |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
util.pagePoint({ |
|||
event: 'cart_view' |
|||
}, 1) |
|||
app.globalData.list = null |
|||
app.globalData.createDate = null |
|||
app.globalData.index = 0 |
|||
app.globalData.productPrice = 0 |
|||
app.globalData.ticketPrice = 0 |
|||
this.data.productType = '' |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title": "/pages/component/TitleHeader", |
|||
"code":"../../pages/order/components/wxqrCode/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
<!--pages/user/cartlist/list.wxml--> |
|||
<title title="购物车"> |
|||
<view class="edit-btn" style="right:{{menuWidth}}px" wx:if="{{list.length>0}}" bindtap="manage">{{manageFlag?'关闭':'管理'}}</view> |
|||
</title> |
|||
<view wx:for="{{list}}" class="goods-item {{item.isTouchMove ? 'touch-move-active' : ''}}" bindtouchstart='touchStart' bindtouchmove='touchmove' data-index="{{index}}"> |
|||
<view class="item{{(item.product.flag!=1 || item.sku.flag!='on')?' disable':''}}"> |
|||
<view class="iconfont{{item.checked?' icon-gou':' icon-quan'}}" bindtap="select" data-index="{{index}}"></view> |
|||
<image src="{{item.sku.headimg}}" mode="aspectFill" bindtap="gotoDetail" data-item="{{item}}"></image> |
|||
<view class="item-info textOver"> |
|||
<view class="title textOver">{{item.product.title}}</view> |
|||
<view class="sku-title textOver"> |
|||
<view class="sku-name textOver">{{item.sku.sku_name}}</view> |
|||
<view class="sku-number">x{{item.num}}</view> |
|||
</view> |
|||
<view class="item-bottom" wx:if="{{item.product.flag==1 && item.sku.flag=='on'}}"> |
|||
<view class="price">{{item.sku.price/100}}</view> |
|||
<view class="iconfont icon-sami-select" bindtap="minus" data-index="{{index}}"></view> |
|||
<view class="number">{{item.num}}</view> |
|||
<view class="iconfont icon-add-select" bindtap="add" data-index="{{index}}"></view> |
|||
</view> |
|||
<view class="item-bottom" wx:else>已下架</view> |
|||
</view> |
|||
</view> |
|||
<view class='del' catchtap="del" data-index="{{index}}">删除</view> |
|||
</view> |
|||
<view wx:if="{{list.length==0}}" class="common-empty" style="z-index:-1"> |
|||
<image mode="widthFix" src="https://static.ticket.sz-trip.com/xcxImages/other/nodata.png"></image> |
|||
<view>暂无内容</view> |
|||
</view> |
|||
<view style="height:113rpx"></view> |
|||
<view class="fixed-bottom" wx:if="{{list.length>0&&manageFlag===false}}"> |
|||
<view bindtap="selectAll" class="iconfont{{allChecked?' icon-gou':' icon-quan'}}"><text style="color:#666;font-size:32rpx;flex-shrink:0;margin-left:10rpx;flex:1">全选</text></view> |
|||
<view class="tip"> <text style="color:#666;font-size:20rpx;flex-shrink:0;margin-left:10rpx;flex:1">不含运费</text> 合计：</view> |
|||
<view class="bottom-price">¥{{allPrice/100}} </view> |
|||
<!-- <view style="margin-right: 10rpx; font-size: 29rpx;color: #000;">起</view> --> |
|||
<view style="flex:1"></view> |
|||
<view class="btn" bindtap="checkOrder">去下单</view> |
|||
</view> |
|||
|
|||
<view class="fixed-bottom" wx:if="{{list.length>0&&manageFlag===true}}"> |
|||
<view class="iconfont{{allChecked?' icon-gou':' icon-quan'}}" bindtap="selectAll"></view> |
|||
<text style="color:#666;font-size:26rpx;flex-shrink:0;margin-left:10rpx;flex:1">全选</text> |
|||
<view class="fixed-btn del-btn" bindtap="delM">删除</view> |
|||
</view> |
|||
<code showModel="{{showQrCode}}" qrcode = "{{wxqrcode}}"> |
|||
</code> |
|||
<view class="mask" wx:if="{{showModel}}"> |
|||
<view class="model"> |
|||
<view class="model-title"> |
|||
购买须知 |
|||
</view> |
|||
<view class="model-content"> |
|||
<view>多产品订单一经购买</view> |
|||
<view style="color:rgba(196, 0, 0, 1);margin-top: 10rpx;">不支持部分退改</view> |
|||
</view> |
|||
<view class="btn-list"> |
|||
<view class="model-btn" bindtap="closeModel"> |
|||
取消 |
|||
</view> |
|||
<view class="model-btn" style="color:#0B898E;border-left:#D8D8D8 solid 1rpx;" bindtap="order"> |
|||
确定 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,242 @@ |
|||
/* pages/user/cartlist/list.wxss */ |
|||
.edit-btn { |
|||
font-size: 29rpx; |
|||
color: #000; |
|||
position: absolute; |
|||
} |
|||
page { |
|||
background: #f6f6f6; |
|||
} |
|||
.item { |
|||
display: flex; |
|||
padding: 40rpx 20rpx; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
transition: all 0.4s; |
|||
transform: translateX(180rpx); |
|||
margin-left: -180rpx; |
|||
flex-shrink: 0; |
|||
width: 660rpx; |
|||
} |
|||
.item.disable { |
|||
color: #999 !important; |
|||
opacity: 0.5; |
|||
} |
|||
.del { |
|||
background-color: #e4393c; |
|||
width: 180rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
height: 260rpx; |
|||
justify-content: center; |
|||
color: #fff; |
|||
transform: translateX(180rpx); |
|||
transition: all 0.4s; |
|||
flex-shrink: 0; |
|||
opacity: 0; |
|||
margin-left: 30rpx; |
|||
text-align: center; |
|||
} |
|||
.goods-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin: 30rpx 25rpx; |
|||
background: white; |
|||
border-radius: 10rpx; |
|||
overflow: hidden; |
|||
} |
|||
.touch-move-active .del,.touch-move-active .item { |
|||
-webkit-transform: translateX(0); |
|||
transform: translateX(0); |
|||
opacity: 1; |
|||
} |
|||
|
|||
.icon-gou,.icon-quan { |
|||
color: #999999; |
|||
flex-shrink: 0; |
|||
font-size: 40rpx; |
|||
} |
|||
.item image { |
|||
margin: 0 25rpx; |
|||
flex-shrink: 0; |
|||
width: 173rpx; |
|||
height: 173rpx; |
|||
border-radius: 7rpx; |
|||
} |
|||
.item-info { |
|||
flex: 1; |
|||
} |
|||
.item-info .title { |
|||
font-size: 31rpx; |
|||
font-weight: 500; |
|||
color: #000; |
|||
} |
|||
.item-info .sku-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: #666; |
|||
font-size: 27rpx; |
|||
margin-top: 10rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.item-bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
} |
|||
.item-bottom .price { |
|||
color: #D62828; |
|||
font-size: 40rpx; |
|||
font-weight: 500; |
|||
flex: 1; |
|||
margin-right: 10rpx; |
|||
} |
|||
.item-bottom .price::before { |
|||
content: "￥"; |
|||
font-size: 27rpx; |
|||
font-weight: 400; |
|||
} |
|||
.item-bottom .iconfont { |
|||
flex-shrink: 0; |
|||
font-size: 32rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
.item-bottom .number { |
|||
flex-shrink: 0; |
|||
width: 67rpx; |
|||
line-height: 50rpx; |
|||
background: #F0F0F0; |
|||
border-radius: 7rpx; |
|||
text-align: center; |
|||
margin: 0 20rpx; |
|||
} |
|||
.fixed-bottom { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
height: 113rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
bottom: 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 27rpx; |
|||
color: #999; |
|||
padding-left: 40rpx; |
|||
} |
|||
.fixed-bottom .tip { |
|||
font-size: 29rpx; |
|||
color: #000; |
|||
font-weight: 500; |
|||
margin-left: 20rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.bottom-price { |
|||
color: #D62828; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
flex-shrink: 0; |
|||
margin-right: 20rpx; |
|||
} |
|||
.fixed-bottom .btn { |
|||
width: 267rpx; |
|||
line-height: 113rpx; |
|||
text-align: center; |
|||
background: #D62828; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
flex-shrink: 0; |
|||
font-weight: 500; |
|||
} |
|||
.fixed-bottom .iconfont { |
|||
font-size: 42rpx; |
|||
} |
|||
.icon-gou { |
|||
color: #D62828; |
|||
} |
|||
.fixed-btn { |
|||
width: 202rpx; |
|||
line-height: 84rpx; |
|||
background: #FB6E4D; |
|||
border-radius: 42rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
.del-btn { |
|||
box-sizing: border-box; |
|||
border: 1rpx solid #FB6E4D; |
|||
color: #FB6E4D; |
|||
background: white; |
|||
margin-right:40rpx ; |
|||
} |
|||
.mask { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
z-index: 999; |
|||
} |
|||
.model{ |
|||
width: 561rpx; |
|||
min-height: 449rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
position: absolute; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
.model-title{ |
|||
text-align: center; |
|||
font-size: 34rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
margin-top: 32rpx; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
.model-content{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-wrap: wrap; |
|||
margin-top: 100rpx; |
|||
font-size: 34rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
.btn-list{ |
|||
height: 106rpx; |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 0; |
|||
border-top: 1rpx solid rgba(216, 216, 216, .99); |
|||
padding: 10rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
.model-btn{ |
|||
width: 50%; |
|||
text-align: center; |
|||
height: 86rpx; |
|||
line-height: 86rpx; |
|||
|
|||
font-size: 34rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
|
|||
@ -0,0 +1,690 @@ |
|||
// pages/list/store/index.js
|
|||
// import commonApi from "../../../utils/https/common"
|
|||
// import util from "../../../utils/util"
|
|||
import commonApi from "../../utils/https/common" |
|||
import util from "../../utils/util" |
|||
let app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
list:[], //获取的产品列表
|
|||
total:1, //总数
|
|||
keywords:"", //搜索关键字
|
|||
navIndex:0, //一级分类选中下标
|
|||
navList:[ |
|||
{ |
|||
type:'20', |
|||
title:'特产' |
|||
}, |
|||
{ |
|||
type:'19', |
|||
title:'文创' |
|||
} |
|||
], //产品 一级分类：特产、文创
|
|||
navList2:[ |
|||
{ |
|||
type:'3', |
|||
title:'特产' |
|||
}, |
|||
{ |
|||
type:'2', |
|||
title:'文创' |
|||
} |
|||
], //按商户 一级分类：特产、文创
|
|||
flag:true, //切换样式，true按分类，false按店铺展示
|
|||
typeList:[], //左侧的二级分类
|
|||
typeIndex:0, //二级分类选中下标
|
|||
id:'1', |
|||
cartCount:0, |
|||
skuFlag:null, //规格弹窗
|
|||
info: null, //规格信息
|
|||
skuIndex: 0, //默认选中第一个规格
|
|||
producNum: 1, |
|||
showPopup:false, //购物车的弹窗
|
|||
gwcList:[], //gwc里的产品数据
|
|||
allSelectedBtn:false, //全选按钮
|
|||
seachFlag:false, //搜索模式
|
|||
totalPrice:0, //获取购物车总价--打开购物车后勾选的产品价格
|
|||
name:'文创特产' |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
wx.showShareMenu({ |
|||
withShareTicket: true, |
|||
menus: ['shareAppMessage', 'shareTimeline'] |
|||
}) |
|||
this.getCount() |
|||
this.getType() |
|||
}, |
|||
BroswerRecord: function () { |
|||
setTimeout(() => { |
|||
if (app.globalData.uuid) { |
|||
commonApi._post('browse/browse_record', { |
|||
type: "goods", |
|||
title: this.data.info.title, |
|||
drive: "mini", |
|||
source_id: this.data.info.id, |
|||
url: "/pages/info/postProductInfo/index?id=" + this.data.info.id, |
|||
uuid: app.globalData.uuid |
|||
}).then(res => {}) |
|||
} else { |
|||
this.BroswerRecord(); |
|||
} |
|||
}, 500) |
|||
}, |
|||
// 清空
|
|||
delAll() { |
|||
let ids = [] |
|||
this.data.gwcList.forEach(item => { |
|||
ids.push(item.sku_id) |
|||
}) |
|||
commonApi.user_post("cart_within/del_sku", { |
|||
sku_id: ids+'', |
|||
type:'1' |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
wx.showToast({ |
|||
title: '清空成功', |
|||
icon: "success" |
|||
}) |
|||
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:'1' |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
// this.getCount()
|
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:'1' |
|||
}).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 |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 添加产品到购物车
|
|||
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:"1" |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:'1' |
|||
}).then(res => { |
|||
let cartCount = 0,totalPrice = 0,gwcList=this.data.gwcList |
|||
res.data.forEach(val=> { |
|||
cartCount+=val.num |
|||
console.log(this.data.skuFlag); |
|||
// debugger
|
|||
if (!this.data.skuFlag && !this.data.showPopup) { |
|||
// debugger
|
|||
if (val.sku.id == this.data.info.sku[this.data.skuIndex].id) { |
|||
val.selected = 1 |
|||
} |
|||
}else { |
|||
// debugger
|
|||
gwcList.forEach(el=> { |
|||
if (el.id == val.id) { |
|||
val.selected = el.selected |
|||
} |
|||
}) |
|||
} |
|||
// if (this.data.showPopup) {
|
|||
// totalPrice += Number(val.num*val.sku.price)
|
|||
// 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, |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 全选
|
|||
allSelected() { |
|||
let gwcList = this.data.gwcList |
|||
let totalPrice = 0 |
|||
if (this.data.allSelectedBtn) { |
|||
gwcList.forEach(item=> { |
|||
item.selected =0 |
|||
}) |
|||
} else { |
|||
gwcList.forEach(item=> { |
|||
item.selected =1 |
|||
}) |
|||
gwcList.forEach(item=> { |
|||
totalPrice += Number(item.num*item.sku.price) |
|||
}) |
|||
} |
|||
this.setData({ |
|||
gwcList, |
|||
allSelectedBtn:!this.data.allSelectedBtn, |
|||
totalPrice |
|||
}) |
|||
}, |
|||
// 单选一个
|
|||
selectedIt(e) { |
|||
let item = e.currentTarget.dataset.item,gwcList= this.data.gwcList,totalPrice=0 |
|||
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) |
|||
} |
|||
}) |
|||
let status = gwcList.every(el => el.selected === 1) |
|||
this.setData({ |
|||
gwcList, |
|||
allSelectedBtn:status?true:false, |
|||
totalPrice |
|||
}) |
|||
}, |
|||
// 左侧购物车打开弹窗
|
|||
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, |
|||
}) |
|||
}, |
|||
// 获取商户标签列表
|
|||
getSupplierTag() { |
|||
let list = this.data.list; |
|||
if(list.length>=this.data.total) return; |
|||
commonApi.user_post('supplier/get_supplier_by_title_tag_id', { |
|||
tag_id:this.data.navList2[this.data.navIndex].type, //标签的ID
|
|||
offset:list.length, //起始查询
|
|||
limit:10, //查询数量
|
|||
title: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), |
|||
total:res.data.total |
|||
}) |
|||
}) |
|||
}, |
|||
// 获取左侧二级分类
|
|||
getType() { |
|||
commonApi._post("product/tag_list",{ |
|||
pid:this.data.flag?this.data.navList[this.data.navIndex].type:this.data.navList2[this.data.navIndex].type, //父标签的ID
|
|||
}).then(res=>{ |
|||
this.setData({ |
|||
typeList:res.data |
|||
}) |
|||
this.getList() |
|||
}) |
|||
}, |
|||
// 获取历史购物车详情
|
|||
getCount() { |
|||
commonApi.user_post('cart_within/get_list', { |
|||
type:'1' |
|||
}).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 |
|||
}) |
|||
} |
|||
this.setData({ |
|||
cartCount: cartCount, //1
|
|||
gwcList:res.data, |
|||
allSelectedBtn:false |
|||
}) |
|||
}) |
|||
}, |
|||
// 重置
|
|||
onReload() { |
|||
this.setData({ |
|||
list:[], |
|||
total:1, |
|||
navIndex:0, |
|||
typeIndex:0, |
|||
flag:true |
|||
}) |
|||
this.getList() |
|||
}, |
|||
// 搜索
|
|||
search:function(e){ |
|||
if (e.detail.keywords == '') { |
|||
this.setData({ |
|||
seachFlag:false, |
|||
keywords:'', |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.onReload() |
|||
}else { |
|||
this.setData({ |
|||
seachFlag:true, |
|||
keywords:e.detail.keywords, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.getList(); |
|||
} |
|||
}, |
|||
// 去产品详情页
|
|||
goodsDetail(e){ |
|||
wx.navigateTo({ |
|||
url: '/pages/info/postProductInfo/index?id='+e.currentTarget.dataset.goods.id, |
|||
}) |
|||
}, |
|||
// 去店铺
|
|||
goShop(e){ |
|||
let id = e.currentTarget.dataset.id; |
|||
util.pagePoint({ |
|||
event: 'legacy_shop', |
|||
param:{ |
|||
id:id |
|||
}, |
|||
type:'supplier' |
|||
},1) |
|||
wx.navigateTo({ |
|||
url: '/pages/list/store/index?id='+id, |
|||
}) |
|||
}, |
|||
gotoProduct:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
util.gotoDetail(item) |
|||
}, |
|||
// 切换样式
|
|||
changeStyle() { |
|||
this.setData({ |
|||
navIndex:0, |
|||
flag:!this.data.flag, |
|||
total:1, |
|||
list:[], |
|||
typeIndex:0 |
|||
}) |
|||
if (this.data.flag) { |
|||
this.getType() |
|||
}else { |
|||
this.getSupplierTag() |
|||
} |
|||
}, |
|||
// 切换一级分类
|
|||
changeNav:function(e){ |
|||
let index = e.currentTarget.dataset.index,navList=this.data.navList; |
|||
this.setData({ |
|||
typeIndex:0, |
|||
navIndex:index, |
|||
typeList:[], |
|||
type:navList[index].type, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
if (this.data.flag) { |
|||
this.getType() |
|||
} else { |
|||
this.getSupplierTag() |
|||
} |
|||
}, |
|||
// 切换左侧二级分类
|
|||
changeType(e) { |
|||
let index = e.currentTarget.dataset.index,typeList=this.data.typeList; |
|||
this.setData({ |
|||
typeIndex:index, |
|||
type:typeList[index].id, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.getList() |
|||
}, |
|||
// 获取产品列表
|
|||
getList:function(){ |
|||
let list = this.data.list; |
|||
if(list.length>=this.data.total) return; |
|||
commonApi._post("product/get_product_by_tag",{ |
|||
tag_id:this.data.seachFlag? '20,19':this.data.typeList[this.data.typeIndex].id, //标签的ID
|
|||
offset:list.length, //起始查询
|
|||
limit: 10, //查询数量
|
|||
title: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), |
|||
total:res.data.total |
|||
}) |
|||
console.log(this.data.list); |
|||
}) |
|||
// commonApi._post("supplier/get_supplier_by_tag_id",{
|
|||
// tag_id:this.data.flag ? this.data.navList[this.data.navIndex].type :this.data.navList2[this.data.navIndex].type,
|
|||
// limit:10,
|
|||
// offset:list.length,
|
|||
// sort:"weight",
|
|||
// title: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),
|
|||
// total:res.data.total
|
|||
// })
|
|||
// })
|
|||
}, |
|||
// 添加产品弹窗 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: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
// this.onReload()
|
|||
// this.setData({
|
|||
// seachFlag:false
|
|||
// // list:[],
|
|||
// // total:1,
|
|||
// // navIndex:0,
|
|||
// // typeIndex:0,
|
|||
// // flag:true
|
|||
// })
|
|||
// this.getList()
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
if (this.data.flag) { |
|||
this.getList() |
|||
} else { |
|||
this.getSupplierTag() |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
}, |
|||
onShareTimeline: function() { |
|||
return { |
|||
title: '君到苏州-文创特产', |
|||
query: '', |
|||
imageUrl: 'https://static.ticket.sz-trip.com/xcxImages/index/icon5New.png' |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader", |
|||
"common-image":"/pages/component/commonImage/index", |
|||
"search":"/pages/component/SearchHeader" |
|||
} |
|||
} |
|||
@ -0,0 +1,213 @@ |
|||
<!--pages/feiyi/list/index.wxml--> |
|||
<!-- 文创特产页面 --> |
|||
<view class="techanMain"> |
|||
|
|||
<view style="{{seachFlag?'':'height: 500rpx;'}}"> |
|||
<search bind:onload="search" name="{{name}}"></search> |
|||
<image wx:if="{{!seachFlag}}" class="heaimg" src="https://static.ticket.sz-trip.com/uploads/20240710/a39dd5504c4baa66dd239153d2d20787.png" mode="widthFix"></image> |
|||
</view> |
|||
|
|||
<view wx:if="{{!seachFlag}}" class="techan-centent"> |
|||
<!-- 切换分类 以及 切换样式 --> |
|||
<view class="type-box"> |
|||
<view style="display: flex;"> |
|||
<view wx:for="{{flag?navList:navList2}}" wx:key="*this" bindtap="changeNav" data-index="{{index}}" class="{{index == navIndex ? 'seld-nav':'nav'}}">{{item.title}}</view> |
|||
</view> |
|||
<!-- 店铺--产品 切换 --> |
|||
<image bindtap="changeStyle" class="changeStyle" src="https://static.ticket.sz-trip.com/uploads/20240710/62bb38d5f88754e57447a26b14176aa2.png" mode="" /> |
|||
</view> |
|||
<!-- 产品部分 --> |
|||
<view wx:if="{{flag}}" style="flex: 1; display: flex; overflow: hidden;"> |
|||
<!-- <view style="display: flex; pa/dding-bottom: 167rpx;"> --> |
|||
<!-- 左侧二级分类 --> |
|||
<view class="left"> |
|||
<scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
<view wx:for="{{typeList}}" wx:key="*this" class="{{index == typeIndex ? 'seld-type':'type-two-box'}}" bindtap="changeType" data-index="{{index}}"> |
|||
<view class="line" wx:if="{{index == typeIndex}}"></view> |
|||
<view> |
|||
{{item.name}} |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<!-- 右侧产品列表 --> |
|||
<view class="list" style="width: 100%;"> |
|||
<scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
<view class="item" wx:for="{{list}}" wx:key="*this" bindtap="goodsDetail" data-goods="{{item}}"> |
|||
<image class="img" src="{{item.headimg}}" mode="" /> |
|||
<view class="content"> |
|||
<view class="title"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="item-bottom"> |
|||
<view class="price"> |
|||
<text class="current-price">{{item.price/100}}</text> |
|||
<text class="original-price">¥{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="add" catchtap="addBuyCart" data-item="{{item}}">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<!-- </view> --> |
|||
</view> |
|||
<!-- 店铺展示 --> |
|||
<view wx:else style="padding: 0 26.67rpx; overflow: hidden;"> |
|||
<scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="getSupplierTag" bindscroll="scroll"> |
|||
<view wx:for="{{list}}" class="list1" wx:key="*this"> |
|||
<view class="top-info" bindtap="goShop" data-id="{{item.id}}"> |
|||
<common-image mode="aspectFill" src="{{item.headimg}}" style="border-radius: 13rpx;"></common-image> |
|||
<view class="supplier-info"> |
|||
<view class="supplier-name textOver">{{item.shop_name}}</view> |
|||
<view class="mid-box"> |
|||
<view class="supplier-tags"> |
|||
<view class="supplier-tag textOver" wx:for="{{item.display_tags}}">{{item}}</view> |
|||
</view> |
|||
<view class="supplier-price"><text>￥</text><text>{{(item.start_price/100)}}</text><text>起</text></view> |
|||
</view> |
|||
<view class="bottom-box"> |
|||
<view class="supplier-address supplier-tags"><text class="iconfont icon-location"></text><text style="max-width: 300rpx;" class="textOver">{{item.address}}</text></view> |
|||
<view class="btn"> |
|||
进店看看 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="product-list"> |
|||
<view data-item="{{item}}" bindtap="goodsDetail" data-goods="{{item}}" class="product-item" wx:for="{{item.product}}" wx:key="*this"> |
|||
<image src="{{item.headimg}}" mode="aspectFill"></image> |
|||
<view class="product-title textOver2">{{item.title}}</view> |
|||
<view class="supplier-price"><text>￥</text><text style="font-size:32rpx">{{(item.price/100)}}</text><text class="market_price" wx:if="{{item.market_price && item.market_price!=0 && item.market_price>item.price}}">{{item.market_price/100}}</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
<!-- 搜索到的产品列表 --> |
|||
<view wx:if="{{seachFlag}}" style="overflow-y: scroll;padding-bottom: 70rpx;"> |
|||
<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">{{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 style="width:100%;height:167rpx;" wx:if="{{flag}}"> |
|||
</view> |
|||
<view class="bottom" wx:if="{{(flag &&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 style="margin-left: 16.67rpx;font-family: PingFang SC;font-weight: 500;font-size: 27rpx;color: #0B898E;" bindtap="openPopup"> |
|||
<text>明细</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="{{cartCount == 0?'no-buy':'buy'}}" bindtap="order">去结算</view> |
|||
</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">{{item.product.title}}</view> |
|||
<view class="sku-title">{{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,685 @@ |
|||
/* pages/feiyi/list/index.wxss */ |
|||
.techanMain { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow:hidden; |
|||
} |
|||
.heaimg { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
.techan-centent { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
/* height: 500rpx; */ |
|||
} |
|||
page { |
|||
/* background: #FFD99E; */ |
|||
/* padding-bottom: 170rpx; */ |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow:hidden; |
|||
} |
|||
.changeStyle { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
.type-box { |
|||
padding: 33.33rpx 26.67rpx 26.67rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.nav { |
|||
width: 145rpx; |
|||
height: 53rpx; |
|||
border-radius: 8rpx; |
|||
border: 1px solid #0B898E; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #0B898E; |
|||
text-align: center; |
|||
line-height: 53rpx; |
|||
margin-right: 12.67rpx; |
|||
} |
|||
.seld-nav { |
|||
width: 145rpx; |
|||
height: 57rpx; |
|||
background: #0B898E; |
|||
border-radius: 8rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 57rpx; |
|||
margin-right: 12.67rpx; |
|||
} |
|||
.left { |
|||
width: 200rpx; |
|||
/* min-height: 100vh; */ |
|||
/* min-height: 850rpx; */ |
|||
height: 100%; |
|||
background-color: #F3F3F3; |
|||
} |
|||
.type-two-box { |
|||
width: 200rpx; |
|||
height: 107rpx; |
|||
text-align: center; |
|||
line-height: 107rpx; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
} |
|||
.seld-type { |
|||
background: #fff; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
text-align: center; |
|||
line-height: 107rpx; |
|||
position: relative; |
|||
} |
|||
.line { |
|||
width: 7rpx; |
|||
height: 53rpx; |
|||
background: #0B898E; |
|||
position: absolute; |
|||
top: 26.67rpx; |
|||
left: 0; |
|||
} |
|||
.item { |
|||
padding: 0 26.67rpx; |
|||
display: flex; |
|||
margin-bottom: 26.67rpx; |
|||
} |
|||
.img { |
|||
width: 161rpx; |
|||
height: 161rpx; |
|||
background: #999999; |
|||
border-radius: 11rpx; |
|||
flex-shrink: 0; |
|||
margin-right: 14.67rpx; |
|||
} |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
} |
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
} |
|||
.item-bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.current-price { |
|||
font-weight: bold; |
|||
font-size: 33rpx; |
|||
color: #D70000; |
|||
margin-right: 13.33rpx; |
|||
} |
|||
.current-price::before { |
|||
content: "￥"; |
|||
font-size: 23rpx; |
|||
font-weight: 500; |
|||
} |
|||
.original-price { |
|||
font-weight: 400; |
|||
font-size: 21rpx; |
|||
color: #999999; |
|||
text-decoration-line: line-through; |
|||
} |
|||
.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; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/* .classimg { |
|||
margin-left: 13rpx; |
|||
width: 710rpx; |
|||
display: block; |
|||
} */ |
|||
/* .type-text { |
|||
position: absolute; |
|||
left: 130rpx; |
|||
padding: 30rpx 30rpx; |
|||
bottom: 0; |
|||
line-height: 60rpx; |
|||
font-size: 40rpx; |
|||
font-weight: bold; |
|||
z-index: 1; |
|||
color: #FFE1A2; |
|||
width: 120rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} */ |
|||
/* .item { |
|||
background: url(https://static.ticket.sz-trip.com/xcxImages/techan/bg.png); |
|||
background-size: 100% 100%; |
|||
width: 694rpx; |
|||
height: 571rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 15rpx; |
|||
color: #704436; |
|||
box-sizing: border-box; |
|||
|
|||
} */ |
|||
.list1 { |
|||
background-color: #FAF6F0; |
|||
border-radius: 13rpx; |
|||
margin-bottom: 30rpx; |
|||
padding: 20rpx 0 28rpx 20rpx; |
|||
} |
|||
.top-info { |
|||
display: flex; |
|||
/* padding: 30rpx; */ |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.top-info image { |
|||
width: 136rpx; |
|||
height: 136rpx; |
|||
display: block; |
|||
flex-shrink: 0; |
|||
margin-right: 12rpx; |
|||
} |
|||
.supplier-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
/* height: 136rpx; */ |
|||
justify-content:space-between; |
|||
flex: 1; |
|||
margin-right: 20.67rpx; |
|||
/* width: 300rpx; */ |
|||
} |
|||
.supplier-name { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
} |
|||
.supplier-tags { |
|||
display: flex; |
|||
} |
|||
.supplier-tag { |
|||
padding: 0 20rpx; |
|||
font-size: 22rpx; |
|||
border: 1rpx solid #877350; |
|||
border-radius: 15rpx; |
|||
line-height: 28rpx; |
|||
margin-right: 20rpx; |
|||
color: #877350; |
|||
} |
|||
.supplier-address { |
|||
font-size: 20rpx; |
|||
margin-top: 10rpx; |
|||
color: #877350; |
|||
font-weight: 500; |
|||
font-size: 23rpx; |
|||
} |
|||
.supplier-address .iconfont { |
|||
margin-right: 8rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
.supplier-price { |
|||
color: #CC3320; |
|||
font-size: 20rpx; |
|||
} |
|||
.supplier-price text:nth-child(2){ |
|||
font-size: 40rpx; |
|||
font-weight: bold; |
|||
} |
|||
.product-list { |
|||
display: flex; |
|||
/* margin: 0 20rpx 0 30rpx; */ |
|||
overflow-x:scroll ; |
|||
box-sizing: border-box; |
|||
/* padding-right:30rpx ; */ |
|||
} |
|||
.product-list::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
.product-item { |
|||
width: 212rpx; |
|||
font-size: 28rpx; |
|||
margin-right: 19rpx; |
|||
} |
|||
.product-item:nth-child(3){ |
|||
} |
|||
.product-item image { |
|||
width: 212rpx; |
|||
height: 209rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
.market_price { |
|||
color: #999999; |
|||
font-weight: 400; |
|||
font-size: 20rpx; |
|||
margin-left: 10rpx; |
|||
text-decoration: line-through; |
|||
} |
|||
.mid-box{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding-right: 10rpx; |
|||
} |
|||
.bottom-box{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.btn{ |
|||
flex-shrink: 0; |
|||
background: #C6937F; |
|||
border-radius: 24rpx; |
|||
width: 147rpx; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
text-align: center; |
|||
font-size: 25rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.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; |
|||
} |
|||
|
|||
.hot-list { |
|||
padding: 26.67rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
.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; |
|||
} |
|||
Loading…
Reference in new issue