414 lines
8.6 KiB
Vue
414 lines
8.6 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="top">
|
|
|
|
<view class="t-title">{{arr.title}}</view>
|
|
<view class="t-xtitle">随时退 | 过期退 | 需预约</view>
|
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
|
:duration="duration">
|
|
<swiper-item v-for="(item,index) in arr.imageList" :key="index" style="border-radius: 6px;"
|
|
@click="getcarPics(index)">
|
|
<view class="swiper-box">
|
|
<image :src="baseUrl + item"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<u-overlay :show="show" @click="this.show = false">
|
|
<view class="top-x">
|
|
<text>X</text>
|
|
</view>
|
|
<view class="warp">
|
|
<view class="jtou1" @click.stop="getsyt()">
|
|
<uni-icons type="left" size="30" color="#fffff"></uni-icons>
|
|
</view>
|
|
<movable-area style="width: 80%; height: auto;">
|
|
<movable-view :x="x" :y="y" direction="all" @change="onChange" class="ma-img" scale="true">
|
|
<image :src="xzimg" mode="aspectFit"></image>
|
|
</movable-view>
|
|
</movable-area>
|
|
|
|
<view class="jtou" @click.stop="getxyt()">
|
|
<uni-icons type="right" size="30" color="#fffff"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</u-overlay>
|
|
<view class="dis">
|
|
<text>评价</text>
|
|
<uni-rate :touchable="false" size="18" :value="5" @change="onChange" />
|
|
</view>
|
|
<view class="dis">
|
|
<text class="senju">￥{{arr.realPrice}}</text>
|
|
<text v-if="arr.realPrice != arr.originalPrice " class="xhui"
|
|
style="text-decoration:line-through">{{arr.originalPrice}}</text>
|
|
</view>
|
|
<view class="bqing" v-if="arr.isSpecial != 0">
|
|
<text>特价商品</text>
|
|
</view>
|
|
<view class="flex-row justify-between align-center">
|
|
<view>
|
|
<view class="dis">
|
|
<view class="characters">优惠</view>
|
|
<view class="z-box">
|
|
<text>折</text>
|
|
</view>
|
|
<view class="characters">白银会员{{arrdata.silver}}折</view>
|
|
</view>
|
|
<view class="dis">
|
|
<view class="characters">优惠</view>
|
|
<view class="z-box">
|
|
<text>折</text>
|
|
</view>
|
|
<view class="characters">黄金会员{{arrdata.gold}}折</view>
|
|
</view>
|
|
<view class="dis">
|
|
<view class="characters">优惠</view>
|
|
<view class="z-box">
|
|
<text>折</text>
|
|
</view>
|
|
<view class="characters">白金会员{{arrdata.platinum}}折</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<u-button text="升级会员" :customStyle="{color:'#ffffff',width:'200rpx'}"
|
|
@click="this.$tab.navigateTo('/pages/tabBar/mine/Recharge')" throttleTime="1000"
|
|
color="linear-gradient(to right, rgb(248, 80, 33), rgb(248, 122, 19))"></u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 详情区域 -->
|
|
<view class="content">
|
|
<view class="t-title">详情</view>
|
|
|
|
<u-parse :content="arr.goodsDesc" :tagStyle="style"></u-parse>
|
|
|
|
</view>
|
|
<view style="width: 100%; height: 50px;"></view>
|
|
<view class="content-bottom">
|
|
<view class="senju">￥{{arr.realPrice}}</view>
|
|
<view class="janniu" @click="getorder(arr.id)">
|
|
<text>立即支付</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
carPicsindex: 0,
|
|
xzimg: "",
|
|
show: false,
|
|
arr: {},
|
|
style: {
|
|
img: 'width: 100%;margin: 10px auto'
|
|
},
|
|
arrdata: {},
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
|
htmlUrl: getApp().globalData.config.htmlUrl,
|
|
id: '',
|
|
descriptionStr: '',
|
|
background: ['color1', 'color2', 'color3'],
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 2000,
|
|
duration: 500,
|
|
rateValue: 0, //评分
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
|
|
// 模拟动态赋值
|
|
setTimeout(() => {
|
|
this.rateValue = 3
|
|
}, 1000)
|
|
},
|
|
onShow() {
|
|
this.getdetails()
|
|
},
|
|
methods: {
|
|
getsyt() {
|
|
let lenghts = this.arr.imageList.length
|
|
console.log('a', this.carPicsindex);
|
|
if (this.carPicsindex != 0) {
|
|
this.carPicsindex--
|
|
} else {
|
|
uni.showToast({
|
|
title: '没有上一张了！',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.xzimg = this.baseUrl + this.arr.imageList[this.carPicsindex]
|
|
},
|
|
getxyt() {
|
|
let lenghts = this.arr.imageList.length
|
|
if (lenghts >= this.carPicsindex) {
|
|
this.carPicsindex++
|
|
} else {
|
|
uni.showToast({
|
|
title: '已经是最后一张了！',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.xzimg = this.baseUrl + this.arr.imageList[this.carPicsindex]
|
|
},
|
|
getcarPics(index) {
|
|
// console.log(this.carPics[index]);
|
|
this.carPicsindex = index
|
|
this.show = true
|
|
this.xzimg = this.baseUrl + this.arr.imageList[index]
|
|
|
|
},
|
|
async getdetails() {
|
|
console.log(this.id);
|
|
const res = await this.$request({
|
|
url: '/system/repaiGoods/' + this.id,
|
|
})
|
|
console.log('获取我的详情页', res);
|
|
this.arr = res.data
|
|
|
|
this.getorderx()
|
|
// this.arr.goodsDesc = this.handleDeschtml(this.arr.goodsDesc)
|
|
},
|
|
//获取支付页信息
|
|
async getorderx() {
|
|
|
|
console.log('123123123', this.arr);
|
|
const res = await this.$request({
|
|
url: '/orderApi/orderDetail?goodsId=' + this.arr.id + '&type=qx',
|
|
})
|
|
console.log('获取支付页信息', res);
|
|
this.arrdata = res.data
|
|
// if(res.data == 11111111 ){
|
|
// uni.navigateTo({
|
|
// url:'/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
|
|
// })
|
|
// }
|
|
},
|
|
getorder(id) {
|
|
console.log('111');
|
|
uni.navigateTo({
|
|
url: '/subRepairPages/order/order?id=' + id
|
|
})
|
|
},
|
|
handleDeschtml(detail) {
|
|
// while(detail.indexOf('src="/')>=0){
|
|
// detail = detail.replace('src=/"','src="'+this.htmlUrl+"/")
|
|
// }
|
|
// return detail
|
|
},
|
|
onChange(e) {
|
|
console.log('rate发生改变:' + JSON.stringify(e))
|
|
// console.log(this.rateValue);
|
|
},
|
|
|
|
changeIndicatorDots(e) {
|
|
this.indicatorDots = !this.indicatorDots
|
|
},
|
|
changeAutoplay(e) {
|
|
this.autoplay = !this.autoplay
|
|
},
|
|
intervalChange(e) {
|
|
this.interval = e.target.value
|
|
},
|
|
durationChange(e) {
|
|
this.duration = e.target.value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.top-x {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.warp {
|
|
width: 100%;
|
|
margin: 60px auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
.container {
|
|
box-sizing: border-box;
|
|
background-color: #F4F4F4;
|
|
}
|
|
|
|
.top {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 15px;
|
|
background-color: white;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.content {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 15px;
|
|
background-color: white;
|
|
}
|
|
|
|
.content-bottom {
|
|
box-sizing: border-box;
|
|
padding: 0px 25px;
|
|
height: 50px;
|
|
background-color: white;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.swiper-box {
|
|
width: 100%;
|
|
height: 175px;
|
|
background-color: powderblue;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.dis {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.t-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.t-xtitle {
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.senju {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #F85021;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.xhui {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #B5B5B5;
|
|
}
|
|
|
|
.bqing {
|
|
width: 60px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
background: #FFEAEA;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FF4C4C;
|
|
font-size: 12px;
|
|
margin: 15px 0px;
|
|
}
|
|
|
|
.characters {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
}
|
|
|
|
.z-box {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
// font-style: italic;
|
|
background-color: #F85021;
|
|
color: white;
|
|
box-sizing: border-box;
|
|
padding: 1px 3px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.janniu {
|
|
width: 90px;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #F85021;
|
|
color: white;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.yban1 {
|
|
width: 40%;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.yban {
|
|
width: 60%;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.jtou1 {
|
|
position: fixed;
|
|
left: 5px;
|
|
top: 40%;
|
|
z-index: 999;
|
|
color: white;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.jtou {
|
|
position: fixed;
|
|
right: 5px;
|
|
top: 40%;
|
|
z-index: 999;
|
|
color: white;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ma-img {
|
|
width: 100%;
|
|
height: 260px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |