jiazhipeng
4 months ago
9 changed files with 4019 additions and 2 deletions
@ -0,0 +1,397 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="list-forms"> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">姓名</view> |
|||
<view class="list-item-input"><input type="text" v-model="username" placeholder="请输入姓名" /></view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">手机号</view> |
|||
<view class="list-item-input"><input type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11" |
|||
/></view> |
|||
</view> |
|||
<view class="list-item" style="position: relative;"> |
|||
<view class="list-item-title">选择地区</view> |
|||
<view class="list-item-input3" style="flex: 1;"> |
|||
<picker mode="multiSelector" :range="newProvinceDataList" range-key="name" @change="changeArea" @columnchange="pickerColumnchange" |
|||
style="position: relative;z-index: 2;"> |
|||
<input type="text" readonly style="font-size: 35rpx;position: relative;z-index: -1;" |
|||
v-model="citySeld" disabled="true" placeholder="请选择地区"/> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">详细地址</view> |
|||
<view class="list-item-input"><input type="text" v-model="detailAddr" placeholder="请输入详细地址" /></view> |
|||
</view> |
|||
<view class="list-item" style="border-bottom: 0;"> |
|||
<view class="list-item-title">设为默认</view> |
|||
<view class="list-item-switch"> |
|||
<switch :checked="idDefault" @change="switchChange" color="#6A8A2D"/> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="list-item-btn"> |
|||
<view class="list-item-post" @click="postSave()">保存</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import District from 'ydui-district/dist/jd_province_city_area_id'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
username: '', |
|||
mobile: '', |
|||
citySeld: '', |
|||
detailAddr: '', |
|||
idDefault: false, |
|||
title: '新增收货地址', |
|||
show: false, |
|||
district: District, //数据 |
|||
|
|||
province: null, |
|||
city: null, |
|||
area: '', |
|||
provinceId: null, |
|||
cityId: null, |
|||
areaId: null, |
|||
columns: [], |
|||
id: '', |
|||
newProvinceDataList:[ |
|||
[],[],[] |
|||
], |
|||
multiIndex: [0, 0, 0], |
|||
} |
|||
}, |
|||
onLoad(option){ |
|||
|
|||
}, |
|||
methods: { |
|||
init(option) { |
|||
this.id = null |
|||
this.username = '' |
|||
this.mobile = '' |
|||
this.citySeld = '' |
|||
this.detailAddr = '' |
|||
this.idDefault = false |
|||
this.province = null |
|||
this.city = null |
|||
this.area = '' |
|||
this.provinceId = null |
|||
this.cityId = null |
|||
this.areaId = null |
|||
this.multiIndex = [0, 0, 0] |
|||
|
|||
|
|||
|
|||
if (option.id > 0) { |
|||
console.log(option) |
|||
this.title = '编辑收货地址' |
|||
this.id = option.id |
|||
this.username = option.name |
|||
this.mobile = option.tel |
|||
this.idDefault = option.is_default == 1 ? true : false |
|||
this.provinceId = option.province_id |
|||
this.cityId = option.city_id |
|||
this.areaId = option.district_id |
|||
// this.citySeld = option.addresss |
|||
this.detailAddr = option.detail_addr; |
|||
this.getSeldCityList(); |
|||
} |
|||
else { |
|||
this.getSeldCityList() |
|||
} |
|||
}, |
|||
|
|||
switchChange(e){ |
|||
this.idDefault = e.detail.value |
|||
}, |
|||
changeArea(e){ |
|||
// 数组内的下标 |
|||
this.multiIndex = e.detail.value; |
|||
this.citySeld = this.newProvinceDataList[0][this.multiIndex[0]].name + this.newProvinceDataList[1][this.multiIndex[1]].name + this.newProvinceDataList[2][this.multiIndex[2]].name |
|||
this.provinceId = this.newProvinceDataList[0][this.multiIndex[0]].id |
|||
this.cityId = this.newProvinceDataList[1][this.multiIndex[1]].id |
|||
this.areaId = this.newProvinceDataList[2][this.multiIndex[2]].id |
|||
}, |
|||
getSeldCityList() { |
|||
if (this.columns.length>0) { |
|||
this.handleColumns() |
|||
return |
|||
} |
|||
let that = this |
|||
that.Post({}, '/api/uservice/user/getAreas').then(res => { |
|||
if (res.code === 1) { |
|||
var data = res.data; |
|||
var result = {}; |
|||
for (var i = 0; i < data.length; i++) { |
|||
var item = data[i]; |
|||
if (!item.pid) { |
|||
continue; |
|||
} |
|||
//获取省 |
|||
if (item.pid == "100000") { |
|||
result[item.id.toString()] = {}; |
|||
result[item.id.toString()].children = [] |
|||
result[item.id.toString()].name = item.name; |
|||
result[item.id.toString()].id = item.id; |
|||
} else if (result[item.pid.toString()]) { |
|||
//填充市 |
|||
var t = { |
|||
id: item.id, |
|||
name: item.name, |
|||
children: [] |
|||
} |
|||
result[item.pid.toString()].children.push(t) |
|||
} else { |
|||
//填充区 |
|||
var k = { |
|||
id: item.id, |
|||
name: item.name |
|||
} |
|||
for (var j = 0; j < result[item.pid.toString().substr(0, 2) + "0000"].children |
|||
.length; j++) { |
|||
if (result[item.pid.toString().substr(0, 2) + "0000"].children[j].id == item |
|||
.pid) { |
|||
result[item.pid.toString().substr(0, 2) + "0000"].children[j].children.push(k) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
var r = []; |
|||
//将Object转为Array |
|||
for (var i in result) { |
|||
r.push(result[i]); |
|||
} |
|||
//将数据赋值给省市区联动选择器 |
|||
that.district = r; |
|||
that.columns = r |
|||
this.handleColumns() |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
handleColumns () { |
|||
this.newProvinceDataList= [ |
|||
this.columns.map(v=>{return {name: v.name, id: v.id}}), |
|||
this.columns[0].children.map(v=>{return {name: v.name, id: v.id}}), |
|||
this.columns[0].children[0].children.map(v=>{return {name: v.name, id: v.id}}), |
|||
] |
|||
// this.provinceId = option.province_id |
|||
// this.cityId = option.city_id |
|||
// this.areaId = option.district_id |
|||
// 如果有省市区 |
|||
if (this.provinceId) { |
|||
// todo 错误处理 |
|||
try { |
|||
let index1 = this.columns.findIndex(v=>v.id==this.provinceId) |
|||
let index2 = this.columns[index1].children.findIndex(v=>v.id==this.cityId) |
|||
let index3 = this.columns[index1].children[index2].children.findIndex(v=>v.id==this.areaId) |
|||
this.citySeld = this.columns[index1].name + this.columns[index1].children[index2].name + this.columns[index1].children[index2].children[index3].name |
|||
|
|||
} catch (e) { |
|||
console.log(e) |
|||
} |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
// 滑动 |
|||
pickerColumnchange(e){ |
|||
// 第几列滑动 |
|||
// console.log(e.detail.column); |
|||
// 第几列滑动的下标 |
|||
// console.log(e.detail.value) |
|||
// 第一列滑动 |
|||
if(e.detail.column === 0){ |
|||
this.multiIndex[0] = e.detail.value |
|||
// console.log('第一列滑动'); |
|||
// this.newProvinceDataList[1] = []; |
|||
this.newProvinceDataList[1] = this.columns[this.multiIndex[0]].children.map((item,index)=>{ |
|||
// console.log(item) |
|||
return item |
|||
}) |
|||
// console.log(this.multiIndex) |
|||
if(this.columns[this.multiIndex[0]].children.length === 1){ |
|||
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[0].children.map((item,index)=>{ |
|||
// console.log(item) |
|||
return item |
|||
}) |
|||
}else{ |
|||
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{ |
|||
// console.log(item) |
|||
return item |
|||
}) |
|||
} |
|||
// 第一列滑动 第二列 和第三列 都变为第一个 |
|||
this.multiIndex.splice(1, 1, 0) |
|||
this.multiIndex.splice(2, 1, 0) |
|||
} |
|||
// 第二列滑动 |
|||
if(e.detail.column === 1){ |
|||
this.multiIndex[1] = e.detail.value |
|||
// console.log('第二列滑动'); |
|||
// console.log(this.multiIndex) |
|||
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{ |
|||
// console.log(item) |
|||
return item |
|||
}) |
|||
// 第二列 滑动 第三列 变成第一个 |
|||
this.multiIndex.splice(2, 1, 0) |
|||
} |
|||
// 第三列滑动 |
|||
if(e.detail.column === 2){ |
|||
this.multiIndex[2] = e.detail.value |
|||
// console.log('第三列滑动') |
|||
// console.log(this.multiIndex) |
|||
} |
|||
}, |
|||
async postSave() { |
|||
this.username = this.username.trim() |
|||
this.mobile = this.mobile.trim() |
|||
this.detailAddr = this.detailAddr.trim() |
|||
if (this.username.length < 1) { |
|||
uni.showToast({ |
|||
title: '请输入姓名', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (this.username.length > 6) { |
|||
uni.showToast({ |
|||
title: '姓名最多6个字', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!this.IsTel(this.mobile)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (this.citySeld.length < 1) { |
|||
uni.showToast({ |
|||
title: '请选择地区', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (this.detailAddr.length < 2) { |
|||
uni.showToast({ |
|||
title: '请输入具体地址', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
let api = '/api/uservice/user/addNewConsignee' |
|||
if (this.id>0) { |
|||
api = "/api/uservice/user/editConsignee" |
|||
} |
|||
let res = await this.Post({ |
|||
username: this.username, |
|||
mobile: this.mobile, |
|||
is_default: this.idDefault ? '1' : '0', |
|||
province_id: this.provinceId, |
|||
city_id: this.cityId, |
|||
district_id: this.areaId, |
|||
detail_addr: this.detailAddr, |
|||
id: this.id || null |
|||
},api) |
|||
|
|||
if(res.code == '1'){ |
|||
// uni.setStorageSync('addressNow',JSON.stringify(res.data)) |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: this.id>0?'编辑成功':'添加成功', |
|||
showCancel: false, |
|||
}) |
|||
this.$emit("changeAddress") |
|||
}else{ |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
}) |
|||
} |
|||
return {...res,data: {id: this.id}} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.list-forms { |
|||
display: flex; |
|||
flex-direction: column; |
|||
box-sizing: content-box |
|||
} |
|||
|
|||
.list-item { |
|||
display: flex; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 30rpx 0; |
|||
height: 60rpx; |
|||
align-items: center; |
|||
box-sizing: content-box |
|||
} |
|||
|
|||
.list-item-title { |
|||
width: 150rpx; |
|||
font-size: 31rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.list-item-input { |
|||
flex: 1; |
|||
} |
|||
|
|||
.list-item-input input { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
background-color: transparent; |
|||
line-height: 31rpx; |
|||
font-size: 31rpx; |
|||
} |
|||
|
|||
.list-item-input input::placeholder { |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.list-item-switch { |
|||
display: flex; |
|||
flex: 1; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.list-item-btn { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.list-item-post { |
|||
display: flex; |
|||
color: #FFFFFF; |
|||
font-size: 36rpx; |
|||
width: 697rpx; |
|||
height: 73rpx; |
|||
background: linear-gradient(90deg, #F84A56, #FF9834); |
|||
border-radius: 37rpx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 725rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,455 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
|
|||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" |
|||
:safe-area="true" @change="popChange"> |
|||
<view class="cart-container" v-if="showCart"> |
|||
<view class="header-container"> |
|||
<view class="select-area flex flex-items-center" @click.stop="selectAllGoods"> |
|||
<view class="select-cycle" v-show="!selectAll"></view> |
|||
<view class="select-cycle selected" v-show="selectAll"> |
|||
<image :src="showImg('/uploads/20241104/3d903e0c2788104b57b4ce5e07ea1de1.png')"> |
|||
</view> |
|||
<view style="padding-left: 26rpx;" >全选</view> |
|||
</view> |
|||
<view class="delete-area flex flex-items-center" @click.stop="clearAllGoods"> |
|||
<image :src="showImg('/uploads/20241104/50900c9a5fa5fbdbdee526abc9af4a40.png')"></image> |
|||
<view style="padding-left: 8rpx;" >清空</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content-container"> |
|||
<view class="content-item" v-for="(item,i) in cartData" :key="i" :model="cartData"> |
|||
<view class="flex flex-items-center" @tap.stop="setItemSelect(item)"> |
|||
<view class="select-cycle" v-show="!item.isSelected"></view> |
|||
<view class="select-cycle selected" v-show="item.isSelected"> |
|||
<image :src="showImg('/uploads/20241104/3d903e0c2788104b57b4ce5e07ea1de1.png')"> |
|||
</view> |
|||
<view style="padding-left: 26rpx;flex:1"> |
|||
<view class="commodity box" > |
|||
<image class="img" :src="showImg(item.Specifications_image)" mode="aspectFill"></image> |
|||
<view class="title goods-text-area"> |
|||
<view class="commodity-info"> |
|||
<view class="text-overflowRows" style="font-weight: bold;">{{ item.good_name }}</view> |
|||
<view class="text-overflowRows" style="font-size: 27rpx;color: #999999;padding-top: 10rpx;">{{ item.Specifications_name }}</view> |
|||
</view> |
|||
<view class="flex flex-between"> |
|||
<view class="commodity-price"> |
|||
￥ <view style="font-size: 40rpx;">{{item.Specifications_money/100}}</view> |
|||
</view> |
|||
<view class="add-num-area"> |
|||
<view :class="['ctrl',item.num>1?'':'disabled']" @click.stop="addBuyNum(item,-1,i)" >-</view> |
|||
<view>{{item.num}}</view> |
|||
<view :class="['ctrl']" @click.stop="addBuyNum(item,1,i)">+</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
|
|||
|
|||
|
|||
<slot name="content"></slot> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "cartData", |
|||
data() { |
|||
return { |
|||
cartData: [], |
|||
showCart: false, |
|||
selectAll: false, |
|||
canOpenpop: true, |
|||
allPrice: {allPrice:0, iNum:0, fNum:'00'}, |
|||
} |
|||
}, |
|||
props:{ |
|||
paramData: { |
|||
type: Object, |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.canOpenpop = true |
|||
this.refreshData() |
|||
uni.$on("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
beforeUnmount () { |
|||
console.log('触发off') |
|||
uni.$off("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
beforeDestroy () { |
|||
console.log('触发off') |
|||
uni.$off("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
|
|||
methods: { |
|||
calNum () { |
|||
let res = 0 |
|||
this.cartData.forEach(v=>{ |
|||
res += v.num |
|||
}) |
|||
return res |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
openPop(){ |
|||
this.$refs.popup.open() |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
popChange (e) { |
|||
this.showCart = e.show |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
|
|||
getDataByConnect(data) { |
|||
if (data.msgType == "updateCartDataInfo") { |
|||
this.refreshData(data) |
|||
} |
|||
}, |
|||
|
|||
|
|||
refreshData (data) { |
|||
let selectedData = [] |
|||
try { |
|||
selectedData = JSON.parse(uni.getStorageSync('cartDataInfo')); |
|||
} catch(e) { |
|||
selectedData = [] |
|||
} |
|||
|
|||
if (Array.isArray(data) && data.length>0) { |
|||
this.cartData = data |
|||
this.setAllSelect() |
|||
} else { |
|||
this.Post({},'/api/shopping/getShoppingList').then(res => { |
|||
if (res) { |
|||
this.cartData = (res.data || []).map(v=>{return {...v, isSelected:selectedData.includes(v.specifications_id)}}) |
|||
this.setAllSelect() |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 购物车操作 |
|||
setItemSelect(item) { |
|||
item.isSelected = !item.isSelected |
|||
// uni.setStorageSync('cartDataInfo', JSON.stringify(this.cartData)); |
|||
this.setAllSelect() |
|||
|
|||
}, |
|||
selectAllGoods(){ |
|||
let goods = this.cartData |
|||
if (this.selectAll) { |
|||
goods.forEach(v => v.isSelected = false) |
|||
this.selectAll = false |
|||
} else { |
|||
goods.forEach(v => v.isSelected = true) |
|||
this.selectAll = true |
|||
} |
|||
this.setAllSelect() |
|||
|
|||
}, |
|||
clearAllGoods(){ |
|||
let _this = this |
|||
Promise.all(this.cartData.map(v=>{ |
|||
return _this.Post({s_id: v.id},'/api/shopping/delShopping') |
|||
})).finally(res =>{ |
|||
this.cartData = [] |
|||
this.setAllSelect() |
|||
}) |
|||
}, |
|||
setAllSelect() { |
|||
let goods = this.cartData |
|||
if(goods.length>0&& goods.every(v => v.isSelected)){ |
|||
this.selectAll = true |
|||
} else { |
|||
this.selectAll = false |
|||
} |
|||
let selectedData = goods.filter(v=>v.isSelected).map(v=>v.specifications_id) |
|||
uni.setStorageSync('cartDataInfo', JSON.stringify(selectedData)); |
|||
this.calAllPrice() |
|||
}, |
|||
|
|||
addBuyNum(item, num,index){ |
|||
if (num == -1 && item.num == 1) { |
|||
this.Post({s_id: item.id},'/api/shopping/delShopping').then(res =>{ |
|||
this.cartData.splice(index,1) |
|||
this.setAllSelect() |
|||
}) |
|||
} else { |
|||
let numData = item.num + num |
|||
this.Post({s_id: item.id, num: numData},'/api/shopping/updateShopping').then(res =>{ |
|||
item.num += num |
|||
this.setAllSelect() |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
calAllPrice () { |
|||
let selectedGoods = this.cartData.filter(v=>v.isSelected) |
|||
let totalPrice = 0 |
|||
selectedGoods.forEach(v=>{ |
|||
totalPrice += v.Specifications_money/100 * v.num |
|||
}) |
|||
totalPrice = totalPrice.toFixed(2) |
|||
console.log(totalPrice) |
|||
this.allPrice = {allPrice: totalPrice, iNum: totalPrice.split('.')[0], fNum: totalPrice.split('.')[1]} |
|||
|
|||
this.paramData.allPrice = totalPrice |
|||
this.paramData.iNum = this.allPrice.iNum |
|||
this.paramData.fNum = this.allPrice.fNum |
|||
this.paramData.num = this.calNum() |
|||
|
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
|
|||
goCartOrder () { |
|||
if(this.cartData.every(v => !v.isSelected)){ |
|||
uni.showToast({ |
|||
title:'请先选中要购买的商品', |
|||
icon:'none', |
|||
}) |
|||
return |
|||
} |
|||
let orderData = this.cartData.filter(v=>v.isSelected).map(v=>{ |
|||
return { |
|||
goodsInfo: { |
|||
image: v.Specifications_image, |
|||
title:v.good_name, |
|||
merchant_name: v.merchant_name, |
|||
}, |
|||
skuInfo: { |
|||
title:v.Specifications_name, |
|||
buyNum:v.num, |
|||
money: v.Specifications_money, |
|||
id: v.specifications_id, |
|||
}, |
|||
|
|||
} |
|||
}) |
|||
|
|||
|
|||
let orderInfo = { |
|||
is_post: 1, // 购物车都是邮寄 |
|||
goods: orderData, |
|||
post: 0 |
|||
} |
|||
|
|||
uni.setStorageSync('teChanOrder', JSON.stringify(orderInfo)); //规格 |
|||
// uni.setStorageSync('teChanInfo', JSON.stringify(this.info)); //商品 |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/order' |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.cart-container{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: white; |
|||
height: 933rpx; |
|||
padding-bottom: 184rpx; |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: absolute; |
|||
width: 100%; |
|||
bottom: 0; |
|||
z-index: 20; |
|||
|
|||
.header-container{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 40rpx 26rpx; |
|||
|
|||
.select-area{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 37rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
|
|||
|
|||
.delete-area{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #999999; |
|||
image{ |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content-container{ |
|||
flex: 1; |
|||
height: 10rpx; |
|||
overflow-y: auto; |
|||
padding:0 26rpx 26rpx; |
|||
|
|||
.content-item{ |
|||
margin-bottom: 48rpx; |
|||
} |
|||
|
|||
.commodity { |
|||
display: flex; |
|||
.add-num-area{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 160rpx; |
|||
|
|||
image{ |
|||
width: 49rpx; |
|||
height: 49rpx; |
|||
} |
|||
|
|||
} |
|||
.goods-text-area{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.commodity-price{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #F84A56; |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
.commodity-info{ |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #2C2C2C; |
|||
} |
|||
// align-items: center; |
|||
.img { |
|||
width: 217rpx; |
|||
height: 179rpx; |
|||
border-radius: 13rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.title { |
|||
flex: 1; |
|||
margin-left: 20rpx; |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
|
|||
.price-list { |
|||
display: flex; |
|||
margin-top: 18rpx; |
|||
align-items: center; |
|||
.price-r { |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #fc5109; |
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
color: #fc5109; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.price-g { |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #b5bcc9; |
|||
text-decoration: line-through; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
.num-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 20rpx; |
|||
width: 160rpx; |
|||
justify-content: space-between; |
|||
.num { |
|||
text-align: center; |
|||
width: 50rpx; |
|||
} |
|||
.ctrl { |
|||
width: 46rpx; |
|||
height: 46rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.select-cycle{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
border: 1px solid #999999; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.select-cycle.selected { |
|||
border: none; |
|||
image{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.ctrl { |
|||
width: 47rpx; |
|||
height: 47rpx; |
|||
background: #515150; |
|||
border-radius: 50%; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 34rpx; |
|||
color: #FFFFFF; |
|||
line-height: 47rpx; |
|||
text-align: center; |
|||
} |
|||
.ctrl.disabled{ |
|||
background: #E8E8E8; |
|||
color: #999999; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,11 @@ |
|||
{ |
|||
"requires": true, |
|||
"lockfileVersion": 1, |
|||
"dependencies": { |
|||
"ydui-district": { |
|||
"version": "1.1.0", |
|||
"resolved": "https://registry.npmmirror.com/ydui-district/-/ydui-district-1.1.0.tgz", |
|||
"integrity": "sha512-MBhvfaR5Gkn6MUmEnrH1A7IFB5igALuDgtIF+gz3dRwNwW9+KOmih7z+xZFfGluMsEbWaT7C3lWOckYsLZQnFg==" |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,900 @@ |
|||
<template> |
|||
<view class="bg" id="bg" v-if="info"> |
|||
<view class="swipe-box"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" |
|||
@change="swiperChange" circular> |
|||
<swiper-item v-for="(item, index) in info.listimg" :key="item.id"> |
|||
<view class="swiper-item"> |
|||
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="swiper-pointer"> |
|||
<view :class="['cricle',swiperCurrent==i?'active':'']" v-for="(item,i) in info.listimg" :key="i"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="w-full relative" style="padding: 26rpx;top: -52rpx;"> |
|||
<view class="price-box "> |
|||
<view class="price-zan"> |
|||
<view class="price"> |
|||
<view class="present-price">{{ info.price / 100 }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="title text-overflowRows">{{ info.title }}</view> |
|||
<view class="tag no-scrollbar" v-if="info.display_tags"> |
|||
<view class="tag-item" v-for="(item, index) in info.display_tags.split(',')" :key="index"> |
|||
{{ item }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="sp-box" @click="openPop"> |
|||
<view class="sp-box-left flex-1"> |
|||
<view class="flex-shrink-0"> |
|||
选择： |
|||
</view> |
|||
<view class="flex-1"> |
|||
{{sku[productIndex].sku_name || '暂无可选规格'}} |
|||
</view> |
|||
</view> |
|||
<uni-icons class="flex-shrink-0" style="height: 36rpx;margin-right: 20rpx;" type="right" size="18"></uni-icons> |
|||
</view> |
|||
|
|||
<view class="pro-title">产品简介</view> |
|||
<view class="notice" > |
|||
<view class="rich-text" v-html="formateRichText(info.content)"></view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="btn-list" v-if="!paramData.showCart"> |
|||
<view class="left-box"> |
|||
<view class="img-box" slot="content"> |
|||
<uni-badge class="uni-badge-left-margin" :text="paramData.num" absolute="rightTop" :offset="[5, 5]" size="small" |
|||
:custom-style="{background:'#F7F7F7',color:'#F84A56',border:'1px solid #F84A56'}"> |
|||
<image @click.stop="showCartClick" :src="showImg('/uploads/20250611/f8c2078ad76754a0b0251f9b65784dc2.png')" mode="aspectFill" |
|||
style="width: 78rpx;height: 78rpx;"></image> |
|||
</uni-badge> |
|||
</view> |
|||
<button id="contact" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
|||
<view class="img-box"> |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20250611/627d67e48ac41903c40c31f1613f2444.png" |
|||
mode="aspectFill"></image> |
|||
<view class="text"> |
|||
客服 |
|||
</view> |
|||
</view> |
|||
</button> |
|||
|
|||
</view> |
|||
<view class="btn-post"> |
|||
<view class="left-btn-buy" @click="openPop(true)">加入购物车</view> |
|||
<view class="right-btn-buy" @click="openPop(false)">立即购买</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="btn-list" v-else> |
|||
<view class="left-box"> |
|||
<view class="img-box" slot="content"> |
|||
<uni-badge class="uni-badge-left-margin" :text="paramData.num" absolute="rightTop" :offset="[5, 5]" size="small" |
|||
:custom-style="{background:'#F7F7F7',color:'#F84A56',border:'1px solid #F84A56'}"> |
|||
<image @click.stop="showCartClick" :src="showImg('/uploads/20250611/f8c2078ad76754a0b0251f9b65784dc2.png')" mode="aspectFill" |
|||
style="width: 78rpx;height: 78rpx;"></image> |
|||
</uni-badge> |
|||
</view> |
|||
<view class="bottom-price"> |
|||
￥ |
|||
<view class="bottom-price-yuan">{{paramData.iNum}}</view> |
|||
<view>.{{paramData.fNum}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="btn-buy" @click="goCartOrder"> |
|||
提交订单 |
|||
</view> |
|||
</view> |
|||
|
|||
<cartDataVue ref="cartDataVueRef" :paramData="paramData" @changeParamData="changeParamData" :key="new Date().getTime()"></cartDataVue> |
|||
|
|||
<uni-popup ref="popup" type="bottom" @change="changPopShow" style="position: relative;z-index: 50;"> |
|||
<view class="popup-content" v-if="sku.length>0"> |
|||
<view @click="closePopup" style="padding: 31rpx 0 0 639rpx;width: 50rpx;height: 80rpx;"> |
|||
<uni-icons type="closeempty" size="24"></uni-icons> |
|||
</view> |
|||
|
|||
<view class="bottom-productImg"> |
|||
<img :src="showImg(sku[productIndex].headimg)" alt=""> |
|||
<view class="right-content"> |
|||
<view class="bottom-productPrice com-price">{{(sku[productIndex].price||0)/100}}</view> |
|||
<view class="bottom-content">已选择：{{sku[productIndex].sku_name}}</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<view class="sp"> |
|||
规格 |
|||
</view> |
|||
<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;"> |
|||
<view style="position:relative;" v-for="(botItem,botIndex) in sku" :key="botIndex"> |
|||
<view :class="['botProduct','text-overflow',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]" |
|||
@click="changeProduct(botItem,botIndex)"> |
|||
{{botItem.sku_name}} |
|||
</view> |
|||
<view class="noStore-text" v-if="botItem.store==0"> |
|||
不可购买 |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="buy-num com-flex-tao"> |
|||
数量 |
|||
<view class="number-btn"> |
|||
<view> |
|||
<text @click="delNumber">-</text> |
|||
</view> |
|||
<view style="width: 96rpx;height: 69rpx;margin: 0 14rpx;">{{ buyNum }}</view> |
|||
<view> |
|||
<text @click="addNumber">+</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="height: 100rpx;"></view> |
|||
<!-- <view class="btn-box"> |
|||
<view class="buy-btn" @click="order"> |
|||
下一步 |
|||
</view> |
|||
</view> --> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import cartDataVue from '../../components/cartData.vue' |
|||
export default { |
|||
components: {cartDataVue}, |
|||
data() { |
|||
return { |
|||
swiperCurrent: 0, |
|||
|
|||
id: null, |
|||
info: null, |
|||
sku: [], |
|||
productIndex: 0, |
|||
|
|||
is_post: "2", |
|||
|
|||
|
|||
showLength: 0, |
|||
buyNum: 1, |
|||
popShow: false, |
|||
paramData: {allPrice: 0,iNum:0, fNum:'00', showCart: false, num: 0}, |
|||
}; |
|||
}, |
|||
onLoad(option) { |
|||
this.id = option.id; |
|||
this.getInfo(); |
|||
}, |
|||
methods: { |
|||
changPopShow (e) { |
|||
this.popShow = e.show |
|||
}, |
|||
|
|||
getInfo() { |
|||
this.Post({id: this.id}, |
|||
'/api/product/get_product_detail').then(res => { |
|||
if (res.code !== 1) { |
|||
uni.showToast({ |
|||
title: '商品不存在或已下架', |
|||
icon: 'none' |
|||
}) |
|||
setTimeout(() => { |
|||
this.goBack() |
|||
}, 2000) |
|||
return |
|||
} |
|||
this.info = res.data; |
|||
this.sku = res.data.sku || [] |
|||
}); |
|||
}, |
|||
|
|||
//数量加减 |
|||
addNumber() { |
|||
this.buyNum += 1; |
|||
}, |
|||
delNumber() { |
|||
if (this.buyNum <= 1) { |
|||
return; |
|||
} |
|||
this.buyNum -= 1; |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
// false 下单 true 加入购物车 |
|||
openPop(flag) { |
|||
if (!this.sku||this.sku.length<=0) { |
|||
uni.showToast({ |
|||
title:'暂无可选规格', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (!this.popShow) { |
|||
this.$refs.popup.open() |
|||
} else { |
|||
if (flag) { |
|||
this.addToCart() |
|||
} else { |
|||
this.order() |
|||
} |
|||
|
|||
} |
|||
}, |
|||
order(item) { |
|||
let goods = this.sku[this.productIndex] |
|||
goods.buyNum = this.buyNum |
|||
|
|||
let orderInfo = [{ |
|||
// is_post: goods.is_post || "1", |
|||
// is_post: 2, |
|||
pInfo: this.info, |
|||
sInfo: goods, |
|||
// post: 0, |
|||
}] |
|||
|
|||
uni.setStorageSync('teChanOrder', JSON.stringify(orderInfo)); //规格 |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/order' |
|||
}); |
|||
}, |
|||
addToCart () { |
|||
let goods = this.sku[this.productIndex] |
|||
|
|||
goods.buyNum = this.buyNum |
|||
let goodsInfo = {goodsInfo:this.info, skuInfo: goods, isSelected: true} |
|||
|
|||
this.Post({good_id: this.info.id, specifications_id: goods.id,num: this.buyNum }, |
|||
'/api/shopping/addShopping').then(res => { |
|||
if (res) { |
|||
let selectedData = [] |
|||
try { |
|||
selectedData = JSON.parse(uni.getStorageSync('cartDataInfo')); |
|||
} catch(e) { |
|||
selectedData = [] |
|||
} |
|||
let currentGoods = selectedData.find(v =>v==goods.id) |
|||
if (!currentGoods) { |
|||
selectedData.push(goods.id) |
|||
} |
|||
uni.setStorageSync('cartDataInfo', JSON.stringify(selectedData)); |
|||
uni.$emit("updateDataByConnect", {msgType:'updateCartDataInfo',data:null}) |
|||
this.closePopup() |
|||
// this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
goUser() { |
|||
uni.switchTab({ |
|||
url: '/pages/index/user' |
|||
}) |
|||
}, |
|||
changeProduct(item,index) { |
|||
if (item.store==0) { |
|||
uni.showToast({ |
|||
title:"库存不足！", |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.productIndex = index |
|||
}, |
|||
|
|||
// 购物车 |
|||
changeParamData (data) { |
|||
for(let key in this.paramData) { |
|||
this.paramData[key] = data[key] |
|||
} |
|||
}, |
|||
showCartClick () { |
|||
if (this.paramData.showCart) { |
|||
this.$refs.cartDataVueRef.closePopup() |
|||
} else { |
|||
this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}, |
|||
goCartOrder () { |
|||
this.$refs.cartDataVueRef.goCartOrder() |
|||
}, |
|||
|
|||
swiperChange (e) { |
|||
this.swiperCurrent = e.detail.current |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: #f2f4f7; |
|||
padding-bottom: 210rpx; |
|||
} |
|||
|
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 413rpx; |
|||
position: relative; |
|||
.swiper { |
|||
height: 413rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 413rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 413rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.swiper-pointer{ |
|||
position: absolute; |
|||
right: 10rpx; |
|||
bottom: 40rpx; |
|||
display: flex; |
|||
} |
|||
.cricle{ |
|||
width: 14rpx; |
|||
height: 14rpx; |
|||
background: rgba(255,255,255,0.3); |
|||
border-radius: 50%; |
|||
margin-left: 10rpx; |
|||
} |
|||
.cricle.active{ |
|||
background: white; |
|||
} |
|||
} |
|||
|
|||
|
|||
button { |
|||
margin: 0; |
|||
padding: 0; |
|||
outline: none; |
|||
border-radius: 0; |
|||
background-color: transparent; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
button::after { |
|||
border: none; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 400rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item-num { |
|||
width: 90rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
position: absolute; |
|||
right: 30rpx; |
|||
bottom: 50rpx; |
|||
} |
|||
} |
|||
|
|||
.swiper { |
|||
height: 400rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 400rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 400rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.common-container{ |
|||
width: 100%; |
|||
padding: 32rpx; |
|||
} |
|||
|
|||
.pro-title{ |
|||
font-weight: bold; |
|||
font-size: 37rpx; |
|||
color: #000000; |
|||
margin: 66rpx 0 19rpx 0; |
|||
} |
|||
|
|||
.price-box { |
|||
width: 100%; |
|||
background: #ffffff; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
padding: 24rpx 30rpx; |
|||
|
|||
.price-zan { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.price { |
|||
display: flex; |
|||
|
|||
.present-price { |
|||
font-size: 42rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #C3282E; |
|||
|
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
&:after { |
|||
content: '起'; |
|||
display: inline-block; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC; |
|||
color: #8D8D8D; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tag { |
|||
margin:24rpx 0 15rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: nowrap; |
|||
overflow-x: auto; |
|||
|
|||
.tag-item { |
|||
margin-right: 14rpx; |
|||
font-family: PingFangSC; |
|||
padding: 8rpx 16rpx; |
|||
flex-shrink: 0; |
|||
border:1px solid #515150; |
|||
border-radius: 11rpx; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #515150; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
margin-top: 20rpx; |
|||
font-family: PingFang; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.notice { |
|||
padding: 35rpx; |
|||
width: 100%; |
|||
background: #ffffff; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.tab { |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0px 1rpx 0px 0px rgba(227, 229, 232, 1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 32rpx; |
|||
position: fixed; |
|||
top: 0; |
|||
|
|||
.tab-item { |
|||
height: 88rpx; |
|||
position: relative; |
|||
line-height: 88rpx; |
|||
|
|||
.tab-text { |
|||
font-size: 30rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #393b3e; |
|||
} |
|||
|
|||
.act-text { |
|||
font-size: 30rpx; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
} |
|||
|
|||
.tab-line { |
|||
width: 60rpx; |
|||
height: 6rpx; |
|||
background: #08c59b; |
|||
border-radius: 3rpx; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translate(-30rpx, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.more { |
|||
width: 100%; |
|||
height: 93rpx; |
|||
line-height: 93rpx; |
|||
text-align: center; |
|||
border-top: solid 1rpx rgba(227, 229, 232, 1); |
|||
font-size: 26rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #4D526C; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.xzPopup { |
|||
width: 750rpx; |
|||
padding: 33rpx 26rpx 20rpx; |
|||
box-sizing: border-box; |
|||
background-color: #FFFFFF; |
|||
position: relative; |
|||
max-height: 70vh; |
|||
overflow-y: auto; |
|||
|
|||
view { |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
margin-top: 35rpx; |
|||
} |
|||
|
|||
img { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
position: absolute; |
|||
top: 33rpx; |
|||
right: 27rpx; |
|||
} |
|||
} |
|||
|
|||
.comment { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
width: 710rpx; |
|||
height: 100rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 0 auto; |
|||
margin-top: 20rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
.comment-left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
font-size: 36rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.btn-list { |
|||
position: fixed; |
|||
z-index: 9999; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 180rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30rpx 50rpx 0 50rpx; |
|||
|
|||
.left-box { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
|
|||
.bottom-price{ |
|||
display: flex; |
|||
align-items: baseline; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #F84A56; |
|||
padding-top: 20rpx; |
|||
.bottom-price-yuan{ |
|||
font-size: 40rpx; |
|||
} |
|||
} |
|||
.bottom-detail-icon{ |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
|
|||
.img-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-right: 64rpx; |
|||
|
|||
image { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.btn-buy { |
|||
width: 293rpx; |
|||
height: 78rpx; |
|||
background: #C3282E; |
|||
border-radius: 40rpx; |
|||
text-align: center; |
|||
line-height: 78rpx; |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.popup-content { |
|||
background-color: white; |
|||
padding: 0rpx 39rpx 51rpx 39rpx; |
|||
height: auto; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
} |
|||
|
|||
.bottom-productImg { |
|||
display: flex; |
|||
margin-bottom: 23rpx; |
|||
} |
|||
|
|||
.bottom-productImg img { |
|||
width: 218rpx; |
|||
height: 179rpx; |
|||
background: #666666; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.right-content { |
|||
margin: 10rpx 0 0 41rpx; |
|||
} |
|||
|
|||
.bottom-productPrice { |
|||
font-size: 40rpx; |
|||
color: #FC524B; |
|||
|
|||
&:before { |
|||
content: "￥"; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom-content { |
|||
width: 331rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
} |
|||
|
|||
.botProduct { |
|||
width: 320rpx; |
|||
// height: 78rpx; |
|||
border-radius: 13rpx; |
|||
background-color: #F5F5F5; |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
line-height: 78rpx; |
|||
text-align: center; |
|||
margin-bottom: 25rpx; |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 0 40rpx; |
|||
} |
|||
.noStore{ |
|||
background-color: rgba(239, 239, 239, 1); |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
.noStore-text{ |
|||
width: 113rpx; |
|||
height: 43rpx; |
|||
background: #C0C0C0; |
|||
border-radius: 7rpx 0rpx 7rpx 0rpx; |
|||
text-align: center; |
|||
line-height: 43rpx; |
|||
position: absolute; |
|||
right: -14rpx; |
|||
top: -20rpx; |
|||
font-size: 23rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.botProducts { |
|||
// border: 1rpx solid #00AAFF; |
|||
// background-color: rgba(254, 180, 25, 1); |
|||
background: #515150; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.buy-num { |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
// border-top: 1rpx solid #CCCCCC; |
|||
padding: 39rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.buy-num .number-btn { |
|||
display: flex; |
|||
} |
|||
|
|||
.buy-num .number-btn view { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 69rpx; |
|||
height: 69rpx; |
|||
border: 1rpx solid #CCCCCC; |
|||
border-radius: 7rpx; |
|||
} |
|||
|
|||
.buy-num .number-btn>view text { |
|||
font-size: 46rpx; |
|||
} |
|||
|
|||
.buy-btn { |
|||
width: 670rpx; |
|||
height: 78rpx; |
|||
text-align: center; |
|||
line-height: 78rpx; |
|||
background: linear-gradient(90deg, #F84A56, #FF9834); |
|||
border-radius: 40rpx; |
|||
|
|||
font-size: 34rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.btn-box { |
|||
width: 750rpx; |
|||
height: 151rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.sp { |
|||
width: 100%; |
|||
height: 30rpx; |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #060001; |
|||
line-height: 30rpx; |
|||
border-top: solid 2rpx #ccc; |
|||
margin: 60rpx 0; |
|||
padding-top: 30rpx; |
|||
} |
|||
|
|||
.sp-box { |
|||
width: 100%; |
|||
|
|||
background: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-radius: 0 0 12rpx 12rpx; |
|||
padding: 10rpx 0 30rpx; |
|||
|
|||
.sp-box-left { |
|||
display: flex; |
|||
margin-left: 38rpx; |
|||
align-items: center; |
|||
|
|||
:first-child { |
|||
font-family: PingFang; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
:last-child { |
|||
width: 403rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
image { |
|||
width: 16rpx; |
|||
height: 28rpx; |
|||
margin-right: 38rpx; |
|||
} |
|||
} |
|||
|
|||
.btn-post{ |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 77rpx; |
|||
text-align: center; |
|||
display: flex; |
|||
|
|||
.left-btn-buy{ |
|||
width: 207rpx; |
|||
height: 77rpx; |
|||
color: #C3282E; |
|||
border-radius: 39rpx 0rpx 0rpx 39rpx; |
|||
border: 1px solid #C3282E; |
|||
} |
|||
.right-btn-buy{ |
|||
width: 207rpx; |
|||
height: 77rpx; |
|||
background: #C3282E; |
|||
border-radius: 0rpx 39rpx 39rpx 0rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,820 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="search-header" :style="{'height': height+'px','padding-top':statusBarHeight+'px'}"> |
|||
<uni-icons type="left" size="20" @click="goBack" style="flex-shrink: 0;"></uni-icons> |
|||
<view class="input-model"> |
|||
<uni-icons style="height: 1.4rem;line-height: 1.4rem;" type="search" size="15" color="#ABAAAD" ></uni-icons> |
|||
<input class="input-text" placeholder="请输入商品名称" v-model="searchText" @confirm="search(false)" @keyup.enter="search(false)"></text> |
|||
</view> |
|||
</view> |
|||
|
|||
<div :style="{'height':height+'px','flex-shrink':0}"></div> |
|||
|
|||
<!-- 正常产品 --> |
|||
<template v-if="searchText.trim().length<=0"> |
|||
<img :src="showImg(headImg)" class="topImg" /> |
|||
|
|||
<view class="goods-container"> |
|||
<scroll-view class="left-container no-scrollbar" :scroll-y="true"> |
|||
<view :class="['type-item',typeIndex==i?'active':'']" |
|||
v-for="(item,i) in typeParam" :key="i" @click="changeType(item,i)"> |
|||
{{item.title}} |
|||
<view class="active-type-bar" v-if="typeIndex==i"></view> |
|||
</view> |
|||
<view style="height: 148rpx;width: 1rpx;"></view> |
|||
</scroll-view> |
|||
<scroll-view class="right-container no-scrollbar" :scroll-y="true" @scrolltolower="scrollLow()"> |
|||
<view class="item" v-for="item in list" :key="item.id" @click="viewDetail(item)"> |
|||
<image class="item-img" :src="showImg(item.headimg)" mode=""></image> |
|||
<view class="content"> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="bottom"> |
|||
<view class="price"> |
|||
{{item.price/100}} |
|||
</view> |
|||
|
|||
<view class="buy-cart" @click.stop="showOrderCart(item)">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="height: 148rpx;width: 1rpx;"></view> |
|||
</scroll-view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<!-- 搜索 --> |
|||
<view v-else style="flex: 1;"> |
|||
<view v-if="searchList.length<=0" class="flex-center" style="width: 100%;height: 100%;flex-direction: column;"> |
|||
<image style="width: 328rpx;height: 450.67rpx;" :src="showImg('/uploads/20250514/0e5f4c089ba2f3a86d3c6f9d8d818d5b.png')"></image> |
|||
<view style="font-weight: 500;font-size: 28rpx;color: #666666; |
|||
text-align: center;margin-top: 67rpx;padding-bottom: 300rpx;">暂无搜索结果</view> |
|||
</view> |
|||
<view style="padding:0 26rpx;background: #FFFFFF;min-height: 100%;" v-else> |
|||
<view class="flex" style="justify-content: space-between;"> |
|||
<view class="search-result" > |
|||
<view v-for="(item,i) in searchList" > |
|||
<view v-if="i%2==0" class="search-item" :key="i" @click="viewDetail(item.goods)"> |
|||
<image :src="showImg(item.goods.image)" mode="widthFix"></image> |
|||
<view class="search-container"> |
|||
<view class="title text-overflowRows">{{item.goods.title}}</view> |
|||
<view class="flex-between" style="padding-top: 20rpx;"> |
|||
<view> |
|||
<text class="price">{{item.goods.money/100}}</text> |
|||
<text class="oldPrice">{{item.goods.price/100}}</text> |
|||
</view> |
|||
<view class="buy-cart" @click.stop="showOrderCart(item.goods)">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="search-result" > |
|||
<view v-for="(item,i) in searchList"> |
|||
<view class="search-item" v-if="i%2==1" :key="i" @click="viewDetail(item.goods)"> |
|||
<image :src="showImg(item.goods.image)" mode="widthFix"></image> |
|||
<view class="search-container"> |
|||
<view class="title text-overflowRows">{{item.goods.title}}</view> |
|||
<view class="flex-between" style="padding-top: 20rpx;"> |
|||
<view> |
|||
<text class="price">{{item.goods.money/100}}</text> |
|||
<text class="oldPrice">{{item.goods.price/100}}</text> |
|||
</view> |
|||
<view class="buy-cart" @click.stop="showOrderCart(item.goods)">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="height: 148rpx;width: 1rpx;"></view> |
|||
</view> |
|||
|
|||
<!-- 购物车 --> |
|||
<view class="btn-bottom" > |
|||
<cartDataVue ref="cartDataVueRef" :paramData="paramData" @changeParamData="changeParamData" style="width: 100%;height: 100%;"> |
|||
<template class="btn-list" slot="content"> |
|||
|
|||
<view class="left-box"> |
|||
<uni-badge class="uni-badge-left-margin" :text="paramData.num" absolute="rightTop" :offset="[5, 5]" size="small" |
|||
:custom-style="{background:'#D90F01',color:'#ffffff',border:'1px solid #ffffff'}"> |
|||
<view class="img-box" @click.stop="showCartClick"> |
|||
<image :src="showImg('/uploads/20250513/cc33cde475ce45c274cb304e20805aa1.png')" mode="aspectFill"></image> |
|||
</view> |
|||
</uni-badge> |
|||
<view class="bottom-price"> |
|||
<text style="color: #000000;">总计：</text> |
|||
￥ |
|||
<view class="bottom-price-yuan">{{paramData.iNum}}</view> |
|||
<view>.{{paramData.fNum}}</view> |
|||
</view> |
|||
<view class="bottom-detail-icon" @click.stop="showCartClick"> |
|||
明细 |
|||
<view v-if="!paramData.showCart" style="transform: rotate(90deg);"><uni-icons color="#0B898E" type="left" size="15"></uni-icons></view> |
|||
<view v-else style="transform: rotate(-90deg);"><uni-icons color="#0B898E" type="left" size="15"></uni-icons></view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="btn-buy" @click="goCartOrder"> |
|||
去结算 |
|||
</view> |
|||
|
|||
</template> |
|||
</cartDataVue> |
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="bottom" :safe-area="true"> |
|||
<view class="popup-content" v-if="sku.length>0"> |
|||
<view @click="closePopup" style="padding: 31rpx 0 0 639rpx;width: 50rpx;height: 80rpx;"> |
|||
<uni-icons type="closeempty" size="24"></uni-icons> |
|||
</view> |
|||
|
|||
<view class="bottom-productImg"> |
|||
<img :src="showImg(sku[productIndex].image)" alt=""> |
|||
<view class="right-content"> |
|||
<view class="bottom-productPrice com-price">{{(sku[productIndex].money||0)/100}}</view> |
|||
<view class="bottom-content text-overflow">已选择：{{sku[productIndex].title}}</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;"> |
|||
<view style="position:relative;" v-for="(botItem,botIndex) in sku" :key="botIndex"> |
|||
<view :class="['botProduct','text-overflow',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]" |
|||
@click="changeProduct(botItem,botIndex)"> |
|||
{{botItem.title}} |
|||
</view> |
|||
<view class="noStore-text" v-if="botItem.store==0"> |
|||
不可购买 |
|||
</view> |
|||
<!-- <view class="noStore-text" v-else-if="botItem.is_post!=1">不可加购</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="buy-num com-flex-tao"> |
|||
数量 |
|||
<view class="number-btn"> |
|||
<view> |
|||
<text @click="delNumber">-</text> |
|||
</view> |
|||
<view style="width: 96rpx;height: 69rpx;margin: 0 14rpx;">{{ buyNum }}</view> |
|||
<view> |
|||
<text @click="addNumber">+</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="placeholder-content"> |
|||
<view style="height: 100rpx;"></view> |
|||
<view class="btn-cover"> |
|||
<view class="btn" @click.stop="order">加入购物车</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import cartDataVue from 'components/cartData.vue' |
|||
export default { |
|||
components: {cartDataVue}, |
|||
data() { |
|||
return { |
|||
// 导航栏参数 |
|||
height: 0, |
|||
statusBarHeight: 0, |
|||
headImg: "https://cgc.js-dyyj.com/uploads/20250513/f8b255f965efcd71b6843e4b72c3f1f3.png", |
|||
|
|||
typeParam: [ |
|||
{id: 366, title: '味 | WEI'}, |
|||
{id: 46, title: '服 | FU'}, |
|||
{id: 47, title: '器 | QI'}, |
|||
{id: 48, title: '香 | XIANG'}, |
|||
{id: 49, title: '饰 | SHI'}, |
|||
{id: 50, title: '艺 | YI'}, |
|||
], |
|||
typeIndex: 0, |
|||
list:[], |
|||
finished: false, |
|||
|
|||
paramData: {allPrice: 0,iNum:0, fNum:'00', showCart: false, num: 0}, |
|||
|
|||
currentGoods: {}, |
|||
sku: [], |
|||
productIndex: 0, |
|||
buyNum: 1, |
|||
cartDataVueShow: false, |
|||
|
|||
searchText: '', |
|||
searchList: [], |
|||
searchFinish: false, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
// this.getHeadImg("techan").then(res => {this.headImg = res}) |
|||
if (options.idIndex) { |
|||
try { |
|||
this.typeIndex = Number(options.idIndex) |
|||
} catch(e) { |
|||
this.typeIndex = 0 |
|||
} |
|||
} |
|||
|
|||
}, |
|||
onReady() { |
|||
this.initRectInfo() |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
initRectInfo () { |
|||
const sysInfo = uni.getSystemInfoSync() |
|||
this.statusBarHeight = sysInfo.statusBarHeight |
|||
// 默认高度 |
|||
this.height = sysInfo.statusBarHeight + 40 |
|||
}, |
|||
|
|||
changeType (item, i) { |
|||
if (this.typeIndex!== i) { |
|||
this.typeIndex=i |
|||
this.finished = false |
|||
this.list = [] |
|||
this.getList() |
|||
} |
|||
}, |
|||
|
|||
// 根据产品分类获取产品列表 |
|||
getList(){ |
|||
this.Post({ |
|||
tag_id: this.typeParam[this.typeIndex].id, |
|||
offset: this.list.length, |
|||
limit: 10, |
|||
},'/api/product/get_product_by_tag').then(res => { |
|||
this.list = [...this.list, ...res.data.list]; |
|||
if (res.data.list.length < 10) { |
|||
this.finished = true |
|||
} |
|||
console.log(this.list) |
|||
}) |
|||
}, |
|||
scrollLow () { |
|||
if (!this.finished) { |
|||
this.getList() |
|||
} |
|||
}, |
|||
viewDetail(item) { |
|||
// this.goOtherDetail(item) |
|||
|
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/detail?id=' + item.id |
|||
}) |
|||
|
|||
}, |
|||
|
|||
showCartClick () { |
|||
if (this.paramData.showCart) { |
|||
this.$refs.cartDataVueRef.closePopup() |
|||
} else { |
|||
this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}, |
|||
changeParamData (data) { |
|||
for(let key in this.paramData) { |
|||
this.paramData[key] = data[key] |
|||
} |
|||
}, |
|||
|
|||
// 购物车相关 |
|||
showOrderCart (item) { |
|||
console.log(item) |
|||
this.sku = [] |
|||
this.productIndex = 0 |
|||
this.buyNum = 1 |
|||
this.currentGoods = JSON.parse(JSON.stringify(item)) |
|||
this.getSpecificationsByGoodsId(item.id) |
|||
}, |
|||
changeProduct(item,index) { |
|||
if (item.store==0) { |
|||
uni.showToast({ |
|||
title:"库存不足！", |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.productIndex = index |
|||
}, |
|||
getSpecificationsByGoodsId(goods_id) { |
|||
this.Post({goods_id: goods_id},'/api/goods/getSpecificationsByGoodsId' |
|||
).then(res => { |
|||
if (res) { |
|||
this.sku = res.data; |
|||
if (!this.sku||this.sku.length<=0) { |
|||
uni.showToast({ |
|||
title:'暂无可选规格', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.openPop() |
|||
} |
|||
}); |
|||
}, |
|||
//数量加减 |
|||
addNumber() { |
|||
this.buyNum += 1; |
|||
}, |
|||
delNumber() { |
|||
if (this.buyNum <= 1) { |
|||
return; |
|||
} |
|||
this.buyNum -= 1; |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
openPop(){ |
|||
this.$refs.popup.open() |
|||
}, |
|||
order() { |
|||
let goods = this.sku[this.productIndex] |
|||
|
|||
if(goods.is_post!=1) { |
|||
uni.showToast({ |
|||
title: '此规格不支持加入购物车', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
goods.buyNum = this.buyNum |
|||
let goodsInfo = {goodsInfo:this.currentGoods, skuInfo: goods, isSelected: true} |
|||
|
|||
this.Post({good_id: this.currentGoods.id, specifications_id: goods.id,num: this.buyNum }, |
|||
'/api/shopping/addShopping').then(res => { |
|||
if (res) { |
|||
let selectedData = [] |
|||
try { |
|||
selectedData = JSON.parse(uni.getStorageSync('cartDataInfo')); |
|||
} catch(e) { |
|||
selectedData = [] |
|||
} |
|||
let currentGoods = selectedData.find(v =>v==goods.id) |
|||
if (!currentGoods) { |
|||
selectedData.push(goods.id) |
|||
} |
|||
uni.setStorageSync('cartDataInfo', JSON.stringify(selectedData)); |
|||
uni.$emit("updateDataByConnect", {msgType:'updateCartDataInfo',data:null}) |
|||
this.closePopup() |
|||
// this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
goCartOrder () { |
|||
this.$refs.cartDataVueRef.goCartOrder() |
|||
}, |
|||
|
|||
|
|||
//搜索 |
|||
search (isMore) { |
|||
if (this.searchText.trim().length<=0) { |
|||
uni.showToast({ |
|||
title:'请输入搜索关键字', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!isMore) { |
|||
this.searchList = [] |
|||
this.searchFinish = false |
|||
} |
|||
this.Post({ |
|||
name: this.searchText.trim(), |
|||
offset: this.searchList.length, |
|||
// type: 'pgoods', |
|||
limit: 10, |
|||
}, '/api/search/search').then(res => { |
|||
let resData = (res.data || []).map(v=> {return {id: v.id, goods: v.search_data}}) |
|||
console.log(resData) |
|||
this.searchList = [...this.searchList, ...resData]; |
|||
this.searchFinish = false |
|||
console.log(resData, this.searchList) |
|||
if (res.data.length<10) { |
|||
this.searchFinish = true |
|||
} |
|||
}) |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
if (!this.searchFinish) { |
|||
this.search(true) |
|||
} |
|||
console.log(1) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
.search-header{ |
|||
width: 100%; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: white; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 10rpx; |
|||
padding-right: 120px; |
|||
|
|||
.input-model{ |
|||
flex: 1; |
|||
width: 1rpx; |
|||
height: 64rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 55rpx; |
|||
border: 1rpx solid #20898D; |
|||
margin-left: 12rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #ABAAAD; |
|||
padding-left: 24rpx; |
|||
} |
|||
.input-text{ |
|||
height:19px; |
|||
padding-left: 14rpx; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #030000; |
|||
} |
|||
} |
|||
|
|||
|
|||
.bg { |
|||
height: 100vh; |
|||
padding-bottom: 26rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #F8FAFB; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 750rpx; |
|||
height: 344rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.goods-container{ |
|||
height: 1rpx; |
|||
flex: 1; |
|||
display: flex; |
|||
} |
|||
|
|||
.left-container{ |
|||
width: 214rpx; |
|||
flex-shrink: 0; |
|||
.type-item{ |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
text-align: center; |
|||
width: 216rpx; |
|||
height: 120rpx; |
|||
line-height: 120rpx; |
|||
position: relative; |
|||
.active-type-bar{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
height: 100%; |
|||
width: 12rpx; |
|||
background: #74A5AA; |
|||
} |
|||
} |
|||
.type-item.active{ |
|||
background: linear-gradient( 90deg, rgba(32,137,141,0.4) 0%, rgba(32,137,141,0) 100%); |
|||
font-weight: 600; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.right-container{ |
|||
flex: 1; |
|||
width: 1rpx; |
|||
background: white; |
|||
padding-top: 32rpx; |
|||
.item { |
|||
width: 100%; |
|||
padding:0 32rpx 32rpx 32rpx; |
|||
display: flex; |
|||
.item-img { |
|||
width: 148rpx; |
|||
height: 148rpx; |
|||
border-radius: 15rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.content { |
|||
height: 148rpx; |
|||
padding-left: 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
} |
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
width: 100%; |
|||
} |
|||
.bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.price { |
|||
font-size: 40rpx; |
|||
color: #FA0000; |
|||
font-weight: 400; |
|||
} |
|||
.price::before { |
|||
content: '￥'; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.buy-cart{ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
color: #FFFFFF; |
|||
background: #74A5AA; |
|||
line-height: 44rpx; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.btn-list { |
|||
z-index: 99; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 148rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 26rpx; |
|||
|
|||
.left-box { |
|||
display: flex; |
|||
align-items: center; |
|||
.bottom-price{ |
|||
display: flex; |
|||
align-items: baseline; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #D70000; |
|||
padding: 0 12rpx; |
|||
.bottom-price-yuan{ |
|||
font-size: 40rpx; |
|||
} |
|||
} |
|||
.bottom-detail-icon{ |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #0B898E; |
|||
} |
|||
|
|||
.img-box { |
|||
image { |
|||
width: 78rpx; |
|||
height: 78rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
.btn-buy { |
|||
width: 240rpx; |
|||
height: 78rpx; |
|||
background: #74A5AA; |
|||
border-radius: 40rpx; |
|||
text-align: center; |
|||
line-height: 78rpx; |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
|
|||
// 规格弹框 |
|||
.popup-content { |
|||
background-color: white; |
|||
padding: 0rpx 39rpx 51rpx 39rpx; |
|||
height: auto; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
.bottom-productImg { |
|||
display: flex; |
|||
margin-bottom: 48rpx; |
|||
} |
|||
|
|||
.bottom-productImg img { |
|||
width: 218rpx; |
|||
height: 179rpx; |
|||
background: #666666; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.right-content { |
|||
margin: 10rpx 0 0 41rpx; |
|||
} |
|||
|
|||
.bottom-productPrice { |
|||
font-size: 40rpx; |
|||
color: #C3282E; |
|||
|
|||
&:before { |
|||
content: "￥"; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom-content { |
|||
width: 331rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
} |
|||
|
|||
.botProduct { |
|||
width: 320rpx; |
|||
// height: 78rpx; |
|||
border-radius: 13rpx; |
|||
background-color: #EFEFEF; |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
line-height: 78rpx; |
|||
text-align: center; |
|||
margin-bottom: 25rpx; |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 0 40rpx; |
|||
} |
|||
.noStore{ |
|||
background-color: rgba(239, 239, 239, 1); |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
.noStore-text{ |
|||
width: 113rpx; |
|||
height: 43rpx; |
|||
background: #C0C0C0; |
|||
border-radius: 7rpx 0rpx 7rpx 0rpx; |
|||
text-align: center; |
|||
line-height: 43rpx; |
|||
position: absolute; |
|||
right: -14rpx; |
|||
top: -20rpx; |
|||
font-size: 23rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
.botProducts { |
|||
background: #74A5AA; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.buy-num { |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
// border-top: 1rpx solid #CCCCCC; |
|||
padding: 39rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-top: 1px solid #CCCCCC; |
|||
} |
|||
|
|||
.buy-num .number-btn { |
|||
display: flex; |
|||
} |
|||
|
|||
.buy-num .number-btn view { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 69rpx; |
|||
height: 69rpx; |
|||
border: 1rpx solid #CCCCCC; |
|||
border-radius: 7rpx; |
|||
} |
|||
|
|||
.buy-num .number-btn>view text { |
|||
font-size: 46rpx; |
|||
} |
|||
|
|||
.btn-box { |
|||
width: 750rpx; |
|||
height: 151rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
|
|||
.placeholder-content{ |
|||
background: white; |
|||
position: relative; |
|||
.btn-cover{ |
|||
z-index: 200; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 148rpx; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6,0,1,0.1); |
|||
.btn{ |
|||
width: 670rpx; |
|||
height: 78rpx; |
|||
text-align: center; |
|||
line-height: 78rpx; |
|||
background: #74A5AA; |
|||
border-radius: 40rpx; |
|||
|
|||
font-size: 34rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-result{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
flex: 1; |
|||
flex-shrink: 0; |
|||
|
|||
.search-item{ |
|||
width: 337rpx; |
|||
box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(153,153,153,0.33); |
|||
border-radius: 13rpx; |
|||
flex-shrink: 0; |
|||
margin-bottom: 20rpx; |
|||
height: fit-content; |
|||
image{ |
|||
width: 100%; |
|||
border-radius: 13rpx; |
|||
} |
|||
.search-container{ |
|||
padding: 20rpx; |
|||
.title{ |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
} |
|||
.price{ |
|||
font-weight: 400; |
|||
font-size: 33rpx; |
|||
color: #D70000; |
|||
} |
|||
.price:before{ |
|||
content: "￥"; |
|||
font-size: 23rpx; |
|||
} |
|||
.oldPrice{ |
|||
font-weight: 400; |
|||
font-size: 21rpx; |
|||
color: #999999; |
|||
text-decoration-line: line-through; |
|||
padding-left: 12rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,253 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view :class="['item-bg',selectItem.id==item.id?'active':'']" v-for="(item,index) in list" :key="index" @click="selectPoint(item)"> |
|||
<view class="item"> |
|||
<view class="item-point-title"> |
|||
<view class="name text-overflow flex-shrink-0">{{item.extract_name}}</view> |
|||
<view class="addressStr"> |
|||
<!-- <view class="flex-shrink-0"></view> --> |
|||
<view class="text-overflowRows">地址：{{item.detail_addr}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="item-point-guide" @click.stop="goMap(item)"> |
|||
<view> |
|||
<image :src="showImg('/uploads/20241104/8ff7aa0225c9e4fb86df1a9cb229c932.png')" mode="aspectFill" class="mapPoint"></image> |
|||
</view> |
|||
<view>去这里</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="no-data" v-if="list.length==0"> |
|||
<image src="https://static.ticket.sz-trip.com/dongtai/images/user/noAddress.png" mode="aspectFill" class="no-address"></image> |
|||
<view class=""> |
|||
暂无自提点地址 |
|||
</view> |
|||
</view> |
|||
<!-- <view class="btn-bottom"> |
|||
<view class="addBox" @click.stop="confirmPoint"> |
|||
确定 |
|||
</view> |
|||
</view> --> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
load: false, |
|||
pending: false, |
|||
list: [], |
|||
pickupId: null, |
|||
goodsId: null, |
|||
selectItem: {}, |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
this.pickupId = options.pickupId || null |
|||
this.goodsId = options.goodsId |
|||
}, |
|||
onShow(options) { |
|||
this.getList() |
|||
}, |
|||
|
|||
methods: { |
|||
getList() { |
|||
if (this.pending) { |
|||
return |
|||
} |
|||
this.pending = true |
|||
// this.getLocation() |
|||
let param = { |
|||
goods_id: this.goodsId, |
|||
offset: this.list.length, |
|||
limit: 10, |
|||
lon: uni.getStorageSync('location').lon || '', |
|||
lat: uni.getStorageSync('location').lat || '', |
|||
} |
|||
this.Post(param, "/api/extract/getMerchantExtractListByGoodsIdNew").then(res => { |
|||
if (res) { |
|||
this.list = [...this.list, ...res.data]; |
|||
if (res.data.length < 10) { |
|||
this.load = true; |
|||
} |
|||
if (this.pickupId && Array.isArray(this.list)) { |
|||
let selectItem = this.list.find(v=>v.id==this.pickupId) |
|||
if (selectItem) { |
|||
this.selectItem = selectItem |
|||
} |
|||
} |
|||
} |
|||
this.pending = false |
|||
}) |
|||
|
|||
|
|||
}, |
|||
|
|||
selectPoint (item) { |
|||
this.selectItem = item |
|||
// 返回上一个页面并带回selectItem |
|||
uni.$emit("updateDataByConnect", {msgType:'updatePickUpPoint',data:{selectItem: this.selectItem, skuId: this.goodsId}}) |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
goMap (item) { |
|||
uni.openLocation({ |
|||
latitude: Number(item.lat), |
|||
longitude: Number(item.lon), |
|||
name: item.extract_name, |
|||
address: item.detail_addr, |
|||
success: function () { |
|||
console.log('success'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
confirmPoint () { |
|||
if(!this.selectItem.id) { |
|||
uni.showToast({icon: "none",title: "请先选择自提点"}) |
|||
return; |
|||
} |
|||
// 返回上一个页面并带回selectItem |
|||
uni.$emit("updateDataByConnect", {msgType:'updatePickUpPoint',data:{selectItem: this.selectItem, skuId: this.goodsId}}) |
|||
uni.navigateBack() |
|||
} |
|||
}, |
|||
|
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if (!this.load) { |
|||
this.getList() |
|||
} |
|||
}, 1000); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
view { |
|||
box-sizing: border-box; |
|||
font-family: PingFang SC; |
|||
} |
|||
|
|||
.bg { |
|||
position: relative; |
|||
background: #F7F7F7; |
|||
min-height: 100vh; |
|||
padding-bottom: 170rpx; |
|||
} |
|||
.flex-shrink-0{ |
|||
flex-shrink: 0; |
|||
} |
|||
.item-bg{ |
|||
width: 697rpx; |
|||
height: 160rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 28rpx; |
|||
padding: 2rpx; |
|||
} |
|||
|
|||
.item { |
|||
padding: 24rpx; |
|||
padding-right: 0; |
|||
display: flex; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
.item-point-title{ |
|||
flex: 1; |
|||
width: 10rpx; |
|||
padding-right: 78rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.item-point-guide{ |
|||
width:140rpx; |
|||
flex-shrink: 0; |
|||
border-left: 1px solid #D8D8D8; |
|||
color: #515150; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
} |
|||
.mapPoint{ |
|||
width: 33rpx; |
|||
height: 33rpx; |
|||
} |
|||
} |
|||
.item-bg.active{ |
|||
background: #515150; |
|||
} |
|||
.name { |
|||
display: flex; |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
height: 42rpx; |
|||
} |
|||
.addressStr{ |
|||
display: flex; |
|||
font-size: 27rpx; |
|||
color: #999999; |
|||
padding-top: 10rpx; |
|||
} |
|||
|
|||
.no-data { |
|||
width: 100%; |
|||
height: 100vh; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
|
|||
view:nth-child(2) { |
|||
font-size: 30rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
margin-top: 25rpx; |
|||
} |
|||
|
|||
image { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
} |
|||
|
|||
padding-bottom: 400rpx; |
|||
} |
|||
|
|||
.btn-bottom{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 150rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30rpx 50rpx 30rpx 50rpx; |
|||
|
|||
.addBox{ |
|||
margin: 0 auto; |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: linear-gradient(90deg, #F84A56, #FF9834); |
|||
border-radius: 40rpx; |
|||
font-size: 36rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue