@ -1,399 +1,437 @@ |
|||||
<template> |
<template> |
||||
<view> |
<view class="u-wrap"> |
||||
|
<view class="search"> |
||||
</view> |
<view class="status_bar"></view> |
||||
</template> |
<view class="search1"> |
||||
|
<navigator url="/pages/index/search"> |
||||
<script> |
<view class="navigation_seach"> |
||||
|
<image src="../../static/img/seach.png" mode=""></image> |
||||
</script> |
<text>search</text> |
||||
|
|
||||
<style> |
|
||||
</style><template> |
|
||||
<view> |
|
||||
<uni-nav-bar :statusBar="true" left-icon="left" title="Review" color="#000000" :fixed="true" @clickLeft="back"> |
|
||||
<block slot="right"> |
|
||||
<view class="nav_right"> |
|
||||
<button @click="reviewSub">Submit</button> |
|
||||
</view> |
|
||||
</block> |
|
||||
</uni-nav-bar> |
|
||||
<view class="body" > |
|
||||
<view class="order_popup_commodity"> |
|
||||
<view class="good_info" > |
|
||||
<view class="good_info_left "> |
|
||||
<view class="good_info_image"> |
|
||||
<image ></image> |
|
||||
</view> |
|
||||
<view class="left_info"> |
|
||||
<view class="info_name">9</view> |
|
||||
<view class="left_info_bottom"> |
|
||||
<view class="info_lable"> |
|
||||
<text>{{}}</text> |
|
||||
<!-- <image src="/static/img/bottom.png" mode=""></image> --> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
</view> |
||||
|
</navigator> |
||||
|
<view class="navigation_title_right"> |
||||
|
<navigator url="/pages/account/wishlist"> |
||||
|
<image src="../../static/img/like_white.png" mode=""></image> |
||||
|
</navigator> |
||||
|
<navigator url="/pages/shippingCart/index" open-type="switchTab"> |
||||
|
<uni-badge :text="sum" type="error" absolute="rightTop"> |
||||
|
<image src="../../static/img/shop_cart1.png" mode=""></image> |
||||
|
</uni-badge> |
||||
|
</navigator> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
</view> |
</view> |
||||
<view class="review"> |
<view class="u-menu-wrap"> |
||||
<view class="review_title"> |
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view category_left" :scroll-top="scrollTop" |
||||
<text>Score</text> |
:scroll-into-view="itemId"> |
||||
<uni-rate size="22" disabledColor="#B22234" v-model="query.comment_rank" active-color="#B22234" :is-fill="false" class="rate" v-if="reviewType==0"/> |
<view v-for="(item,index) in 7" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']" |
||||
<uni-rate size="22" disabledColor="#B22234" v-model="query1.comments[index].comment_rank" active-color="#B22234" :is-fill="false" class="rate" v-else/> |
@tap.stop="swichMenu(index)"> |
||||
|
<text class="u-line-1">可乐</text> |
||||
</view> |
</view> |
||||
<view class="review_content"> |
</scroll-view> |
||||
<image src="../../static/img/write.png" mode=""></image> |
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll"> |
||||
<textarea placeholder="Write reviews" v-if="reviewType==0" v-model="query.comment"></textarea> |
<view class="page-view"> |
||||
<textarea placeholder="Write reviews" v-else v-model="query1.comments[index].comment"></textarea> |
<view class="class-item" :id="'item' + index" v-for="(item , index) in 7" :key="index"> |
||||
|
<view class="item-title"> |
||||
|
<text>奶茶</text> |
||||
</view> |
</view> |
||||
<view class="reason_upload"> |
<view class="good_content"> |
||||
<view class="reason_upload_item" @click="UploadVideo"> |
<view class="good_item" v-for="(item1, index1) in 6" :key="index1"> |
||||
<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""v-if="!VideoSrc"></image> |
<view @click="toDetial(item1)"> |
||||
<image :src="VideoSrc" class="upload_item_camera" mode="" v-else></image> |
<view class="good_item_img"><image src="" alt=""></view> |
||||
<view>Upload the video</view> |
|
||||
</view> |
</view> |
||||
<view class="reason_upload_item" @click="upload()"> |
<text>肯德基</text> |
||||
<!-- <image src="/static/img/camera.png" class="upload_item_camera" mode="" v-if="!imgSrc"></image> |
|
||||
<image :src="imgSrc" class="upload_item_camera" mode="" v-else></image> |
|
||||
|
|
||||
<view>Upload pictures</view> --> |
|
||||
<text ref="input" class="upFile" @click="upload()"></text> |
|
||||
</view> |
</view> |
||||
|
|
||||
<view class="reason_upload_item reason_upload_item1"> |
|
||||
<!-- <image :src="" class="upload_item_image" mode=""></image> --> |
|
||||
</view> |
</view> |
||||
|
|
||||
</view> |
</view> |
||||
<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</view> |
|
||||
</view> |
</view> |
||||
|
</scroll-view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
<script> |
||||
<script module="test" lang="renderjs" > |
import {defaultRequest,defaultRequest4} from '../../api/index.js' |
||||
export default { |
|
||||
mounted() { |
|
||||
// ... |
|
||||
}, |
|
||||
methods: { |
|
||||
upload(){ |
|
||||
console.log(1111) |
|
||||
var input = document.createElement('input'); |
|
||||
input.type = 'file'; |
|
||||
input.accept='image/*'; |
|
||||
this.$refs.input.$el.appendChild(input); |
|
||||
input.onchange = (event) => { |
|
||||
this.fileName = event.path[0].files[0].name; |
|
||||
} |
|
||||
$('input').click(); |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
<script > |
|
||||
import {defaultRequest,defaultRequest2,defaultRequest3} from '../../api/index.js' |
|
||||
import { encryptDes, decryptDes ,encrypt_by_des } from '@/utils/des.js' |
|
||||
import Base64 from 'base-64'; |
|
||||
import cryptoJS from "crypto-js" |
|
||||
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js' |
|
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
orderDate:{}, |
scrollTop: 0, //tab标题的滚动条位置 |
||||
// 评论状态 0、单个评论 1批量评论 |
oldScrollTop: 0, |
||||
reviewType:0, |
current: 0, // 预设当前项的值 |
||||
query:{ |
menuHeight: 0, // 左边菜单的高度 |
||||
_action:'commentordergoods', |
menuItemHeight: 0, // 左边菜单item的高度 |
||||
order_id:'', |
itemId: '', // 栏目右边scroll-view用于滚动的id |
||||
order_sn:'', |
tabbar: [], |
||||
rec_id:'', |
menuItemPos: [], |
||||
goods_id:'', |
arr: [], |
||||
comment:'', |
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度 |
||||
comment_rank:'', |
timer: null, // 定时器 |
||||
commentlabels:'' |
categoryList:'1234567’', |
||||
|
sum:0, |
||||
|
backButtonPress:0, |
||||
|
homeIndex: 0 |
||||
|
} |
||||
}, |
}, |
||||
query1:{ |
onShow() { |
||||
_action:'commentorder', |
this.sum =0 |
||||
order_id:'', |
this.getList() |
||||
order_sn:'', |
|
||||
comments:[] |
|
||||
|
uni.showTabBar() |
||||
}, |
}, |
||||
VideoSrc:'', |
onLoad() { |
||||
imgSrc:'' |
this.getList() |
||||
} |
|
||||
}, |
}, |
||||
methods:{ |
onReady() { |
||||
// 提交评论内容 |
this.getMenuItemTop() |
||||
reviewSub(){ |
|
||||
let data |
|
||||
if(this.reviewType==0){ |
|
||||
this.commentordergoods() |
|
||||
}else{ |
|
||||
// data=this.query1 |
|
||||
this.commentordergoods1() |
|
||||
} |
|
||||
console.info(data) |
|
||||
}, |
}, |
||||
// 单个评论内容 |
// onBackPress(options) { |
||||
commentordergoods(){ |
// this.backButtonPress++; |
||||
defaultRequest2(this.query).then(res=>{ |
// if (this.backButtonPress > 1) { |
||||
console.info(res) |
// plus.runtime.quit(); |
||||
if(res.error==0){ |
// } else { |
||||
uni.showToast({ |
// plus.nativeUI.toast('Click again to exit'); |
||||
icon:'none', |
// } |
||||
title:'Comment successful!' |
// setTimeout(function() { |
||||
}) |
// this.backButtonPress = 0; |
||||
setTimeout(function(){ |
// }, 1000); |
||||
uni.navigateBack() |
// return true; |
||||
},2000) |
// }, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
|
||||
|
// 点击左边的栏目切换 |
||||
|
async swichMenu(index) { |
||||
|
if(this.arr.length == 0) { |
||||
|
await this.getMenuItemTop(); |
||||
} |
} |
||||
}) |
if ( this.current === index) return; |
||||
|
|
||||
|
// this.scrollRightTop = this.oldScrollTop; |
||||
|
this.scrollRightTop = this.arr[index]; |
||||
|
// this.$nextTick(function(){ |
||||
|
// this.scrollRightTop = this.arr[index]; |
||||
|
this.current = index; |
||||
|
// this.leftMenuStatus(index); |
||||
|
|
||||
|
// }) |
||||
}, |
}, |
||||
// 批量评论内容 |
|
||||
commentordergoods1(){ |
toDetial(item){ |
||||
defaultRequest2(this.query1,'comments').then(res=>{ |
console.log(item) |
||||
console.info(res) |
|
||||
if(res.error==0){ |
|
||||
uni.showToast({ |
|
||||
icon:'none', |
|
||||
title:'Comment successful!' |
|
||||
}) |
|
||||
setTimeout(function(){ |
|
||||
uni.navigateBack() |
|
||||
},2000) |
|
||||
} |
|
||||
}) |
|
||||
}, |
}, |
||||
|
getList(){ |
||||
|
|
||||
back(){ |
|
||||
uni.navigateBack() |
|
||||
}, |
}, |
||||
// 上传视频 |
// 获取一个目标元素的高度 |
||||
UploadVideo(){ |
getElRect(elClass, dataVal) { |
||||
var that = this |
new Promise((resolve, reject) => { |
||||
uni.chooseVideo({ |
const query = uni.createSelectorQuery().in(this); |
||||
sourceType: ['camera', 'album'], |
query.select('.' + elClass).fields({ |
||||
success: function (res) { |
size: true |
||||
console.log(res) |
}, res => { |
||||
that.VideoSrc = res.tempFilePath; |
// 如果节点尚未生成,res值为null,循环调用执行 |
||||
} |
if (!res) { |
||||
|
setTimeout(() => { |
||||
|
this.getElRect(elClass); |
||||
|
}, 10); |
||||
|
return; |
||||
|
} |
||||
|
this[dataVal] = res.height; |
||||
|
resolve(); |
||||
|
}).exec(); |
||||
}) |
}) |
||||
}, |
}, |
||||
|
// 观测元素相交状态 |
||||
|
async observer() { |
||||
|
this.tabbar.map((val, index) => { |
||||
|
let observer = uni.createIntersectionObserver(this); |
||||
|
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态 |
||||
|
// 如果跟.right-box底部相交,就动态设置左边栏目的活动状态 |
||||
|
observer.relativeTo('.right-box', { |
||||
|
top: 0 |
||||
|
}).observe('#item' + index, res => { |
||||
|
|
||||
// 上传图片 |
if (res.intersectionRatio > 0) { |
||||
Upimg(){ |
let id = res.id.substring(4); |
||||
let url |
this.leftMenuStatus(id); |
||||
uni.chooseImage({ |
} |
||||
count: 3, //默认9 |
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 |
|
||||
sourceType: ['album'], //从相册选择 |
|
||||
success: function (res) { |
|
||||
console.info(res) |
|
||||
console.log(JSON.stringify(res.tempFilePaths)); |
|
||||
const tempFilePaths = res.tempFiles[0] |
|
||||
console.log(res) |
|
||||
let data ={ |
|
||||
_action:'uploadcommentfile', |
|
||||
atype: 1, |
|
||||
afile:res.tempFiles |
|
||||
} |
|
||||
console.log(data) |
|
||||
defaultRequest(data).then(res =>{ |
|
||||
console.log(res) |
|
||||
}) |
}) |
||||
console.log(data) |
|
||||
defaultRequest(data).then(res =>{ |
|
||||
console.log(res) |
|
||||
}) |
}) |
||||
// uni.uploadFile({ |
}, |
||||
// url:'https://v2.alapi.cn/api/image', |
// 设置左边菜单的滚动状态 |
||||
// filePath: res.tempFilePaths[0], |
async leftMenuStatus(index) { |
||||
// name:'file', |
|
||||
// success: (uploadFileRes) => { |
|
||||
// var that = this |
// console.log(index,'index') |
||||
// // uploadFileRes.data = decryptDes(uploadFileRes.data,"6780f04cf2e211ec86a8005056c00008") |
if (index == this.current) return; |
||||
// console.log(uploadFileRes) |
this.current = index |
||||
// } |
// 如果为0,意味着尚未初始化 |
||||
|
if (this.menuHeight == 0 || this.menuItemHeight == 0) { |
||||
|
await this.getElRect('menu-scroll-view', 'menuHeight'); |
||||
|
await this.getElRect('u-tab-item', 'menuItemHeight'); |
||||
|
|
||||
// }) |
|
||||
uni.getImageInfo({ |
|
||||
src: res.tempFilePaths[0], |
|
||||
success: (path) => { |
|
||||
pathToBase64(path.path).then(base64 => { |
|
||||
console.log(base64); // 这就是转为base64格式的图片 |
|
||||
url = base64 |
|
||||
}) |
|
||||
.catch(error => { |
|
||||
console.error(error) |
|
||||
}) |
|
||||
} |
} |
||||
|
// 将菜单活动item垂直居中 |
||||
|
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2; |
||||
|
}, |
||||
|
// 获取右边菜单每个item到顶部的距离 |
||||
|
getMenuItemTop() { |
||||
|
new Promise(resolve => { |
||||
|
let selectorQuery = uni.createSelectorQuery(); |
||||
|
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => { |
||||
|
// 如果节点尚未生成,rects值为[](因为用selectAll,所以返回的是数组),循环调用执行 |
||||
|
if(!rects.length) { |
||||
|
setTimeout(() => { |
||||
|
this.getMenuItemTop(); |
||||
|
}, 10); |
||||
|
return ; |
||||
|
} |
||||
|
rects.forEach((rect) => { |
||||
|
// 这里减去rects[0].top,是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况) |
||||
|
this.arr.push(rect.top - rects[0].top); |
||||
|
resolve(); |
||||
}) |
}) |
||||
// uni.request({ |
}).exec() |
||||
// url:'https://v2.alapi.cn/api/image', |
}) |
||||
// method:'POST', |
}, |
||||
// data:{ |
// 右边菜单滚动 |
||||
// image:url |
async rightScroll(e) { |
||||
// }, |
// this.current = 0 |
||||
// success(res) { |
this.oldScrollTop = e.detail.scrollTop; |
||||
// console.log(res) |
// if(this.arr.length == 0) { |
||||
|
// await this.getMenuItemTop(); |
||||
// } |
// } |
||||
// }) |
|
||||
|
if(this.timer) return ; |
||||
|
if(!this.menuHeight) { |
||||
|
await this.getElRect('menu-scroll-view', 'menuHeight'); |
||||
|
} |
||||
|
setTimeout(() => { // 节流 |
||||
|
this.timer = null; |
||||
|
// scrollHeight为右边菜单垂直中点位置 |
||||
|
let scrollHeight = e.detail.scrollTop + this.menuHeight / this.categoryList.length; |
||||
|
for (let i = 0; i < this.arr.length; i++) { |
||||
|
let height1 = this.arr[i]; |
||||
|
let height2 = this.arr[i + 1]; |
||||
|
// this.scrollRightTop = this.arr[i]; |
||||
|
// 如果不存在height2,意味着数据循环已经到了最后一个,设置左边菜单为最后一项即可 |
||||
|
if (!height2 || scrollHeight >=height1 && scrollHeight < height2) { |
||||
|
|
||||
|
this.leftMenuStatus(i); |
||||
|
|
||||
|
return ; |
||||
} |
} |
||||
}); |
|
||||
} |
} |
||||
}, |
}, 10) |
||||
onLoad(e) { |
|
||||
let datas=JSON.parse(e.data) |
|
||||
this.orderDate=datas |
|
||||
if(datas.order_goods.length>1){ |
|
||||
this.reviewType=1 |
|
||||
this.query1.order_id=datas.order_id |
|
||||
this.query1.order_sn=datas.order_sn |
|
||||
datas.order_goods.map(item=>{ |
|
||||
let data={ |
|
||||
rec_id:item.rec_id, |
|
||||
goods_id:item.goods_id, |
|
||||
comment:'', |
|
||||
comment_rank:'', |
|
||||
commentlabels:item.goods_attr.replace(/\s\n/g,' ') |
|
||||
} |
|
||||
this.query1.comments.push(data) |
|
||||
}) |
|
||||
}else{ |
|
||||
this.query.order_id=datas.order_id |
|
||||
this.query.order_sn=datas.order_sn |
|
||||
this.query.rec_id=datas.order_goods[0].rec_id |
|
||||
this.query.goods_id=datas.order_goods[0].goods_id |
|
||||
this.commentlabels=datas.order_goods[0].goods_attr.replace(/\s\n/g,' ') |
|
||||
} |
|
||||
}, |
|
||||
filters:{ |
|
||||
goodsAttr(e){ |
|
||||
return e.replace(/\s\n/g,';'); |
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.review{ |
.u-wrap { |
||||
padding: 0 26rpx; |
height: calc(100vh); |
||||
padding-top: 35.33rpx; |
/* #ifdef H5 */ |
||||
|
height: calc(100vh - var(--window-top)); |
||||
|
/* #endif */ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.search{ |
||||
|
width: 100%; |
||||
|
background-color:#000; |
||||
|
box-sizing: border-box; |
||||
|
padding: 33.33rpx 26.67rpx; |
||||
|
|
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
z-index: 99; |
||||
|
// border-bottom: 1px solid #F5F6FA; |
||||
|
|
||||
.review_title{ |
.search1{ |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
font-weight: bold; |
justify-content: space-between; |
||||
font-size: 32rpx; |
|
||||
margin-bottom: 44rpx; |
.navigation_seach{ |
||||
.rate{ |
width: 546.67rpx; |
||||
margin-left: 24.67rpx; |
background-color: #F5F6FA; |
||||
} |
border-radius: 6.67rpx; |
||||
} |
height: 66.67rpx; |
||||
.review_content{ |
|
||||
display: flex; |
display: flex; |
||||
|
align-items: center; |
||||
|
color: #8F9094; |
||||
|
border-radius: 33rpx; |
||||
|
font-size: 26.67rpx; |
||||
|
padding-left: 25rpx; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
image{ |
image{ |
||||
width: 29.33rpx; |
width: 29.33rpx; |
||||
height: 29.33rpx; |
height: 29.33rpx; |
||||
} |
margin-right: 22rpx; |
||||
textarea{ |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 400; |
|
||||
width: 100%; |
|
||||
height: 113.33rpx; |
|
||||
margin-left: 4rpx; |
|
||||
} |
} |
||||
} |
} |
||||
.reason_upload{ |
.navigation_title_right{ |
||||
display: flex; |
display: flex; |
||||
flex-wrap: wrap; |
|
||||
margin-bottom: 34.67rpx; |
|
||||
.reason_upload_item{ |
|
||||
border: 1px dashed #D2D2D2; |
|
||||
border-radius: 15rpx; |
|
||||
width: 156rpx; |
|
||||
height: 156rpx; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
align-items: center; |
||||
flex-direction: column; |
|
||||
font-size: 12rpx; |
|
||||
color: #BFBCBC; |
|
||||
margin-right: 23.33rpx; |
|
||||
|
|
||||
&:nth-child(3n+3){ |
image{ |
||||
margin-right: 0; |
width: 44rpx; |
||||
|
height: 44rpx; |
||||
|
} |
||||
|
>uni-navigator:first-child{ |
||||
|
margin-right: 32.67rpx; |
||||
} |
} |
||||
.upload_item_camera{ |
|
||||
width: 72rpx; |
|
||||
height: 54.67rpx; |
|
||||
margin-bottom: 14rpx; |
|
||||
} |
} |
||||
.upload_item_camera1{ |
|
||||
width: 72rpx; |
|
||||
height: 72rpx; |
|
||||
// margin-bottom: 14rpx; |
|
||||
|
|
||||
} |
} |
||||
.upload_item_image{ |
|
||||
width: 100%; |
} |
||||
|
|
||||
|
.u-menu-wrap { |
||||
|
flex: 1; |
||||
height: 100%; |
height: 100%; |
||||
border-radius: 15rpx; |
display: flex; |
||||
|
overflow: hidden; |
||||
|
margin-top: 166rpx; |
||||
} |
} |
||||
|
.category_left{ |
||||
|
height: 100%; |
||||
|
// background-color: #F5F6FA; |
||||
|
width: 197.33rpx; |
||||
|
|
||||
} |
} |
||||
.reason_upload_item1{ |
|
||||
|
.u-tab-view { |
||||
|
width: 200rpx; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.u-tab-item { |
||||
|
width: 197.33rpx; |
||||
|
padding: 0 18rpx; |
||||
|
height: 94rpx; |
||||
|
font-size: 28.67rpx; |
||||
|
font-weight: bold; |
||||
|
|
||||
|
box-sizing: border-box; |
||||
|
font-family: PingFang SC; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
word-wrap: break-word; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.u-tab-item-active { |
||||
position: relative; |
position: relative; |
||||
&::after{ |
font-size: 26rpx; |
||||
|
font-weight: 600; |
||||
|
background-color: black; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.u-tab-item-active::before { |
||||
content: ""; |
content: ""; |
||||
width: 30.67rpx; |
|
||||
height: 30.67rpx; |
|
||||
position: absolute; |
position: absolute; |
||||
right: -12rpx; |
|
||||
top: -12rpx; |
height: 32rpx; |
||||
z-index: 99; |
left: 0; |
||||
background-image: url("@/static/img/close3.png"); |
top: 39rpx; |
||||
background-size: 100% 100%; |
|
||||
} |
} |
||||
|
|
||||
|
.u-tab-view { |
||||
|
height: 100%; |
||||
} |
} |
||||
|
|
||||
|
.right-box { |
||||
|
background-color: rgb(250, 250, 250); |
||||
} |
} |
||||
.reason_upload_tips{ |
|
||||
font-size: 20rpx; |
.page-view { |
||||
color: #666666; |
padding: 16rpx; |
||||
} |
} |
||||
|
|
||||
|
.class-item { |
||||
|
margin-bottom: 30rpx; |
||||
|
background-color: #fff; |
||||
|
padding: 16rpx; |
||||
|
border-radius: 8rpx; |
||||
} |
} |
||||
.uni-navbar{ |
|
||||
font-size: 32rpx; |
.class-item:last-child { |
||||
font-weight: bold; |
min-height: 100vh; |
||||
} |
} |
||||
.nav_right{ |
|
||||
|
|
||||
|
.item-title { |
||||
|
font-size: 26rpx; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
button{ |
.item-menu-name { |
||||
width: 116.67rpx; |
font-weight: normal; |
||||
height: 48rpx; |
|
||||
background-color: black; |
|
||||
margin: 0; |
|
||||
line-height: 48rpx; |
|
||||
border-radius: 24rpx; |
|
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
font-weight: bold; |
|
||||
color: white; |
} |
||||
padding-left: 0; |
|
||||
padding-right: 0; |
.item-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.thumb-box { |
||||
|
// width: 33.333333%; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
margin-top: 20rpx; |
||||
} |
} |
||||
|
|
||||
|
.item-menu-image { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
} |
} |
||||
.body{ |
.good_content{ |
||||
border-top: 14.67rpx #F6F5FA solid; |
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.good_item{ |
||||
|
font-size: 22.67rpx; |
||||
|
text-align: center; |
||||
|
margin-right: 25.33rpx; |
||||
|
margin-bottom: 51.33rpx; |
||||
|
|
||||
|
.good_item_img{ |
||||
|
display: block; |
||||
|
background-color: #999999; |
||||
|
width: 146.67rpx; |
||||
|
height: 146.67rpx; |
||||
|
margin-bottom: 22rpx; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.good_item:nth-child(3n+3){ |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
.good_item_img{ |
||||
|
height: 100rpx; |
||||
|
width: 100rpx; |
||||
|
|
||||
|
image{ |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
} |
} |
||||
.order_popup_commodity{ |
|
||||
padding: 0 33.33rpx; |
|
||||
border-bottom: 14.67rpx #F6F5FA solid; |
|
||||
} |
} |
||||
|
|
||||
</style> |
</style> |
||||
@ -0,0 +1,190 @@ |
|||||
|
<template> |
||||
|
<view class="body"> |
||||
|
<view class="one"></view> |
||||
|
<uni-nav-bar left-icon="left" @clickLeft="back()" backgroundColor="#000" color="#fff" :title="title" /> |
||||
|
<view v-for="(item,index) in list " :key="item.zone_id"> |
||||
|
<view v-for="(item1,index1) in item.blocks " :key="item1.block_pic"> |
||||
|
<view class="ONEPIC" v-if="item.zone_code=='ONEPIC' && item.zone_status=='NORMAL'" :style="{height:(item.zone_code=='ONEPIC')?item.zone_column+'rpx':'200rpx'}"> |
||||
|
<!-- class="discount page_padding" --> |
||||
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)" ></image> |
||||
|
</view> |
||||
|
<view class="TWOPIC" v-if="item.zone_code =='TWOPIC'"> |
||||
|
<image :src="item1.block_pic"></image> |
||||
|
</view> |
||||
|
<!-- TWOPIC --> |
||||
|
<view class="TWOPIC" :style="{height:(item.zone_code=='TWOPIC')?item.zone_column+'rpx':'200rpx'}" v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'"> |
||||
|
<image :src="item1.block_pic" @click="imgTo(item1)"mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image> |
||||
|
</view> |
||||
|
<!-- THREEPIC --> |
||||
|
<view class="THREEPIC":style="{height:(item.zone_code=='THREEPIC')?item.zone_column+'rpx':'200rpx'}" v-if="item.zone_code=='THREEPIC' && item.zone_status=='NORMAL'"> |
||||
|
<image :src="item1.block_pic" @click="imgTo(item1)" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image> |
||||
|
</view> |
||||
|
<!-- FOURPIC --> |
||||
|
<view class="FOURPIC":style="{height:(item.zone_code=='FOURPIC')?item.zone_column+'rpx':'200rpx'}" v-if="item.zone_code=='FOURPIC' && item.zone_status=='NORMAL'"> |
||||
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image> |
||||
|
</view> |
||||
|
<!-- FIVEPIC --> |
||||
|
<view class="FIVEPIC" :style="{height:(item.zone_code=='FIVEPIC')?item.zone_column+'rpx':'200rpx'}" v-if="item.zone_code=='FIVEPIC' && item.zone_status=='NORMAL'"> |
||||
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image> |
||||
|
</view> |
||||
|
<!-- SIXPIC --> |
||||
|
<view class="SIXPIC":style="{height:(item.zone_code=='SIXPIC')?item.zone_column+'rpx':'200rpx'}" v-if="item.zone_code=='SIXPIC' && item.zone_status=='NORMAL'"> |
||||
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {defaultRequest,defaultRequest4} from '../../api/index.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list:[], |
||||
|
data: { |
||||
|
_action:'getpagedata', |
||||
|
pagecode:'' |
||||
|
}, |
||||
|
title:'' |
||||
|
} |
||||
|
}, |
||||
|
onLoad(e) { |
||||
|
console.log(e) |
||||
|
this.title = e.title |
||||
|
this.data.pagecode = e.id |
||||
|
this.getpage() |
||||
|
}, |
||||
|
methods: { |
||||
|
getpage(){ |
||||
|
|
||||
|
let imglist |
||||
|
defaultRequest(this.data).then( res =>{ |
||||
|
if(res.error ==0){ |
||||
|
|
||||
|
console.log(res,'数据') |
||||
|
this.list= res.data.zones |
||||
|
console.log(this.list) |
||||
|
this.list.map( item =>{ |
||||
|
console.log(item,'item') |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
back(){ |
||||
|
uni.navigateBack({ |
||||
|
delta:1 |
||||
|
}) |
||||
|
}, |
||||
|
imgTo(item){ |
||||
|
console.log(item,'item') |
||||
|
//console.log(item.block_link.includes('dope.youhui')) |
||||
|
let goodid |
||||
|
|
||||
|
if(item.goodid){ |
||||
|
|
||||
|
uni.navigateTo({ |
||||
|
url:'../productDetails/index?goodid='+item.goodid |
||||
|
}) |
||||
|
} |
||||
|
else if(item.block_link){ |
||||
|
const i = item.block_link.indexOf('?') |
||||
|
goodid = item.block_link.substring(i); |
||||
|
////console.log(item.block_link) |
||||
|
if(item.block_link.includes('goodslist')){ |
||||
|
uni.navigateTo({ |
||||
|
url:'../category/productList'+ goodid+'&tag=1' |
||||
|
}) |
||||
|
} |
||||
|
else if(item.block_link.includes('goodid')){ |
||||
|
uni.navigateTo({ |
||||
|
url:'../productDetails/index'+goodid+'&img=1' |
||||
|
}) |
||||
|
} |
||||
|
else if(item.block_link.includes('dope.youhui')){ |
||||
|
uni.navigateTo({ |
||||
|
url:'./pickUpCentre' |
||||
|
}) |
||||
|
}else if(item.block_link.includes('dope.adspecial')){ |
||||
|
uni.navigateTo({ |
||||
|
url:'../specialTitle/index'+goodid |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
page{ |
||||
|
background-color: aliceblue; |
||||
|
margin: 20rpx; |
||||
|
} |
||||
|
.ONEPIC{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
margin: -12rpx 0; |
||||
|
image{ |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
&:nth-last-child(){ |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
.TWOPIC{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
|
||||
|
image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.THREEPIC{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.FOURPIC{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.FIVEPIC{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.SIXPIC{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.body{ |
||||
|
.one{ |
||||
|
height: 50rpx; |
||||
|
width: 100%; |
||||
|
background-color: #000; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,25 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<script> |
||||
|
var __UniViewStartTime__ = Date.now(); |
||||
|
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || |
||||
|
CSS.supports('top: constant(a)')) |
||||
|
document.write( |
||||
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + |
||||
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />') |
||||
|
</script> |
||||
|
<title>View</title> |
||||
|
<link rel="stylesheet" href="view.css" /> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<script src="__uniappes6.js"></script> |
||||
|
<script src="view.umd.min.js"></script> |
||||
|
<script src="app-view.js"></script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"prompt" : "none" |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
(function(e){function r(r){for(var n,l,i=r[0],p=r[1],a=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);f&&f(r);while(s.length)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var p=t[i];0!==o[p]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={"app-config":0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e["default"]}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this["webpackJsonp"]=this["webpackJsonp"]||[],p=i.push.bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var f=p;t()})([]); |
||||
@ -0,0 +1 @@ |
|||||
|
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__A6CF3EA","name":"Dope Plus","version":{"name":"1.0.0","code":"100"},"description":"","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"Payment":{},"VideoPlayer":{},"Push":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"autoclose":false,"waiting":false,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"light","background":"#000000"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"safearea":{"bottom":{"offset":"none"}},"uniStatistics":{"enable":false},"allowsInlineMediaPlayback":true,"uni-app":{"compilerVersion":"3.6.3","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"borderStyle":"rgba(255,255,255,0.4)","backgroundColor":"#FFFFFF","color":"#999999","selectedColor":"#000000","height":"60px","midButton":{"width":"80px","height":"70px","iconWidth":"60px","iconPath":"static/img/tabbar_img.png"},"list":[{"pagePath":"pages/index/index","iconPath":"static/icon/home3.png","selectedIconPath":"static/icon/home4.png","text":"Home"},{"pagePath":"pages/category/index","iconPath":"static/img/Category.png","selectedIconPath":"static/img/Category1.png","text":"Category"},{"pagePath":"pages/shippingCart/index","iconPath":"static/img/Cart.png","selectedIconPath":"static/img/cart1.png","navigationBarTextStyle":"#000000","text":"Cart"},{"pagePath":"pages/account/index","iconPath":"static/img/Account.png","selectedIconPath":"static/img/Account1.png","text":"Account"}]},"launch_path":"__uniappview.html"}} |
||||
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 891 B |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 1012 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 355 B |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 966 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 846 B |
|
After Width: | Height: | Size: 604 B |
|
After Width: | Height: | Size: 556 B |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 990 B |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 10 KiB |