yuncaijiao_applet/pages/records/transferRecords.vue

<template>
    <view
        style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
        <!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 -->
        <z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='true'>

            <view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;background: #fff;margin-top: 10px;
				border-radius: 10px;padding: 10px 20px;">

                <view class="item">
                    <text class="item_left">转赠单号：</text>
                    <text class="item_rifht">{{item.newCode}}</text>
                </view>
                <view class="item">
                    <text class="item_left">转赠时间：</text>
                    <text class="item_rifht">{{item.createTime}}</text>
                </view>
                <view class="item">
                    <text class="item_left">转赠留言：</text>
                    <text class="item_rifht">{{item.remarks}}</text>
                </view>
                <view class="item">
                    <text class="item_left">领取人员：</text>
                    <text class="item_rifht">{{item.lqNick}}</text>
                </view>
                <view
                    style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;">
                    <text style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goodss}}</text>
                    <button v-show="item.state=='1'" class='sharebtn' :data-info="item" open-type="share">待转赠</button>
                    <button v-show="item.state=='2'" class='sharebtn2'>转赠成功</button>

                </view>
            </view>

        </z-paging>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                styleObject: {
                    'padding-top': '10px',
                    'padding-bottom': '10px',
                    'border-radius': '15px',
                    'background': '#f2f2f2'
                },
                data: []
            }
        },
        methods: {
            // 分页的请求
            queryList(pageNo, pageSize) {
                let _this = this
                _this.$api.transferRecordsList({
                    "current": pageNo,
                    "size": pageSize,
                    "params": {
                        "customerSid": getApp().globalData.sid,
                        "state": '1', //1 我转赠的  2 赠与我的

                    }
                }).then((resp) => {
                    // 添加数据源
                    this.$refs.paging.complete(resp.records)
                }).catch(e => {
                    // 出错了，点击重试
                    _this.$refs.paging.complete(false);
                })
            },
            onShareAppMessage: function(res) {
                console.log("res", res)
                console.log("data", res.target.dataset)
                var data = res.target.dataset.info
                // this.shareCard(data.sid)
                // ①
                let shareData = JSON.stringify({
                    params: {
                        code: data.transferCode,
                        codeKey: data.sid
                    },
                    functionName: 'bindCard',
                    url: '/pages/bind/bind_cloudCard?code=' + data
                        .transferCode + "&codeKey=" + data.sid

                    // url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey,
                    // FunctionName:'share!
                })
                // 转码传输
                let value = encodeURIComponent(shareData)

                return {
                    title: '汇融农链-云菜窖',
                    // ②
                    path: '/pages/login/login?data=' + value,
                    imageUrl: 'https://ordermall.yxtsoft.com/lpkui/image/share_transfer.png', //自定义图片路径，显示图片长宽比是 5:4。
                    success: function(res) {
                        console.log('aaaa', "分享成功")
                    },
                    fail: function(res) {
                        // 转发失败
                        console.log('aaaa', "用户点击了取消")
                    }
                }
            },

        }
    }
</script>

<style scoped>
    .item {
        margin-top: 5px;
    }

    .item_left {
        font-size: 14px;
        color: #333;
    }

    .item_rifht {
        font-size: 13px;
        color: #666;
    }

    .sharebtn {
        background: #FE9039;
        font-size: 12px;
        color: #fff;
        width: 30vw;
        border-radius: 20px;
    }


    .sharebtn::after {
        border: none;
    }

    .sharebtn2 {
        background: #CFCFCF;
        width: 30vw;
        font-size: 12px;
        color: #fff;
        border-radius: 20px;
    }

    .sharebtn2::after {
        border: none;
    }
</style>