clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

选购详情，订单详情提交页

This commit is contained in:
yangdanqi 2022-03-24 17:32:26 +08:00
parent 4aa44d8e75
commit a73fbb298e
6 changed files with 245 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
data.js
View File

@ -249,6 +249,8 @@ const productDetail = {
salePrice: 199.00,
price: 300,
saledCount: 370,
maxPieces: 1000,
comments: '备注',
commission: 12
}, {
id: 2,
@ -256,6 +258,8 @@ const productDetail = {
salePrice: 240.00,
price: 350,
saledCount: 400,
maxPieces: 1001,
comments: '备注',
commission: 16
}, {
id: 3,
@ -263,6 +267,8 @@ const productDetail = {
salePrice: 242.00,
price: 352,
saledCount: 350,
maxPieces: 1002,
comments: '备注',
commission: 13
}, {
id: 4,
@ -270,6 +276,8 @@ const productDetail = {
salePrice: 243.00,
price: 353,
saledCount: 100,
maxPieces: 1003,
comments: '备注',
commission: 14
}, {
id: 5,
@ -277,6 +285,8 @@ const productDetail = {
salePrice: 244.00,
price: 354,
saledCount: 109,
maxPieces: 1004,
comments: '备注',
commission: 15
}, {
id: 6,
@ -284,6 +294,8 @@ const productDetail = {
salePrice: 244.00,
price: 354,
saledCount: 109,
maxPieces: 1005,
comments: '备注',
commission: 15
}, {
id: 7,
@ -291,6 +303,8 @@ const productDetail = {
salePrice: 244.00,
price: 354,
saledCount: 109,
maxPieces: 1006,
comments: '备注',
commission: 15
}, {
id: 8,
@ -298,6 +312,8 @@ const productDetail = {
salePrice: 244.00,
price: 354,
saledCount: 109,
maxPieces: 1007,
comments: '备注',
commission: 15
}, {
id: 9,
@ -305,6 +321,8 @@ const productDetail = {
salePrice: 244.00,
price: 354,
saledCount: 109,
maxPieces: 1008,
comments: '备注',
commission: 15
}, {
id: 10,
@ -312,6 +330,8 @@ const productDetail = {
salePrice: 244.00,
price: 354,
saledCount: 109,
maxPieces: 1009,
comments: '备注',
commission: 15
}],
reviewers: [{

16
pages.json
View File

@ -1,15 +1,29 @@
{
"pages": [{
"path": "pages/index/index"
// "path": "pages/order/order-detail"
},
{
"path": "pages/product/product-detail",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/product/product-pick",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
// ,
// {
// "path": "pages/order/order-detail",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// }
],
"globalStyle": {
"navigationStyle": "custom",

45
pages/order/order-detail.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<view>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">订单确认</block>
</cu-custom>
<!-- 服务地址 -->
<view class="padding-lg bg-white">
<view class="flex justify-between align-center">
<view class="text-lg text-black">
<text class="cuIcon-locationfill text-blue light"></text>
选择服务地址
</view>
<view>选择<text class="text-sm text-bold text-gray cuIcon-right"></text></view>
</view>
</view>
<!-- 预约时间 -->
<view class="margin-lr-sm margin-top-sm bg-white padding">
<view class="flex justify-between align-center">
<text class="text-black">预约时间</text>
<view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
</view>
<view class="text-sm text-gray margin-top-sm"><text class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pickedProductList: []
}
},
methods: {
name() {
}
},
}
</script>
<style>
</style>

41
pages/product/product-detail.vue
View File

@ -1,4 +1,5 @@
<template>
<page-meta :page-style="'overflow:'+(ifShowPageMeta?'hidden':'visible')"></page-meta>
<view>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-white'" :isBack="true">
@ -37,7 +38,7 @@
<view id="pageAnchor0" class="flex justify-between align-end">
<view class="text-df">
佣金：<text class="text-price margin-right-sm">{{curProductSpecs.commission}}</text>
<text class="cuIcon-share"></text>
<!-- <text class="cuIcon-share"></text> -->
</view>
<!-- <view class="text-df">
距结束：<uni-countdown style="float: right;" :day="1" :hour="1" :minute="12" :second="40" background-color="#fff" splitorColor="#fff"></uni-countdown>
@ -62,7 +63,7 @@
<view class="text-sm text-gray margin-top-xs">{{productInfo.desc}}</view>
</view>
<view class="text-xl text-right padding-lr">
<view class="margin-tb-xs"><text class="cuIcon-share"></text></view>
<!-- <view class="margin-tb-xs"><text class="cuIcon-share"></text></view> -->
<view v-if="productInfo.isGoldServ" class="margin-tb-xs text-orange"><text
class="cuIcon-friendfamous"></text></view>
</view>
@ -103,15 +104,15 @@
<comments-card :reviewers="reviewers"></comments-card>
</view>
<!-- 店家链接 -->
<view class="margin-lr-sm margin-top-sm padding bg-white">
<!-- <view class="margin-lr-sm margin-top-sm padding bg-white">
<view class="flex justify-between align-center">
<view class="flex justify-start align-center">
<view class="cu-avatar" :style="'background-image:url(' + shopInfo.avatarUrl + ');'"></view>
<view class="margin-lr-sm text-lg text-black">{{shopInfo.name}}</view>
</view>
<view class="text-sm">查看<text class="text-bold text-gray cuIcon-right"></text></view>
</view>
<view class="text-sm">店铺查看<text class="text-bold text-gray cuIcon-right"></text></view>
</view>
</view> -->
<!-- 服务详情 -->
<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image">
<!-- <image :src="productDetailImgUrl" mode="widthFix"></image> -->
@ -134,18 +135,26 @@
</view>
购物车
</view>
<view class="bg-main-color light submit">加入购物车</view>
<view class="bg-main-color light submit" @click="toggleProductPickModal">加入购物车</view>
<view class="bg-main-color submit">立即订购</view>
</view>
<!-- 底部弹窗 -->
<uni-popup ref="productPickPopup" type="bottom">
<view class="text-bold text-gray text-lg text-center left-top-sm-bar" @click="toggleProductPickModal"><text
class="cuIcon-close"></text></view>
<product-pick :specsList="specsList"></product-pick>
</uni-popup>
</view>
</template>
<script>
import commentsCard from '@/components/goods-card/comments-card.vue';
import productPick from '@/pages/product/product-pick.vue';
export default {
components: {
commentsCard
commentsCard,
productPick
},
data() {
return {
@ -160,7 +169,8 @@
productVideoPlaying: false,
showTopNav: false,
curTopNav: 0,
shopInfo: {}
shopInfo: {},
ifShowPageMeta: false
}
},
onLoad() {
@ -215,6 +225,14 @@
uni.pageScrollTo({
selector: '#pageAnchor' + index
})
},
toggleProductPickModal() {
if (this.ifShowPageMeta) {
this.$refs.productPickPopup.close();
} else {
this.$refs.productPickPopup.open();
}
this.ifShowPageMeta = !this.ifShowPageMeta;
}
}
}
@ -229,4 +247,11 @@
height: 300rpx;
overflow: hidden;
}
.left-top-sm-bar {
position: absolute;
right: 25rpx;
top: 25rpx;
z-index: 99;
}
</style>

109
pages/product/product-pick.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<view>
<view class="padding-tb-lg padding-lr bg-white">
<view class="cu-list menu-avatar margin-bottom-sm">
<view class="cu-item padding-bottom-sm">
<view class="cu-avatar xl" :style="'background-image:url(' + curSpec.picUrl + ');'">
</view>
<view class="content margin-left">
<text class="text-price text-red text-xxl">{{curSpec.salePrice}}</text>
<text class="text-gray text-sm flex justify-between">
{{curSpec.comments}}
</text>
</view>
</view>
</view>
<view class="flex justify-between margin-lr-sm margin-tb-sm padding-lr">
<view>购买型号</view>
<view>购买数量</view>
</view>
<view class="margin-bottom-lg certern-height-with-scroll">
<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
:key="item.id">
<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'"
@click="chooseSpecs(item)">{{item.name}}</view>
<uni-number-box :min="0" :max="item.maxPieces" :value="0" @change="changePiecesNum($event, index)">
</uni-number-box>
</view>
</view>
</view>
<!-- 底部操作条 -->
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
<view class="action">
<view class="cuIcon-cartfill">
<view class="cu-tag badge" v-if="totalPickCount > 0">{{totalPickCount}}</view>
</view>
</view>
<view class="action text-df center-grid">
<text class="margin-lr-xs">共计</text>
<text class="text-red text-price">{{totalPrice}}</text>
</view>
<view class="bg-main-color submit">确定</view>
</view>
</view>
</template>
<script>
export default {
name: "product-pick",
props: {
specsList: {
type: Array,
default: []
}
},
data() {
return {
curSpec: {},
// specsList: [],
totalPrice: 0,
pickList: [],
totalPickCount: 0
}
},
onReady() {
this.loadData();
},
methods: {
loadData() {
this.curSpec = this.specsList[0];
this.specsList.forEach(function(item) {
this.pickList.push({
price: item.price,
salePrice: item.salePrice,
pickCount: 0
})
}.bind(this));
},
changePiecesNum(piecesNum, index) {
let spec = this.pickList[index];
this.totalPrice -= spec.salePrice * (spec.pickCount - piecesNum);
this.totalPickCount -= spec.pickCount - piecesNum
this.pickList[index].pickCount = piecesNum;
},
chooseSpecs(item) {
this.curSpec = item;
}
},
}
</script>
<style scoped>
.fixed-bottom-bar .cuIcon-cartfill:before {
font-size: 64rpx;
}
.fixed-bottom-bar .text-df {
font-size: 28rpx !important;
}
.fixed-bottom-bar .center-grid {
width: 43% !important;
text-align: left;
}
.certern-height-with-scroll {
height: 600rpx;
overflow: scroll;
}
</style>

4
style/default.css
View File

@ -7,11 +7,11 @@
width: 100% !important;
bottom: 0 !important;
margin-bottom: 0 !important;
z-index: 210000000;
z-index: 98;
}
.fixed-top-bar {
position: fixed !important;
z-index: 210000000;
z-index: 98;
width: 100%;
}