jiazhipeng
1 year ago
11 changed files with 2699 additions and 6 deletions
@ -0,0 +1,383 @@ |
|||
<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="#FEB419"/> |
|||
</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, //数据 |
|||
ready: false, |
|||
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 = option.id |
|||
if (option.id > 0) { |
|||
this.title = '编辑收货地址' |
|||
this.getDetail() |
|||
} |
|||
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) { |
|||
return |
|||
} |
|||
|
|||
let that = this |
|||
that.Post({}, '/api/areas/getAll').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.parent_id == 0) { |
|||
continue; |
|||
} |
|||
//获取省 |
|||
if (item.parent_id == "1") { |
|||
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.parent_id.toString()]) { |
|||
//填充市 |
|||
var t = { |
|||
id: item.id, |
|||
name: item.name, |
|||
children: [] |
|||
} |
|||
result[item.parent_id.toString()].children.push(t) |
|||
} else { |
|||
//填充区 |
|||
var k = { |
|||
id: item.id, |
|||
name: item.name |
|||
} |
|||
for (var j = 0; j < result[item.parent_id.toString().substr(0, 2) + "0000"].children |
|||
.length; j++) { |
|||
if (result[item.parent_id.toString().substr(0, 2) + "0000"].children[j].id == item |
|||
.parent_id) { |
|||
result[item.parent_id.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; |
|||
let arr = [] |
|||
let arr1 = [] |
|||
let arr2 = [] |
|||
that.district.forEach(item => { |
|||
arr.push(item) |
|||
}) |
|||
that.district[0].children.forEach(item => { |
|||
arr1.push(item) |
|||
}) |
|||
that.district[0].children[0].children.forEach(item => { |
|||
arr2.push(item) |
|||
}) |
|||
that.columns = arr |
|||
//控制异步数据 |
|||
that.ready = true; |
|||
console.log(this.columns) |
|||
for(let i=0; i<this.columns.length; i++){ |
|||
this.newProvinceDataList[0].push({name:this.columns[i].name,id:this.columns[i].id}); |
|||
} |
|||
console.log(this.columns[0].children) |
|||
for(let i=0; i<this.columns[0].children.length; i++){ |
|||
this.newProvinceDataList[1].push({name:this.columns[0].children[i].name,id:this.columns[0].children[i].id}); |
|||
} |
|||
for(let i=0; i<this.columns[0].children[0].children.length; i++){ |
|||
this.newProvinceDataList[2].push({name:this.columns[0].children[0].children[i].name,id:this.columns[0].children[0].children[i].id}); |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 滑动 |
|||
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) |
|||
} |
|||
}, |
|||
getDetail() { |
|||
this.Post({ |
|||
id: this.id |
|||
}, "/api/user/contactDetail").then(res => { |
|||
res = res.data; |
|||
if (res && res.id > 0) { |
|||
this.username = res.name |
|||
this.mobile = res.tel |
|||
this.idDefault = res.is_default == 1 ? true : false |
|||
this.provinceId = res.province_id |
|||
this.cityId = res.city_id |
|||
this.areaId = res.district_id |
|||
this.citySeld = res.province_text + '' + res.city_text + '' + res.district_text |
|||
this.detailAddr = res.detail_addr; |
|||
this.getSeldCityList(); |
|||
} |
|||
}) |
|||
}, |
|||
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 res = await this.Post({ |
|||
name: this.username, |
|||
tel: 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/user/' + (this.id > 0 ? 'edit' : 'add') + 'Consignee') |
|||
|
|||
if(res.code == '1'){ |
|||
// uni.setStorageSync('addressNow',JSON.stringify(res.data)) |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: this.id>0?'编辑成功':'添加成功', |
|||
showCancel: false, |
|||
}) |
|||
}else{ |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
}) |
|||
} |
|||
|
|||
return res |
|||
} |
|||
} |
|||
} |
|||
</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,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,5 @@ |
|||
{ |
|||
"dependencies": { |
|||
"ydui-district": "^1.1.0" |
|||
} |
|||
} |
|||
@ -0,0 +1,753 @@ |
|||
<template> |
|||
<view class="bg" id="bg" v-if="info"> |
|||
<view class="swipe-box"> |
|||
<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular> |
|||
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id"> |
|||
<view class="swiper-item"> |
|||
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<!-- <view class="swiper-item-num">{{ info.list_images.split(',').length }}张</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.money / 100 }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="title text-overflowRows">{{ info.title }}</view> |
|||
<view class="tag no-scrollbar" v-if="info.goods_new_tag"> |
|||
<view class="tag-item" v-for="(item, index) in info.goods_new_tag.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].title}} |
|||
</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.special_content)"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="btn-list"> |
|||
<view class="left-box"> |
|||
<view class="img-box" @click="collect"> |
|||
<image |
|||
:src="(isCollect?'https://tongli.sz-trip.com/uploads/20240827/47e86bfd7dd5c1b73d58adaa2b35f55a.png': |
|||
`https://tongli.sz-trip.com/uploads/20240827/95359568a28b0cae7accc437070eded4.png`)" |
|||
mode="aspectFill"></image> |
|||
<view class="text"> |
|||
收藏 |
|||
</view> |
|||
</view> |
|||
<button id="contact" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
|||
<view class="img-box"> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240827/ae5fd4482c56e2655ecae6059171aab0.png" |
|||
mode="aspectFill"></image> |
|||
<view class="text"> |
|||
客服 |
|||
</view> |
|||
</view> |
|||
</button> |
|||
|
|||
</view> |
|||
<view class="btn-buy" @click="openPop"> |
|||
立即购买 |
|||
</view> |
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="bottom" @change="changPopShow"> |
|||
<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">{{showPrice(sku[productIndex].money)}}</view> |
|||
<view class="bottom-content text-overflow">已选择：{{sku[productIndex].title}}</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.title}} |
|||
</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> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
info: null, |
|||
sku: [], |
|||
productIndex: 0, |
|||
|
|||
isCollect: false, |
|||
showLength: 0, |
|||
buyNum: 1, |
|||
popShow: false |
|||
}; |
|||
}, |
|||
onLoad(option) { |
|||
this.id = option.id; |
|||
this.getInfo(); |
|||
this.getSpecificationsByGoodsId(); |
|||
}, |
|||
methods: { |
|||
changPopShow (e) { |
|||
this.popShow = e.show |
|||
}, |
|||
// 价格显示 |
|||
showPrice(price) { |
|||
return (price && price != 0) ? (price / 100).toFixed(2) : '0.00' |
|||
}, |
|||
|
|||
|
|||
getInfo() { |
|||
this.Post({ |
|||
goods_id: this.id |
|||
}, |
|||
'/api/goods/getGoodDetail' |
|||
).then(res => { |
|||
if (res.data.flag == 0) { |
|||
setTimeout(() => { |
|||
uni.showToast({ |
|||
title: '商品不存在或已下架', |
|||
icon: 'none' |
|||
}) |
|||
}, 0) |
|||
setTimeout(() => { |
|||
this.goBack() |
|||
}, 2000) |
|||
} |
|||
this.info = res.data; |
|||
this.isCollect = this.info.is_collect; |
|||
}); |
|||
}, |
|||
getSpecificationsByGoodsId() { |
|||
this.Post({ |
|||
goods_id: this.id |
|||
}, |
|||
'/api/goods/getSpecificationsByGoodsId' |
|||
).then(res => { |
|||
if (res) { |
|||
this.sku = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 收藏 |
|||
collect() { |
|||
this.Post({ |
|||
type: 3, |
|||
id: this.id |
|||
}, |
|||
'/api/scenic/collect' |
|||
).then(res => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}); |
|||
this.isCollect = !this.isCollect |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//数量加减 |
|||
addNumber() { |
|||
this.buyNum += 1; |
|||
}, |
|||
delNumber() { |
|||
if (this.buyNum <= 1) { |
|||
return; |
|||
} |
|||
this.buyNum -= 1; |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
openPop() { |
|||
if (!this.popShow) { |
|||
this.$refs.popup.open() |
|||
} else { |
|||
this.order() |
|||
} |
|||
}, |
|||
order(item) { |
|||
let goods = this.sku[this.productIndex] |
|||
goods.buyNum = this.buyNum |
|||
uni.setStorageSync('order', JSON.stringify(goods)); //规格 |
|||
uni.setStorageSync('info', JSON.stringify(this.info)); //商品 |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/order' |
|||
}); |
|||
}, |
|||
goUser() { |
|||
uni.switchTab({ |
|||
url: '/pages/index/user' |
|||
}) |
|||
}, |
|||
changeProduct(item,index) { |
|||
if (item.store==0) { |
|||
uni.showToast({ |
|||
title:"库存不足！", |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.productIndex = index |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: #f2f4f7; |
|||
padding-bottom: 210rpx; |
|||
} |
|||
|
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
button { |
|||
margin: 0; |
|||
padding: 0; |
|||
outline: none; |
|||
border-radius: 0; |
|||
background-color: transparent; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
button::after { |
|||
border: none; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 484rpx; |
|||
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: 484rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 484rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 484rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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: 400; |
|||
color: rgba(248, 74, 86, 1); |
|||
|
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
&:after { |
|||
content: '起'; |
|||
display: inline-block; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #8D8D8D; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tag { |
|||
margin:24rpx 0 15rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: nowrap; |
|||
overflow-x: auto; |
|||
|
|||
.tag-item { |
|||
border-radius: 7rpx; |
|||
border: 1px solid #71B580; |
|||
margin-right: 14rpx; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #71B580; |
|||
padding: 8rpx 16rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
margin-top: 20rpx; |
|||
font-family: PingFang; |
|||
font-weight: 500; |
|||
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; |
|||
|
|||
.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: 254rpx; |
|||
height: 78rpx; |
|||
background: #F84A56; |
|||
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-image: linear-gradient(135deg, #9EE4FE, #7FD491); |
|||
color: rgba(0, 0, 0, 1); |
|||
} |
|||
|
|||
.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%; |
|||
height: 120rpx; |
|||
background: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-radius: 0 0 12rpx 12rpx; |
|||
border-top: solid 2rpx rgba(216, 216, 216, 1); |
|||
|
|||
.sp-box-left { |
|||
display: flex; |
|||
margin-left: 38rpx; |
|||
align-items: center; |
|||
|
|||
:first-child { |
|||
font-family: PingFang; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
:last-child { |
|||
width: 403rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
image { |
|||
width: 16rpx; |
|||
height: 28rpx; |
|||
margin-right: 38rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,245 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view :class="['item',selectItem.id==item.id?'active':'']" v-for="(item,index) in list" :key="index" @click="selectPoint(item)"> |
|||
<view class="item-point-title"> |
|||
<view class="name">{{item.extract_name}}</view> |
|||
<view class="addressStr"> |
|||
<view class="flex-shrink-0">地址：</view> |
|||
<view class="text-overflow">{{item.detail_addr}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="item-point-guide" @click.stop="goMap(item)"> |
|||
<view> |
|||
<image :src="showImg('/uploads/20240712/aae304f56ee7fd00b71c4524f56c7033.png')" mode="aspectFill" class="mapPoint"></image> |
|||
</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: this.$store.state.user.location.lon || '120.63132', |
|||
// lat: this.$store.state.user.location.lat || '31.30227', |
|||
} |
|||
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 |
|||
}, |
|||
|
|||
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:this.selectItem}) |
|||
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 { |
|||
width: 697rpx; |
|||
height: 180rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 28rpx; |
|||
padding: 26rpx; |
|||
padding-right: 0; |
|||
display: flex; |
|||
|
|||
.item-point-title{ |
|||
flex: 1; |
|||
width: 10rpx; |
|||
} |
|||
.item-point-guide{ |
|||
width:140rpx; |
|||
flex-shrink: 0; |
|||
border-left: 1px solid #D8D8D8; |
|||
color: #FEB419; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
} |
|||
.mapPoint{ |
|||
width: 45rpx; |
|||
height: 49rpx; |
|||
} |
|||
} |
|||
.item.active{ |
|||
border: 1px solid #FEB419; |
|||
} |
|||
.name { |
|||
display: flex; |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
height: 85rpx; |
|||
|
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
text-overflow: ellipsis; |
|||
white-space: normal; |
|||
} |
|||
.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