275 lines
8.6 KiB
Vue
275 lines
8.6 KiB
Vue
<template>
|
||
<view class="" v-if="istrue">
|
||
<!-- model -->
|
||
<view v-show="show" @click="show=false"
|
||
style="width: 100%;height: 100vh;position: fixed;z-index: 1;background: rgba(0,0,0,.6);">
|
||
</view>
|
||
<view :class="['t1','ptb20','bgwhite','flex_around','flex_items']">
|
||
<view v-for="(item,index) in list" :key="index" class="flex_column flex_items">
|
||
<text :class="['f28','bold',current==index?'chose':'nochose']"
|
||
@click="change(index)">{{item.name}}</text>
|
||
<view v-if="index==current" class="mt10"
|
||
style="height: 6rpx;width:30rpx;background: linear-gradient(157deg, #FFBCA0 0%, #FF8A5D 100%);">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- main -->
|
||
<view>
|
||
<view v-if="current==0" class="jj">
|
||
<view>
|
||
<!-- t2 -->
|
||
<view class="mt30">
|
||
<image :src="info.main_image" style="width: 100%;height: 740rpx;" mode=""></image>
|
||
</view>
|
||
<!-- t3 -->
|
||
<view class="p30 bgwhite">
|
||
<!-- <view v-if="info.immediate_reduction_price!=0" class="flex_items flex_center"
|
||
style="width: 180rpx;height: 48rpx;background: linear-gradient(90deg, #FC563A 0%, #FF9348 100%);border-radius: 0rpx 38rpx 38rpx 0rpx;">
|
||
<text class="f32" style="color: #fff;">立省{{info.immediate_reduction_price}}分</text>
|
||
</view> -->
|
||
<view class="bold mt30" style="color: #333;">{{info.name}}</view>
|
||
<view class="flex_between flex_items mt20">
|
||
<view class="flex_start flex_items">
|
||
<text class="bold f32" style="color: #EA5404;">{{info.price}}积分</text>
|
||
<view class="pos ml20">
|
||
<text class="f26" style="color: #B2B2B2;">{{info.real_price}}积分</text>
|
||
<view class="abs" style="width: 100%;height:2rpx;background:#b8b8b8;top:22rpx;">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="f26" style="color: #b2b2b2;">
|
||
已兑：9999件
|
||
</view> -->
|
||
</view>
|
||
<view class="flex_between flex_items pb30 mt30 bbe9s">
|
||
<text class="f28" style="color: #333333;">规格</text>
|
||
<text class="f24" style="color: #666;">{{info.spec_name}}</text>
|
||
<u-icon name="arrow-right" color="#666666" size="15"></u-icon>
|
||
</view>
|
||
<view class="flex_between flex_items pb30 mt30 bbe9s">
|
||
<text class="f28" style="color: #333333;">商家</text>
|
||
<text class="f24" style="color: #666;">成都蓝色网络科技有限公司</text>
|
||
<u-icon name="arrow-right" color="#666666" size="15"></u-icon>
|
||
</view>
|
||
<view class="pt30 flex_start flex_items">
|
||
<image :src="imgUrl+'zs.png'" style="width: 24rpx;height: 24rpx;" mode=""></image>
|
||
<text class="f24 ml10" style="color: #666;">正品保障</text>
|
||
<image :src="imgUrl+'zs.png'" class="ml35" style="width: 24rpx;height: 24rpx;" mode="">
|
||
</image>
|
||
<text class="f24 ml10" style="color: #666;">积分兑换</text>
|
||
</view>
|
||
</view>
|
||
<!-- t4 -->
|
||
<view class="t4 p30 bgwhite mt30">
|
||
<view class="bold f40" style="color: #3D3D3D;">宝贝详情</view>
|
||
<!-- <view v-html="info.introduce" class="ql-editor"></view> -->
|
||
<view class="flex_column flex_items mt20">
|
||
<image v-for="(item,index) in info.detail_image" :key="index" :src="item"
|
||
style="width: 100%;" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view style="height: 130rpx;width: 100%;"></view>
|
||
</view>
|
||
</view>
|
||
<view v-if="current==1">
|
||
<view class="bgwhite p30">
|
||
<view class="flex_start flex_items p30 bbe9s">
|
||
<text class="f28" style="color: #333333;">商品</text>
|
||
<view class="f26 ml35" style="color: #666666;width:520rpx;">{{info.name}}</view>
|
||
</view>
|
||
<view class="flex_start flex_items p30 bbe9s">
|
||
<text class="f28" style="color: #333333;">公司</text>
|
||
<text class="f26 ml35" style="color: #666666;">成都蓝色网络科技有限公司</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="current==2">
|
||
<xz></xz>
|
||
</view>
|
||
</view>
|
||
<!-- t5 -->
|
||
<view class="bgwhite p30 flex_start flex_items" style="position: fixed;width: 100%;left: 0;bottom: 0;">
|
||
<view class="flex_start flex_items">
|
||
<image :src="imgUrl+'dd.png'" style="width: 40rpx;height: 40rpx;" mode=""></image>
|
||
<text class="f24 bold" style="color: #333333;" @click="gomyorder">我的订单</text>
|
||
<view @click="goup" class="flex_center flex_items ml35"
|
||
style="width: 494rpx;height: 72rpx;background: linear-gradient(90deg, #FF898E 0%, #F43139 100%);border-radius: 68rpx 68rpx 68rpx 68rpx;">
|
||
<text style="color: #fff;" class="f28">立即兑换</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- myorder -->
|
||
<view v-show="show" class="bgwhite dk">
|
||
<view class="plr50 ptb50 flex_column">
|
||
<text class="f28">商品参数</text>
|
||
<view class="mt40 flex_start flex_items">
|
||
<view>
|
||
<image :src="info.main_image" style="width: 178rpx;height: 178rpx;border-radius: 12rpx;"
|
||
mode="">
|
||
</image>
|
||
</view>
|
||
<view class="ml20 flex_column" style="height: 178rpx;">
|
||
<!-- <view v-if="info.immediate_reduction_price!=0" class="f-center"
|
||
style="width: 180rpx;height: 48rpx;background: linear-gradient(90deg, #FC563A 0%, #FF9348 100%);border-radius: 0rpx 38rpx 38rpx 0rpx;">
|
||
<text class="f32" style="color: #fff;">立省{{info.immediate_reduction_price}}分</text>
|
||
</view> -->
|
||
<view class="flex_between flex_items">
|
||
<view style="color: #EA5404;" class="f32 mt30 bold">{{info.price}}积分</view>
|
||
<view class="pos ml20 mt30" style="width: 120rpx;color: #D9D9D9;">
|
||
<text class="f26" style="color: #B2B2B2;">{{info.real_price}}积分</text>
|
||
<view class="abs" style="width: 100%;height:2rpx;background:#b8b8b8;top:22rpx;">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex_start flex_items f26 mt30" style="color: #888888;">
|
||
<text>已选择：{{tags[curindex]}}</text>
|
||
<!-- style="margin-left: 100rpx;" -->
|
||
<text class="" style="margin-left: 50rpx;">库存：{{info.stock}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="f28 mt40">规格</text>
|
||
<view v-if="info.spec_name!=null" class="mt30 flex_warp flex_items">
|
||
<view v-for="(item,index) in tags" :key="index"
|
||
:class="['f-center','ptb10','plr30','mr30',index==curindex?'chosem':'nochosem']"
|
||
@click="chosem(index)">{{item}}
|
||
</view>
|
||
</view>
|
||
<view @click="okdiu" class="flex_items flex_center mt80"
|
||
style="width: 638rpx;height: 108rpx;background: linear-gradient(90deg, #FF898E 0%, #F43139 100%);border-radius: 54rpx;color: #fff;">
|
||
<text class="f32 bold">确认兑换</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import xz from "./xz.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [{
|
||
name: '商品简介'
|
||
}, {
|
||
name: '商品参数'
|
||
}, {
|
||
name: '购买须知',
|
||
}],
|
||
current: 0,
|
||
curindex: 0,
|
||
show: false,
|
||
tags: [{
|
||
tt: "10元"
|
||
}, {
|
||
tt: "20元"
|
||
}, {
|
||
tt: "特惠微信100元立减金"
|
||
}, ],
|
||
istrue: false,
|
||
id: "",
|
||
info: {},
|
||
imgUrl: ""
|
||
}
|
||
},
|
||
components: {
|
||
xz
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id
|
||
this.imgUrl = this.api.imgUrl
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
getData() {
|
||
uni.showLoading({
|
||
title: "加载中..."
|
||
})
|
||
this.api.getdetail({
|
||
id: this.id,
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == 200) {
|
||
this.info = res.data.data
|
||
this.info.detail_image = JSON.parse(this.info.detail_image)
|
||
this.tags = []
|
||
this.tags.push(res.data.data.spec_name)
|
||
uni.hideLoading()
|
||
this.istrue = true
|
||
} else {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: res.data.message
|
||
})
|
||
}
|
||
})
|
||
},
|
||
change(index) {
|
||
this.current = index;
|
||
},
|
||
goup() {
|
||
this.show = true
|
||
},
|
||
chosem(index) {
|
||
this.curindex = index
|
||
},
|
||
gomyorder() {
|
||
uni.switchTab({
|
||
url: "/pages/order/index"
|
||
})
|
||
},
|
||
okdiu() {
|
||
let data = {
|
||
img: this.info.main_image,
|
||
name: this.info.name,
|
||
price: this.info.price,
|
||
real_price: this.info.real_price,
|
||
id: this.info.id
|
||
}
|
||
uni.navigateTo({
|
||
url: "/pages/product/Pay?data=" + JSON.stringify(data)
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #f5f5f5 !important;
|
||
}
|
||
|
||
.chose {
|
||
color: #003A6E;
|
||
}
|
||
|
||
.nochose {
|
||
color: #888888;
|
||
}
|
||
|
||
.dk {
|
||
z-index: 2;
|
||
width: 100%;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
position: fixed;
|
||
border-top-left-radius: 12rpx;
|
||
border-top-right-radius: 12rpx;
|
||
}
|
||
|
||
.nochosem {
|
||
background: #F2F2F7;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
color: #666666;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.chosem {
|
||
background: #F5393A;
|
||
color: #fff;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
</style> |