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

1111111111

Browse Source
This commit is contained in:
guoxing
2024-03-06 10:40:48 +08:00
parent 73a486c2c6
commit 11fad13f23
12 changed files with 590 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

321
pages/good/goodsDetail.vue
View File

@@ -1,67 +1,111 @@
<template>
<view style="height: 100vh;background: #fff;">
<loading-state ref="pageView" @request="request">
<view style="height: 87vh;overflow: hidden;overflow-y: auto;">
<image :src="data.picUrl" style="width: 100vw;height: 80vw;" mode="aspectFill"></image>
<loading-state ref="pageView" @request="request">
<view>
<image :src="data.picUrl" style="width: 100vw;height: 80vw;" mode="aspectFill"></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 style="display: flex;flex-direction: column;background: #fff;padding: 20px;margin-top: 10px;
<view style="display: flex;flex-direction: column;background: #fff;padding: 20px 20px 0px 20px;margin-top: 10px;
border-top-left-radius: 20px;border-top-right-radius: 20px;height: 100%;">
<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text>
<text
style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text>
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
<text style="font-size: 13px;color: #666;">规&ensp;&ensp;&ensp;&ensp;格</text>
<text style="font-size: 13px;color: #999;">{{data.remarks}}</text>
</view>
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
<text style="font-size: 13px;color: #666;">单&ensp;&ensp;&ensp;&ensp;价</text>
<text style="font-size: 13px;color: #999;">{{data.price}}元/{{data.specificationUnit}}</text>
</view>
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
<text style="font-size: 13px;color: #666;">规&ensp;&ensp;&ensp;&ensp;格</text>
<text
style="font-size: 13px;color: #999;">{{data.weight}}{{data.specificationUnit}}/{{data.unitName}}</text>
</view>
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;">
<view style="width: 2px;height: 15px;background: #FF7A11;margin-right: 10px;"></view>
<text style="font-size: 14px;font-weight: 600;font-family: sans-serif;color: #333;">商品详情</text>
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;">
<view style="width: 2px;height: 15px;background: #FF7A11;margin-right: 10px;"></view>
<text style="font-size: 14px;font-weight: 600;font-family: sans-serif;color: #333;">商品详情</text>
</view>
<view style="margin-top: 10px;" v-show="!data.appContent==''">
<rich-text :nodes="data.appContent | formatRichText"></rich-text>
</view>
</view>
<view style="margin-top: 10px;" v-show="!data.appContent==''">
<rich-text :nodes="data.appContent | formatRichText" ></rich-text>
</view>
</view>
</loading-state>
<view style="position: absolute; bottom: 0px; display: flex;flex-direction: column;width: 100%;
box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 13vh;">
<view
style="display: flex;flex-direction: row;align-items: center; justify-content: center; margin-top:10px;">
<view id="bomView" style="display: flex;flex-direction: row;align-items: center;">
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
温馨提示：已订</view>
<view style="color: #FF5006;font-size: 15px;height: 15px;line-height: 15px;font-weight: bold;">
{{page.weight}}斤
</view>
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
，{{data.qssl}}斤起订。</view>
<view style="display: flex;flex-direction: row;align-items: center;" @click="showPop2()">
<text
style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;text-decoration:underline;font-style:oblique;">
起订说明</text>
<text
style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;margin-left: 2px;">
>></text>
</view>
</view>
</view>
<view
style="display: flex;flex-direction: row; justify-content: center;align-items: center;margin-top: 10px;padding: 0px 10px;margin-bottom: 20px;">
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
border: 1px #FF5006 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px;flex-shrink: 0;"
@click="inCart()">加入购物车</text>
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 0px 5px;height: 42px;flex: 1;
display: flex;flex-direction: row;align-items: center;box-sizing: border-box;" @click="gotoCart()">
<image src="../../static/shoppCart_icon.png" mode="aspectFill"
style="height: 20px;width: 20px;flex-shrink: 0;">
</image>
<view style="display: flex;flex-direction: column;flex: 1;">
<text
style="font-size: 15px;color: #FF5006;margin-left: 5px;height: 20px;line-height: 20px;margin-top: 5px;font-weight: bold;">￥{{page.price}}</text>
<text v-if="page.remarks!=''"
style="font-size: 10px;color: #666;margin-left: 5px; height: 10px;line-height: 10px;margin-bottom: 5px;">{{page.remarks}}</text>
</view>
</view>
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;flex-shrink: 0;"
@click="settlement()">结算</text>
</view>
</view>
</loading-state>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="more" title="订购协议" :showConfirm="true"
:beforeClose="dialogBeforeClose" @confirm="dialogInputConfirm" :content="data.dgxy"
:confirm-text="confirmText"></uni-popup-dialog>
</uni-popup>
<uni-popup ref="inputDialog2" type="dialog">
<uni-popup-dialog ref="inputClose" mode="more" title="起订说明" :showConfirm="true"
:beforeClose="dialogBeforeClose2" @confirm="dialogInputConfirm2"
:content="data.qdxy"></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
@@ -69,7 +113,10 @@
data() {
return {
page: {
sid: ''
sid: '',
weight: "",
remarks: "",
price: ""
},
data: {
picUrl: '',
@@ -77,14 +124,21 @@
price: '',
remarks: '',
appContent: ""
}
},
dialogContent: "这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容这里是协议内容，这里是协议内容",
confirmText: "我知道了（5s）",
dialogBeforeClose: false,
dialogBeforeClose2: false,
countdown: 5,
}
},
onLoad(options) {
this.page.sid = options.sid
this.request()
},
filters: {
filters: {
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
@@ -119,21 +173,168 @@
},
methods: {
request() {
var params = {
customerSid: getApp().globalData.sid,
sid: this.page.sid,
}
console.log("request", params);
let _this = this
_this.$api.goodsDetail(this.page.sid).then((resp) => {
console.log(resp);
_this.$api.goodsDetail(params).then((resp) => {
// console.log(resp);
_this.data = resp
_this.getAllPriceOrWeight()
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(2)
})
// _this.$nextTick(() => {
// _this.$refs.pageView.setLoadState(2)
// })
}).catch(e => {
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(1)
})
})
}
},
getAllPriceOrWeight() {
let _this = this
var params = {
customerSid: getApp().globalData.sid,
brandId: _this.data.brandId,
}
console.log("getGoodsWeight", params);
_this.$api.getGoodsWeight(params).then((resp) => {
console.log("getGoodsWeight", resp);
_this.page.price = resp.totalPrice
_this.page.weight = resp.totalWeight
_this.page.remarks = resp.remarks
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(2)
})
}).catch(e => {
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(1)
})
})
},
inCart() {
this.data.goodsNumber = Number(this.data.goodsNumber) + 1
this.upDateShoppCart()
},
upDateShoppCart() {
var good = {
goodsSid: this.data.sid,
goodsName: this.data.name,
goodsNumber: this.data.goodsNumber,
affiliation: this.data.brandId,
price: this.data.mefenPrice,
weight: this.data.weight,
customerSid: getApp().globalData.sid
}
let _this = this
_this.$api.addShoppingCart(good).then((resp) => {
_this.shortToast('已加入购物车。')
_this.getAllPriceOrWeight()
}).catch(e => {
})
},
settlement() {
// 支付
if (this.page.weight < parseInt(this.data.qssl)) {
this.shortToast('满' + this.data.qssl + '斤才可定制云菜窖哦，请继续选菜吧。')
return
}
this.showPop()
},
showPop() {
this.$refs.inputDialog.open()
let timeOut = setInterval(() => {
if (this.countdown == 1) {
this.confirmText = "确定"
this.countdown = 5
this.dialogBeforeClose = false
clearInterval(timeOut)
} else {
this.dialogBeforeClose = true
this.countdown = this.countdown - 1;
this.confirmText = "我知道了" + "（" + this.countdown + "s）"
}
}, 1000)
},
saveGoods() {
var params = {
customerSid: getApp().globalData.sid,
// cardNumber: 1,
brandId: this.data.brandId,
totalTee: this.page.price,
// ordOrderDetailsVoList: list
}
console.log("params", params);
let _this = this
_this.$api.createVegeOrder(params).then((resp) => {
// console.log("resp", resp);
this.$pay(resp)
}).catch(e => {})
},
gotoCart() {
uni.navigateTo({
url: 'shoppCart?affiliation=' + this.data.brandId + "&weight=" + this.data.qssl + "&qdxy=" +
this.data.qdxy
})
},
showPop2() {
this.$refs.inputDialog2.open()
},
dialogInputConfirm(val) {
if (this.confirmText == "确定") {
this.confirmText = "我知道了（5s）",
this.dialogBeforeClose = true,
this.countdown = 5
this.saveGoods()
}
},
dialogInputConfirm2(val) {
console.log(">>>>>>>>>>>", this.dialogBeforeClose2);
this.dialogBeforeClose2 = false
},
}
}
</script>