|
|
@@ -0,0 +1,315 @@
|
|
|
+<template>
|
|
|
+ <My_listbox ref="List" @getlist="getDetail">
|
|
|
+
|
|
|
+ <swiper class="swiper" v-if="slides.length" :indicator-dots="slides.length > 1" indicator-color="#DC808B"
|
|
|
+ indicator-active-color="#C30D23">
|
|
|
+ <swiper-item class="swiper-item" v-for="item in slides" :key="item.url">
|
|
|
+ <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
|
|
|
+ <view class="qrcode" @click="saveQrcode">
|
|
|
+ <text class="iconfont icon-xiazai" />
|
|
|
+ 二维码
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <view class="head">
|
|
|
+ <view class="line1">
|
|
|
+ <view class="left">
|
|
|
+ <text class="iconfont icon-biaoqian" />
|
|
|
+ {{ detail.mainclassnames }}
|
|
|
+ </view>
|
|
|
+ <view class="right" hover-class="navigator-hover"
|
|
|
+ @click="collectLoading ? '' : handleCollect(detail.iscollect)">
|
|
|
+ <u-loading-icon v-if="collectLoading" size="20" />
|
|
|
+ <block v-else>
|
|
|
+ <text v-if="detail.iscollect == 0" class="iconfont icon-weishoucang" />
|
|
|
+ <text v-else class="iconfont icon-yishoucang" style="color: #FFC300;" />
|
|
|
+ 收藏
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="title">{{ detail.name }}</view>
|
|
|
+ <view class="subtitle">型号：{{ detail.model || '--' }}</view>
|
|
|
+ <view class="subtitle">尺寸：{{ detail.spec || '--' }}</view>
|
|
|
+ <view class="subtitle">价格：{{ CNY(detail.price) || '--' }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="introduce">
|
|
|
+ <block v-if="detail.content">
|
|
|
+ <view class="introduce-title">
|
|
|
+ 产品介绍
|
|
|
+ </view>
|
|
|
+ <view class="introduce-text">
|
|
|
+ <u-parse :content="detail.content" />
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <bottom1 />
|
|
|
+ <view style="position: absolute;z-index: -999;top: 0;">
|
|
|
+ <l-painter ref="painter" hidden css="padding:10px;background:#fff;width: 148px;">
|
|
|
+ <l-painter-view>
|
|
|
+ <l-painter-view css="margin: 0 auto;width: 128px;">
|
|
|
+ <l-painter-qrcode :text="detail.appleturl" css="width: 128px; height: 128px;color:#000;" />
|
|
|
+ </l-painter-view>
|
|
|
+ <l-painter-view css="width: 108px;text-align: center;margin: 10px auto 0;">
|
|
|
+ <l-painter-text :text="detail.name" />
|
|
|
+ </l-painter-view>
|
|
|
+ </l-painter-view>
|
|
|
+ </l-painter>
|
|
|
+ </view>
|
|
|
+ </My_listbox>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import bottom1 from "../../components/bottomModules/bottom1.vue"
|
|
|
+import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue"
|
|
|
+import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue"
|
|
|
+import lPainterView from "../../uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue"
|
|
|
+import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue"
|
|
|
+export default {
|
|
|
+ components: { bottom1, lPainter, lPainterQrcode, lPainterText, lPainterView },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sa_fadid: null,
|
|
|
+ detail: {},
|
|
|
+ slides: [],
|
|
|
+ collectLoading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.sa_fadid = options.id;
|
|
|
+ this.getDetail(true);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetail(init = false) {
|
|
|
+ if (!init) return;
|
|
|
+ this.$Http.basic({
|
|
|
+ "id": 20240418141002,
|
|
|
+ "content": {
|
|
|
+ "sa_fadid": this.sa_fadid
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ this.$refs.List.RefreshToComplete()
|
|
|
+ console.log("获取单品详情", res)
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ this.detail = res.data;
|
|
|
+ this.slides = res.data.attinfos_pic.map(v => {
|
|
|
+ return {
|
|
|
+ cover: this.getSpecifiedImage(v.attinfos[0]),
|
|
|
+ url: v.attinfos[0].url
|
|
|
+ }
|
|
|
+ })
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: res.data.name
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCollect(iscollect) {
|
|
|
+ this.collectLoading = true;
|
|
|
+ this.$Http.basic({
|
|
|
+ "id": 20240416133702,
|
|
|
+ "content": {
|
|
|
+ "ownertable": "sa_fad",
|
|
|
+ "ownerid": this.detail.sa_fadid,
|
|
|
+ "type": 1
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ console.log("收藏", res)
|
|
|
+ this.collectLoading = false;
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ this.detail.iscollect = iscollect ? 0 : 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ saveQrcode() {
|
|
|
+ let that = this;
|
|
|
+ that.$refs.painter.canvasToTempFilePathSync({
|
|
|
+ fileType: "jpg",
|
|
|
+ // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
|
|
|
+ pathType: 'url',
|
|
|
+ quality: 1,
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.tempFilePath);
|
|
|
+ // 非H5 保存到相册
|
|
|
+ // H5 提示用户长按图另存
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success: function (e) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '图片已保存到系统相册',
|
|
|
+ showCancel: false
|
|
|
+ })
|
|
|
+ that.loading = false;
|
|
|
+ },
|
|
|
+ fail: ({ errMsg }) => {
|
|
|
+ if (errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '请授权添加到相册权限后再试！',
|
|
|
+ showCancel: false,
|
|
|
+ complete: (complete) => {
|
|
|
+ uni.openSetting({
|
|
|
+ success: res => {
|
|
|
+ that.loading = false;
|
|
|
+ if (res.authSetting['scope.writePhotosAlbum']) {
|
|
|
+ this.saveTheImage()
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '未获取授权！已取消保存',
|
|
|
+ showCancel: false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ that.loading = false;
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '已取消保存',
|
|
|
+ showCancel: false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }, getSheraDate() {
|
|
|
+ let detail = this.detail
|
|
|
+ return {
|
|
|
+ title: detail.name, // 标题
|
|
|
+ path: "/packageCase/product/detail?id=" + detail.sa_fadid, // 分享路径
|
|
|
+ imageUrl: this.detail.attinfos.find(v => v.usetype == "sa_fad").url || ""// 分享图
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ return this.getSheraDate()
|
|
|
+ },
|
|
|
+ onShareTimeline() {
|
|
|
+ return this.getSheraDate()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.swiper {
|
|
|
+ width: 375px;
|
|
|
+ height: 231px;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qrcode {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ width: 70px;
|
|
|
+ height: 25px;
|
|
|
+ background: rgba($color: #333333, $alpha: 0.5);
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.head {
|
|
|
+ background: #fff;
|
|
|
+ padding: 8px 10px 15px;
|
|
|
+
|
|
|
+ .line1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 80px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid #CCCCCC;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .subtitle {
|
|
|
+ line-height: 17px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.introduce {
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ line-height: 45px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-text {
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
