chenkainan
4 months ago
7 changed files with 4007 additions and 1 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,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