yxt_product
/
yxt-yyth-ui-miniprogram
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

商品详情

master
wong1988 2 years ago
parent
ee61b4c414
commit
505721d393
3 changed files with 94 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      pages/card/card_booking.vue
  2. 17
      pages/card/card_detail.vue
  3. 76
      pages/good/goodsDetail.vue

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>
Write Preview
Loading…
Cancel
Save