540 lines
11 KiB
Vue
540 lines
11 KiB
Vue
<template>
|
||
<view class="content bg" style="background-image: url('@@:static/details_bg.png');">
|
||
|
||
<view class="back" @click="toBack()">
|
||
<image src="@@:static/ic_back.png" mode=""></image>
|
||
</view>
|
||
|
||
<view class="title bg myZt-500w" style=" background-image: url('@@:static/title_bg.png');">
|
||
<text>坂本日常 吧唧</text>
|
||
</view>
|
||
|
||
<view class="v_fun">
|
||
<image src="@@:static/bags.png" mode=""></image>
|
||
|
||
<image src="@@:static/details.png" @click="openDetailsPop()" mode="">
|
||
</image>
|
||
|
||
<image src="@@:static/share.png" mode=""></image>
|
||
</view>
|
||
|
||
|
||
<!-- ip背景 -->
|
||
<view class="ipBg bg" style="background-image: url('@@:static/goods_bg.png');">
|
||
|
||
<!-- 轮播图 -->
|
||
<view class="" style="width: 100%; height: 448.61rpx;margin-top: 54.86rpx;">
|
||
<special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner>
|
||
</view>
|
||
|
||
|
||
<view class="tip myZt-500w">
|
||
<image src="@@:static/ic_prompt.png" style="width: 513.89rpx; height: 51.39rpx; position: absolute;">
|
||
</image>
|
||
<text style="position: absolute; font-size: 20.83rpx; color: #8C8574;">运费10元 满100包邮 3-5个工作日发货</text>
|
||
</view>
|
||
|
||
|
||
<!-- 购买按钮 -->
|
||
<view class="pay" @click="openPayPop()">
|
||
<image src="@@:static/ic_pay.png" mode=""></image>
|
||
<view class="price">
|
||
<text class="myZt-600w">￥20</text>
|
||
</view>
|
||
</view>
|
||
|
||
<image class="join" src="@@:static/ic_join.png" mode=""></image>
|
||
|
||
</view>
|
||
|
||
<!-- 详情弹窗 -->
|
||
<uni-popup ref="detailsPop" type="bottom" :safe-area='false'>
|
||
<view class="detailsPop bg" style="background-image: url('@@:static/specifics_bg.png');">
|
||
<view class="popTitle">
|
||
<view style="width: 30rpx;"></view>
|
||
<text class="myZt-600w" style="font-size: 31.25rpx; color: #695C4E;">商品详情</text>
|
||
<view class="popClose" style="" @click="closeDetailsPop()">
|
||
<image src="@@:static/ic_close.png" style="" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
<image class="detailsImg" src="" mode="">
|
||
</image>
|
||
|
||
<text class="detailsBrand myZt-600w">品牌：</text>
|
||
<text class="detailsSize myZt-600w">尺寸：直径约56mm</text>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
<!-- 购买弹窗 -->
|
||
<uni-popup ref="payPop" type="bottom" :safe-area='false'>
|
||
<view class="payPop bg myZt-500w" style=" background-image: url('@@:static/pay_pop_bg.png');">
|
||
|
||
<view class="popTitle">
|
||
<view style="width: 30rpx;"></view>
|
||
<text style="font-size: 22.22rpx; color: #8C8574;">本商品不可退换 未成年人请谨慎购买</text>
|
||
<view class="popClose" @click="closePayPop()()">
|
||
<image src="@@:static/ic_close.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 地址 -->
|
||
<view class="payPopAddress" @click="toAddress()">
|
||
|
||
<image class="image1" src="@@:static/ic_address.png" mode=""></image>
|
||
|
||
<text>某某 河南省河南省河南省河南省</text>
|
||
|
||
<image class="image2" src="@@:static/ic_right_arrow.png" mode=""></image>
|
||
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="payPopInfo">
|
||
|
||
<image class="goodsImg" src="" mode=""></image>
|
||
|
||
<text class="goodsTitle">坂本日常 吧唧</text>
|
||
|
||
<text class="goodsName">坂本</text>
|
||
|
||
|
||
<view class="goodsPrice">
|
||
<text class="text1">￥20</text>
|
||
<text class="text2">库存紧张</text>
|
||
</view>
|
||
|
||
<!-- 加减数量 -->
|
||
<view class="addSub">
|
||
<image src="@@:static/ic_minus.png" @click="decrease(index)"
|
||
style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
||
<text
|
||
style="width: 70.83rpx; font-size: 29.17rpx; color: #6E5B51; text-align: center;">{{goodsNum}}</text>
|
||
<image src="@@:static/ic_add.png" @click="increase(index)"
|
||
style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
<!-- 支付方式 -->
|
||
|
||
<view class="payPopPayment">
|
||
<text style="margin-left: 20.14rpx;">支付方式</text>
|
||
<text style="margin-right: 20.14rpx;">微信支付</text>
|
||
</view>
|
||
<!-- 优惠券 -->
|
||
<view class="payPopPayment">
|
||
<text style="margin-left: 20.14rpx;">优惠券</text>
|
||
<text style="margin-right: 20.14rpx;">无可用 ›</text>
|
||
</view>
|
||
|
||
<!-- 消费说明 -->
|
||
<view class="payExplain">
|
||
|
||
</view>
|
||
|
||
<view class="payAgreement">
|
||
<image src="@@:static/ic_check.png" style="width: 23.61rpx; height: 23.61rpx;" mode=""></image>
|
||
<text style="color: #8C8574; margin-left: 10rpx;">同意 <text style="color: #FCAD6F;"> 《用户协议》</text>
|
||
</text>
|
||
</view>
|
||
<image class="conPay" src="@@:static/confirm_pay.png" mode=""></image>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import specialBanner from '../../components/specialBanner.vue'
|
||
export default {
|
||
components: {
|
||
specialBanner
|
||
},
|
||
onLoad(options) {
|
||
console.log(options.id);
|
||
},
|
||
data() {
|
||
return {
|
||
goodsNum: 1,
|
||
bannerList: [{
|
||
picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
|
||
path: ''
|
||
}, {
|
||
picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
|
||
path: ''
|
||
}, {
|
||
picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
|
||
path: ''
|
||
}, {
|
||
picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
|
||
path: ''
|
||
}],
|
||
swiperConfig: {
|
||
indicatorDots: false,
|
||
indicatorColor: 'rgba(255, 255, 255, .4)',
|
||
indicatorActiveColor: 'rgba(255, 255, 255, 1)',
|
||
autoplay: false,
|
||
interval: 3000,
|
||
duration: 300,
|
||
circular: true,
|
||
previousMargin: '58rpx',
|
||
nextMargin: '58rpx'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
toBack() {
|
||
uni.navigateBack();
|
||
},
|
||
|
||
openDetailsPop() {
|
||
this.$refs.detailsPop.open()
|
||
},
|
||
closeDetailsPop() {
|
||
this.$refs.detailsPop.close()
|
||
},
|
||
|
||
openPayPop() {
|
||
this.$refs.payPop.open()
|
||
},
|
||
closePayPop() {
|
||
this.$refs.payPop.close()
|
||
},
|
||
|
||
// 增加数量
|
||
increase(index) {
|
||
this.goodsNum++;
|
||
},
|
||
|
||
// 减少数量
|
||
decrease(index) {
|
||
if (this.goodsNum > 1) {
|
||
this.goodsNum--;
|
||
}
|
||
|
||
},
|
||
|
||
//地址
|
||
toAddress() {
|
||
uni.navigateTo({
|
||
url: '/pages/me/address-page'
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.back {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: fixed;
|
||
top: 118.06rpx;
|
||
left: 30.56rpx;
|
||
|
||
image {
|
||
width: 14.58rpx;
|
||
height: 27.08rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
width: 550rpx;
|
||
height: 93.06rpx;
|
||
margin-top: 225.69rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
font-size: 23.61rpx;
|
||
color: #6E5B51;
|
||
}
|
||
}
|
||
|
||
.v_fun {
|
||
width: 550rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin-top: 31.94rpx;
|
||
|
||
image {
|
||
width: 111.81rpx;
|
||
height: 81.94rpx;
|
||
}
|
||
}
|
||
|
||
.ipBg {
|
||
width: 100%;
|
||
height: 1118.75rpx;
|
||
margin-top: 76.39rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tip {
|
||
margin: 120rpx auto 0;
|
||
width: 513.89rpx;
|
||
height: 51.39rpx;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.pay {
|
||
margin: 59.03rpx auto 0;
|
||
position: relative;
|
||
width: 561.81rpx;
|
||
height: 161.11rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 561.81rpx;
|
||
height: 161.11rpx;
|
||
position: absolute;
|
||
}
|
||
|
||
.price {
|
||
width: 150rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
bottom: 38rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
font-size: 27.78rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.join {
|
||
width: 561.81rpx;
|
||
height: 122.92rpx;
|
||
margin: 0 auto 0;
|
||
}
|
||
|
||
.popTitle {
|
||
width: 688.88rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin-top: 36.11rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.detailsPop {
|
||
width: 100%;
|
||
height: 819.44rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
|
||
|
||
.detailsImg {
|
||
width: 447.92rpx;
|
||
height: 447.92rpx;
|
||
background-color: white;
|
||
margin-top: 85.42rpx;
|
||
}
|
||
|
||
.detailsBrand {
|
||
font-size: 25rpx;
|
||
color: #695C4E;
|
||
width: 100%;
|
||
margin-left: 38.19rpx;
|
||
margin-top: 81.94rpx;
|
||
}
|
||
|
||
.detailsSize {
|
||
font-size: 25rpx;
|
||
color: #695C4E;
|
||
width: 100%;
|
||
margin-left: 38.19rpx;
|
||
margin-top: 19.44rpx;
|
||
}
|
||
}
|
||
|
||
.popClose {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 19.44rpx;
|
||
height: 19.44rpx;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.payPop {
|
||
width: 100%;
|
||
height: 1002.78rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.payPopAddress {
|
||
width: 690.28rpx;
|
||
height: 62.5rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
margin-top: 22.92rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
|
||
.image1 {
|
||
width: 19.44rpx;
|
||
height: 22.92rpx;
|
||
position: absolute;
|
||
left: 19.44rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 22.22rpx;
|
||
color: #6E5B51;
|
||
left: 52.08rpx;
|
||
position: absolute;
|
||
}
|
||
|
||
.image2 {
|
||
width: 13.19rpx;
|
||
height: 22.92rpx;
|
||
position: absolute;
|
||
right: 26.39rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.payPopInfo {
|
||
width: 690.28rpx;
|
||
height: 161.81rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
margin-top: 22.92rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
|
||
.goodsImg {
|
||
width: 120.83rpx;
|
||
height: 120.83rpx;
|
||
background-color: #AAAAAA;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: 20.14rpx;
|
||
}
|
||
|
||
.goodsTitle {
|
||
font-size: 23.61rpx;
|
||
color: #6E5B51;
|
||
position: absolute;
|
||
left: 163.19rpx;
|
||
top: 28.47rpx;
|
||
}
|
||
|
||
.goodsName {
|
||
font-size: 19.44rpx;
|
||
color: #8C8574;
|
||
position: absolute;
|
||
left: 163.19rpx;
|
||
top: 64.58rpx;
|
||
}
|
||
|
||
.goodsPrice {
|
||
display: flex;
|
||
flex-direction: row;
|
||
position: absolute;
|
||
left: 160.58rpx;
|
||
bottom: 22.22rpx;
|
||
|
||
.text1 {
|
||
font-size: 29.17rpx;
|
||
color: #6E5B51;
|
||
}
|
||
|
||
.text2 {
|
||
font-size: 19.44rpx;
|
||
color: #8C8574;
|
||
margin-left: 10rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.addSub {
|
||
display: flex;
|
||
flex-direction: row;
|
||
position: absolute;
|
||
bottom: 23.61rpx;
|
||
right: 23.61rpx;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.payPopPayment {
|
||
width: 690.28rpx;
|
||
height: 62.5rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 15.28rpx;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
font-size: 22.22rpx;
|
||
color: #8C8574;
|
||
}
|
||
|
||
.payExplain {
|
||
width: 689.58rpx;
|
||
height: 204.17rpx;
|
||
background-color: #FFFFFF;
|
||
margin-top: 15.28rpx;
|
||
}
|
||
|
||
.payAgreement {
|
||
width: 689.58rpx;
|
||
margin: 15.28rpx auto 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
font-size: 22.22rpx;
|
||
}
|
||
|
||
.conPay {
|
||
width: 561.81rpx;
|
||
height: 161.11rpx;
|
||
margin: 30.56rpx auto 0;
|
||
}
|
||
|
||
|
||
}
|
||
</style> |