product_platform/yxt-yyth-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

商品详情

Browse Source
This commit is contained in:
wong1988
2023-12-02 16:23:53 +08:00
parent ee61b4c414
commit 505721d393
3 changed files with 94 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
pages/card/card_booking.vue
View File

@@ -40,10 +40,11 @@
</view> </view>
<view <view
style="display: flex;align-items: center;padding-right: 10px;margin-top: 6px;margin-bottom: 8px;"> style="display: flex;align-items: center;padding-right: 10px;margin-top: 6px;margin-bottom: 8px;">
<text style="flex-shrink: 0;font-size: 13px;margin-left: 10px;margin-right: 10px; " decode="true">提&ensp;货&ensp;人</text> <text style="flex-shrink: 0;font-size: 13px;margin-left: 10px;margin-right: 10px; "
<input placeholder="请输入提货人" decode="true">提&ensp;货&ensp;人</text>
<input placeholder="请输入提货人"
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;"
:value="data.userName" @input="onKeyInput1" /> :value="data.userName" @input="onKeyInput1" />
</view> </view>
<view <view
style="display: flex;align-items: center;padding-right: 10px;margin-top: 6px;margin-bottom: 8px;"> style="display: flex;align-items: center;padding-right: 10px;margin-top: 6px;margin-bottom: 8px;">
@@ -62,17 +63,18 @@
<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image> <image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image>
<view style="margin-left: 10px;font-size: 14px;">商品明细</view> <view style="margin-left: 10px;font-size: 14px;">商品明细</view>
</view> </view>
<view v-for="(item,index) in data.goodsVos" <view v-for="(item,index) in data.goodsVos" @click="itemClick(item.goodsSid)"
style="display: flex;flex-direction: row;margin-top: 15px;"> style="display: flex;flex-direction: row;margin-top: 15px;">
<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;" @click="goodDetail(item.goodsSid)"></image> <image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
<view <view
style="margin-left: 10px;margin-right: 10px;flex: 1;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;"> style="margin-left: 10px;margin-right: 10px;flex: 1;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;">
<text class="text" style="font-weight: 500;width: 100%;">{{item.goods}} <text class="text" style="font-weight: 500;width: 100%;">{{item.goods}}
</text> </text>
<text class="text" style="width: 100%;font-size: 12px; color: #666666;margin-top: 10px;">{{item.remarks}} <text class="text"
style="width: 100%;font-size: 12px; color: #666666;margin-top: 10px;">{{item.remarks}}
</text> </text>
<uni-number-box ref="box" style="margin-top: -25px;" :min="0" :max="item.lnum" v-model="item.select" <uni-number-box ref="box" style="margin-top: -25px;" :min="0" :max="item.lnum"
:showTextView="page.showTextView"></uni-number-box> v-model="item.select" :showTextView="page.showTextView"></uni-number-box>
</view> </view>
</view> </view>
</view> </view>
@@ -108,8 +110,8 @@
goodsVos: [], goodsVos: [],
value: "", value: "",
select: [], select: [],
userName:"", userName: "",
userPhone:"", userPhone: "",
} }
} }
}, },
@@ -159,12 +161,12 @@
this.shortToast('请输入手机号码') this.shortToast('请输入手机号码')
return return
} }
if (this.data.userPhone.length!=11) { if (this.data.userPhone.length != 11) {
this.shortToast('手机号码格式不对') this.shortToast('手机号码格式不对')
return return
} }
let num = 0; let num = 0;
for (var i = 0; i < this.data.goodsVos.length; i++) { for (var i = 0; i < this.data.goodsVos.length; i++) {
num += Number(this.data.goodsVos[i].select); num += Number(this.data.goodsVos[i].select);
@@ -184,10 +186,9 @@
}) })
}, },
goodDetail(sid){ itemClick(goodsSid) {
// 商品详情
uni.navigateTo({ uni.navigateTo({
url: '/pages/good/goodsDetail?sid=' + sid url: '/pages/good/goodsDetail?sid=' + goodsSid
}) })
} }
} }

17
pages/card/card_detail.vue
View File

@@ -36,18 +36,18 @@
<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image> <image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image>
<view style="margin-left: 10px;font-size: 14px;">商品明细</view> <view style="margin-left: 10px;font-size: 14px;">商品明细</view>
</view> </view>
<view v-for="(item,index) in data.goodsVos" :key="index" <view v-for="(item,index) in data.goodsVos" :key="index" @click="itemClick(item.goodsSid)"
style="display: flex;flex-direction: row;margin-top: 15px;"> style="display: flex;flex-direction: row;margin-top: 15px;">
<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;" @click="goodDetail(item.goodsSid)"></image> <image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
<view style="margin-left: 10px;margin-right: 10px;flex: 1;"> <view style="margin-left: 10px;margin-right: 10px;flex: 1;">
<text class="text" style="font-weight: 500;">{{item.goods}} <text class="text" style="font-weight: 500;">{{item.goods}}
</text> </text>
<view style="font-size: 12px;color: #666666;margin-top: 10px;">{{item.remarks}}</view> <view style="font-size: 12px;color: #666666;margin-top: 10px;">{{item.remarks}}</view>
</view> </view>
<view style="display: flex;flex-direction: row;"> <view style="display: flex;flex-direction: row;">
<text style="font-size: 12px;color: #666666;margin-right: 10px;">总数：{{item.num}} <text style="font-size: 12px;color: #666666;margin-right: 10px;">总数：{{item.num}}
</text> </text>
<view style="font-size: 12px;color: #666666;">剩余：{{item.lnum}}</view> <view style="font-size: 12px;color: #666666;">剩余：{{item.lnum}}</view>
</view> </view>
</view> </view>
</view> </view>
@@ -58,7 +58,7 @@
style="position: fixed;bottom: 0;height: 50px;background: #f3f4f6;border-top: 1rpx #cacaca solid;width: 100%;display: flex;flex-direction: row;box-sizing: border-box;align-items: center;padding-right: 15px;"> style="position: fixed;bottom: 0;height: 50px;background: #f3f4f6;border-top: 1rpx #cacaca solid;width: 100%;display: flex;flex-direction: row;box-sizing: border-box;align-items: center;padding-right: 15px;">
<view style="flex: 1;"></view> <view style="flex: 1;"></view>
<view v-if="data.showRecord" class="btn" style="flex-shrink: 0;color: #191919;" <view v-if="data.showRecord" class="btn" style="flex-shrink: 0;color: #191919;"
@click.stop="showRecord(page.sid)"> @click.stop="showRecord(page.sid)">
预约记录</view> 预约记录</view>
<view v-if="data.showBtn" class="btn" style="flex-shrink: 0;color: royalblue;" <view v-if="data.showBtn" class="btn" style="flex-shrink: 0;color: royalblue;"
@click.stop="booking(page.sid)">预约提货 @click.stop="booking(page.sid)">预约提货
@@ -124,10 +124,9 @@
url: '/pages/card/card_booking?sid=' + sid url: '/pages/card/card_booking?sid=' + sid
}) })
}, },
goodDetail(sid){ itemClick(goodsSid) {
// 商品详情
uni.navigateTo({ uni.navigateTo({
url: '/pages/good/goodsDetail?sid=' + sid url: '/pages/good/goodsDetail?sid=' + goodsSid
}) })
} }
} }

76
pages/good/goodsDetail.vue
View File

@@ -1,22 +1,84 @@
<template> <template>
<view>
<loading-state ref="pageView" @request="request">
</view> <view>
<image :src="data.picUrl" style="width: 100vw;height: 100vw;background-color: #FFFFFF;"></image>
<view
style="margin-top: 9px;margin-left: 9px;margin-right: 9px;border-top-left-radius: 13px;border-top-right-radius: 13px;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;padding-top: 11px;">
<image src="../../static/goods_price_bg.png"
style="width: 90vw;height: 16vw;border-radius: 10px;position: absolute;"></image>
<view
style="display: flex;flex-direction: row;justify-content: space-between;width: 80vw;position: relative;height: 16vw;align-items: center;color: white;">
<view>
<text style="font-size: 14px;font-weight: 600;">￥</text>
<text style="font-size: 24px;margin-left: 7px;font-weight: 500;">{{data.price}}</text>
</view>
<view>价值</view>
</view>
<view
style="left: 25px;font-size: 18px;width: 90vw;margin: 10px 0px;font-weight: 600;margin-left: 18px;">
{{data.name}}
</view>
</view>
<view style="display: flex;flex-direction: column;align-items: center;margin-left: 9px;margin-right: 9px;">
<view
style="border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;background-color: #f9f9f9;width: 100%;display: flex;flex-direction: row;">
<image src="../../static/guige.png"
style="width: 21px;height: 21px;margin-left: 12px;margin-top: 9px;margin-bottom: 12px;"></image>
<view
style="height: 21px;line-height: 21px;margin-top: 9px;font-size: 13px;color: #666666;margin-left: 5px;">
规格：
{{data.remarks}}
</view>
</view>
</view>
</view>
</loading-state>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
page: {
sid: ''
},
data: {
picUrl: '',
name: '',
price: '',
remarks: ''
}
} }
}, },
onLoad(options) {
this.page.sid = options.sid
this.request()
},
methods: { methods: {
request() {
let _this = this
_this.$api.goodsDetail(this.page.sid).then((resp) => {
console.log(resp);
_this.data = resp
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(2)
})
}).catch(e => {
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(1)
})
})
}
} }
} }
</script> </script>
<style> <style>
uni-page-body,
</style> page {
background: #f3f4f6;
}
</style>