@ -1,399 +1,437 @@ |
|||
<template> |
|||
<view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
</script> |
|||
|
|||
<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 class="u-wrap"> |
|||
<view class="search"> |
|||
<view class="status_bar"></view> |
|||
<view class="search1"> |
|||
<navigator url="/pages/index/search"> |
|||
<view class="navigation_seach"> |
|||
<image src="../../static/img/seach.png" mode=""></image> |
|||
<text>search</text> |
|||
</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> |
|||
</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> |
|||
<view class="u-menu-wrap"> |
|||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view category_left" :scroll-top="scrollTop" |
|||
:scroll-into-view="itemId"> |
|||
<view v-for="(item,index) in 7" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']" |
|||
@tap.stop="swichMenu(index)"> |
|||
<text class="u-line-1">可乐</text> |
|||
</view> |
|||
</scroll-view> |
|||
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll"> |
|||
<view class="page-view"> |
|||
<view class="class-item" :id="'item' + index" v-for="(item , index) in 7" :key="index"> |
|||
<view class="item-title"> |
|||
<text>奶茶</text> |
|||
</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 class="good_content"> |
|||
<view class="good_item" v-for="(item1, index1) in 6" :key="index1"> |
|||
<view @click="toDetial(item1)"> |
|||
<view class="good_item_img"><image src="" alt=""></view> |
|||
</view> |
|||
<text>肯德基</text> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="review"> |
|||
<view class="review_title"> |
|||
<text>Score</text> |
|||
<uni-rate size="22" disabledColor="#B22234" v-model="query.comment_rank" active-color="#B22234" :is-fill="false" class="rate" v-if="reviewType==0"/> |
|||
<uni-rate size="22" disabledColor="#B22234" v-model="query1.comments[index].comment_rank" active-color="#B22234" :is-fill="false" class="rate" v-else/> |
|||
</view> |
|||
<view class="review_content"> |
|||
<image src="../../static/img/write.png" mode=""></image> |
|||
<textarea placeholder="Write reviews" v-if="reviewType==0" v-model="query.comment"></textarea> |
|||
<textarea placeholder="Write reviews" v-else v-model="query1.comments[index].comment"></textarea> |
|||
</view> |
|||
<view class="reason_upload"> |
|||
<view class="reason_upload_item" @click="UploadVideo"> |
|||
<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""v-if="!VideoSrc"></image> |
|||
<image :src="VideoSrc" class="upload_item_camera" mode="" v-else></image> |
|||
<view>Upload the video</view> |
|||
</view> |
|||
<view class="reason_upload_item" @click="upload()"> |
|||
<!-- <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 class="reason_upload_item reason_upload_item1"> |
|||
<!-- <image :src="" class="upload_item_image" mode=""></image> --> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</view> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script module="test" lang="renderjs" > |
|||
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' |
|||
<script> |
|||
import {defaultRequest,defaultRequest4} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
orderDate:{}, |
|||
// 评论状态 0、单个评论 1批量评论 |
|||
reviewType:0, |
|||
query:{ |
|||
_action:'commentordergoods', |
|||
order_id:'', |
|||
order_sn:'', |
|||
rec_id:'', |
|||
goods_id:'', |
|||
comment:'', |
|||
comment_rank:'', |
|||
commentlabels:'' |
|||
}, |
|||
query1:{ |
|||
_action:'commentorder', |
|||
order_id:'', |
|||
order_sn:'', |
|||
comments:[] |
|||
}, |
|||
VideoSrc:'', |
|||
imgSrc:'' |
|||
scrollTop: 0, //tab标题的滚动条位置 |
|||
oldScrollTop: 0, |
|||
current: 0, // 预设当前项的值 |
|||
menuHeight: 0, // 左边菜单的高度 |
|||
menuItemHeight: 0, // 左边菜单item的高度 |
|||
itemId: '', // 栏目右边scroll-view用于滚动的id |
|||
tabbar: [], |
|||
menuItemPos: [], |
|||
arr: [], |
|||
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度 |
|||
timer: null, // 定时器 |
|||
categoryList:'1234567’', |
|||
sum:0, |
|||
backButtonPress:0, |
|||
homeIndex: 0 |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 提交评论内容 |
|||
reviewSub(){ |
|||
let data |
|||
if(this.reviewType==0){ |
|||
this.commentordergoods() |
|||
}else{ |
|||
// data=this.query1 |
|||
this.commentordergoods1() |
|||
onShow() { |
|||
this.sum =0 |
|||
this.getList() |
|||
|
|||
|
|||
uni.showTabBar() |
|||
}, |
|||
onLoad() { |
|||
this.getList() |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getMenuItemTop() |
|||
}, |
|||
// onBackPress(options) { |
|||
// this.backButtonPress++; |
|||
// if (this.backButtonPress > 1) { |
|||
// plus.runtime.quit(); |
|||
// } else { |
|||
// plus.nativeUI.toast('Click again to exit'); |
|||
// } |
|||
// setTimeout(function() { |
|||
// this.backButtonPress = 0; |
|||
// }, 1000); |
|||
// return true; |
|||
// }, |
|||
|
|||
methods: { |
|||
|
|||
|
|||
// 点击左边的栏目切换 |
|||
async swichMenu(index) { |
|||
if(this.arr.length == 0) { |
|||
await this.getMenuItemTop(); |
|||
} |
|||
console.info(data) |
|||
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); |
|||
|
|||
// }) |
|||
}, |
|||
// 单个评论内容 |
|||
commentordergoods(){ |
|||
defaultRequest2(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Comment successful!' |
|||
}) |
|||
setTimeout(function(){ |
|||
uni.navigateBack() |
|||
},2000) |
|||
} |
|||
}) |
|||
|
|||
toDetial(item){ |
|||
console.log(item) |
|||
|
|||
}, |
|||
// 批量评论内容 |
|||
commentordergoods1(){ |
|||
defaultRequest2(this.query1,'comments').then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Comment successful!' |
|||
}) |
|||
setTimeout(function(){ |
|||
uni.navigateBack() |
|||
},2000) |
|||
} |
|||
}) |
|||
getList(){ |
|||
|
|||
}, |
|||
|
|||
back(){ |
|||
uni.navigateBack() |
|||
// 获取一个目标元素的高度 |
|||
getElRect(elClass, dataVal) { |
|||
new Promise((resolve, reject) => { |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query.select('.' + elClass).fields({ |
|||
size: true |
|||
}, res => { |
|||
// 如果节点尚未生成，res值为null，循环调用执行 |
|||
if (!res) { |
|||
setTimeout(() => { |
|||
this.getElRect(elClass); |
|||
}, 10); |
|||
return; |
|||
} |
|||
this[dataVal] = res.height; |
|||
resolve(); |
|||
}).exec(); |
|||
}) |
|||
}, |
|||
// 上传视频 |
|||
UploadVideo(){ |
|||
var that = this |
|||
uni.chooseVideo({ |
|||
sourceType: ['camera', 'album'], |
|||
success: function (res) { |
|||
console.log(res) |
|||
that.VideoSrc = res.tempFilePath; |
|||
} |
|||
// 观测元素相交状态 |
|||
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) { |
|||
let id = res.id.substring(4); |
|||
this.leftMenuStatus(id); |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
// 上传图片 |
|||
Upimg(){ |
|||
let url |
|||
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 |
|||
// 设置左边菜单的滚动状态 |
|||
async leftMenuStatus(index) { |
|||
|
|||
|
|||
// console.log(index,'index') |
|||
if (index == this.current) return; |
|||
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'); |
|||
|
|||
} |
|||
// 将菜单活动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 ; |
|||
} |
|||
console.log(data) |
|||
defaultRequest(data).then(res =>{ |
|||
console.log(res) |
|||
rects.forEach((rect) => { |
|||
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况) |
|||
this.arr.push(rect.top - rects[0].top); |
|||
resolve(); |
|||
}) |
|||
console.log(data) |
|||
defaultRequest(data).then(res =>{ |
|||
console.log(res) |
|||
}) |
|||
// uni.uploadFile({ |
|||
// url:'https://v2.alapi.cn/api/image', |
|||
// filePath: res.tempFilePaths[0], |
|||
// name:'file', |
|||
// success: (uploadFileRes) => { |
|||
// var that = this |
|||
// // uploadFileRes.data = decryptDes(uploadFileRes.data,"6780f04cf2e211ec86a8005056c00008") |
|||
// console.log(uploadFileRes) |
|||
// } |
|||
}).exec() |
|||
}) |
|||
}, |
|||
// 右边菜单滚动 |
|||
async rightScroll(e) { |
|||
// this.current = 0 |
|||
this.oldScrollTop = e.detail.scrollTop; |
|||
// 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); |
|||
|
|||
// }) |
|||
uni.getImageInfo({ |
|||
src: res.tempFilePaths[0], |
|||
success: (path) => { |
|||
pathToBase64(path.path).then(base64 => { |
|||
console.log(base64); // 这就是转为base64格式的图片 |
|||
url = base64 |
|||
}) |
|||
.catch(error => { |
|||
console.error(error) |
|||
}) |
|||
return ; |
|||
} |
|||
}) |
|||
// uni.request({ |
|||
// url:'https://v2.alapi.cn/api/image', |
|||
// method:'POST', |
|||
// data:{ |
|||
// image:url |
|||
// }, |
|||
// success(res) { |
|||
// console.log(res) |
|||
// } |
|||
// }) |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
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,';'); |
|||
}, 10) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.review{ |
|||
padding: 0 26rpx; |
|||
padding-top: 35.33rpx; |
|||
.u-wrap { |
|||
height: calc(100vh); |
|||
/* #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; |
|||
|
|||
.review_title{ |
|||
position: fixed; |
|||
top: 0; |
|||
z-index: 99; |
|||
// border-bottom: 1px solid #F5F6FA; |
|||
|
|||
.search1{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
margin-bottom: 44rpx; |
|||
.rate{ |
|||
margin-left: 24.67rpx; |
|||
} |
|||
} |
|||
.review_content{ |
|||
display: flex; |
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
} |
|||
textarea{ |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
width: 100%; |
|||
height: 113.33rpx; |
|||
margin-left: 4rpx; |
|||
} |
|||
} |
|||
.reason_upload{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 34.67rpx; |
|||
.reason_upload_item{ |
|||
border: 1px dashed #D2D2D2; |
|||
border-radius: 15rpx; |
|||
width: 156rpx; |
|||
height: 156rpx; |
|||
justify-content: space-between; |
|||
|
|||
.navigation_seach{ |
|||
width: 546.67rpx; |
|||
background-color: #F5F6FA; |
|||
border-radius: 6.67rpx; |
|||
height: 66.67rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
font-size: 12rpx; |
|||
color: #BFBCBC; |
|||
margin-right: 23.33rpx; |
|||
color: #8F9094; |
|||
border-radius: 33rpx; |
|||
font-size: 26.67rpx; |
|||
padding-left: 25rpx; |
|||
box-sizing: border-box; |
|||
|
|||
&:nth-child(3n+3){ |
|||
margin-right: 0; |
|||
} |
|||
.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%; |
|||
height: 100%; |
|||
border-radius: 15rpx; |
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
margin-right: 22rpx; |
|||
} |
|||
} |
|||
.reason_upload_item1{ |
|||
position: relative; |
|||
&::after{ |
|||
content: ""; |
|||
width: 30.67rpx; |
|||
height: 30.67rpx; |
|||
position: absolute; |
|||
right: -12rpx; |
|||
top: -12rpx; |
|||
z-index: 99; |
|||
background-image: url("@/static/img/close3.png"); |
|||
background-size: 100% 100%; |
|||
.navigation_title_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
} |
|||
>uni-navigator:first-child{ |
|||
margin-right: 32.67rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.reason_upload_tips{ |
|||
font-size: 20rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
} |
|||
|
|||
.u-menu-wrap { |
|||
flex: 1; |
|||
height: 100%; |
|||
display: flex; |
|||
overflow: hidden; |
|||
margin-top: 166rpx; |
|||
} |
|||
.category_left{ |
|||
height: 100%; |
|||
// background-color: #F5F6FA; |
|||
width: 197.33rpx; |
|||
|
|||
} |
|||
|
|||
.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; |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
background-color: black; |
|||
color: white; |
|||
} |
|||
|
|||
.u-tab-item-active::before { |
|||
content: ""; |
|||
position: absolute; |
|||
|
|||
height: 32rpx; |
|||
left: 0; |
|||
top: 39rpx; |
|||
} |
|||
|
|||
.u-tab-view { |
|||
height: 100%; |
|||
} |
|||
|
|||
.right-box { |
|||
background-color: rgb(250, 250, 250); |
|||
} |
|||
|
|||
.page-view { |
|||
padding: 16rpx; |
|||
} |
|||
|
|||
.class-item { |
|||
margin-bottom: 30rpx; |
|||
background-color: #fff; |
|||
padding: 16rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.class-item:last-child { |
|||
min-height: 100vh; |
|||
} |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
|
|||
.item-title { |
|||
font-size: 26rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.nav_right{ |
|||
|
|||
.item-menu-name { |
|||
font-weight: normal; |
|||
font-size: 24rpx; |
|||
|
|||
} |
|||
|
|||
.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; |
|||
} |
|||
.good_content{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
button{ |
|||
width: 116.67rpx; |
|||
height: 48rpx; |
|||
background-color: black; |
|||
margin: 0; |
|||
line-height: 48rpx; |
|||
border-radius: 24rpx; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
color: white; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
.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; |
|||
} |
|||
} |
|||
.body{ |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
} |
|||
.order_popup_commodity{ |
|||
padding: 0 33.33rpx; |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
.good_item_img{ |
|||
height: 100rpx; |
|||
width: 100rpx; |
|||
|
|||
image{ |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
</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 |